Added set workflow icon functionality

src/components/newtab/shared/SharedCard.vue

@@ -1,7 +1,14 @@
 <template>
   <ui-card class="hover:ring-2 group hover:ring-accent">
-    <div class="flex items-center mb-4">
-      <span class="p-2 rounded-lg bg-box-transparent">
+    <div id="workflowCard" class="flex items-center mb-4">
+      <span v-if="data.isIconFromURL" class="p-2 rounded-lg bg-box-transparent">
+        <img
+          alt="Can not display"
+          :src="getIcon"
+          style="max-width: 60px; max-height: 20px"
+        />
+      </span>
+      <span v-else class="p-2 rounded-lg bg-box-transparent">
         <v-remixicon :name="data.icon || icon" />
       </span>
       <div class="flex-grow"></div>
@@ -40,6 +47,7 @@
   </ui-card>
 </template>
 <script setup>
+import { computed } from 'vue';
 import dayjs from '@/lib/dayjs';
 
 const props = defineProps({
@@ -60,6 +68,11 @@ const props = defineProps({
     default: () => [],
   },
 });
+
+const getIcon = computed(() => {
+  return props.data.icon;
+});
+
 defineEmits(['execute', 'click', 'menuSelected']);
 
 let formattedDate = null;

src/components/newtab/workflow/WorkflowActions.vue

@@ -112,5 +112,10 @@ const moreActions = [
     name: 'Delete',
     icon: 'riDeleteBin7Line',
   },
+  {
+    id: 'setIcon',
+    name: 'Set icon',
+    icon: 'riImageLine',
+  },
 ];
 </script>

src/models/workflow.js

@@ -15,6 +15,7 @@ class Workflow extends Model {
       id: this.uid(() => nanoid()),
       name: this.string(''),
       icon: this.string('riGlobalLine'),
+      isIconFromURL: this.boolean(false),
       data: this.attr(null),
       drawflow: this.string(''),
       dataColumns: this.attr([]),

src/newtab/pages/Workflows.vue

@@ -73,6 +73,7 @@ const menu = [
   { name: 'export', icon: 'riDownloadLine' },
   { name: 'rename', icon: 'riPencilLine' },
   { name: 'delete', icon: 'riDeleteBin7Line' },
+  { name: 'setIcon', icon: 'riImageLine' },
 ];
 
 const state = shallowReactive({
@@ -131,14 +132,39 @@ function renameWorkflow({ id, name }) {
           name: newName,
         },
       });
+      console.log(Workflow.data);
     },
   });
 }
 
+function setIconWorkflow({ id }) {
+  dialog.prompt({
+    title: 'Set icon workflow',
+    placeholder: 'URL of the new icon',
+    okText: 'Set Icon',
+    inputValue: '',
+    onConfirm: (iconUrl) => {
+      let isIconFromURL = true;
+      if (!iconUrl) {
+        iconUrl = String('riGlobalLine');
+        isIconFromURL = false;
+      }
+
+      Workflow.update({
+        where: id,
+        data: {
+          icon: String(iconUrl),
+          isIconFromURL,
+        },
+      });
+    },
+  });
+}
 const menuHandlers = {
   export: exportWorkflow,
   rename: renameWorkflow,
   delete: deleteWorkflow,
+  setIcon: setIconWorkflow,
 };
 </script>
 <style>