feat(editor): add date to trigger

src/components/block/BlockBase.vue

@@ -13,20 +13,26 @@
       "
     >
       <span
-        :class="categories[state.blockData.category]?.color"
+        :class="categories[state.blockDetails.category]?.color"
         class="inline-block p-2 mr-2 rounded-lg bg-green-200"
       >
         <v-remixicon
-          :path="icons[state.blockData.icon] || icons.riGlobalLine"
+          :path="icons[state.blockDetails.icon] || icons.riGlobalLine"
         />
       </span>
-      <div style="max-width: 220px">
+      <div style="max-width: 200px">
         <p class="font-semibold leading-none whitespace-nowrap">
-          {{ state.blockData.name }}
+          {{ state.blockDetails.name }}
         </p>
         <p class="text-gray-600 text-overflow leading-tight">
           {{ state.blockData.description }}
         </p>
+        <input
+          type="text"
+          class="hidden trigger"
+          disabled="true"
+          @change="handleDataChange"
+        />
       </div>
     </div>
     <div
@@ -57,7 +63,7 @@
   </div>
 </template>
 <script setup>
-import { ref, nextTick, shallowReactive } from 'vue';
+import { ref, nextTick, reactive } from 'vue';
 import { VRemixIcon as VRemixicon } from 'v-remixicon';
 import emitter from 'tiny-emitter/instance';
 import { icons } from '@/lib/v-remixicon';
@@ -71,30 +77,39 @@ const props = defineProps({
 });
 
 const rootRef = ref(null);
