feat: hide duplicated fields in ItemDetails

popstas · Aug 27, 2020 · 6005cbd · 6005cbd
1 parent 3409e77
commit 6005cbd
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 15 deletions.
diff --git 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
@@ -192,6 +192,13 @@
       vertical-align: top;
     }
 
+    &.secondary {
+      opacity: 0.3;
+      &:hover {
+        opacity: 1;
+      }
+    }
+
     .item-details__value {
       min-width: 75px;
       display: inline-block;