Ensure the row key is unique even when the rows are sorted.

This commit is contained in:
Dean 2022-08-02 11:16:35 +01:00
parent 955ccc208e
commit e2f269bd1a
3 changed files with 71 additions and 59 deletions

View File

@ -6,6 +6,8 @@
Modal, Modal,
notifications, notifications,
ProgressCircle, ProgressCircle,
Layout,
Body,
} from "@budibase/bbui" } from "@budibase/bbui"
import { auth, apps } from "stores/portal" import { auth, apps } from "stores/portal"
import { processStringSync } from "@budibase/string-templates" import { processStringSync } from "@budibase/string-templates"
@ -29,6 +31,7 @@
lockedBy && lockedByYou ? "Locked by you" : `Locked by ${lockIdentifer}` lockedBy && lockedByYou ? "Locked by you" : `Locked by ${lockIdentifer}`
const getExpiryDuration = app => { const getExpiryDuration = app => {
console.log("Testing")
if (!app?.lockedBy?.lockedAt) { if (!app?.lockedBy?.lockedAt) {
return -1 return -1
} }
@ -72,62 +75,65 @@
{/if} {/if}
</div> </div>
<Modal bind:this={appLockModal}> <div>
<ModalContent <Modal bind:this={appLockModal}>
title={lockedByHeading} <ModalContent
dataCy={"app-lock-modal"} title={lockedByHeading}
showConfirmButton={false} dataCy={"app-lock-modal"}
showCancelButton={false} showConfirmButton={false}
> showCancelButton={false}
<p> >
Apps are locked to prevent work from being lost from overlapping changes <Layout noPadding>
between your team. <Body size="S">
</p> Apps are locked to prevent work from being lost from overlapping
changes between your team.
{#if lockedByYou && getExpiryDuration(app) > 0} </Body>
<span class="lock-expiry-body"> {#if lockedByYou && getExpiryDuration(app) > 0}
{processStringSync( <span class="lock-expiry-body">
"This lock will expire in {{ duration time 'millisecond' }} from now.", {processStringSync(
{ "This lock will expire in {{ duration time 'millisecond' }} from now. This lock will expire in This lock will expire in ",
time: getExpiryDuration(app), {
} time: getExpiryDuration(app),
)} }
</span> )}
{/if} </span>
<div class="lock-modal-actions">
<ButtonGroup>
<Button
secondary
quiet={lockedBy && lockedByYou}
disabled={processing}
on:click={() => {
appLockModal.hide()
}}
>
<span class="cancel"
>{lockedBy && !lockedByYou ? "Done" : "Cancel"}</span
>
</Button>
{#if lockedByYou}
<Button
secondary
disabled={processing}
on:click={() => {
releaseLock()
appLockModal.hide()
}}
>
{#if processing}
<ProgressCircle overBackground={true} size="S" />
{:else}
<span class="unlock">Release Lock</span>
{/if}
</Button>
{/if} {/if}
</ButtonGroup> <div class="lock-modal-actions">
</div> <ButtonGroup>
</ModalContent> <Button
</Modal> secondary
quiet={lockedBy && lockedByYou}
disabled={processing}
on:click={() => {
appLockModal.hide()
}}
>
<span class="cancel"
>{lockedBy && !lockedByYou ? "Done" : "Cancel"}</span
>
</Button>
{#if lockedByYou}
<Button
secondary
disabled={processing}
on:click={() => {
releaseLock()
appLockModal.hide()
}}
>
{#if processing}
<ProgressCircle overBackground={true} size="S" />
{:else}
<span class="unlock">Release Lock</span>
{/if}
</Button>
{/if}
</ButtonGroup>
</div>
</Layout>
</ModalContent>
</Modal>
</div>
<style> <style>
.lock-modal-actions { .lock-modal-actions {

View File

@ -6,6 +6,7 @@
export let app export let app
export let editApp export let editApp
export let appOverview export let appOverview
export let idx
</script> </script>
<div class="title" data-cy={`${app.devId}`}> <div class="title" data-cy={`${app.devId}`}>
@ -29,8 +30,8 @@
Never updated Never updated
{/if} {/if}
</div> </div>
<div class="desktop"> <div class="desktop check">
<AppLockModal {app} buttonSize="M" /> <span><AppLockModal {app} buttonSize="M" /></span>
</div> </div>
<div class="desktop"> <div class="desktop">
<div class="app-status"> <div class="app-status">

View File

@ -381,8 +381,13 @@
</div> </div>
<div class="appTable" class:unlocked> <div class="appTable" class:unlocked>
{#each filteredApps as app (app.appId)} {#each filteredApps as app, idx}
<AppRow {app} {editApp} {appOverview} /> <AppRow
{app}
{editApp}
{appOverview}
idx={`${idx}_${app.appId}`}
/>
{/each} {/each}
</div> </div>
</Layout> </Layout>