From 0c18fb906c3ca56f5ddac388eb219b54c6c745b5 Mon Sep 17 00:00:00 2001
From: Hironsan <light.tree.1.13@gmail.com>
Date: Wed, 23 Oct 2019 11:49:35 +0900
Subject: [PATCH] Add action menu

---
 frontend/components/molecules/ActionMenu.vue  | 46 +++++++++++++++++++
 frontend/pages/projects/_id/dataset/index.vue | 38 +++++----------
 2 files changed, 58 insertions(+), 26 deletions(-)
 create mode 100644 frontend/components/molecules/ActionMenu.vue

diff --git a/frontend/components/molecules/ActionMenu.vue b/frontend/components/molecules/ActionMenu.vue
new file mode 100644
index 00000000..45012c8a
--- /dev/null
+++ b/frontend/components/molecules/ActionMenu.vue
@@ -0,0 +1,46 @@
+<template>
+  <v-menu
+    offset-y
+    open-on-hover
+  >
+    <template v-slot:activator="{ on }">
+      <v-btn
+        color="primary text-capitalize"
+        v-on="on"
+      >
+        {{ text }}
+        <v-icon>mdi-menu-down</v-icon>
+      </v-btn>
+    </template>
+    <v-list>
+      <v-list-item
+        v-for="(item, index) in items"
+        :key="index"
+        @click="$emit(item.event)"
+      >
+        <v-list-item-icon>
+          <v-icon>{{ item.icon }}</v-icon>
+        </v-list-item-icon>
+        <v-list-item-content>
+          <v-list-item-title>{{ item.title }}</v-list-item-title>
+        </v-list-item-content>
+      </v-list-item>
+    </v-list>
+  </v-menu>
+</template>
+
+<script>
+export default {
+  props: {
+    text: {
+      type: String,
+      default: 'Actions'
+    },
+    items: {
+      type: Array,
+      default: () => [],
+      required: true
+    }
+  }
+}
+</script>
diff --git a/frontend/pages/projects/_id/dataset/index.vue b/frontend/pages/projects/_id/dataset/index.vue
index 2919a368..435556d0 100644
--- a/frontend/pages/projects/_id/dataset/index.vue
+++ b/frontend/pages/projects/_id/dataset/index.vue
@@ -1,31 +1,11 @@
 <template>
   <v-card>
     <v-card-title class="mb-2">
-      <v-menu offset-y>
-        <template v-slot:activator="{ on }">
-          <v-btn
-            color="text-capitalize primary"
-            v-on="on"
-          >
-            Actions
-            <v-icon>mdi-menu-down</v-icon>
-          </v-btn>
-        </template>
-        <v-list dense>
-          <v-list-item @click="importDialog=true">
-            <v-list-item-icon>
-              <v-icon>backup</v-icon>
-            </v-list-item-icon>
-            <v-list-item-title>Import</v-list-item-title>
-          </v-list-item>
-          <v-list-item @click="exportDialog=true">
-            <v-list-item-icon>
-              <v-icon>archive</v-icon>
-            </v-list-item-icon>
-            <v-list-item-title>Export</v-list-item-title>
-          </v-list-item>
-        </v-list>
-      </v-menu>
+      <action-menu
+        :items="menuItems"
+        @upload="importDialog=true"
+        @download="exportDialog=true"
+      />
       <v-dialog
         v-model="importDialog"
         width="800"
@@ -74,6 +54,7 @@
 
 <script>
 import { mapActions, mapGetters, mapState } from 'vuex'
+import ActionMenu from '@/components/molecules/ActionMenu'
 import ConfirmForm from '@/components/organisms/ConfirmForm'
 import DocumentList from '@/components/containers/DocumentList'
 import DocumentUploadForm from '@/components/organisms/DocumentUploadForm'
@@ -83,6 +64,7 @@ export default {
   layout: 'project',
 
   components: {
+    ActionMenu,
     ConfirmForm,
     DocumentList,
     DocumentUploadForm,
@@ -93,7 +75,11 @@ export default {
     return {
       importDialog: false,
       exportDialog: false,
-      deleteDialog: false
+      deleteDialog: false,
+      menuItems: [
+        { title: 'Import', icon: 'backup', event: 'upload' },
+        { title: 'Export', icon: 'archive', event: 'download' }
+      ]
     }
   },