From 16c4455d8dc36e3f378203dca78c67110dd9659a Mon Sep 17 00:00:00 2001
From: Jorge <jdieguezbean@gmail.com>
Date: Sun, 5 Sep 2021 12:59:03 +0300
Subject: [PATCH] Modify upload function to accept only yml files on folder
 upload. Adding breadcrumbs, adding feature to create folder

---
 frontend/src/components/Sidebar.vue |  35 +++--
 frontend/src/css/listing.css        |   2 +-
 frontend/src/utils/upload.js        | 216 ++++++++++++++--------------
 frontend/src/views/Files.vue        |   1 +
 4 files changed, 137 insertions(+), 117 deletions(-)

diff --git a/frontend/src/components/Sidebar.vue b/frontend/src/components/Sidebar.vue
index e8e6ded4..7d32da6a 100644
--- a/frontend/src/components/Sidebar.vue
+++ b/frontend/src/components/Sidebar.vue
@@ -2,21 +2,34 @@
   <nav :class="{ active }">
     <template v-if="isLogged">
       <router-link
-        class="action"
-        to="/files/"
-        :aria-label="$t('sidebar.myFiles')"
-        :title="$t('sidebar.myFiles')"
+          class="action"
+          to="/files/"
+          :aria-label="$t('sidebar.myFiles')"
+          :title="$t('sidebar.myFiles')"
       >
         <i class="material-icons">folder</i>
         <span>{{ $t("sidebar.myFiles") }}</span>
       </router-link>
 
-        <div v-if="user.perm.create">
+      <div v-if="user.perm.create">
         <button
-          @click="$store.commit('showHover', 'newFile')"
-          class="action"
-          :aria-label="$t('sidebar.newFile')"
-          :title="$t('sidebar.newFile')"
+            @click="$store.commit('showHover', 'newDir')"
+            class="action"
+            :aria-label="$t('sidebar.newFolder')"
+            :title="$t('sidebar.newFolder')"
+        >
+          <i class="material-icons">create_new_folder</i>
+          <span>{{ $t("sidebar.newFolder") }}</span>
+        </button>
+      </div>
+
+
+      <div v-if="user.perm.create">
+        <button
+            @click="$store.commit('showHover', 'newFile')"
+            class="action"
+            :aria-label="$t('sidebar.newFile')"
+            :title="$t('sidebar.newFile')"
         >
           <i class="material-icons">note_add</i>
           <span>{{ $t("sidebar.newFile") }}</span>
@@ -28,9 +41,9 @@
 </template>
 
 <script>
-import { mapGetters, mapState } from "vuex";
+import {mapGetters, mapState} from "vuex";
 import * as auth from "@/utils/auth";
-import { authMethod, disableExternal, noAuth, signup, version } from "@/utils/constants";
+import {authMethod, disableExternal, noAuth, signup, version} from "@/utils/constants";
 
 export default {
   name: "sidebar",
diff --git a/frontend/src/css/listing.css b/frontend/src/css/listing.css
index 8babcfa8..46d5f481 100644
--- a/frontend/src/css/listing.css
+++ b/frontend/src/css/listing.css
@@ -112,7 +112,7 @@
   width: 100%;
   max-width: 100%;
   margin: 0;
-  margin-top: 64px;
+  margin-top: 0;
 }
 
 #listing.list .item {
