From 5143b545dda335b1d64ad87429f9a24aed11fab8 Mon Sep 17 00:00:00 2001
From: Hironsan <light.tree.1.13@gmail.com>
Date: Wed, 23 Oct 2019 11:58:30 +0900
Subject: [PATCH] Add base dialog

---
 frontend/components/molecules/BaseDialog.vue  | 24 +++++++++++++++++++
 frontend/pages/projects/_id/dataset/index.vue | 23 +++++++-----------
 2 files changed, 32 insertions(+), 15 deletions(-)
 create mode 100644 frontend/components/molecules/BaseDialog.vue

diff --git a/frontend/components/molecules/BaseDialog.vue b/frontend/components/molecules/BaseDialog.vue
new file mode 100644
index 00000000..12b22dc7
--- /dev/null
+++ b/frontend/components/molecules/BaseDialog.vue
@@ -0,0 +1,24 @@
+<template>
+  <v-dialog
+    :value="dialog"
+    :width="width"
+  >
+    <slot />
+  </v-dialog>
+</template>
+
+<script>
+export default {
+  props: {
+    dialog: {
+      type: Boolean,
+      default: false,
+      required: true
+    },
+    width: {
+      type: String,
+      default: '800'
+    }
+  }
+}
+</script>
diff --git a/frontend/pages/projects/_id/dataset/index.vue b/frontend/pages/projects/_id/dataset/index.vue
index 435556d0..1a8af680 100644
--- a/frontend/pages/projects/_id/dataset/index.vue
+++ b/frontend/pages/projects/_id/dataset/index.vue
@@ -6,26 +6,20 @@
         @upload="importDialog=true"
         @download="exportDialog=true"
       />
-      <v-dialog
-        v-model="importDialog"
-        width="800"
-      >
+      <base-dialog :dialog="importDialog">
         <document-upload-form
           :upload-document="uploadDocument"
           :formats="formatList"
           @close="importDialog=false"
         />
-      </v-dialog>
-      <v-dialog
-        v-model="exportDialog"
-        width="800"
-      >
+      </base-dialog>
+      <base-dialog :dialog="exportDialog">
         <document-export-form
           :export-document="exportDocument"
           :formats="['json']"
           @close="exportDialog=false"
         />
-      </v-dialog>
+      </base-dialog>
       <v-btn
         class="text-capitalize ms-2"
         outlined
@@ -34,10 +28,7 @@
       >
         Delete
       </v-btn>
-      <v-dialog
-        v-model="deleteDialog"
-        width="800"
-      >
+      <base-dialog :dialog="deleteDialog">
         <confirm-form
           title="Delete Document"
           message="Are you sure you want to delete these documents from this project?"
@@ -46,7 +37,7 @@
           @ok="deleteDocument($route.params.id);deleteDialog=false"
           @cancel="deleteDialog=false"
         />
-      </v-dialog>
+      </base-dialog>
     </v-card-title>
     <document-list />
   </v-card>
@@ -55,6 +46,7 @@
 <script>
 import { mapActions, mapGetters, mapState } from 'vuex'
 import ActionMenu from '@/components/molecules/ActionMenu'
+import BaseDialog from '@/components/molecules/BaseDialog'
 import ConfirmForm from '@/components/organisms/ConfirmForm'
 import DocumentList from '@/components/containers/DocumentList'
 import DocumentUploadForm from '@/components/organisms/DocumentUploadForm'
@@ -65,6 +57,7 @@ export default {
 
   components: {
     ActionMenu,
+    BaseDialog,
     ConfirmForm,
     DocumentList,
     DocumentUploadForm,