Merge remote-tracking branch 'origin/3.1.3'

biogenome-client/config.json

@@ -382,36 +382,6 @@
           "displayName": "menu.organismsMap"
         }
       ]
-    },
-    {
-      "name": "forms",
-      "displayName": "menu.forms",
-      "meta": {
-        "icon": "vuestic-iconset-forms"
-      },
-      "disabled": true,
-      "children": [
-        {
-          "name": "crud-table",
-          "displayName": "menu.adminArea"
-        },
-        {
-          "name": "insdc-forms",
-          "displayName": "menu.insdcForms"
-        },
-        {
-          "name": "organism-form",
-          "displayName": "menu.organismForm"
-        },
-        {
-          "name": "spreadsheet-upload",
-          "displayName": "menu.importLocalSamples"
-        },
-        {
-          "name": "goat-upload",
-          "displayName": "menu.goatUpload"
-        }
-      ]
     }
   ]
 }

biogenome-client/src/App.vue

@@ -42,4 +42,7 @@
   text {
     font-size: .8rem;
   }
+  .c-h {
+    min-height: 400px;
+  }
 </style>

biogenome-client/src/components/InfoBlock.vue

@@ -7,6 +7,8 @@
                         :label="chart.label" />
                     <DateLineChart v-else-if="chart.type === 'dateline'" :label="chart.label" :field="chart.field"
                         :title="chart.title" :model="chart.model" :color="chart.color" />
+                    <BarChart v-else-if="chart.type === 'bar'" :label="chart.label" :field="chart.field"
+                        :title="chart.title" :model="chart.model" :color="chart.color" />
                     <ContributorList v-else-if="chart.type === 'contribution'" :field="chart.field" :model="chart.model"
                         :title="chart.title" />
                     <CustomList v-else-if="chart.type === 'list'" :title="chart.title" :field="chart.field"
@@ -27,12 +29,11 @@ import ContributorList from './stats/ContributorList.vue'
 import PieChart from './charts/PieChart.vue'
 import { InfoBlock } from '../data/types'
 import CustomList from './stats/CustomList.vue'
-
+import BarChart from './charts/BarChart.vue'
 const props = defineProps<{
     charts: InfoBlock[]
 }>()
 
 
 
-</script>
-
+</script>

biogenome-client/src/components/charts/BarChart.vue

@@ -0,0 +1,44 @@
+<template>
+    <va-card class="chart-widget">
+        <va-card-title>{{ t(title) }}</va-card-title>
+        <va-card-content>
+            <va-chart class="chart" :options="{ scales: { yAxes: { display: false } } }"
+                :data="createLineChartData(data)" type="bar" />
+        </va-card-content>
+    </va-card>
+</template>
+<script setup lang="ts">
+import StatisticsService from '../../services/clients/StatisticsService'
+import VaChart from '../../components/va-charts/VaChart.vue'
+import { TLineChartData } from '../../data/types'
+import { useI18n } from 'vue-i18n'
+const { t } = useI18n()
+
+const props = defineProps<{
+    model: string,
+    field: string,
+    title: string,
+    label: string,
+    color?: string,
+}>()
+const primaryColorVariants = ['#2c82e0', '#ef476f', '#ffd166', '#06d6a0', '#8338ec']
+
+const { data } = await StatisticsService.getModelFieldStats(props.model, { field: props.field })
+
+function createLineChartData(data: Record<string, number>): TLineChartData {
+
+    const orderedValues = Object.fromEntries(Object.entries(data).sort(([k, v], [k1, v1]) => v - v1))
+    const datasets = [
+        {
+            label: t(props.label),
+            backgroundColor: props.color ? props.color : primaryColorVariants,
+            data: Object.values(orderedValues),
+        }
+    ];
+
+    return {
+        labels: Object.keys(orderedValues),
+        datasets: datasets,
+    };
+}
+</script>

biogenome-client/src/components/navbar/components/AppNavbarActions.vue

@@ -2,83 +2,84 @@
   <div class="app-navbar-actions">
     <LanguageDropdown class="app-navbar-actions__item" />
     <ProfileDropdown class="app-navbar-actions__item app-navbar-actions__item--profile">
-      <span v-if="globalStore.isAuthenticated">{{ userName }}</span>
+      <va-chip icon="settings" flat color="primary" v-if="globalStore.isAuthenticated"
+        :to="{ name: 'cms-organisms' }">{{ userName }}</va-chip>
     </ProfileDropdown>
   </div>
 </template>
 
 <script setup lang="ts">
