ayanova/devdocs/todo.txt

@@ -67,6 +67,7 @@ CURRENT TODOs
 @@@@@@@@@@@ ROADMAP STAGE 2:
 
 todo: Attachments / wiki: wiki html processor needs to append dl token to local files in the wikiview automatically in real time
+todo: attachments - form key for hiding / showing customization
 
 downloadToken:"tR6ocdDYzU1WVQpdpH8Ux7AWLKvJhYOKth7bBKLRAM"
 
@@ -92,6 +93,8 @@ todo: ATTACHMENTS
 		- Maybe thumbnail pictures in the UI for easier download when viewing the list of attachments
 	- Consider ability to show attachment links / thumbnails at bottom of edit forms
 
+
+
 todo: AFTER ATTACHMENTS WIKI IMAGES
 	- Go back and finish off wiki image attachment UI and code	
 	- maybe other types are supported, i.e. video etc?

ayanova/src/api/translation.js

@@ -171,7 +171,8 @@ export default {
     "InsertImage",
     "ImageUrl",
     "ImageDescription",
-    "AttachFile"
+    "AttachFile",
+    "AttachmentNotes"
   ],
 
   ////////////////////////////////////////////////////////

ayanova/src/components/attachment-control.vue

@@ -1,9 +1,57 @@
 <template>
-  <div v-resize="onResize">
+  <div class="mt-6" v-resize="onResize">
     <span class="v-label v-label--active theme--light">
       {{ $ay.t("Attachments") }}
     </span>
-    <v-row>
+
+    <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" two-line>
+              <v-list-item
+                v-for="item in items"
+                :key="item.title"
+                @click="aClick"
+              >
+                <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.title"></v-list-item-title>
+                  <v-list-item-subtitle
+                    v-text="item.subtitle"
+                  ></v-list-item-subtitle>
+                </v-list-item-content>
+
+                <v-list-item-action>
+                  <v-btn icon>
+                    <v-icon>fa-trash</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
+              :label="$ay.t('AttachFile')"
+              prepend-icon="fa-paperclip"
+            ></v-file-input>
+            <v-text-field
+              v-model="notes"
+              :label="$ay.t('AttachmentNotes')"
+            ></v-text-field>
+          </div>
+        </v-tab-item>
+      </v-tabs-items>
+    </v-tabs>
+    <!-- <v-row>
       <v-col cols="12" sm="8">
         <v-card class="mx-auto">
           <v-card-text>
@@ -36,18 +84,20 @@
           </v-card-text>
 
           <v-card-actions>
-            <v-file-input
+            <div>
-              :label="$ay.t('AttachFile')"
+              <v-file-input
-              prepend-icon="fa-paperclip"
+                :label="$ay.t('AttachFile')"
-            ></v-file-input>
+                prepend-icon="fa-paperclip"
-            <v-text-field
+              ></v-file-input>
-              v-model="notes"
+              <v-text-field
-              :label="$ay.t('ImageDescription')"
+                v-model="notes"
-            ></v-text-field>
+                :label="$ay.t('ImageDescription')"
+              ></v-text-field>
+            </div>
           </v-card-actions>
         </v-card>
       </v-col>
-    </v-row>
+    </v-row> -->
   </div>
 </template>
 <script>
@@ -97,28 +147,29 @@ export default {
           title: "3Recipes",
           subtitle: "Jan 17, 2014"
         },
-        {
+        // {
-          icon: "fa-pen",
+        //   icon: "fa-pen",
-          title: "3Work",
+        //   title: "3Work",
-          subtitle: "Jan 28, 2014"
+        //   subtitle: "Jan 28, 2014"
-        },
+        // },
-        {
+        // {
-          icon: "fa-file",
+        //   icon: "fa-file",
-          title: "4drawings.pdf",
+        //   title: "4drawings.pdf",
-          subtitle: "2020-01-09"
+        //   subtitle: "2020-01-09"
-        },
+        // },
-        {
+        // {
-          icon: "fa-image",
+        //   icon: "fa-image",
-          title: "4Recipes",
+        //   title: "4Recipes",
-          subtitle: "Jan 17, 2014"
+        //   subtitle: "Jan 17, 2014"
-        },
+        // },
-        {
+        // {
-          icon: "fa-pen",
+        //   icon: "fa-pen",
-          title: "4Work",
+        //   title: "4Work",
-          subtitle: "Jan 28, 2014"
+        //   subtitle: "Jan 28, 2014"
-        }
+        // }
       ],
-      notes: null
+      notes: null,
+      tab: null
     };
   },
   props: {
@@ -129,7 +180,7 @@ export default {
 
   methods: {
     onResize() {
-      this.height = window.innerHeight * 0.25;
+      this.height = window.innerHeight * 0.8;
     },
     cardTextStyle() {
       return "height: " + this.height + "px;overflow-y:auto;";

ayanova/src/components/wiki-control.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="mt-6">
     <template v-if="readonly">
       <div>
         <v-btn depressed tile @click="switchView()">