- ADD: Added new trait definition export and import format.

- CHG: Redesign of front page banners. - ADD: Added germplasm setup control/check marking mechanism. - CHG: Version bump in preparation for new release.
cropgeeks · Jun 5, 2024 · 500140c · 500140c
1 parent 69e52cb
commit 500140c
Show file tree

Hide file tree

Showing 15 changed files with 379 additions and 27 deletions.
diff --git a/components.d.ts b/components.d.ts
@@ -74,7 +74,7 @@ declare module 'vue' {
     ChangelogModal: typeof import('./src/components/modals/ChangelogModal.vue')['default']
     ColumnHeader: typeof import('./src/components/canvas/ColumnHeader.vue')['default']
     ConfirmModal: typeof import('./src/components/modals/ConfirmModal.vue')['default']
-    copy: typeof import('./src/components/icons/IconGridScore.vue')['default']
+    copy: typeof import('./src/components/modals/TraitImportExportTabularModal.vue')['default']
     DataCalendarHeatmapChart: typeof import('./src/components/charts/DataCalendarHeatmapChart.vue')['default']
     DataCanvas: typeof import('./src/components/canvas/DataCanvas.vue')['default']
     DataGridComponent: typeof import('./src/components/canvas/DataGridComponent.vue')['default']
@@ -191,6 +191,7 @@ declare module 'vue' {
     IBiLaptop: typeof import('~icons/bi/laptop')['default']
     IBiLayoutTextSidebar: typeof import('~icons/bi/layout-text-sidebar')['default']
     IBiLayoutThreeColumns: typeof import('~icons/bi/layout-three-columns')['default']
+    IBiList: typeof import('~icons/bi/list')['default']
     IBiListCheck: typeof import('~icons/bi/list-check')['default']
     IBiListTask: typeof import('~icons/bi/list-task')['default']
     IBiListUl: typeof import('~icons/bi/list-ul')['default']
@@ -279,6 +280,7 @@ declare module 'vue' {
     TraitIcon: typeof import('./src/components/icons/TraitIcon.vue')['default']
     TraitImportExportGerminateModal: typeof import('./src/components/modals/TraitImportExportGerminateModal.vue')['default']
     TraitImportExportGridScoreModal: typeof import('./src/components/modals/TraitImportExportGridScoreModal.vue')['default']
+    TraitImportExportTabularModal: typeof import('./src/components/modals/TraitImportExportTabularModal.vue')['default']
     TraitImportTrialModal: typeof import('./src/components/modals/TraitImportTrialModal.vue')['default']
     TraitInput: typeof import('./src/components/TraitInput.vue')['default']
     TraitInputSection: typeof import('./src/components/TraitInputSection.vue')['default']

diff --git a/package.json b/package.json
@@ -9,7 +9,7 @@
     "type": "git",
     "url": "https://github.com/cropgeeks/gridscore-next-client.git"
   },
-  "version": "3.0.0",
+  "version": "3.0.1",
   "private": false,
   "type": "module",
   "scripts": {

diff --git a/src/components/HomeBanners.vue b/src/components/HomeBanners.vue
@@ -1,21 +1,34 @@
 <template>
   <b-row>
-    <b-col cols=6 md=3 class="mb-4" v-for="banner in homeBanners" :key="`home-banner-${banner.id}`">
+    <b-col cols=12 md=6 class="mb-4" v-for="banner in homeBanners" :key="`home-banner-${banner.id}`">
       <b-card class="home-card h-100" no-body>
-        <b-card-img class="p-2 p-md-4 p-lg-5" :top="true" :src="`img/${banner.image}`" />
-        <b-card-body>
-          <b-card-title>{{ banner.title }}</b-card-title>
-          <b-card-subtitle>{{ banner.subtitle }}</b-card-subtitle>
-        </b-card-body>
-        <b-button variant="primary" class="stretched-link" :to="banner.to"><IBiCaretRight /> {{ $t('buttonSelect') }}</b-button>
+        <b-row class="g-0 h-100">
+          <b-col cols=5 xl=4 :class="storeDarkMode ? 'bg-dark' : 'bg-light'">
+            <b-card-img class="p-2 p-md-4 h-100" :src="`img/${banner.image}`" />
+          </b-col>
+          <b-col cols=7 xl=8>
+            <b-card-body class="d-flex flex-column justify-content-between h-100">
+              <div>
+                <b-card-title>{{ banner.title }}</b-card-title>
+                <b-card-subtitle>{{ banner.subtitle }}</b-card-subtitle>
+              </div>
+              <b-button variant="primary" class="align-self-start stretched-link" :to="banner.to"><IBiCaretRight /> {{ $t('buttonSelect') }}</b-button>
+            </b-card-body>
+          </b-col>
+        </b-row>
       </b-card>
     </b-col>
   </b-row>
 </template>
 
 <script>
+import { mapGetters } from 'vuex'
+
 export default {
   computed: {
+    ...mapGetters([
+      'storeDarkMode'
+    ]),
     homeBanners: function () {
       return [{
         id: 'setup',

diff --git a/src/components/TraitDefinitionComponent.vue b/src/components/TraitDefinitionComponent.vue
@@ -126,12 +126,14 @@
             <b-dropdown-group id="import-group" :header="$t('dropdownSectionImportTraits')">
               <b-dropdown-item-button @click="importExportJson(false)">{{ $t('dropdownOptionImportTraitsJson') }}</b-dropdown-item-button>
               <b-dropdown-item-button @click="importExportGerminate(false)">{{ $t('dropdownOptionImportTraitsGerminate') }}</b-dropdown-item-button>
+              <b-dropdown-item-button @click="importExportTabular(false)">{{ $t('dropdownOptionImportTraitsTabular') }}</b-dropdown-item-button>
               <b-dropdown-item-button @click="importOtherTrial">{{ $t('dropdownOptionImportTraitsOtherTrial') }}</b-dropdown-item-button>
               <b-dropdown-item-button @click="$refs.brapiTraitImportModal.show()">{{ $t('dropdownOptionImportTraitsBrapi') }}</b-dropdown-item-button>
             </b-dropdown-group>
             <b-dropdown-group id="export-group" :header="$t('dropdownSectionExportTraits')">
               <b-dropdown-item-button :disabled="!traits || traits.length < 1" @click="importExportJson(true)">{{ $t('dropdownOptionExportTraitsJson') }}</b-dropdown-item-button>
               <b-dropdown-item-button :disabled="!traits || traits.length < 1" @click="importExportGerminate(true)">{{ $t('dropdownOptionExportTraitsGerminate') }}</b-dropdown-item-button>
+              <b-dropdown-item-button :disabled="!traits || traits.length < 1" @click="importExportTabular(true)">{{ $t('dropdownOptionExportTraitsTabular') }}</b-dropdown-item-button>
             </b-dropdown-group>
           </b-dropdown>
         </div>
@@ -179,6 +181,7 @@
 
     <TraitImportExportGridScoreModal :traits="traitsToExport" ref="traitImportExportGridScoreModal" @data-changed="importTraits" />
     <TraitImportExportGerminateModal :traits="traitsToExport" ref="traitImportExportGerminateModal" @data-changed="importTraits" />
+    <TraitImportExportTabularModal :traits="traitsToExport" ref="traitImportExportTabularModal" @data-changed="importTraits" />
     <TraitImportTrialModal ref="traitImportTrialModal" @data-changed="importTraits" />
     <BrapiTraitImportModal ref="brapiTraitImportModal" @traits-selected="importBrapiTraits" />
   </div>
@@ -188,6 +191,7 @@
 import TraitImportExportGridScoreModal from '@/components/modals/TraitImportExportGridScoreModal.vue'
 import TraitImportTrialModal from '@/components/modals/TraitImportTrialModal.vue'
 import TraitImportExportGerminateModal from '@/components/modals/TraitImportExportGerminateModal.vue'
+import TraitImportExportTabularModal from '@/components/modals/TraitImportExportTabularModal.vue'
 import BrapiTraitImportModal from '@/components/modals/BrapiTraitImportModal.vue'
 import { getTraitTypeText } from '@/plugins/misc'
 import draggable from 'vuedraggable'
@@ -201,6 +205,7 @@ export default {
     draggable,
     TraitImportExportGridScoreModal,
     TraitImportExportGerminateModal,
+    TraitImportExportTabularModal,
     TraitImportTrialModal,
     BrapiTraitImportModal
   },
@@ -259,7 +264,9 @@ export default {
             delete t.editable
             delete t.color
             delete t.progress
-            t.timeframe = null
+            if (!t.timeframe) {
+              t.timeframe = null
+            }
             return t
           })
         } else {
@@ -407,6 +414,22 @@ export default {
     importOtherTrial: function () {
       this.$refs.traitImportTrialModal.show()
     },
+    importExportTabular: function (xport) {
+      if (xport && this.traits && this.traits.length > 0) {
+        const temp = JSON.parse(JSON.stringify(this.traits))
+        temp.forEach(t => {
+          delete t.id
+          delete t.progress
+          delete t.editable
+          delete t.color
+        })
+        this.traitsToExport = temp
+      } else {
+        this.traitsToExport = null
+      }
+
+      this.$nextTick(() => this.$refs.traitImportExportTabularModal.show())
+    },
     importExportGerminate: function (xport) {
       if (xport && this.traits && this.traits.length > 0) {
         const temp = JSON.parse(JSON.stringify(this.traits))

diff --git a/src/components/TrialLayoutGermplasmGrid.vue b/src/components/TrialLayoutGermplasmGrid.vue
@@ -1,13 +1,34 @@
 <template>
   <div>
-    <b-dropdown variant="primary">
-      <template #button-content>
-        <IBiFileEarmarkPlus /> {{ $t('buttonImportLayoutData') }}
-      </template>
-      <b-dropdown-item @click="$refs.germplasmInput.show()"><IBiTable /> {{ $t('dropdownImportGermplasmGrid') }}</b-dropdown-item>
-      <b-dropdown-item @click="$refs.repInput.show()"><IBiTable /> {{ $t('dropdownImportRepGrid') }}</b-dropdown-item>
-      <b-dropdown-item @click="$refs.fieldbookInput.show()"><IBiFileEarmarkSpreadsheet /> {{ $t('dropdownImportFieldHub') }}</b-dropdown-item>
-    </b-dropdown>
+    <b-form @submit.prevent>
+      <b-row>
+        <b-col cols=12 md=6>
+          <b-dropdown variant="primary">
+            <template #button-content>
+              <IBiFileEarmarkPlus /> {{ $t('buttonImportLayoutData') }}
+            </template>
+            <b-dropdown-item @click="$refs.germplasmInput.show()"><IBiTable /> {{ $t('dropdownImportGermplasmGrid') }}</b-dropdown-item>
+            <b-dropdown-item @click="$refs.repInput.show()"><IBiTable /> {{ $t('dropdownImportRepGrid') }}</b-dropdown-item>
+            <b-dropdown-item @click="$refs.fieldbookInput.show()"><IBiFileEarmarkSpreadsheet /> {{ $t('dropdownImportFieldHub') }}</b-dropdown-item>
+          </b-dropdown>
+        </b-col>
+        <b-col cols=12 md=6>
+          <b-form-group :label="$t('formLabelSetupGermplasmGridMarkCheck')" label-for="check">
+            <b-input-group>
+              <b-form-input id="check" v-model="checkName" @keyup.exact.enter="markChecks" />
+              <template #append>
+                <b-button @click="markChecks" :disabled="!checkName || checkName.length < 1"><IBiCheck2Square /></b-button>
+              </template>
+            </b-input-group>
+            <template #description>
+              <p class="mb-0">{{ $t('formDescriptionSetupGermplasmGridMarkCheck') }}</p>
+              <span class="me-3"><IBiListCheck /> <a href="#" @click.prevent="markAll(true)">{{ $t('buttonMarkAll') }}</a></span>
+              <span><IBiList /> <a href="#" @click.prevent="markAll(false)">{{ $t('buttonUnmarkAll') }}</a></span>
+            </template>
+          </b-form-group>
+        </b-col>
+      </b-row>
+    </b-form>
 
     <div class="table-responsive responsive-wrapper mt-3">
       <table ref="germplasmTable" class="table table-striped table-bordered grid-table" ></table>
@@ -48,7 +69,8 @@ export default {
   },
   data: function () {
     return {
-      germplasmMap: {}
+      germplasmMap: {},
+      checkName: null
     }
   },
   watch: {
@@ -73,6 +95,31 @@ export default {
     }
   },
   methods: {
+    markChecks: function () {
+      if (!this.checkName || this.checkName.length < 1) {
+        return
+      }
+
+      const match = this.checkName.trim().toLowerCase()
+      for (let row = 0; row < this.layout.rows; row++) {
+        for (let column = 0; column < this.layout.columns; column++) {
+          const germplasm = document.querySelector(`#germplasm-${row}-${column}`).value
+
+          if (germplasm && germplasm.trim().toLowerCase() === match) {
+            document.querySelector(`#control-${row}-${column}`).checked = true
+          }
+        }
+      }
+
+      this.checkName = null
+    },
+    markAll: function (mark) {
+      for (let row = 0; row < this.layout.rows; row++) {
+        for (let column = 0; column < this.layout.columns; column++) {
+          document.querySelector(`#control-${row}-${column}`).checked = mark
+        }
+      }
+    },
     updateTableFieldbook: function (dataMap) {
       this.germplasmMap = dataMap
 

diff --git a/src/components/charts/DataPersonBarChart.vue b/src/components/charts/DataPersonBarChart.vue
@@ -54,7 +54,7 @@ export default {
       const data = Object.values(this.chartData)
 
       const layout = {
-        height: data[0].y.length * 50,
+        height: Math.max(300, data[0].y.length * 50),
         margin: {
           t: 0
         },

diff --git a/src/components/modals/ChangelogModal.vue b/src/components/modals/ChangelogModal.vue
@@ -6,7 +6,7 @@
            no-fade
            size="lg"
            ref="changelogModal">
-    <p>{{ $t('modalTextChangelog') }}</p>
+    <p v-html="$t('modalTextChangelog')" />
 
     <b-pagination :per-page="perPage" :total-rows="totalCount" v-model="page" v-if="totalCount > perPage" />
 

diff --git a/src/components/modals/TraitImportExportGerminateModal.vue b/src/components/modals/TraitImportExportGerminateModal.vue
@@ -144,7 +144,7 @@ export default {
     },
     reset: function () {
       if (this.traits) {
-        let text = 'Name\tShort Name\tDescription\tData Type\tUnit Name\tUnit Abbreviation\tUnit Descriptions\tTrait categories (comma separated)\tMin (only for numeric traits)\tMax (only for numeric traits)'
+        let text = this.expectedColumns.join('\t')
 
         this.traits.forEach(t => {
           text += `\n${t.name}\t\t${t.description || ''}\t${this.toGerminateDataType(t.dataType)}\t\t\t\t${(t.restrictions && t.restrictions.categories) ? ('[[' + t.restrictions.categories.join(',') + ']]') : ''}\t${(t.restrictions && t.restrictions.min !== undefined && t.restrictions.min !== null) ? t.restrictions.min : ''}\t${(t.restrictions && t.restrictions.max !== undefined && t.restrictions.max !== null) ? t.restrictions.max : ''}`