feat: add export in storage table

src/background/workflowEngine/blocksHandler/handlerBlocksGroup.js

@@ -44,7 +44,7 @@ function blocksGroup({ data, id }, { prevBlockData }) {
 
     resolve({
       data: prevBlockData,
-      nextBlockId: this.getBlockConnections(data.blocks[0].itemId),
+      nextBlockId: [data.blocks[0].itemId],
     });
   });
 }

src/components/newtab/workflows/WorkflowsLocal.vue

@@ -82,13 +82,12 @@
         </template>
         <template #footer-content>
           <v-remixicon
-            v-if="sharedWorkflowStore.workflows[workflow.id]"
+            v-if="sharedWorkflowStore.getById(workflow.id)"
             v-tooltip:bottom.group="
               t('workflow.share.sharedAs', {
-                name: sharedWorkflowStore.workflows[workflow.id]?.name.slice(
-                  0,
-                  64
-                ),
+                name: sharedWorkflowStore
+                  .getById(workflow.id)
+                  ?.name.slice(0, 64),
               })
             "
             name="riShareLine"

src/lib/vRemixicon.js

@@ -85,6 +85,7 @@ import {
   riDoubleQuotesL,
   riLightbulbLine,
   riFolderZipLine,
+  riFileShredLine,
   riHandHeartLine,
   riDatabase2Line,
   riSettings3Line,
@@ -206,6 +207,7 @@ export const icons = {
   riDoubleQuotesL,
   riLightbulbLine,
   riFolderZipLine,
+  riFileShredLine,
   riHandHeartLine,
   riDatabase2Line,
   riSettings3Line,

src/newtab/App.vue

@@ -108,7 +108,7 @@ const prevVersion = localStorage.getItem('ext-version') || '0.0.0';
 async function fetchUserData() {
   try {
     const { backup, hosted } = await getUserWorkflows();
-    userStore.hostedWorkflows = hosted;
+    userStore.hostedWorkflows = hosted || {};
 
     if (backup && backup.length > 0) {
       const { lastBackup } = browser.storage.local.get('lastBackup');

src/newtab/pages/storage/Tables.vue

@@ -5,7 +5,20 @@
         {{ tableDetail.name }}
       </h1>
       <div class="flex-grow"></div>
-      <ui-button v-tooltip="'Delete table'" icon @click="deleteTable">
+      <ui-button
+        v-tooltip.group="'Clear data'"
+        icon
+        class="ml-2"
+        @click="clearData"
+      >
+        <v-remixicon name="riFileShredLine" />
+      </ui-button>
+      <ui-button
+        v-tooltip="'Delete table'"
+        icon
+        class="text-red-400 dark:text-red-300 ml-4"
+        @click="deleteTable"
+      >
         <v-remixicon name="riDeleteBin7Line" />
       </ui-button>
     </div>
@@ -15,15 +28,31 @@
         :placeholder="t('common.search')"
         prepend-icon="riSearch2Line"
       />
+      <div class="flex-grow" />
+      <div class="flex-1"></div>
       <ui-button class="ml-4" @click="editTable">
         <v-remixicon name="riPencilLine" class="mr-2 -ml-1" />
         <span>Edit table</span>
       </ui-button>
-      <div class="flex-1"></div>
-      <ui-button class="text-red-400 dark:text-red-300" @click="clearData">
-        <v-remixicon name="riDeleteBin7Line" class="mr-2 -ml-1" />
-        <span>Clear data</span>
-      </ui-button>
+      <ui-popover trigger-width class="ml-4">
+        <template #trigger>
+          <ui-button variant="accent">
+            <span>{{ t('log.exportData.title') }}</span>
+            <v-remixicon name="riArrowDropDownLine" class="ml-2 -mr-1" />
+          </ui-button>
+        </template>
+        <ui-list class="space-y-1">
+          <ui-list-item
+            v-for="type in dataExportTypes"
+            :key="type.id"
+            v-close-popover
+            class="cursor-pointer"
+            @click="exportData(type.id)"
+          >
+            {{ t(`log.exportData.types.${type.id}`) }}
+          </ui-list-item>
+        </ui-list>
+      </ui-popover>
     </div>
     <ui-table
       :headers="table.header"
@@ -91,8 +120,10 @@ import { useWorkflowStore } from '@/stores/workflow';
 import { useLiveQuery } from '@/composable/liveQuery';
 import { useDialog } from '@/composable/dialog';
 import { objectHasKey } from '@/utils/helper';
+import { dataExportTypes } from '@/utils/shared';
 import StorageEditTable from '@/components/newtab/storage/StorageEditTable.vue';
 import dbStorage from '@/db/storage';
+import dataExporter from '@/utils/dataExporter';
 
 const { t } = useI18n();
 const route = useRoute();
@@ -152,6 +183,13 @@ function additionalHeaders(headers) {
 
   return headers;
 }
+function exportData(type) {
+  dataExporter(
+    tableData.value.items,
+    { name: tableDetail.value.name, type },
+    true
+  );
+}
 async function saveEditedTable({ columns, name, changes }) {
   const columnsChanges = Object.values(changes);
 

src/newtab/pages/workflows/Shared.vue

@@ -274,7 +274,8 @@ async function saveUpdatedSharedWorkflow() {
     const payload = {};
     changingKeys.forEach((key) => {
       if (key === 'drawflow') {
-        payload.drawflow = JSON.parse(workflow.value.drawflow);
+        const flow = workflow.value.drawflow;
+        payload.drawflow = typeof flow === 'string' ? JSON.parse(flow) : flow;
       } else {
         payload[key] = workflow.value[key];
       }
@@ -334,7 +335,7 @@ function insertToLocal() {
     version: browser.runtime.getManifest().version,
   };
 
-  workflowStore.insert(copy).then(() => {
+  workflowStore.insert(copy, { duplicateId: true }).then(() => {
     state.hasLocalCopy = true;
   });
 }

src/newtab/router.js

@@ -50,7 +50,7 @@ const routes = [
     component: WorkflowHost,
   },
   {
-    name: 'workflow-host',
+    name: 'workflow-shared',
     path: '/workflows/:id/shared',
     component: WorkflowShared,
   },

src/stores/sharedWorkflow.js

@@ -7,7 +7,11 @@ export const useSharedWorkflowStore = defineStore('shared-workflows', {
   }),
   getters: {
     toArray: (state) => Object.values(state.workflows),
-    getById: (state) => (id) => state.workflows[id],
+    getById: (state) => (id) => {
+      if (!state.workflows) return null;
+
+      return state.workflows[id] || null;
+    },
   },
   actions: {
     insert(data) {
@@ -57,7 +61,7 @@ export const useSharedWorkflowStore = defineStore('shared-workflows', {
         useCache
       );
 
-      this.workflows = workflows;
+      this.workflows = workflows || {};
     },
   },
 });

src/stores/workflow.js

@@ -11,7 +11,7 @@ import { cleanWorkflowTriggers } from '@/utils/workflowTrigger';
 import { parseJSON } from '@/utils/helper';
 import { useUserStore } from './user';
 
-const defaultWorkflow = (data = null) => {
+const defaultWorkflow = (data = null, options = {}) => {
   let workflowData = {
     id: nanoid(),
     name: '',
@@ -60,6 +60,10 @@ const defaultWorkflow = (data = null) => {
   };
 
   if (data) {
+    if (options.duplicateId && data.id) {
+      delete workflowData.id;
+    }
+
     if (data.drawflow?.nodes?.length > 0) {
       workflowData.drawflow.nodes = [];
     }
@@ -123,21 +127,25 @@ export const useWorkflowStore = defineStore('workflow', {
 
       this.retrieved = true;
     },
-    async insert(data = {}) {
+    async insert(data = {}, options = {}) {
       const insertedWorkflows = {};
 
       if (Array.isArray(data)) {
         data.forEach((item) => {
-          delete item.id;
+          if (!options.duplicateId) {
+            delete item.id;
+          }
 
-          const workflow = defaultWorkflow(item);
+          const workflow = defaultWorkflow(item, options);
           this.workflows[workflow.id] = workflow;
           insertedWorkflows[workflow.id] = workflow;
         });
       } else {
-        delete data.id;
+        if (!options.duplicateId) {
+          delete data.id;
+        }
 
-        const workflow = defaultWorkflow(data);
+        const workflow = defaultWorkflow(data, options);
         this.workflows[workflow.id] = workflow;
         insertedWorkflows[workflow.id] = workflow;
       }