From 8a26cb2f0074f5177297f7962e6bf784d1332e46 Mon Sep 17 00:00:00 2001
From: lucile varloteaux <lucile.varloteaux@inrae.fr>
Date: Tue, 19 Apr 2022 10:55:45 +0200
Subject: [PATCH 1/3] modal des dynamique colonnes finis
---
.../views/references/ReferenceTableView.vue | 84 +++++++++++++------
1 file changed, 60 insertions(+), 24 deletions(-)
diff --git a/ui/src/views/references/ReferenceTableView.vue b/ui/src/views/references/ReferenceTableView.vue
index 6e9cbb4d0..031e9c4d8 100644
--- a/ui/src/views/references/ReferenceTableView.vue
+++ b/ui/src/views/references/ReferenceTableView.vue
@@ -31,24 +31,29 @@
>
<span v-if="info(column.id)">
<b-button
- size="is-small"
- type="is-dark"
- v-if="showBtnTablDynamicColumn(props.row[column.id])"
- @click="showModal(props.row[column.id])"
- icon-left="info"
- rounded
- style="height: inherit"
+ size="is-small"
+ type="is-dark"
+ v-if="showBtnTablDynamicColumn(props.row[column.id])"
+ @click="showModal(props.row[column.id])"
+ icon-left="info"
+ rounded
+ style="height: inherit"
></b-button>
<p v-else></p>
- <b-modal
- v-model="isCardModalActive"
- width="70%"
- >
+ <b-modal v-model="isCardModalActive" width="70%">
<div class="card">
+ <div class="card-header">
+ <div class="title card-header-title">
+ <p field="name" style="font-size: 1.5rem">
+ {{ column.id }}
+ </p>
+ </div>
+ </div>
<div class="card-content">
- <ul>
- <li v-for="modalObj in modalArrayObj" :key="modalObj.id">{{ modalObj }}</li>
- </ul>
+ <div class="columns" v-for="key in modalArrayObj" :key="key.id">
+ <p class="column">{{ key.column }} {{ $t('ponctuation.colon')}}</p>
+ <p class="column">{{ key.value }}</p>
+ </div>
</div>
</div>
</b-modal>
@@ -122,24 +127,48 @@ export default class ReferenceTableView extends Vue {
// show modal and cards
isCardModalActive = false;
modalArrayObj = [];
+ modalTblObj = [];
+ referencesDynamic;
+ display = "__display_" + window.localStorage.lang;
- showModal(tablDynamicColumn) {
+ async showModal(tablDynamicColumn) {
this.isCardModalActive = true;
- this.modalArrayObj = Object.entries(tablDynamicColumn).filter(a=>a[1]).map(function(a){let obj = {}; obj[a[0]]=a[1]; return obj});
- console.log(this.modalArrayObj);
+ this.modalArrayObj = Object.entries(tablDynamicColumn)
+ .filter((a) => a[1])
+ .map(function (a) {
+ let obj = {};
+ obj[a[0]] = a[1];
+ return obj;
+ });
+ for (let i = 0; i < this.referencesDynamic.referenceValues.length; i++) {
+ for (let j = 0; j < this.modalArrayObj.length; j++) {
+ let hierarchicalKey = this.referencesDynamic.referenceValues[i].hierarchicalKey;
+ if (this.modalArrayObj[j][hierarchicalKey]) {
+ let column = this.referencesDynamic.referenceValues[i].values[this.display];
+ let value = this.modalArrayObj[j][hierarchicalKey];
+ this.modalArrayObj[j] = { ...this.modalArrayObj[j], column: column, value: value };
+ }
+ }
+ }
return this.modalArrayObj;
}
- info(column) {
- let dynamicColumn = Object.entries(this.reference.dynamicColumns).filter(a=>a[1]);
- for (let i = 0; i< dynamicColumn.length; i++) {
- if(dynamicColumn[i][0] === column)
- return true;
+
+ info(refType) {
+ let dynamicColumns = Object.entries(this.reference.dynamicColumns).filter((a) => a[1]);
+ for (let i = 0; i < dynamicColumns.length; i++) {
+ if (dynamicColumns[i][0] === refType) return true;
}
return false;
}
showBtnTablDynamicColumn(tablDynamicColumn) {
- let showModal = Object.entries(tablDynamicColumn).filter(a=>a[1]).map(function(a){let obj = {}; obj[a[0]]=a[1]; return obj});
+ let showModal = Object.entries(tablDynamicColumn)
+ .filter((a) => a[1])
+ .map(function (a) {
+ let obj = {};
+ obj[a[0]] = a[1];
+ return obj;
+ });
return showModal.length !== 0;
}
@@ -172,7 +201,7 @@ export default class ReferenceTableView extends Vue {
}
}
- setInitialVariables() {
+ async setInitialVariables() {
if (!this.application?.references) {
return;
}
@@ -220,6 +249,13 @@ export default class ReferenceTableView extends Vue {
if (this.referenceValues) {
this.tableValues = Object.values(this.referenceValues).map((refValue) => refValue.values);
}
+ let dynamicColumns = Object.entries(this.reference.dynamicColumns).filter((a) => a[1]);
+ for (let i = 0; i < dynamicColumns.length; i++) {
+ this.referencesDynamic = await this.referenceService.getReferenceValues(
+ this.applicationName,
+ dynamicColumns[i][1].reference
+ );
+ }
}
}
</script>
--
GitLab
From a600c445b64b72e05435036088b104278e9ce6da Mon Sep 17 00:00:00 2001
From: lucile varloteaux <lucile.varloteaux@inrae.fr>
Date: Wed, 20 Apr 2022 09:47:04 +0200
Subject: [PATCH 2/3] =?UTF-8?q?pagination=20des=20r=C3=A9f=C3=A9rences?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../model/application/DownloadDatasetQuery.js | 6 +--
ui/src/style/_common.scss | 4 ++
.../views/references/ReferenceTableView.vue | 52 +++++++++++--------
3 files changed, 36 insertions(+), 26 deletions(-)
diff --git a/ui/src/model/application/DownloadDatasetQuery.js b/ui/src/model/application/DownloadDatasetQuery.js
index e15aa3283..9fb6ee4e9 100644
--- a/ui/src/model/application/DownloadDatasetQuery.js
+++ b/ui/src/model/application/DownloadDatasetQuery.js
@@ -7,7 +7,7 @@ export class DownloadDatasetQuery {
applicationNameOrId;
dataType;
offset = 0;
- limit = 15;
+ limit = 10;
variableComponentSelects = [];
variableComponentFilters = [];
variableComponentOrderBy = [];
@@ -16,7 +16,7 @@ export class DownloadDatasetQuery {
applicationNameOrId,
dataType,
offset = 0,
- limit = 15,
+ limit = 10,
variableComponentSelects,
variableComponentFilters,
variableComponentOrderBy
@@ -33,7 +33,7 @@ export class DownloadDatasetQuery {
this.applicationNameOrId = applicationNameOrId;
this.dataType = dataType;
this.offset = offset ? offset : 0;
- this.limit = limit ? limit : 15;
+ this.limit = limit ? limit : 10;
this.variableComponentSelects = [];
for (const select in variableComponentSelects) {
this.variableComponentSelects.push(select);
diff --git a/ui/src/style/_common.scss b/ui/src/style/_common.scss
index 28ab9bbcd..5cf08370f 100644
--- a/ui/src/style/_common.scss
+++ b/ui/src/style/_common.scss
@@ -214,3 +214,7 @@ a.dropdown-item.is-active, .dropdown .dropdown-menu .has-link a.is-active, butto
.svg-inline--fa.fa-info{
height: 24px;
}
+
+.modalCardRef .modal-background {
+ background-color: rgba(10,10,10,0.2);
+}
diff --git a/ui/src/views/references/ReferenceTableView.vue b/ui/src/views/references/ReferenceTableView.vue
index 031e9c4d8..250e51a98 100644
--- a/ui/src/views/references/ReferenceTableView.vue
+++ b/ui/src/views/references/ReferenceTableView.vue
@@ -19,7 +19,27 @@
:sticky-header="true"
height="100%"
style="padding-bottom: 20px; position: relative; z-index: 1"
+ paginated
+ :current-page="currentPage"
+ :per-page="perPage"
>
+ <template #pagination>
+ <b-pagination
+ v-model="currentPage"
+ :current-page.sync="currentPage"
+ :per-page="perPage"
+ :total="tableValues.length"
+ role="navigation"
+ :aria-label="$t('menu.aria-pagination')"
+ :aria-current-label="$t('menu.aria-curent-page')"
+ :aria-next-label="$t('menu.aria-next-page')"
+ :aria-previous-label="$t('menu.aria-previous-page')"
+ order="is-centered"
+ range-after="3"
+ range-before="3"
+ :rounded="true"
+ />
+ </template>
<b-table-column
v-for="column in columns"
:key="column.id"
@@ -35,17 +55,17 @@
type="is-dark"
v-if="showBtnTablDynamicColumn(props.row[column.id])"
@click="showModal(props.row[column.id])"
- icon-left="info"
+ icon-left="eye"
rounded
style="height: inherit"
></b-button>
<p v-else></p>
- <b-modal v-model="isCardModalActive" width="70%">
+ <b-modal v-model="isCardModalActive" class="modalCardRef" width="70%">
<div class="card">
<div class="card-header">
<div class="title card-header-title">
<p field="name" style="font-size: 1.5rem">
- {{ column.id }}
+ {{ column.title }}
</p>
</div>
</div>
@@ -73,22 +93,6 @@
</b-collapse>
</b-table-column>
</b-table>
- <b-pagination
- v-if="perPage <= tableValues.length"
- v-model="currentPage"
- :per-page="perPage"
- :total="tableValues.length"
- role="navigation"
- :aria-label="$t('menu.aria-pagination')"
- :aria-current-label="$t('menu.aria-curent-page')"
- :aria-next-label="$t('menu.aria-next-page')"
- :aria-previous-label="$t('menu.aria-previous-page')"
- order="is-centered"
- range-after="3"
- range-before="3"
- :rounded="true"
- >
- </b-pagination>
</div>
</PageView>
</template>
@@ -122,7 +126,7 @@ export default class ReferenceTableView extends Vue {
referenceValues = [];
tableValues = [];
currentPage = 1;
- perPage = 15;
+ perPage = 10;
// show modal and cards
isCardModalActive = false;
@@ -144,7 +148,8 @@ export default class ReferenceTableView extends Vue {
for (let j = 0; j < this.modalArrayObj.length; j++) {
let hierarchicalKey = this.referencesDynamic.referenceValues[i].hierarchicalKey;
if (this.modalArrayObj[j][hierarchicalKey]) {
- let column = this.referencesDynamic.referenceValues[i].values[this.display];
+ let column = this.referencesDynamic.referenceValues[i].values[this.display] ?
+ this.referencesDynamic.referenceValues[i].values[this.display] : hierarchicalKey ;
let value = this.modalArrayObj[j][hierarchicalKey];
this.modalArrayObj[j] = { ...this.modalArrayObj[j], column: column, value: value };
}
@@ -174,7 +179,7 @@ export default class ReferenceTableView extends Vue {
async created() {
await this.init();
- this.setInitialVariables();
+ await this.setInitialVariables();
}
async init() {
@@ -193,6 +198,7 @@ export default class ReferenceTableView extends Vue {
this.applicationName,
this.refId
);
+ console.log(this.application);
if (references) {
this.referenceValues = references.referenceValues;
}
@@ -258,4 +264,4 @@ export default class ReferenceTableView extends Vue {
}
}
}
-</script>
+</script>
\ No newline at end of file
--
GitLab
From 17d4cad5a7c5ed22e3c14ebb3b13aa1d19b92267 Mon Sep 17 00:00:00 2001
From: lucile varloteaux <lucile.varloteaux@inrae.fr>
Date: Wed, 20 Apr 2022 10:03:43 +0200
Subject: [PATCH 3/3] finalisation de la mise en forme de la modal
---
ui/src/style/_common.scss | 9 ++++++++-
ui/src/views/references/ReferenceTableView.vue | 2 +-
2 files changed, 9 insertions(+), 2 deletions(-)
diff --git a/ui/src/style/_common.scss b/ui/src/style/_common.scss
index 5cf08370f..791c74cb6 100644
--- a/ui/src/style/_common.scss
+++ b/ui/src/style/_common.scss
@@ -216,5 +216,12 @@ a.dropdown-item.is-active, .dropdown .dropdown-menu .has-link a.is-active, butto
}
.modalCardRef .modal-background {
- background-color: rgba(10,10,10,0.2);
+ background-color: rgba(10,10,10,0.25);
}
+.modalArrayObj:nth-child(2n) {
+ background-color: rgba(239, 239, 239,0.5);
+}
+.modalArrayObj {
+ background-color: rgb(239, 239, 239);
+ border-bottom: 1px solid rgba(128, 128, 128,0.3);
+}
\ No newline at end of file
diff --git a/ui/src/views/references/ReferenceTableView.vue b/ui/src/views/references/ReferenceTableView.vue
index 250e51a98..73a067f84 100644
--- a/ui/src/views/references/ReferenceTableView.vue
+++ b/ui/src/views/references/ReferenceTableView.vue
@@ -70,7 +70,7 @@
</div>
</div>
<div class="card-content">
- <div class="columns" v-for="key in modalArrayObj" :key="key.id">
+ <div class="columns modalArrayObj" v-for="key in modalArrayObj" :key="key.id">
<p class="column">{{ key.column }} {{ $t('ponctuation.colon')}}</p>
<p class="column">{{ key.value }}</p>
</div>
--
GitLab