move export/archive to board menu

holochain-apps · Dec 19, 2023 · 1ad141e · 1ad141e
1 parent f66e38d
commit 1ad141e
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 44 deletions.
diff --git a/ui/src/BoardEditor.svelte b/ui/src/BoardEditor.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { Group, LabelDef, type BoardProps, type BoardState, CategoryDef, UngroupedId, Board } from './board';
+    import { Group, LabelDef, type BoardProps, CategoryDef, UngroupedId, Board } from './board';
     import { getContext, onMount } from 'svelte';
   	import DragDropList, { VerticalDropZone, reorder, type DropEvent } from 'svelte-dnd-list';
     import ColorPicker from 'svelte-awesome-color-picker';
@@ -8,7 +8,6 @@
     import '@shoelace-style/shoelace/dist/components/button/button.js';
     import '@shoelace-style/shoelace/dist/components/input/input.js';
     import '@shoelace-style/shoelace/dist/components/checkbox/checkbox.js';
-    import sanitize from "sanitize-filename";
     import SvgIcon from "./SvgIcon.svelte"
     import { cloneDeep } from "lodash";
     import type { KanDoStore } from './store';
@@ -19,9 +18,6 @@
     const store:KanDoStore = getStore();
     $: uiProps = store.uiProps
 
-    $: activeBoard = store.boardList.activeBoard;
-    $: state = $activeBoard ? $activeBoard.readableState() : undefined
-
     export let handleSave
     export let handleDelete = undefined
     export let cancelEdit
@@ -34,26 +30,6 @@
     let categoryDefs: Array<CategoryDef> = []
     let nameInput
 
-    const exportBoard = (state: BoardState) => {
-        const prefix = "kando"
-        const fileName = sanitize(`${prefix}_export_${state.name}.json`)
-        download(fileName, JSON.stringify(state))
-        alert(`Your board was exported to your Downloads folder as: '${fileName}'`)
-    }
-
-    const download = (filename: string, text: string) => {
-      var element = document.createElement('a');
-      element.setAttribute('href', 'data:text/json;charset=utf-8,' + encodeURIComponent(text));
-      element.setAttribute('download', filename);
-
-      element.style.display = 'none';
-      document.body.appendChild(element);
-
-      element.click();
-
-      document.body.removeChild(element);
-    }
-
     export const reset = () => {
       text = ''
       props = {bgUrl: ""}
@@ -281,11 +257,6 @@
     </div>
     {/if}
     <div class='controls'>
-      {#if boardHash}
-        <sl-button class="board-control" on:click={() => exportBoard($state)} title="Export">
-          <SvgIcon icon=faFileExport /> Export
-        </sl-button>
-      {/if}
       {#if handleDelete}
         <sl-button class="board-control" on:click={handleDelete}>
           Archive

diff --git a/ui/src/EditBoardDialog.svelte b/ui/src/EditBoardDialog.svelte
@@ -70,18 +70,6 @@
         }
         close()
     }
-    const archiveBoard = () => {
-        store.boardList.archiveBoard(boardHash)
-        const recent = get(store.uiProps).recent
-        const boardHashB64 = encodeHashToBase64(boardHash)
-        const idx = recent.findIndex((h)=> h === boardHashB64)
-        if (idx >= 0) {
-            recent.splice(idx,1)
-            store.setUIprops({recent})
-        }
-        store.setUIprops({showMenu: true})
-        close()
-    }
     const close = ()=>{
         dialog.hide()
         boardHash=undefined
@@ -99,5 +87,5 @@ on:sl-request-close={(event)=>{
     if (event.detail.source === 'overlay') {
     event.preventDefault();    
 }}}>
-    <BoardEditor bind:this={boardEditor} handleSave={updateBoard} handleDelete={archiveBoard} cancelEdit={close}/>
+    <BoardEditor bind:this={boardEditor} handleSave={updateBoard} cancelEdit={close}/>
 </sl-dialog>
diff --git a/ui/src/KanDoPane.svelte b/ui/src/KanDoPane.svelte
@@ -19,6 +19,7 @@
   import ClickEdit from "./ClickEdit.svelte";
   import { onVisible } from "./util";
   import SvgIcon from "./SvgIcon.svelte";
+  import { exportBoard } from "./export";
 
   onMount(async () => {
         onVisible(columnNameElem,()=>{
@@ -410,6 +411,15 @@
           <sl-menu-item on:click={()=> editBoardDialog.open(cloneDeep(activeBoard.hash))} class="board-settings" >
               <SvgIcon icon=faCog  style="background: transparent;"/> <span>Settings</span>
           </sl-menu-item>
+          <sl-menu-item on:click={() => exportBoard($state)} title="Export" class="board-export" >
+            <SvgIcon icon=faFileExport /> <span>Export</span>
+          </sl-menu-item>
+          <sl-menu-item on:click={() => {
+            store.boardList.archiveBoard(activeBoard.hash)
+            store.setUIprops({showMenu: true})
+            }} title="Archive" class="board-archive" >
+            <SvgIcon icon=faArchive /> <span>Archive</span>
+          </sl-menu-item>
           <sl-menu-item  on:click={leaveBoard} class="leave-board" >
               <SvgIcon icon=faArrowTurnDown /> <span>Leave board</span>
           </sl-menu-item>
@@ -703,7 +713,7 @@
   .board-options .board-settings {
     width: 100%;
   }
-  .board-options .board-settings span, .board-options .leave-board span, .board-options .participants span {
+  .board-options .board-settings span, .board-export span, .board-archive span, .board-options .leave-board span, .board-options .participants span {
     font-size: 16px;
     font-weight: bold;
   }

diff --git a/ui/src/export.ts b/ui/src/export.ts
@@ -0,0 +1,23 @@
+import type { BoardState } from "./board"
+import sanitize from "sanitize-filename";
+
+
+const download = (filename: string, text: string) => {
+    var element = document.createElement('a');
+    element.setAttribute('href', 'data:text/json;charset=utf-8,' + encodeURIComponent(text));
+    element.setAttribute('download', filename);
+
+    element.style.display = 'none';
+    document.body.appendChild(element);
+
+    element.click();
+
+    document.body.removeChild(element);
+}
+
+export const exportBoard = (state: BoardState) => {
+    const prefix = "kando"
+    const fileName = sanitize(`${prefix}_export_${state.name}.json`)
+    download(fileName, JSON.stringify(state))
+    alert(`Your board was exported to your Downloads folder as: '${fileName}'`)
+}