add: sidebar anchor for similar items

frontend/src/components/ItemDetails.vue

@@ -38,14 +38,14 @@
 
         <va-card id="map" class="content-container map-container">
             <item-map-component v-if="detailsLoaded" :internal_id="this.itemDetails.internal_id"
-                :x_coord="this.itemDetails.x_coord" :y_coord="this.itemDetails.y_coord" />
+                :x_coord="this.xComputed" :y_coord="this.yComputed" />
             <h3 v-else>Карта загружается</h3>
         </va-card>
-        <va-card id="similar" class="content-container" v-show="settleFinishedComputed">
+        <va-card id="similar" class="content-container" v-if="detailsLoaded">
             <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}`)"
+                    :clickable="true" select-mode="single" @row:click="(e) => handleClick(e)"
                     class="similar-items-table" />
             </va-scroll-container>
         </va-card>
@@ -84,7 +84,6 @@ export default {
                 "category",
             ],
             similarItems: [],
-            settleFinished: false,
         };
     },
     methods: {
@@ -92,7 +91,6 @@ export default {
             fetch(`/api/v1/item/${this.$route.params.id}`)
                 .then(res => res.json())
                 .then(data => this.itemDetails = data)
-                .then(() => this.detailsLoaded = true)
                 .catch((e) => console.log(e));
         },
         async fetchColumnHeaders() {
@@ -126,12 +124,33 @@ export default {
                 { method: 'POST', body: JSON.stringify({ fadr: this.itemDetails.fadr }), headers: { 'Content-Type': 'application/json' } })
                 .then(res => res.json())
                 .then(data => this.similarItems = data)
+                .then(() => this.detailsLoaded = true)
+
                 .catch((e) => console.log(e));
-        }
+        },
+        handleClick(e) {
+            if (e.event.ctrlKey) {
+                let routeData = this.$router.resolve({ name: 'item-details' });
+                window.open(routeData.href, '_blank');
+            } else {
+                this.detailsLoaded = false;
+                this.$router.replace(`/items/${e.item.id}`).then(a => {
+                    this.fetchItemDetails();
+                });
+            }
+        },
     },
-    created() {
-        this.fetchItemDetails();
+    mounted() {
         this.fetchColumnHeaders();
+        this.fetchItemDetails().then(
+            this.fetchSimilarItems()
+        );
+
+    },
+    watch: {
+        'itemDetails': function (_oldval, _newval) {
+            this.fetchSimilarItems()
+        }
     },
     computed: {
         slotPreviewPath() {
@@ -167,16 +186,20 @@ export default {
         forceSimilarItemsReload() {
             // https://stackoverflow.com/questions/48641295/async-computed-in-components-vuejs
             this.fetchSimilarItems();
-            return this.itemDetails.fadr;
+            for (let _i in this.itemDetails) {
+                return this.itemDetails.fadr;
+            }
+            return false;
         },
         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
-        }
+        xComputed() {
+            return this.itemDetails.x_coord ? this.itemDetails.x_coord : 55.75
+        },
+        yComputed() {
+            return this.itemDetails.y_coord ? this.itemDetails.y_coord : 37.62
+        },
     },
     components: { ItemMapComponent }
 }
@@ -197,6 +220,7 @@ export default {
 
 .similar-items-table {
     width: 45rem;
+    overflow-x: hidden;
 }
 
 .item-description {

frontend/src/views/ItemView.vue

@@ -8,7 +8,7 @@
             <item-details />
         </div>
     </div>
-    <login-modal :showModal="showModal" @closeModal="showModal=false" />
+    <login-modal :showModal="showModal" @closeModal="showModal  =  false" />
 </template>
 
 
@@ -47,6 +47,12 @@ export default {
                     route: "item-details",
                     hash: "#map",
                 },
+                {
+                    title: "Похожие образцы",
+                    icon: "view_list",
+                    route: "item-details",
+                    hash: "#similar",
+                },
                 {
                     title: "Связь с представителем",
                     icon: "contact_page",