Skip to content

Commit

Permalink
Merge pull request #176 from catenax-ng/release/v2.1.0-dpp-2.0.0
Browse files Browse the repository at this point in the history
[ 3° ] - Release/v2.1.0 dpp 2.0.0: Added new version of DPP 2.0.0
  • Loading branch information
saudkhan116 authored Feb 2, 2024
2 parents f65f6c5 + ff022ab commit 526c40f
Show file tree
Hide file tree
Showing 17 changed files with 1,644 additions and 976 deletions.
452 changes: 452 additions & 0 deletions src/assets/MOCK/dppv2.json

Large diffs are not rendered by default.

37 changes: 37 additions & 0 deletions src/assets/styles/components/passport/additionalData.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
/**
* Catena-X - Product Passport Consumer Frontend
*
* Copyright (c) 2022, 2023 BASF SE, BMW AG, Henkel AG & Co. KGaA
*
* See the NOTICE file(s) distributed with this work for additional
* information regarding copyright ownership.
*
* This program and the accompanying materials are made available under the
* terms of the Apache License, Version 2.0 which is available at
* https://www.apache.org/licenses/LICENSE-2.0.
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
* either express or implied. See the
* License for the specific language govern in permissions and limitations
* under the License.
*
* SPDX-License-Identifier: Apache-2.0
*/

.additional-data {
.column {
border: 2px solid #f4fbfd;
border-radius: 10px;
padding: 7px 7px 10px 7px !important;
margin: 6px !important;
}
.container-label {
padding: 10px 0;
max-height: 60%;
cursor: pointer;
font-weight: 800;
color: $catena-x-blue;
}
}
1 change: 1 addition & 0 deletions src/assets/styles/main.scss
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@
@import "components/general/recursiveTree";
@import "components/passport/documentField";
@import "components/passport/field";
@import "components/passport/additionalData";
@import "components/passport/cards";
@import "components/landing/searchView";
@import "components/passport/sections";
Expand Down
88 changes: 88 additions & 0 deletions src/components/general/RecursiveAdditionalData.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@
<!--
Catena-X - Product Passport Consumer Frontend

Copyright (c) 2022, 2023 BASF SE, BMW AG, Henkel AG & Co. KGaA

See the NOTICE file(s) distributed with this work for additional
information regarding copyright ownership.

This program and the accompanying materials are made available under the
terms of the Apache License, Version 2.0 which is available at
https://www.apache.org/licenses/LICENSE-2.0.

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
either express or implied. See the
License for the specific language govern in permissions and limitations
under the License.

SPDX-License-Identifier: Apache-2.0
-->

<template>
<div class="additional-data">
<!-- eslint-disable-next-line vue/no-v-for-template-key -->
<template v-for="attribute in jsonData.children" :key="attribute">
<template v-if="attribute.type.dataType !== 'object'">
<DialogComponent class="field-dialog">
<Field
info
:icon="callIconFinder(attribute.label)"
:label="attribute.label"
:value="processValue(attribute)"
:unit="attribute.type.typeUnit ? attribute.type.typeUnit : ''"
/>
<template v-slot:text>
{{ attribute.description }}
</template>
</DialogComponent>
</template>
<template v-else>
<DialogComponent class="field-dialog">
<div class="column">
<div class="container-label">{{ attribute.label }}</div>
</div>
<template v-slot:text>
{{ attribute.description }}
</template>
</DialogComponent>
<template v-if="attribute.children">
<recursive-additional-data :jsonData="attribute" />
</template>
</template>
</template>
</div>
</template>

<script>
import passportUtil from "@/utils/passportUtil.js";
import Field from "../passport/Field.vue";
import DialogComponent from "../general/Dialog.vue";
export default {
name: "RecursiveAdditionalData",
components: {
Field,
DialogComponent,
},
props: {
jsonData: {
type: [Object, Array],
},
},

methods: {
callIconFinder(unit) {
return passportUtil.iconFinder(unit);
},
processValue(attribute) {
if (attribute.type.dataType == "array" && Array.isArray(attribute.data)) {
return attribute.data.join(", ");
} else {
return attribute.data;
}
},
},
};
</script>