-  import LanguageDropdown from './dropdowns/LanguageDropdown.vue'
-  import ProfileDropdown from './dropdowns/ProfileDropdown.vue'
-  import { useGlobalStore } from '../../../stores/global-store'
+import LanguageDropdown from './dropdowns/LanguageDropdown.vue'
+import ProfileDropdown from './dropdowns/ProfileDropdown.vue'
+import { useGlobalStore } from '../../../stores/global-store'
 
-  const globalStore = useGlobalStore()
+const globalStore = useGlobalStore()
 
-  withDefaults(
-    defineProps<{
-      userName?: string
-      isTopBar?: boolean
-    }>(),
-    {
-      userName: '',
-      isTopBar: false,
-    },
-  )
+withDefaults(
+  defineProps<{
+    userName?: string
+    isTopBar?: boolean
+  }>(),
+  {
+    userName: '',
+    isTopBar: false,
+  },
+)
 
-  defineEmits<{
-    (e: 'update:isTopBar', isTopBar: boolean): void
-  }>()
+defineEmits<{
+  (e: 'update:isTopBar', isTopBar: boolean): void
+}>()
 
 </script>
 
 <style lang="scss">
-  .app-navbar-actions {
-    display: flex;
-    align-items: center;
+.app-navbar-actions {
+  display: flex;
+  align-items: center;
 
-    .va-dropdown__anchor {
-      color: var(--va-primary);
-      fill: var(--va-primary);
-    }
+  .va-dropdown__anchor {
+    color: var(--va-primary);
+    fill: var(--va-primary);
+  }
 
-    &__item {
-      padding: 0;
-      margin-left: 1.25rem;
-      margin-right: 1.25rem;
+  &__item {
+    padding: 0;
+    margin-left: 1.25rem;
+    margin-right: 1.25rem;
 
-      svg {
-        height: 24px;
-      }
+    svg {
+      height: 24px;
+    }
 
-      &:last-of-type {
-        margin-right: 0;
-      }
+    &:last-of-type {
+      margin-right: 0;
+    }
 
-      &--profile {
-        display: flex;
-        justify-content: center;
-        margin: auto 0 auto 1.25rem;
-      }
+    &--profile {
+      display: flex;
+      justify-content: center;
+      margin: auto 0 auto 1.25rem;
+    }
 
-      .va-dropdown-content {
-        background-color: var(--va-white);
-      }
+    .va-dropdown-content {
+      background-color: var(--va-white);
+    }
 
-      @media screen and (max-width: 640px) {
-        margin-right: 0;
+    @media screen and (max-width: 640px) {
+      margin-right: 0;
 
-        &:first-of-type {
-          margin-left: 0;
-        }
+      &:first-of-type {
+        margin-left: 0;
+      }
 
-        &--profile {
-          position: absolute;
-          right: 0.75rem;
-          top: 1.25rem;
-          height: fit-content;
-          margin: auto;
-        }
+      &--profile {
+        position: absolute;
+        right: 0.75rem;
+        top: 1.25rem;
+        height: fit-content;
+        margin: auto;
       }
     }
   }
+}
 </style>

biogenome-client/src/components/navbar/components/dropdowns/ProfileDropdown.vue

@@ -10,7 +10,7 @@
       <va-dropdown-content class="profile-dropdown__content">
         <va-list-item class="pa-2">
           <va-chip v-if="globalStore.isAuthenticated" flat @click="logout()"> Logout </va-chip>
-          <va-chip v-else flat @click="showLoginModal()"> Login </va-chip>
+          <va-chip v-else flat @click="$router.push('/login')"> Login </va-chip>
         </va-list-item>
       </va-dropdown-content>
     </va-dropdown>
@@ -23,6 +23,7 @@
   import { useColors } from 'vuestic-ui'
   import { useGlobalStore } from '../../../../stores/global-store'
   import { useToast } from 'vuestic-ui'
+import router from '../../../../router'
 
   const { init } = useToast()
   const globalStore = useGlobalStore()
@@ -49,13 +50,10 @@
 
   const isShown = ref(false)
 
-  function showLoginModal() {
-    globalStore.showLoginModal = true
-    return
-  }
   function logout() {
     globalStore.logout()
     init({ message: 'User logged out', color: 'warning' })
+    router.push('/')
   }
 </script>