Updates

packages/dashboard-v2/src/components/files/CreateFolder.vue

@@ -0,0 +1,72 @@
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-form
+      @submit="onSubmit"
+    >
+      <q-card style="min-width: 350px">
+        <q-card-section>
+          <div class="text-h6">New Folder Name</div>
+        </q-card-section>
+
+        <q-card-section class="q-pt-none">
+          <q-input dense v-model="newFolderName" autofocus
+                   lazy-rules
+                   :rules="[ val => val && val.length > 0 || 'Please type something']" />
+        </q-card-section>
+
+        <q-card-actions align="right" class="text-primary">
+          <q-btn flat label="Cancel" @click="cancel" />
+          <q-btn flat label="Create" type="submit" />
+        </q-card-actions>
+      </q-card>
+    </q-form>
+  </q-dialog>
+</template>
+
+<script>
+import { defineComponent } from "vue";
+import { useMainStore } from "stores/main-store";
+import { apiHandler, decode, ROOT_FOLDER } from "src/appUtils";
+
+export default defineComponent({
+  name: 'CreateFolder',
+  data: function () {
+    return {
+      modal: false,
+      newFolderName: ''
+    }
+  },
+  methods: {
+    cancel: function() {
+      this.modal = false
+      this.newFolderName = ''
+    },
+    onSubmit: async function() {
+      await apiHandler.createFolder(this.selectedFolder + this.newFolderName + '/', this.selectedBucket)
+      this.$bus.emit('fetchFiles')
+      this.modal = false
+    },
+    open: function() {
+      this.modal = true
+    }
+  },
+  computed: {
+    selectedBucket: function () {
+      return this.$route.params.bucket
+    },
+    selectedFolder: function () {
+      if (this.$route.params.folder && this.$route.params.folder !== ROOT_FOLDER) {
+        return decode(this.$route.params.folder)
+      }
+      return ''
+    },
+  },
+  setup() {
+    const mainStore = useMainStore();
+
+    return {
+      mainStore,
+    };
+  },
+})
+</script>

packages/dashboard-v2/src/components/main/LeftSidebar.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="q-pa-md">
     <div class="q-gutter-md">
+
       <q-select :model-value="selectedBucket" @update:model-value="changeBucket" :options="mainStore.buckets.map((obj) => obj.name)" label="Bucket" />
 
       <q-field label="Application" stack-label borderless>
@@ -17,16 +18,45 @@
           />
         </template>
       </q-field>
+
+      <q-btn-dropdown color="green" label="New" icon="add" style="width: 100%">
+        <q-list>
+          <q-item clickable v-close-popup @click="$refs.createFolder.open()">
+            <q-item-section>
+              <q-item-label><q-icon name="create_new_folder" size="sm"/> New Folder</q-item-label>
+            </q-item-section>
+          </q-item>
+
+          <q-separator></q-separator>
+
+          <q-item clickable v-close-popup @click="onItemClick">
+            <q-item-section>
+              <q-item-label><q-icon name="upload_file" size="sm"/> Upload Files</q-item-label>
+            </q-item-section>
+          </q-item>
+
+          <q-item clickable v-close-popup @click="onItemClick">
+            <q-item-section>
+              <q-item-label><q-icon name="folder" size="sm"/> Upload Folders</q-item-label>
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-btn-dropdown>
     </div>
   </div>
+
+  <create-folder ref="createFolder" />
 </template>
 
 <script>
 import { defineComponent } from "vue";
 import { useMainStore } from "stores/main-store";
+import FilePreview from "components/preview/FilePreview.vue";
+import CreateFolder from "components/files/CreateFolder.vue";
 
 export default defineComponent({
   name: 'LeftSidebar',
+  components: { CreateFolder },
   methods: {
     changeBucket: function(bucket) {
       this.$router.push({ name: `${this.selectedApp}-home`, params: { bucket: bucket }})