feat: add global data to the collection

.eslintrc.js

@@ -30,6 +30,7 @@ module.exports = {
   // add your custom rules here
   rules: {
     'no-undef': 'off',
+    'no-console': ['warn', { allow: ['warn', 'error'] }],
     'no-underscore-dangle': 'off',
     'func-names': 'off',
     'import/extensions': [

src/background/collection-engine/flow-handler.js

@@ -1,6 +1,6 @@
 import WorkflowEngine from '../workflow-engine';
 import dataExporter from '@/utils/data-exporter';
-/* to-do pass prev workflow tab id into the next one */
+
 export function workflow(flow) {
   return new Promise((resolve, reject) => {
     const currentWorkflow = this.workflows.find(({ id }) => id === flow.itemId);
@@ -13,12 +13,14 @@ export function workflow(flow) {
       return;
     }
 
+    const { globalData } = this.collection;
     this.currentWorkflow = currentWorkflow;
 
     const engine = new WorkflowEngine(currentWorkflow, {
       isInCollection: true,
       collectionLogId: this.id,
       collectionId: this.collection.id,
+      globalData: globalData.trim() === '' ? null : globalData,
     });
 
     this.workflowEngine = engine;

src/background/workflow-engine/index.js

@@ -65,7 +65,7 @@ class WorkflowEngine {
     workflow,
     { globalData, tabId = null, isInCollection, collectionLogId }
   ) {
-    const globalDataVal = globalData ?? workflow.globalData;
+    const globalDataVal = globalData || workflow.globalData;
 
     this.id = nanoid();
     this.tabId = tabId;

src/models/collection.js

@@ -11,9 +11,10 @@ class Collection extends Model {
   static fields() {
     return {
       id: this.uid(() => nanoid()),
-      name: this.string(''),
       flow: this.attr([]),
+      name: this.string(''),
       createdAt: this.number(),
+      globalData: this.string(''),
       options: this.attr({
         atOnce: false,
       }),

src/newtab/pages/collections/[id].vue

@@ -55,34 +55,44 @@
         </draggable>
       </div>
       <div class="flex-1 relative">
-        <div class="px-1 mb-4 inline-block rounded-lg bg-white">
-          <ui-tabs
-            v-model="state.activeTab"
-            class="border-none h-full space-x-1"
+        <div class="flex items-center mb-4">
+          <div class="px-1 inline-block rounded-lg bg-white">
+            <ui-tabs
+              v-model="state.activeTab"
+              class="border-none h-full space-x-1"
+            >
+              <ui-tab value="flow">Flow</ui-tab>
+              <ui-tab value="logs">Logs</ui-tab>
+              <ui-tab value="running">
+                Running
+                <span
+                  v-if="runningCollection.length > 0"
+                  class="
+                    ml-2
+                    p-1
+                    text-center
+                    inline-block
+                    text-xs
+                    rounded-full
+                    bg-black
+                    text-white
+                  "
+                  style="min-width: 25px"
+                >
+                  {{ runningCollection.length }}
+                </span>
+              </ui-tab>
+              <ui-tab value="options">Options</ui-tab>
+            </ui-tabs>
+          </div>
+          <div class="flex-grow"></div>
+          <ui-button
+            v-tooltip="'Global data'"
+            icon
+            @click="state.showGlobalData = !state.showGlobalData"
           >
-            <ui-tab value="flow">Flow</ui-tab>
-            <ui-tab value="logs">Logs</ui-tab>
-            <ui-tab value="running">
-              Running
-              <span
-                v-if="runningCollection.length > 0"
-                class="
-                  ml-2
-                  p-1
-                  text-center
-                  inline-block
-                  text-xs
-                  rounded-full
-                  bg-black
-                  text-white
-                "
-                style="min-width: 25px"
-              >
-                {{ runningCollection.length }}
-              </span>
-            </ui-tab>
-            <ui-tab value="options">Options</ui-tab>
-          </ui-tabs>
+            <v-remixicon name="riDatabase2Line" />
+          </ui-button>
         </div>
         <ui-tab-panels v-model="state.activeTab">
           <ui-tab-panel class="relative" value="flow">
@@ -200,13 +210,31 @@
       </div>
     </div>
   </div>
+  <ui-modal v-model="state.showGlobalData" content-class="max-w-xl">
+    <template #header>Global data</template>
+    <p class="inline-block">
+      This will overwrite the global data of the workflow
+    </p>
+    <p class="float-right clear-both" title="Characters limit">
+      {{ collection.globalData.length }}/{{ (1e4).toLocaleString() }}
+    </p>
+    <prism-editor
+      :model-value="collection.globalData"
+      :highlight="highlighter('json')"
+      class="h-full scroll mt-2"
+      style="height: calc(100vh - 10rem)"
+      @update:modelValue="updateGlobalData"
+    />
+  </ui-modal>
 </template>
 <script setup>
 import { computed, shallowReactive, onMounted, watch } from 'vue';
 import { nanoid } from 'nanoid';
 import { useStore } from 'vuex';
 import { useRoute, useRouter } from 'vue-router';
+import { PrismEditor } from 'vue-prism-editor';
 import Draggable from 'vuedraggable';
+import { highlighter } from '@/lib/prism';
 import { useDialog } from '@/composable/dialog';
 import { sendMessage } from '@/utils/message';
 import Log from '@/models/log';
@@ -240,6 +268,7 @@ const dialog = useDialog();
 const state = shallowReactive({
   query: '',
   activeTab: 'flow',
+  showGlobalData: false,
   sidebarTab: 'workflows',
 });
 const collectionOptions = shallowReactive({
@@ -294,6 +323,15 @@ function updateCollection(data) {
     data,
   });
 }
+function updateGlobalData(str) {
+  let value = str;
+
+  if (value.length > 1e4) {
+    value = value.slice(0, 1e4);
+  }
+
+  updateCollection({ globalData: value });
+}
 function updateCollectionFlow(event) {
   const flow = event.map(({ type, id, flowId, data }) => {
     const itemFlowId = flowId || nanoid();

src/utils/workflow-trigger.js

@@ -39,8 +39,6 @@ export function registerSpecificDay(workflowId, data) {
   const findDate =
     dates.find((date) => date.valueOf() > Date.now()) || dates[0].add(7, 'day');
 
-  console.log(findDate.valueOf(), new Date(findDate.valueOf()));
-
   return browser.alarms.create(workflowId, {
     when: findDate.valueOf(),
   });