diff --git a/src/assets/MOCK/dppv2.json b/src/assets/MOCK/dppv2.json new file mode 100644 index 000000000..352752eb0 --- /dev/null +++ b/src/assets/MOCK/dppv2.json @@ -0,0 +1,452 @@ +{ + "metadata": { + "contract": { + "@id": "9b3c0977-6b14-4201-bd76-55f681a92872", + "@type": "dcat:Dataset", + "odrl:hasPolicy": { + "@id": "3:365e6fbe-bb34-11ec-8422-0242ac120002-61125dc3-5e6f-4f4b-838d-447432b97918:dc616f20-2781-450a-837a-290d861c8e0a", + "@type": "odrl:Set", + "odrl:permission": [], + "odrl:prohibition": [], + "odrl:obligation": [], + "odrl:target": "365e6fbe-bb34-11ec-8422-0242ac120002-61125dc3-5e6f-4f4b-838d-447432b97918" + }, + "dcat:distribution": [ + { + "@type": "dcat:Distribution", + "dct:format": { + "@id": "HttpProxy" + }, + "dcat:accessService": "1795254a-e354-46c7-9d88-04608b05ca9f" + }, + { + "@type": "dcat:Distribution", + "dct:format": { + "@id": "AmazonS3" + }, + "dcat:accessService": "1795254a-e354-46c7-9d88-04608b05ca9f" + } + ], + "edc:description": "Battery Passport test data", + "edc:id": "365e6fbe-bb34-11ec-8422-0242ac120002-61125dc3-5e6f-4f4b-838d-447432b97918" + }, + "negotiation": { + "init": { + "request": { + "@context": { + "odrl": "http://www.w3.org/ns/odrl/2/" + }, + "@type": "NegotiationInitiateRequestDto", + "connectorAddress": "https://materialpass.dev.demo.catena-x.net/BPNL000000000000/api/v1/dsp", + "protocol": "dataspace-protocol-http", + "connectorId": "BPNL00000000CBA5", + "offer": { + "offerId": "3:365e6fbe-bb34-11ec-8422-0242ac120002-61125dc3-5e6f-4f4b-838d-447432b97918:dc616f20-2781-450a-837a-290d861c8e0a", + "assetId": "365e6fbe-bb34-11ec-8422-0242ac120002-61125dc3-5e6f-4f4b-838d-447432b97918", + "policy": { + "@type": "odrl:Set", + "odrl:permission": [], + "odrl:prohibition": [], + "odrl:obligation": [], + "odrl:target": "365e6fbe-bb34-11ec-8422-0242ac120002-61125dc3-5e6f-4f4b-838d-447432b97918" + } + } + }, + "response": { + "@id": "b8a41089-1eac-462a-b8e8-e40f724b302f", + "@type": "edc:IdResponseDto", + "edc:createdAt": 1688393629505, + "@context": { + "dct": "https://purl.org/dc/terms/", + "tx": "https://w3id.org/tractusx/v0.0.1/ns/", + "edc": "https://w3id.org/edc/v0.0.1/ns/", + "dcat": "https://www.w3.org/ns/dcat/", + "odrl": "http://www.w3.org/ns/odrl/2/", + "dspace": "https://w3id.org/dspace/v0.8/" + } + } + }, + "get": { + "response": { + "@id": "b8a41089-1eac-462a-b8e8-e40f724b302f", + "@type": "edc:ContractNegotiationDto", + "edc:type": "CONSUMER", + "edc:protocol": "dataspace-protocol-http", + "edc:state": "FINALIZED", + "edc:counterPartyAddress": "https://materialpass.dev.demo.catena-x.net/BPNL000000000000/api/v1/dsp", + "edc:callbackAddresses": [], + "edc:contractAgreementId": "3:365e6fbe-bb34-11ec-8422-0242ac120002-61125dc3-5e6f-4f4b-838d-447432b97918:102bae7a-22de-44b2-9ed5-ca5f62023390", + "@context": { + "dct": "https://purl.org/dc/terms/", + "tx": "https://w3id.org/tractusx/v0.0.1/ns/", + "edc": "https://w3id.org/edc/v0.0.1/ns/", + "dcat": "https://www.w3.org/ns/dcat/", + "odrl": "http://www.w3.org/ns/odrl/2/", + "dspace": "https://w3id.org/dspace/v0.8/" + } + } + } + }, + "transfer": { + "init": { + "request": { + "@context": { + "odrl": "http://www.w3.org/ns/odrl/2/" + }, + "assetId": "365e6fbe-bb34-11ec-8422-0242ac120002-61125dc3-5e6f-4f4b-838d-447432b97918", + "connectorAddress": "https://materialpass.dev.demo.catena-x.net/BPNL000000000000/api/v1/dsp", + "contractId": "3:365e6fbe-bb34-11ec-8422-0242ac120002-61125dc3-5e6f-4f4b-838d-447432b97918:102bae7a-22de-44b2-9ed5-ca5f62023390", + "dataDestination": { + "properties": { + "type": "HttpProxy" + } + }, + "managedResources": false, + "privateProperties": { + "receiverHttpEndpoint": "https://materialpass.dev.demo.catena-x.net/endpoint/bb8d235e-96c1-4fa3-a9ea-2ec71255ed18" + }, + "protocol": "dataspace-protocol-http", + "transferType": { + "contentType": "application/octet-stream", + "isFinite": true + } + }, + "response": { + "@id": "b9ab18f2-b624-4e2c-a922-c2e727467bb2", + "@type": "edc:IdResponseDto", + "edc:createdAt": 1688393631831, + "@context": { + "dct": "https://purl.org/dc/terms/", + "tx": "https://w3id.org/tractusx/v0.0.1/ns/", + "edc": "https://w3id.org/edc/v0.0.1/ns/", + "dcat": "https://www.w3.org/ns/dcat/", + "odrl": "http://www.w3.org/ns/odrl/2/", + "dspace": "https://w3id.org/dspace/v0.8/" + } + } + }, + "get": { + "response": { + "@id": "b9ab18f2-b624-4e2c-a922-c2e727467bb2", + "@type": "edc:TransferProcessDto", + "edc:state": "COMPLETED", + "edc:stateTimestamp": 1688393633142, + "edc:type": "CONSUMER", + "edc:callbackAddresses": [], + "edc:dataDestination": { + "edc:type": "HttpProxy" + }, + "edc:dataRequest": { + "@id": "b9ab18f2-b624-4e2c-a922-c2e727467bb2", + "@type": "edc:DataRequestDto", + "edc:assetId": "365e6fbe-bb34-11ec-8422-0242ac120002-61125dc3-5e6f-4f4b-838d-447432b97918", + "edc:contractId": "3:365e6fbe-bb34-11ec-8422-0242ac120002-61125dc3-5e6f-4f4b-838d-447432b97918:102bae7a-22de-44b2-9ed5-ca5f62023390" + }, + "edc:receiverHttpEndpoint": "https://materialpass.dev.demo.catena-x.net/endpoint/bb8d235e-96c1-4fa3-a9ea-2ec71255ed18", + "@context": { + "dct": "https://purl.org/dc/terms/", + "tx": "https://w3id.org/tractusx/v0.0.1/ns/", + "edc": "https://w3id.org/edc/v0.0.1/ns/", + "dcat": "https://www.w3.org/ns/dcat/", + "odrl": "http://www.w3.org/ns/odrl/2/", + "dspace": "https://w3id.org/dspace/v0.8/" + } + } + } + } + }, + "semanticId": "general", + "aspect": { + "typology": { + "shortName": "8HP60", + "class": { + "definition": "Manual transmission (motor vehicle)", + "code": "44-09-02-02" + }, + "longName": "Product Description long text" + }, + "metadata": { + "predecessor": "null", + "issueDate": "2000-01-01", + "version": "1.0.0", + "economicOperator": { + "legitimization": "DE123456789", + "identification": "BPNL1234567890ZZ" + }, + "status": "draft", + "expirationDate": "2000-01-01" + }, + "characteristics": { + "physicalDimension": { + "grossWeight": { + "value": 20.5, + "unit": "unit:kilogram" + }, + "weightOrVolume": { + "left": { + "value": 20.5, + "unit": "unit:cubicMetre" + } + }, + "diameter": { + "value": 20.5, + "unit": "unit:millimetre" + }, + "grossVolume": { + "value": 20.5, + "unit": "unit:cubicMetre" + }, + "width": { + "value": 20.5, + "unit": "unit:millimetre" + }, + "length": { + "value": 20.5, + "unit": "unit:millimetre" + }, + "height": { + "value": 20.5, + "unit": "unit:millimetre" + } + }, + "lifespan": [ + { + "value": 36, + "unit": "unit:day", + "key": "guaranteed lifetime" + } + ], + "physicalState": "solid" + }, + "commercial": { + "placedOnMarket": "2000-01-01" + }, + "identification": { + "localIdentifier": { + "value": "SN12345678", + "key": "PartInstanceId" + }, + "additionalCode": [ + { + "value": "8703 24 10 00", + "key": "TARIC" + } + ], + "dataCarrier": { + "carrierType": "QR", + "carrierLayout": "upper-left side" + } + }, + "sources": [ + { + "header": "Sustainability Document Material XY", + "category": "Product Specifications", + "type": "URL", + "content": "www.alink.pdf" + } + ], + "handling": { + "spareParts": { + "left": { + "producer": [ + { + "id": "BPNL1234567890ZZ" + } + ], + "part": [ + { + "name": "Aluminum Housing", + "gtin": "12345678" + } + ] + } + }, + "substanceOfConcern": { + "left": [ + { + "name": { + "name": "phenolphthalein", + "type": "IUPAC" + }, + "location": "Housing", + "unit": "unit:partPerMillion", + "concentration": { + "left": [ + { + "max": 2.6, + "min": 2.1 + } + ] + }, + "exemption": "shall not apply to product x containing not more than 1,5 ml of liquid", + "id": [ + { + "type": "CAS", + "id": "201-004-7" + } + ] + } + ] + } + }, + "additionalData": [ + { + "description": "This is the machine parameters that are produced when the machine is used", + "label": "Specific Manufacturer Machine Parameters", + "type": { + "typeUnit": null, + "dataType": "object" + }, + "children": [ + { + "description": "The usage of the eletricity in the machine", + "label": "Eletricity Usage", + "type": { + "typeUnit": "unit:volts", + "dataType": "integer" + }, + "data": "25" + }, + { + "description": "The name of the machine that produced the product", + "label": "Machine Name", + "type": { + "typeUnit": null, + "dataType": "string" + }, + "data": "Laser Machine MX-421W" + }, + { + "description": "The list of products the machine can produce", + "label": "Product Names", + "type": { + "typeUnit": null, + "dataType": "array" + }, + "data": [ + "Tranmissions", + "Batteries", + "Seats", + "Doors" + ] + } + ] + }, + { + "description": "This are the properties of interest", + "label": "Properties of Interest", + "type": { + "typeUnit": null, + "dataType": "object" + }, + "children":[ + { + "description": "This are the main properties of interest", + "label": "Main Properties", + "type": { + "typeUnit": null, + "dataType": "object" + }, + "children":[ + { + "description": "This is the Normal temperature of production", + "label": "Normal Temperature", + "type": { + "typeUnit": "unit:celcius", + "dataType": "float" + }, + "data": 62.7 + }, + { + "description": "This is the minimmum temperature of production", + "label": "Minimum Temperature", + "type": { + "typeUnit": "unit:celcius", + "dataType": "float" + }, + "data": -80.68 + }, + { + "description": "This is the maximum temperature of production", + "label": "Maximum Temperature", + "type": { + "typeUnit": "unit:celcius", + "dataType": "float" + }, + "data": 800.85 + } + ] + } + ] + } + ], + "sustainability": { + "PEF": { + "carbon": [ + { + "lifecycle": "main product production", + "rulebook": "https://www.alink.pdf/", + "unit": "kg CO2 eq", + "type": "Climate Change Total", + "value": 12.678 + } + ], + "carbon2": { + "lifecycle": "main product production", + "rulebook": "https://www.alink.pdf/", + "unit": "kg CO2 eq", + "type": "Climate Change Total", + "value": 12.678 + }, + "environmental": [ + { + "lifecycle": "main product production", + "rulebook": "https://www.alink.pdf/", + "unit": "kg CO2 eq", + "type": "Climate Change Total", + "value": 72.678 + } + ] + }, + "state": "first life", + "material": { + "left": [ + { + "name": { + "name": "phenolphthalein", + "type": "IUPAC" + }, + "unit": "unit:partPerMillion", + "recycled": false, + "id": [ + { + "type": "CAS", + "id": "201-004-7" + } + ], + "value": 5, + "renewable": true + } + ] + }, + "critical": { + "left": [ + "eOMtThyhVNLWUZNRcBaQKxI" + ] + } + }, + "operation": { + "importer": { + "left": { + "eori": "GB123456789000", + "id": "BPNL1234567890ZZ" + } + }, + "manufacturer": { + "facility": "BPNS1234567890ZZ", + "manufacturingDate": "2000-01-31", + "manufacturer": "BPNL1234567890ZZ" + } + } + } +} \ No newline at end of file diff --git a/src/assets/styles/components/passport/additionalData.scss b/src/assets/styles/components/passport/additionalData.scss new file mode 100644 index 000000000..8616ac12f --- /dev/null +++ b/src/assets/styles/components/passport/additionalData.scss @@ -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; + } +} diff --git a/src/assets/styles/main.scss b/src/assets/styles/main.scss index c0c32b439..126542eaf 100644 --- a/src/assets/styles/main.scss +++ b/src/assets/styles/main.scss @@ -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"; diff --git a/src/components/general/RecursiveAdditionalData.vue b/src/components/general/RecursiveAdditionalData.vue new file mode 100644 index 000000000..d7c4e6d06 --- /dev/null +++ b/src/components/general/RecursiveAdditionalData.vue @@ -0,0 +1,88 @@ + + + + + + diff --git a/src/components/passport/GeneralCards.vue b/src/components/passport/GeneralCards.vue index 21567edfa..1b6b95c05 100644 --- a/src/components/passport/GeneralCards.vue +++ b/src/components/passport/GeneralCards.vue @@ -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 : "-", }, { @@ -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", @@ -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", diff --git a/src/components/passport/sections/AdditionalData.vue b/src/components/passport/sections/AdditionalData.vue index 3942337a2..bb7b06a1d 100644 --- a/src/components/passport/sections/AdditionalData.vue +++ b/src/components/passport/sections/AdditionalData.vue @@ -22,16 +22,19 @@