Skip to content

Commit

Permalink
feat: customization of tables
Browse files Browse the repository at this point in the history
  • Loading branch information
@olehchepak
olehchepak committed Apr 14, 2021
1 parent aaff1d1 commit 06eb4c9
Show file tree
Hide file tree
Showing 23 changed files with 886 additions and 60 deletions.
31 changes: 30 additions & 1 deletion frontend/jest.setup.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@ jest.mock('@/services/ApiService', () => {
resolve({
data: {
id: 'test id',
headings_type: 'ocds',
tables: [
{
id: 'parties table',
Expand Down Expand Up @@ -155,6 +156,30 @@ jest.mock('@/services/ApiService', () => {
});
}),

changeHeadingsType: jest.fn((id) => {
return new Promise((resolve) => {
setTimeout(() => {
resolve({
data: {
id: id,
},
});
}, 10);
});
}),

updateTableHeading: jest.fn((id) => {
return new Promise((resolve) => {
setTimeout(() => {
resolve({
data: {
id: id,
},
});
}, 10);
});
}),

getTablePreview: jest.fn((type, uploadId, selectionsId, tableId) => {
return new Promise((resolve) => {
setTimeout(() => {
Expand All @@ -166,7 +191,7 @@ jest.mock('@/services/ApiService', () => {
preview: 'col1,col2,col3↵cell11,cell12,cell13↵cell21,cell22,cell23',
},
{
id: tableId,
id: 'table 2',
name: 'Awards_b.csv',
preview: 'col1,col2,col3↵cell11,cell12,cell13↵cell21,cell22,cell23',
},
Expand All @@ -177,3 +202,7 @@ jest.mock('@/services/ApiService', () => {
}),
};
});

Object.defineProperty(window, 'scroll', {
value: jest.fn(),
});
3 changes: 0 additions & 3 deletions frontend/src/App.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,9 +93,6 @@ export default {
}
this.$store.commit('increaseNumberOfUploads');
if (selectionsId) {
this.$router
.push(`/customize-tables?${type.toLowerCase()}=${uploadDetails.id}&selections=${selectionsId}`)
.catch(() => {});
this.loading = false;
return;
}
Expand Down
3 changes: 3 additions & 0 deletions frontend/src/assets/icons/pencil.svg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
10 changes: 10 additions & 0 deletions frontend/src/assets/styles/overridings/_v-radio.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
.v-radio {
&.v-item--active {
.v-label {
color: map-get($colors, 'darkest');
}
}
.v-label {
padding-top: 4px;
}
}
1 change: 1 addition & 0 deletions frontend/src/assets/styles/overridings/index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,3 +5,4 @@
@import "v-divider";
@import "v-switch";
@import "v-stepper";
@import "v-radio";
19 changes: 14 additions & 5 deletions frontend/src/components/App/AppStepper.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,19 +11,24 @@
<v-divider :class="{ active: value > 1, complete: value > 2 }"></v-divider>

<v-stepper-step :complete="value > 2" complete-icon="mdi-check" step="2" @click="navigateTo('/select-data')">
<translate :class="{ 'text-link': value > 2 }" @click="navigateTo('/select-data')">Select data</translate>
<translate :class="{ 'text-link': value > 2 }">Select data</translate>
</v-stepper-step>

<v-divider :class="{ active: value > 2, complete: value > 3 }"></v-divider>

<v-stepper-step :complete="value > 3" complete-icon="mdi-check" step="3">
<translate>Customize tables</translate>
<v-stepper-step
:complete="value > 3"
complete-icon="mdi-check"
step="3"
@click="navigateTo('/customize-tables')"
>
<translate :class="{ 'text-link': value > 3 }">Customize tables</translate>
</v-stepper-step>

<v-divider :class="{ active: value > 3, complete: value > 4 }"></v-divider>

<v-stepper-step :complete="value > 4" complete-icon="mdi-check" step="4">
<translate>Edit headings</translate>
<v-stepper-step :complete="value > 4" complete-icon="mdi-check" step="4" @click="navigateTo('/edit-headings')">
<translate :class="{ 'text-link': value > 4 }">Edit headings</translate>
</v-stepper-step>

<v-divider :class="{ active: value > 4, complete: value > 5 }"></v-divider>
Expand All @@ -47,6 +52,10 @@ export default {
return 2;
case 'customize tables':
return 3;
case 'edit headings':
return 4;
case 'download':
return 5;
default:
return 1;
}
Expand Down
59 changes: 58 additions & 1 deletion frontend/src/components/App/AppTable.vue
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,30 @@
<template>
<div class="app-table">
<div class="d-flex align-center" :class="allowActions ? 'mb-1' : 'mb-3 mt-1'">
<p class="mr-3 fw-300 mb-0 app-table__name">{{ name }}</p>
<p class="mr-3 fw-300 mb-0 app-table__name">Table: {{ name }}</p>
<div v-if="editableName">
<v-menu :close-on-content-click="false" v-model="nameMenu">
<template v-slot:activator="{ on, attrs }">
<v-btn text v-bind="attrs" v-on="on">
<v-img height="16" contain src="@/assets/icons/pencil.svg" />
<translate class="text-link">Edit</translate>
</v-btn>
</template>

<v-text-field autofocus solo hide-details v-model="newName">
<div slot="append">
<v-btn class="mr-2" width="24" height="24" icon :disabled="!newName" @click="changeName">
<v-icon class="pb-1" size="18" color="success">mdi-check</v-icon>
</v-btn>

<v-btn width="24" height="24" icon @click="nameMenu = false">
<v-icon class="pb-1" size="18" color="error">mdi-close</v-icon>
</v-btn>
</div>
</v-text-field>
</v-menu>
</div>

<div v-if="allowActions">
<v-btn text v-if="include" @click="$emit('remove')" key="remove">
<v-img height="16" contain src="@/assets/icons/remove.svg" />
Expand All @@ -16,6 +39,9 @@
<v-simple-table v-if="include" :style="{ width: headers.length * 100 + 'px' }">
<template v-slot:default>
<thead>
<tr v-if="headings">
<th v-for="header of headers" :key="header">{{ headings[header] || header }}</th>
</tr>
<tr>
<th v-for="header of headers" :key="header">{{ header }}</th>
</tr>
Expand Down Expand Up @@ -65,6 +91,27 @@ export default {
type: Array,
required: true,
},
editableName: {
type: Boolean,
default: false,
},
headings: {
type: Object,
default: null,
},
},
data() {
return {
nameMenu: false,
newName: null,
};
},
watch: {
nameMenu() {
this.newName = this.name;
},
},
computed: {
Expand All @@ -77,6 +124,13 @@ export default {
}, []);
},
},
methods: {
changeName() {
this.$emit('change-name', this.newName);
this.nameMenu = false;
},
},
};
</script>

Expand All @@ -88,11 +142,14 @@ export default {
border-collapse: collapse !important;
th,
td {
padding: 4px !important;
border: 1px solid map-get($colors, 'darkest');
text-align: center !important;
font-size: 14px !important;
font-weight: 300;
color: map-get($colors, 'darkest') !important;
max-width: 100px;
overflow-wrap: anywhere;
}
th {
min-width: 100px;
Expand Down
122 changes: 103 additions & 19 deletions frontend/src/components/CustomizeTables/CustomizeTablesTable.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,14 @@
<div class="table">
<h3 class="mb-4 table__name">{{ table.name }}</h3>
<v-row>
<v-col cols="12" md="8" lg="6">
<v-col cols="12" md="6">
<div v-if="aboutThisTable">
<translate tag="p" class="mb-2">About this table</translate>
<p class="fw-300" v-for="(item, idx) in aboutThisTable" :key="idx">{{ item }}</p>
</div>
</v-col>

<v-col cols="12" md="6">
<div class="table-info">
<div v-if="availableData.length">
<translate tag="p" class="mb-2">Available data</translate>
Expand All @@ -17,28 +24,24 @@
<li v-for="(item, idx) of arrays" :key="idx">{{ item }}</li>
</ul>
</div>

<v-switch
v-model="isSplit"
inset
hide-details
class="mt-6"
color="darkest"
slot="actions"
:label="
isSplit ? $gettext('Keep arrays in main table') : $gettext('Split arrays into separate tables')
"
></v-switch>
</div>
</v-col>
</v-row>
<v-switch
v-model="isSplit"
inset
hide-details
color="darkest"
slot="actions"
:label="isSplit ? $gettext('Keep arrays in main table') : $gettext('Split arrays into separate tables')"
></v-switch>
<v-skeleton-loader class="mt-8" v-if="loading" type="table-tbody"></v-skeleton-loader>
<div class="mt-8 tables">
<app-table
v-for="(table, idx) in tables"
:key="table.name"
:headers="table.headers"
:name="'Table: ' + table.name"
:name="table.heading || table.name"
:data="table.data"
:include="table.include"
:allow-actions="idx !== 0"
Expand Down Expand Up @@ -103,6 +106,90 @@ export default {
},
},
aboutThisTable() {
const name = this.table.name;
switch (name) {
case 'awards':
return [
this.$gettext(
'This table contained information on the activities undertaken in order to enter ' +
'into a contract.'
),
this.$gettext(
'Data regarding tender process - publicly inviting prospective contractors to ' +
'submit bids for evaluation and selecting a winner or winners.'
),
];
case 'parties':
return [
this.$gettext(
'This table contained information on the parties (organizations, economic ' +
'operators, and other participants) who are involved in the contracting process and ' +
'their roles, e.g. buyer, procuring entity, supplier, etc.'
),
this.$gettext(
'Organization references elsewhere in the schema are used to refer back to these ' +
'entries in this list.'
),
];
case 'planning':
return [
this.$gettext(
'This table contained information from the planning phase of the contracting process.'
),
this.$gettext(
'This includes information related to the process of deciding what to contract, when, and how.'
),
];
case 'tenders':
return [
this.$gettext(
'This table contained information on the activities undertaken in order to ' +
'enter into a contract.'
),
this.$gettext(
'Data regarding tender process - publicly inviting prospective contractors to ' +
'submit bids for evaluation and selecting a winner or winners.'
),
];
case 'contracts':
return [
this.$gettext(
'This table contained information from the contract creation phase of the ' +
'procurement process. and the signed contract between the buyer and supplier(s).'
),
];
case 'milestones':
return [
this.$gettext(
'This table contained a list of milestones associated with the different ' +
'stages of the procurement process (planning, tender, award, contract, implementation).'
),
];
case 'amendments':
return [
this.$gettext(
'This table contained information on the changes to the different stages ' +
'of the procurement process (tender, award, contract).'
),
this.$gettext('For example, when the value or duration of a contract is changed.'),
this.$gettext(
'The term amendment often has a specific legal meaning for a publisher. Certain ' +
'changes to a tender, award, or contract might only be allowed as part of an amendment.'
),
];
case 'Documents':
return [
this.$gettext(
'This table contained information on the documents available for the different ' +
'stages of the procurement process (planning, tender, award, contract, implementation).'
),
];
default:
return null;
}
},
arrays() {
const res = [];
const belowThreshold = this.additionalInfo.arrays?.below_threshold;
Expand Down Expand Up @@ -201,6 +288,7 @@ export default {
* @param { string } tableId
*/
async getTablePreview(tableId) {
window.scroll(0, 0);
this.loading = true;
const { uploadDetails, selections } = this.$store.state;
const { data } = await ApiService.getTablePreview(
Expand All @@ -217,6 +305,7 @@ export default {
return {
id: preview.id,
name: preview.name,
heading: preview.heading,
headers: parsed.data[0],
data: parsed.data.slice(1),
include: true,
Expand Down Expand Up @@ -265,10 +354,5 @@ export default {
display: flex;
flex-wrap: wrap;
gap: 12px;
.v-input {
position: absolute;
right: 0;
top: -5px;
}
}
</style>

0 comments on commit 06eb4c9

Please sign in to comment.