From d4a5bc51c4a6a7c0ca626b9ca44d468c69e1c139 Mon Sep 17 00:00:00 2001
From: Gabriel Massadas <gmassadas@cloudflare.com>
Date: Fri, 17 May 2024 16:08:09 +0100
Subject: [PATCH] Add menu to create a new file

---
 .../src/components/files/CreateFile.vue       | 91 +++++++++++++++++++
 .../src/components/main/LeftSidebar.vue       | 12 ++-
 2 files changed, 102 insertions(+), 1 deletion(-)
 create mode 100644 packages/dashboard/src/components/files/CreateFile.vue

diff --git a/packages/dashboard/src/components/files/CreateFile.vue b/packages/dashboard/src/components/files/CreateFile.vue
new file mode 100644
index 0000000..7855b3f
--- /dev/null
+++ b/packages/dashboard/src/components/files/CreateFile.vue
@@ -0,0 +1,91 @@
+<template>
+  <q-dialog v-model="modal" @hide="cancel">
+    <q-card style="min-width: 350px">
+      <q-form
+        @submit="onSubmit"
+      >
+        <q-card-section>
+          <div class="text-h6">New File Name</div>
+        </q-card-section>
+
+        <q-card-section class="q-pt-none">
+          <q-input dense v-model="newFileName" 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" v-close-popup />
+          <q-btn flat label="Create" type="submit" :loading="loading" />
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>
+
+<script>
+import { defineComponent } from "vue";
+import { useMainStore } from "stores/main-store";
+import { apiHandler, decode, encode, ROOT_FOLDER } from "src/appUtils";
+
+export default defineComponent({
+  name: "CreateFile",
+  data: function() {
+    return {
+      modal: false,
+      newFileName: "",
+      loading: false
+    };
+  },
+  methods: {
+    cancel: function() {
+      this.modal = false;
+      this.newFileName = "";
+      this.loading = false
+    },
+    onSubmit: async function() {
+      this.loading = true
+
+      const newFile = new Blob([''], {type: 'text/plain'});
+      await apiHandler.uploadObjects(newFile, this.selectedFolder + this.newFileName, this.selectedBucket);
+
+      this.$bus.emit("fetchFiles");
+
+      // TODO: open the new file in preview and edit mode
+      // await this.$router.push({
+      //   name: "files-file",
+      //   params: {
+      //     bucket: this.$route.params.bucket,
+      //     folder: this.$route.params.folder || ROOT_FOLDER,
+      //     file: encode(this.newFileName)
+      //   }
+      // });
+
+      this.loading = false
+      this.modal = false;
+      this.newFileName = "";
+    },
+    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>
diff --git a/packages/dashboard/src/components/main/LeftSidebar.vue b/packages/dashboard/src/components/main/LeftSidebar.vue
index 0872488..498a465 100644
--- a/packages/dashboard/src/components/main/LeftSidebar.vue
+++ b/packages/dashboard/src/components/main/LeftSidebar.vue
@@ -4,6 +4,14 @@
       <q-btn color="green" icon="add" stack class="q-mb-lg" label="New">
         <q-menu>
           <q-list>
+            <q-item clickable v-close-popup @click="$refs.createFile.open()">
+              <q-item-section>
+                <q-item-label>
+                  <q-icon name="note_add" size="sm" />
+                  New File
+                </q-item-label>
+              </q-item-section>
+            </q-item>
             <q-item clickable v-close-popup @click="$refs.createFolder.open()">
               <q-item-section>
                 <q-item-label>
@@ -102,12 +110,14 @@
   </q-dialog>
 
   <create-folder ref="createFolder" />
+  <create-file ref="createFile" />
 </template>
 
 <script>
 import { defineComponent } from "vue";
 import { useMainStore } from "stores/main-store";
 import CreateFolder from "components/files/CreateFolder.vue";
+import CreateFile from "components/files/CreateFile.vue";
 
 export default defineComponent({
   name: "LeftSidebar",
@@ -117,7 +127,7 @@ export default defineComponent({
       settingsPopup: false
     };
   },
-  components: { CreateFolder },
+  components: { CreateFolder, CreateFile },
   methods: {
     gotoEmail: function() {
       if (this.selectedApp !== "email")