stash

frontend/src/components/AuthenticatedImage.vue

@@ -1,5 +1,5 @@
 <template>
-    <img :src="image_data" :alt="owner + '/' + src"/>
+    <img :src="image_data" :alt="owner + ':' + src"/>
 </template>
 
 <style scoped>
@@ -42,7 +42,9 @@ export default {
             this.servers = await this.getFriendServers({username: this.owner});
             const response = await this.servers.getRaw(this.signAuth, this.src);
             const mime_type = response.headers.get("content-type");
-            this.image_data = "data:" + mime_type + ";base64," + btoa(String.fromCharCode(...new Uint8Array(await response.arrayBuffer())));
+            const base64 = btoa(new Uint8Array(await response.arrayBuffer())
+                .reduce((data, byte) => data + String.fromCharCode(byte), ""));
+            this.image_data = "data:" + mime_type + ";base64," + base64;
         } catch (e) {
             console.log(e);
         }

frontend/src/components/CombinedFileField.vue

@@ -11,10 +11,10 @@
             </li>
         </ul>
         <hr>
-        <div>
+        <div style="position: relative;">
-            <img v-for="file in only_images(files)" :key="file.id" :src="file.name" :alt="file.name"
+            <authenticated-image v-for="file in only_images(item_files).filter(file => file.owner)" :key="file.id"
-                 class="img-thumbnail" :title="file.mime_type">
+                                 :owner="file.owner" :src="file.name" class="img-thumbnail"/>
-            <img v-for="file in only_images(item_files)" :key="file.id" :alt="file.name"
+            <img v-for="file in only_images(item_files).filter(file => file.data)" :key="file.id" :alt="file.name"
                  :src="'data:' + file.mime_type + ';base64,' + file.data" class="img-thumbnail border-info">
             <fs-file-source @input="addFiles">
                 <div class="img-thumbnail btn btn-outline-primary">
@@ -26,6 +26,15 @@
                     <b-icon-camera></b-icon-camera>
                 </div>
             </camera-file-source>
+            <input type="checkbox" id="file-dropdown" class="invisible-input">
+            <label class="img-thumbnail btn btn-outline-primary" for="file-dropdown">
+                <b-icon-plus></b-icon-plus>
+            </label>
+            <div class="dropdown-menu">
+                <authenticated-image v-for="file in only_images(files)" :key="file.id" :src="file.name"
+                                     :owner="file.owner"
+                                     class="img-thumbnail"/>
+            </div>
         </div>
     </drag-drop-file-source>
 </template>
@@ -41,6 +50,25 @@
     width: 100%;
     height: 100%;
 }
+
+.invisible-input {
+    display: none;
+}
+
+#file-dropdown:checked ~ .dropdown-menu {
+    display: block;
+}
+
+#file-dropdown:checked ~ label {
+    color: #fff;
+    background-color: var(--bs-primary);
+    border-color: var(--bs-primary);
+}
+#file-dropdown:checked ~ label:hover {
+    color: var(--bs-primary);
+    background-color: initial;
+}
+
 </style>
 
 <script>
@@ -49,11 +77,13 @@ import {mapActions, mapState} from "vuex";
 import DragDropFileSource from "@/components/DragDropFileSource.vue";
 import FsFileSource from "@/components/FsFileSource.vue";
 import CameraFileSource from "@/components/CameraFileSource.vue";
+import AuthenticatedImage from "@/components/AuthenticatedImage.vue";
 
 export default {
     name: "CombinedFileField",
     components: {
         ...BIcons,
+        AuthenticatedImage,
         DragDropFileSource,
         CameraFileSource,
         FsFileSource
@@ -85,7 +115,6 @@ export default {
                 });
             });
             const responses = await Promise.all(jobs);
-            console.log(responses);
             return responses;
         },
         addFiles(files) {
@@ -96,11 +125,9 @@ export default {
             }
             if (!this.create) {
                 this.uploadFiles(newfiles).then((uploaded) => {
-                    console.log(uploaded);
+                    this.$emit("change", [...this.item_files, ...uploaded]);
                 })
             }
-            this.$emit("change", [...this.item_files, ...newfiles]);
-            console.log(this.item_files);
 
         },
         only_images(files) {
@@ -108,7 +135,7 @@ export default {
         },
         whithout_images(files) {
             return files.filter(file => !file.mime_type.startsWith("image/"));
-        },
+        }
     },
     mounted() {
         this.fetchFiles();

frontend/src/store.js

@@ -176,6 +176,7 @@ export default createStore({
         async fetchInventoryItems({commit, dispatch, getters}) {
             const servers = await dispatch('getHomeServers')
             const items = await servers.get(getters.signAuth, '/api/inventory_items/')
+            items.map(item => item.files.map(file => file.owner = item.owner))
             commit('setInventoryItems', {url: '/', items})
             return items
         },
@@ -258,6 +259,7 @@ export default createStore({
             }
             const servers = await dispatch('getHomeServers')
             const data = await servers.get(getters.signAuth, '/api/files/')
+            data.map(file => file.owner = state.user)
             commit('setFiles', data)
             state.last_load.files = Date.now()
             return data
@@ -269,7 +271,8 @@ export default createStore({
         async pushFile({state, dispatch, getters}, {item_id, file}) {
             const servers = await dispatch('getHomeServers')
             const data = await servers.post(getters.signAuth, '/api/item_files/' + item_id + '/', file)
-            if (data.hash) {
+            if (data.name) {
+                data.owner = state.user
                 state.files.push(data)
                 return data
             }

frontend/src/views/InventoryDetail.vue

@@ -35,7 +35,7 @@
                             <div class="mb-3">
                                 <label for="image" class="form-label">Image</label>
                                 <div>
-                                    <authenticated-image v-for="file in files" :key="file.id" :src="file.name"
+                                    <authenticated-image v-for="file in item.files" :key="file.id" :src="file.name"
                                                          :owner="file.owner" class="img-thumbnail border-info"></authenticated-image>
                                 </div>
 
@@ -77,11 +77,6 @@ export default {
         BaseLayout,
         ...BIcons
     },
-    data() {
-        return {
-            files: []
-        }
-    },
     props: {
         id: {
             type: String,
@@ -99,14 +94,6 @@ export default {
     },
     async mounted() {
         await this.fetchInventoryItems()
-        console.log(this.id, typeof this.id)
-        const files = await this.fetchFilesByItem({id: this.id})
-        this.files = files.map(file => {
-            return {
-                ...file,
-                owner: this.item.owner
-            }
-        })
     }
 }
 </script>

frontend/src/views/InventoryEdit.vue

@@ -6,13 +6,6 @@
                     <div class="card">
                         <div class="card-header">Edit Item</div>
                         <div class="card-body">
-                            <div class="mb-3">
-                                <ul>
-                                    <li v-for="file in item.files" :key="file.name">
-                                        {{ file.name }} ({{ file.hash }})
-                                    </li>
-                                </ul>
-                            </div>
                             <div class="mb-3">
                                 <label for="name" class="form-label">Name</label>
                                 <input type="text" class="form-control" id="name" name="name"