make product passort main props more generic

european-epc-competence-center · Nov 17, 2022 · b1cf0c4 · b1cf0c4
1 parent 9869beb
commit b1cf0c4
Showing 1 changed file with 28 additions and 38 deletions.
diff --git a/frontend/src/views/ProductPassport.vue b/frontend/src/views/ProductPassport.vue
@@ -6,45 +6,19 @@
         <div class="card-body p-3">
         <div class="row mb-3">
             <div class="col-md-8">
-                <h3 class="ms-3 mb-3">{{properties.product}}</h3>
-                <ul class="list-group">
-                    <Transition name="list">
-                        <li v-if="properties.brand" class="list-group-item">
-                            <div class="row">
-                                <div class="col-md-6">
-                                    <strong>Brand</strong>
-                                </div>
-                                <div class="col-md-6">
-                                    {{properties.brand}}
-                                </div>
-                            </div>
-                        </li>
-                    </Transition>
-                    <Transition name="list">
-                        <li v-if="properties.model" class="list-group-item">
-                            <div class="row">
-                                <div class="col-md-6">
-                                    <strong>Model</strong>
-                                </div>
-                                <div class="col-md-6">
-                                    {{properties.model}}
-                                </div>
+                <h3 v-if="properties.product" class="ms-3 mb-3">{{properties.product}}</h3>
+                <TransitionGroup name="list" tag="ul" class="list-group">
+                    <li v-for="(value, key) in getMainProps" :key="key" class="list-group-item">
+                        <div class="row">
+                            <div class="col-md-6">
+                                <strong>{{mainProps[key]}}</strong>
                             </div>
-                        </li>
-                    </Transition>
-                    <Transition name="list">
-                        <li v-if="properties.production_date" class="list-group-item">
-                            <div class="row">
-                                <div class="col-md-6">
-                                    <strong>Production date</strong>
-                                </div>
-                                <div class="col-md-6">
-                                    {{properties.production_date}}
-                                </div>
+                            <div class="col-md-6">
+                                {{value}}
                             </div>
-                        </li>
-                    </Transition>
-                </ul>
+                        </div>
+                    </li>
+                </TransitionGroup>
             </div>
             <div class="col-md-4 mt-md-0 mt-3">
                 <Transition name="slide-fade">
@@ -89,8 +63,24 @@ export default {
     },
     data() {
         return {
-            
+            mainProps: {
+                'brand': 'Brand',
+                'model': 'Model',
+                'clockworkType': 'Clockwork',
+                'caseMaterial': 'Case Material'
+            }
         }
     },
+    computed: {
+        getMainProps() {
+            return Object.keys(this.mainProps)
+                            .filter((key) => Object.keys(this.properties).includes(key))
+                            .reduce((obj, key) => {
+                                return Object.assign(obj, {
+                                [key]: this.properties[key]
+                                });
+                            }, {});
+        }
+    }
 }
 </script>