From 714f61dfc20e6040ac60853be4aa55f6df06425d Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Wed, 24 Aug 2022 17:07:46 +0800
Subject: [PATCH] feat: add attachment group editing component

Signed-off-by: Ryan Wang <i@ryanc.cc>
---
 .../contents/attachments/AttachmentList.vue   | 25 +++++++++-
 .../AttachmentGroupEditingModal.vue           | 49 +++++++++++++++++++
 2 files changed, 73 insertions(+), 1 deletion(-)
 create mode 100644 src/modules/contents/attachments/components/AttachmentGroupEditingModal.vue

diff --git a/src/modules/contents/attachments/AttachmentList.vue b/src/modules/contents/attachments/AttachmentList.vue
index 30e0d0cc..001f41ed 100644
--- a/src/modules/contents/attachments/AttachmentList.vue
+++ b/src/modules/contents/attachments/AttachmentList.vue
@@ -21,6 +21,7 @@ import AttachmentDetailModal from "./components/AttachmentDetailModal.vue";
 import AttachmentUploadModal from "./components/AttachmentUploadModal.vue";
 import AttachmentSelectModal from "./components/AttachmentSelectModal.vue";
 import AttachmentStrategiesModal from "./components/AttachmentStrategiesModal.vue";
+import AttachmentGroupEditingModal from "./components/AttachmentGroupEditingModal.vue";
 import { ref } from "vue";
 import { useUserFetch } from "@/modules/system/users/composables/use-user";
 
@@ -41,6 +42,7 @@ const strategyVisible = ref(false);
 const selectVisible = ref(false);
 const uploadVisible = ref(false);
 const detailVisible = ref(false);
+const groupEditingModal = ref(false);
 const checkAll = ref(false);
 
 const { users } = useUserFetch();
@@ -87,6 +89,7 @@ const folders = [
   <AttachmentUploadModal v-model:visible="uploadVisible" />
   <AttachmentSelectModal v-model:visible="selectVisible" />
   <AttachmentStrategiesModal v-model:visible="strategyVisible" />
+  <AttachmentGroupEditingModal v-model:visible="groupEditingModal" />
   <VPageHeader title="附件库">
     <template #icon>
       <IconPalette class="mr-2 self-center" />
@@ -360,10 +363,30 @@ const folders = [
                     {{ folder.name }}（{{ index * 20 }}）
                   </span>
                 </div>
-                <IconMore />
+                <FloatingDropdown>
+                  <IconMore />
+                  <template #popper>
+                    <div class="w-48 p-2">
+                      <VSpace class="w-full" direction="column">
+                        <VButton
+                          v-close-popper
+                          block
+                          type="secondary"
+                          @click="groupEditingModal = true"
+                        >
+                          重命名
+                        </VButton>
+                        <VButton v-close-popper block type="danger">
+                          删除
+                        </VButton>
+                      </VSpace>
+                    </div>
+                  </template>
+                </FloatingDropdown>
               </div>
               <div
                 class="flex cursor-pointer items-center rounded-base bg-gray-100 p-2 text-gray-500 transition-all hover:bg-gray-200 hover:text-gray-900 hover:shadow-sm"
+                @click="groupEditingModal = true"
               >
                 <div class="flex flex-1 items-center">
                   <span class="text-sm">添加分组</span>
diff --git a/src/modules/contents/attachments/components/AttachmentGroupEditingModal.vue b/src/modules/contents/attachments/components/AttachmentGroupEditingModal.vue
new file mode 100644
index 00000000..ce37b980
--- /dev/null
+++ b/src/modules/contents/attachments/components/AttachmentGroupEditingModal.vue
@@ -0,0 +1,49 @@
+<script lang="ts" setup>
+import { VButton, VModal, VSpace } from "@halo-dev/components";
+
+withDefaults(
+  defineProps<{
+    visible: boolean;
+    group: object | null;
+  }>(),
+  {
+    visible: false,
+    group: null,
+  }
+);
+
+const emit = defineEmits<{
+  (event: "update:visible", visible: boolean): void;
+  (event: "close"): void;
+}>();
+
+const onVisibleChange = (visible: boolean) => {
+  emit("update:visible", visible);
+  if (!visible) {
+    emit("close");
+  }
+};
+</script>
+<template>
+  <VModal
+    :visible="visible"
+    :width="500"
+    title="附件分组"
+    @update:visible="onVisibleChange"
+  >
+    <FormKit id="attachment-group-form" type="form">
+      <FormKit label="名称" type="text" validation="required"></FormKit>
+    </FormKit>
+    <template #footer>
+      <VSpace>
+        <VButton
+          type="secondary"
+          @click="$formkit.submit('attachment-group-form')"
+        >
+          保存 ⌘ + ↵
+        </VButton>
+        <VButton @click="onVisibleChange(false)">取消 Esc</VButton>
+      </VSpace>
+    </template>
+  </VModal>
+</template>