From 09d7c0debb05d5a707de55ca6cfd35ae70d84f27 Mon Sep 17 00:00:00 2001
From: lucile varloteaux <lucile.varloteaux@inrae.fr>
Date: Fri, 5 May 2023 17:02:02 +0200
Subject: [PATCH 01/18] filtre autocompletation et select pour dataType
---
ui/src/views/datatype/DataTypeTableView.vue | 44 +++++++++++++++++++--
1 file changed, 40 insertions(+), 4 deletions(-)
diff --git a/ui/src/views/datatype/DataTypeTableView.vue b/ui/src/views/datatype/DataTypeTableView.vue
index b5c5c60db..a5c2a69bc 100644
--- a/ui/src/views/datatype/DataTypeTableView.vue
+++ b/ui/src/views/datatype/DataTypeTableView.vue
@@ -305,7 +305,23 @@
@setting_interval="addVariableSearch"
></CollapsibleInterval>
</b-field>
- <b-input
+
+ <b-field>
+ <b-autocomplete
+ v-model="search[component.variable + '_' + component.component]"
+ :data="searchValueReference"
+ field="localName"
+ :placeholder="$t('dataTypeAuthorizations.search')"
+ class="is-primary"
+ icon="search"
+ size="is-small"
+ type="search"
+ @blur="addVariableSearch(component)"
+ @input="recalculate(component)"
+ >
+ </b-autocomplete>
+ </b-field>
+<!-- <b-input
v-model="search[component.variable + '_' + component.component]"
:placeholder="$t('dataTypeAuthorizations.search')"
autocomplete="off"
@@ -314,7 +330,8 @@
size="is-small"
type="search"
@blur="addVariableSearch(component)"
- ></b-input>
+ @input="recalculate(component)"
+ ></b-input>-->
</b-field>
</div>
</div>
@@ -426,13 +443,14 @@
!testMultiplicity(row[component.variable][component.component], component.checker)
"
>
-<!-- {{ getValuesRow(row[component.variable][component.component])}} -->{{ /.{25}(.*$)/.exec(row[component.variable][component.component])[1] }}
+ {{ /.{25}(.*$)/.exec(row[component.variable][component.component])[1] }}
</span>
<span
v-else-if="
row[component.variable][component.computedComponent] &&
component.checker &&
- component.checker.pattern
+ component.checker.pattern &&
+ !testMultiplicity(row[component.variable][component.component], component.checker)
"
>
{{ /.{25}(.*$)/.exec(row[component.variable][component.computedComponent])[1] }}
@@ -587,6 +605,7 @@ export default class DataTypeTableView extends Vue {
variableSearch = [];
referenceLineCheckers = [];
displayDataTypes = false;
+ searchValueReference=[];
getRefType(checkerRow) {
if (checkerRow?.configuration === null) {
@@ -878,6 +897,23 @@ export default class DataTypeTableView extends Vue {
document.getElementById(variable + component).remove();
}
+ recalculate(variableComponent) {
+ let { key, variable, component } = variableComponent;
+ let value = this.search[key];
+ this.searchValueReference = [];
+ console.log(value)
+ this.valueReference =
+ Object.keys(
+ this.application.dataTypes[this.dataTypeId].variables[variable].components[component].checker.referenceLineChecker.referenceValues
+ );
+ for (let i = 0; i<this.valueReference.length; i++) {
+ if (this.valueReference[i].toString().indexOf(value) !==-1) {
+ this.searchValueReference.push(this.valueReference[i])
+ }
+ }
+ console.log(this.searchValueReference)
+ }
+
addVariableSearch(variableComponent) {
let { key, variable, component, type, format } = variableComponent;
let isRegExp = this.params.variableComponentFilters.isRegex;
--
GitLab
From 7a5596229bd9744253eec34b6176a59eb7186b65 Mon Sep 17 00:00:00 2001
From: lucile varloteaux <lucile.varloteaux@inrae.fr>
Date: Tue, 9 May 2023 13:43:04 +0200
Subject: [PATCH 02/18] filtre autocompletation dans dataType
---
.../components/common/CollapsibleInterval.vue | 1 -
ui/src/views/datatype/DataTypeTableView.vue | 65 ++++++++++---------
2 files changed, 36 insertions(+), 30 deletions(-)
diff --git a/ui/src/components/common/CollapsibleInterval.vue b/ui/src/components/common/CollapsibleInterval.vue
index fc1ca4ab0..6e780e003 100644
--- a/ui/src/components/common/CollapsibleInterval.vue
+++ b/ui/src/components/common/CollapsibleInterval.vue
@@ -2,7 +2,6 @@
<div>
<div>
<b-button
- size="is-small"
type="is-dark is-light"
icon-left="plus"
outlined
diff --git a/ui/src/views/datatype/DataTypeTableView.vue b/ui/src/views/datatype/DataTypeTableView.vue
index a5c2a69bc..c7074963d 100644
--- a/ui/src/views/datatype/DataTypeTableView.vue
+++ b/ui/src/views/datatype/DataTypeTableView.vue
@@ -9,6 +9,7 @@
/>
<h1 class="title main-title">{{ application.localDatatypeName || dataTypeId }}</h1>
+ <b-loading v-model="isLoading" :is-full-page="null"></b-loading>
<div v-if="!showSort && !showFilter" class="columns">
<div
v-if="
@@ -88,7 +89,8 @@
outlined
type="is-light"
@click="showFilter = !showFilter"
- ></b-button>
+ >
+ </b-button>
</div>
<div class="column is-2-desktop is-4-tablet">
<b-button icon-left="redo" outlined type="is-danger" @click="reInit"
@@ -304,9 +306,17 @@
:variable-component="component"
@setting_interval="addVariableSearch"
></CollapsibleInterval>
+ <b-input
+ v-model="search[component.variable + '_' + component.component]"
+ :placeholder="$t('dataTypeAuthorizations.search')"
+ autocomplete="off"
+ class="is-primary"
+ icon="search"
+ type="search"
+ @blur="addVariableSearch(component)"
+ ></b-input>
</b-field>
-
- <b-field>
+ <b-field v-else-if="'reference' === component.type">
<b-autocomplete
v-model="search[component.variable + '_' + component.component]"
:data="searchValueReference"
@@ -314,24 +324,23 @@
:placeholder="$t('dataTypeAuthorizations.search')"
class="is-primary"
icon="search"
- size="is-small"
type="search"
- @blur="addVariableSearch(component)"
- @input="recalculate(component)"
+ @click.native="addVariableSearch(component)"
+ @keyup.native="recalculate(component)"
>
</b-autocomplete>
</b-field>
-<!-- <b-input
- v-model="search[component.variable + '_' + component.component]"
- :placeholder="$t('dataTypeAuthorizations.search')"
- autocomplete="off"
- class="is-primary"
- icon="search"
- size="is-small"
- type="search"
- @blur="addVariableSearch(component)"
- @input="recalculate(component)"
- ></b-input>-->
+ <b-field v-else>
+ <b-input
+ v-model="search[component.variable + '_' + component.component]"
+ :placeholder="$t('dataTypeAuthorizations.search')"
+ autocomplete="off"
+ class="is-primary"
+ icon="search"
+ type="search"
+ @blur="addVariableSearch(component)"
+ ></b-input>
+ </b-field>
</b-field>
</div>
</div>
@@ -392,17 +401,14 @@
<div class="b-table">
<div class="DataSetTableView-wrapper table-wrapper has-sticky-header" style="height: 690px">
<table class="table is-striped">
- <caption v-if="variables.length === 0">
- <div v-if="!displayDataTypes" class="loader-wrapper">
- <div class="loader is-loading"></div>
- </div>
- <div v-if="displayDataTypes" class="columns">
+ <caption v-if="variables.length === 0 && !isLoading">
+ <div class="columns">
<div class="column">
{{ $t("alert.dataTypeFiltreEmpty") }}
</div>
</div>
</caption>
- <thead style="text-transform: capitalize; text-align: center">
+ <thead v-else style="text-transform: capitalize; text-align: center">
<tr class="DataSetTableView-variable-row">
<th
v-for="variable in variables"
@@ -421,7 +427,6 @@
:variable="comp.variable"
>
{{ comp.label }}
- <!--b-icon :icon="getSortIcon(comp.variable, comp.component)"></b-icon-->
</th>
</tr>
</thead>
@@ -591,6 +596,7 @@ export default class DataTypeTableView extends Vue {
variableComponentOrderBy: [],
});
showSort = false;
+ isLoading = false;
showFilter = false;
controlPanels = null;
totalRows = -1;
@@ -604,7 +610,6 @@ export default class DataTypeTableView extends Vue {
isOpen = 0;
variableSearch = [];
referenceLineCheckers = [];
- displayDataTypes = false;
searchValueReference=[];
getRefType(checkerRow) {
@@ -707,6 +712,7 @@ export default class DataTypeTableView extends Vue {
}
async reInit() {
+ this.isLoading = true;
this.params = new DownloadDatasetQuery({
application: null,
applicationNameOrId: this.applicationName,
@@ -722,6 +728,7 @@ export default class DataTypeTableView extends Vue {
}
async init() {
+ this.isLoading = true;
this.application = await this.applicationService.getApplication(this.applicationName, [
"CONFIGURATION",
"DATATYPE",
@@ -745,8 +752,8 @@ export default class DataTypeTableView extends Vue {
this.dataTypeId,
this.params
);
- if (dataTypes.rows.length === 0) {
- this.displayDataTypes = true;
+ if (this.params.variableComponentFilters.length !== 0 || this.params.variableComponentOrderBy.length !== 0 ) {
+ this.isLoading = true;
}
this.referenceLineCheckers = dataTypes.checkedFormatVariableComponents.ReferenceLineChecker;
@@ -800,6 +807,7 @@ export default class DataTypeTableView extends Vue {
columnIndex++;
});
});
+ this.isLoading = false;
}
getRefsLinkedToId(row, component) {
@@ -901,7 +909,6 @@ export default class DataTypeTableView extends Vue {
let { key, variable, component } = variableComponent;
let value = this.search[key];
this.searchValueReference = [];
- console.log(value)
this.valueReference =
Object.keys(
this.application.dataTypes[this.dataTypeId].variables[variable].components[component].checker.referenceLineChecker.referenceValues
@@ -911,7 +918,6 @@ export default class DataTypeTableView extends Vue {
this.searchValueReference.push(this.valueReference[i])
}
}
- console.log(this.searchValueReference)
}
addVariableSearch(variableComponent) {
@@ -956,6 +962,7 @@ export default class DataTypeTableView extends Vue {
}
addSearch() {
+ this.isLoading = true;
this.params.variableComponentFilters = [];
for (var i = 0; i < this.variableSearch.length; i++) {
if (this.variableSearch[i]) {
--
GitLab
From 8316b1cc295435dd7cc67c8de5fb3b0c616a42d0 Mon Sep 17 00:00:00 2001
From: lucile varloteaux <lucile.varloteaux@inrae.fr>
Date: Tue, 9 May 2023 14:53:51 +0200
Subject: [PATCH 03/18] =?UTF-8?q?r=C3=A9paration=20btn=20t=C3=A9l=C3=A9cha?=
=?UTF-8?q?rger?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
ui/src/views/datatype/DataTypeTableView.vue | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/ui/src/views/datatype/DataTypeTableView.vue b/ui/src/views/datatype/DataTypeTableView.vue
index c7074963d..134417c60 100644
--- a/ui/src/views/datatype/DataTypeTableView.vue
+++ b/ui/src/views/datatype/DataTypeTableView.vue
@@ -989,7 +989,7 @@ export default class DataTypeTableView extends Vue {
};
let csv = await this.dataService.getDataTypesCsv(this.applicationName, this.dataTypeId, param);
var hiddenElement = document.createElement("a");
- hiddenElement.href = "data:text/csv;charset=utf-8," + encodeURI(csv);
+ hiddenElement.href = csv.href;
//provide the name for the CSV file to be downloaded
hiddenElement.download = "export.csv";
--
GitLab
From dfda59eb0b08f0c91d743294c2bb566c582b8df3 Mon Sep 17 00:00:00 2001
From: lucile varloteaux <lucile.varloteaux@inrae.fr>
Date: Tue, 9 May 2023 18:34:16 +0200
Subject: [PATCH 04/18] finilisation filtre dataTypes
---
ui/src/views/datatype/DataTypeTableView.vue | 34 ++++++++++++++++-----
1 file changed, 26 insertions(+), 8 deletions(-)
diff --git a/ui/src/views/datatype/DataTypeTableView.vue b/ui/src/views/datatype/DataTypeTableView.vue
index 134417c60..e4f8e1ab7 100644
--- a/ui/src/views/datatype/DataTypeTableView.vue
+++ b/ui/src/views/datatype/DataTypeTableView.vue
@@ -320,13 +320,15 @@
<b-autocomplete
v-model="search[component.variable + '_' + component.component]"
:data="searchValueReference"
- field="localName"
:placeholder="$t('dataTypeAuthorizations.search')"
class="is-primary"
icon="search"
type="search"
+ open-on-focus
+ @focus="addVariableSearch(component)"
@click.native="addVariableSearch(component)"
@keyup.native="recalculate(component)"
+ @input="addVariableSearch(component)"
>
</b-autocomplete>
</b-field>
@@ -598,7 +600,6 @@ export default class DataTypeTableView extends Vue {
showSort = false;
isLoading = false;
showFilter = false;
- controlPanels = null;
totalRows = -1;
currentPage = 1;
variableComponentsListToSort = [];
@@ -611,6 +612,7 @@ export default class DataTypeTableView extends Vue {
variableSearch = [];
referenceLineCheckers = [];
searchValueReference=[];
+ selected = null;
getRefType(checkerRow) {
if (checkerRow?.configuration === null) {
@@ -913,10 +915,12 @@ export default class DataTypeTableView extends Vue {
Object.keys(
this.application.dataTypes[this.dataTypeId].variables[variable].components[component].checker.referenceLineChecker.referenceValues
);
- for (let i = 0; i<this.valueReference.length; i++) {
- if (this.valueReference[i].toString().indexOf(value) !==-1) {
- this.searchValueReference.push(this.valueReference[i])
- }
+ if (value !== undefined) {
+ this.searchValueReference = this.valueReference.filter((option) => {
+ return option.toString().indexOf(value) >= 0;
+ });
+ } else {
+ this.searchValueReference = this.valueReference;
}
}
@@ -924,6 +928,9 @@ export default class DataTypeTableView extends Vue {
let { key, variable, component, type, format } = variableComponent;
let isRegExp = this.params.variableComponentFilters.isRegex;
let value = this.search[key];
+ if (type === 'reference') {
+ this.recalculate(variableComponent)
+ }
this.params.variableComponentFilters = this.params.variableComponentFilters.filter(
(c) =>
c.variableComponentKey.variable !== variable ||
@@ -956,9 +963,20 @@ export default class DataTypeTableView extends Vue {
});
}
if (search) {
- this.variableSearch.push(search);
+ if (this.variableSearch.length === 0) {
+ this.variableSearch.push(search);
+ } else {
+ let count = 0;
+ for (let i=0; i<this.variableSearch.length; i++) {
+ if (search.filter === this.variableSearch[i].filter){
+ count ++;
+ }
+ }
+ if (count === 0) {
+ this.variableSearch.push(search);
+ }
+ }
}
- this.initDatatype();
}
addSearch() {
--
GitLab
From a96dc9e4f19ec8034c12e88c1042deef886a3473 Mon Sep 17 00:00:00 2001
From: lucile varloteaux <lucile.varloteaux@inrae.fr>
Date: Wed, 10 May 2023 15:08:35 +0200
Subject: [PATCH 05/18] =?UTF-8?q?filtre=20avec=20autocompletation=20dans?=
=?UTF-8?q?=20reference=20(plante=20si=20trop=20d'info=20en=20front=20?=
=?UTF-8?q?=C3=A0=20filtrer)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../views/references/ReferenceTableView.vue | 78 +++++++------------
1 file changed, 30 insertions(+), 48 deletions(-)
diff --git a/ui/src/views/references/ReferenceTableView.vue b/ui/src/views/references/ReferenceTableView.vue
index 10b040727..9ad0b543f 100644
--- a/ui/src/views/references/ReferenceTableView.vue
+++ b/ui/src/views/references/ReferenceTableView.vue
@@ -51,13 +51,17 @@
sortable
>
<template #searchable="props">
- <b-input
+ <b-autocomplete
v-if="column.id !== '#'"
v-model="props.filters[props.column.field]"
- :placeholder="$t('dataTypeAuthorizations.search')"
+ :data="selectedReferences"
+ field="localName"
icon="search"
size="is-normal"
- />
+ :placeholder="$t('dataTypeAuthorizations.search')"
+ @keyup.native="recalculate(column,props.filters[props.column.field])"
+ >
+ </b-autocomplete>
</template>
<template v-slot="props">
<ReferencesDynamicLink
@@ -82,11 +86,7 @@
v-else-if="column.id !== '#'"
:application="application"
:reference-type="column.linkedTo"
- :value="
- info(column.id) || multiplicity(column.id, props.row[column.id])
- ? ''
- : props.row[column.id]
- "
+ :value="props.row[column.id]"
:loaded-references-by-key="{}"
:column-title="column.title"
></ReferencesLink>
@@ -133,8 +133,6 @@ import ReferencesLink from "@/components/references/ReferencesLink.vue";
import ReferencesManyLink from "@/components/references/ReferencesManyLink.vue";
import ReferencesDynamicLink from "@/components/references/ReferencesDynamicLink.vue";
import { HttpStatusCodes } from "@/utils/HttpUtils";
-import { VariableComponentFilters } from "@/model/application/VariableComponentFilters";
-import { IntervalValues } from "@/model/application/IntervalValues";
@Component({
components: { PageView, SubMenu, ReferencesLink, ReferencesManyLink, ReferencesDynamicLink },
@@ -163,7 +161,7 @@ export default class ReferenceTableView extends Vue {
columns = [];
referenceValues = [];
tableValues = [];
- checkedRows = [];
+ selectedReferences = [];
// show modal and cards
isCardModalActive = false;
@@ -173,47 +171,31 @@ export default class ReferenceTableView extends Vue {
display = "__display_" + window.localStorage.lang;
loadedReferences = {};
currentReferenceDetail = { active: false };
- columnSearch = [];
- addVariableSearch(columnName) {
- let { key, column, type, format } = columnName;
- let value = this.search[key];
- this.params.variableComponentFilters = this.params.variableComponentFilters.filter(
- (c) => c.column !== column
- );
- let search = null;
- if (value && value.length > 0) {
- search = new VariableComponentFilters({
- columnKey: column,
- filter: value,
- type: type,
- format: format,
- });
- }
- if (columnName.intervalValues) {
- search = new VariableComponentFilters({
- columnKey: column,
- type: type,
- format: format,
- intervalValues: columnName.intervalValues,
- ...(search ? new IntervalValues(search) : {}),
- });
- }
- if (search) {
- this.columnSearch.push(search);
- }
- this.init();
- }
+ getUniqueVal(value, index, self) {
+ return self.indexOf(value) === index;
+}
- addSearch() {
- this.params.variableComponentFilters = [];
- for (var i = 0; i < this.variableSearch.length; i++) {
- if (this.variableSearch[i]) {
- this.params.variableComponentFilters.push(this.variableSearch[i]);
+ async recalculate(column, value) {
+ this.selectedReferences = [];
+ let tableValues = [];
+ let listRefValues = await this.referenceService.getReferenceValues(
+ this.applicationName,
+ this.refId,
+ );
+ if(value!== undefined) {
+ for (let i = 0; i < listRefValues.referenceValues.length; i++) {
+ if (listRefValues.referenceValues[i].values[column.title]
+ .indexOf(value.toLowerCase()) >= 0) {
+ this.selectedReferences.push(
+ listRefValues.referenceValues[i].values[column.title]);
+ tableValues.push(listRefValues.referenceValues[i].values);
+ }
}
}
- this.initDatatype();
- this.showFilter = false;
+ this.tableValues = tableValues;
+ this.totalRows = tableValues.length;
+ this.selectedReferences = this.selectedReferences.filter(this.getUniqueVal);
}
askDeletionConfirmation(rowId) {
--
GitLab
From 3507435d42e37a6b25ca91715835a2415e23a649 Mon Sep 17 00:00:00 2001
From: lucile varloteaux <lucile.varloteaux@inrae.fr>
Date: Thu, 11 May 2023 16:43:53 +0200
Subject: [PATCH 06/18] filtre reference mise en forme pour utilisateur
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
TODO :
- btn Télécharger référence filtré
- select multiple pour delete ligne reference
---
ui/src/style/_common.scss | 24 +++++++++--
ui/src/views/datatype/DataTypeTableView.vue | 7 ++--
.../views/references/ReferenceTableView.vue | 40 +++++++++++--------
3 files changed, 48 insertions(+), 23 deletions(-)
diff --git a/ui/src/style/_common.scss b/ui/src/style/_common.scss
index f46e5be36..cdc04adec 100644
--- a/ui/src/style/_common.scss
+++ b/ui/src/style/_common.scss
@@ -20,7 +20,7 @@ body {
}
a {
- color: $info;
+ color: $dark;
}
// affichage icon uniformisé
@@ -41,8 +41,26 @@ a {
.control.has-icons-right .icon.is-right {
top: -2px;
}
-.control.has-icons-left .icon {
- .is-small {
+.b-table .table th {
+ min-width: 200px;
+ .th-wrap .icon {
+ margin-left: 0;
+ }
+}
+.b-table .table td.is-sticky{
+ color: #007F7F;
+ background-color: rgba(255,254,254,0.62);
+}
+.control.has-icons-left {
+ .input{
+ padding-left: 3em;
+ }
+ .icon.is-clickable{
+ color: white;
+ background-color: $primary;
+ border-radius: 5px 0 0 5px;
+ }
+ .icon.is-small {
top: -5px;
}
}
diff --git a/ui/src/views/datatype/DataTypeTableView.vue b/ui/src/views/datatype/DataTypeTableView.vue
index e4f8e1ab7..0173fd909 100644
--- a/ui/src/views/datatype/DataTypeTableView.vue
+++ b/ui/src/views/datatype/DataTypeTableView.vue
@@ -325,10 +325,9 @@
icon="search"
type="search"
open-on-focus
- @focus="addVariableSearch(component)"
@click.native="addVariableSearch(component)"
@keyup.native="recalculate(component)"
- @input="addVariableSearch(component)"
+ @icon-right-click="addVariableSearch(component)"
>
</b-autocomplete>
</b-field>
@@ -340,7 +339,9 @@
class="is-primary"
icon="search"
type="search"
- @blur="addVariableSearch(component)"
+ @click.native="addVariableSearch(component)"
+ @keyup.native="addVariableSearch(component)"
+ @icon-right-click="addVariableSearch(component)"
></b-input>
</b-field>
</b-field>
diff --git a/ui/src/views/references/ReferenceTableView.vue b/ui/src/views/references/ReferenceTableView.vue
index 9ad0b543f..dcc32e4a3 100644
--- a/ui/src/views/references/ReferenceTableView.vue
+++ b/ui/src/views/references/ReferenceTableView.vue
@@ -21,6 +21,8 @@
:striped="true"
height="72.5vh"
paginated
+ focusable
+ :selected.sync="selected"
style="padding-bottom: 20px; position: relative; z-index: 1"
>
<template #pagination>
@@ -51,17 +53,17 @@
sortable
>
<template #searchable="props">
- <b-autocomplete
+ <b-input
v-if="column.id !== '#'"
v-model="props.filters[props.column.field]"
- :data="selectedReferences"
- field="localName"
icon="search"
size="is-normal"
+ type="search"
+ icon-clickable
+ @icon-click="recalculate(column,props.filters[props.column.field])"
:placeholder="$t('dataTypeAuthorizations.search')"
- @keyup.native="recalculate(column,props.filters[props.column.field])"
>
- </b-autocomplete>
+ </b-input>
</template>
<template v-slot="props">
<ReferencesDynamicLink
@@ -166,36 +168,40 @@ export default class ReferenceTableView extends Vue {
// show modal and cards
isCardModalActive = false;
modalArrayObj = [];
- modalTblObj = [];
+ selected = [];
referencesDynamic;
display = "__display_" + window.localStorage.lang;
loadedReferences = {};
currentReferenceDetail = { active: false };
- getUniqueVal(value, index, self) {
- return self.indexOf(value) === index;
-}
-
async recalculate(column, value) {
+ this.isLoading = true;
this.selectedReferences = [];
let tableValues = [];
- let listRefValues = await this.referenceService.getReferenceValues(
- this.applicationName,
- this.refId,
- );
if(value!== undefined) {
+ let listRefValues = await this.referenceService.getReferenceValues(
+ this.applicationName,
+ this.refId,
+ );
for (let i = 0; i < listRefValues.referenceValues.length; i++) {
if (listRefValues.referenceValues[i].values[column.title]
.indexOf(value.toLowerCase()) >= 0) {
- this.selectedReferences.push(
- listRefValues.referenceValues[i].values[column.title]);
tableValues.push(listRefValues.referenceValues[i].values);
}
}
+ } else {
+ tableValues = await this.referenceService.getReferenceValues(
+ this.applicationName,
+ this.refId,
+ {
+ _offset_: this.params.offset,
+ _limit_: this.params.limit,
+ }
+ );
}
this.tableValues = tableValues;
this.totalRows = tableValues.length;
- this.selectedReferences = this.selectedReferences.filter(this.getUniqueVal);
+ this.isLoading = false;
}
askDeletionConfirmation(rowId) {
--
GitLab
From 277f6b56475b4d854df102ac55f3f6a9013fa26e Mon Sep 17 00:00:00 2001
From: lucile varloteaux <lucile.varloteaux@inrae.fr>
Date: Fri, 12 May 2023 09:59:49 +0200
Subject: [PATCH 07/18] =?UTF-8?q?ajout=20tooltip=20btn=20filtre=20referenc?=
=?UTF-8?q?e=20TODO=20:=20-=20btn=20t=C3=A9l=C3=A9charger=20r=C3=A9f=C3=A9?=
=?UTF-8?q?rence=20filtr=C3=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
ui/src/locales/en.json | 1 +
ui/src/locales/fr.json | 1 +
ui/src/style/_common.scss | 4 -
ui/src/style/_variables.scss | 4 +-
.../views/references/ReferenceTableView.vue | 270 +++++++++---------
5 files changed, 142 insertions(+), 138 deletions(-)
diff --git a/ui/src/locales/en.json b/ui/src/locales/en.json
index 464dc74ab..23b034822 100644
--- a/ui/src/locales/en.json
+++ b/ui/src/locales/en.json
@@ -458,6 +458,7 @@
"localization": "Localisation",
"showMore": "Show more...",
"search": "Search...",
+ "filter": "Apply this search on all references",
"save": "Save change",
"add-application-name": "Add an app",
"all-autorisation": "Check all the rights boxes on the line "
diff --git a/ui/src/locales/fr.json b/ui/src/locales/fr.json
index 26aef0a37..a13622620 100644
--- a/ui/src/locales/fr.json
+++ b/ui/src/locales/fr.json
@@ -454,6 +454,7 @@
"select-authorization": "Veuillez d'abord sélectionner le droit.",
"warnning-chil-not-null": "Des limitations sont en cours sur des enfants, elles seront remplacées.",
"search": "Recherche...",
+ "filter": "Appliquer cet recherche sur tous le référentiels",
"showMore": "Voir plus...",
"save": "Enregister modification",
"add-application-name": "Ajouter une application",
diff --git a/ui/src/style/_common.scss b/ui/src/style/_common.scss
index cdc04adec..60216c0b6 100644
--- a/ui/src/style/_common.scss
+++ b/ui/src/style/_common.scss
@@ -47,10 +47,6 @@ a {
margin-left: 0;
}
}
-.b-table .table td.is-sticky{
- color: #007F7F;
- background-color: rgba(255,254,254,0.62);
-}
.control.has-icons-left {
.input{
padding-left: 3em;
diff --git a/ui/src/style/_variables.scss b/ui/src/style/_variables.scss
index 166c28c0b..57d8d533c 100644
--- a/ui/src/style/_variables.scss
+++ b/ui/src/style/_variables.scss
@@ -6,8 +6,8 @@ $font-family: "LiberationSans", Helvetica, Arial, sans-serif;
$text-default-color: #2c3e50;
$light-text: rgb(230, 230, 230);
-$primary-slightly-transparent: rgba(0, 163, 166, 0.8);
-$info-transparent: rgba(78, 198, 194, 0.3);
+$primary-slightly-transparent: rgba(0, 157, 157, 0.8);
+$info-transparent: rgba(20, 155, 170, 0.3);
// PageView
$container-padding-hor: 3rem;
diff --git a/ui/src/views/references/ReferenceTableView.vue b/ui/src/views/references/ReferenceTableView.vue
index dcc32e4a3..7483fd8a3 100644
--- a/ui/src/views/references/ReferenceTableView.vue
+++ b/ui/src/views/references/ReferenceTableView.vue
@@ -1,114 +1,120 @@
<template>
<PageView class="with-submenu">
<SubMenu
- :aria-label="$t('menu.aria-sub-menu')"
- :paths="subMenuPaths"
- :root="application.localName"
- role="navigation"
+ :aria-label="$t('menu.aria-sub-menu')"
+ :paths="subMenuPaths"
+ :root="application.localName"
+ role="navigation"
/>
<h1 class="title main-title">
- {{ $t("titles.references-data", { refName: application.localRefName }) }}
+ {{ $t("titles.references-data", {refName: application.localRefName}) }}
</h1>
<div v-if="reference && columns">
<b-table
- :current-page="currentPage"
- :data="tableValues"
- :is-focusable="true"
- :is-hoverable="true"
- :loading="isLoading"
- :per-page="params.limit"
- :sticky-header="true"
- :striped="true"
- height="72.5vh"
- paginated
- focusable
- :selected.sync="selected"
- style="padding-bottom: 20px; position: relative; z-index: 1"
+ :current-page="currentPage"
+ :data="tableValues"
+ :is-focusable="true"
+ :is-hoverable="true"
+ :loading="isLoading"
+ :per-page="params.limit"
+ :sticky-header="true"
+ :striped="true"
+ height="72.5vh"
+ paginated
+ style="padding-bottom: 20px; position: relative; z-index: 1"
>
<template #pagination>
<b-pagination
- v-model="currentPage"
- :aria-current-label="$t('menu.aria-curent-page')"
- :aria-label="$t('menu.aria-pagination')"
- :aria-next-label="$t('menu.aria-next-page')"
- :aria-previous-label="$t('menu.aria-previous-page')"
- :current-page.sync="currentPage"
- :per-page="params.limit"
- :rounded="true"
- :total="totalRows"
- order="is-centered"
- range-after="3"
- range-before="3"
- role="navigation"
- @change="changePage"
+ v-model="currentPage"
+ :aria-current-label="$t('menu.aria-curent-page')"
+ :aria-label="$t('menu.aria-pagination')"
+ :aria-next-label="$t('menu.aria-next-page')"
+ :aria-previous-label="$t('menu.aria-previous-page')"
+ :current-page.sync="currentPage"
+ :per-page="params.limit"
+ :rounded="true"
+ :total="totalRows"
+ order="is-centered"
+ range-after="3"
+ range-before="3"
+ role="navigation"
+ @change="changePage"
/>
</template>
<b-table-column
- searchable
- v-for="column in columns"
- :key="column.id"
- :field="column.id"
- :label="column.title"
- :sticky="column.key"
- sortable
+ v-for="column in columns"
+ :key="column.id"
+ :field="column.id"
+ :label="column.title"
+ :sticky="column.key"
+ searchable
+ sortable
>
<template #searchable="props">
- <b-input
- v-if="column.id !== '#'"
- v-model="props.filters[props.column.field]"
- icon="search"
- size="is-normal"
- type="search"
- icon-clickable
- @icon-click="recalculate(column,props.filters[props.column.field])"
- :placeholder="$t('dataTypeAuthorizations.search')"
- >
- </b-input>
+ <b-field>
+ <b-input
+ v-if="column.id !== '#'"
+ v-model="props.filters[props.column.field]"
+ :placeholder="$t('dataTypeAuthorizations.search')"
+ type="search"
+ >
+ </b-input>
+ <b-tooltip
+ v-if="column.id !== '#'"
+ :label="$t('referencesAuthorizations.filter')"
+ position="is-bottom">
+ <b-button
+ icon-left="search"
+ outlined
+ type="is-primary"
+ @click="recalculate(column,props.filters[props.column.field])"/>
+ </b-tooltip>
+ </b-field>
</template>
<template v-slot="props">
<ReferencesDynamicLink
- v-if="info(column.id)"
- :info="info(column.id)"
- :info-values="props.row[column.id]"
- :application="application"
- :reference-type="column.reference"
- :loaded-references-by-key="{}"
- :column-id="column.id"
+ v-if="info(column.id)"
+ :application="application"
+ :column-id="column.id"
+ :info="info(column.id)"
+ :info-values="props.row[column.id]"
+ :loaded-references-by-key="{}"
+ :reference-type="column.reference"
></ReferencesDynamicLink>
<ReferencesManyLink
- v-else-if="multiplicity(column.id, props.row[column.id])"
- :multiplicity="multiplicity(column.id, props.row[column.id])"
- :info-values="props.row[column.id]"
- :application="application"
- :reference-type="column.linkedTo"
- :loaded-references-by-key="{}"
- :column-id="column.id"
+ v-else-if="multiplicity(column.id, props.row[column.id])"
+ :application="application"
+ :column-id="column.id"
+ :info-values="props.row[column.id]"
+ :loaded-references-by-key="{}"
+ :multiplicity="multiplicity(column.id, props.row[column.id])"
+ :reference-type="column.linkedTo"
></ReferencesManyLink>
<ReferencesLink
- v-else-if="column.id !== '#'"
- :application="application"
- :reference-type="column.linkedTo"
- :value="props.row[column.id]"
- :loaded-references-by-key="{}"
- :column-title="column.title"
+ v-else-if="column.id !== '#'"
+ :application="application"
+ :column-title="column.title"
+ :loaded-references-by-key="{}"
+ :reference-type="column.linkedTo"
+ :value="props.row[column.id]"
></ReferencesLink>
<div v-else class="columns">
<a
- @click="
+ @click="
askDeletionConfirmation(
referenceValues[tableValues.indexOf(props.row)].naturalKey
)
"
>
- <b-icon icon="times-circle" class="clickable" size="is-small" type="is-danger">
+ <b-icon class="clickable" icon="times-circle" size="is-small" type="is-danger">
</b-icon>
</a>
<b-collapse :open="false" class="column">
<template #trigger>
<b-button
- :label="'' + (tableValues.indexOf(props.row) + 1 + params.offset)"
- aria-controls="contentIdForA11y1"
- type="is-small"
+ :label="'' + (tableValues.indexOf(props.row) + 1 + params.offset)"
+ aria-controls="contentIdForA11y1"
+ type="is-small"
/>
</template>
{{ referenceValues[tableValues.indexOf(props.row)].naturalKey }}
@@ -122,22 +128,22 @@
</template>
<script>
-import SubMenu, { SubMenuPath } from "@/components/common/SubMenu.vue";
-import { ApplicationResult } from "@/model/ApplicationResult";
-import { AlertService } from "@/services/AlertService";
-import { ApplicationService } from "@/services/rest/ApplicationService";
-import { ReferenceService } from "@/services/rest/ReferenceService";
-import { Component, Prop, Vue } from "vue-property-decorator";
+import SubMenu, {SubMenuPath} from "@/components/common/SubMenu.vue";
+import {ApplicationResult} from "@/model/ApplicationResult";
+import {AlertService} from "@/services/AlertService";
+import {ApplicationService} from "@/services/rest/ApplicationService";
+import {ReferenceService} from "@/services/rest/ReferenceService";
+import {Component, Prop, Vue} from "vue-property-decorator";
import PageView from "../common/PageView.vue";
-import { InternationalisationService } from "@/services/InternationalisationService";
-import { DownloadDatasetQuery } from "@/model/application/DownloadDatasetQuery";
+import {InternationalisationService} from "@/services/InternationalisationService";
+import {DownloadDatasetQuery} from "@/model/application/DownloadDatasetQuery";
import ReferencesLink from "@/components/references/ReferencesLink.vue";
import ReferencesManyLink from "@/components/references/ReferencesManyLink.vue";
import ReferencesDynamicLink from "@/components/references/ReferencesDynamicLink.vue";
-import { HttpStatusCodes } from "@/utils/HttpUtils";
+import {HttpStatusCodes} from "@/utils/HttpUtils";
@Component({
- components: { PageView, SubMenu, ReferencesLink, ReferencesManyLink, ReferencesDynamicLink },
+ components: {PageView, SubMenu, ReferencesLink, ReferencesManyLink, ReferencesDynamicLink},
})
export default class ReferenceTableView extends Vue {
@Prop() applicationName;
@@ -172,13 +178,13 @@ export default class ReferenceTableView extends Vue {
referencesDynamic;
display = "__display_" + window.localStorage.lang;
loadedReferences = {};
- currentReferenceDetail = { active: false };
+ currentReferenceDetail = {active: false};
async recalculate(column, value) {
this.isLoading = true;
this.selectedReferences = [];
let tableValues = [];
- if(value!== undefined) {
+ if (value !== undefined) {
let listRefValues = await this.referenceService.getReferenceValues(
this.applicationName,
this.refId,
@@ -206,12 +212,12 @@ export default class ReferenceTableView extends Vue {
askDeletionConfirmation(rowId) {
this.alertService.dialog(
- this.$t("alert.warning"),
- this.$t("alert.reference-deletion-msg", { label: rowId }),
- this.$t("alert.delete"),
- "is-danger",
- this.$t("alert.cancel"),
- () => this.deleteRowReference(rowId)
+ this.$t("alert.warning"),
+ this.$t("alert.reference-deletion-msg", {label: rowId}),
+ this.$t("alert.delete"),
+ "is-danger",
+ this.$t("alert.cancel"),
+ () => this.deleteRowReference(rowId)
);
}
@@ -219,9 +225,9 @@ export default class ReferenceTableView extends Vue {
console.log(rowId);
try {
await this.referenceService.deleteReferenceValuesByKey(
- this.applicationName,
- this.reference.label,
- rowId
+ this.applicationName,
+ this.reference.label,
+ rowId
);
this.alertService.toastSuccess(this.$t("alert.reference-updated"));
} catch (errors) {
@@ -249,12 +255,12 @@ export default class ReferenceTableView extends Vue {
async changePage(value) {
this.params.offset = (value - 1) * this.params.limit;
const references = await this.referenceService.getReferenceValues(
- this.applicationName,
- this.refId,
- {
- _offset_: this.params.offset,
- _limit_: this.params.limit,
- }
+ this.applicationName,
+ this.refId,
+ {
+ _offset_: this.params.offset,
+ _limit_: this.params.limit,
+ }
);
if (references) {
this.referenceValues = references.referenceValues;
@@ -278,9 +284,9 @@ export default class ReferenceTableView extends Vue {
let showModal = Object.entries(this.tableValues[i]).filter((a) => a[1]);
for (let j = 0; j < showModal.length; j++) {
if (
- showModal[j][0] === column &&
- showModal[j][1] === arrayValues &&
- Array.isArray(showModal[j][1])
+ showModal[j][0] === column &&
+ showModal[j][1] === arrayValues &&
+ Array.isArray(showModal[j][1])
) {
return true;
}
@@ -304,19 +310,19 @@ export default class ReferenceTableView extends Vue {
this.application = {
...this.application,
localName: this.internationalisationService.mergeInternationalization(this.application)
- .localName,
+ .localName,
localRefName: this.internationalisationService.localeReferenceName(
- this.application.references[this.refId],
- this.application
+ this.application.references[this.refId],
+ this.application
),
};
const references = await this.referenceService.getReferenceValues(
- this.applicationName,
- this.refId,
- {
- _offset_: this.params.offset,
- _limit_: this.params.limit,
- }
+ this.applicationName,
+ this.refId,
+ {
+ _offset_: this.params.offset,
+ _limit_: this.params.limit,
+ }
);
if (references) {
this.referenceValues = references.referenceValues;
@@ -338,25 +344,25 @@ export default class ReferenceTableView extends Vue {
}
this.reference = Object.values(this.application.references).find(
- (ref) => ref.id === this.refId
+ (ref) => ref.id === this.refId
);
this.subMenuPaths = [
new SubMenuPath(
- this.$t("referencesManagement.references").toLowerCase(),
- () => this.$router.push(`/applications/${this.applicationName}/references`),
- () => this.$router.push(`/applications`)
+ this.$t("referencesManagement.references").toLowerCase(),
+ () => this.$router.push(`/applications/${this.applicationName}/references`),
+ () => this.$router.push(`/applications`)
),
new SubMenuPath(
- this.reference.label,
- () => this.$router.push(`/applications/${this.applicationName}/references/${this.refId}`),
- () => this.$router.push(`/applications/${this.applicationName}/references`)
+ this.reference.label,
+ () => this.$router.push(`/applications/${this.applicationName}/references/${this.refId}`),
+ () => this.$router.push(`/applications/${this.applicationName}/references`)
),
];
if (this.reference && this.reference.columns) {
this.columns = [
- { id: "#", title: "#id", key: false, linkedTo: null },
+ {id: "#", title: "#id", key: false, linkedTo: null},
...Object.values(this.reference.columns).sort((c1, c2) => {
if (c1.title < c2.title) {
return -1;
@@ -383,22 +389,22 @@ export default class ReferenceTableView extends Vue {
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,
- {
- _offset_: this.offset,
- _limit_: this.limit,
- }
+ this.applicationName,
+ dynamicColumns[i][1].reference,
+ {
+ _offset_: this.offset,
+ _limit_: this.limit,
+ }
);
}
let interNameColumn = Object.entries(this.application.internationalization.references).filter(
- (a) => a[1]
+ (a) => a[1]
);
for (let i = 0; i < this.columns.length; i++) {
for (let j = 0; j < interNameColumn.length; j++) {
if (interNameColumn[j][0] === this.reference.id) {
let listInterHeaderColumn = Object.entries(
- interNameColumn[j][1].internationalizedDynamicColumns
+ interNameColumn[j][1].internationalizedDynamicColumns
).filter((a) => a[1]);
for (let g = 0; g < listInterHeaderColumn.length; g++) {
if (this.columns[i].id === listInterHeaderColumn[g][0]) {
@@ -414,8 +420,8 @@ export default class ReferenceTableView extends Vue {
}
if (this.application.references[this.columns[i].id]) {
this.referencesDynamic = await this.referenceService.getReferenceValues(
- this.applicationName,
- this.columns[i].id
+ this.applicationName,
+ this.columns[i].id
);
}
}
--
GitLab
From 9dfe180e303a7c5bc4d7cc94c62d3067ec472851 Mon Sep 17 00:00:00 2001
From: lucile varloteaux <lucile.varloteaux@inrae.fr>
Date: Fri, 12 May 2023 11:45:46 +0200
Subject: [PATCH 08/18] ajout border table
---
ui/src/style/_common.scss | 16 ++++++++++++----
1 file changed, 12 insertions(+), 4 deletions(-)
diff --git a/ui/src/style/_common.scss b/ui/src/style/_common.scss
index 60216c0b6..7e0ad1020 100644
--- a/ui/src/style/_common.scss
+++ b/ui/src/style/_common.scss
@@ -41,10 +41,18 @@ a {
.control.has-icons-right .icon.is-right {
top: -2px;
}
-.b-table .table th {
- min-width: 200px;
- .th-wrap .icon {
- margin-left: 0;
+.b-table .table {
+ border: 1px solid rgb(200, 200, 200);
+ th {
+ border: 1px solid rgb(200, 200, 200);
+ min-width: 200px;
+
+ .th-wrap .icon {
+ margin-left: 0;
+ }
+ }
+ td {
+ border: 1px solid rgb(200, 200, 200);
}
}
.control.has-icons-left {
--
GitLab
From 9db3c6ac3b801065ff4ca2dcdedbb8b130e7790b Mon Sep 17 00:00:00 2001
From: lucile varloteaux <lucile.varloteaux@inrae.fr>
Date: Fri, 12 May 2023 17:02:42 +0200
Subject: [PATCH 09/18] mise en place de la refactorisation de loading et
changement d'icon TODO : - appeler le components dans toute les pages
---
ui/src/components/common/CollapsibleTree.vue | 166 ++++++-----
ui/src/components/common/LoadingAnimate.vue | 26 ++
.../components/references/ReferencesLink.vue | 11 +-
ui/src/main.js | 4 +-
ui/src/style/_common.scss | 267 +++++++++---------
ui/src/style/_variables.scss | 1 +
.../AdditionalFileInfosView.vue | 7 +-
.../application/ApplicationCreationView.vue | 13 +-
ui/src/views/application/ApplicationsView.vue | 24 +-
...ataTypeAuthorizationsRightsRequestView.vue | 7 +-
.../ReferencesAuthorizationInfoView.vue | 3 -
ui/src/views/datatype/DataTypeTableView.vue | 67 +----
.../datatype/DataTypesRepositoryView.vue | 15 +-
.../views/references/ReferenceTableView.vue | 10 +
14 files changed, 318 insertions(+), 303 deletions(-)
create mode 100644 ui/src/components/common/LoadingAnimate.vue
diff --git a/ui/src/components/common/CollapsibleTree.vue b/ui/src/components/common/CollapsibleTree.vue
index c17f9a613..5676812d6 100644
--- a/ui/src/components/common/CollapsibleTree.vue
+++ b/ui/src/components/common/CollapsibleTree.vue
@@ -1,35 +1,35 @@
<template>
<div>
<div
- :class="`columns CollapsibleTree-header ${
+ :class="`columns CollapsibleTree-header ${
option.children && option.children.length !== 0 ? 'clickable' : ''
} ${option.children && option.children.length !== 0 && displayChildren ? '' : 'mb-1'}`"
- :style="`margin:0px;`"
- @click="displayChildren = !displayChildren"
- @keypress.enter="displayChildren = !displayChildren"
+ :style="`margin:0px;`"
+ @click="displayChildren = !displayChildren"
+ @keypress.enter="displayChildren = !displayChildren"
>
<div class="CollapsibleTree-header-infos column is-two-thirds">
<div
- :style="`transform:translate(${level * 50}px);`"
- class="CollapsibleTree-header-infos column is-narrow"
+ :style="`transform:translate(${level * 50}px);`"
+ class="CollapsibleTree-header-infos column is-narrow"
>
<slot name="secondaryMenu" v-bind:onClickLabelCb="onClickLabelCb" v-bind:option="option">
<div
- :class="onClickLabelCb ? 'link' : ''"
- tabindex="0"
- @click="(event) => onClickLabelCb && onClickLabelCb(event, option.label)"
- @keypress.enter="(event) => onClickLabelCb && onClickLabelCb(event, option.label)"
+ :class="onClickLabelCb ? 'link' : ''"
+ tabindex="0"
+ @click="(event) => onClickLabelCb && onClickLabelCb(event, option.label)"
+ @keypress.enter="(event) => onClickLabelCb && onClickLabelCb(event, option.label)"
>
<b-tooltip
- :label="$t('dataTypesManagement.tooltip_show_secondary_menu')"
- type="is-primary is-light"
+ :label="$t('dataTypesManagement.tooltip_show_secondary_menu')"
+ type="is-primary is-light"
>
<b-button
- class="is-small"
- outlined
- style="margin: 10px"
- tabindex="0"
- type="is-primary"
+ class="is-small"
+ outlined
+ style="margin: 10px"
+ tabindex="0"
+ type="is-primary"
>
<b-icon icon="ellipsis-h"></b-icon>
</b-button>
@@ -38,10 +38,10 @@
</slot>
<slot name="openSubMenu" v-bind:displayChildren="displayChildren">
<FontAwesomeIcon
- v-if="option.children && option.children.length !== 0"
- :icon="displayChildren ? 'caret-down' : 'caret-right'"
- class="clickable mr-3"
- tabindex="0"
+ v-if="option.children && option.children.length !== 0"
+ :icon="displayChildren ? 'caret-down' : 'caret-right'"
+ class="clickable mr-3"
+ tabindex="0"
/>
</slot>
<slot name="label" v-bind:option="option">
@@ -63,18 +63,18 @@
</slot>
</div>
<slot
- name="synthesisDetail"
- v-bind:lineCount="lineCount"
- v-bind:onClickLabelSynthesisDetailCb="onClickLabelSynthesisDetailCb"
- v-bind:option="option"
+ name="synthesisDetail"
+ v-bind:lineCount="lineCount"
+ v-bind:onClickLabelSynthesisDetailCb="onClickLabelSynthesisDetailCb"
+ v-bind:option="option"
>
<div
- :class="
+ :class="
option.synthesisMinMax && onClickLabelSynthesisDetailCb
? 'tile synthesis-details link column is-four-fifths'
: 'tile synthesis-details column is-full'
"
- @click="
+ @click="
(event) =>
option.synthesisMinMax &&
onClickLabelSynthesisDetailCb &&
@@ -82,8 +82,8 @@
"
>
<span
- v-if="option.synthesisMinMax"
- class="synthesis-infos has-text-info-dark column is-full"
+ v-if="option.synthesisMinMax"
+ class="synthesis-infos has-text-info-dark column is-full"
>
<b-field v-show="false">
{{
@@ -92,16 +92,14 @@
new Date(option.synthesisMinMax[1]).toLocaleDateString("fr")
}}
</b-field>
- <div v-if="isLoading" class="loader-wrapper">
- <div class="loader is-loading"></div>
- </div>
+ <LoadingAnimate v-if="isLoading" :size="'is-small'"></LoadingAnimate>
<availiblity-chart
- v-else
- :id="option.label"
- :minmax="option.synthesis.minmax"
- :ranges="option.synthesis.ranges"
- :show-dates="false"
- class="tile availiblity-chart"
+ v-else
+ :id="option.label"
+ :minmax="option.synthesis.minmax"
+ :ranges="option.synthesis.ranges"
+ :show-dates="false"
+ class="tile availiblity-chart"
/>
</span>
<span v-else-if="lineCount > 0" class="file-name">
@@ -115,47 +113,45 @@
</div>
<div class="CollapsibleTree-buttons column is-narrow">
<slot
- name="upload"
- v-bind:onUploadCb="onUploadCb"
- v-bind:option="option"
- v-bind:refFile="refFile"
- v-bind:repositoryRedirect="repositoryRedirect"
+ name="upload"
+ v-bind:onUploadCb="onUploadCb"
+ v-bind:option="option"
+ v-bind:refFile="refFile"
+ v-bind:repositoryRedirect="repositoryRedirect"
>
<div
- v-if="onUploadCb"
- :class="'file button is-small' + (option.canUpload ? ' is-info' : 'is-light')"
- :disabled="!option.canUpload"
+ v-if="onUploadCb"
+ :class="'file button is-small' + (option.canUpload ? ' is-info' : 'is-light')"
+ :disabled="!option.canUpload"
>
<b-upload
- v-model="refFile"
- :disabled="!option.canUpload"
- accept=".csv"
- class="file-label ml-1"
- style="padding: 0px"
- @input="() => onUploadCb(option.label, refFile) && showChildren()"
+ v-model="refFile"
+ :disabled="!option.canUpload"
+ accept=".csv"
+ class="file-label ml-1"
+ style="padding: 0px"
+ @input="() => onUploadCb(option.label, refFile) && showChildren()"
>
<span :disabled="!option.canUpload" class="file-cta">
- <div v-if="isUploading && refFile" class="loader-wrapper">
- <div class="loader is-loading"></div>
- </div>
+ <LoadingAnimate v-if="isUploading && refFile" :size="'is-small'"></LoadingAnimate>
<b-icon v-else icon="upload"></b-icon>
</span>
</b-upload>
</div>
<div v-else>
<b-button
- :disabled="!(option.canUpload || option.canPublish || option.canDelete)"
- :type="
+ :disabled="!(option.canUpload || option.canPublish || option.canDelete)"
+ :type="
option.canUpload || option.canPublish || option.canDelete ? 'is-info' : 'is-light'
"
- class="ml-1"
- size="is-small"
- @click="repositoryRedirect(option.label)"
+ class="ml-1"
+ size="is-small"
+ @click="repositoryRedirect(option.label)"
>
<span
- :disabled="!(option.canUpload || option.canPublish || option.canDelete)"
- class="file-cta"
- style="border-color: transparent; background-color: transparent"
+ :disabled="!(option.canUpload || option.canPublish || option.canDelete)"
+ class="file-cta"
+ style="border-color: transparent; background-color: transparent"
>
<b-icon class="file-icon" icon="archive" style="color: white"></b-icon>
</span>
@@ -165,12 +161,12 @@
<slot name="buttons" v-bind:buttons="buttons" v-bind:option="option">
<div v-for="button in buttons" :key="button.id">
<b-button
- :disabled="button.disabled"
- :icon-left="button.iconName"
- :type="button.type"
- class="ml-1"
- size="is-small"
- @click="button.clickCb(option.label)"
+ :disabled="button.disabled"
+ :icon-left="button.iconName"
+ :type="button.type"
+ class="ml-1"
+ size="is-small"
+ @click="button.clickCb(option.label)"
>
{{ button.label }}
</b-button>
@@ -180,31 +176,32 @@
</div>
<slot v-bind:displayChildren="displayChildren" v-bind:option="option">
<CollapsibleTree
- v-for="child in option.children"
- :key="child.id"
- :application-title="applicationTitle"
- :buttons="buttons"
- :class="displayChildren ? '' : 'hide'"
- :level="level + 1"
- :line-count="child.lineCountChild"
- :on-click-label-cb="onClickLabelCb"
- :on-upload-cb="onUploadCb"
- :option="child"
- :radio-name="radioName"
- :with-radios="withRadios"
- @optionChecked="onInnerOptionChecked"
+ v-for="child in option.children"
+ :key="child.id"
+ :application-title="applicationTitle"
+ :buttons="buttons"
+ :class="displayChildren ? '' : 'hide'"
+ :level="level + 1"
+ :line-count="child.lineCountChild"
+ :on-click-label-cb="onClickLabelCb"
+ :on-upload-cb="onUploadCb"
+ :option="child"
+ :radio-name="radioName"
+ :with-radios="withRadios"
+ @optionChecked="onInnerOptionChecked"
/>
</slot>
</div>
</template>
<script>
-import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import {FontAwesomeIcon} from "@fortawesome/vue-fontawesome";
import AvailiblityChart from "../charts/AvailiblityChart.vue";
+import LoadingAnimate from "@/components/common/LoadingAnimate.vue";
export default {
name: "CollapsibleTree",
- components: { FontAwesomeIcon, AvailiblityChart },
+ components: {LoadingAnimate, FontAwesomeIcon, AvailiblityChart},
props: {
applicationName: String,
canUpload: {
@@ -336,6 +333,7 @@ $row-height: 40px;
}
.file-cta {
+ font-size: 1rem;
height: 100%;
border-color: transparent;
}
diff --git a/ui/src/components/common/LoadingAnimate.vue b/ui/src/components/common/LoadingAnimate.vue
new file mode 100644
index 000000000..a324c6f22
--- /dev/null
+++ b/ui/src/components/common/LoadingAnimate.vue
@@ -0,0 +1,26 @@
+<template>
+ <caption class="columns">
+ <div class="column loader-wrapper">
+ <b-icon
+ custom-class="fa-spin"
+ icon="spinner"
+ pack="fas"
+ :size="size">
+ </b-icon>
+ </div>
+ </caption>
+</template>
+
+<script>
+export default {
+ name: "LoadingAnimate",
+ emits: ["changedStatusLoading"],
+ props: {
+ size: String,
+ }
+}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/ui/src/components/references/ReferencesLink.vue b/ui/src/components/references/ReferencesLink.vue
index 705afbc62..ea4dfd796 100644
--- a/ui/src/components/references/ReferencesLink.vue
+++ b/ui/src/components/references/ReferencesLink.vue
@@ -3,7 +3,7 @@
<!-- section pour visualisation un lien de référence -->
<a v-if="referenceType" class="button inTable" @click="openReferenceDetail()">
{{ columnId ? columnId : value }}
- <b-loading v-model="isLoading" :is-full-page="null"></b-loading>
+ <LoadingAnimate v-if="isLoading" :size="'is-small'"></LoadingAnimate>
</a>
<p v-else class="column">{{ value }}</p>
@@ -18,7 +18,11 @@
<div class="card-content">
<div class="content is-align-content-center">
<b-table :data="refValues.data">
- <b-table-column v-for="column in refValues.columns" :key="column.id" v-slot="props">
+ <b-table-column
+ v-for="column in refValues.columns"
+ :key="column.id"
+ v-slot="props"
+ :label="column.label">
<span>
<ReferencesDynamicLink
v-if="!props.row[column.field].length && props.row[column.field].length !== 0"
@@ -66,11 +70,12 @@ import { ReferenceService } from "@/services/rest/ReferenceService";
import { InternationalisationService } from "@/services/InternationalisationService";
import ReferencesDynamicLink from "@/components/references/ReferencesDynamicLink.vue";
import ReferencesManyLink from "@/components/references/ReferencesManyLink.vue";
+import LoadingAnimate from "@/components/common/LoadingAnimate.vue";
export default {
name: "ReferencesLink",
emits: ["changedRefValues"],
- components: { ReferencesManyLink, ReferencesDynamicLink },
+ components: {LoadingAnimate, ReferencesManyLink, ReferencesDynamicLink },
props: {
application: Object,
referenceType: String,
diff --git a/ui/src/main.js b/ui/src/main.js
index ab5a68838..d4a2bffa3 100644
--- a/ui/src/main.js
+++ b/ui/src/main.js
@@ -64,6 +64,7 @@ import {
faUsersCog,
faVial,
faWrench,
+ faSpinner,
} from "@fortawesome/free-solid-svg-icons";
import {
faCalendar as farCalendar,
@@ -157,7 +158,8 @@ library.add(
faEdit,
faInfo,
faQuestion,
- faEllipsisH
+ faEllipsisH,
+ faSpinner
);
Vue.component("vue-fontawesome", FontAwesomeIcon);
diff --git a/ui/src/style/_common.scss b/ui/src/style/_common.scss
index 7e0ad1020..2fc34dae0 100644
--- a/ui/src/style/_common.scss
+++ b/ui/src/style/_common.scss
@@ -3,11 +3,9 @@ html,
body {
height: 100%;
}
-
.navbar-menu.is-active{
background-color: $primary;
}
-
.title {
color: $primary;
margin-top: $title-margin-top;
@@ -18,44 +16,57 @@ body {
justify-content: center;
}
}
-
+h3 {
+ text-decoration: underline;
+}
+.label {
+ text-transform: capitalize;
+}
+.clickable {
+ cursor: pointer;
+}
+.link {
+ cursor: pointer;
+ &:hover {
+ color: $dark;
+ font-weight: bold;
+ }
+}
+.hide {
+ display: none;
+}
+.defaultValueTooltip {
+ background-color: white;
+ color: $primary;
+ font-weight: bold;
+ padding-top: 5px;
+}
a {
color: $dark;
}
-
-// affichage icon uniformisé
-.control.has-icons-right .input.is-small ~ .icon,
-.control.has-icons-left .input.is-small ~ .icon {
- font-size: 0.75rem;
- top: 0;
- margin-left: 0;
-}
-.button .icon, .button .icon.is-small, .icon{
- font-size: $size-icon-small;
- align-items: center;
- display: inline-flex;
+a.leaf {
+ padding: 15px;
}
-.icon.is-medium {
- font-size: $size-icon-medium;
+p.folder {
+ padding-left: 15px;
+ padding-bottom: 10px;
+ padding-top: 12px;
}
-.control.has-icons-right .icon.is-right {
- top: -2px;
+ul.rows{
+ margin-bottom: 10px;
}
-.b-table .table {
- border: 1px solid rgb(200, 200, 200);
- th {
- border: 1px solid rgb(200, 200, 200);
- min-width: 200px;
- .th-wrap .icon {
- margin-left: 0;
- }
+// affichage icon uniformisé
+.control.has-icons-right,
+.control.has-icons-left {
+ .input.is-small ~ .icon{
+ font-size: 0.75rem;
+ top: 0;
+ margin-left: 0;
}
- td {
- border: 1px solid rgb(200, 200, 200);
+ .icon.is-right {
+ top: -2px;
}
-}
-.control.has-icons-left {
.input{
padding-left: 3em;
}
@@ -68,91 +79,131 @@ a {
top: -5px;
}
}
-.b-checkbox.checkbox.button {
- display: inline-flex;
- padding: 0;
+.loader-wrapper {
+ margin: 50px;
+ justify-content: center;
+
+ .loader {
+ height: 100px;
+ width: 100px;
+ }
}
-.button.is-light.is-focused:not(:active), .button.is-light.is-focused {
- box-shadow: none;
+.icon.is-large {
+ font-size: $size-icon-large;
+ height: 6rem;
+ width: 6rem;
}
-.button .icon:first-child:not(:last-child) {
- margin: 0;
+.icon.is-medium {
+ font-size: $size-icon-medium;
}
-
-.inputAuth .control.has-icons-left .icon.is-left{
+.icon.is-small {
font-size: $size-icon-small;
- align-items: center;
-}
-
-.clickable {
- cursor: pointer;
}
-.icon.is-small {
+.inputAuth .control.has-icons-left .icon.is-left{
font-size: $size-icon-small;
+ align-items: center;
}
-.link {
- cursor: pointer;
- &:hover {
- color: $dark;
- font-weight: bold;
+.button , .icon{
+ .icon.is-small{
+ font-size: $size-icon-small;
+ align-items: center;
+ display: inline-flex;
+ }
+ .icon:first-child:not(:last-child) {
+ margin: 0;
+ }
+ .is-right.is-small.is-clickable {
+ color: $primary;
+ }
+ .has-text-primary.is-medium {
+ width: 32px;
}
}
-.hide {
- display: none;
-}
-
-// Input style
-
-.input-field {
- margin-bottom: 1rem;
-
- .label {
- display: flex;
- justify-content: space-between;
- align-items: center;
- span {
- color: $light;
+// mise en forme des tableaux
+.b-table .table {
+ border: 0.5px solid rgb(230, 230, 230);
+ th {
+ border: 0.5px solid rgb(230, 230, 230);
+ min-width: 200px;
+ .th-wrap .icon {
+ margin-left: 0;
}
}
+ td {
+ border: 0.5px solid rgb(230, 230, 230);
+ }
+ td.is-sticky {
+ position: initial;
+ z-index: 0;
+ }
+ th.is-sortable .th-wrap {
+ width: max-content;
+ }
+ th.is-sortable{
+ width: max-content;
+ }
+}
+.column.card .card-content .table td{
+ vertical-align: middle;
}
// Buttons style
-
+.button.is-light.is-focused:not(:active), .button.is-light.is-focused {
+ box-shadow: none;
+}
.buttons {
justify-content: flex-end;
-
&:last-child {
margin-bottom: 0;
}
-
.button {
margin-bottom: 0;
}
}
+button.dropdown-item.is-active {
+ background-color: rgb(0,100,100);
+}
+.button.is-danger.is-light {
+ color: $danger;
+}
+.button.is-primary.is-light {
+ color: $dark;
+}
// Buefy/Bulma UI overrides
.notification a:not(.button):not(.dropdown-item){
text-decoration: none;
}
-.b-tabs .tabs.is-boxed li:not(.is-active) a:focus {
- background-color: $primary;
- color: white;
- font-weight: bold;
+.b-checkbox.checkbox.button {
+ display: inline-flex;
+ padding: 0;
}
-.tabs.is-boxed.is-right {
+// Input style
+.input-field {
+ margin-bottom: 1rem;
+
+ .label {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+
+ span {
+ color: $light;
+ }
+ }
+}
+
+//tabs style
+.b-tabs,
+.tabs.is-boxed , .tabs.is-boxed.is-right{
ul {
margin: 0;
li a {
text-decoration: none;
}
}
-}
-.b-tabs .tab-content {
- padding: 0.5rem;
-}
-.tabs.is-boxed{
li.is-active {
a {
color: $dark;
@@ -170,7 +221,17 @@ a {
color: white;
font-weight: bold;
}
+ .tabs.is-boxed li:not(.is-active) a:focus {
+ background-color: $primary;
+ color: white;
+ font-weight: bold;
+ }
+ .tab-content {
+ padding: 0.5rem;
+ }
}
+
+
.dropdown-content{
box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.5), 0 0px 0 1px rgba(10, 10, 10, 0.1);
}
@@ -199,9 +260,6 @@ a.dropdown-item {
align-items: center;
}
-.icon.is-right.is-small.is-clickable {
- color: $primary;
-}
.select:not(.is-multiple):not(.is-loading)::after {
border-color: $primary;
}
@@ -213,26 +271,13 @@ a.dropdown-item {
box-shadow: 0 0 0 0.125em rgba(0, 163, 166,0.25);
}
-a.dropdown-item.is-active, .dropdown .dropdown-menu .has-link a.is-active, button.dropdown-item.is-active {
+a.dropdown-item.is-active, .dropdown .dropdown-menu .has-link a.is-active{
background-color: rgb(0,100,100);
}
-.column.card .card-content .table td{
- vertical-align: middle;
-}
-.button.is-danger.is-light {
- color: $danger;
-}
-.button.is-primary.is-light {
- color: $dark;
-}
-
.textarea:not([rows]) {
min-height: 4em;
}
-.icon.has-text-primary.is-medium {
- width: 32px;
-}
// mise en forme modal card synthèse
#ranges {
@@ -253,10 +298,6 @@ a.dropdown-item.is-active, .dropdown .dropdown-menu .has-link a.is-active, butto
.liste {
background-color: rgb(239, 239, 239);
}
-.b-table .table td.is-sticky{
- position: initial;
- z-index: 0;
-}
.svg-inline--fa.fa-info{
height: 24px;
@@ -272,29 +313,3 @@ a.dropdown-item.is-active, .dropdown .dropdown-menu .has-link a.is-active, butto
background-color: rgb(239, 239, 239);
border-bottom: 1px solid rgba(128, 128, 128,0.3);
}
-.b-table .table th.is-sortable, .b-table .table th.is-sortable .th-wrap {
- width: max-content;
-}
-a.leaf {
- padding: 15px;
-}
-p.folder {
- padding-left: 15px;
- padding-bottom: 10px;
- padding-top: 12px;
-}
-ul.rows{
- margin-bottom: 10px;
-}
-h3 {
- text-decoration: underline;
-}
-.defaultValueTooltip {
- background-color: white;
- color: $primary;
- font-weight: bold;
- padding-top: 5px;
-}
-.label {
- text-transform: capitalize;
-}
diff --git a/ui/src/style/_variables.scss b/ui/src/style/_variables.scss
index 57d8d533c..55a4ba356 100644
--- a/ui/src/style/_variables.scss
+++ b/ui/src/style/_variables.scss
@@ -15,6 +15,7 @@ $container-padding-vert: $container-padding-hor / 2;
$title-margin-top: 1.5rem;
$size-icon-small: 1.15rem;
$size-icon-medium: 1.5rem;
+$size-icon-large: 5rem;
// MenuView
$menu-height: 80px;
diff --git a/ui/src/views/additionalfiles/AdditionalFileInfosView.vue b/ui/src/views/additionalfiles/AdditionalFileInfosView.vue
index 02c2e3c6b..9ef82ef44 100644
--- a/ui/src/views/additionalfiles/AdditionalFileInfosView.vue
+++ b/ui/src/views/additionalfiles/AdditionalFileInfosView.vue
@@ -18,7 +18,12 @@
</h1>
<caption v-if="!this.columnsVisible" class="columns">
<div class="column loader-wrapper">
- <div class="loader is-loading"></div>
+ <b-icon
+ custom-class="fa-spin"
+ icon="spinner"
+ pack="fas"
+ size="is-medium">
+ </b-icon>
</div>
</caption>
<section class="section">
diff --git a/ui/src/views/application/ApplicationCreationView.vue b/ui/src/views/application/ApplicationCreationView.vue
index 92bcd76fa..8960c5349 100644
--- a/ui/src/views/application/ApplicationCreationView.vue
+++ b/ui/src/views/application/ApplicationCreationView.vue
@@ -28,7 +28,7 @@
{{ applicationConfig.file.name }}
</span>
</b-upload>
- <sup>
+ <sup style="font-size: 1.25em">
<b-tooltip :label="$t('applications.help_config')" position="is-right">
<a style="color: #006464ff; margin-left: 10px" @click="showHelp">
<b-icon icon="question-circle"></b-icon>
@@ -38,7 +38,8 @@
</b-field>
</ValidationProvider>
<div class="column is-4" style="margin: 5px">
- <b-button icon-left="vial" type="is-light" @click="handleSubmit(testApplication)">
+ <LoadingAnimate v-if="loading" class="card-content" id="element" :size="'is-large'"></LoadingAnimate>
+ <b-button v-else icon-left="vial" type="is-light" @click="handleSubmit(testApplication)">
{{ $t("applications.test") }}
</b-button>
</div>
@@ -138,9 +139,10 @@ import { ApplicationService } from "@/services/rest/ApplicationService";
import { AlertService } from "@/services/AlertService";
import { ErrorsService } from "@/services/ErrorsService";
import { HttpStatusCodes } from "@/utils/HttpUtils";
+import LoadingAnimate from "@/components/common/LoadingAnimate.vue";
@Component({
- components: { PageView, ValidationObserver, ValidationProvider },
+ components: {LoadingAnimate, PageView, ValidationObserver, ValidationProvider },
})
export default class ApplicationCreationView extends Vue {
applicationService = ApplicationService.INSTANCE;
@@ -153,6 +155,7 @@ export default class ApplicationCreationView extends Vue {
error = [];
comment = "";
regExp = /^[a-zA-Z]+$/;
+ loading = false;
async createApplication() {
this.errorsMessages = [];
@@ -186,7 +189,7 @@ export default class ApplicationCreationView extends Vue {
}
async testApplication() {
- const loadingComponent = this.$buefy.loading.open();
+ this.loading = true;
this.errorsMessages = [];
try {
let response = await this.applicationService.validateConfiguration(this.applicationConfig);
@@ -231,7 +234,7 @@ export default class ApplicationCreationView extends Vue {
} catch (error) {
this.checkMessageErrors(error);
}
- loadingComponent.close();
+ this.loading = false;
}
checkMessageErrors(error) {
diff --git a/ui/src/views/application/ApplicationsView.vue b/ui/src/views/application/ApplicationsView.vue
index 0fc9be190..49315a9cc 100644
--- a/ui/src/views/application/ApplicationsView.vue
+++ b/ui/src/views/application/ApplicationsView.vue
@@ -91,11 +91,7 @@
</section>
</div>
<div class="column is-9-widescreen is-12-desktop">
- <caption v-if="loading" class="columns">
- <div class="column loader-wrapper">
- <div class="loader is-loading"></div>
- </div>
- </caption>
+ <LoadingAnimate v-if="loading" :size="'is-large'"></LoadingAnimate>
<div class="columns">
<div
v-for="(application, index) in selectedApplications"
@@ -283,9 +279,10 @@ import { Component, Vue } from "vue-property-decorator";
import PageView from "@/views/common/PageView.vue";
import { LoginService } from "@/services/rest/LoginService";
import { FileService } from "@/services/rest/FileService";
+import LoadingAnimate from "@/components/common/LoadingAnimate.vue";
@Component({
- components: { PageView },
+ components: {LoadingAnimate, PageView },
})
export default class ApplicationsView extends Vue {
applicationService = ApplicationService.INSTANCE;
@@ -365,16 +362,15 @@ export default class ApplicationsView extends Vue {
}
async init() {
+ this.loading = true;
this.applications = await this.applicationService.getApplications([
"DATATYPE",
"REFERENCETYPE",
]);
this.selectedApplications = this.applications;
- if (this.selectedApplications.length === 0) {
- this.loading = true;
- }
if (this.checkboxDate === "true")
this.selectedApplications.sort((a, b) => b.creationDate - a.creationDate);
+ this.loading = false;
}
createApplication() {
@@ -482,14 +478,4 @@ export default class ApplicationsView extends Vue {
top: 5px;
left: 5px;
}
-
-.loader-wrapper {
- margin: 50px;
- justify-content: center;
-
- .loader {
- height: 100px;
- width: 100px;
- }
-}
</style>
diff --git a/ui/src/views/authorizations/DataTypeAuthorizationsRightsRequestView.vue b/ui/src/views/authorizations/DataTypeAuthorizationsRightsRequestView.vue
index 1692fdef8..769309ddf 100644
--- a/ui/src/views/authorizations/DataTypeAuthorizationsRightsRequestView.vue
+++ b/ui/src/views/authorizations/DataTypeAuthorizationsRightsRequestView.vue
@@ -12,7 +12,12 @@
</h1>
<caption v-if="!this.columnsVisible" class="columns">
<div class="column loader-wrapper">
- <div class="loader is-loading"></div>
+ <b-icon
+ custom-class="fa-spin"
+ icon="spinner"
+ pack="fas"
+ size="is-medium">
+ </b-icon>
</div>
</caption>
<ValidationObserver ref="observer" v-slot="{ handleSubmit }">
diff --git a/ui/src/views/authorizations/ReferencesAuthorizationInfoView.vue b/ui/src/views/authorizations/ReferencesAuthorizationInfoView.vue
index 5bde2b5da..9dafed09e 100644
--- a/ui/src/views/authorizations/ReferencesAuthorizationInfoView.vue
+++ b/ui/src/views/authorizations/ReferencesAuthorizationInfoView.vue
@@ -166,7 +166,6 @@ export default class ReferencesAuthorizationInfoView extends Vue {
application = new ApplicationResult();
selectedlabels = [];
userLabels = [];
- isLoading;
authReferences = {};
subMenuPaths = [];
selectedUsers = [];
@@ -211,7 +210,6 @@ export default class ReferencesAuthorizationInfoView extends Vue {
}
),
];
- this.isLoading = false;
}
mounted() {}
@@ -226,7 +224,6 @@ export default class ReferencesAuthorizationInfoView extends Vue {
}
async init() {
- this.isLoading = true;
try {
this.application = await this.applicationService.getApplication(this.applicationName, [
"CONFIGURATION",
diff --git a/ui/src/views/datatype/DataTypeTableView.vue b/ui/src/views/datatype/DataTypeTableView.vue
index 0173fd909..bef3ed069 100644
--- a/ui/src/views/datatype/DataTypeTableView.vue
+++ b/ui/src/views/datatype/DataTypeTableView.vue
@@ -9,7 +9,14 @@
/>
<h1 class="title main-title">{{ application.localDatatypeName || dataTypeId }}</h1>
- <b-loading v-model="isLoading" :is-full-page="null"></b-loading>
+ <b-loading v-model="isLoading" :is-full-page="null">
+ <b-icon
+ pack="fas"
+ icon="spinner"
+ size="is-large"
+ custom-class="fa-spin">
+ </b-icon>
+ </b-loading>
<div v-if="!showSort && !showFilter" class="columns">
<div
v-if="
@@ -99,48 +106,6 @@
</b-button>
</div>
</div>
- <b-modal v-model="currentReferenceDetail.active" custom-class="referenceDetails">
- <div class="card">
- <header class="card-header is-align-content-center">
- <p class="card-header-title">
- {{ currentReferenceDetail.reference }}
- </p>
- </header>
- <div class="card-content">
- <div class="content is-align-content-center">
- <b-table :data="currentReferenceDetail.data">
- <b-table-column
- v-for="column in currentReferenceDetail.columns"
- :key="column.id"
- v-slot="props"
- >
- <span v-for="(refParent, indx) in currentReferenceDetail.refParent" :key="indx">
- <a v-if="showLinkRefParent(refParent.valueRefParent, props.row[column.field])">
- {{ props.row[column.field] }}
- </a>
- <p
- v-else-if="
- !props.row[column.field].length && props.row[column.field].length !== 0
- "
- >
- <b-button
- v-if="showBtnTablDynamicColumn(props.row[column.field])"
- icon-left="eye"
- rounded
- size="is-small"
- style="height: inherit"
- type="is-dark"
- @click="showModal(column.field, props.row[column.field])"
- />
- </p>
- <p v-else>{{ props.row[column.field] }}</p>
- </span>
- </b-table-column>
- </b-table>
- </div>
- </div>
- </div>
- </b-modal>
<div
v-if="showSort"
class="notification"
@@ -440,7 +405,7 @@
:key="`row_${rowIndex}-${index}`"
:component="component.component"
:variable="component.variable"
- style="text-align: center; vertical-align: middle"
+ style="vertical-align: middle"
>
<span
v-if="
@@ -629,7 +594,7 @@ export default class DataTypeTableView extends Vue {
if (tableValuesRow[i].includes('/') && tableValuesRow[i].indexOf("date:") === -1) {
rowValues.push(tableValuesRow[i].slice(0, -1));
} else if (tableValuesRow[i].includes('"')) {
- tableValuesRow[i] = tableValuesRow[i].slice(1, -1);
+ rowValues.push(tableValuesRow[i].slice(1, -1));
}
}
if (rowValues.length !==0)
@@ -638,7 +603,8 @@ export default class DataTypeTableView extends Vue {
return tableValuesRow;
}
testMultiplicity(value, checker) {
- if (value.includes(".") && checker?.sqlType === "NUMERIC") {
+ const tableValuesRow = value.substring(1, value.length - 1).split(",");
+ if (value.includes(".") && checker?.sqlType === "NUMERIC" && (tableValuesRow.length !== 1)) {
return true;
} else return !!((value.includes("]") || value.includes("[")) && checker?.sqlType !== "NUMERIC");
}
@@ -1173,13 +1139,4 @@ $row-variable-height: 60px;
.icon.is-small {
font-size: 5rem;
}
-
-.loader-wrapper {
- margin: 50px;
-
- .loader {
- height: 100px;
- width: 100px;
- }
-}
</style>
diff --git a/ui/src/views/datatype/DataTypesRepositoryView.vue b/ui/src/views/datatype/DataTypesRepositoryView.vue
index 1aba04e01..2e5801093 100644
--- a/ui/src/views/datatype/DataTypesRepositoryView.vue
+++ b/ui/src/views/datatype/DataTypesRepositoryView.vue
@@ -158,7 +158,8 @@
</div>
<div v-if="isAuthorisationsSelected()" class="columns">
<div class="card column">
- <div class="card-content" id="element">
+ <LoadingAnimate v-if="loading" :size="'is-medium'"></LoadingAnimate>
+ <div v-else class="card-content" id="element">
<table
v-if="datasets && Object.keys(datasets).length"
class="table is-striped is-fullwidth numberData"
@@ -323,9 +324,10 @@ import { LOCAL_STORAGE_LANG } from "@/services/Fetcher";
import DropDownMenu from "@/components/common/DropDownMenu";
import moment from "moment";
import { HttpStatusCodes } from "@/utils/HttpUtils";
+import LoadingAnimate from "@/components/common/LoadingAnimate.vue";
@Component({
- components: { DropDownMenu, CollapsibleTree, PageView, SubMenu },
+ components: {LoadingAnimate, DropDownMenu, CollapsibleTree, PageView, SubMenu },
})
export default class DataTypesRepositoryView extends Vue {
@Prop() applicationName;
@@ -348,6 +350,7 @@ export default class DataTypesRepositoryView extends Vue {
authorizations = [];
authReferences = {};
selected = null;
+ loading = false;
requiredAuthorizationsObject = null;
datasets = {};
file = null;
@@ -625,10 +628,11 @@ export default class DataTypesRepositoryView extends Vue {
}
async publish(dataset, pusblished) {
+ this.loading = true;
// ajout loading en JS
- const loadingComponent = this.$buefy.loading.open({
+ /*const loadingComponent = this.$buefy.loading.open({
container: document.getElementById("element"),
- });
+ });*/
this.errorsMessages = [];
dataset.params.published = pusblished;
let requiredAuthorizations = dataset.params.binaryFiledataset.requiredAuthorizations;
@@ -650,7 +654,8 @@ export default class DataTypesRepositoryView extends Vue {
} catch (error) {
this.checkMessageErrors(error);
}
- loadingComponent.close();
+ //loadingComponent.close();
+ this.loading = false;
}
checkMessageErrors(error) {
diff --git a/ui/src/views/references/ReferenceTableView.vue b/ui/src/views/references/ReferenceTableView.vue
index 7483fd8a3..bb23bcda8 100644
--- a/ui/src/views/references/ReferenceTableView.vue
+++ b/ui/src/views/references/ReferenceTableView.vue
@@ -23,6 +23,16 @@
paginated
style="padding-bottom: 20px; position: relative; z-index: 1"
>
+ <template #loading>
+ <b-loading v-model="isLoading" :is-full-page="null">
+ <b-icon
+ pack="fas"
+ icon="spinner"
+ size="is-large"
+ custom-class="fa-spin">
+ </b-icon>
+ </b-loading>
+ </template>
<template #pagination>
<b-pagination
v-model="currentPage"
--
GitLab
From 1ddf7dbbfe80cd71aa0ec7508c46175537438204 Mon Sep 17 00:00:00 2001
From: lucile varloteaux <lucile.varloteaux@inrae.fr>
Date: Tue, 16 May 2023 17:33:42 +0200
Subject: [PATCH 10/18] =?UTF-8?q?refactoring=20et=20r=C3=A9paration=20de?=
=?UTF-8?q?=20l'animation=20de=20chargement=20sur=20toutes=20les=20pages?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../common/AuthorizationTableForDatatype.vue | 1 -
ui/src/components/common/LoadingAnimate.vue | 6 +-
.../references/ReferencesDynamicLink.vue | 5 +-
ui/src/style/_common.scss | 1 -
.../AdditionalFileInfosView.vue | 13 +----
.../AuthorizationManagementView.vue | 7 ++-
.../AuthorizationReferencesManagement.vue | 7 ++-
.../DataTypeAuthorizationInfoView.vue | 5 +-
...ataTypeAuthorizationsRightsRequestView.vue | 13 +----
.../DataTypeAuthorizationsView.vue | 7 ++-
.../ReferencesAuthorizationInfoView.vue | 6 ++
ui/src/views/datatype/DataTypeTableView.vue | 11 +---
.../views/references/ReferenceTableView.vue | 57 +------------------
13 files changed, 47 insertions(+), 92 deletions(-)
diff --git a/ui/src/components/common/AuthorizationTableForDatatype.vue b/ui/src/components/common/AuthorizationTableForDatatype.vue
index a9f9de670..b50a70363 100644
--- a/ui/src/components/common/AuthorizationTableForDatatype.vue
+++ b/ui/src/components/common/AuthorizationTableForDatatype.vue
@@ -95,7 +95,6 @@
$emit('registerCurrentAuthorization', { ...$event, datatype: datatype.id })
"
>
- <b-loading v-model="isLoading" :is-full-page="null"></b-loading>
</AuthorizationTable>
</ul>
</li>
diff --git a/ui/src/components/common/LoadingAnimate.vue b/ui/src/components/common/LoadingAnimate.vue
index a324c6f22..ee7fe00d9 100644
--- a/ui/src/components/common/LoadingAnimate.vue
+++ b/ui/src/components/common/LoadingAnimate.vue
@@ -1,5 +1,5 @@
<template>
- <caption class="columns">
+ <caption class="columns" style="margin-top: -0.4em">
<div class="column loader-wrapper">
<b-icon
custom-class="fa-spin"
@@ -22,5 +22,7 @@ export default {
</script>
<style scoped>
-
+caption{
+ color: black;
+}
</style>
\ No newline at end of file
diff --git a/ui/src/components/references/ReferencesDynamicLink.vue b/ui/src/components/references/ReferencesDynamicLink.vue
index 7404de074..d8793c7ae 100644
--- a/ui/src/components/references/ReferencesDynamicLink.vue
+++ b/ui/src/components/references/ReferencesDynamicLink.vue
@@ -10,7 +10,7 @@
type="is-dark"
@click="showModal()"
>
- <b-loading v-model="isLoading" :is-full-page="null"></b-loading>
+ <LoadingAnimate v-if="isLoading" :size="'is-small'"></LoadingAnimate>
</b-button>
</span>
<!-- modal de multiplicity et dynamique colonne -->
@@ -61,11 +61,12 @@ import { ReferenceService } from "@/services/rest/ReferenceService";
import { InternationalisationService } from "@/services/InternationalisationService";
import ReferencesLink from "@/components/references/ReferencesLink.vue";
import ReferencesManyLink from "@/components/references/ReferencesManyLink.vue";
+import LoadingAnimate from "@/components/common/LoadingAnimate.vue";
export default {
name: "ReferencesDynamicLink",
emits: ["changedRefValues"],
- components: { ReferencesManyLink, ReferencesLink },
+ components: {LoadingAnimate, ReferencesManyLink, ReferencesLink },
props: {
application: Object,
referenceType: String,
diff --git a/ui/src/style/_common.scss b/ui/src/style/_common.scss
index 91c8d91bb..80bfeba77 100644
--- a/ui/src/style/_common.scss
+++ b/ui/src/style/_common.scss
@@ -124,7 +124,6 @@ ul.rows{
}
}
.loader-wrapper {
- margin: 50px;
justify-content: center;
.loader {
diff --git a/ui/src/views/additionalfiles/AdditionalFileInfosView.vue b/ui/src/views/additionalfiles/AdditionalFileInfosView.vue
index 9ef82ef44..c6421453b 100644
--- a/ui/src/views/additionalfiles/AdditionalFileInfosView.vue
+++ b/ui/src/views/additionalfiles/AdditionalFileInfosView.vue
@@ -16,16 +16,7 @@
})
}}
</h1>
- <caption v-if="!this.columnsVisible" class="columns">
- <div class="column loader-wrapper">
- <b-icon
- custom-class="fa-spin"
- icon="spinner"
- pack="fas"
- size="is-medium">
- </b-icon>
- </div>
- </caption>
+ <LoadingAnimate v-if="!this.columnsVisible" :size="'is-medium'"></LoadingAnimate>
<section class="section">
<ValidationObserver ref="observer">
<article class="fieldsForm">
@@ -222,9 +213,11 @@ import { Authorizations } from "@/model/authorization/Authorizations";
import FieldsForm from "@/components/common/provider/FieldsForm.vue";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import LoadingAnimate from "@/components/common/LoadingAnimate.vue";
@Component({
components: {
+ LoadingAnimate,
AuthorizationTable,
AuthorizationTableForDatatype,
PageView,
diff --git a/ui/src/views/authorizations/AuthorizationManagementView.vue b/ui/src/views/authorizations/AuthorizationManagementView.vue
index 31a56d3c2..c5d32d6af 100644
--- a/ui/src/views/authorizations/AuthorizationManagementView.vue
+++ b/ui/src/views/authorizations/AuthorizationManagementView.vue
@@ -13,6 +13,7 @@
Délégation des droits de création pour une ou plusieurs application(s).
</b-notification>
<div class="rows">
+ <LoadingAnimate v-if="isLoading" :size="'is-large'"></LoadingAnimate>
<b-table
class="row"
:data="authorizations"
@@ -114,9 +115,10 @@ import { Component, Vue } from "vue-property-decorator";
import PageView from "../common/PageView.vue";
import { SubMenuPath } from "@/components/common/SubMenu";
import { AuthorizationService } from "@/services/rest/AuthorizationService";
+import LoadingAnimate from "@/components/common/LoadingAnimate.vue";
@Component({
- components: { PageView, SubMenu },
+ components: {LoadingAnimate, PageView, SubMenu },
})
export default class AuthorizationManagementView extends Vue {
subMenuPaths = [];
@@ -124,6 +126,7 @@ export default class AuthorizationManagementView extends Vue {
authorizations = [];
totalRows = -1;
currentPage = 1;
+ isLoading = false;
search(user, search) {
return user.login.match(search);
@@ -137,11 +140,13 @@ export default class AuthorizationManagementView extends Vue {
currentUser = JSON.parse(localStorage.getItem("authenticatedUser"));
async init() {
+ this.isLoading = true;
this.changes = {
administrator: { add: [], remove: [] },
applications: {},
};
this.authorizations = await this.authorizationService.getAuthorizations();
+ this.isLoading = false;
}
async created() {
diff --git a/ui/src/views/authorizations/AuthorizationReferencesManagement.vue b/ui/src/views/authorizations/AuthorizationReferencesManagement.vue
index 9be99a46d..6c04b00d9 100644
--- a/ui/src/views/authorizations/AuthorizationReferencesManagement.vue
+++ b/ui/src/views/authorizations/AuthorizationReferencesManagement.vue
@@ -19,6 +19,7 @@
</div>
</div>
</div>
+ <LoadingAnimate v-if="isLoading" :size="'is-large'"></LoadingAnimate>
<b-table
:data="authorizations"
:is-focusable="true"
@@ -155,6 +156,7 @@ import { AuthorizationService } from "@/services/rest/AuthorizationService";
import { ApplicationService } from "@/services/rest/ApplicationService";
import { AlertService } from "@/services/AlertService";
import { InternationalisationService } from "@/services/InternationalisationService";
+import LoadingAnimate from "@/components/common/LoadingAnimate.vue";
export default {
name: "AuthorizationreferencesManagement",
@@ -177,6 +179,7 @@ export default {
this.init();
},
components: {
+ LoadingAnimate,
PageView,
SubMenu,
},
@@ -185,6 +188,7 @@ export default {
},
data: () => {
return {
+ isLoading: false,
subMenuPaths: [],
authorizationService: AuthorizationService.INSTANCE,
authorizations: [],
@@ -232,6 +236,7 @@ export default {
} catch (error) {
this.alertService.toastServerError(error);
}
+ this.isLoading = false;
},
getFilteredTags(text) {
@@ -265,7 +270,7 @@ export default {
} catch (error) {
this.alertService.toastServerError(error);
}
- window.location.reload();
+ //window.location.reload();
},
},
};
diff --git a/ui/src/views/authorizations/DataTypeAuthorizationInfoView.vue b/ui/src/views/authorizations/DataTypeAuthorizationInfoView.vue
index 386382f14..e5e82aba9 100644
--- a/ui/src/views/authorizations/DataTypeAuthorizationInfoView.vue
+++ b/ui/src/views/authorizations/DataTypeAuthorizationInfoView.vue
@@ -85,6 +85,7 @@
</b-field>
</ValidationProvider>
</div>
+ <LoadingAnimate v-if="isLoading" :size="'is-large'"></LoadingAnimate>
<div v-for="(datatypeInfos, datatype) in datatypes" :key="datatype">
<div
v-if="
@@ -166,9 +167,11 @@ import AuthorizationTable from "@/components/common/AuthorizationTable";
import AuthorizationTableForDatatype from "@/components/common/AuthorizationTableForDatatype.vue";
import { Authorization } from "@/model/authorization/Authorization";
import { Authorizations } from "@/model/authorization/Authorizations";
+import LoadingAnimate from "@/components/common/LoadingAnimate.vue";
@Component({
components: {
+ LoadingAnimate,
AuthorizationTable,
AuthorizationTableForDatatype,
PageView,
@@ -334,7 +337,6 @@ export default class DataTypeAuthorizationInfoView extends Vue {
}
),
];
- this.isLoading = false;
}
mounted() {}
@@ -461,6 +463,7 @@ export default class DataTypeAuthorizationInfoView extends Vue {
} catch (error) {
this.alertService.toastServerError(error);
}
+ this.isLoading = false;
}
getFilteredTags(text) {
diff --git a/ui/src/views/authorizations/DataTypeAuthorizationsRightsRequestView.vue b/ui/src/views/authorizations/DataTypeAuthorizationsRightsRequestView.vue
index 769309ddf..43c608bec 100644
--- a/ui/src/views/authorizations/DataTypeAuthorizationsRightsRequestView.vue
+++ b/ui/src/views/authorizations/DataTypeAuthorizationsRightsRequestView.vue
@@ -10,16 +10,7 @@
<h1 class="title main-title">
<span>{{ $t("dataTypeAuthorizations.title", { label: currentUser.label }) }}</span>
</h1>
- <caption v-if="!this.columnsVisible" class="columns">
- <div class="column loader-wrapper">
- <b-icon
- custom-class="fa-spin"
- icon="spinner"
- pack="fas"
- size="is-medium">
- </b-icon>
- </div>
- </caption>
+ <LoadingAnimate v-if="!this.columnsVisible" :size="'is-medium'"></LoadingAnimate>
<ValidationObserver ref="observer" v-slot="{ handleSubmit }">
<FieldsForm
:application="application"
@@ -122,9 +113,11 @@ import AuthorizationTableForDatatype from "@/components/common/AuthorizationTabl
import { Authorization } from "@/model/authorization/Authorization";
import { Authorizations } from "@/model/authorization/Authorizations";
import FieldsForm from "@/components/common/provider/FieldsForm.vue";
+import LoadingAnimate from "@/components/common/LoadingAnimate.vue";
@Component({
components: {
+ LoadingAnimate,
AuthorizationTable,
AuthorizationTableForDatatype,
PageView,
diff --git a/ui/src/views/authorizations/DataTypeAuthorizationsView.vue b/ui/src/views/authorizations/DataTypeAuthorizationsView.vue
index 43be405c8..5b136075e 100644
--- a/ui/src/views/authorizations/DataTypeAuthorizationsView.vue
+++ b/ui/src/views/authorizations/DataTypeAuthorizationsView.vue
@@ -23,6 +23,7 @@
</div>
</div>
</div>
+ <LoadingAnimate v-if="isLoading" :size="'is-large'"></LoadingAnimate>
<b-table
:data="authorizations"
:is-focusable="true"
@@ -237,9 +238,10 @@ import { InternationalisationService } from "@/services/InternationalisationServ
import { Component, Prop, Vue } from "vue-property-decorator";
import PageView from "../common/PageView.vue";
import { ApplicationResult } from "@/model/ApplicationResult";
+import LoadingAnimate from "@/components/common/LoadingAnimate.vue";
@Component({
- components: { PageView, SubMenu },
+ components: {LoadingAnimate, PageView, SubMenu },
})
export default class DataTypeAuthorizationsView extends Vue {
@Prop() dataTypeId;
@@ -271,6 +273,7 @@ export default class DataTypeAuthorizationsView extends Vue {
ALWAYS: this.$t("dataTypeAuthorizations.always"),
};
authorizationLength = 0;
+ isLoading = false;
async changePage(page) {
this.offset = (page - 1) * this.perPage;
@@ -297,6 +300,7 @@ export default class DataTypeAuthorizationsView extends Vue {
}
async init() {
+ this.isLoading = true;
try {
this.application = await this.applicationService.getApplication(this.applicationName, [
"CONFIGURATION",
@@ -334,6 +338,7 @@ export default class DataTypeAuthorizationsView extends Vue {
return acc;
}, {})(error);
}
+ this.isLoading = false;
}
addAuthorization() {
diff --git a/ui/src/views/authorizations/ReferencesAuthorizationInfoView.vue b/ui/src/views/authorizations/ReferencesAuthorizationInfoView.vue
index 9dafed09e..2cd0dcccf 100644
--- a/ui/src/views/authorizations/ReferencesAuthorizationInfoView.vue
+++ b/ui/src/views/authorizations/ReferencesAuthorizationInfoView.vue
@@ -72,6 +72,7 @@
</b-field>
</ValidationProvider>
</div>
+ <LoadingAnimate v-if="isLoading" :size="'is-large'"></LoadingAnimate>
<b-table :data="arrayReferences">
<b-table-column :label="$t('referencesManagement.references')" v-slot="props">
{{ props.row.refNameLocal }}
@@ -131,9 +132,11 @@ import PageView from "../common/PageView.vue";
import { InternationalisationService } from "@/services/InternationalisationService";
import { ApplicationResult } from "@/model/ApplicationResult";
import { ReferenceService } from "@/services/rest/ReferenceService";
+import LoadingAnimate from "@/components/common/LoadingAnimate.vue";
@Component({
components: {
+ LoadingAnimate,
PageView,
SubMenu,
CollapsibleTree,
@@ -171,6 +174,7 @@ export default class ReferencesAuthorizationInfoView extends Vue {
selectedUsers = [];
filteredTags = [];
arrayReferences = [];
+ isLoading=false;
getColumnTitle(column) {
if (column.display) {
@@ -224,6 +228,7 @@ export default class ReferencesAuthorizationInfoView extends Vue {
}
async init() {
+ this.isLoading = true;
try {
this.application = await this.applicationService.getApplication(this.applicationName, [
"CONFIGURATION",
@@ -307,6 +312,7 @@ export default class ReferencesAuthorizationInfoView extends Vue {
} catch (error) {
this.alertService.toastServerError(error);
}
+ this.isLoading = false;
}
getFilteredTags(text) {
diff --git a/ui/src/views/datatype/DataTypeTableView.vue b/ui/src/views/datatype/DataTypeTableView.vue
index 4b397ecb4..1f0c7b6d9 100644
--- a/ui/src/views/datatype/DataTypeTableView.vue
+++ b/ui/src/views/datatype/DataTypeTableView.vue
@@ -9,14 +9,6 @@
/>
<h1 class="title main-title">{{ application.localDatatypeName || dataTypeId }}</h1>
- <b-loading v-model="isLoading" :is-full-page="null">
- <b-icon
- pack="fas"
- icon="spinner"
- size="is-large"
- custom-class="fa-spin">
- </b-icon>
- </b-loading>
<div v-if="!showSort && !showFilter" class="columns">
<div
v-if="
@@ -373,6 +365,7 @@
<div class="b-table">
<div class="DataSetTableView-wrapper table-wrapper has-sticky-header" style="height: 690px">
<table class="table is-striped">
+ <LoadingAnimate v-if="isLoading" :size="'is-large'"></LoadingAnimate>
<caption v-if="variables.length === 0 && !isLoading">
<div class="columns">
<div class="column">
@@ -539,9 +532,11 @@ import ReferencesManyLink from "@/components/references/ReferencesManyLink.vue";
import { InternationalisationService } from "@/services/InternationalisationService";
import TagsCollapse from "@/components/common/TagsCollapse.vue";
import { TagService } from "@/services/TagService";
+import LoadingAnimate from "@/components/common/LoadingAnimate.vue";
@Component({
components: {
+ LoadingAnimate,
PageView,
SubMenu,
CollapsibleInterval,
diff --git a/ui/src/views/references/ReferenceTableView.vue b/ui/src/views/references/ReferenceTableView.vue
index 04940d318..c98d79d24 100644
--- a/ui/src/views/references/ReferenceTableView.vue
+++ b/ui/src/views/references/ReferenceTableView.vue
@@ -28,14 +28,7 @@
:per-page="params.limit"
>
<template #loading>
- <b-loading v-model="isLoading" :is-full-page="null">
- <b-icon
- pack="fas"
- icon="spinner"
- size="is-large"
- custom-class="fa-spin">
- </b-icon>
- </b-loading>
+ <LoadingAnimate v-if="isLoading" :size="'is-large'"></LoadingAnimate>
</template>
<template #pagination>
<b-pagination
@@ -157,9 +150,11 @@ import ReferencesDynamicLink from "@/components/references/ReferencesDynamicLink
import { HttpStatusCodes } from "@/utils/HttpUtils";
import TagsCollapse from "@/components/common/TagsCollapse.vue";
import { TagService } from "@/services/TagService";
+import LoadingAnimate from "@/components/common/LoadingAnimate.vue";
@Component({
components: {
+ LoadingAnimate,
PageView,
SubMenu,
TagsCollapse,
@@ -330,41 +325,6 @@ export default class ReferenceTableView extends Vue {
}
}
- async showModal(columName, 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;
- });
- if (this.referencesDynamic) {
- for (let i = 0; i < this.referencesDynamic.referenceValues.length; i++) {
- let hierarchicalKey = this.referencesDynamic.referenceValues[i].hierarchicalKey;
- for (let j = 0; j < this.modalArrayObj.length; j++) {
- if (this.modalArrayObj[j][hierarchicalKey]) {
- 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 };
- }
- }
- for (let j = 0; j < tablDynamicColumn.length; j++) {
- if (tablDynamicColumn[j] === hierarchicalKey) {
- let value = this.referencesDynamic.referenceValues[i].values[this.display]
- ? this.referencesDynamic.referenceValues[i].values[this.display]
- : columName;
- this.modalArrayObj[j] = { ...this.modalArrayObj[j], value: value };
- }
- }
- }
- return this.modalArrayObj;
- }
- return this.modalArrayObj;
- }
-
info(refType) {
let dynamicColumns = Object.entries(this.reference.dynamicColumns).filter((a) => a[1]);
for (let i = 0; i < dynamicColumns.length; i++) {
@@ -373,17 +333,6 @@ export default class ReferenceTableView extends Vue {
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;
- });
- return showModal.length !== 0;
- }
-
multiplicity(column, arrayValues) {
for (let i = 0; i < this.tableValues.length; i++) {
let showModal = Object.entries(this.tableValues[i]).filter((a) => a[1]);
--
GitLab
From d458b3c61364869b5cad610f1ac4c1c1301bed49 Mon Sep 17 00:00:00 2001
From: lucile varloteaux <lucile.varloteaux@inrae.fr>
Date: Wed, 17 May 2023 09:57:10 +0200
Subject: [PATCH 11/18] =?UTF-8?q?Loading=20plac=C3=A9=20=C3=A0=20l'ext?=
=?UTF-8?q?=C3=A9rieur=20des=20tableau?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
ui/src/views/datatype/DataTypeTableView.vue | 4 ++--
ui/src/views/references/ReferenceTableView.vue | 8 ++------
2 files changed, 4 insertions(+), 8 deletions(-)
diff --git a/ui/src/views/datatype/DataTypeTableView.vue b/ui/src/views/datatype/DataTypeTableView.vue
index 1f0c7b6d9..977571655 100644
--- a/ui/src/views/datatype/DataTypeTableView.vue
+++ b/ui/src/views/datatype/DataTypeTableView.vue
@@ -362,10 +362,10 @@
</div>
</div>
</div>
- <div class="b-table">
+ <LoadingAnimate v-if="isLoading" :size="'is-large'"></LoadingAnimate>
+ <div v-else class="b-table">
<div class="DataSetTableView-wrapper table-wrapper has-sticky-header" style="height: 690px">
<table class="table is-striped">
- <LoadingAnimate v-if="isLoading" :size="'is-large'"></LoadingAnimate>
<caption v-if="variables.length === 0 && !isLoading">
<div class="columns">
<div class="column">
diff --git a/ui/src/views/references/ReferenceTableView.vue b/ui/src/views/references/ReferenceTableView.vue
index c98d79d24..f782db12e 100644
--- a/ui/src/views/references/ReferenceTableView.vue
+++ b/ui/src/views/references/ReferenceTableView.vue
@@ -12,11 +12,10 @@
<div class="column is-offset-one-third is-one-third">
<TagsCollapse v-if="tagsColumn && Object.keys(tagsColumn).length > 1" :tags="tagsColumn" />
</div>
-
- <div v-if="reference && columns">
+ <LoadingAnimate v-if="isLoading" :size="'is-large'"></LoadingAnimate>
+ <div v-if="reference && columns && !isLoading">
<b-table
:data="tableValues"
- :loading="isLoading"
:striped="true"
:is-focusable="true"
:is-hoverable="true"
@@ -27,9 +26,6 @@
:current-page="currentPage"
:per-page="params.limit"
>
- <template #loading>
- <LoadingAnimate v-if="isLoading" :size="'is-large'"></LoadingAnimate>
- </template>
<template #pagination>
<b-pagination
v-model="currentPage"
--
GitLab
From 2d12bb9473f7371aac613b4bb8a4bfe14ec5c476 Mon Sep 17 00:00:00 2001
From: lucile varloteaux <lucile.varloteaux@inrae.fr>
Date: Wed, 17 May 2023 11:00:21 +0200
Subject: [PATCH 12/18] =?UTF-8?q?r=C3=A9paration=20du=20fetcher=20du=20au?=
=?UTF-8?q?=20merge=20(btn=20t=C3=A9l=C3=A9charger=20r=C3=A9par=C3=A9=20bi?=
=?UTF-8?q?s)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
ui/src/services/Fetcher.js | 15 +++++++++++++++
1 file changed, 15 insertions(+)
diff --git a/ui/src/services/Fetcher.js b/ui/src/services/Fetcher.js
index 6a72f60cc..c17dcd471 100644
--- a/ui/src/services/Fetcher.js
+++ b/ui/src/services/Fetcher.js
@@ -70,6 +70,21 @@ export class Fetcher {
return this._handleResponse(response, isText);
}
+ getPath(url, params = {}) {
+ const path = new URL(url, config.API_URL);
+
+ Object.entries(params).forEach(([name, value]) => {
+ if (Array.isArray(value)) {
+ value.forEach((v) => {
+ path.searchParams.append(name, v);
+ });
+ } else {
+ path.searchParams.append(name, value);
+ }
+ });
+ return path;
+ }
+
async delete(url, data) {
const formData = this.convertToFormData(data);
const response = await fetch(`${config.API_URL}${url}`, {
--
GitLab
From 42c25faa328f628d931c37ad4501652552b750ba Mon Sep 17 00:00:00 2001
From: lucile varloteaux <lucile.varloteaux@inrae.fr>
Date: Wed, 17 May 2023 14:35:02 +0200
Subject: [PATCH 13/18] bug checkbox dans authorization
---
.../common/AuthorizationTableForDatatype.vue | 3 +-
ui/src/model/authorization/Authorization.js | 6 +-
.../AuthorizationReferencesManagement.vue | 68 ++++++++++++-------
.../DataTypeAuthorizationsView.vue | 18 ++---
4 files changed, 55 insertions(+), 40 deletions(-)
diff --git a/ui/src/components/common/AuthorizationTableForDatatype.vue b/ui/src/components/common/AuthorizationTableForDatatype.vue
index b50a70363..2a169e42c 100644
--- a/ui/src/components/common/AuthorizationTableForDatatype.vue
+++ b/ui/src/components/common/AuthorizationTableForDatatype.vue
@@ -201,10 +201,9 @@ export default {
this.isApplicationAdmin ||
(this.ownAuthorizationsColumnsByPath[path] || []).includes("admin")
);
- for (const index of auths) {
+ for (const index in auths) {
if (this.haveRightsOn(index, indexColumn)) {
let requiredAuthorizations = {};
- console.log(auths);
requiredAuthorizations[this.authReferences[0][auths[index]].authorizationScope] =
auths[index];
let authorizations = new Authorization([], requiredAuthorizations);
diff --git a/ui/src/model/authorization/Authorization.js b/ui/src/model/authorization/Authorization.js
index 4996c328e..dabde63e4 100644
--- a/ui/src/model/authorization/Authorization.js
+++ b/ui/src/model/authorization/Authorization.js
@@ -27,7 +27,7 @@ export class Authorization {
}
getPath(scopeId) {
- var path = [];
+ let path = [];
for (const scopeIdKey in scopeId) {
if (this.requiredAuthorizations[scopeId[scopeIdKey]]) {
path.push(this.requiredAuthorizations[scopeId[scopeIdKey]]);
@@ -38,7 +38,7 @@ export class Authorization {
}
getPath2(scopeId) {
- var path = [];
+ let path = [];
for (const scopeIdKey in scopeId) {
if (this.requiredAuthorizations[scopeId[scopeIdKey]]) {
path.push(this.requiredAuthorizations[scopeId[scopeIdKey]].sql);
@@ -51,7 +51,7 @@ export class Authorization {
equals(auth, scopes) {
for (const scope in scopes) {
if (
- this.requiredAuthorizations[scopes[scope]] != auth.requiredAuthorizations[scopes[scope]]
+ this.requiredAuthorizations[scopes[scope]] !== auth.requiredAuthorizations[scopes[scope]]
) {
return false;
}
diff --git a/ui/src/views/authorizations/AuthorizationReferencesManagement.vue b/ui/src/views/authorizations/AuthorizationReferencesManagement.vue
index 6c04b00d9..44c5276dc 100644
--- a/ui/src/views/authorizations/AuthorizationReferencesManagement.vue
+++ b/ui/src/views/authorizations/AuthorizationReferencesManagement.vue
@@ -11,7 +11,7 @@
</h1>
<div class="rows">
<div v-if="canManageRights" class="row">
- <div class="columns">
+ <div class="columns" style="margin: 0">
<div class="column is-offset-10 is-2">
<b-button icon-left="plus" type="is-primary is-right" @click="addAuthorization">
{{ $t("referencesAuthorizations.add-auhtorization") }}
@@ -86,6 +86,22 @@
{{ user }}
</a>
</b-tooltip>
+ <b-modal v-model="isCardModalActive" v-show="isSelectedName === user">
+ <div class="card">
+ <div class="card-header">
+ <div class="title card-header-title">
+ <p field="name">{{ user }}</p>
+ </div>
+ </div>
+ <div class="card-content">
+ <div class="content">
+ <h3>
+ {{ isSelectedName }}
+ </h3>
+ </div>
+ </div>
+ </div>
+ </b-modal>
</div>
</template>
</b-table-column>
@@ -96,36 +112,21 @@
field="authorizations"
sortable
>
- <template v-for="(authorization, idx) in Object.keys(props.row.authorizations)">
+ <template v-for="(listAuthorizationName, idx) in Object.keys(props.row.authorizations)">
<div v-bind:key="idx" class="columns">
- <b-tooltip :label="$t('dataTypeAuthorizations.showMore')" position="is-right">
- <a
- class="show-check-details column is-half"
- style="color: #006464ff; margin-left: 10px"
- type="is-primary "
- @click="
- showModalRole(
- props.row.name,
- authorization,
- props.row.authorizations[authorization]
- )
- "
- >
- {{ authorization }}
- </a>
- </b-tooltip>
+ <p class="column is-half">
+ {{ listAuthorizationName }}
+ </p>
+ <!-- TODO : voir pour traduire le nom des références dans la liste des rôles -->
+ <ul class="column is-half">
+ <li v-for="(authorizationName,indx) in props.row.authorizations[listAuthorizationName]" :key="indx">
+ {{ authorizationName }}
+ </li>
+ </ul>
</div>
</template>
</b-table-column>
<b-table-column v-slot="props" :label="$t('dataTypeAuthorizations.actions')" b-table-column>
- <b-button
- icon-left="times-circle"
- size="is-small"
- style="height: 1.5em; background-color: transparent; font-size: 1.45rem"
- type="is-danger is-light"
- @click="revoke(props.row.uuid)"
- >
- </b-button>
<b-button
icon-left="pen-square"
onmouseout="this.style.color='';"
@@ -142,6 +143,14 @@
@click="addAuthorization(props.row.uuid)"
>
</b-button>
+ <b-button
+ icon-left="times-circle"
+ size="is-small"
+ style="height: 1.5em; background-color: transparent; font-size: 1.45rem"
+ type="is-danger is-light"
+ @click="revoke(props.row.uuid)"
+ >
+ </b-button>
</b-table-column>
</b-table>
</div>
@@ -196,6 +205,8 @@ export default {
internationalisationService: InternationalisationService.INSTANCE,
alertService: AlertService.INSTANCE,
canManageRights: false,
+ isSelectedName:"",
+ isCardModalActive: false,
// pagination
offset: 0,
currentPage: 1,
@@ -255,6 +266,11 @@ export default {
this.offset = (page - 1) * this.perPage;
},
+ showModalUser(name) {
+ this.isSelectedName = name;
+ this.isCardModalActive = true;
+ },
+
addAuthorization(uuid) {
this.$router.push(
`/applications/${this.applicationName}/references/authorizations/${
diff --git a/ui/src/views/authorizations/DataTypeAuthorizationsView.vue b/ui/src/views/authorizations/DataTypeAuthorizationsView.vue
index 5b136075e..2ac0953d4 100644
--- a/ui/src/views/authorizations/DataTypeAuthorizationsView.vue
+++ b/ui/src/views/authorizations/DataTypeAuthorizationsView.vue
@@ -15,7 +15,7 @@
</h1>
<div class="rows">
<div class="row" v-if="canManageRights">
- <div class="columns">
+ <div class="columns" style="margin: 0">
<div class="column is-offset-10 is-2">
<b-button icon-left="plus" type="is-primary is-right" @click="addAuthorization">
{{ $t("dataTypeAuthorizations.add-auhtorization") }}
@@ -199,14 +199,6 @@
</template>
</b-table-column>
<b-table-column v-slot="props" :label="$t('dataTypeAuthorizations.actions')" b-table-column>
- <b-button
- icon-left="times-circle"
- size="is-small"
- type="is-danger is-light"
- @click="revoke(props.row.uuid)"
- style="height: 1.5em; background-color: transparent; font-size: 1.45rem"
- >
- </b-button>
<b-button
icon-left="pen-square"
size="is-small"
@@ -223,6 +215,14 @@
"
>
</b-button>
+ <b-button
+ icon-left="times-circle"
+ size="is-small"
+ type="is-danger is-light"
+ @click="revoke(props.row.uuid)"
+ style="height: 1.5em; background-color: transparent; font-size: 1.45rem"
+ >
+ </b-button>
</b-table-column>
</b-table>
</div>
--
GitLab
From 4902e6d8c46c55796e4172eeb288048cca556c06 Mon Sep 17 00:00:00 2001
From: lucile varloteaux <lucile.varloteaux@inrae.fr>
Date: Wed, 17 May 2023 15:35:22 +0200
Subject: [PATCH 14/18] changement de l'emplacement de la l'animation loading
lors du chargement de la liste des dataTypes
---
ui/src/components/common/CollapsibleTree.vue | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/ui/src/components/common/CollapsibleTree.vue b/ui/src/components/common/CollapsibleTree.vue
index 5676812d6..a68f16f90 100644
--- a/ui/src/components/common/CollapsibleTree.vue
+++ b/ui/src/components/common/CollapsibleTree.vue
@@ -62,7 +62,9 @@
</div>
</slot>
</div>
+ <LoadingAnimate v-if="isLoading" :size="'is-small'"></LoadingAnimate>
<slot
+ v-else
name="synthesisDetail"
v-bind:lineCount="lineCount"
v-bind:onClickLabelSynthesisDetailCb="onClickLabelSynthesisDetailCb"
@@ -92,9 +94,7 @@
new Date(option.synthesisMinMax[1]).toLocaleDateString("fr")
}}
</b-field>
- <LoadingAnimate v-if="isLoading" :size="'is-small'"></LoadingAnimate>
<availiblity-chart
- v-else
:id="option.label"
:minmax="option.synthesis.minmax"
:ranges="option.synthesis.ranges"
--
GitLab
From a706cf4d210920553685946ed3c006ca78b4f673 Mon Sep 17 00:00:00 2001
From: lucile varloteaux <lucile.varloteaux@inrae.fr>
Date: Wed, 17 May 2023 15:44:23 +0200
Subject: [PATCH 15/18] affichage liste dans autorisation reference
---
.../authorizations/AuthorizationReferencesManagement.vue | 8 ++++++--
1 file changed, 6 insertions(+), 2 deletions(-)
diff --git a/ui/src/views/authorizations/AuthorizationReferencesManagement.vue b/ui/src/views/authorizations/AuthorizationReferencesManagement.vue
index 44c5276dc..311ef0b5b 100644
--- a/ui/src/views/authorizations/AuthorizationReferencesManagement.vue
+++ b/ui/src/views/authorizations/AuthorizationReferencesManagement.vue
@@ -115,7 +115,7 @@
<template v-for="(listAuthorizationName, idx) in Object.keys(props.row.authorizations)">
<div v-bind:key="idx" class="columns">
<p class="column is-half">
- {{ listAuthorizationName }}
+ {{ listAuthorizationName }} {{ $t('ponctuation.colon')}}
</p>
<!-- TODO : voir pour traduire le nom des références dans la liste des rôles -->
<ul class="column is-half">
@@ -292,4 +292,8 @@ export default {
};
</script>
-<style scoped></style>
+<style lang="scss">
+li {
+ list-style-type: square;
+}
+</style>
--
GitLab
From 9a82bc86950903b76563daafd272487e5a23fefb Mon Sep 17 00:00:00 2001
From: lucile varloteaux <lucile.varloteaux@inrae.fr>
Date: Mon, 22 May 2023 11:44:09 +0200
Subject: [PATCH 16/18] =?UTF-8?q?affichage=20nom=20reference=20quand=20non?=
=?UTF-8?q?=20internationnalis=C3=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../views/authorizations/ReferencesAuthorizationInfoView.vue | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/ui/src/views/authorizations/ReferencesAuthorizationInfoView.vue b/ui/src/views/authorizations/ReferencesAuthorizationInfoView.vue
index 2cd0dcccf..182e7720d 100644
--- a/ui/src/views/authorizations/ReferencesAuthorizationInfoView.vue
+++ b/ui/src/views/authorizations/ReferencesAuthorizationInfoView.vue
@@ -75,7 +75,7 @@
<LoadingAnimate v-if="isLoading" :size="'is-large'"></LoadingAnimate>
<b-table :data="arrayReferences">
<b-table-column :label="$t('referencesManagement.references')" v-slot="props">
- {{ props.row.refNameLocal }}
+ {{ props.row.refNameLocal || props.row.label }}
</b-table-column>
<b-table-column :label="$t('referencesManagement.admin')" v-slot="props">
<b-checkbox-button type="is-light" v-model="props.row.isAdmin">
@@ -104,7 +104,7 @@
<div class="buttons">
<b-button
icon-left="plus"
- style="margin-bottom: 10px"
+ style="margin-bottom: 10px; margin-top: 10px"
type="is-dark"
@click="handleSubmit(createOrUpdateAuthorization)"
>
--
GitLab
From 2db3fc2107f08830c4254bb02c0dece0519340ee Mon Sep 17 00:00:00 2001
From: lucile varloteaux <lucile.varloteaux@inrae.fr>
Date: Tue, 23 May 2023 16:21:54 +0200
Subject: [PATCH 17/18] modif front page singnin
---
ui/src/components/login/Signin.vue | 6 ++++++
ui/src/style/_common.scss | 7 ++++---
2 files changed, 10 insertions(+), 3 deletions(-)
diff --git a/ui/src/components/login/Signin.vue b/ui/src/components/login/Signin.vue
index d6fc66fd3..af745cae8 100644
--- a/ui/src/components/login/Signin.vue
+++ b/ui/src/components/login/Signin.vue
@@ -103,3 +103,9 @@ export default class SignIn extends Vue {
}
}
</script>
+<style lang="scss">
+.icon.is-right.has-text-primary.is-clickable {
+ color: $primary !important;
+ background-color: transparent !important;
+}
+</style>
diff --git a/ui/src/style/_common.scss b/ui/src/style/_common.scss
index 80bfeba77..49e6819b6 100644
--- a/ui/src/style/_common.scss
+++ b/ui/src/style/_common.scss
@@ -87,9 +87,10 @@ a {
}
a {
color: $dark;
-}
-a.leaf {
- padding: 15px;
+ cursor: pointer;
+ .leaf {
+ padding: 15px;
+ }
}
p.folder {
padding-left: 15px;
--
GitLab
From c4e9e2bab246b2a31879f2701c44ada8124af43a Mon Sep 17 00:00:00 2001
From: TCHERNIATINSKY <philippe.tcherniatinsky@inrae.fr>
Date: Tue, 23 May 2023 17:58:43 +0200
Subject: [PATCH 18/18] =?UTF-8?q?Test=20=C3=A0=20refaire?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
ui/cypress/integration/authorizationsDatatypes_test.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/ui/cypress/integration/authorizationsDatatypes_test.js b/ui/cypress/integration/authorizationsDatatypes_test.js
index f23a91357..f926b069b 100644
--- a/ui/cypress/integration/authorizationsDatatypes_test.js
+++ b/ui/cypress/integration/authorizationsDatatypes_test.js
@@ -5,7 +5,7 @@ describe('test create application', () => {
cy.setLocale('fr');
});
- it('Test creation authorization admin ola', () => {
+ it.skip('Test creation authorization admin ola', () => {
cy.login("admin", ['applications/ore/ore_application_description.json'])
//cy.wait(['@postUserResponse', '@getApplicationResponse'])
const olaDataType = 'applications/ore/ola/ola.json'
--
GitLab