adds attachment display for single card, and fixes bind UI

holochain-apps · Jan 19, 2024 · 696fdb0 · 696fdb0
1 parent 6beb372
commit 696fdb0
Show file tree

Hide file tree

Showing 11 changed files with 251 additions and 57 deletions.
diff --git a/ui/src/AboutDialog.svelte b/ui/src/AboutDialog.svelte
@@ -72,7 +72,7 @@
 </script>
 
 
-<sl-dialog label="KanDo!: UI v0.8.14 for DNA v0.7.0" bind:this={dialog} width={600} >
+<sl-dialog label="KanDo!: UI v0.8.15 for DNA v0.7.0" bind:this={dialog} width={600} >
     <div class="about">
         <p>KanDo! is a demonstration Holochain app built by the Holochain Foundation.</p>
         <p> <b>Developers:</b>

diff --git a/ui/src/App.svelte b/ui/src/App.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import Controller from './Controller.svelte'
   import ControllerBoard from './ControllerBoard.svelte'
+  import ControllerCard from './ControllerCard.svelte'
   import ControllerBlockActiveBoards from './ControllerBlockActiveBoards.svelte'
   import { AppAgentWebsocket, AdminWebsocket } from '@holochain/client';
   import '@shoelace-style/shoelace/dist/themes/light.css';
@@ -27,7 +28,7 @@
 
   enum RenderType {
     App,
-    Board,
+    Hrl,
     BlockActiveBoards
   }
 
