From 6005cbd6c0a2a7ceaeb630fe5cfbfe6c0ac8e288 Mon Sep 17 00:00:00 2001
From: Stanislav Popov <popstas@gmail.com>
Date: Thu, 27 Aug 2020 21:00:40 +0500
Subject: [PATCH] feat: hide duplicated fields in ItemDetails

---
 components/ItemDetails.vue | 38 +++++++++++++++++++++++---------------
 pages/index.scss           |  7 +++++++
 2 files changed, 30 insertions(+), 15 deletions(-)

diff --git a/components/ItemDetails.vue b/components/ItemDetails.vue
index 3559f2d..3564b58 100644
--- a/components/ItemDetails.vue
+++ b/components/ItemDetails.vue
@@ -78,29 +78,37 @@ export default {
           ? field.groups
           : [field.groups];
 
-        for (let g in groupsList) {
-          let groupName = groupsList[g];
-          if (!(groupName in groups)) {
-            groups[groupName] = { name: groupName, fields: [] };
-          }
+        field.validateClass = this.getColumnValidateClass(field.value, field.validate);
 
-          field.validateClass = this.getColumnValidateClass(field.value, field.validate);
+        // console.log(fieldName + ' validateClass: ', field.validateClass);
 
-          // console.log(fieldName + ' validateClass: ', field.validateClass);
+        let valueText;
 
-          let valueText;
+        if (field.type == "boolean") {
+          valueText = parseInt(field.value) ? "yes" : "no"; // tolang
+        }
 
-          if (field.type == "boolean") {
-            valueText = parseInt(field.value) ? "yes" : "no"; // tolang
-          }
 
+        if (typeof val === 'string' && (field.type === 'image' || val.match(/^http.*\.(jpg|jpeg|png|gif)$/)) && val) {
+          valueText = `<img alt="error loading image" style="width: 150px; height: auto;" src="${val}" title="${val}"/>`;
+        }
 
-          if (typeof val === 'string' && (field.type === 'image' || val.match(/^http.*\.(jpg|jpeg|png|gif)$/)) && val) {
-            valueText = `<img alt="error loading image" style="width: 150px; height: auto;" src="${val}" title="${val}"/>`;
+        field.valueText = valueText;
+
+        // add to groups
+        for (let g in groupsList) {
+          console.log('g: ', g);
+          let groupName = groupsList[g];
+          if (!(groupName in groups)) {
+            groups[groupName] = { name: groupName, fields: [] };
           }
 
-          field.valueText = valueText;
-          groups[groupName].fields.push(field);
+          const f = {...field};
+
+          // hide field duplicates
+          if (g != 0) f.validateClass += ' secondary group-'+ groupName;
+
+          groups[groupName].fields.push(f);
         }
       }
       // console.log('groups: ', groups);
diff --git a/pages/index.scss b/pages/index.scss
index c75e040..71fad51 100644
--- a/pages/index.scss
+++ b/pages/index.scss
@@ -192,6 +192,13 @@
       vertical-align: top;
     }
 
+    &.secondary {
+      opacity: 0.3;
+      &:hover {
+        opacity: 1;
+      }
+    }
+
     .item-details__value {
       min-width: 75px;
       display: inline-block;