From 3b06ae9d68e3d2c04efb84234bc68e619e91c285 Mon Sep 17 00:00:00 2001
From: Dimitrie Stefanescu <didimitrie@gmail.com>
Date: Sat, 15 Jan 2022 21:31:02 +0000
Subject: [PATCH] feat(frontend): closes #522

---
 .../{StructureDisplay.vue => Resource.vue}    |  4 +-
 .../components/viewer/ResourceGroup.vue       | 94 +++++++++++++++++++
 .../pages/stream/CommitObjectViewer.vue       | 15 +--
 3 files changed, 101 insertions(+), 12 deletions(-)
 rename packages/frontend/src/cleanup/components/viewer/{StructureDisplay.vue => Resource.vue} (98%)
 create mode 100644 packages/frontend/src/cleanup/components/viewer/ResourceGroup.vue

diff --git a/packages/frontend/src/cleanup/components/viewer/StructureDisplay.vue b/packages/frontend/src/cleanup/components/viewer/Resource.vue
similarity index 98%
rename from packages/frontend/src/cleanup/components/viewer/StructureDisplay.vue
rename to packages/frontend/src/cleanup/components/viewer/Resource.vue
index 8c75ebcac..8a5df69e9 100644
--- a/packages/frontend/src/cleanup/components/viewer/StructureDisplay.vue
+++ b/packages/frontend/src/cleanup/components/viewer/Resource.vue
@@ -193,11 +193,11 @@ export default {
 </script>
 <style scoped>
 .list-overlay-dark {
-  background: rgba(40, 40, 40, 1);
+  background: rgba(40, 40, 40, 0.5);
   z-index: 5;
 }
 .list-overlay-light {
-  background: rgba(235, 235, 235, 1);
+  background: rgba(235, 235, 235, 0.5);
   z-index: 5;
 }
 </style>
diff --git a/packages/frontend/src/cleanup/components/viewer/ResourceGroup.vue b/packages/frontend/src/cleanup/components/viewer/ResourceGroup.vue
new file mode 100644
index 000000000..23b1ed8b5
--- /dev/null
+++ b/packages/frontend/src/cleanup/components/viewer/ResourceGroup.vue
@@ -0,0 +1,94 @@
+<template>
+  <div>
+    <v-list v-if="resources.length > 1" dense nav class="mt-0 py-0 mb-3">
+      <v-list-item
+        :class="`px-2 list-overlay-${$vuetify.theme.dark ? 'dark' : 'light'} elevation-3`"
+        style="position: sticky; top: 82px"
+        @click="expand = !expand"
+      >
+        <v-list-item-action>
+          <v-icon small>
+            {{
+              resources.length < 10
+                ? 'mdi-numeric-' + resources.length + '-box-multiple'
+                : 'mdi-numeric-9-plus-box-multiple'
+            }}
+          </v-icon>
+        </v-list-item-action>
+        <v-list-item-content>
+          <v-list-item-title>Loaded Resources</v-list-item-title>
+        </v-list-item-content>
+        <v-list-item-action class="pa-0 ma-0">
+          <v-btn small icon @click.stop="expand = !expand">
+            <v-icon>{{ expand ? 'mdi-chevron-up' : 'mdi-chevron-down' }}</v-icon>
+          </v-btn>
+        </v-list-item-action>
+      </v-list-item>
+    </v-list>
+    <v-expand-transition>
+      <div v-show="expand" class="mt-3">
+        <resource
+          v-for="(resource, index) in resources"
+          :key="index"
+          :resource="resource"
+          :is-multiple="resources.length !== 0"
+          :expand-initial="resources.length === 0"
+          @remove="
+            (e) => {
+              $emit('remove', e)
+              removedResources.push(e)
+            }
+          "
+        />
+
+        <div v-show="removedResources.length !== 0" class="px-3 caption pb-5">
+          Removed resources:
+          <span v-for="(res, index) in removedResources" :key="index" v-tooltip="'Click to re-add'">
+            <a
+              @click="
+                $emit('add-resource', res.id)
+                removedResources.splice(
+                  removedResources.findIndex((r) => r.id === res.id),
+                  1
+                )
+              "
+            >
+              <span v-if="res.type === 'object'">Object</span>
+              <!-- eslint-disable-next-line prettier/prettier -->
+              <span v-else><v-icon x-small>mdi-source-commit</v-icon>{{ res.id }}</span>
+            </a>
+            <!-- eslint-disable-next-line prettier/prettier -->
+        <span v-if="removedResources.length > 1 && index < removedResources.length - 1">,&nbsp;
+            </span>
+          </span>
+        </div>
+      </div>
+    </v-expand-transition>
+  </div>
+</template>
+<script>
+export default {
+  components: {
+    Resource: () => import('@/cleanup/components/viewer/Resource')
+  },
+  props: {
+    resources: { type: Array, default: () => [] }
+  },
+  data() {
+    return {
+      expand: true,
+      removedResources: []
+    }
+  }
+}
+</script>
+<style scoped>
+.list-overlay-dark {
+  background: rgba(40, 40, 40, 1);
+  z-index: 5;
+}
+.list-overlay-light {
+  background: rgba(235, 235, 235, 1);
+  z-index: 5;
+}
+</style>
diff --git a/packages/frontend/src/cleanup/pages/stream/CommitObjectViewer.vue b/packages/frontend/src/cleanup/pages/stream/CommitObjectViewer.vue
index b36dca60b..961ee3a74 100644
--- a/packages/frontend/src/cleanup/pages/stream/CommitObjectViewer.vue
+++ b/packages/frontend/src/cleanup/pages/stream/CommitObjectViewer.vue
@@ -62,15 +62,10 @@
           </transition-group>
         </v-scroll-y-transition>
 
-        <v-subheader v-if="isMultiple" class="caption">Loaded commits/objects:</v-subheader>
-
-        <structure-display
-          v-for="(resource, index) in resources"
-          :key="index"
-          :resource="resource"
-          :is-multiple="isMultiple"
-          :expand-initial="!isMultiple"
+        <resource-group
+          :resources="resources"
           @remove="removeResource"
+          @add-resource="addResource"
         />
 
         <v-divider v-if="isMultiple" class="my-4" />
@@ -156,17 +151,17 @@ import Viewer from '@/cleanup/components/common/Viewer' // do not import async
 
 export default {
   components: {
+    Viewer,
     CommitToolbar: () => import('@/cleanup/toolbars/CommitToolbar'),
     ObjectToolbar: () => import('@/cleanup/toolbars/ObjectToolbar'),
     MultipleResourcesToolbar: () => import('@/cleanup/toolbars/MultipleResourcesToolbar'),
     CommitEdit: () => import('@/cleanup/dialogs/CommitEdit'),
     StreamOverlayViewer: () => import('@/cleanup/components/viewer/dialogs/AddOverlay'),
-    Viewer,
     ErrorPlaceholder: () => import('@/components/ErrorPlaceholder'),
     PreviewImage: () => import('@/cleanup/components/common/PreviewImage'),
     ViewerControls: () => import('@/cleanup/components/viewer/ViewerControls'),
     ObjectSelection: () => import('@/cleanup/components/viewer/ObjectSelection'),
-    StructureDisplay: () => import('@/cleanup/components/viewer/StructureDisplay'),
+    ResourceGroup: () => import('@/cleanup/components/viewer/ResourceGroup'),
     ViewsDisplay: () => import('@/cleanup/components/viewer/ViewsDisplay'),
     Filters: () => import('@/cleanup/components/viewer/Filters')
   },