26 changes: 10 additions & 16 deletions src/components/passport/GeneralCards.vue
Original file line number Diff line number Diff line change
Expand Up @@ -96,13 +96,13 @@ export default {
{
title: "GENERAL",
label: "Product name",
secondLabel: "Product type",
secondLabel: "Product code",
icon: "mdi-pound",
value: this.$props.data.aspect.typology
? this.$props.data.aspect.typology.name
? this.$props.data.aspect.typology.shortName
: "-",
secondValue: this.$props.data.aspect.typology
? this.$props.data.aspect.typology.nameAtCustomer
? this.$props.data.aspect.typology.class.code
: "-",
},
{
Expand All @@ -111,12 +111,10 @@ export default {
secondLabel: "Date of Manufacturing",
icon: "mdi-chart-timeline-variant-shimmer",
value: this.$props.data.aspect.operation.manufacturer
? this.$props.data.aspect.operation.manufacturer.manufacturerId
? this.$props.data.aspect.operation.manufacturer.manufacturer
: "-",
secondValue: this.$props.data.aspect.serialization
.manufacturingInformation
? this.$props.data.aspect.serialization.manufacturingInformation
.date
secondValue: this.$props.data.aspect.operation.manufacturer
? this.$props.data.aspect.operation.manufacturer.manufacturingDate
: "-",
description: {
title: "Manufacturing",
Expand All @@ -138,17 +136,13 @@ export default {
{
title: "SUSTAINABILITY",
label: "Total CO2 footprint",
secondLabel: "Warranty period",
secondLabel: "Placed on market",
icon: "mdi-leaf",
value: this.$props.data.aspect.sustainability.carbonFootprint
? this.$props.data.aspect.sustainability.carbonFootprint
.carbonContentTotal
value: this.$props.data.aspect.sustainability["PEF"].carbon
? this.$props.data.aspect.sustainability["PEF"].carbon[0].value
: "-",
valueUnits: "t CO2 Total",
secondValue: this.$props.data.aspect.commercial.warranty,
secondValueUnits: this.$props.data.aspect.commercial.warranty
? "months"
: "",
secondValue: this.$props.data.aspect.commercial.placedOnMarket,
description: {
title: "Sustainability",
value: "Description of the Sustainability",
Expand Down
38 changes: 27 additions & 11 deletions src/components/passport/sections/AdditionalData.vue
Original file line number Diff line number Diff line change
Expand Up @@ -22,16 +22,19 @@

<template>
<div class="section">
<v-container class="ma-0" v-for="attribute in propsData" :key="attribute">
<v-container class="ma-0">
<v-row class="section">
<template v-if="attribute">
<v-col sm="12" md="4" class="pa-0 ma-0">
<Field
icon="mdi-image-size-select-small"
:label="attribute.label"
:value="attribute.data"
:unit="attribute.type.typeUnit"
/>
<template v-if="propsData">
<v-col
v-for="(attr, key) in propsData"
:key="key"
sm="12"
:md="columnWidth"
class="pa-0 ma-0 column"
>
<div class="element-chart-label">{{ attr.label }}</div>

<RecursiveAdditionalData :jsonData="attr" />
</v-col>
</template>
</v-row>
Expand All @@ -40,12 +43,12 @@
</template>

<script>
import Field from "../Field.vue";
import RecursiveAdditionalData from "../../general/RecursiveAdditionalData.vue";

export default {
name: "AdditionalDataComponent",
components: {
Field,
RecursiveAdditionalData,
},
props: {
data: {
Expand All @@ -56,7 +59,20 @@ export default {
data() {
return {
propsData: this.$props.data.aspect.additionalData,
columnWidth: 6,
};
},
created() {
this.columnWidth = this.columnCounter(this.propsData);
},
methods: {
columnCounter(array) {
const maxGridSize = 12;
const columns = array.length;
const columnWidth = Math.max(1, Math.floor(maxGridSize / columns));
return columnWidth;
},
},
};
</script>

103 changes: 73 additions & 30 deletions src/components/passport/sections/Characteristics.vue
Original file line number Diff line number Diff line change
Expand Up @@ -24,48 +24,85 @@
<div class="section">
<v-container class="ma-0">
<v-row class="section">
<template v-if="propsData.physicalDimensionsProperty">
<template v-if="propsData.physicalDimension">
<v-col sm="12" md="4" class="pa-0 ma-0">
<Field
icon="mdi-image-size-select-small"
label="Physical dimensions property"
:width="propsData.physicalDimensionsProperty.width"
:length="propsData.physicalDimensionsProperty.length"
:height="propsData.physicalDimensionsProperty.height"
/>
<Field
icon="mdi-arrow-down-circle-outline"
label="Weight"
:value="propsData.physicalDimensionsProperty.weight"
:unit="propsData.physicalDimensionsProperty.unit"
/>
<div class="element-chart-label">Physical dimension</div>
<template v-if="propsData.physicalDimension.grossWeight">
<Field
:icon="callIconFinder('grossWeight')"
label="Gross weight"
:value="propsData.physicalDimension.grossWeight.value"
:unit="propsData.physicalDimension.grossWeight.unit"
/>
</template>
<template v-if="propsData.physicalDimension.weightOrVolume.left">
<Field
:icon="callIconFinder('weightOrVolume')"
label="Weight or volume"
:value="propsData.physicalDimension.weightOrVolume.left.value"
:unit="propsData.physicalDimension.weightOrVolume.left.unit"
/>
</template>
<template v-if="propsData.physicalDimension.diameter">
<Field
:icon="callIconFinder('diameter')"
label="Diameter"
:value="propsData.physicalDimension.diameter.value"
:unit="propsData.physicalDimension.diameter.unit"
/>
</template>
<template v-if="propsData.physicalDimension.grossVolume">
<Field
:icon="callIconFinder('grossVolume')"
label="Gross volume"
:value="propsData.physicalDimension.grossVolume.value"
:unit="propsData.physicalDimension.grossVolume.unit"
/>
</template>
<template v-if="propsData.physicalDimension.width">
<Field
:icon="callIconFinder('width')"
label="Width"
:value="propsData.physicalDimension.width.value"
:unit="propsData.physicalDimension.width.unit"
/>
</template>
<template v-if="propsData.physicalDimension.length">
<Field
:icon="callIconFinder('length')"
label="Length"
:value="propsData.physicalDimension.length.value"
:unit="propsData.physicalDimension.length.unit"
/>
</template>
<template v-if="propsData.physicalDimension.height">
<Field
:icon="callIconFinder('height')"
label="Height"
:value="propsData.physicalDimension.height.value"
:unit="propsData.physicalDimension.height.unit"
/>
</template>
</v-col>
</template>
<template v-if="propsData.lifespan">
<v-col sm="12" md="4" class="pa-0 ma-0">
<Field
icon="mdi-arrow-down-circle-outline"
v-for="attr in propsData.lifespan"
:key="attr"
:icon="callIconFinder('lifespan')"
label="Lifespan"
:value="propsData.lifespan.value"
:unit="propsData.lifespan.unit"
:value="attr.value"
:unit="attr.unit"
/>
</v-col>
</template>
<v-col sm="12" md="4" class="pa-0 ma-0">
<template v-if="propsData.energyCapacity">
<template v-if="propsData.physicalState">
<Field
icon="mdi-arrow-down-circle-outline"
label="Energy capacity"
:value="propsData.energyCapacity.value"
:unit="propsData.energyCapacity.unit"
/>
</template>
<template v-if="propsData.voltage">
<Field
icon="mdi-arrow-down-circle-outline"
label="Voltage"
:value="propsData.voltage.value"
:unit="propsData.voltage.unit"
:icon="callIconFinder('physicalState')"
label="Physical state"
:value="propsData.physicalState"
/>
</template>
</v-col>
Expand All @@ -76,6 +113,7 @@

<script>
import Field from "../Field.vue";
import passportUtil from "@/utils/passportUtil.js";

export default {
name: "CharacteristicsComponent",
Expand All @@ -93,5 +131,10 @@ export default {
propsData: this.$props.data.aspect.characteristics,
};
},
methods: {
callIconFinder(unit) {
return passportUtil.iconFinder(unit);
},
},
};
</script>
Loading

0 comments on commit 526c40f

Please sign in to comment.