Compress reports list section

1 files changed, 14 insertions, 3 deletions

diff --git a/components/ModelReportsList.vue b/components/ModelReportsList.vue
index ae429e4..37ffaf9 100644
--- a/components/ModelReportsList.vue
+++ b/components/ModelReportsList.vue
@@ -33,10 +33,17 @@
               ) Cancel
 
 
-    h2.text-xl.font-bold(v-if="me && me.is_staff") Reports 
-    h2.text-xl.font-bold(v-else) My reports
+    .flow-root
+      .float-left
+        h2.text-xl.font-bold(v-if="me && me.is_staff") Reports 
+        h2.text-xl.font-bold(v-else) My reports
+      .float-right.flex.cursor-pointer(@click="expandList = !expandList")
+        span {{ notResolved(warnings) }} not resolved
+        svg(xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="ml-2 w-6 h-6")
+          path(stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" v-if="!expandList")
+          path(stroke-linecap="round" stroke-linejoin="round" d="M4.5 15.75l7.5-7.5 7.5 7.5" v-else)
 
-    ul(role="list" v-if="me")
+    ul(role="list" v-if="me && expandList")
       li.text-sm.rounded-md.border.border-gray-200.mt-3(v-for="warning in warnings" :key="warning.id")
         .py-3.pl-3.pr-4(v-if="!me.is_staff")
           h3.flex.leading-6.mb-2.float-right
@@ -101,6 +108,7 @@ export default {
     return {
       boxToResolve: 0,
       form: { admin_note: "" },
+      expandList: false,
     };
   },
   computed: {
@@ -112,6 +120,9 @@ export default {
     this.$store.dispatch("warnings/filterWarnings", { model_id: this.model });
   },
   methods: {
+    notResolved(warnings) {
+      return warnings.filter((x) => !x.resolved_by).length;
+    },
     editWarning() {
       if (this.boxToResolve < 1) return;