feat(editor): add workflow icon selector

src/components/newtab/workflow/WorkflowDetailsCard.vue

@@ -1,10 +1,35 @@
 <template>
   <div class="px-4 mb-2">
-    <span
-      class="p-2 inline-block rounded-lg bg-accent text-white mr-2 align-middle"
-    >
-      <v-remixicon :name="workflow.icon" />
-    </span>
+    <ui-popover>
+      <template #trigger>
+        <span
+          title="Workflow icon"
+          class="
+            p-2
+            inline-block
+            rounded-lg
+            cursor-pointer
+            bg-accent
+            text-white
+            mr-2
+            align-middle
+          "
+        >
+          <v-remixicon :name="workflow.icon" />
+        </span>
+      </template>
+      <p class="mb-2">Workflow icon</p>
+      <div class="grid grid-cols-4 gap-1">
+        <span
+          v-for="icon in icons"
+          :key="icon"
+          class="cursor-pointer rounded-lg inline-block p-2 hoverable"
+          @click="$emit('update', { icon })"
+        >
+          <v-remixicon :name="icon" />
+        </span>
+      </div>
+    </ui-popover>
     <p class="font-semibold inline-block text-lg flex-1 mr-4 align-middle">
       {{ workflow.name }}
     </p>
@@ -28,11 +53,19 @@
           <v-remixicon name="riPlayLine" class="mr-2 -ml-1" />
           <span>Execute</span>
         </ui-list-item>
-        <ui-list-item>
+        <ui-list-item
+          v-close-popover
+          class="cursor-pointer"
+          @click="$emit('rename')"
+        >
           <v-remixicon name="riPencilLine" class="mr-2 -ml-1" />
           <span>Rename</span>
         </ui-list-item>
-        <ui-list-item>
+        <ui-list-item
+          v-close-popover
+          class="cursor-pointer"
+          @click="$emit('delete')"
+        >
           <v-remixicon name="riDeleteBin7Line" class="mr-2 -ml-1" />
           <span>Delete</span>
         </ui-list-item>
@@ -86,7 +119,14 @@ defineProps({
     default: () => ({}),
   },
 });
-defineEmits(['update', 'execute', 'save', 'showDataColumns']);
+defineEmits([
+  'update',
+  'execute',
+  'save',
+  'showDataColumns',
+  'rename',
+  'delete',
+]);
 
 const taskList = Object.keys(tasks).reduce((arr, key) => {
   const task = tasks[key];
@@ -95,4 +135,15 @@ const taskList = Object.keys(tasks).reduce((arr, key) => {
 
   return arr;
 }, {});
+const icons = [
+  'riGlobalLine',
+  'riEqualizerLine',
+  'riFlashlightLine',
+  'riLightbulbFlashLine',
+  'riDatabase2Line',
+  'riWindowLine',
+  'riCursorLine',
+  'riDownloadLine',
+  'riCommandLine',
+];
 </script>

src/components/ui/UiButton.vue

@@ -55,7 +55,7 @@ export default {
       primary:
         'bg-primary text-white dark:bg-secondary dark:hover:bg-primary hover:bg-secondary',
       danger:
-        'bg-red-100 text-red-500 dark:bg-red-600 dark:hover:bg-red-500 hover:bg-red-200',
+        'bg-red-500 text-white dark:bg-red-600 dark:hover:bg-red-500 hover:bg-red-400',
     };
 
     return {

src/components/ui/UiDialog.vue

@@ -1,5 +1,9 @@
 <template>
-  <ui-modal :model-value="state.show" content-class="max-w-sm">
+  <ui-modal
+    :model-value="state.show"
+    content-class="max-w-sm"
+    @close="state.show = false"
+  >
     <template #header>
       <h3 class="font-semibold text-lg">{{ state.options.title }}</h3>
     </template>

src/lib/v-remixicon.js

@@ -1,6 +1,8 @@
 import vRemixicon from 'v-remixicon';
 import {
   riHome5Line,
+  riDatabase2Line,
+  riWindowLine,
   riKey2Line,
   riRestartLine,
   riTBoxLine,
@@ -36,6 +38,7 @@ import {
   riFocusLine,
   riCursorLine,
   riDownloadLine,
+  riCommandLine,
   riParagraph,
   riImageLine,
   riCloseLine,
@@ -49,6 +52,8 @@ import {
 
 export const icons = {
   riHome5Line,
+  riDatabase2Line,
+  riWindowLine,
   riKey2Line,
   riRestartLine,
   riTBoxLine,
@@ -84,6 +89,7 @@ export const icons = {
   riFocusLine,
   riCursorLine,
   riDownloadLine,
+  riCommandLine,
   riParagraph,
   riImageLine,
   riCloseLine,

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

@@ -16,6 +16,8 @@
         @execute="executeWorkflow"
         @update="updateWorkflow"
         @showDataColumns="state.showDataColumnsModal = true"
+        @rename="renameWorkflow"
+        @delete="deleteWorkflow"
       />
     </div>
     <workflow-builder
@@ -46,8 +48,9 @@ import {
 } from 'vue';
 import { useRoute, useRouter, onBeforeRouteLeave } from 'vue-router';
 import emitter from 'tiny-emitter/instance';
-import Workflow from '@/models/workflow';
 import { debounce } from '@/utils/helper';
+import { useDialog } from '@/composable/dialog';
+import Workflow from '@/models/workflow';
 import WorkflowBuilder from '@/components/newtab/workflow/WorkflowBuilder.vue';
 import WorkflowEditBlock from '@/components/newtab/workflow/WorkflowEditBlock.vue';
 import WorkflowDetailsCard from '@/components/newtab/workflow/WorkflowDetailsCard.vue';
@@ -55,6 +58,7 @@ import WorkflowDataColumns from '@/components/newtab/workflow/WorkflowDataColumn
 
 const route = useRoute();
 const router = useRouter();
+const dialog = useDialog();
 
 const workflowId = route.params.id;
 
@@ -108,6 +112,34 @@ function executeWorkflow() {
 function handleEditorDataChanged() {
   state.isDataChanged = true;
 }
+function deleteWorkflow() {
+  dialog.confirm({
+    title: 'Delete workflow',
+    okVariant: 'danger',
+    body: `Are you sure you want to delete "${workflow.value.name}" workflow?`,
+    onConfirm: () => {
+      Workflow.delete(route.params.id).then(() => {
+        router.replace('/workflows');
+      });
+    },
+  });
+}
+function renameWorkflow() {
+  dialog.prompt({
+    title: 'Rename workflow',
+    placeholder: 'Workflow name',
+    okText: 'Rename',
+    inputValue: workflow.value.name,
+    onConfirm: (newName) => {
+      Workflow.update({
+        where: route.params.id,
+        data: {
+          name: newName,
+        },
+      });
+    },
+  });
+}
 
 provide('workflow', {
   data: workflow,