Change document upload button to menu

frontend/components/containers/DocumentUploadButton.vue

@@ -1,26 +1,17 @@
 <template>
-  <base-modal
-    text="Upload"
-    :is-create="true"
-  >
-    <template v-slot="slotProps">
-      <document-upload-form
-        :upload-document="uploadDocument"
-        :formats="formatList"
-        @close="slotProps.close"
-      />
-    </template>
-  </base-modal>
+  <document-upload-form
+    :upload-document="uploadDocument"
+    :formats="formatList"
+    @close="slotProps.close"
+  />
 </template>
 
 <script>
 import { mapActions, mapGetters } from 'vuex'
-import BaseModal from '@/components/molecules/BaseModal'
 import DocumentUploadForm from '@/components/organisms/DocumentUploadForm'
 
 export default {
   components: {
-    BaseModal,
     DocumentUploadForm
   },
 

frontend/components/organisms/ConfirmForm.vue

@@ -0,0 +1,70 @@
+<template>
+  <base-card
+    :title="title"
+    :agree-text="buttonTrueText"
+    :cancel-text="buttonFalseText"
+    @agree="ok"
+    @cancel="cancel"
+  >
+    <template #content>
+      {{ message }}
+      <v-list dense>
+        <v-list-item v-for="(item, i) in items" :key="i">
+          <v-list-item-content>
+            <v-list-item-title>{{ item[itemKey] }}</v-list-item-title>
+          </v-list-item-content>
+        </v-list-item>
+      </v-list>
+    </template>
+  </base-card>
+</template>
+
+<script>
+import BaseCard from '@/components/molecules/BaseCard'
+
+export default {
+  components: {
+    BaseCard
+  },
+
+  props: {
+    title: {
+      type: String,
+      default: '',
+      required: true
+    },
+    message: {
+      type: String,
+      default: '',
+      required: true
+    },
+    items: {
+      type: Array,
+      default: () => [],
+      required: true
+    },
+    itemKey: {
+      type: String,
+      default: '',
+      required: true
+    },
+    buttonTrueText: {
+      type: String,
+      default: 'Yes'
+    },
+    buttonFalseText: {
+      type: String,
+      default: 'Cancel'
+    }
+  },
+
+  methods: {
+    ok() {
+      this.$emit('ok')
+    },
+    cancel() {
+      this.$emit('cancel')
+    }
+  }
+}
+</script>

frontend/pages/projects/_id/dataset/index.vue

@@ -1,25 +1,90 @@
 <template>
   <v-card>
-    <v-card-title>
-      <document-upload-button />
-      <document-deletion-button />
+    <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="uploadDialog=true">
+            <v-list-item-icon>
+              <v-icon>backup</v-icon>
+            </v-list-item-icon>
+            <v-list-item-title>Upload</v-list-item-title>
+          </v-list-item>
+        </v-list>
+      </v-menu>
+      <v-dialog
+        v-model="uploadDialog"
+        width="800"
+      >
+        <document-upload-form
+          :upload-document="uploadDocument"
+          :formats="formatList"
+          @close="uploadDialog=false"
+        />
+      </v-dialog>
+      <v-btn
+        class="text-capitalize ms-2"
+        outlined
+        :disabled="!isDocumentSelected"
+        @click="deleteDialog=true"
+      >
+        Delete
+      </v-btn>
+      <v-dialog
+        v-model="deleteDialog"
+        width="800"
+      >
+        <confirm-form
+          title="Delete Document"
+          message="Are you sure you want to delete these documents from this project?"
+          item-key="text"
+          :items="selected"
+          @ok="deleteDocument($route.params.id);deleteDialog=false"
+          @cancel="deleteDialog=false"
+        />
+      </v-dialog>
     </v-card-title>
     <document-list />
   </v-card>
 </template>
 
 <script>
+import { mapActions, mapGetters, mapState } from 'vuex'
+import ConfirmForm from '@/components/organisms/ConfirmForm'
 import DocumentList from '@/components/containers/DocumentList'
-import DocumentUploadButton from '@/components/containers/DocumentUploadButton'
-import DocumentDeletionButton from '@/components/containers/DocumentDeletionButton'
+import DocumentUploadForm from '@/components/organisms/DocumentUploadForm'
 
 export default {
   layout: 'project',
 
   components: {
+    ConfirmForm,
     DocumentList,
-    DocumentUploadButton,
-    DocumentDeletionButton
+    DocumentUploadForm
+  },
+
+  data() {
+    return {
+      uploadDialog: false,
+      deleteDialog: false
+    }
+  },
+
+  computed: {
+    ...mapGetters('documents', ['formatList', 'isDocumentSelected']),
+    ...mapState('documents', ['selected'])
+  },
+
+  methods: {
+    ...mapActions('documents', ['uploadDocument', 'deleteDocument'])
   },
 
   validate({ params }) {