diff --git a/frontend/src/utils/upload.js b/frontend/src/utils/upload.js
index 1ab4bb65..21535190 100644
--- a/frontend/src/utils/upload.js
+++ b/frontend/src/utils/upload.js
@@ -2,126 +2,132 @@ import store from "@/store";
 import url from "@/utils/url";
 
 export function checkConflict(files, items) {
-  if (typeof items === "undefined" || items === null) {
-    items = [];
-  }
-
-  let folder_upload = files[0].fullPath !== undefined;
-
-  let conflict = false;
-  for (let i = 0; i < files.length; i++) {
-    let file = files[i];
-    let name = file.name;
-
-    if (folder_upload) {
-      let dirs = file.fullPath.split("/");
-      if (dirs.length > 1) {
-        name = dirs[0];
-      }
+    if (typeof items === "undefined" || items === null) {
+        items = [];
     }
 
-    let res = items.findIndex(function hasConflict(element) {
-      return element.name === this;
-    }, name);
+    let folder_upload = files[0].fullPath !== undefined;
 
-    if (res >= 0) {
-      conflict = true;
-      break;
+    let conflict = false;
+    for (let i = 0; i < files.length; i++) {
+        let file = files[i];
+        let name = file.name;
+
+        if (folder_upload) {
+            let dirs = file.fullPath.split("/");
+            if (dirs.length > 1) {
+                name = dirs[0];
+            }
+        }
+
+        let res = items.findIndex(function hasConflict(element) {
+            return element.name === this;
+        }, name);
+
+        if (res >= 0) {
+            conflict = true;
+            break;
+        }
     }
-  }
 
-  return conflict;
+    return conflict;
 }
 
 export function scanFiles(dt) {
-  return new Promise((resolve) => {
-    let reading = 0;
-    const contents = [];
+    return new Promise((resolve) => {
+        let reading = 0;
+        const contents = [];
 
-    if (dt.items !== undefined) {
-      for (let item of dt.items) {
-        if (
-          item.kind === "file" &&
-          typeof item.webkitGetAsEntry === "function"
-        ) {
-          const entry = item.webkitGetAsEntry();
-          readEntry(entry);
-        }
-      }
-    } else {
-      resolve(dt.files);
-    }
-
-    function readEntry(entry, directory = "") {
-      if (entry.isFile) {
-        reading++;
-        entry.file((file) => {
-          reading--;
-
-          file.fullPath = `${directory}${file.name}`;
-          contents.push(file);
-
-          if (reading === 0) {
-            resolve(contents);
-          }
-        });
-      } else if (entry.isDirectory) {
-        const dir = {
-          isDir: true,
-          size: 0,
-          fullPath: `${directory}${entry.name}`,
-        };
-
-        contents.push(dir);
-
-        readReaderContent(entry.createReader(), `${directory}${entry.name}`);
-      }
-    }
-
-    function readReaderContent(reader, directory) {
-      reading++;
-
-      reader.readEntries(function (entries) {
-        reading--;
-        if (entries.length > 0) {
-          for (const entry of entries) {
-            readEntry(entry, `${directory}/`);
-          }
-
-          readReaderContent(reader, `${directory}/`);
+        if (dt.items !== undefined) {
+            for (let item of dt.items) {
+                if (
+                    item.kind === "file" &&
+                    typeof item.webkitGetAsEntry === "function"
+                ) {
+                    const entry = item.webkitGetAsEntry();
+                    readEntry(entry);
+                }
+            }
+        } else {
+            resolve(dt.files);
         }
 
-        if (reading === 0) {
-          resolve(contents);
+        function readEntry(entry, directory = "") {
+            if (entry.isFile) {
+                reading++;
+                entry.file((file) => {
+                    reading--;
+
+                    file.fullPath = `${directory}${file.name}`;
+                    contents.push(file);
+
+                    if (reading === 0) {
+                        resolve(contents);
+                    }
+                });
+            } else if (entry.isDirectory) {
+                const dir = {
+                    isDir: true,
+                    size: 0,
+                    fullPath: `${directory}${entry.name}`,
+                };
+
+                contents.push(dir);
+
+                readReaderContent(entry.createReader(), `${directory}${entry.name}`);
+            }
         }
-      });
-    }
-  });
+
+        function readReaderContent(reader, directory) {
+            reading++;
+
+            reader.readEntries(function (entries) {
+                reading--;
+                if (entries.length > 0) {
+                    for (const entry of entries) {
+                        readEntry(entry, `${directory}/`);
+                    }
+
+                    readReaderContent(reader, `${directory}/`);
+                }
+
+                if (reading === 0) {
+                    resolve(contents);
+                }
+            });
+        }
+    });
 }
 
 export function handleFiles(files, base, overwrite = false) {
-  for (let i = 0; i < files.length; i++) {
-    let id = store.state.upload.id;
-    let path = base;
-    let file = files[i];
+    for (let i = 0; i < files.length; i++) {
 
-    if (file.fullPath !== undefined) {
-      path += url.encodePath(file.fullPath);
-    } else {
-      path += url.encodeRFC5987ValueChars(file.name);
+        let id = store.state.upload.id;
+        let path = base;
+        let file = files[i];
+        console.log(file);
+        var re = /(?:\.([^.]+))?$/;
+        console.log(re.exec(file.name)[1]);
+        if (re.exec(file.name)[1] === 'yml') {
+            console.log('Is yml file')
+            if (file.fullPath !== undefined) {
+                path += url.encodePath(file.fullPath);
+            } else {
+                path += url.encodeRFC5987ValueChars(file.name);
+            }
+
+            if (file.isDir) {
+                path += "/";
+            }
+
+            const item = {
+                id,
+                path,
+                file,
+                overwrite,
+            };
+
+            store.dispatch("upload/upload", item);
+        }
     }
-
-    if (file.isDir) {
-      path += "/";
-    }
-
-    const item = {
-      id,
-      path,
-      file,
-      overwrite,
-    };
-
-    store.dispatch("upload/upload", item);
-  }
 }
diff --git a/frontend/src/views/Files.vue b/frontend/src/views/Files.vue
index 66812cc5..ac904606 100644
--- a/frontend/src/views/Files.vue
+++ b/frontend/src/views/Files.vue
@@ -1,6 +1,7 @@
 <template>
   <div>
     <header-bar v-if="error || req.type == null" showMenu showLogo />
+    <breadcrumbs base="/files" />
     <errors v-if="error" :errorCode="error.message" />
     <component v-else-if="currentView" :is="currentView"></component>
     <div v-else>