From 7341813036053fb3676d6e6afc3948117b91ae28 Mon Sep 17 00:00:00 2001
From: dragos-eu <Dragos-Constantin.STOICA@ext.ec.europa.eu>
Date: Fri, 7 Jun 2024 17:41:29 +0200
Subject: [PATCH] CA message for examples, fix typo

---
 .github/ISSUE_TEMPLATE/1 - question.yml |   2 +-
 ESPD/codelists/external_code_list.json  |  14 +--
 ESPD/examples/ESPDdownload.js           |  17 +---
 ESPD/examples/espd.json                 |  31 ++++++-
 ESPD/examples/exclusionGrounds.js       |  47 +++++-----
 ESPD/examples/procedureComponent.js     |  36 ++++----
 ESPD/examples/selectionCriteria.js      |  49 +++++-----
 ESPD/examples/startComponent.js         |  97 +++++++++++++------
 ESPD/excel/excel.json                   |   2 +-
 ESPD/model/espd_v3.3.0.js               |   2 +-
 codelist.js                             |   8 +-
 index.html                              |  14 +--
 src/js/header.js                        |   4 +-
 src/js/model.js                         |   2 +-
 src/js/service.js                       | 118 ++++++++----------------
 15 files changed, 228 insertions(+), 215 deletions(-)

diff --git a/.github/ISSUE_TEMPLATE/1 - question.yml b/.github/ISSUE_TEMPLATE/1 - question.yml
index 62d3554..d2de73f 100644
--- a/.github/ISSUE_TEMPLATE/1 - question.yml	
+++ b/.github/ISSUE_TEMPLATE/1 - question.yml	
@@ -22,7 +22,7 @@ body:
 
         ## Full description of the expected behaviour (optional)
 
-        ## Link to existing ESDP service, if applicable
+        ## Link to existing ESPD service, if applicable
 
         ## Reference to the ANNEX 2 of Regulation (EU) 2016/7, if applicable
         
