platform/io.sc.standard.frontend/src/views/Standard.vue

<template>
  <div style="height: 100%">
    <q-splitter v-model="splitterModelRef" style="height: 100%">
      <template #before>
        <q-tabs v-model="selectedTabRef" vertical>
          <q-tab name="Industry" no-caps>
            <div class="text-left" style="width: 200px" :title="$t('standard.industry.grid.title')">{{ $t('standard.industry.grid.title') }}</div>
          </q-tab>
          <q-tab name="AdminDivision" no-caps>
            <div class="text-left" style="width: 200px" :title="$t('standard.adminDivision.grid.title')">{{ $t('standard.adminDivision.grid.title') }}</div>
          </q-tab>
          <q-tab name="PerformanceStatus" no-caps>
            <div class="text-left" style="width: 200px" :title="$t('standard.performanceStatus.grid.title')">
              {{ $t('standard.performanceStatus.grid.title') }}
            </div>
          </q-tab>
          <q-tab name="Counterparty" no-caps>
            <div class="text-left" style="width: 200px" :title="$t('standard.counterparty.grid.title')">{{ $t('standard.counterparty.grid.title') }}</div>
          </q-tab>
          <q-tab name="Country" no-caps>
            <div class="text-left" style="width: 200px" :title="$t('standard.country.grid.title')">{{ $t('standard.country.grid.title') }}</div>
          </q-tab>
          <q-tab name="Currency" no-caps>
            <div class="text-left" style="width: 200px" :title="$t('standard.currency.grid.title')">{{ $t('standard.currency.grid.title') }}</div>
          </q-tab>
        </q-tabs>
      </template>

      <template #after>
        <div class="pl-1" style="height: 100%">
          <q-tab-panels v-model="selectedTabRef" animated swipeable style="height: 100%">
            <q-tab-panel name="Industry" class="px-0 pb-0" style="height: 100%; padding-left: 0px; padding-right: 0px; padding-bottom: 0px">
              <Industry></Industry>
            </q-tab-panel>
            <q-tab-panel name="AdminDivision" class="px-0 pb-0" style="height: 100%; padding-left: 0px; padding-right: 0px; padding-bottom: 0px">
              <AdminDivision></AdminDivision>
            </q-tab-panel>
            <q-tab-panel name="PerformanceStatus" class="px-0 pb-0" style="height: 100%; padding-left: 0px; padding-right: 0px; padding-bottom: 0px">
              <PerformanceStatus></PerformanceStatus>
            </q-tab-panel>
            <q-tab-panel name="Counterparty" class="px-0 pb-0" style="height: 100%; padding-left: 0px; padding-right: 0px; padding-bottom: 0px">
              <Counterparty></Counterparty>
            </q-tab-panel>
            <q-tab-panel name="Country" class="px-0 pb-0" style="height: 100%; padding-left: 0px; padding-right: 0px; padding-bottom: 0px">
              <Country></Country>
            </q-tab-panel>
            <q-tab-panel name="Currency" class="px-0 pb-0" style="height: 100%; padding-left: 0px; padding-right: 0px; padding-bottom: 0px">
              <Currency></Currency>
            </q-tab-panel>
          </q-tab-panels>
        </div>
      </template>
    </q-splitter>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import Industry from './standard/Industry.vue';
import AdminDivision from './standard/AdminDivision.vue';
import PerformanceStatus from './standard/PerformanceStatus.vue';
import Counterparty from './standard/Counterparty.vue';
import Country from './standard/Country.vue';
import Currency from './standard/Currency.vue';

const splitterModelRef = ref(15);
const selectedTabRef = ref('Industry');
</script>