-const state = shallowReactive({
+const state = reactive({
   blockId: '',
+  blockDetails: {},
   blockData: {},
 });
 
 function editBlock() {
-  const { data } = props.editor.getNodeFromId(state.blockId);
   emitter.emit('editor:edit-block', {
-    ...state.blockData,
-    data,
+    ...state.blockDetails,
+    data: state.blockData,
     blockId: state.blockId,
   });
 }
+function handleDataChange() {
+  const { data } = props.editor.getNodeFromId(state.blockId);
+
+  state.blockData = data;
+}
 
 nextTick(() => {
+  if (state.blockId) return;
+
   state.blockId = rootRef.value?.parentElement.parentElement.id.replace(
     'node-',
     ''
   );
 
   if (state.blockId) {
-    const { name } = props.editor.getNodeFromId(state.blockId);
+    const { name, data } = props.editor.getNodeFromId(state.blockId);
+    const details = tasks[name];
 
-    state.blockData = { id: name, ...tasks[name] };
+    state.blockDetails = { id: name, ...details };
+    state.blockData = data || details.data;
   }
 });
 </script>

src/components/newtab/workflow/WorkflowBuilder.vue

@@ -78,7 +78,6 @@ export default {
       emit('load', editor.value);
 
       if (props.data) {
-        console.log(props.data, 'asas');
         const data =
           typeof props.data === 'string' ? JSON.parse(props.data) : props.data;
 

src/components/newtab/workflow/WorkflowEditBlock.vue

@@ -22,12 +22,12 @@
 <script>
 import { computed } from 'vue';
 import EditTrigger from './edit/EditTrigger.vue';
-</script>
-<script setup>
+
 export default {
   components: { EditTrigger },
 };
-
+</script>
+<script setup>
 const props = defineProps({
   data: {
     type: Object,
@@ -38,7 +38,6 @@ const emit = defineEmits(['close', 'update']);
 
 const blockData = computed({
   get() {
-    console.log(props.data);
     return props.data.data || {};
   },
   set(value) {

src/components/newtab/workflow/edit/EditTrigger.vue

@@ -7,27 +7,56 @@
   >
     <option value="manual">Manual</option>
     <option value="interval">Interval</option>
+    <option value="date">Date</option>
   </ui-select>
-  <div v-if="data.type === 'interval'" class="flex items-center">
-    <ui-input
-      :model-value="data.interval || '60'"
-      type="number"
-      class="mt-1 w-full mr-2"
-      label="Interval (minutes)"
-      placeholder="5-120"
-      @change="updateInputValue($event, { key: 'interval', min: 5, max: 120 })"
-    />
-    <ui-input
-      :model-value="data.delay || '5'"
-      type="number"
-      class="mt-1 w-full"
-      label="Delay (minutes)"
-      placeholder="0-20"
-      @change="updateInputValue($event, { key: 'delay', min: 0, max: 20 })"
-    />
-  </div>
+  <transition-expand mode="out-in">
+    <div v-if="data.type === 'interval'" class="flex items-center mt-1">
+      <ui-input
+        :model-value="data.interval || '60'"
+        type="number"
+        class="w-full mr-2"
+        label="Interval (minutes)"
+        placeholder="5-120"
+        min="5"
+        max="120"
+        @change="
+          updateIntervalInput($event, { key: 'interval', min: 5, max: 120 })
+        "
+      />
+      <ui-input
+        :model-value="data.delay || '5'"
+        type="number"
+        class="w-full"
+        label="Delay (minutes)"
+        min="0"
+        max="20"
+        placeholder="0-20"
+        @change="updateIntervalInput($event, { key: 'delay', min: 0, max: 20 })"
+      />
+    </div>
+    <div v-else-if="data.type === 'date'" class="mt-2">
+      <ui-input
+        :model-value="data.date || minDate"
+        :max="maxDate"
+        :min="minDate"
+        class="w-full"
+        type="date"
+        placeholder="Date"
+        @change="updateDate"
+      />
+      <ui-input
+        :model-value="data.time || '00:00'"
+        type="time"
+        class="w-full mt-2"
+        placeholder="Time"
+        @change="updateData({ time: $event || '00:00' })"
+      />
+    </div>
+  </transition-expand>
 </template>
 <script setup>
+import dayjs from 'dayjs';
+
 const props = defineProps({
   data: {
     type: Object,
@@ -36,10 +65,13 @@ const props = defineProps({
 });
 const emit = defineEmits(['update:data']);
 
+const maxDate = dayjs().add(30, 'day').format('YYYY-MM-DD');
+const minDate = dayjs().format('YYYY-MM-DD');
+
 function updateData(value) {
   emit('update:data', { ...props.data, ...value });
 }
-function updateInputValue(value, { key, min, max }) {
+function updateIntervalInput(value, { key, min, max }) {
   let num = +value;
 
   if (num < min) num = min;
@@ -47,4 +79,14 @@ function updateInputValue(value, { key, min, max }) {
 
   updateData({ [key]: num });
 }
+function updateDate(value) {
+  if (!value) return;
+
+  let date = value;
+
+  if (dayjs(minDate).isAfter(value)) date = minDate;
+  else if (dayjs(maxDate).isBefore(value)) date = maxDate;
+
+  updateData({ date });
+}
 </script>

src/components/ui/UiInput.vue

@@ -22,13 +22,15 @@
             placeholder,
             type,
             autofocus,
+            min,
+            max,
           }"
-          class="py-2 px-4 rounded-lg w-full bg-input bg-transparent transition"
           :class="{
             'opacity-75 pointer-events-none': disabled,
             'pl-10': prependIcon || $slots.prepend,
           }"
           :value="modelValue"
+          class="py-2 px-4 rounded-lg w-full bg-input bg-transparent transition"
           @keydown="$emit('keydown', $event)"
           @input="emitValue"
         />
@@ -74,6 +76,14 @@ export default {
       type: String,
       default: '',
     },
+    max: {
+      type: [String, Number],
+      default: null,
+    },
+    min: {
+      type: [String, Number],
+      default: null,
+    },
   },
   emits: ['update:modelValue', 'change', 'keydown'],
   setup(props, { emit }) {

src/lib/comps-ui.js

@@ -20,7 +20,7 @@ function componentsExtractor(app, components) {
 export default function (app) {
   app.directive('autofocus', VAutofocus);
   app.directive('close-popover', VClosePopover);
-  console.log(app);
+
   componentsExtractor(app, uiComponents);
   componentsExtractor(app, transitionComponents);
 }

src/newtab/App.vue

@@ -6,7 +6,7 @@
   <ui-dialog />
 </template>
 <script setup>
-import { onMounted, ref, getCurrentInstance } from 'vue';
+import { onMounted, ref } from 'vue';
 import { useStore } from 'vuex';
 import browser from 'webextension-polyfill';
 import AppSidebar from '@/components/newtab/app/AppSidebar.vue';
@@ -14,7 +14,6 @@ import AppSidebar from '@/components/newtab/app/AppSidebar.vue';
 const store = useStore();
 
 const retrieved = ref(false);
-console.log(getCurrentInstance(), AppSidebar);
 
 onMounted(async () => {
   try {

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

@@ -53,7 +53,12 @@ const workflow = computed(() => Workflow.find(workflowId) || {});
 const updateBlockData = debounce((data) => {
   state.blockData.data = data;
   editor.value.updateNodeDataFromId(state.blockData.blockId, data);
-  console.log(editor.value.export());
+
+  const inputEl = document.querySelector(
+    `#node-${state.blockData.blockId} input.trigger`
+  );
+
+  if (inputEl) inputEl.dispatchEvent(new Event('change'));
 }, 250);
 function addBlock(data) {
   Task.insert({
@@ -78,7 +83,6 @@ function saveWorkflow() {
   updateWorkflow({ drawflow: JSON.stringify(data) });
 }
 function editBlock(data) {
-  console.log(data);
   state.isEditBlock = true;
   state.blockData = data;
 }