From 8e3581545689624852a7a5dc697fda7984dc47b0 Mon Sep 17 00:00:00 2001
From: John Cardinal <support@ayanova.com>
Date: Fri, 24 Apr 2020 21:39:46 +0000
Subject: [PATCH]

---
 ayanova/src/components/attachment-control.vue | 241 ++++++++++--------
 1 file changed, 129 insertions(+), 112 deletions(-)

diff --git a/ayanova/src/components/attachment-control.vue b/ayanova/src/components/attachment-control.vue
index 1f4ec2f8..5bc22d69 100644
--- a/ayanova/src/components/attachment-control.vue
+++ b/ayanova/src/components/attachment-control.vue
@@ -6,138 +6,149 @@
     @drop.prevent="onDrop"
     @dragover.prevent
   >
-    <span class="v-label v-label--active theme--light">
+    <div>
+      <v-btn depressed tile @click="revealedClicked">
+        {{ $ay.t("Attachments")
+        }}<v-icon v-text="reveal ? 'fa-eye-slash' : 'fa-eye'" right></v-icon
+      ></v-btn>
+    </div>
+
+    <template v-if="reveal">
+      <!-- <span class="v-label v-label--active theme--light">
       {{ $ay.t("Attachments") }}
-    </span>
-    <template v-if="readonly">
-      <!-- Note: this is just a copy of the inner part of read/write version below
+    </span> -->
+      <template v-if="readonly">
+        <!-- Note: this is just a copy of the inner part of read/write version below
       with the action taken out -->
-      <div class="mt-4" :style="cardTextStyle()">
-        <v-list color="grey lighten-5" three-line>
-          <v-list-item
-            v-for="item in displayList"
-            :key="item.id"
-            :href="item.url"
-            target="_blank"
-          >
-            <v-list-item-avatar>
-              <v-icon v-text="item.icon"></v-icon>
-            </v-list-item-avatar>
+        <div class="mt-4" :style="cardTextStyle()">
+          <v-list color="grey lighten-5" three-line>
+            <v-list-item
+              v-for="item in displayList"
+              :key="item.id"
+              :href="item.url"
+              target="_blank"
+            >
+              <v-list-item-avatar>
+                <v-icon v-text="item.icon"></v-icon>
+              </v-list-item-avatar>
 
-            <v-list-item-content>
-              <v-list-item-title v-text="item.name"></v-list-item-title>
+              <v-list-item-content>
+                <v-list-item-title v-text="item.name"></v-list-item-title>
 
-              <v-list-item-subtitle v-text="item.date"></v-list-item-subtitle>
+                <v-list-item-subtitle v-text="item.date"></v-list-item-subtitle>
 
-              <v-list-item-subtitle v-text="item.notes"></v-list-item-subtitle>
-            </v-list-item-content>
-          </v-list-item>
-        </v-list>
-      </div>
-    </template>
-    <template v-else>
-      <v-tabs v-model="tab" color="primary">
-        <v-tabs-slider></v-tabs-slider>
-        <v-tab key="list"><v-icon>fa-folder</v-icon></v-tab>
-        <v-tab key="attach"><v-icon>fa-paperclip</v-icon></v-tab>
-        <v-tabs-items v-model="tab">
-          <v-tab-item key="list">
-            <div class="mt-4" :style="cardTextStyle()">
-              <v-list color="grey lighten-5" three-line>
-                <v-list-item
-                  v-for="item in displayList"
-                  :key="item.id"
-                  :href="item.url"
-                  target="_blank"
-                >
-                  <v-list-item-avatar>
-                    <v-icon v-text="item.icon"></v-icon>
-                  </v-list-item-avatar>
+                <v-list-item-subtitle
+                  v-text="item.notes"
+                ></v-list-item-subtitle>
+              </v-list-item-content>
+            </v-list-item>
+          </v-list>
+        </div>
+      </template>
+      <template v-else>
+        <v-tabs v-model="tab" color="primary">
+          <v-tabs-slider></v-tabs-slider>
+          <v-tab key="list"><v-icon>fa-folder</v-icon></v-tab>
+          <v-tab key="attach"><v-icon>fa-paperclip</v-icon></v-tab>
+          <v-tabs-items v-model="tab">
+            <v-tab-item key="list">
+              <div class="mt-4" :style="cardTextStyle()">
+                <v-list color="grey lighten-5" three-line>
+                  <v-list-item
+                    v-for="item in displayList"
+                    :key="item.id"
+                    :href="item.url"
+                    target="_blank"
+                  >
+                    <v-list-item-avatar>
+                      <v-icon v-text="item.icon"></v-icon>
+                    </v-list-item-avatar>
 
-                  <v-list-item-content>
-                    <v-list-item-title v-text="item.name"></v-list-item-title>
+                    <v-list-item-content>
+                      <v-list-item-title v-text="item.name"></v-list-item-title>
 
