From fde2081f36e968611acc05b303ce86188d02ecd4 Mon Sep 17 00:00:00 2001 From: lucile varloteaux <lucile.varloteaux@inrae.fr> Date: Mon, 4 Apr 2022 15:24:17 +0200 Subject: [PATCH 1/3] =?UTF-8?q?r=C3=A9paration=20checkbox?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ui/src/components/charts/DetailModalCard.vue | 9 +- .../components/common/AuthorizationTable.vue | 183 +++++++++--------- ui/src/components/common/CollapsibleTree.vue | 12 +- ui/src/style/_common.scss | 3 + .../DataTypeAuthorizationInfoView.vue | 5 +- .../DataTypeAuthorizationsView.vue | 19 +- .../datatype/DataTypesManagementView.vue | 7 +- .../references/ReferencesManagementView.vue | 4 +- 8 files changed, 122 insertions(+), 120 deletions(-) diff --git a/ui/src/components/charts/DetailModalCard.vue b/ui/src/components/charts/DetailModalCard.vue index 535a2cd87..be2f248b2 100644 --- a/ui/src/components/charts/DetailModalCard.vue +++ b/ui/src/components/charts/DetailModalCard.vue @@ -21,11 +21,11 @@ v-show="key !== 'minmax' && key !== 'ranges'" style="margin: 0; cursor: auto" > - <p class="card-header-title column is-1" style="margin-left: 10px" v-if="key!==''"> + <p class="card-header-title column is-1" style="margin-left: 10px" v-if="key !== ''"> {{ key }} </p> <p class="card-header-title column is-1" style="margin-left: 10px" v-else> - {{ $t("validation.modal-synthesis-variable-default") }} + {{ $t("validation.modal-synthesis-variable-default") }} </p> <availiblity-chart class="column is-10" @@ -41,7 +41,8 @@ v-if="Object.values(option).length > 4" style="text-align: center" > - <b-icon class="btnCard" :icon="props.open ? 'chevron-down' : 'chevron-up'"> </b-icon> + <b-icon class="btnCard" :icon="props.open ? 'chevron-down' : 'chevron-up'"> + </b-icon> </a> </div> </template> @@ -88,7 +89,7 @@ export default class DetailModalCard extends Vue { @Prop() applicationName; collapse = true; mounted() { - for(let i = 1; i<=document.getElementsByClassName("btnCard").length-1; i++) { + for (let i = 1; i <= document.getElementsByClassName("btnCard").length - 1; i++) { document.getElementsByClassName("btnCard").item(i).click(); } } diff --git a/ui/src/components/common/AuthorizationTable.vue b/ui/src/components/common/AuthorizationTable.vue index 362f4f31a..5b68c293b 100644 --- a/ui/src/components/common/AuthorizationTable.vue +++ b/ui/src/components/common/AuthorizationTable.vue @@ -16,18 +16,18 @@ <a v-if=" column.display && - indexColumn == 'label' && + indexColumn === 'label' && (!scope.isLeaf || remainingOption.length) " :class="!scope.isLeaf || remainingOption.length ? 'leaf' : 'folder'" :field="indexColumn" - @click="indexColumn == 'label' && toggle(index)" + @click="indexColumn === 'label' && toggle(index)" >{{ localName(scope) }}</a > <p v-else-if=" column.display && - indexColumn == 'label' && + indexColumn === 'label' && !(!scope.isLeaf || remainingOption.length) " :class="!scope.isLeaf || remainingOption.length ? 'leaf' : 'folder'" @@ -36,7 +36,11 @@ {{ localName(scope) }} </p> - <b-field v-else-if="column.display && indexColumn != 'extraction'" :field="indexColumn"> + <b-field + v-else-if="column.display && indexColumn !== 'extraction'" + :field="indexColumn" + class="column" + > <b-icon :icon=" (statesIcons && statesIcons[indexColumn] && statesIcons[indexColumn][index]) || @@ -48,91 +52,92 @@ /> </b-field> <b-field - v-else-if="column.display && indexColumn == 'extraction'" + v-else-if="column.display && indexColumn === 'extraction'" :field="indexColumn" - class="row" + class="columns " style="margin-top: 6px" > - <div class="columns"> + <div class="column"> <b-icon :icon=" (statesIcons && statesIcons[indexColumn] && statesIcons[indexColumn][index]) || 'square' " - class="column" size="is-medium" type="is-primary" @click.native="selectCheckbox($event, index, indexColumn, scope)" /> - <b-taginput - v-if=" - states && - states[indexColumn] && - states[indexColumn][index] == 1 && - localAuthorizationsTree && - localAuthorizationsTree[indexColumn] && - localAuthorizationsTree[indexColumn][index] - " - v-model="localAuthorizationsTree[indexColumn][index].dataGroups" - :data="dataGroups" - :open-on-focus="true" - :placeholder="$t('dataTypeAuthorizations.data-groups-placeholder')" - :value="dataGroups.id" - autocomplete - class="column" - field="label" - type="is-primary" - @input.capture="selectCheckbox($event, index, indexColumn, scope)" - > - </b-taginput> - <div - v-if=" - states && - states[indexColumn] && - states[indexColumn][index] == 1 && - localAuthorizationsTree && - localAuthorizationsTree[indexColumn] && - localAuthorizationsTree[indexColumn][index] - " - class="column" - > - <b-datepicker - v-model="localAuthorizationsTree[indexColumn][index].from" - :date-parser="parseDate" - :placeholder=" - $t('dataTypesRepository.placeholder-datepicker') + - ' dd-MM-YYYY, dd-MM-YYYY hh, dd-MM-YYYY hh:mm, dd-MM-YYYY hh:mm:ss' + <div class="columns"> + <b-taginput + v-if=" + states && + states[indexColumn] && + states[indexColumn][index] === 1 && + localAuthorizationsTree && + localAuthorizationsTree[indexColumn] && + localAuthorizationsTree[indexColumn][index] " - editable - icon="calendar" - @remove.capture="() => selectCheckbox($event, index, indexColumn, scope)" - @input.capture="selectCheckbox($event, index, indexColumn, scope, 'from')" + v-model="localAuthorizationsTree[indexColumn][index].dataGroups" + :data="dataGroups" + :open-on-focus="true" + :placeholder="$t('dataTypeAuthorizations.data-groups-placeholder')" + :value="dataGroups.id" + autocomplete + class="column" + field="label" + type="is-primary" + @input.capture="selectCheckbox($event, index, indexColumn, scope)" > - </b-datepicker> - </div> - <div - v-if=" - states && - states[indexColumn] && - states[indexColumn][index] == 1 && - localAuthorizationsTree && - localAuthorizationsTree[indexColumn] && - localAuthorizationsTree[indexColumn][index] - " - class="column" - > - <b-datepicker - v-model="localAuthorizationsTree[indexColumn][index].to" - :date-parser="parseDate" - :placeholder=" - $t('dataTypesRepository.placeholder-datepicker') + - ' dd-MM-YYYY, dd-MM-YYYY hh, dd-MM-YYYY hh:mm, dd-MM-YYYY hh:mm:ss' + </b-taginput> + <div + v-if=" + states && + states[indexColumn] && + states[indexColumn][index] === 1 && + localAuthorizationsTree && + localAuthorizationsTree[indexColumn] && + localAuthorizationsTree[indexColumn][index] + " + class="column" + > + <b-datepicker + v-model="localAuthorizationsTree[indexColumn][index].from" + :date-parser="parseDate" + :placeholder=" + $t('dataTypesRepository.placeholder-datepicker') + + ' dd-MM-YYYY, dd-MM-YYYY hh, dd-MM-YYYY hh:mm, dd-MM-YYYY hh:mm:ss' + " + editable + icon="calendar" + @remove.capture="() => selectCheckbox($event, index, indexColumn, scope)" + @input.capture="selectCheckbox($event, index, indexColumn, scope, 'from')" + > + </b-datepicker> + </div> + <div + v-if=" + states && + states[indexColumn] && + states[indexColumn][index] === 1 && + localAuthorizationsTree && + localAuthorizationsTree[indexColumn] && + localAuthorizationsTree[indexColumn][index] " - editable - icon="calendar" - @input="selectCheckbox($event, index, indexColumn, scope, 'to')" + class="column" > - </b-datepicker> + <b-datepicker + v-model="localAuthorizationsTree[indexColumn][index].to" + :date-parser="parseDate" + :placeholder=" + $t('dataTypesRepository.placeholder-datepicker') + + ' dd-MM-YYYY, dd-MM-YYYY hh, dd-MM-YYYY hh:mm, dd-MM-YYYY hh:mm:ss' + " + editable + icon="calendar" + @input="selectCheckbox($event, index, indexColumn, scope, 'to')" + > + </b-datepicker> + </div> </div> </div> </b-field> @@ -204,7 +209,7 @@ export default class AuthorizationTable extends Vue { if (scope) { var requiredAuthorizationForIndex = requiredAuthorization[scope] || ""; requiredAuthorizationForIndex = - requiredAuthorizationForIndex + (requiredAuthorizationForIndex == "" ? "" : ".") + index; + requiredAuthorizationForIndex + (requiredAuthorizationForIndex === "" ? "" : ".") + index; requiredAuthorization[this.authorizationScopes[0].id] = requiredAuthorizationForIndex; } requiredAuthorizationByIndex[index] = requiredAuthorization; @@ -222,7 +227,7 @@ export default class AuthorizationTable extends Vue { this.initStates(); this.initOpen(); this.$children - .filter((child) => child.name == "AuthorizationTable") + .filter((child) => child.name === "AuthorizationTable") .forEach((child) => child.updateAuthorizationTree()); } @@ -269,7 +274,7 @@ export default class AuthorizationTable extends Vue { var states = {}; var statesIcons = {}; for (var index in this.columnsVisible) { - if ("label" == index) { + if ("label" === index) { continue; } states[index] = {}; @@ -315,8 +320,8 @@ export default class AuthorizationTable extends Vue { statesIcons[type][reference] = this.STATES[value]; this.states = states; this.statesIcons = statesIcons; - if (value == -1) return; - if (this.remainingOption.length == 0 && this.authReference[reference].isLeaf) { + if (value === -1) return; + if (this.remainingOption.length === 0 && this.authReference[reference].isLeaf) { return; } if (updateChildren) { @@ -332,7 +337,7 @@ export default class AuthorizationTable extends Vue { } getChildAuthorizationTable() { - return this.$children.filter((child) => child.name == "AuthorizationTable"); + return this.$children.filter((child) => child.name === "AuthorizationTable"); } parseDate(date) { @@ -420,7 +425,7 @@ export default class AuthorizationTable extends Vue { emitAddAuthorization(event, index) { let localAuthorizationsTree = this.localAuthorizationsTree; var isEqual = event.isEqual; - if (isEqual.state == 1) { + if (isEqual.state === 1) { localAuthorizationsTree = localAuthorizationsTree || {}; localAuthorizationsTree[event.indexColumn] = localAuthorizationsTree[event.indexColumn] || {}; localAuthorizationsTree[event.indexColumn][index] = @@ -428,7 +433,7 @@ export default class AuthorizationTable extends Vue { isEqual.auth.requiredAuthorization = this.requiredAuthorizationByindex[index]; localAuthorizationsTree[event.indexColumn][index] = isEqual.auth; isEqual = this.buildState(event.indexColumn, index); - } else if (isEqual.state == -1) { + } else if (isEqual.state === -1) { localAuthorizationsTree = localAuthorizationsTree || {}; localAuthorizationsTree[event.indexColumn] = localAuthorizationsTree[event.indexColumn] || {}; localAuthorizationsTree[event.indexColumn][index] = @@ -500,7 +505,7 @@ export default class AuthorizationTable extends Vue { //cliock sur checkbox this.states[indexColumn] || this.initStates(); var states, state; - if (actualState == 1) { + if (actualState === 1) { //je supprime l'authorization et eventuellement son contenant delete localAuthorizationsTree?.[indexColumn]?.[index]; if ( @@ -537,7 +542,7 @@ export default class AuthorizationTable extends Vue { eventType = event ? "add-authorization" : "delete-authorization"; localAuthorizationsTree[indexColumn][index][fromOrTo] = event; } - if (this.EXTRACTION == indexColumn) { + if (this.EXTRACTION === indexColumn) { if (event instanceof Array) { //c'est un datagroup state = event.length ? 1 : 0; @@ -595,7 +600,7 @@ export default class AuthorizationTable extends Vue { var localAuthorizationsTree = { ...this.localAuthorizationsTree }; if ( !localAuthorizationsTree[indexColumn] || - Object.keys(localAuthorizationsTree[indexColumn]).length == 0 + Object.keys(localAuthorizationsTree[indexColumn]).length === 0 ) { isEqual.equal = true; isEqual.state = 0; @@ -609,9 +614,9 @@ export default class AuthorizationTable extends Vue { if (isEqual.auth) { isEqual.equal = auth && - JSON.stringify(isEqual.auth.dataGroups) == JSON.stringify(auth.dataGroups) && - isEqual.auth.from?.toString() == auth.from?.toString() && - isEqual.auth.to?.toString() == auth.to?.toString(); + JSON.stringify(isEqual.auth.dataGroups) === JSON.stringify(auth.dataGroups) && + isEqual.auth.from?.toString() === auth.from?.toString() && + isEqual.auth.to?.toString() === auth.to?.toString(); } } } @@ -661,7 +666,7 @@ p { ::marker { color: transparent; } -ul.rows { - margin-bottom: 12px; +.column{ + padding: 6px; } </style> diff --git a/ui/src/components/common/CollapsibleTree.vue b/ui/src/components/common/CollapsibleTree.vue index 06a8dc97e..23ad4c86c 100644 --- a/ui/src/components/common/CollapsibleTree.vue +++ b/ui/src/components/common/CollapsibleTree.vue @@ -43,7 +43,7 @@ <span class="file-name" v-if="refFile"> {{ refFile.name }} </span> - <span class="file-name" v-else-if="lineCount>0"> + <span class="file-name" v-else-if="lineCount > 0"> {{ $t("validation.count-line") }} {{ lineCount }} </span> <span v-else-if="!option.synthesisMinMax" class="nodata has-text-danger"> @@ -101,8 +101,12 @@ @click="repositoryRedirect(option.label)" type="is-info" > - <span class="file-cta" style=" border-color: transparent; background-color: transparent"> - <b-icon class="file-icon" icon="archive" style="font-size: 0.75rem; color: white"></b-icon> + <span class="file-cta" style="border-color: transparent; background-color: transparent"> + <b-icon + class="file-icon" + icon="archive" + style="font-size: 0.75rem; color: white" + ></b-icon> </span> </b-button> </div> @@ -155,7 +159,7 @@ export default class CollapsibleTree extends Vue { @Prop() radioName; @Prop() repository; @Prop() repositoryRedirect; - @Prop( { default: 0 }) lineCount; + @Prop({ default: 0 }) lineCount; @Prop({ default: null }) applicationTitle; displayChildren = false; diff --git a/ui/src/style/_common.scss b/ui/src/style/_common.scss index bbd81a615..314c8a555 100644 --- a/ui/src/style/_common.scss +++ b/ui/src/style/_common.scss @@ -183,6 +183,9 @@ a.dropdown-item.is-active, .dropdown .dropdown-menu .has-link a.is-active, butto .textarea:not([rows]) { min-height: 4em; } +.icon.has-text-primary.is-medium { + width: 32px; +} // mise en forme modal card synthèse #ranges { diff --git a/ui/src/views/authorizations/DataTypeAuthorizationInfoView.vue b/ui/src/views/authorizations/DataTypeAuthorizationInfoView.vue index 211a72fd8..320ce4d54 100644 --- a/ui/src/views/authorizations/DataTypeAuthorizationInfoView.vue +++ b/ui/src/views/authorizations/DataTypeAuthorizationInfoView.vue @@ -57,6 +57,7 @@ :authorizations-tree="authorizationsTree" :columnsVisible="columnsVisible" :dataGroups="dataGroups" + :authorizations-to-save="authorizationsToSave" :remaining-option="authReferences.slice && authReferences.slice(1, authReferences.length)" :required-authorizations="{}" class="rows" @@ -153,10 +154,10 @@ export default class DataTypeAuthorizationInfoView extends Vue { columnsVisible = { label: { title: "Label", display: true }, //dataGroups: {title: this.$t('dataTypeAuthorizations.data-groups'), display: true}, + extraction: { title: "Extraction", display: true }, admin: { title: "Admin", display: true }, depot: { title: "Dépôt", display: true }, publication: { title: "Publication", display: true }, - extraction: { title: "Extraction", display: true }, }; period = this.periods.FROM_DATE_TO_DATE; startDate = null; @@ -435,7 +436,7 @@ export default class DataTypeAuthorizationInfoView extends Vue { extractAuthorizations(authorizationTree) { var authorizationArray = []; - if (!authorizationTree || Object.keys(authorizationTree).length == 0) { + if (!authorizationTree || Object.keys(authorizationTree).length === 0) { return authorizationArray; } for (const key in authorizationTree) { diff --git a/ui/src/views/authorizations/DataTypeAuthorizationsView.vue b/ui/src/views/authorizations/DataTypeAuthorizationsView.vue index 9001497cd..1a69cd388 100644 --- a/ui/src/views/authorizations/DataTypeAuthorizationsView.vue +++ b/ui/src/views/authorizations/DataTypeAuthorizationsView.vue @@ -16,7 +16,7 @@ <div class="rows"> <div class="row"> <div class="columns"> - <div class="card column is-2"> + <div class="column is-offset-10 is-2"> <b-button icon-left="plus" type="is-primary is-right" @click="addAuthorization"> {{ $t("dataTypeAuthorizations.add-auhtorization") }} </b-button> @@ -25,7 +25,6 @@ </div> <b-table - v-if="authorizations" :data="authorizations" :isFocusable="true" :isHoverable="true" @@ -36,16 +35,6 @@ class="row" height="100%" > - <!--b-table-column - v-slot="props" - :label="$t('dataTypeAuthorizations.user')" - b-table-column - field="user" - sortable - > - {{ props.row.user }} - </b-table-column--> - <b-table-column v-slot="props" :label="$t('dataTypeAuthorizations.name')" @@ -75,12 +64,12 @@ </b-table-column> <b-table-column v-slot="props" :label="$t('dataTypeAuthorizations.actions')" b-table-column> <b-button - icon-left="trash-alt" + icon-left="times-circle" size="is-small" - type="is-danger" + type="is-danger is-light" @click="revoke(props.row.id)" + style="height: 1.5em; background-color: transparent; font-size: 1.45rem" > - {{ $t("dataTypeAuthorizations.revoke") }} </b-button> </b-table-column> </b-table> diff --git a/ui/src/views/datatype/DataTypesManagementView.vue b/ui/src/views/datatype/DataTypesManagementView.vue index e1ae218e1..c1a962dd2 100644 --- a/ui/src/views/datatype/DataTypesManagementView.vue +++ b/ui/src/views/datatype/DataTypesManagementView.vue @@ -133,10 +133,9 @@ export default class DataTypesManagementView extends Vue { created() { this.subMenuPaths = [ new SubMenuPath( - this.$t("dataTypesManagement.data-types").toLowerCase(), - () => { - }, - () => this.$router.push("/applications") + this.$t("dataTypesManagement.data-types").toLowerCase(), + () => {}, + () => this.$router.push("/applications") ), ]; diff --git a/ui/src/views/references/ReferencesManagementView.vue b/ui/src/views/references/ReferencesManagementView.vue index 3976e60d2..b4c0597e2 100644 --- a/ui/src/views/references/ReferencesManagementView.vue +++ b/ui/src/views/references/ReferencesManagementView.vue @@ -19,7 +19,7 @@ :onUploadCb="(label, refFile) => uploadReferenceCsv(label, refFile)" :buttons="buttons" :applicationTitle="$t('titles.references-page')" - :lineCount = lineCount(ref) + :lineCount="lineCount(ref)" > </CollapsibleTree> <ReferencesDetailsPanel @@ -119,7 +119,7 @@ export default class ReferencesManagementView extends Vue { } } lineCount(ref) { - for (let i=0; i<=this.application.referenceSynthesis.length-1 ; i++) { + for (let i = 0; i <= this.application.referenceSynthesis.length - 1; i++) { if (this.application.referenceSynthesis[i].referenceType === ref.label) { return this.application.referenceSynthesis[i].lineCount; } -- GitLab From ed78e265e75d3051815c2dd8eb48bb83cef4c0af Mon Sep 17 00:00:00 2001 From: lucile varloteaux <lucile.varloteaux@inrae.fr> Date: Thu, 7 Apr 2022 17:18:42 +0200 Subject: [PATCH 2/3] =?UTF-8?q?bug=20affichage=20r=C3=A9gl=C3=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/common/AuthorizationTable.vue | 40 +++++-------------- 1 file changed, 9 insertions(+), 31 deletions(-) diff --git a/ui/src/components/common/AuthorizationTable.vue b/ui/src/components/common/AuthorizationTable.vue index 5b68c293b..5e11ad108 100644 --- a/ui/src/components/common/AuthorizationTable.vue +++ b/ui/src/components/common/AuthorizationTable.vue @@ -67,16 +67,16 @@ type="is-primary" @click.native="selectCheckbox($event, index, indexColumn, scope)" /> - <div class="columns"> - <b-taginput - v-if=" + <div class="columns" + v-if=" states && states[indexColumn] && states[indexColumn][index] === 1 && localAuthorizationsTree && localAuthorizationsTree[indexColumn] && localAuthorizationsTree[indexColumn][index] - " + "> + <b-taginput v-model="localAuthorizationsTree[indexColumn][index].dataGroups" :data="dataGroups" :open-on-focus="true" @@ -86,20 +86,10 @@ class="column" field="label" type="is-primary" - @input.capture="selectCheckbox($event, index, indexColumn, scope)" + @input="selectCheckbox($event, index, indexColumn, scope)" > </b-taginput> - <div - v-if=" - states && - states[indexColumn] && - states[indexColumn][index] === 1 && - localAuthorizationsTree && - localAuthorizationsTree[indexColumn] && - localAuthorizationsTree[indexColumn][index] - " - class="column" - > + <div class="column"> <b-datepicker v-model="localAuthorizationsTree[indexColumn][index].from" :date-parser="parseDate" @@ -110,21 +100,11 @@ editable icon="calendar" @remove.capture="() => selectCheckbox($event, index, indexColumn, scope)" - @input.capture="selectCheckbox($event, index, indexColumn, scope, 'from')" + @input="selectCheckbox($event, index, indexColumn, scope, 'from')" > </b-datepicker> </div> - <div - v-if=" - states && - states[indexColumn] && - states[indexColumn][index] === 1 && - localAuthorizationsTree && - localAuthorizationsTree[indexColumn] && - localAuthorizationsTree[indexColumn][index] - " - class="column" - > + <div class="column" > <b-datepicker v-model="localAuthorizationsTree[indexColumn][index].to" :date-parser="parseDate" @@ -535,7 +515,6 @@ export default class AuthorizationTable extends Vue { state = event.length ? 1 : 0; eventType = event.length ? "add-authorization" : "delete-authorization"; localAuthorizationsTree[indexColumn][index].dataGroups = event; - // si indeterminate alors je ne supprime les enfants que } else if (event instanceof Date) { state = event ? 1 : 0; @@ -548,8 +527,7 @@ export default class AuthorizationTable extends Vue { state = event.length ? 1 : 0; eventType = event.length ? "add-authorization" : "delete-authorization"; localAuthorizationsTree[indexColumn][index].dataGroups = event; - - // si indeterminate alors je ne supprime les enfants que + // si indeterminate alors je ne supprime que les enfants } else if (event instanceof Date) { //c'est une date state = event ? 1 : 0; -- GitLab From 2e82d6cea7421f386e0649309d54fb5b988b249a Mon Sep 17 00:00:00 2001 From: lucile varloteaux <lucile.varloteaux@inrae.fr> Date: Thu, 7 Apr 2022 17:33:12 +0200 Subject: [PATCH 3/3] =?UTF-8?q?am=C3=A9lioration=20visuel=20page?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../views/authorizations/DataTypeAuthorizationInfoView.vue | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/ui/src/views/authorizations/DataTypeAuthorizationInfoView.vue b/ui/src/views/authorizations/DataTypeAuthorizationInfoView.vue index 320ce4d54..1f7a40ebf 100644 --- a/ui/src/views/authorizations/DataTypeAuthorizationInfoView.vue +++ b/ui/src/views/authorizations/DataTypeAuthorizationInfoView.vue @@ -16,7 +16,7 @@ </h1> <ValidationObserver ref="observer" v-slot="{ handleSubmit }"> - <ValidationProvider v-slot="{ errors, valid }" name="users" rules="required" vid="users"> + <ValidationProvider v-slot="{ errors, valid }" name="users" rules="required" vid="users" class="columns"> <b-field :label="$t('dataTypeAuthorizations.users')" :message="errors[0]" @@ -24,7 +24,7 @@ 'is-danger': errors && errors.length > 0, 'is-success': valid, }" - class="mb-4" + class="column mb-4" > <b-select v-model="usersToAuthorize" @@ -45,7 +45,7 @@ 'is-danger': errors && errors.length > 0, 'is-success': valid, }" - class="mb-4" + class="column mb-4" > <b-input v-model="name" /> </b-field> -- GitLab