From 294ce19700017197c1b0e4366da045ffdc1dd7f4 Mon Sep 17 00:00:00 2001
From: lucile varloteaux <lucile.varloteaux@inrae.fr>
Date: Thu, 26 Jan 2023 15:26:27 +0100
Subject: [PATCH 1/7] lissage front
---
ui/src/components/common/CollapsibleTree.vue | 38 ++++++----------
.../references/ReferencesDetailsPanel.vue | 18 ++++----
ui/src/style/_common.scss | 3 ++
.../references/ReferencesManagementView.vue | 43 ++++++++++++++-----
4 files changed, 57 insertions(+), 45 deletions(-)
diff --git a/ui/src/components/common/CollapsibleTree.vue b/ui/src/components/common/CollapsibleTree.vue
index 3c228f343..7a28b404c 100644
--- a/ui/src/components/common/CollapsibleTree.vue
+++ b/ui/src/components/common/CollapsibleTree.vue
@@ -8,24 +8,11 @@
@click="displayChildren = !displayChildren"
@keypress.enter="displayChildren = !displayChildren"
>
- <div
- class="CollapsibleTree-header-infos column is-variable is-half-desktop is-three-quarters-widescreen"
- >
- <div
- class="CollapsibleTree-header-infos column"
+ <div class="CollapsibleTree-header-infos column is-half" >
+ <div class="CollapsibleTree-header-infos column is-narrow"
:style="`transform:translate(${level * 50}px);`"
>
- <b-checkbox
- v-if="withRadios"
- v-model="innerOptionChecked"
- :name="radioName"
- @click.native="stopPropagation"
- :native-value="option.id"
- >
- {{ option.localName || option.label }}
- </b-checkbox>
<div
- v-else
:class="onClickLabelCb ? 'link' : ''"
@click="(event) => onClickLabelCb && onClickLabelCb(event, option.label)"
@keypress.enter="(event) => onClickLabelCb && onClickLabelCb(event, option.label)"
@@ -50,18 +37,19 @@
class="clickable mr-3"
tabindex="0"
/>
- <p > {{ option.localName || option.label }} </p>
+ <p> {{ option.localName || option.label }} </p>
<span class="file-name" v-if="refFile">
{{ refFile.name }}
</span>
-<!-- <span class="file-name" v-else-if="lineCount > 0">
- {{ $t("validation.count-line") }} {{ lineCount }}
- </span>-->
</div>
- <div
- :class="
+ <div v-if="option.localtags" class="column is-one-fifth">
+ <b-tag v-for="tag in option.localtags" :key="tag" class="is-primary is-light">
+ {{tag === 'no-tag' ? $t('tags.no-tag') : tag}}
+ </b-tag>
+ </div>
+ <div :class="
option.synthesisMinMax && onClickLabelSynthesisDetailCb
- ? 'tile synthesis-details link column is-variable is-10-desktop is-8-widescreen'
+ ? 'tile synthesis-details link column is-narrow'
: 'tile synthesis-details column'
"
@click="
@@ -98,17 +86,15 @@
{{ $t("validation.data-empty") }}
</span>
</div>
- <b-tag v-for="tag in option.localtags" :key="tag" class="is-primary is-light">
- {{tag=='no-tag'?$t('tags.no-tag'):tag}}
- </b-tag>
</div>
- <div class="CollapsibleTree-buttons column is-2">
+ <div class="CollapsibleTree-buttons column is-narrow">
<div class="file button is-small is-info" v-if="onUploadCb">
<b-upload
v-model="refFile"
class="file-label ml-1"
accept=".csv"
@input="() => onUploadCb(option.label, refFile) && showChildren()"
+ style="padding: 0px"
>
<span class="file-cta">
<b-icon icon="upload"></b-icon>
diff --git a/ui/src/components/references/ReferencesDetailsPanel.vue b/ui/src/components/references/ReferencesDetailsPanel.vue
index 854894cb2..c31ef6b7f 100644
--- a/ui/src/components/references/ReferencesDetailsPanel.vue
+++ b/ui/src/components/references/ReferencesDetailsPanel.vue
@@ -5,15 +5,15 @@
:open="open"
:title="reference && (reference.refNameLocal || reference.label)"
>
- <div v-if="tags">{{ $t('tags.tag') }} :
- <b-tag v-for="(tag) in reference.tags" :key="tag" class="is-primary is-light">
- <span v-if="tag=='no-tag'">
- {{ $t('tags.no-tag') }}
- </span>
- <span v-else>
- {{(tags[tag] && tags[tag].localName)|| tag}}
- </span>
- </b-tag>
+ <div v-if="tags" class="columns">
+ <h3 class="column">{{ $t('tags.tag') }}</h3>
+ <div class="column">
+ <b-tag v-for="(tag) in reference.tags" :key="tag" class="is-dark">
+ <span>
+ {{(tags[tag].localName === 'no-tag' ? $t('tags.no-tag') : tags[tag] && tags[tag].localName) || tag}}
+ </span>
+ </b-tag>
+ </div>
</div>
<div class="Panel-buttons">
<b-button icon-left="trash-alt" type="is-danger" @click="askDeletionConfirmation">{{
diff --git a/ui/src/style/_common.scss b/ui/src/style/_common.scss
index 5ad39bd60..9a8ece84d 100644
--- a/ui/src/style/_common.scss
+++ b/ui/src/style/_common.scss
@@ -140,6 +140,9 @@ a {
.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);
}
+.section {
+ padding: 1em;
+}
.pagination-link.is-current {
background-color: $dark;
border-color: $dark;
diff --git a/ui/src/views/references/ReferencesManagementView.vue b/ui/src/views/references/ReferencesManagementView.vue
index c3b4a8f5c..f2a3af721 100644
--- a/ui/src/views/references/ReferencesManagementView.vue
+++ b/ui/src/views/references/ReferencesManagementView.vue
@@ -22,16 +22,39 @@
</b-message>
</div>
</div>
- <b-field class="section" v-if="tags && Object.keys(tags).length>1">
- {{$t('tags.tag')}}
- <b-taglist>
- <b-tag v-for="(tag, index) in tags" :key="index" :icon="tag.selected?'check':''"
- :type="tag.selected?'is-primary':'is-white'"
- rounded @click="toggle(index)">
- {{ tag.localName }}
- </b-tag>
- </b-taglist>
- </b-field>
+ <b-collapse v-if="tags && Object.keys(tags).length>1"
+ class="card"
+ animation="slide"
+ aria-id="contentIdForA11y3">
+ <template #trigger="props">
+ <div
+ class="card-header"
+ role="button"
+ aria-controls="contentIdForA11y3"
+ :aria-expanded="props.open">
+ <p class="card-header-title">
+ {{$t('tags.tag')}}
+ </p>
+ <a class="card-header-icon">
+ <b-icon
+ :icon="props.open ? 'chevron-down' : 'chevron-up'">
+ </b-icon>
+ </a>
+ </div>
+ </template>
+ <div class="card-content">
+ <div class="content columns">
+ <b-field class="column is-narrow" v-for="(tag, index) in tags" :key="index" >
+ <b-switch
+ v-model="tag.selected"
+ passive-type='is-light'
+ type='is-dark'>
+ {{ tag.localName === 'no-tag' ? $t('tags.no-tag') : tag.localName }}
+ </b-switch>
+ </b-field>
+ </div>
+ </div>
+ </b-collapse>
<div class="section">
<CollapsibleTree
v-for="(ref, i) in referencesToBeShown"
--
GitLab
From dc84934f93da79f1460432424fc3eefb2573e65b Mon Sep 17 00:00:00 2001
From: lucile varloteaux <lucile.varloteaux@inrae.fr>
Date: Thu, 26 Jan 2023 15:38:16 +0100
Subject: [PATCH 2/7] mise en page slidePanel
---
.../components/references/ReferencesDetailsPanel.vue | 10 +++++++---
1 file changed, 7 insertions(+), 3 deletions(-)
diff --git a/ui/src/components/references/ReferencesDetailsPanel.vue b/ui/src/components/references/ReferencesDetailsPanel.vue
index c31ef6b7f..a5dbf068a 100644
--- a/ui/src/components/references/ReferencesDetailsPanel.vue
+++ b/ui/src/components/references/ReferencesDetailsPanel.vue
@@ -5,9 +5,13 @@
:open="open"
:title="reference && (reference.refNameLocal || reference.label)"
>
- <div v-if="tags" class="columns">
- <h3 class="column">{{ $t('tags.tag') }}</h3>
- <div class="column">
+ <div v-if="tags" class="card">
+ <div class="card-header">
+ <p class="card-header-title">
+ {{ $t('tags.tag') }}
+ </p>
+ </div>
+ <div class="card-content" style="margin-bottom: 12px">
<b-tag v-for="(tag) in reference.tags" :key="tag" class="is-dark">
<span>
{{(tags[tag].localName === 'no-tag' ? $t('tags.no-tag') : tags[tag] && tags[tag].localName) || tag}}
--
GitLab
From 1bb9dc3a3426c15bccf3ed37fa6e7c5810210412 Mon Sep 17 00:00:00 2001
From: lucile varloteaux <lucile.varloteaux@inrae.fr>
Date: Fri, 27 Jan 2023 14:38:33 +0100
Subject: [PATCH 3/7] ajout tag dataTypes
---
.../fr/inra/oresing/model/Configuration.java | 2 +
.../inra/oresing/rest/ApplicationResult.java | 1 +
.../fr/inra/oresing/rest/OreSiResources.java | 6 +-
.../data/monsore/monsore-with-repository.yaml | 1 +
.../references/ReferencesDetailsPanel.vue | 22 +++---
.../references/ReferencesManagementView.vue | 71 ++++++++++---------
6 files changed, 55 insertions(+), 48 deletions(-)
diff --git a/src/main/java/fr/inra/oresing/model/Configuration.java b/src/main/java/fr/inra/oresing/model/Configuration.java
index 1a0d12db0..08d98149a 100644
--- a/src/main/java/fr/inra/oresing/model/Configuration.java
+++ b/src/main/java/fr/inra/oresing/model/Configuration.java
@@ -360,6 +360,8 @@ public class Configuration {
@ApiModelProperty(notes = "If this section exists, the data file will be store on a repository tree", required = false)
private RepositoryDescription repository = null;
+ public List<String> tags = new LinkedList<>();
+
public static Map<String, InternationalizationDataTypeMap> getInternationalization(LinkedHashMap<String, DataTypeDescription> dataTypeDescriptionMap) {
Map<String, InternationalizationDataTypeMap> internationalizationDataTypeMapMap = new HashMap<>();
for (Map.Entry<String, DataTypeDescription> entry : dataTypeDescriptionMap.entrySet()) {
diff --git a/src/main/java/fr/inra/oresing/rest/ApplicationResult.java b/src/main/java/fr/inra/oresing/rest/ApplicationResult.java
index fdf513451..3baf3762b 100644
--- a/src/main/java/fr/inra/oresing/rest/ApplicationResult.java
+++ b/src/main/java/fr/inra/oresing/rest/ApplicationResult.java
@@ -67,6 +67,7 @@ public class ApplicationResult {
Map<String, Variable> variables;
Repository repository;
boolean hasAuthorizations;
+ Set<String> tags;
@Value
public static class Repository {
diff --git a/src/main/java/fr/inra/oresing/rest/OreSiResources.java b/src/main/java/fr/inra/oresing/rest/OreSiResources.java
index ed4f94aef..6a35f187f 100644
--- a/src/main/java/fr/inra/oresing/rest/OreSiResources.java
+++ b/src/main/java/fr/inra/oresing/rest/OreSiResources.java
@@ -181,7 +181,11 @@ public class OreSiResources {
return new ApplicationResult.DataType.Repository(filePattern, authorizationScope, startDate, endDate);
})
.orElse(null);
- return new ApplicationResult.DataType(dataType, dataType, variables, repositoryResult, hasAuthorizations);
+ final Set<String> tags = Optional.ofNullable(dataTypeDescription.getTags())
+ .filter(list->!list.isEmpty())
+ .map(t->new HashSet(t))
+ .orElse(new HashSet(List.of("no-tag")));
+ return new ApplicationResult.DataType(dataType, dataType, variables, repositoryResult, hasAuthorizations, tags);
}) : Map.of();
Configuration configuration = withConfiguration ? application.getConfiguration() : null;
ApplicationResult applicationResult = new ApplicationResult(application.getId().toString(), application.getName(), application.getConfiguration().getApplication().getName(), application.getComment(), application.getConfiguration().getInternationalization(), references, dataTypes, referenceSynthesis, configuration);
diff --git a/src/test/resources/data/monsore/monsore-with-repository.yaml b/src/test/resources/data/monsore/monsore-with-repository.yaml
index 4f7c54275..302f552e2 100644
--- a/src/test/resources/data/monsore/monsore-with-repository.yaml
+++ b/src/test/resources/data/monsore/monsore-with-repository.yaml
@@ -374,6 +374,7 @@ references:
nom de l'unité: null
dataTypes:
pem:
+ tags: [context]
internationalizationName:
fr: Piégeage en Montée
en: Trap in ascent
diff --git a/ui/src/components/references/ReferencesDetailsPanel.vue b/ui/src/components/references/ReferencesDetailsPanel.vue
index a5dbf068a..726ecbda2 100644
--- a/ui/src/components/references/ReferencesDetailsPanel.vue
+++ b/ui/src/components/references/ReferencesDetailsPanel.vue
@@ -5,19 +5,15 @@
:open="open"
:title="reference && (reference.refNameLocal || reference.label)"
>
- <div v-if="tags" class="card">
- <div class="card-header">
- <p class="card-header-title">
- {{ $t('tags.tag') }}
- </p>
- </div>
- <div class="card-content" style="margin-bottom: 12px">
- <b-tag v-for="(tag) in reference.tags" :key="tag" class="is-dark">
- <span>
- {{(tags[tag].localName === 'no-tag' ? $t('tags.no-tag') : tags[tag] && tags[tag].localName) || tag}}
- </span>
- </b-tag>
- </div>
+ <div class="columns">
+ <caption>
+ {{ $t('tags.tag') }} {{ $t('ponctuation.colon')}}
+ </caption>
+ <b-tag v-for="(tag) in reference.tags" :key="tag" class="is-dark">
+ <span>
+ {{(tags[tag].localName === 'no-tag' ? $t('tags.no-tag') : tags[tag] && tags[tag].localName) || tag}}
+ </span>
+ </b-tag>
</div>
<div class="Panel-buttons">
<b-button icon-left="trash-alt" type="is-danger" @click="askDeletionConfirmation">{{
diff --git a/ui/src/views/references/ReferencesManagementView.vue b/ui/src/views/references/ReferencesManagementView.vue
index f2a3af721..486b08e0c 100644
--- a/ui/src/views/references/ReferencesManagementView.vue
+++ b/ui/src/views/references/ReferencesManagementView.vue
@@ -22,39 +22,42 @@
</b-message>
</div>
</div>
- <b-collapse v-if="tags && Object.keys(tags).length>1"
- class="card"
- animation="slide"
- aria-id="contentIdForA11y3">
- <template #trigger="props">
- <div
- class="card-header"
- role="button"
- aria-controls="contentIdForA11y3"
- :aria-expanded="props.open">
- <p class="card-header-title">
- {{$t('tags.tag')}}
- </p>
- <a class="card-header-icon">
- <b-icon
- :icon="props.open ? 'chevron-down' : 'chevron-up'">
- </b-icon>
- </a>
+ <div class="column is-offset-one-third is-one-third">
+ <b-collapse v-if="tags && Object.keys(tags).length>1"
+ class="card"
+ :open="isOpen"
+ animation="slide"
+ aria-id="contentIdForA11y3">
+ <template #trigger="props">
+ <div
+ class="card-header"
+ role="button"
+ aria-controls="contentIdForA11y3"
+ :aria-expanded="props.open">
+ <p class="card-header-title">
+ {{$t('tags.tag')}}
+ </p>
+ <a class="card-header-icon">
+ <b-icon
+ :icon="props.open ? 'chevron-down' : 'chevron-up'">
+ </b-icon>
+ </a>
+ </div>
+ </template>
+ <div class="card-content">
+ <div class="content columns">
+ <b-field class="column is-narrow" v-for="(tag, index) in tags" :key="index" >
+ <b-switch
+ v-model="tag.selected"
+ passive-type='is-light'
+ type='is-dark'>
+ {{ tag.localName === 'no-tag' ? $t('tags.no-tag') : tag.localName }}
+ </b-switch>
+ </b-field>
+ </div>
</div>
- </template>
- <div class="card-content">
- <div class="content columns">
- <b-field class="column is-narrow" v-for="(tag, index) in tags" :key="index" >
- <b-switch
- v-model="tag.selected"
- passive-type='is-light'
- type='is-dark'>
- {{ tag.localName === 'no-tag' ? $t('tags.no-tag') : tag.localName }}
- </b-switch>
- </b-field>
- </div>
- </div>
- </b-collapse>
+ </b-collapse>
+ </div>
<div class="section">
<CollapsibleTree
v-for="(ref, i) in referencesToBeShown"
@@ -112,8 +115,9 @@ export default class ReferencesManagementView extends Vue {
references = [];
currentPage = 1;
+ isOpen = false;
openPanel = false;
- chosenRef = null;
+ chosenRef = {};
application = new ApplicationResult();
subMenuPaths = [];
errorsMessages = [];
@@ -146,7 +150,6 @@ export default class ReferencesManagementView extends Vue {
})
});
}
-
buildTags() {
let tags = {}
for (const reference of this.references) {
--
GitLab
From c21246e6a73343bd47d44b09b7e5c9aa3fd97d2d Mon Sep 17 00:00:00 2001
From: lucile varloteaux <lucile.varloteaux@inrae.fr>
Date: Wed, 1 Feb 2023 11:21:27 +0100
Subject: [PATCH 4/7] compenent fait
---
.../data/monsore/monsore-with-repository.yaml | 4 +-
ui/src/components/common/TagsCollapse.vue | 49 +++++
ui/src/views/common/MenuView.vue | 2 +-
.../datatype/DataTypesManagementView.vue | 65 +++++-
.../references/ReferencesManagementView.vue | 187 ++++++++----------
5 files changed, 194 insertions(+), 113 deletions(-)
create mode 100644 ui/src/components/common/TagsCollapse.vue
diff --git a/src/test/resources/data/monsore/monsore-with-repository.yaml b/src/test/resources/data/monsore/monsore-with-repository.yaml
index 302f552e2..c146ff542 100644
--- a/src/test/resources/data/monsore/monsore-with-repository.yaml
+++ b/src/test/resources/data/monsore/monsore-with-repository.yaml
@@ -5,7 +5,7 @@ application:
fr: SOERE mon SOERE avec dépôt
en: SOERE my SOERE with repository
name: MONSORE
- version: 1
+ version: 2
tags:
context:
@@ -374,7 +374,7 @@ references:
nom de l'unité: null
dataTypes:
pem:
- tags: [context]
+ tags: [context, data]
internationalizationName:
fr: Piégeage en Montée
en: Trap in ascent
diff --git a/ui/src/components/common/TagsCollapse.vue b/ui/src/components/common/TagsCollapse.vue
new file mode 100644
index 000000000..81a75ac1d
--- /dev/null
+++ b/ui/src/components/common/TagsCollapse.vue
@@ -0,0 +1,49 @@
+<template>
+ <b-collapse
+ class="card"
+ :open="open"
+ animation="slide"
+ aria-id="contentIdForA11y3"
+ >
+ <template #trigger="props">
+ <div
+ class="card-header"
+ role="button"
+ aria-controls="contentIdForA11y3"
+ :aria-expanded="props.open"
+ >
+ <p class="card-header-title">
+ {{ $t("tags.tag") }}
+ </p>
+ <a class="card-header-icon">
+ <b-icon :icon="props.open ? 'chevron-down' : 'chevron-up'"> </b-icon>
+ </a>
+ </div>
+ </template>
+ <div class="card-content">
+ <div class="content columns">
+ <b-field class="column is-narrow" v-for="(tag, index) in tags" :key="index">
+ <b-switch v-model="tag.selected" passive-type="is-light" type="is-dark">
+ {{ tag.localName === "no-tag" ? $t("tags.no-tag") : tag.localName }}
+ </b-switch>
+ </b-field>
+ </div>
+ </div>
+ </b-collapse>
+
+</template>
+
+<script>
+import { Component,Prop, Vue } from "vue-property-decorator";
+@Component({
+ components: {},
+})
+export default class TagsCollapse extends Vue {
+ @Prop() tags;
+ open = false;
+}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/ui/src/views/common/MenuView.vue b/ui/src/views/common/MenuView.vue
index c88d036ac..4f18bb45f 100644
--- a/ui/src/views/common/MenuView.vue
+++ b/ui/src/views/common/MenuView.vue
@@ -90,7 +90,7 @@
<FontAwesomeIcon
@click="open = !open"
- :icon="open ? 'caret-up' : 'caret-down'"
+ :icon="open ? 'chevron-up' : 'chevron-down'"
class="clickable mr-3 menu-view-collapsible-icon"
/>
</div>
diff --git a/ui/src/views/datatype/DataTypesManagementView.vue b/ui/src/views/datatype/DataTypesManagementView.vue
index 363d4d657..e7820a20a 100644
--- a/ui/src/views/datatype/DataTypesManagementView.vue
+++ b/ui/src/views/datatype/DataTypesManagementView.vue
@@ -14,6 +14,12 @@
}}
</h1>
+ <div class="column is-offset-one-third is-one-third">
+ <TagsCollapse
+ v-if="tags && Object.keys(tags).length > 1"
+ :tags="tags"
+ />
+ </div>
<AvailablityChart v-if="false" />
<div v-if="errorsMessages.length" style="margin: 10px">
<div v-for="msg in errorsMessages" :key="msg">
@@ -31,7 +37,7 @@
<div>
<CollapsibleTree
class="liste"
- v-for="(data, i) in dataTypes"
+ v-for="(data, i) in dataTypesToBeShown"
:id="i + 1"
:key="data.id"
:option="{
@@ -91,6 +97,7 @@ import DataTypeDetailsPanel from "@/components/datatype/DataTypeDetailsPanel.vue
import AvailablityChart from "@/components/charts/AvailiblityChart.vue";
import DetailModalCard from "@/components/charts/DetailModalCard";
import { DownloadDatasetQuery } from "@/model/application/DownloadDatasetQuery";
+import TagsCollapse from "@/components/common/TagsCollapse.vue";
@Component({
components: {
@@ -100,6 +107,7 @@ import { DownloadDatasetQuery } from "@/model/application/DownloadDatasetQuery";
SubMenu,
DataTypeDetailsPanel,
AvailablityChart,
+ TagsCollapse,
},
})
export default class DataTypesManagementView extends Vue {
@@ -125,7 +133,6 @@ export default class DataTypesManagementView extends Vue {
this.downloadDataType(label)
),
];
-
dataTypes = [];
errorsMessages = [];
errorsList = [];
@@ -135,6 +142,51 @@ export default class DataTypesManagementView extends Vue {
chosenDataType = null;
synthesis = {};
synthesisMinMax = {};
+ tags = {};
+
+ get dataTypesToBeShown() {
+ if (!this.tags) {
+ return this.dataTypes;
+ }
+ let selectedTags = Object.keys(this.tags).filter((t) => this.tags[t].selected);
+ if (!Object.keys(this.tags).length) {
+ return this.dataTypes;
+ }
+ return this.dataTypes.filter((dataType) => {
+ return dataType.tags.some((t) => {
+ return selectedTags.includes(t);
+ });
+ });
+ }
+ buildTags() {
+ let tags = {};
+ for (const dataType of this.dataTypes) {
+ let currentTags = dataType.tags;
+ if (!currentTags) {
+ continue;
+ }
+ for (const tagName of currentTags) {
+ if (tags[tagName]) {
+ continue;
+ }
+ tags[tagName] = {};
+ tags[tagName].selected = true;
+ let locale = this.internationalisationService.getLocaleforPath(
+ this.application,
+ "internationalizedTags." + tagName,
+ tagName
+ );
+ tags[tagName].localName = locale;
+ }
+ dataType.localtags = dataType.tags.map((tag) => tags[tag]?.localName || tag);
+ }
+ this.tags = tags;
+ }
+ toggle(tag) {
+ let tags = this.tags;
+ tags[tag].selected = !tags[tag].selected;
+ this.tags = tags;
+ }
created() {
this.subMenuPaths = [
@@ -150,7 +202,11 @@ export default class DataTypesManagementView extends Vue {
async init() {
try {
- this.application = await this.applicationService.getApplication(this.applicationName, ['CONFIGURATION','DATATYPE', 'SYNTHESIS']);
+ this.application = await this.applicationService.getApplication(this.applicationName, [
+ "CONFIGURATION",
+ "DATATYPE",
+ "SYNTHESIS",
+ ]);
this.application = {
...this.application,
localName: this.internationalisationService.mergeInternationalization(this.application)
@@ -163,6 +219,7 @@ export default class DataTypesManagementView extends Vue {
this.internationalisationService.localeDatatypeName(this.application)
);
await this.initSynthesis();
+ this.buildTags();
} catch (error) {
this.alertService.toastServerError();
}
@@ -320,4 +377,4 @@ export default class DataTypesManagementView extends Vue {
margin-bottom: 10px;
border: 1px solid white;
}
-</style>
\ No newline at end of file
+</style>
diff --git a/ui/src/views/references/ReferencesManagementView.vue b/ui/src/views/references/ReferencesManagementView.vue
index 486b08e0c..4238f0799 100644
--- a/ui/src/views/references/ReferencesManagementView.vue
+++ b/ui/src/views/references/ReferencesManagementView.vue
@@ -1,108 +1,79 @@
<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-page", {applicationName: application.localName}) }}
+ {{ $t("titles.references-page", { applicationName: application.localName }) }}
</h1>
<div v-if="errorsMessages.length" style="margin: 10px">
<div v-for="msg in errorsMessages" :key="msg">
<b-message
- :aria-close-label="$t('message.close')"
- :title="$t('message.data-type-config-error')"
- class="mt-4"
- has-icon
- type="is-danger"
+ :aria-close-label="$t('message.close')"
+ :title="$t('message.data-type-config-error')"
+ class="mt-4"
+ has-icon
+ type="is-danger"
>
- <span v-html="msg"/>
+ <span v-html="msg" />
</b-message>
</div>
</div>
<div class="column is-offset-one-third is-one-third">
- <b-collapse v-if="tags && Object.keys(tags).length>1"
- class="card"
- :open="isOpen"
- animation="slide"
- aria-id="contentIdForA11y3">
- <template #trigger="props">
- <div
- class="card-header"
- role="button"
- aria-controls="contentIdForA11y3"
- :aria-expanded="props.open">
- <p class="card-header-title">
- {{$t('tags.tag')}}
- </p>
- <a class="card-header-icon">
- <b-icon
- :icon="props.open ? 'chevron-down' : 'chevron-up'">
- </b-icon>
- </a>
- </div>
- </template>
- <div class="card-content">
- <div class="content columns">
- <b-field class="column is-narrow" v-for="(tag, index) in tags" :key="index" >
- <b-switch
- v-model="tag.selected"
- passive-type='is-light'
- type='is-dark'>
- {{ tag.localName === 'no-tag' ? $t('tags.no-tag') : tag.localName }}
- </b-switch>
- </b-field>
- </div>
- </div>
- </b-collapse>
+ <TagsCollapse
+ v-if="tags && Object.keys(tags).length > 1"
+ :tags="tags"
+ />
</div>
<div class="section">
<CollapsibleTree
- v-for="(ref, i) in referencesToBeShown"
- :id="i + 1"
- :key="ref.id"
- :application-title="$t('titles.references-page')"
- :buttons="buttons"
- :level="0"
- :line-count="lineCount(ref)"
- :on-click-label-cb="(event, label) => openRefDetails(event, label)"
- :on-upload-cb="(label, refFile) => uploadReferenceCsv(label, refFile)"
- :option="ref"
- class="liste"
+ v-for="(ref, i) in referencesToBeShown"
+ :id="i + 1"
+ :key="ref.id"
+ :application-title="$t('titles.references-page')"
+ :buttons="buttons"
+ :level="0"
+ :line-count="lineCount(ref)"
+ :on-click-label-cb="(event, label) => openRefDetails(event, label)"
+ :on-upload-cb="(label, refFile) => uploadReferenceCsv(label, refFile)"
+ :option="ref"
+ class="liste"
>
</CollapsibleTree>
<ReferencesDetailsPanel
- :close-cb="(newVal) => (openPanel = newVal)"
- :left-align="false"
- :open="openPanel"
- :reference="chosenRef"
- :tags="tags"
+ :close-cb="(newVal) => (openPanel = newVal)"
+ :left-align="false"
+ :open="openPanel"
+ :reference="chosenRef"
+ :tags="tags"
/>
</div>
</PageView>
</template>
<script>
-import {Component, Prop, Vue} from "vue-property-decorator";
-import {convertReferencesToTrees} from "@/utils/ConversionUtils";
+import { Component, Prop, Vue } from "vue-property-decorator";
+import { convertReferencesToTrees } from "@/utils/ConversionUtils";
import CollapsibleTree from "@/components/common/CollapsibleTree.vue";
+import TagsCollapse from "@/components/common/TagsCollapse.vue";
import ReferencesDetailsPanel from "@/components/references/ReferencesDetailsPanel.vue";
-import {ApplicationService} from "@/services/rest/ApplicationService";
-import {InternationalisationService} from "@/services/InternationalisationService";
-import {ReferenceService} from "@/services/rest/ReferenceService";
+import { ApplicationService } from "@/services/rest/ApplicationService";
+import { InternationalisationService } from "@/services/InternationalisationService";
+import { ReferenceService } from "@/services/rest/ReferenceService";
import PageView from "../common/PageView.vue";
-import {ApplicationResult} from "@/model/ApplicationResult";
-import SubMenu, {SubMenuPath} from "@/components/common/SubMenu.vue";
-import {AlertService} from "@/services/AlertService";
-import {Button} from "@/model/Button";
-import {HttpStatusCodes} from "@/utils/HttpUtils";
-import {ErrorsService} from "@/services/ErrorsService";
+import { ApplicationResult } from "@/model/ApplicationResult";
+import SubMenu, { SubMenuPath } from "@/components/common/SubMenu.vue";
+import { AlertService } from "@/services/AlertService";
+import { Button } from "@/model/Button";
+import { HttpStatusCodes } from "@/utils/HttpUtils";
+import { ErrorsService } from "@/services/ErrorsService";
@Component({
- components: {CollapsibleTree, ReferencesDetailsPanel, PageView, SubMenu},
+ components: { CollapsibleTree, TagsCollapse, ReferencesDetailsPanel, PageView, SubMenu },
})
export default class ReferencesManagementView extends Vue {
@Prop() applicationName;
@@ -124,34 +95,33 @@ export default class ReferencesManagementView extends Vue {
errorsList = [];
buttons = [
new Button(
- this.$t("referencesManagement.consult"),
- "eye",
- (label) => this.consultReference(label),
- "is-dark"
+ this.$t("referencesManagement.consult"),
+ "eye",
+ (label) => this.consultReference(label),
+ "is-dark"
),
new Button(this.$t("referencesManagement.download"), "download", (label) =>
- this.downloadReference(label)
+ this.downloadReference(label)
),
];
- tags={};
+ tags = {};
get referencesToBeShown() {
if (!this.tags) {
- return this.references
+ return this.references;
}
- let selectedTags = Object.keys(this.tags).filter(t => this.tags[t].selected)
+ let selectedTags = Object.keys(this.tags).filter((t) => this.tags[t].selected);
if (!Object.keys(this.tags).length) {
- return this.references
+ return this.references;
}
- return this.references
- .filter(reference => {
- return reference.tags.some(t => {
- return selectedTags.includes(t)
- })
- });
+ return this.references.filter((reference) => {
+ return reference.tags.some((t) => {
+ return selectedTags.includes(t);
+ });
+ });
}
buildTags() {
- let tags = {}
+ let tags = {};
for (const reference of this.references) {
let currentTags = reference.tags;
if (!currentTags) {
@@ -163,45 +133,51 @@ export default class ReferencesManagementView extends Vue {
}
tags[tagName] = {};
tags[tagName].selected = true;
- let locale = this.internationalisationService
- .getLocaleforPath(this.application, 'internationalizedTags.' + tagName, tagName)
+ let locale = this.internationalisationService.getLocaleforPath(
+ this.application,
+ "internationalizedTags." + tagName,
+ tagName
+ );
tags[tagName].localName = locale;
}
- reference.localtags = reference.tags.map(tag => tags[tag]?.localName || tag)
+ reference.localtags = reference.tags.map((tag) => tags[tag]?.localName || tag);
}
- this.tags= tags;
+ this.tags = tags;
}
created() {
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`)
),
];
this.init();
}
toggle(tag) {
- let tags = this.tags
- tags[tag].selected = !tags[tag].selected
- this.tags = tags
+ let tags = this.tags;
+ tags[tag].selected = !tags[tag].selected;
+ this.tags = tags;
}
async init() {
try {
- this.application = await this.applicationService.getApplication(this.applicationName, ['CONFIGURATION', 'REFERENCETYPE']);
+ this.application = await this.applicationService.getApplication(this.applicationName, [
+ "CONFIGURATION",
+ "REFERENCETYPE",
+ ]);
this.application = {
...this.application,
localName: this.internationalisationService.mergeInternationalization(this.application)
- .localName,
+ .localName,
};
if (!this.application?.id) {
return;
}
this.references = convertReferencesToTrees(
- Object.values(this.internationalisationService.treeReferenceName(this.application))
+ Object.values(this.internationalisationService.treeReferenceName(this.application))
);
this.buildTags();
} catch (error) {
@@ -236,8 +212,8 @@ export default class ReferencesManagementView extends Vue {
} else {
for (let j = 0; j < ref.children[n].children.length; j++) {
if (
- this.application.referenceSynthesis[i].referenceType ===
- ref.children[n].children[j].label
+ this.application.referenceSynthesis[i].referenceType ===
+ ref.children[n].children[j].label
) {
ref.children[n].children[j] = {
...ref.children[n].children[j],
@@ -297,7 +273,6 @@ export default class ReferencesManagementView extends Vue {
var ref = Object.values(this.application.references).find((ref) => ref.label === label);
return ref;
}
-
}
</script>
<style lang="scss" scoped>
@@ -305,4 +280,4 @@ export default class ReferencesManagementView extends Vue {
margin-bottom: 10px;
border: 1px solid white;
}
-</style>
\ No newline at end of file
+</style>
--
GitLab
From d5556fb591c9d9368c597e6118dd7f60b252c7ea Mon Sep 17 00:00:00 2001
From: lucile varloteaux <lucile.varloteaux@inrae.fr>
Date: Wed, 1 Feb 2023 15:04:27 +0100
Subject: [PATCH 5/7] =?UTF-8?q?r=C3=A9glage=20bug=20dataType?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../data/monsore/monsore-with-repository.yaml | 4 ++--
ui/src/components/common/CollapsibleTree.vue | 18 ++++++++++--------
.../datatype/DataTypeDetailsPanel.vue | 13 +++++++++++++
.../references/ReferencesDetailsPanel.vue | 6 ++++--
.../views/datatype/DataTypesManagementView.vue | 14 +++++++-------
.../references/ReferencesManagementView.vue | 10 ++++------
6 files changed, 40 insertions(+), 25 deletions(-)
diff --git a/src/test/resources/data/monsore/monsore-with-repository.yaml b/src/test/resources/data/monsore/monsore-with-repository.yaml
index c146ff542..fa81c720f 100644
--- a/src/test/resources/data/monsore/monsore-with-repository.yaml
+++ b/src/test/resources/data/monsore/monsore-with-repository.yaml
@@ -5,7 +5,7 @@ application:
fr: SOERE mon SOERE avec dépôt
en: SOERE my SOERE with repository
name: MONSORE
- version: 2
+ version: 3
tags:
context:
@@ -46,7 +46,7 @@ references:
esp_definition_en: null
colonne_homonyme_entre_referentiels: null
projet:
- tags: [context]
+ tags: [context, data]
internationalizationName:
fr: Projet
en: Project
diff --git a/ui/src/components/common/CollapsibleTree.vue b/ui/src/components/common/CollapsibleTree.vue
index 7a28b404c..76761cf66 100644
--- a/ui/src/components/common/CollapsibleTree.vue
+++ b/ui/src/components/common/CollapsibleTree.vue
@@ -8,7 +8,7 @@
@click="displayChildren = !displayChildren"
@keypress.enter="displayChildren = !displayChildren"
>
- <div class="CollapsibleTree-header-infos column is-half" >
+ <div class="CollapsibleTree-header-infos column is-two-thirds" >
<div class="CollapsibleTree-header-infos column is-narrow"
:style="`transform:translate(${level * 50}px);`"
>
@@ -41,15 +41,17 @@
<span class="file-name" v-if="refFile">
{{ refFile.name }}
</span>
- </div>
- <div v-if="option.localtags" class="column is-one-fifth">
- <b-tag v-for="tag in option.localtags" :key="tag" class="is-primary is-light">
- {{tag === 'no-tag' ? $t('tags.no-tag') : tag}}
- </b-tag>
+ <div v-if="option.localtags" class="column">
+ <div v-for="tag in option.localtags" :key="tag" >
+ <b-tag v-if="tag !== 'no-tag'" class="is-primary is-light">
+ {{ tag }}
+ </b-tag>
+ </div>
+ </div>
</div>
<div :class="
option.synthesisMinMax && onClickLabelSynthesisDetailCb
- ? 'tile synthesis-details link column is-narrow'
+ ? 'tile synthesis-details link column is-full'
: 'tile synthesis-details column'
"
@click="
@@ -59,7 +61,7 @@
onClickLabelSynthesisDetailCb(event, option)
"
>
- <span v-if="option.synthesisMinMax" class="synthesis-infos has-text-info-dark">
+ <span v-if="option.synthesisMinMax" class="synthesis-infos has-text-info-dark column is-full">
<b-field v-show="false">
{{
new Date(option.synthesisMinMax[0]).toLocaleDateString("fr") +
diff --git a/ui/src/components/datatype/DataTypeDetailsPanel.vue b/ui/src/components/datatype/DataTypeDetailsPanel.vue
index f545ca6d6..9c9d9e765 100644
--- a/ui/src/components/datatype/DataTypeDetailsPanel.vue
+++ b/ui/src/components/datatype/DataTypeDetailsPanel.vue
@@ -5,6 +5,18 @@
:title="dataType && (dataType.localName || dataType.label)"
:close-cb="closeCb"
>
+ <div class="columns">
+ <caption>
+ {{ $t('tags.tag') }} {{ $t('ponctuation.colon')}}
+ </caption>
+ <div v-for="(tag) in dataType.tags" :key="tag" style="margin: 5px">
+ <b-tag class="is-primary">
+ <span>
+ {{(tags[tag].localName === 'no-tag' ? $t('tags.no-tag') : tags[tag] && tags[tag].localName) || tag}}
+ </span>
+ </b-tag>
+ </div>
+ </div>
<div class="Panel-buttons">
<b-button type="is-dark" icon-left="key" @click="consultAuthorization">{{
$t("dataTypesManagement.consult-authorization")
@@ -26,6 +38,7 @@ export default class DataTypeDetailsPanel extends Vue {
@Prop() dataType;
@Prop() closeCb;
@Prop() applicationName;
+ @Prop() tags;
consultAuthorization() {
this.$router.push(
diff --git a/ui/src/components/references/ReferencesDetailsPanel.vue b/ui/src/components/references/ReferencesDetailsPanel.vue
index 726ecbda2..843da59fe 100644
--- a/ui/src/components/references/ReferencesDetailsPanel.vue
+++ b/ui/src/components/references/ReferencesDetailsPanel.vue
@@ -9,11 +9,13 @@
<caption>
{{ $t('tags.tag') }} {{ $t('ponctuation.colon')}}
</caption>
- <b-tag v-for="(tag) in reference.tags" :key="tag" class="is-dark">
+ <div v-for="(tag) in reference.tags" :key="tag" style="margin: 5px">
+ <b-tag class="is-dark">
<span>
{{(tags[tag].localName === 'no-tag' ? $t('tags.no-tag') : tags[tag] && tags[tag].localName) || tag}}
</span>
- </b-tag>
+ </b-tag>
+ </div>
</div>
<div class="Panel-buttons">
<b-button icon-left="trash-alt" type="is-danger" @click="askDeletionConfirmation">{{
diff --git a/ui/src/views/datatype/DataTypesManagementView.vue b/ui/src/views/datatype/DataTypesManagementView.vue
index e7820a20a..4b2e1d75f 100644
--- a/ui/src/views/datatype/DataTypesManagementView.vue
+++ b/ui/src/views/datatype/DataTypesManagementView.vue
@@ -64,6 +64,7 @@
:data-type="chosenDataType"
:close-cb="(newVal) => (openPanel = newVal)"
:application-name="applicationName"
+ :tags="tags"
/>
<b-modal class="modalByAgrégation" v-model="openSynthesisDetailPanel" width="100rem">
<DetailModalCard
@@ -139,7 +140,7 @@ export default class DataTypesManagementView extends Vue {
openPanel = false;
openSynthesisDetailPanel = false;
currentOptions = {};
- chosenDataType = null;
+ chosenDataType = {};
synthesis = {};
synthesisMinMax = {};
tags = {};
@@ -171,12 +172,11 @@ export default class DataTypesManagementView extends Vue {
}
tags[tagName] = {};
tags[tagName].selected = true;
- let locale = this.internationalisationService.getLocaleforPath(
- this.application,
- "internationalizedTags." + tagName,
- tagName
+ tags[tagName].localName = this.internationalisationService.getLocaleforPath(
+ this.application,
+ "internationalizedTags." + tagName,
+ tagName
);
- tags[tagName].localName = locale;
}
dataType.localtags = dataType.tags.map((tag) => tags[tag]?.localName || tag);
}
@@ -218,8 +218,8 @@ export default class DataTypesManagementView extends Vue {
this.dataTypes = Object.values(
this.internationalisationService.localeDatatypeName(this.application)
);
- await this.initSynthesis();
this.buildTags();
+ await this.initSynthesis();
} catch (error) {
this.alertService.toastServerError();
}
diff --git a/ui/src/views/references/ReferencesManagementView.vue b/ui/src/views/references/ReferencesManagementView.vue
index 4238f0799..22a28f7fc 100644
--- a/ui/src/views/references/ReferencesManagementView.vue
+++ b/ui/src/views/references/ReferencesManagementView.vue
@@ -86,7 +86,6 @@ export default class ReferencesManagementView extends Vue {
references = [];
currentPage = 1;
- isOpen = false;
openPanel = false;
chosenRef = {};
application = new ApplicationResult();
@@ -133,12 +132,11 @@ export default class ReferencesManagementView extends Vue {
}
tags[tagName] = {};
tags[tagName].selected = true;
- let locale = this.internationalisationService.getLocaleforPath(
- this.application,
- "internationalizedTags." + tagName,
- tagName
+ tags[tagName].localName = this.internationalisationService.getLocaleforPath(
+ this.application,
+ "internationalizedTags." + tagName,
+ tagName
);
- tags[tagName].localName = locale;
}
reference.localtags = reference.tags.map((tag) => tags[tag]?.localName || tag);
}
--
GitLab
From de99c1ebbf5bd24bc41ce08d0b91c72a3258a9f9 Mon Sep 17 00:00:00 2001
From: lucile varloteaux <lucile.varloteaux@inrae.fr>
Date: Wed, 1 Feb 2023 15:53:01 +0100
Subject: [PATCH 6/7] afichage tags en ligne sur la liste des ref et dataType
---
.../resources/data/monsore/monsore-with-repository.yaml | 9 ++++++---
ui/src/components/common/CollapsibleTree.vue | 8 ++++----
2 files changed, 10 insertions(+), 7 deletions(-)
diff --git a/src/test/resources/data/monsore/monsore-with-repository.yaml b/src/test/resources/data/monsore/monsore-with-repository.yaml
index fa81c720f..08a074def 100644
--- a/src/test/resources/data/monsore/monsore-with-repository.yaml
+++ b/src/test/resources/data/monsore/monsore-with-repository.yaml
@@ -5,7 +5,7 @@ application:
fr: SOERE mon SOERE avec dépôt
en: SOERE my SOERE with repository
name: MONSORE
- version: 3
+ version: 1
tags:
context:
@@ -14,6 +14,9 @@ tags:
data:
fr: données
en: data
+ test:
+ fr: test
+ en: test
compositeReferences:
sites:
components:
@@ -46,7 +49,7 @@ references:
esp_definition_en: null
colonne_homonyme_entre_referentiels: null
projet:
- tags: [context, data]
+ tags: [context, data, test]
internationalizationName:
fr: Projet
en: Project
@@ -374,7 +377,7 @@ references:
nom de l'unité: null
dataTypes:
pem:
- tags: [context, data]
+ tags: [context, data, test]
internationalizationName:
fr: Piégeage en Montée
en: Trap in ascent
diff --git a/ui/src/components/common/CollapsibleTree.vue b/ui/src/components/common/CollapsibleTree.vue
index 76761cf66..8fa33c351 100644
--- a/ui/src/components/common/CollapsibleTree.vue
+++ b/ui/src/components/common/CollapsibleTree.vue
@@ -42,17 +42,17 @@
{{ refFile.name }}
</span>
<div v-if="option.localtags" class="column">
- <div v-for="tag in option.localtags" :key="tag" >
+ <span v-for="tag in option.localtags" :key="tag" style="margin-left: 5px">
<b-tag v-if="tag !== 'no-tag'" class="is-primary is-light">
{{ tag }}
</b-tag>
- </div>
+ </span>
</div>
</div>
<div :class="
option.synthesisMinMax && onClickLabelSynthesisDetailCb
- ? 'tile synthesis-details link column is-full'
- : 'tile synthesis-details column'
+ ? 'tile synthesis-details link column is-four-fifths'
+ : 'tile synthesis-details column is-full'
"
@click="
(event) =>
--
GitLab
From 69607a89b89d822e03d7086d2eb821f4abe2ba33 Mon Sep 17 00:00:00 2001
From: lucile varloteaux <lucile.varloteaux@inrae.fr>
Date: Thu, 2 Feb 2023 11:22:02 +0100
Subject: [PATCH 7/7] =?UTF-8?q?petit=20bug=20affichage=20de=20derni=C3=A8r?=
=?UTF-8?q?e=20minute?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
ui/src/components/common/TagsCollapse.vue | 2 +-
ui/src/components/datatype/DataTypeDetailsPanel.vue | 4 ++--
ui/src/components/references/ReferencesDetailsPanel.vue | 8 ++++----
3 files changed, 7 insertions(+), 7 deletions(-)
diff --git a/ui/src/components/common/TagsCollapse.vue b/ui/src/components/common/TagsCollapse.vue
index 81a75ac1d..b902eb41d 100644
--- a/ui/src/components/common/TagsCollapse.vue
+++ b/ui/src/components/common/TagsCollapse.vue
@@ -21,7 +21,7 @@
</div>
</template>
<div class="card-content">
- <div class="content columns">
+ <div class="content columns" style="display: flex; flex-wrap: wrap;">
<b-field class="column is-narrow" v-for="(tag, index) in tags" :key="index">
<b-switch v-model="tag.selected" passive-type="is-light" type="is-dark">
{{ tag.localName === "no-tag" ? $t("tags.no-tag") : tag.localName }}
diff --git a/ui/src/components/datatype/DataTypeDetailsPanel.vue b/ui/src/components/datatype/DataTypeDetailsPanel.vue
index 9c9d9e765..645eda8bd 100644
--- a/ui/src/components/datatype/DataTypeDetailsPanel.vue
+++ b/ui/src/components/datatype/DataTypeDetailsPanel.vue
@@ -10,9 +10,9 @@
{{ $t('tags.tag') }} {{ $t('ponctuation.colon')}}
</caption>
<div v-for="(tag) in dataType.tags" :key="tag" style="margin: 5px">
- <b-tag class="is-primary">
+ <b-tag class="is-primary" v-if="tags[tag].localName !== 'no-tag'">
<span>
- {{(tags[tag].localName === 'no-tag' ? $t('tags.no-tag') : tags[tag] && tags[tag].localName) || tag}}
+ {{ tags[tag].localName }}
</span>
</b-tag>
</div>
diff --git a/ui/src/components/references/ReferencesDetailsPanel.vue b/ui/src/components/references/ReferencesDetailsPanel.vue
index 843da59fe..6ee112f31 100644
--- a/ui/src/components/references/ReferencesDetailsPanel.vue
+++ b/ui/src/components/references/ReferencesDetailsPanel.vue
@@ -10,10 +10,10 @@
{{ $t('tags.tag') }} {{ $t('ponctuation.colon')}}
</caption>
<div v-for="(tag) in reference.tags" :key="tag" style="margin: 5px">
- <b-tag class="is-dark">
- <span>
- {{(tags[tag].localName === 'no-tag' ? $t('tags.no-tag') : tags[tag] && tags[tag].localName) || tag}}
- </span>
+ <b-tag class="is-primary" v-if="tags[tag].localName !== 'no-tag'">
+ <span>
+ {{ tags[tag].localName }}
+ </span>
</b-tag>
</div>
</div>
--
GitLab