Board: fix card live updates (#1403)

plugins/board-resources/src/components/EditCard.svelte

@@ -35,20 +35,18 @@
   export let _class: Ref<Class<Card>>
   const dispatch = createEventDispatcher()
   const client = getClient()
-  const query = createQuery()
+  const cardQuery = createQuery()
+  const stateQuery = createQuery()
 
   let object: Card | undefined
   let state: State | undefined
   let handleMove: () => void
 
-  $: _id &&
-    _class &&
-    query.query(_class, { _id }, async (result) => {
+  $: cardQuery.query(_class, { _id }, async (result) => {
       object = result[0]
     })
 
-  $: object &&
-    query.query(task.class.State, { _id: object.state }, async (result) => {
+  $: object?.state && stateQuery.query(task.class.State, { _id: object.state }, async (result) => {
       state = result[0]
     })
 
@@ -103,7 +101,7 @@
           <div class="flex-grow mr-4">
             <div class="flex-row-streach">
               <div class="w-9" />
-              <CardDetails value={object} />
+              <CardDetails bind:value={object} />
             </div>
             <div class="flex-row-streach mt-4 mb-2">
               <div class="w-9">
@@ -127,10 +125,10 @@
             </div>
             <!-- TODO attachments-->
             <!-- TODO checklists -->
-            <CardActivity value={object} />
+            <CardActivity bind:value={object} />
           </div>
 
-          <CardActions value={object} />
+          <CardActions bind:value={object} />
         </div>
       </div>
     </Scroller>
@@ -138,11 +136,6 @@
 {/if}
 
 <style lang="scss">
-  .close-button {
-    position: absolute;
-    top: 0.7rem;
-    right: 0.7rem;
-  }
   .state-name {
     text-decoration: underline;
 

plugins/board-resources/src/components/editor/CardActions.svelte

@@ -27,14 +27,15 @@
   export let value: Card
   const client = getClient()
 
-  const suggestedActions: CardAction[] = []
-  const addToCardActions: CardAction[] = []
-  const automationActions: CardAction[] = []
-  const actions: CardAction[] = []
-
   let actionGroups: { label: IntlString; actions: CardAction[] }[] = []
 
-  getCardActions(client).then(async (result) => {
+  async function fetch() {
+    const suggestedActions: CardAction[] = []
+    const addToCardActions: CardAction[] = []
+    const automationActions: CardAction[] = []
+    const actions: CardAction[] = []
+    const result = await getCardActions(client)
+
     for (const action of result) {
       let supported = true
       if (action.supported) {
@@ -74,7 +75,14 @@
         actions: actions.sort(cardActionSorter)
       }
     ]
-  })
+  }
+
+  fetch()
+
+  $: value.members && fetch()
+  $: value.isArchived && fetch()
+  $: !value.isArchived && fetch()
+
 </script>
 
 {#if value}

plugins/board-resources/src/utils/CardUtils.ts

@@ -36,12 +36,12 @@ export function hasDate (card: Card): boolean {
 
 export function addCurrentUser (card: Card, client: Client): void {
   const employee = (getCurrentAccount() as EmployeeAccount).employee
-  card.members = card.members ?? []
+  const members = card.members ?? []
 
-  if (card.members.includes(employee)) {
+  if (members.includes(employee)) {
     return
   }
 
-  card.members.push(employee)
-  updateCard(client, card, 'members', card.members)
+  members.push(employee)
+  updateCard(client, card, 'members', members)
 }