-                    <v-list-item-subtitle
-                      v-text="item.date"
-                    ></v-list-item-subtitle>
+                      <v-list-item-subtitle
+                        v-text="item.date"
+                      ></v-list-item-subtitle>
 
-                    <v-list-item-subtitle
-                      v-text="item.notes"
-                    ></v-list-item-subtitle>
-                  </v-list-item-content>
+                      <v-list-item-subtitle
+                        v-text="item.notes"
+                      ></v-list-item-subtitle>
+                    </v-list-item-content>
 
-                  <v-list-item-action>
-                    <v-btn large @click="openEditMenu(item, $event)" icon>
-                      <v-icon>fa-edit</v-icon>
-                    </v-btn>
-                  </v-list-item-action>
-                </v-list-item>
-              </v-list>
-            </div>
-          </v-tab-item>
-          <v-tab-item key="attach">
-            <div class="mt-8">
-              <v-file-input
-                v-model="uploadFiles"
-                :label="$ay.t('AttachFile')"
-                prepend-icon="fa-paperclip"
-                multiple
-                chips
-              ></v-file-input>
+                    <v-list-item-action>
+                      <v-btn large @click="openEditMenu(item, $event)" icon>
+                        <v-icon>fa-edit</v-icon>
+                      </v-btn>
+                    </v-list-item-action>
+                  </v-list-item>
+                </v-list>
+              </div>
+            </v-tab-item>
+            <v-tab-item key="attach">
+              <div class="mt-8">
+                <v-file-input
+                  v-model="uploadFiles"
+                  :label="$ay.t('AttachFile')"
+                  prepend-icon="fa-paperclip"
+                  multiple
+                  chips
+                ></v-file-input>
+                <v-text-field
+                  v-model="notes"
+                  :label="$ay.t('AttachmentNotes')"
+                ></v-text-field>
+                <v-btn color="primary" text @click="upload">{{
+                  $ay.t("Upload")
+                }}</v-btn>
+              </div>
+            </v-tab-item>
+          </v-tabs-items>
+        </v-tabs>
+        <v-menu
+          min-width="360"
+          v-model="editMenu"
+          :close-on-content-click="false"
+          offset-y
+          :position-x="menuX"
+          :position-y="menuY"
+          absolute
+        >
+          <v-card>
+            <v-card-title>{{ $ay.t("FileAttachment") }}</v-card-title>
+            <div class="ma-6">
               <v-text-field
-                v-model="notes"
+                v-model="editName"
+                :label="$ay.t('AttachmentFileName')"
+              ></v-text-field>
+              <v-text-field
+                v-model="editNotes"
                 :label="$ay.t('AttachmentNotes')"
               ></v-text-field>
-              <v-btn color="primary" text @click="upload">{{
-                $ay.t("Upload")
-              }}</v-btn>
             </div>
-          </v-tab-item>
-        </v-tabs-items>
-      </v-tabs>
-      <v-menu
-        min-width="360"
-        v-model="editMenu"
-        :close-on-content-click="false"
-        offset-y
-        :position-x="menuX"
-        :position-y="menuY"
-        absolute
-      >
-        <v-card>
-          <v-card-title>{{ $ay.t("FileAttachment") }}</v-card-title>
-          <div class="ma-6">
-            <v-text-field
-              v-model="editName"
-              :label="$ay.t('AttachmentFileName')"
-            ></v-text-field>
-            <v-text-field
-              v-model="editNotes"
-              :label="$ay.t('AttachmentNotes')"
-            ></v-text-field>
-          </div>
-          <v-card-actions>
-            <v-btn @click="remove()" text>
-              {{ $ay.t("Delete") }}
-            </v-btn>
-            <v-spacer></v-spacer>
-            <v-btn text @click="editMenu = false">{{ $ay.t("Cancel") }}</v-btn>
-            <v-btn color="primary" text @click="saveEdit">{{
-              $ay.t("OK")
-            }}</v-btn>
-          </v-card-actions>
-        </v-card>
-      </v-menu>
+            <v-card-actions>
+              <v-btn @click="remove()" text>
+                {{ $ay.t("Delete") }}
+              </v-btn>
+              <v-spacer></v-spacer>
+              <v-btn text @click="editMenu = false">{{
+                $ay.t("Cancel")
+              }}</v-btn>
+              <v-btn color="primary" text @click="saveEdit">{{
+                $ay.t("OK")
+              }}</v-btn>
+            </v-card-actions>
+          </v-card>
+        </v-menu>
+      </template>
     </template>
   </div>
 </template>
 <script>
 export default {
-  created() {
-    this.getList();
-  },
   data() {
     return {
+      reveal: false,
       height: 300,
       displayList: [],
       notes: null,
@@ -158,6 +169,12 @@ export default {
   },
   computed: {},
   methods: {
+    revealedClicked() {
+      this.reveal = !this.reveal;
+      if (this.reveal) {
+        this.getList();
+      }
+    },
     onResize() {
       this.height = window.innerHeight * 0.8;
     },