Refactored FileManager toolbar #133

databrary · Nov 9, 2020 · 7bb2bef · 7bb2bef
1 parent e3918f0
commit 7bb2bef
Show file tree

Hide file tree

Showing 4 changed files with 105 additions and 109 deletions.
diff --git a/client/src/components/project/FileManager.vue b/client/src/components/project/FileManager.vue
@@ -22,72 +22,12 @@
           />
         </template>
         <template v-slot:after>
-          <q-toolbar class="row bg-white text-dark q-pa-sm">
-            <q-btn
-              flat
-              icon="subdirectory_arrow_left"
-              class="rotate-90"
-              color="primary"
-              :disable="selectedNode === rootNode"
-              @click.stop="onGoBack"
-            >
-              <q-tooltip>
-                Go Back
-              </q-tooltip>
-            </q-btn>
-            <q-btn
-              flat
-              label="Upload"
-              icon="cloud_upload"
-              color="primary"
-              @click.stop="showFileUploadDialog = true"
-            >
-              <q-tooltip>
-                Upload files
-              </q-tooltip>
-            </q-btn>
-
-            <q-btn
-              flat
-              label="Add folder"
-              icon="create_new_folder"
-              color="primary"
-              @click.stop="onAddNode()"
-            >
-              <q-tooltip>
-                Add A New Folder
-              </q-tooltip>
-            </q-btn>
-            <q-space />
-            <q-btn-toggle
-              flat
-              v-model="selectedView"
-              push
-              dense
-              toggle-color="primary"
-              :options="viewOptions"
-            >
-              <template v-slot:grid>
-                <div class="row items-center no-wrap">
-                  <q-icon name="view_module" >
-                    <q-tooltip>
-                      Grid View
-                    </q-tooltip>
-                  </q-icon>
-                </div>
-              </template>
-
-              <template v-slot:list>
-                <div class="row items-center no-wrap">
-                  <q-icon name="format_list_bulleted">
-                    <q-tooltip>
-                      List View
-                    </q-tooltip>
-                  </q-icon>
-                </div>
-              </template>
-            </q-btn-toggle>
-          </q-toolbar>
+          <Toolbar
+            :isRootNode="selectedNode === rootNode"
+            :selectedView.sync="selectedView"
+            :viewOptions="viewOptions"
+            @go-back="onGoBack"
+          />
           <Grid
             ref="grid"
             :contents.sync="contents"
@@ -371,7 +311,10 @@ export default {
 
       await this.updateContents(this.selectedNode)
 
-      if (this.selectedNode === this.rootNode) return
+      if (this.selectedNode === this.rootNode) {
+        this.collapseAll()
+        return
+      }
 
       // expand the selectedNode's parent in the tree
       const node = this.getNodeByKey(this.selectedNode)
@@ -769,6 +712,10 @@ export default {
       this.$refs.tree.$refs.qtree.setExpanded(key, expand)
     },
 
+    collapseAll () {
+      this.$refs.tree.$refs.qtree.collapseAll()
+    },
+
     /**
      * Emmited from the Grid component
      * on Add Folder action

diff --git a/client/src/components/project/Grid.vue b/client/src/components/project/Grid.vue
@@ -173,7 +173,7 @@ export default {
     return {
       nodes: [],
       selectedChildren: [],
-      selected: '',
+      selected: null,
       timer: null,
       delay: 200,
       pagination: {

diff --git a/client/src/components/project/Toolbar.vue b/client/src/components/project/Toolbar.vue
@@ -1,51 +1,101 @@
 <template>
-    <q-toolbar class="no-padding bg-white text-dark">
-      <q-toolbar-title>Files</q-toolbar-title>
-      <q-btn
-        flat
-        icon="cloud_download"
-        color="primary"
-        label="Download"
-        :disable="selected.length === 0"
-      >
-        <q-tooltip>
-          Download selected files
-        </q-tooltip>
-      </q-btn>
+  <q-toolbar class="row bg-white text-dark q-pa-sm">
+    <q-btn
+      flat
+      icon="subdirectory_arrow_left"
+      class="rotate-90"
+      color="primary"
+      :disable="isRootNode"
+      @click.stop="$emit('go-back')"
+    >
+      <q-tooltip>
+        Go Back
+      </q-tooltip>
+    </q-btn>
+    <q-btn
+      flat
+      label="Upload"
+      icon="cloud_upload"
+      color="primary"
+      @click.stop="showFileUploadDialog = true"
+    >
+      <q-tooltip>
+        Upload files
+      </q-tooltip>
+    </q-btn>
 
-      <q-btn
-        flat
-        icon="cloud_upload"
-        color="primary"
-        label="Upload"
-        @click="showFileUploadDialog"
-      >
-        <q-tooltip>
-          Upload files or folders to your project
-        </q-tooltip>
-      </q-btn>
-      <q-btn
-        flat
-        icon="folder"
-        color="primary"
-        label="Create Folder"
-        @click="showVolumeDialog"
-      >
-        <q-tooltip>Create a new folder from selected data</q-tooltip>
-      </q-btn>
-    </q-toolbar>
+    <q-btn
+      flat
+      label="Add folder"
+      icon="create_new_folder"
+      color="primary"
+      @click.stop="onAddNode()"
+    >
+      <q-tooltip>
+        Add A New Folder
+      </q-tooltip>
+    </q-btn>
+    <q-space />
+    <q-btn-toggle
+      flat
+      v-model="view"
+      push
+      dense
+      toggle-color="primary"
+      :options="viewOptions"
+    >
+      <template v-slot:grid>
+        <div class="row items-center no-wrap">
+          <q-icon name="view_module" >
+            <q-tooltip>
+              Grid View
+            </q-tooltip>
+          </q-icon>
+        </div>
+      </template>
+
+      <template v-slot:list>
+        <div class="row items-center no-wrap">
+          <q-icon name="format_list_bulleted">
+            <q-tooltip>
+              List View
+            </q-tooltip>
+          </q-icon>
+        </div>
+      </template>
+    </q-btn-toggle>
+  </q-toolbar>
 </template>
 
 <script>
 export default {
   name: 'Toolbar',
-  props: ['selected'],
-  methods: {
-    showFileUploadDialog () {
-      this.$emit('showFileUploadDialog', true)
+  props: {
+    isRootNode: {
+      type: Boolean,
+      required: true
+    },
+    selectedView: {
+      type: String,
+      required: true
+    },
+    viewOptions: {
+      type: Array,
+      required: true
+    }
+  },
+  data: () => ({
+    view: null
+  }),
+  mounted () {
+    this.view = this.selectedView
+  },
+  watch: {
+    selectedNode () {
+      this.selected = this.selectedNode
     },
-    showVolumeDialog () {
-      this.$emit('showVolumeDialog', true)
+    view () {
+      this.$emit('update:selectedView', this.view)
     }
   }
 }

diff --git a/client/src/components/project/pam/DashboardEmbed.vue b/client/src/components/project/pam/DashboardEmbed.vue
@@ -98,7 +98,6 @@ export default {
   },
   methods: {
     reset () {
-      console.log('reset')
       this.selectedView = null
       this.assetId = this.selected
     }