diff --git a/ESPD/codelists/external_code_list.json b/ESPD/codelists/external_code_list.json
index 0ec3e68..b49cfd5 100644
--- a/ESPD/codelists/external_code_list.json
+++ b/ESPD/codelists/external_code_list.json
@@ -517,37 +517,37 @@
     {
         "folder": "v3.3.0",
         "filename": "BooleanGUIControlType.gc",
-        "uri": "https://github.com/OP-TED/ESDP-EDM/tree/v3.3.0/codelists/gc/BooleanGUIControlType.gc"
+        "uri": "https://github.com/OP-TED/ESPD-EDM/tree/v3.3.0/codelists/gc/BooleanGUIControlType.gc"
     },
     {
         "folder": "v3.3.0",
         "filename": "CriterionElementType.gc",
-        "uri": "https://github.com/OP-TED/ESDP-EDM/tree/v3.3.0/codelists/gc/CriterionElementType.gc"
+        "uri": "https://github.com/OP-TED/ESPD-EDM/tree/v3.3.0/codelists/gc/CriterionElementType.gc"
     },
     {
         "folder": "v3.3.0",
         "filename": "EOIDType.gc",
-        "uri": "https://github.com/OP-TED/ESDP-EDM/tree/v3.3.0/codelists/gc/EOIDType.gc"
+        "uri": "https://github.com/OP-TED/ESPD-EDM/tree/v3.3.0/codelists/gc/EOIDType.gc"
     },
     {
         "folder": "v3.3.0",
         "filename": "FinancialRatioType.gc",
-        "uri": "https://github.com/OP-TED/ESDP-EDM/tree/v3.3.0/codelists/gc/FinancialRatioType.gc"
+        "uri": "https://github.com/OP-TED/ESPD-EDM/tree/v3.3.0/codelists/gc/FinancialRatioType.gc"
     },
     {
         "folder": "v3.3.0",
         "filename": "ProfileExecutionID.gc",
-        "uri": "https://github.com/OP-TED/ESDP-EDM/tree/v3.3.0/codelists/gc/ProfileExecutionID.gc"
+        "uri": "https://github.com/OP-TED/ESPD-EDM/tree/v3.3.0/codelists/gc/ProfileExecutionID.gc"
     },
     {
         "folder": "v3.3.0",
         "filename": "PropertyGroupType.gc",
-        "uri": "https://github.com/OP-TED/ESDP-EDM/tree/v3.3.0/codelists/gc/PropertyGroupType.gc"
+        "uri": "https://github.com/OP-TED/ESPD-EDM/tree/v3.3.0/codelists/gc/PropertyGroupType.gc"
     },
     {
         "folder": "v3.3.0",
         "filename": "ResponseDataType.gc",
-        "uri": "https://github.com/OP-TED/ESDP-EDM/tree/v3.3.0/codelists/gc/ResponseDataType.gc"
+        "uri": "https://github.com/OP-TED/ESPD-EDM/tree/v3.3.0/codelists/gc/ResponseDataType.gc"
     },
     {
         "folder": "v3.3.0",
diff --git a/ESPD/examples/ESPDdownload.js b/ESPD/examples/ESPDdownload.js
index 237db70..8ad9b00 100644
--- a/ESPD/examples/ESPDdownload.js
+++ b/ESPD/examples/ESPDdownload.js
@@ -5,15 +5,6 @@ Vue.component('ESPDdownload',{
         }
     },
 
-    emits: ['updateESPDDoc'],
-
-    methods: {
-        updateESPDDoc() {
-            this.$emit('updateESPDDoc',{
-            })
-        }
-    },
-
     template: `
     <template>
     <b-conatiner>
@@ -29,11 +20,11 @@ Vue.component('ESPDdownload',{
     <div class="accordion" role="tablist">
         <b-card no-body class="mb-1">
         <b-card-header header-tag="header" class="p-1" role="tab">
-            <b-button block v-b-toggle.accordion-1 variant="info">A. Save ESPD</b-button>
+            <b-button block v-b-toggle.accordion-fn1 variant="info">A. Save ESPD</b-button>
         </b-card-header>
-        <b-collapse id="accordion-1" accordion="my-accordion" role="tabpanel">
-            <b-card-body>
-            
+        <b-collapse id="accordion-fn1" accordion="my-accordion" role="tabpanel">
+            <b-card-body class='text-center'>
+            <b-button variant="warning">Download ESPD {{ window.espd_doc.role=='ca'?'Request':'Response'}}</b-button>
             </b-card-body>
         </b-collapse>
         </b-card>
diff --git a/ESPD/examples/espd.json b/ESPD/examples/espd.json
index fe5173c..1596388 100644
--- a/ESPD/examples/espd.json
+++ b/ESPD/examples/espd.json
@@ -23,11 +23,40 @@
                     "economic_financial_standing":["finan-rat", "indem-insu", "finan-requ"]
                 },
                 "technical_professional_ability":{
-                    "references":["work-perform", "supply-perform", "service=perform"],
+                    "references":["work-perform", "supply-perform", "service-perform"],
                     "technical": ["qual-cont-tech", "work-tech", "qual-facil", "research-fac", "chain-manage", "qualification", "envir-measure", "tech-equip", "spec-req-check"],
                     "management": ["manage-staff", "year-manpower", "suncont-port", "wo-authent", "w-autent"],
                     "certificates": ["qa-cerif-inst", "qu-certif-indep", "envir-certif-indep"]
                 }
+            },
+            "model":{
+                "source": "ESPD/model/espd_edm_v3.3.0.json"
+            },
+            "partI":{
+                "A": [],
+                "B": [],
+                "C": []
+            },
+            "partII":{
+                "A":["C65", "C57", "C58", "C59"],
+                "B": [],
+                "C": ["C60"],
+                "D": ["C61"]
+            },
+            "partIII":{
+                "A": ["C1", "C2", "C3", "C4", "C5", "C6"],
+                "B": ["C7", "C8"],
+                "C": ["C9", "C10", "C11", "C12", "C12", "C13", "C14", "C15", "C16", "C17", "C18", "C19", "C20", "C21", "C22", "C23"],
+                "D": ["C24"]
+            },
+            "partIV":{
+                "A": ["C25", "C26", "C27", "C28"],
+                "B": ["C29", "C30", "C31", "C32", "C34", "C35", "C36"],
+                "C": ["C37", "C38", "C39", "C40", "C41", "C42", "C43", "C44", "C45", "C46", "C47", "C48", "C49", "C50", "C51", "C52", "C53", "C54"],
+                "D": ["C55", "C56"]
+            },
+            "partV":{
+                "A": ["C63"]
             }
         }
     }
diff --git a/ESPD/examples/exclusionGrounds.js b/ESPD/examples/exclusionGrounds.js
index 76ea044..eb401cb 100644
--- a/ESPD/examples/exclusionGrounds.js
+++ b/ESPD/examples/exclusionGrounds.js
@@ -1,17 +1,14 @@
 Vue.component('exclusionGrounds', {
     data(){
         return {
+            meta_espd_doc: window.raw_data[window.espd_doc.espd_version],
+            espd_model: window.espd_model,
             show: true
         }
     },
 
-    emits: ['updateESPDDoc'],
-
-    methods: {
-        updateESPDDoc() {
-            this.$emit('updateESPDDoc',{
-            })
-        }
+    created(){
+        console.log('exclusion grounds')
     },
 
     template: `
@@ -29,44 +26,48 @@ Vue.component('exclusionGrounds', {
     <div class="accordion" role="tablist">
         <b-card no-body class="mb-1">
         <b-card-header header-tag="header" class="p-1" role="tab">
-            <b-button block v-b-toggle.accordion-1 variant="info">A: Grounds relating to criminal convictions</b-button>
+            <b-button block v-b-toggle.accordion-e1 variant="info">A: Grounds relating to criminal convictions</b-button>
         </b-card-header>
-        <b-collapse id="accordion-1" accordion="my-accordion" role="tabpanel">
-            <b-card-body>
-            
+        <b-collapse id="accordion-e1" accordion="my-accordion" role="tabpanel">
+            <b-card-body v-for="item in meta_espd_doc['partIII']['A']">
+                <strong>{{ espd_model[item].name }}</strong>
+                <p>{{ espd_model[item].description }}</p>
             </b-card-body>
         </b-collapse>
         </b-card>
 
         <b-card no-body class="mb-1">
         <b-card-header header-tag="header" class="p-1" role="tab">
-            <b-button block v-b-toggle.accordion-2 variant="info">B: Grounds relating to the payment of taxes or social security contributions </b-button>
+            <b-button block v-b-toggle.accordion-e2 variant="info">B: Grounds relating to the payment of taxes or social security contributions </b-button>
         </b-card-header>
-        <b-collapse id="accordion-2" accordion="my-accordion" role="tabpanel">
-            <b-card-body>
-            
+        <b-collapse id="accordion-e2" accordion="my-accordion" role="tabpanel">
+            <b-card-body v-for="item in meta_espd_doc['partIII']['B']">
+                <strong>{{ espd_model[item].name }}</strong>
+                <p>{{ espd_model[item].description }}</p>
             </b-card-body>
         </b-collapse>
         </b-card>
 
         <b-card no-body class="mb-1">
         <b-card-header header-tag="header" class="p-1" role="tab">
-            <b-button block v-b-toggle.accordion-3 variant="info">C: Grounds relating to insolvency, conflicts of interests or professional misconduct</b-button>
+            <b-button block v-b-toggle.accordion-e3 variant="info">C: Grounds relating to insolvency, conflicts of interests or professional misconduct</b-button>
         </b-card-header>
-        <b-collapse id="accordion-3" accordion="my-accordion" role="tabpanel">
-            <b-card-body>
-
+        <b-collapse id="accordion-e3" accordion="my-accordion" role="tabpanel">
+            <b-card-body v-for="item in meta_espd_doc['partIII']['C']">
+                <strong>{{ espd_model[item].name }}</strong>
+                <p>{{ espd_model[item].description }}</p>
             </b-card-body>
         </b-collapse>
         </b-card>
 
         <b-card no-body class="mb-1">
         <b-card-header header-tag="header" class="p-1" role="tab">
-            <b-button block v-b-toggle.accordion-4 variant="info">D: Purely national exclusion grounds</b-button>
+            <b-button block v-b-toggle.accordion-e4 variant="info">D: Purely national exclusion grounds</b-button>
         </b-card-header>
-        <b-collapse id="accordion-4" accordion="my-accordion" role="tabpanel">
-            <b-card-body>
-
+        <b-collapse id="accordion-e4" accordion="my-accordion" role="tabpanel">
+            <b-card-body v-for="item in meta_espd_doc['partIII']['D']">
+                <strong>{{ espd_model[item].name }}</strong>
+                <p>{{ espd_model[item].description }}</p>
             </b-card-body>
         </b-collapse>
         </b-card>
diff --git a/ESPD/examples/procedureComponent.js b/ESPD/examples/procedureComponent.js
index a3a39c2..afaf997 100644
--- a/ESPD/examples/procedureComponent.js
+++ b/ESPD/examples/procedureComponent.js
@@ -28,20 +28,22 @@ Vue.component('procedureComponent',{
             show: true
         }
     },
-    emits: ['updateESPDDoc'],
 
-    methods: {
-        updateESPDDoc() {
-            this.$emit('updateESPDDoc',{
-                received_notice_number: this.received_notice_number,
-                OJS_notice_number: this.OJS_notice_number,
-                OJS_URL: this.OJS_URL,
-                national_official_journal: this.national_official_journal,
-                procurer: this.procurer,
-                procedure: this.procedure
-            })
+    created(){
+        const getData = async () => {
+            try {
+                let thecall = await fetch(`${window.raw_data[window.espd_doc.espd_version].model.source}`)
+                let data = await thecall.json()
+                if (thecall.ok) {
+                    window.espd_model = data
+                }
+            } catch (error) {
+                console.log("Error!", error);
+            }
         }
+        getData()
     },
+
     template: `
     <template>
     <b-conatiner>
@@ -57,9 +59,9 @@ Vue.component('procedureComponent',{
     <div class="accordion" role="tablist">
         <b-card no-body class="mb-1">
         <b-card-header header-tag="header" class="p-1" role="tab">
-            <b-button block v-b-toggle.accordion-1 variant="info">A. Information about publication</b-button>
+            <b-button block v-b-toggle.accordion-p1 variant="info">A. Information about publication</b-button>
         </b-card-header>
-        <b-collapse id="accordion-1" accordion="my-accordion" role="tabpanel">
+        <b-collapse id="accordion-p1" accordion="my-accordion" role="tabpanel">
             <b-card-body>
             <b-form-group id="flds-ron" label-cols-sm="4" label-cols-lg="3" description="Please specify the received notice number." label="Received notice number" label-for="inp-received_notice_number">
                 <b-form-input id="inp-received_notice_number" v-model="received_notice_number"></b-form-input>
@@ -79,9 +81,9 @@ Vue.component('procedureComponent',{
 
         <b-card no-body class="mb-1">
         <b-card-header header-tag="header" class="p-1" role="tab">
-            <b-button block v-b-toggle.accordion-2 variant="info">B. Identity of the procurer</b-button>
+            <b-button block v-b-toggle.accordion-p2 variant="info">B. Identity of the procurer</b-button>
         </b-card-header>
-        <b-collapse id="accordion-2" accordion="my-accordion" role="tabpanel">
+        <b-collapse id="accordion-p2" accordion="my-accordion" role="tabpanel">
             <b-card-body>
             <b-form-group id="flds-caname" label-cols-sm="4" label-cols-lg="3" description="Please specify Procurer's name" label="Official name" label-for="inp-caname">
                 <b-form-input id="inp-caname" v-model="procurer.name"></b-form-input>
@@ -123,9 +125,9 @@ Vue.component('procedureComponent',{
 
         <b-card no-body class="mb-1">
         <b-card-header header-tag="header" class="p-1" role="tab">
-            <b-button block v-b-toggle.accordion-3 variant="info">C. Information about the procurement procedure</b-button>
+            <b-button block v-b-toggle.accordion-p3 variant="info">C. Information about the procurement procedure</b-button>
         </b-card-header>
-        <b-collapse id="accordion-3" accordion="my-accordion" role="tabpanel">
+        <b-collapse id="accordion-p3" accordion="my-accordion" role="tabpanel">
             <b-card-body>
             <b-form-group id="flds-ptype" label-cols-sm="4" label-cols-lg="3" description="Select the Type of procedure." label="Type of procedure" label-for="inp-ptype">
                 <b-form-input id="inp-ptype" v-model="procedure.type"></b-form-input>
diff --git a/ESPD/examples/selectionCriteria.js b/ESPD/examples/selectionCriteria.js
index f016c7e..6fd95db 100644
--- a/ESPD/examples/selectionCriteria.js
+++ b/ESPD/examples/selectionCriteria.js
@@ -1,19 +1,12 @@
 Vue.component('selectionCriteria',{
     data(){
         return {
+            meta_espd_doc: window.raw_data[window.espd_doc.espd_version],
+            espd_model: window.espd_model,
             show: true
         }
     },
 
-    emits: ['updateESPDDoc'],
-
-    methods: {
-        updateESPDDoc() {
-            this.$emit('updateESPDDoc',{
-            })
-        }
-    },
-
     template: `
     <template>
     <b-conatiner>
@@ -29,44 +22,48 @@ Vue.component('selectionCriteria',{
     <div class="accordion" role="tablist">
         <b-card no-body class="mb-1">
         <b-card-header header-tag="header" class="p-1" role="tab">
-            <b-button block v-b-toggle.accordion-1 variant="info">A: Suitability</b-button>
+            <b-button block v-b-toggle.accordion-s1 variant="info">A: Suitability</b-button>
         </b-card-header>
-        <b-collapse id="accordion-1" accordion="my-accordion" role="tabpanel">
-            <b-card-body>
-            
-            </b-card-body>
+        <b-collapse id="accordion-s1" accordion="my-accordion" role="tabpanel">
+        <b-card-body v-for="item in meta_espd_doc['partIV']['A']">
+            <strong>{{ espd_model[item].name }}</strong>
+            <p>{{ espd_model[item].description }}</p>
+        </b-card-body>
         </b-collapse>
         </b-card>
 
         <b-card no-body class="mb-1">
         <b-card-header header-tag="header" class="p-1" role="tab">
-            <b-button block v-b-toggle.accordion-2 variant="info">B: Economic and financial standing</b-button>
+            <b-button block v-b-toggle.accordion-s2 variant="info">B: Economic and financial standing</b-button>
         </b-card-header>
-        <b-collapse id="accordion-2" accordion="my-accordion" role="tabpanel">
-            <b-card-body>
-            
+        <b-collapse id="accordion-s2" accordion="my-accordion" role="tabpanel">
+            <b-card-body v-for="item in meta_espd_doc['partIV']['B']">
+                <strong>{{ espd_model[item].name }}</strong>
+                <p>{{ espd_model[item].description }}</p>
             </b-card-body>
         </b-collapse>
         </b-card>
 
         <b-card no-body class="mb-1">
         <b-card-header header-tag="header" class="p-1" role="tab">
-            <b-button block v-b-toggle.accordion-3 variant="info">C: Technical and professional ability</b-button>
+            <b-button block v-b-toggle.accordion-s3 variant="info">C: Technical and professional ability</b-button>
         </b-card-header>
-        <b-collapse id="accordion-3" accordion="my-accordion" role="tabpanel">
-            <b-card-body>
-
+        <b-collapse id="accordion-s3" accordion="my-accordion" role="tabpanel">
+            <b-card-body v-for="item in meta_espd_doc['partIV']['C']">
+                <strong>{{ espd_model[item].name }}</strong>
+                <p>{{ espd_model[item].description }}</p>
             </b-card-body>
         </b-collapse>
         </b-card>
 
         <b-card no-body class="mb-1">
         <b-card-header header-tag="header" class="p-1" role="tab">
-            <b-button block v-b-toggle.accordion-4 variant="info">D: Quality assurance schemes and environmental management standards</b-button>
+            <b-button block v-b-toggle.accordion-s4 variant="info">D: Quality assurance schemes and environmental management standards</b-button>
         </b-card-header>
-        <b-collapse id="accordion-4" accordion="my-accordion" role="tabpanel">
-            <b-card-body>
-
+        <b-collapse id="accordion-s4" accordion="my-accordion" role="tabpanel">
+            <b-card-body v-for="item in meta_espd_doc['partIV']['D']">
+                <strong>{{ espd_model[item].name }}</strong>
+                <p>{{ espd_model[item].description }}</p>
             </b-card-body>
         </b-collapse>
         </b-card>
diff --git a/ESPD/examples/startComponent.js b/ESPD/examples/startComponent.js
index de2a15e..9cda130 100644
--- a/ESPD/examples/startComponent.js
+++ b/ESPD/examples/startComponent.js
@@ -1,12 +1,12 @@
 Vue.component("startComponent", {
     data() {
         return {
-            espd_version: '3.3.0',
+            raw_data: null,
+            versions: [{ value: null, text: 'Select an option' }],
+            
+            espd_version: null,
             role: null,
             country: null,
-            espd_opt: [
-                { value: '3.3.0', text: 'ESPD v3.3.0' }
-            ],
             role_opt: [
                 { value: null, text: 'Please select a Role'},
                 { value: 'ca', text: 'Contracting authority - ESPD Request' },
@@ -14,7 +14,7 @@ Vue.component("startComponent", {
             ],
             country_list: [
                 { value: null, text: 'Please select a Country'},
-                { value: 'lu', text: 'Luxembourg' }
+                { value: 'EUR', text: 'European Union' }
             ],
             show: true
         }
@@ -22,44 +22,81 @@ Vue.component("startComponent", {
 
     watch: {
         espd_version: function (oldV, newV) {
-            this.updateESPDDoc()
+            window.espd_doc.espd_version = oldV
         },
         country: function (oldV, newV) {
-            this.updateESPDDoc()
+            window.espd_doc.country = oldV
         },
         role: function (oldV, newV) {
-            this.updateESPDDoc()
+            window.espd_doc.role = oldV
         }
-
     },
-    emits: ['updateESPDDoc'],
 
-    methods: {
-        updateESPDDoc() {
-            this.$emit('updateESPDDoc',{
-                espd_version: this.espd_version,
-                role: this.role,
-                country: this.country
-            })
+
+    created(){
+        const dataURL = ['ESPD/examples/']
+
+        const getData = async () => {
+            try {
+                let thecall = await fetch(`${dataURL}/espd.json`)
+                let data = await thecall.json()
+                if (thecall.ok) {
+                    window.raw_data = data.versions
+                    this.versions = []
+                    for (const key in window.raw_data) {
+                        if (Object.hasOwn(window.raw_data, key)) {
+                            this.versions.push(key)
+                            this.espd_version = this.versions[0]
+                        }
+                    }
+                    this.role = 'ca'
+                    this.country = 'EUR'
+                }
+            } catch (error) {
+                console.log("Error!", error);
+            }
         }
+
+        getData()
     },
 
     template: `
     <template>
-        <div>
-        <b-form-group id="fieldset-espd" label-cols-sm="4" label-cols-lg="3" description="Select ESPD version" label="ESPD version" label-for="sel-espd">
-            <b-form-select id="sel-espd" v-model="espd_version" :options="espd_opt"></b-form-select>
-        </b-form-group>
-        
-        <b-form-group id="fieldset-role" label-cols-sm="4" label-cols-lg="3" description="Select your role" label="Select your role" label-for="sel-role">
-            <b-form-select id="sel-role" v-model="role" :options="role_opt"></b-form-select>
-        </b-form-group>
+    <b-conatiner>
+    <b-row>
+    <b-col>
+    <div>
+    <h6>Start</h6>
+    </div>
+    </b-col>
+    </b-row>
+    <b-row>
+    <b-col>
+    <div class="accordion" role="tablist">
+        <b-card no-body class="mb-1">
+        <b-card-header header-tag="header" class="p-1" role="tab">
+            <b-button block v-b-toggle.accordion-st1 variant="info">A. Select initial parameters</b-button>
+        </b-card-header>
+        <b-collapse id="accordion-st1" accordion="my-accordion" role="tabpanel">
+            <b-card-body>
+                <b-form-group id="fieldset-espd" label-cols-sm="4" label-cols-lg="3" description="Select ESPD version" label="ESPD version" label-for="sel-espd">
+                    <b-form-select id="sel-espd" v-model="espd_version" :options="versions"></b-form-select>
+                </b-form-group>
+                
+                <b-form-group id="fieldset-role" label-cols-sm="4" label-cols-lg="3" description="Select your role" label="Select your role" label-for="sel-role">
+                    <b-form-select id="sel-role" v-model="role" :options="role_opt"></b-form-select>
+                </b-form-group>
 
-        <b-form-group id="fieldset-country" label-cols-sm="4" label-cols-lg="3" description="Select your country" label="Country" label-for="sel-country">
-        <b-form-select id="sel-country" v-model="country" :options="country_list"></b-form-select>
-        </b-form-group>
-            
-        </div>
+                <b-form-group id="fieldset-country" label-cols-sm="4" label-cols-lg="3" description="Select your country" label="Country" label-for="sel-country">
+                <b-form-select id="sel-country" v-model="country" :options="country_list"></b-form-select>
+                </b-form-group>  
+            </b-card-body>
+        </b-collapse>
+        </b-card>
+    </div>
+    </b-col>
+    </b-row>
+    </b-container>
     </template>
     `
 
diff --git a/ESPD/excel/excel.json b/ESPD/excel/excel.json
index b48eeef..86ad012 100644
--- a/ESPD/excel/excel.json
+++ b/ESPD/excel/excel.json
@@ -5,7 +5,7 @@
                 "source": "ESPD/codelists/codelist.json"
             },
             "model":{
-                "source": "ESDP/model/espd_edm_v3.3.0.json"
+                "source": "ESPD/model/espd_edm_v3.3.0.json"
             }
         }
     }
diff --git a/ESPD/model/espd_v3.3.0.js b/ESPD/model/espd_v3.3.0.js
index a804b2a..9516f6b 100644
--- a/ESPD/model/espd_v3.3.0.js
+++ b/ESPD/model/espd_v3.3.0.js
@@ -1,5 +1,5 @@
 /**
- * VueJS components for ESDP-EDM 
+ * VueJS components for ESPD-EDM 
  * generated on 2024-04-17T13:17:09.711Z 
  */
 
diff --git a/codelist.js b/codelist.js
index 398d404..f862c89 100644
--- a/codelist.js
+++ b/codelist.js
@@ -23,7 +23,7 @@ const in_excel_we_trust = [
     "ESPD-CodeLists_v3.3.0.xlsx",
 ]
 
-const log = console.log, ESDP_version = 'ESDP release v3.X', path_to_folder = '.\\ESPD\\codelists\\';
+const log = console.log, ESPD_version = 'ESPD release v3.X', path_to_folder = '.\\ESPD\\codelists\\';
 XLSX.set_fs(fs);
 
 let name_version = '', json_ui = {}, json_external = [];
@@ -42,7 +42,7 @@ program
     .command("all_JSON", "Print all spreadsheets as JSON")
     .action(({ logger, args, options }) => {
         // Combine styled and normal strings
-        log(chalk.blue.bold('Dump code list'), chalk.red(ESDP_version));
+        log(chalk.blue.bold('Dump code list'), chalk.red(ESPD_version));
         log('\n\n')
 
         in_excel_we_trust.forEach(xcl => {
@@ -64,7 +64,7 @@ program
     .command("process_code_lists", "Process Code Lists")
     .action(({ logger, args, options }) => {
         // Combine styled and normal strings
-        log(chalk.blue.bold('Process code list'), chalk.red(ESDP_version));
+        log(chalk.blue.bold('Process code list'), chalk.red(ESPD_version));
         log('\n')
 
         in_excel_we_trust.forEach(xcl => {
@@ -117,7 +117,7 @@ program
 
     .command("process_model", "Process all models as options")
     .action(({logger, args, options}) => {
-        log(chalk.blue.bold('Process all models as options'), chalk.red(ESDP_version));
+        log(chalk.blue.bold('Process all models as options'), chalk.red(ESPD_version));
         log('\n')
 
         let model_file = require('./ESPD/model/espd_edm_v3.3.0.json')
diff --git a/index.html b/index.html
index 0e85dd9..8aa4f14 100644
--- a/index.html
+++ b/index.html
@@ -70,6 +70,13 @@
     <script src="src/js/utils.js"></script>
 
     <!-- Vue components and application logic -->
+    <script src="ESPD/model/espd_v3.3.0.js"></script>
+    <script src="ESPD/examples/startComponent.js"></script>
+    <script src="ESPD/examples/procedureComponent.js"></script>
+    <script src="ESPD/examples/exclusionGrounds.js"></script>
+    <script src="ESPD/examples/selectionCriteria.js"></script>
+    <script src="ESPD/examples/ESPDdownload.js"></script>
+
     <script src="src/js/header.js"></script>
     <script src="src/js/footer.js"></script>
     <script src="src/js/home.js"></script>
@@ -79,12 +86,7 @@
     <script src="src/js/service.js"></script>
     <script src="src/js/uuid.js"></script>
 
-    <script src="ESPD/model/espd_v3.3.0.js"></script>
-    <script src="ESPD/examples/startComponent.js"></script>
-    <script src="ESPD/examples/procedureComponent.js"></script>
-    <script src="ESPD/examples/exclusionGrounds.js"></script>
-    <script src="ESPD/examples/selectionCriteria.js"></script>
-    <script src="ESPD/examples/ESPDdownload.js"></script>
+
 
 </head>
 
diff --git a/src/js/header.js b/src/js/header.js
index 46c0888..70eaaa8 100644
--- a/src/js/header.js
+++ b/src/js/header.js
@@ -43,7 +43,7 @@ Vue.component("publicHeader", {
     <!-- -->
 	<b-nav-item href="#" @click="doShow('model')">{{$t("mainmenu.model")}}</b-nav-item>
     <b-nav-item href="#" @click="doShow('service')">{{$t("mainmenu.service")}}</b-nav-item>
-    <!-- -->
+    <!-- 
 	<b-dropdown right size="lg"  variant="link" toggle-class="text-decoration-none" no-caret>
 			<template #button-content>
 				<span :class="localeFlagClass()"></span>&nbsp;{{ getLocale() }}&nbsp;<b-icon icon="translate" aria-hidden="true"></b-icon>
@@ -52,7 +52,7 @@ Vue.component("publicHeader", {
 			<b-dropdown-item v-for="item in locales" v-bind:key="item.id"
 					 @click="changeLanguage(item)"><span :class="buildFlagClass(item)"></span>&nbsp; {{item.toUpperCase()}}</b-dropdown-item>
 	</b-dropdown>
-
+    -->
 	</b-navbar-nav>
 			</b-collapse>
 	</b-navbar>
diff --git a/src/js/model.js b/src/js/model.js
index 8856d7b..a894213 100644
--- a/src/js/model.js
+++ b/src/js/model.js
@@ -59,7 +59,7 @@ Vue.component("model", {
             <b-form-select id="input-espdversion" v-model="version" :options="versions" @change="selectVersion($event)"></b-form-select>
     </b-form-group>
 
-    <b-form-group label-cols="4" label-cols-lg="2" label-size="sm" label="Code list" label-for="input-model">
+    <b-form-group label-cols="4" label-cols-lg="2" label-size="sm" label="Cirterion" label-for="input-model">
         <b-form-select id="input-model" v-model="model" :options="models" @change="selectModel($event)"></b-form-select>
     </b-form-group>
     <comonent :is="model"></component>
diff --git a/src/js/service.js b/src/js/service.js
index 11f0293..577b23a 100644
--- a/src/js/service.js
+++ b/src/js/service.js
@@ -1,105 +1,59 @@
 Vue.component("service", {
+
     data() {
         return {
-            espd_doc: '',
-            raw_data: null,
-            versions: [{ value: null, text: 'Select an option' }],
-            models: [{ value: null, text: 'Select an option' }],
-            version: '',
-            model: '',
-            startComponent: 'startComponent',
-            procedureComponent: 'procedureComponent',
-            exclusionComponent: 'exclusionGrounds',
-            selectionComponent: 'selectionCriteria',
-            finishComponent: 'ESPDdownload',
+            crt_step:0,
+            steps: [
+                {icon:'collection-play', label:'Start', component:'startComponent'},
+                {icon:'bank', label:'Procedure', component:'procedureComponent'},
+                {icon:'exclamation-octagon', label:'Exclusion', component:'exclusionGrounds'},
+                {icon:'shield-fill-check', label:'Selection', component:'selectionCriteria'},
+                {icon:'cloud-download', label:'Finish', component:'ESPDdownload'}
+            ],
             show: true
         }
     },
 
     methods: {
-        updateESPDDoc(item) {
-            //console.log(item);
-            for (const key in item) {
-                if (Object.hasOwn(item, key)) {
-                    this.espd_doc[key] = item[key];
-                }
-            }
+        nextStep(){
+            this.crt_step= Math.min(this.crt_step + 1, this.steps.length - 1)
+        },
+        previousStep(){
+            this.crt_step= Math.max(this.crt_step - 1, 0)
         }
     },
 
     created() {
-        const dataURL = ['ESPD/model/']
-
-        const getData = async () => {
-            try {
-                let thecall = await fetch(`${dataURL}/model.json`)
-                let data = await thecall.json()
-                if (thecall.ok) {
-                    this.raw_data = data.models
-                    this.versions = []
-                    this.models = []
-                    for (const key in this.raw_data) {
-                        if (Object.hasOwn(this.raw_data, key)) {
-                            this.versions.push(key)
-                            this.version = this.versions[0]
-                            this.models = this.raw_data[key]
-                            this.model = this.models[0].value
-                        }
-                    }
-                }
-            } catch (error) {
-                console.log("Error!", error);
-            }
-        }
-
-        getData()
+        if(window.espd_doc) delete window.espd_doc
+        window.espd_doc = {}        
     },
 
     template: `
     <b-card title="ESPD Examples Generator">
         <b-card-text>
-        Select the ESPD version and generate the ESPD Request and Response examples as Contracting Authority or Economic Operator.
-        You can create and test ESDP Requests as Contracting Authority and ESPD Responses as Economic Operator.
+        Select desired ESPD version and generate ESPD Request examples as Contracting Authority and ESPD Response examples Economic Operator.
         </b-card-text>
 
         <div>
-        <b-tabs content-class="mt-3" justified>
-            <b-tab>
-            <template #title>
-                <b-icon icon="collection-play" aria-hidden="true"></b-icon> <strong>Start</strong>
-            </template>
-            <component v-bind:is="startComponent" v-on:updateESPDDoc="updateESPDDoc"></component>
-            </b-tab>
-            
-            <b-tab>
-            <template #title>
-                <b-icon icon="bank" aria-hidden="true"></b-icon> <strong>Procedure</strong>
-            </template>
-            <component v-bind:is="procedureComponent" v-on:updateESPDDoc="updateESPDDoc"></component>
-            </b-tab>
-            
-            <b-tab>
-            <template #title>
-                <b-icon icon="exclamation-octagon" aria-hidden="true"></b-icon> <strong>Exclusion</strong>
-            </template>
-            <component v-bind:is="exclusionComponent" v-on:updateESPDDoc="updateESPDDoc"></component>
-            </b-tab>
-            
-            <b-tab>
-            <template #title>
-                <b-icon icon="shield-fill-check" aria-hidden="true"></b-icon> <strong>Selection</strong>
-            </template>
-            <component v-bind:is="selectionComponent" v-on:updateESPDDoc="updateESPDDoc"></component>
-            </b-tab>
-            
-            <b-tab>
-            <template #title>
-                <b-icon icon="cloud-download" aria-hidden="true"></b-icon> <strong>Finish</strong>
-            </template>
-            <component v-bind:is="finishComponent" v-on:updateESPDDoc="updateESPDDoc"></component>
-            </b-tab>
-        </b-tabs>
-        </div>
+        <b-conatiner>
+            <b-row>
+                <b-col class="text-left">
+                <b-button pill variant="success" @click='previousStep'>Previous</b-button>
+                </b-col>
+                <b-col class="text-center">
+                   [ Step: {{crt_step}} ] <b-icon :icon=steps[crt_step].icon aria-hidden='true'></b-icon> <strong>{{steps[crt_step].label}}</strong>
+                </b-col>
+                <b-col class="text-right">
+                <b-button pill variant="success" @click='nextStep()'>Next</b-button>
+                </b-col>
+            </b-row>
+        
+        <b-row class="my-2">
+        <b-col col-span=3>
+        <component v-bind:is="steps[crt_step].component" ></component>
+        </b-col>
+        </b-row>
+        </b-container>
     </b-card> 
     `
 });
\ No newline at end of file