@@ -84,7 +85,7 @@
                     case "syn_integrity":
                       switch (weClient.renderInfo.view.entryType) {
                         case "document":
-                          renderType = RenderType.Board
+                          renderType = RenderType.Hrl
                           hrlWithContext = weClient.renderInfo.view.hrlWithContext
                           break;
                         default:
@@ -151,8 +152,10 @@
   {:else}
     {#if renderType== RenderType.App}
       <Controller  client={client} weClient={weClient} profilesStore={profilesStore} roleName={roleName}></Controller>
-    {:else if  renderType== RenderType.Board}
+    {:else if  renderType== RenderType.Hrl && !hrlWithContext.context}
       <ControllerBoard  board={hrlWithContext.hrl[1]} client={client} weClient={weClient} profilesStore={profilesStore} roleName={roleName}></ControllerBoard>
+    {:else if  renderType== RenderType.Hrl && hrlWithContext.context}
+      <ControllerCard  board={hrlWithContext.hrl[1]} cardId={hrlWithContext.context} client={client} weClient={weClient} profilesStore={profilesStore} roleName={roleName}></ControllerCard>
     {:else if  renderType== RenderType.BlockActiveBoards}
       <ControllerBlockActiveBoards client={client} weClient={weClient} profilesStore={profilesStore} roleName={roleName}></ControllerBlockActiveBoards>
     {/if}

diff --git a/ui/src/AttachmentsBind.svelte b/ui/src/AttachmentsBind.svelte
@@ -17,20 +17,29 @@
 </script>
 
 <div>
-    <h3>Create Attachment From:</h3>
+    <h3>Create Bound Item:</h3>
     {#each attachmentTypes as [hash, record]}
         <div>
         {#await store.weClient.appletInfo(hash)}
         ...
         {:then appletInfo}
-            <strong>{appletInfo.appletName}:</strong>
+            {#each appletInfo.groupsIds as groupHash} 
+                {#await store.weClient.groupProfile(groupHash)}...
+                {:then profile}
+                    <sl-icon src={profile.logo_src}></sl-icon> <strong>{profile.name}</strong>
+                {:catch error}
+                    {error}
+                {/await}
+            {/each}
+
+            {appletInfo.appletName}:
         {:catch error}
             {error}
         {/await}
         {#each Object.values(record) as aType}
         <sl-icon src={aType.icon_src}></sl-icon>{aType.label}
         <button class="control" on:click={async ()=>{
-            const hrl = await aType.create({hrl:[store.dnaHash,activeBoard.hash],context:""})
+            const hrl = await aType.create({hrl:[store.dnaHash,activeBoard.hash],context:undefined})
             dispatch("add-binding",hrl)
             }} >          
             <SvgIcon icon=faPlus size=12/>

diff --git a/ui/src/AttachmentsList.svelte b/ui/src/AttachmentsList.svelte
@@ -25,7 +25,8 @@
         <sl-button size="small" loading></sl-button>
       {:then { attachableInfo }}
         <sl-button  size="small"
-          on:click={()=>{
+          on:click={(e)=>{
+              e.stopPropagation()
               const hrlWithContext = hrlB64WithContextToRaw(attachment)
               store.weClient.openHrl(hrlWithContext)
             }}

diff --git a/ui/src/CardDetails.svelte b/ui/src/CardDetails.svelte
@@ -1,14 +1,12 @@
 <script lang="ts">
-  import type { Readable } from 'svelte/store';
   import { UngroupedId, type CardProps, type CategoryDef, type LabelDef } from "./board";
   import '@shoelace-style/shoelace/dist/components/select/select.js';
   import '@shoelace-style/shoelace/dist/components/option/option.js';
   import '@shoelace-style/shoelace/dist/components/textarea/textarea.js';
   import '@shoelace-style/shoelace/dist/components/input/input.js';
-  import '@shoelace-style/shoelace/dist/components/drawer/drawer.js';
   import { cloneDeep, isEqual } from "lodash";
   import { v1 as uuidv1 } from "uuid";
-  import { getContext } from 'svelte';
+  import { getContext, onMount } from 'svelte';
   import type { KanDoStore } from './store';
   import Avatar from './Avatar.svelte';
   import { decodeHashFromBase64, encodeHashToBase64 } from '@holochain/client';
@@ -17,9 +15,9 @@
   import { Marked } from "@ts-stack/markdown";
   import SvgIcon from "./SvgIcon.svelte";
   import ClickEdit from './ClickEdit.svelte';
-  import { hrlWithContextToB64 } from './util';
   import AttachmentsList from './AttachmentsList.svelte';
   import AttachmentsDialog from "./AttachmentsDialog.svelte"
+  import type { HrlWithContext } from '@lightningrodlabs/we-applet';
 
   
   const { getStore } :any = getContext("store");
@@ -39,18 +37,10 @@
 
   const DEFAULT_PROPS = {title:"", description:"", category: "", agents:[], labels:[], attachments:[]}
 
-  //let props:CardProps = DEFAULT_PROPS
-  let cardId:uuidv1 = ""
+  export let cardId:uuidv1
+  export let showControls = true
 
-  let dialog
-
-  export const open = (id: uuidv1)=>{
-    cardId = id
-    updateLatestComment()
-    dialog.show()
-  }
-
-  const updateLatestComment = () => {
+  export const updateLatestComment = () => {
     const card =  $state.cards.find(c=>c.id == cardId)
     if (card) {
       const comments = Object.values(card.comments).sort((a,b)=> a.timestamp - b.timestamp)
@@ -91,7 +81,6 @@
   }
 
   export const reset = ()=>{
-    dialog.hide()
     editingTitle = false
     editingDescription = false
   }
@@ -250,12 +239,12 @@
     handleSave(props)
   }
 
+  const copyHrlToClipboard = () => {
+    const attachment: HrlWithContext = { hrl: [store.dnaHash, $activeBoard.hash], context: cardId }
+    store.weClient?.hrlToClipboard(attachment)
+  }
 </script>
-<sl-drawer class="edit-card" bind:this={dialog}
-  style="--size:500px"
-  no-header
-  on:sl-hide={()=>close()}
-  >
+
 {#if store.weClient}
   <AttachmentsDialog activeBoard={$activeBoard} bind:this={attachmentsDialog}></AttachmentsDialog>
 {/if}
@@ -272,7 +261,7 @@
         {/each}
         </div>
       </div>
-      {:else}
+      {:else if showControls}
       <div class="top-spacer"></div>
       {/if}
 
@@ -285,21 +274,28 @@
             handleSave(props)
           }}></ClickEdit>
         </div>
-        <div class="card-controls">
+        {#if showControls}
+          <div class="card-controls">
+            {#if store.weClient}
+              <div class="details-button archive-button" title="Archive this card" on:click={()=>copyHrlToClipboard()}>
+                <SvgIcon icon=faShare size="18px"/>
+              </div>
+            {/if}
             {#if handleDelete}
               <div class="details-button delete-button" title="Delete this card" on:click={()=>handleDelete(cardId)}>
-                <SvgIcon icon=faTrash size="18px"/>
+                <SvgIcon icon=faTrash size="16px"/>
               </div>
             {/if}
             {#if handleArchive}
               <div class="details-button archive-button" title="Archive this card" on:click={()=>{close();handleArchive()}}>
                 <SvgIcon icon=faArchive size="18px"/>
               </div>
             {/if}
-          <div class="details-button" title="Close this card" on:click={(e)=>{close()}}>
-            <SvgIcon icon=faClose size="18px"/>
+            <div class="details-button" title="Close this card" on:click={(e)=>{close()}}>
+              <SvgIcon icon=faClose size="18px"/>
+            </div>
           </div>
-        </div>
+        {/if}
       </div>
       <div class="belongs-to" style="display:flex; align-items: center;">
         <div >In column <strong>{store.getCardGroupName(cardId, $state)}</strong></div>
@@ -506,15 +502,17 @@
     </div>
     {/if}
     {#if store.weClient}
-      <div style="margin-left:10px; margin-bottom:5px;">
-        <button class="attachment-button" on:click={()=>attachmentsDialog.open(card)} >          
-          <SvgIcon icon="link" size="16px"/>
-        </button>
+      <div style="display:flex; flex-wrap:wrap; align-items: center; margin-bottom:10px;">
+        <div style="margin-left:10px; margin-right:10px;">
+          <button class="attachment-button" on:click={()=>attachmentsDialog.open(card)} >          
+            <SvgIcon icon="link" size="16px"/>
+          </button>
+        </div>
+        {#if props.attachments}
+          <AttachmentsList attachments={props.attachments}
+            on:remove-attachment={(e)=>removeAttachment(e.detail)}/>
+        {/if}
       </div>
-      {#if props.attachments}
-         <AttachmentsList attachments={props.attachments}
-          on:remove-attachment={(e)=>removeAttachment(e.detail)}/>
-      {/if}
     {/if}
 
     <sl-dialog bind:this={commentDialog}>
@@ -620,7 +618,6 @@
     </div>
   </div>
 </div>
-</sl-drawer>
 <style>
   .category-selected {
     border: solid 2px rgba(35, 32, 74, .5);
@@ -636,7 +633,7 @@
   }
   .card-editor {
     display: flex;
-    flex-basis: 270px;
+    flex-basis: 100%;
     font-style: normal;
     color: rgba(35, 32, 74, 1.0);
     justify-content: space-between;

diff --git a/ui/src/CardDetailsDrawer.svelte b/ui/src/CardDetailsDrawer.svelte
@@ -0,0 +1,57 @@
+<script lang="ts">
+
+  import '@shoelace-style/shoelace/dist/components/drawer/drawer.js';
+  import type { v1 as uuidv1 } from "uuid";
+  import { getContext } from 'svelte';
+  import type { KanDoStore } from './store';
+
+  import CardDetails from "./CardDetails.svelte";
+
+  const { getStore } :any = getContext("store");
+  let store: KanDoStore = getStore();
+
+  let cardId:uuidv1 = ""
+
+  let dialog
+  let details: CardDetails
+    
+  export const open = (id: uuidv1)=>{
+    cardId = id
+    details.updateLatestComment()
+    dialog.show()
+  }
+
+  export const reset = ()=>{
+    dialog.hide()
+    details.reset()
+  }
+
+</script>
+<sl-drawer class="edit-card" bind:this={dialog}
+  style="--size:500px"
+  no-header
+  on:sl-hide={()=>close()}
+  >
+  <CardDetails bind:this={details} cardId={cardId} />
+</sl-drawer>
+<style>
+  .edit-card::part(base) {
+    height: calc(100vh - 97px);
+    bottom: 0;
+    top: initial;
+    z-index: 150;
+  }
+
+  .edit-card::part(body) {
+    padding: 0;
+  }
+
+  .edit-card::part(panel) {
+    box-shadow: 0px 10px 15px rgba(35, 32, 74, 0.2);
+  }
+
+  .edit-card::part(overlay) {
+    display: none;
+  }
+
+</style>