Skip to content

Commit

Permalink
Site redesign
Browse files Browse the repository at this point in the history
  • Loading branch information
@dragos-eu
dragos-eu committed Nov 14, 2024
1 parent e14c50e commit 230154e
Show file tree
Hide file tree
Showing 11 changed files with 93 additions and 69 deletions.
2 changes: 1 addition & 1 deletion ESPD/examples/exclusionGrounds.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ Vue.component('exclusionGrounds', {
<b-card-header header-tag="header" class="p-1" role="tab">
<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-e1" accordion="my-accordion" role="tabpanel">
<b-collapse id="accordion-e1" accordion="my-accordion" visible role="tabpanel">
<b-card-body v-for="item in espd_structure['partIII']['A']">
<component v-bind:is="item" :ref="item"></component>
</b-card-body>
Expand Down
64 changes: 26 additions & 38 deletions src/js/codelists.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -266,53 +266,41 @@ Vue.component("codelists", {
<b-overlay :show="loading" rounded="sm">
<b-card title="ESPD Code Lists" footer-tag="footer">
<b-form-group label-cols="4" label-cols-lg="2" label-size="sm" label="ESPD version" label-for="input-espdversion">
<b-card-text>
Select the ESPD version and the code list in order to explore the contents. At the bottom of the page you can view the translations for each entry of the code list.
</b-card-text>
<b-row>
<b-col lg="6">
<b-form-group label-cols="2" label-cols-lg="2" label-size="sm" content-cols="3" label="ESPD version" label-for="input-espdversion">
<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-codelist">
</b-col>
<b-col lg="6">
<b-form-group label-cols="2" label-cols-lg="2" label-size="sm" content-cols="3" label="Code list" label-for="input-codelist">
<b-form-select id="input-codelist" v-model="codelist" :options="codelists" @change="selectCodeList($event)"></b-form-select>
</b-form-group>
</b-col>
</b-row>
<b-form-group label-cols="4" label-cols-lg="2" label-size="sm" label="Short Name" label-for="input-shortname">
<b-form-input id="input-shortname" v-model="crt_list.ShortName"></b-form-input>
</b-form-group>
<b-form-group label-cols="4" label-cols-lg="2" label-size="sm" label="Long Name" label-for="input-longname">
<b-form-input id="input-longname" v-model="crt_list.LongName"></b-form-input>
</b-form-group>
<b-form-group label-cols="4" label-cols-lg="2" label-size="sm" label="List ID" label-for="input-listid">
<b-form-input id="input-listid" v-model="crt_list.ListID"></b-form-input>
</b-form-group>
<b-form-group label-cols="4" label-cols-lg="2" label-size="sm" label="Version" label-for="input-version">
<b-form-input id="input-version" v-model="crt_list.Version"></b-form-input>
</b-form-group>
<b-form-group label-cols="4" label-cols-lg="2" label-size="sm" label="Canonical URI" label-for="input-canonicaluri">
<b-form-input id="input-canonicaluri" v-model="crt_list.CanonicalUri"></b-form-input>
</b-form-group>
<b-form-group label-cols="4" label-cols-lg="2" label-size="sm" label="Canonical Version URI" label-for="input-canonicalversionuri">
<b-form-input id="input-canonicalversionuri" v-model="crt_list.CanonicalVersionUri"></b-form-input>
</b-form-group>
<b-form-group label-cols="4" label-cols-lg="2" label-size="sm" label="Location URI" label-for="input-locationuri">
<b-form-input id="input-lsocationuri" v-model="crt_list.LocationUri"></b-form-input>
</b-form-group>
<b-form-group label-cols="4" label-cols-lg="2" label-size="sm" label="Agency Long Name" label-for="input-agencylongname">
<b-form-input id="input-agencylongname" v-model="crt_list.AgencyLongName"></b-form-input>
</b-form-group>
<b-form-group label-cols="4" label-cols-lg="2" label-size="sm" label="Agency Identifier" label-for="input-agencyidentifier">
<b-form-input id="input-agencyidentifier" v-model="crt_list.AgencyIdentifier"></b-form-input>
</b-form-group>
<b-form-group label-cols="4" label-cols-lg="2" label-size="sm" label="Name" label-for="input-name">
<b-form-input id="input-name" v-model="crt_list.name"></b-form-input>
</b-form-group>
<b-form-group label-cols="4" label-cols-lg="2" label-size="sm" label="Type" label-for="input-type">
<b-form-input id="input-type" v-model="crt_list.type"></b-form-input>
</b-form-group>
<!-- Display read only data as static HTML -->
<b>Short Name: </b>{{crt_list.ShortName}}
<b> Long Name: </b>{{crt_list.LongName}}<br/>
<b>List ID: </b>{{crt_list.ListID}}
<b> Version: </b>{{crt_list.Version}}<br/>
<b>Canonical URI: </b>{{crt_list.CanonicalUri}}<br/>
<b>Canonical Version URI: </b>{{crt_list.CanonicalVersionUri}}<br/>
<b>Location URI: </b>{{crt_list.LocationUri}}<br/>
<b>Agency Long Name: </b>{{crt_list.AgencyLongName}}<br/>
<b>Agency Identifier: </b>{{crt_list.AgencyIdentifier}}<br/>
<em>Type: </em>{{crt_list.type}}<br/>
<em>Name: </em>{{crt_list.name}}<br/>
<b-table striped hover responsive :items="crt_list.table" :fields="details_fields" :no-local-sorting=true>
<template #cell(show_details)="row">
<b-button pill variant="warning" size="sm" @click="row.toggleDetails" class="mr-2">
{{ row.detailsShowing ? 'Close' : 'Details'}}
{{ row.detailsShowing ? 'Close' : 'Translations'}}
</b-button>
</template>
<template #row-details="row">
Expand Down
7 changes: 3 additions & 4 deletions src/js/distribution.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -465,13 +465,12 @@ Vue.component("distribution", {
template: `
<b-card title="ESPD Distribution">
<b-card-text>
Select the ESPD version and generate the ESPD Distribution ZIP files. The archives contain Code Lists and Model files. The Excel files can be downloaded separately.
Select the ESPD version and click the corresponding buttons to generate the ESPD Distribution ZIP files. The Excel files contain the Code Lists definition, and the ESPD EDM data structure. The archives contain Code Lists in GC format.
</b-card-text>
<b-form-group label-cols="4" label-cols-lg="2" label-size="sm" label="ESPD version" label-for="input-espdversion">
<b-form-group label-cols="2" label-cols-lg="2" label-size="sm" content-cols="3" label="ESPD version" label-for="input-espdversion">
<b-form-select id="input-espdversion" v-model="version" :options="versions" @change="selectVersion($event)"></b-form-select>
</b-form-group>
<b-row>
<b-col >
Code Lists
Expand Down
30 changes: 28 additions & 2 deletions src/js/espd.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -603,7 +603,10 @@ function json2ESPD_v4(fragment, result = { sel_count: 0, template: ''}) {

Vue.component(`${window.espd_doc.espd_version}-${el}`, {
data() { return {...d}},
template: `${result.template}`
template: `${result.template}`,
created(){
window.espd_ds.get(el).save(el, this.exp)
}
})


Expand Down Expand Up @@ -956,6 +959,7 @@ class ESPD {
structure = new Map()
cardinalities = new Map()
raw_data
static #tags = ['QUESTION', 'REQUIREMENT', 'REQUIREMENT_GROUP', 'REQUIREMENT_SUBGROUP', 'QUESTION_GROUP', 'QUESTION_SUBGROUP', 'SUBCRITERION']

constructor(tag, obj){
this.tag = tag
Expand All @@ -969,6 +973,28 @@ class ESPD {
return this.tag
}

save(path, obj){
console.log(path, obj)
if (path == this.tag){
//strore the entrire structure, only values, zero size arrays do not matter
for (const key in obj) {
if (Object.hasOwn(obj, key)) {
const element = obj[key]
if (!Array.isArray(element)){
//store this value
let target = path.split('/').slice(1)
//dest = window.espd_ds.get(tag).store
//target.shift()
}
}
}

}else{
//add sub structure
}

}

#buildCardinalities(obj){
let result = new Map()
for (const key in obj) {
Expand Down Expand Up @@ -1004,7 +1030,7 @@ class ESPD {
for (const key in obj) {
if (Object.hasOwn(obj, key)) {
const element = obj[key];
if(['QUESTION', 'REQUIREMENT', 'REQUIREMENT_GROUP', 'REQUIREMENT_SUBGROUP', 'QUESTION_GROUP', 'QUESTION_SUBGROUP', 'SUBCRITERION'].indexOf(element.type) == -1) continue
if(ESPD.#tags.indexOf(element.type) == -1) continue
if(Object.hasOwn(element, 'components')){
result.set(key, [this.#buildStore(element.components)])
}else{
Expand Down
10 changes: 5 additions & 5 deletions src/js/home.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,16 +11,16 @@ Vue.component("home",{
<template #header>ESPD Demo Site</template>
<template #lead>
This site is a collection of Tools allowing you to get familiar with ESPD model
and examples. This site is provided for educational and training purpouses. It does not constitute an
official implementation of the ESPD service. Consider this site as a Test or Playground to get familiar with ESPD.</p>
<p>Feel free to download or copy-and-paste any parts of this example.
<p>ESPD Demo web site is a collection of Tools allowing you to download ESPD arterfacts, to explore ESPD model and to generate ESPD Request and ESPD Response examples. This site is provided for educational and training purpouses. It does not constitute an official implementation of the ESPD Service. ESDP Demo is a Playground to get familiar with ESPD, to enjoy the User Experience, and to generate ESDP documents.</p>
<p>We would like to get your feedback. You can contact us via email at <a href="mailto:[email protected]">[email protected]</a>, for any issues with this site you can <a href="https://github.com/OP-TED/espd-demo/issues">open a ticket on GitHub</a>. Feel free to download or use any parts of the code of this site from our <a href="https://github.com/OP-TED/espd-demo">GitHub repository</a>. The code is distributed under <a href="https://github.com/OP-TED/espd-demo/blob/main/LICENCE">EUROPEAN UNION PUBLIC LICENCE v. 1.2</a>.</p>
</template>
<hr class="my-4">
<p>
Your ESPD journey starts here! We would like to guide and assist you.
Your ESPD journey starts here! We would like to guide and assist you in your successful ESPD Service implementation.
</p>
</b-jumbotron>
Expand Down
10 changes: 5 additions & 5 deletions src/js/messages.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,11 @@ const messages = {
hello: 'Hello!'
},
mainmenu: {
distribution: 'Export',
codelists: 'Code Lists',
uuid: 'UUID',
model: 'View',
service: 'Examples'
distribution: 'Artefacts Export',
codelists: 'Explore Code Lists',
uuid: 'eCertis integration',
model: 'View ESDP model',
service: 'Generate ESPD Examples'
}
},
fr: {
Expand Down
12 changes: 8 additions & 4 deletions src/js/model.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,14 +56,18 @@ Vue.component("model", {
<b-card-text>
Select the ESPD version and the Criterion and show the HTML represenation of the ESPD model.
</b-card-text>
<b-form-group label-cols="4" label-cols-lg="2" label-size="sm" label="ESPD version" label-for="input-espdversion">
<b-row>
<b-col lg="4">
<b-form-group label-cols="2" label-cols-lg="2" label-size="sm" content-cols="2" label="ESPD version" label-for="input-espdversion">
<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="Cirterion" label-for="input-model">
</b-col>
<b-col lg="8">
<b-form-group label-cols="1" label-cols-lg="1" label-size="sm" content-cols="10" 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>
</b-col>
</b-row>
<comonent :is="model"></component>
</b-card>
`
Expand Down
13 changes: 8 additions & 5 deletions src/js/service.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,11 @@ Vue.component("service", {

methods: {
nextStep() {
this.crt_step = Math.min(this.crt_step + 1, this.steps.length - 1)

if(this.crt_step==4){
this.crt_step = 0
}else{
this.crt_step = Math.min(this.crt_step + 1, this.steps.length - 1)
}
},
previousStep() {
this.crt_step = Math.max(this.crt_step - 1, 0)
Expand All @@ -31,20 +34,20 @@ Vue.component("service", {
template: `
<b-card title="ESPD Examples Generator">
<b-card-text>
Select desired ESPD version and generate ESPD Request examples as Contracting Authority and ESPD Response examples Economic Operator.
Select desired ESPD version and generate ESPD Request examples as Contracting Authority or ESPD Response examples Economic Operator. Fill in the corresponding fields and click Next to compete the forms. You can download the XML document at the end.
</b-card-text>
<div>
<b-conatiner>
<b-row>
<b-col class="text-left">
<b-button pill variant="success" @click='previousStep'>Previous</b-button>
<b-button :disabled="crt_step==0" pill variant="success" @click='previousStep'>Previous</b-button>
</b-col>
<b-col class="text-center">
[ Step: {{crt_step}} / {{steps.length-1}} ] <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-button pill variant="success" @click='nextStep()'>{{(crt_step==4)?'Start Again':'Next'}}</b-button>
</b-col>
</b-row>
Expand Down
3 changes: 2 additions & 1 deletion src/js/utils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,10 +42,11 @@ function showToast(message, title = 'Message from server', type = 'info', href =
window.app.$bvToast.toast(message,
{
title: title,
toaster: 'b-toaster-bottom-center',
toaster: 'b-toaster-top-center',
href: href,
solid: true,
variant: type,
noAutoHide: true,
appendToast: true
})
}
Expand Down
9 changes: 6 additions & 3 deletions src/js/uuid.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,7 @@ Vue.component("uuid", {
const eCertis_URL="https://ec.europa.eu/growth/tools-databases/ecertisrest/criteria/espd"
const checkURL = async() => {
try {
showToast('Cheking UUID in eCertis ... this may take a couple of minutes.','eCertis check','info','')
showToast('Checking UUID in eCertis ... this may take a couple of minutes.','eCertis check','info','')
let thecall = await fetch(`${eCertis_URL}/${item.uuid.replace('\r','').trim()}`)
let thedata = await thecall.text()
if (thecall.ok){
Expand All @@ -110,12 +110,15 @@ Vue.component("uuid", {
},

template: `
<b-card title="ESPD UUID search">
<b-card title="ESPD Model search">
<b-card-text>
Use the Filter fileld to search by UUID, version number or any text. The data set includes only Selection Criteria and Exclusion Grounds. You can check the actual content in eCertis by clicking on the button to the right.
</b-card-text>
<b-row>
<b-col sm="4" lg="4" md="4" class="mb-3">
<b-form-group label="Filter" label-for="filter-input" label-cols-sm="3" label-align-sm="right" label-size="sm" class="mb-0">
<b-input-group size="sm">
<b-form-input id="filter-input" v-model="filter" type="search" placeholder="Type UUID to Search"></b-form-input>
<b-form-input id="filter-input" v-model="filter" type="search" placeholder="Type UUID, version, on any text to Search"></b-form-input>
<b-input-group-append>
<b-button :disabled="!filter" @click="filter = ''">Clear</b-button>
Expand Down
2 changes: 1 addition & 1 deletion src/js/worker.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,5 +2,5 @@

onmessage = (e) => {
console.log(e.data)
postMessage(`Got ${e.data} command. Processing!`)
postMessage(`Got ${e.data} command. Processing done! This is the final result.`)
}

0 comments on commit 230154e

Please sign in to comment.