add: similar items list in details

frontend/src/components/ItemDetails.vue

@@ -41,6 +41,14 @@
                 :x_coord="this.itemDetails.x_coord" :y_coord="this.itemDetails.y_coord" />
             <h3 v-else>Карта загружается</h3>
         </va-card>
+        <va-card id="similar" class="content-container" v-show="settleFinishedComputed">
+            <va-scroll-container vertical>
+                <va-card-title>Похожие образцы</va-card-title>
+                <va-data-table :items="filteredSimilarItems" :columns="filteredColumns" :hoverable="true"
+                    :clickable="true" @row:click="(e) => $router.push(`/items/${e.item.id}`)"
+                    class="similar-items-table" />
+            </va-scroll-container>
+        </va-card>
         <va-card id="contact" class="content-container">
             <va-card-title>Связь с представителем</va-card-title>
         </va-card>
@@ -69,7 +77,14 @@ export default {
             imageExtension: "bmp",
             hasImage: false,
             detailsLoaded: false,
-            columnHeaders: []
+            columnHeaders: [],
+            showColumns: [
+                "description",
+                "deposit",
+                "category",
+            ],
+            similarItems: [],
+            settleFinished: false,
         };
     },
     methods: {
@@ -105,6 +120,13 @@ export default {
             }
 
             return `/static/previews/${this.itemDetails.fadr}+/${this.itemDetails.internal_id}.${this.imageExtension}`
+        },
+        async fetchSimilarItems() {
+            fetch(`/api/v1/detailed_search/`,
+                { method: 'POST', body: JSON.stringify({ fadr: this.itemDetails.fadr }), headers: { 'Content-Type': 'application/json' } })
+                .then(res => res.json())
+                .then(data => this.similarItems = data)
+                .catch((e) => console.log(e));
         }
     },
     created() {
@@ -128,6 +150,33 @@ export default {
                 .filter(([k, _v]) => !(this.hidden.includes(k)))
                 .map(([k, v]) => [this.dictHeaders[k], v])
         },
+        filteredColumns() {
+            return this.columnHeaders
+                .filter(header => this.showColumns.includes(header.database))
+                .sort((header1, header2) => {
+                    return this.showColumns.indexOf(header1.database) - this.showColumns.indexOf(header2.database)
+                })
+                .map(header => {
+                    return {
+                        key: header.database,
+                        label: header.spreadsheet,
+                        sortable: true,
+                    }
+                })
+        },
+        forceSimilarItemsReload() {
+            // https://stackoverflow.com/questions/48641295/async-computed-in-components-vuejs
+            this.fetchSimilarItems();
+            return this.itemDetails.fadr;
+        },
+        filteredSimilarItems() {
+            return [...this.similarItems].filter(item => item.internal_id !== this.itemDetails.internal_id)
+        },
+        settleFinishedComputed() {
+            let result = this.settleFinished ? this.settleFinished : Boolean(this.filteredSimilarItems.length);
+            this.settleFinished = true;
+            return result
+        }
     },
     components: { ItemMapComponent }
 }
@@ -146,6 +195,10 @@ export default {
     margin: 1rem auto;
 }
 
+.similar-items-table {
+    width: 45rem;
+}
+
 .item-description {
     margin-top: 2rem;
     margin-bottom: 2rem;