chore: Add SplitDropdown component and update Silo Edit Form to use it

dRAGon-Okinawa · Sep 3, 2024 · d738abb · d738abb
1 parent b996973
commit d738abb
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 11 deletions.
diff --git a/frontend/src/assets/svg-icon/mdi--trash-can-outline.svg b/frontend/src/assets/svg-icon/mdi--trash-can-outline.svg
diff --git a/frontend/src/components/custom/split-dropdown.vue b/frontend/src/components/custom/split-dropdown.vue
@@ -9,10 +9,19 @@ interface Emits {
   (e: 'mainAction'): void;
 }
 
+interface DropdownOption {
+  label?: string;
+  value?: any;
+  icon?: string;
+  isDivider?: boolean;
+  callback?: () => void;
+}
+
 const emit = defineEmits<Emits>();
 
 const mainButtonLabel = defineModel<string>('mainButtonLabel', { default: '' });
 const mainButtonIcon = defineModel<string>('mainButtonIcon', { default: '' });
+const options = defineModel<DropdownOption[]>('options', { default: () => [] });
 
 const isDropdownOpen = ref(false);
 
@@ -43,6 +52,16 @@ const toggleDropdown = () => {
     document.removeEventListener('click', handleClickOutside);
   }
 };
+
+const onOptionClick = (option: DropdownOption) => {
+  if (option.isDivider) {
+    return;
+  }
+  isDropdownOpen.value = false; // Close dropdown after option click
+  if (option.callback) {
+    option.callback();
+  }
+};
 </script>
 
 <template>
@@ -64,9 +83,26 @@ const toggleDropdown = () => {
       v-if="isDropdownOpen"
       class="absolute right-0 z-10 mt-2 w-48 border border-gray-300 rounded bg-white shadow-md"
     >
-      <slot></slot>
+      <ul>
+        <template v-for="option in options" :key="option.value || option.label">
+          <li
+            v-if="!option.isDivider"
+            class="flex cursor-pointer items-center px-4 py-2 hover:bg-gray-200"
+            @click="onOptionClick(option)"
+          >
+            <SvgIcon v-if="option.icon" :local-icon="option.icon" class="mr-2" />
+            {{ option.label }}
+          </li>
+          <li v-else class="my-1 border-t"></li>
+        </template>
+      </ul>
     </div>
   </div>
 </template>
 
-<style scoped></style>
+<style scoped>
+.main-button {
+  display: flex;
+  align-items: center;
+}
+</style>
diff --git a/frontend/src/typings/components.d.ts b/frontend/src/typings/components.d.ts
@@ -81,7 +81,6 @@ declare module 'vue' {
     ReloadButton: typeof import('./../components/common/reload-button.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
-    SoybeanAvatar: typeof import('./../components/custom/soybean-avatar.vue')['default']
     SplitDropdown: typeof import('./../components/custom/split-dropdown.vue')['default']
     SvgIcon: typeof import('./../components/custom/svg-icon.vue')['default']
     SystemLogo: typeof import('./../components/common/system-logo.vue')['default']

diff --git a/frontend/src/views/infrastructure/silo-list/index.vue b/frontend/src/views/infrastructure/silo-list/index.vue
@@ -118,14 +118,27 @@ const {
       width: 130,
       render: (row: Api.SiloManage.Silo) => (
         <div class="flex-center gap-8px">
-          <SplitDropdown main-button-icon="mdi--lead-pencil" onMainAction={() => edit(row.uuid)}>
-            <button class="block w-full px-4 py-2 text-left hover:bg-gray-200">Action 1</button>
-            <button class="block w-full px-4 py-2 text-left hover:bg-gray-200">Action 2</button>
-            <button class="block w-full px-4 py-2 text-left hover:bg-gray-200">Action 3</button>
-          </SplitDropdown>
-          <NButton type="primary" ghost size="small" onClick={() => edit(row.uuid)}>
-            {$t('common.edit')}
-          </NButton>
+          <SplitDropdown
+            main-button-icon="mdi--lead-pencil"
+            onMainAction={() => edit(row.uuid)}
+            options={[
+              {
+                label: $t('common.edit'),
+                icon: 'mdi--lead-pencil',
+                callback: () => {
+                  edit(row.uuid);
+                }
+              },
+              { isDivider: true },
+              {
+                label: $t('common.delete'),
+                icon: 'mdi--trash-can-outline',
+                callback: () => {
+                  edit(row.uuid);
+                }
+              }
+            ]}
+          />
           <NPopconfirm onPositiveClick={() => handleDelete(row.uuid)}>
             {{
               default: () => $t('common.confirmDelete'),