From fc5832a6343f03fd3ea48b37dcb7612644a79f88 Mon Sep 17 00:00:00 2001
From: lucile varloteaux <lucile.varloteaux@inrae.fr>
Date: Fri, 8 Apr 2022 12:42:26 +0200
Subject: [PATCH 1/3] =?UTF-8?q?mise=20en=20place=20du=20visuel=20des=20pro?=
=?UTF-8?q?pri=C3=A9t=C3=A9=20de=20taxon=20(test)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
ui/src/style/_common.scss | 5 +++++
ui/src/views/references/ReferenceTableView.vue | 2 +-
2 files changed, 6 insertions(+), 1 deletion(-)
diff --git a/ui/src/style/_common.scss b/ui/src/style/_common.scss
index 314c8a555..ed58235f3 100644
--- a/ui/src/style/_common.scss
+++ b/ui/src/style/_common.scss
@@ -199,3 +199,8 @@ a.dropdown-item.is-active, .dropdown .dropdown-menu .has-link a.is-active, butto
margin: auto;
}
}
+
+.b-table .table td.is-sticky{
+ position: initial;
+ z-index: 0;
+}
\ No newline at end of file
diff --git a/ui/src/views/references/ReferenceTableView.vue b/ui/src/views/references/ReferenceTableView.vue
index 673c46dc7..2ce843da3 100644
--- a/ui/src/views/references/ReferenceTableView.vue
+++ b/ui/src/views/references/ReferenceTableView.vue
@@ -18,7 +18,7 @@
:isHoverable="true"
:sticky-header="true"
height="100%"
- style="padding-bottom: 20px"
+ style="padding-bottom: 20px; position: relative; z-index: 1"
>
<b-table-column
v-for="column in columns"
--
GitLab
From 9316c3c2af1abdd132d56ea8cbd44b2c509973d5 Mon Sep 17 00:00:00 2001
From: lucile varloteaux <lucile.varloteaux@inrae.fr>
Date: Fri, 8 Apr 2022 12:49:47 +0200
Subject: [PATCH 2/3] =?UTF-8?q?cr=C3=A9ation=20de=20la=20modal=20pour=20le?=
=?UTF-8?q?s=20propri=C3=A9t=C3=A9s=20de=20taxon?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../views/references/ReferenceTableView.vue | 71 ++++++++++++++-----
1 file changed, 53 insertions(+), 18 deletions(-)
diff --git a/ui/src/views/references/ReferenceTableView.vue b/ui/src/views/references/ReferenceTableView.vue
index 2ce843da3..cbd2af344 100644
--- a/ui/src/views/references/ReferenceTableView.vue
+++ b/ui/src/views/references/ReferenceTableView.vue
@@ -12,32 +12,56 @@
<div v-if="reference && columns">
<b-table
- :data="tableValues"
- :striped="true"
- :isFocusable="true"
- :isHoverable="true"
- :sticky-header="true"
- height="100%"
- style="padding-bottom: 20px; position: relative; z-index: 1"
+ :data="tableValues"
+ :striped="true"
+ :isFocusable="true"
+ :isHoverable="true"
+ :sticky-header="true"
+ height="100%"
+ style="padding-bottom: 20px; position: relative;z-index: 1;"
>
<b-table-column
- v-for="column in columns"
- :key="column.id"
- :field="column.id"
- :label="column.title"
- sortable
- :sticky="column.key"
- v-slot="props"
+ v-for="column in columns"
+ :key="column.id"
+ :field="column.id"
+ :label="column.title"
+ sortable
+ :sticky="column.key"
+ v-slot="props"
>
- <span v-if="column.id != '#'">
+ <span v-if="column.id === 'nom du taxon déterminé'">
+ <a @click="showModal(props.row[column.id])">
+ {{ props.row[column.id] }}</a
+ >
+ <b-modal
+ v-show="isSelectedName === props.row[column.id]"
+ v-model="isCardModalActive"
+ width = 70%
+ data-backdrop="static"
+ >
+ <div class="card">
+ <div class="card-header">
+ <div class="title card-header-title">
+ <p field="name">{{ props.row[column.id] }}</p>
+ </div>
+ </div>
+ <div class="card-content">
+ {{ props.row['propriétés de taxons'] }}
+ <!-- TO DO Ã mettre en forme
+ <b-table :data="data" :columns="columns"/> -->
+ </div>
+ </div>
+ </b-modal>
+ </span>
+ <span v-else-if="column.id !== '#'">
{{ props.row[column.id] }}
</span>
<b-collapse v-else :open="false">
<template #trigger>
<b-button
- :label="'' + (tableValues.indexOf(props.row) + 1)"
- type="is-small"
- aria-controls="contentIdForA11y1"
+ :label="'' + (tableValues.indexOf(props.row) + 1)"
+ type="is-small"
+ aria-controls="contentIdForA11y1"
/>
</template>
{{ referenceValues[tableValues.indexOf(props.row)].naturalKey }}
@@ -95,6 +119,17 @@ export default class ReferenceTableView extends Vue {
currentPage = 1;
perPage = 15;
+ // show modal and cards
+ isSelectedName = "";
+ isCardModalActive = false;
+ nameColumn = 'nom du taxon déterminé';
+
+ showModal(name) {
+ this.isSelectedName = name;
+ this.isCardModalActive = true;
+ console.log(this.tableValues[0]);
+ }
+
async created() {
await this.init();
this.setInitialVariables();
--
GitLab
From e6461200811a40523cc25c9ba54266bcec8ec7b1 Mon Sep 17 00:00:00 2001
From: lucile varloteaux <lucile.varloteaux@inrae.fr>
Date: Fri, 8 Apr 2022 17:06:56 +0200
Subject: [PATCH 3/3] =?UTF-8?q?affichage=20des=20propri=C3=A9t=C3=A9s=20de?=
=?UTF-8?q?=20taxon=20dans=20la=20modal?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
ui/src/views/references/ReferenceTableView.vue | 17 ++++++++++++-----
1 file changed, 12 insertions(+), 5 deletions(-)
diff --git a/ui/src/views/references/ReferenceTableView.vue b/ui/src/views/references/ReferenceTableView.vue
index cbd2af344..b52c47dcd 100644
--- a/ui/src/views/references/ReferenceTableView.vue
+++ b/ui/src/views/references/ReferenceTableView.vue
@@ -42,13 +42,15 @@
<div class="card">
<div class="card-header">
<div class="title card-header-title">
- <p field="name">{{ props.row[column.id] }}</p>
+ <p field="name">Propriétés de {{ props.row[column.id] }}</p>
</div>
</div>
<div class="card-content">
- {{ props.row['propriétés de taxons'] }}
- <!-- TO DO Ã mettre en forme
- <b-table :data="data" :columns="columns"/> -->
+ <ul>
+ <li v-for="item in taxonTbl.proprietes_taxon" :key="item.code_sandre">
+ {{ item }}
+ </li>
+ </ul>
</div>
</div>
</b-modal>
@@ -123,11 +125,16 @@ export default class ReferenceTableView extends Vue {
isSelectedName = "";
isCardModalActive = false;
nameColumn = 'nom du taxon déterminé';
+ taxonTbl = [];
showModal(name) {
this.isSelectedName = name;
this.isCardModalActive = true;
- console.log(this.tableValues[0]);
+ for(let i =0; i<this.tableValues.length; i++) {
+ if (this.tableValues[i][this.nameColumn] === name) {
+ this.taxonTbl = this.tableValues[i];
+ }
+ }
}
async created() {
--
GitLab