taby: nawigacja

src/components/sections/StockSection.vue

@@ -1,5 +1,16 @@
 <template>
   <section class="stock-section">
+    <div class="section_modes">
+      <button
+        class="btn"
+        v-for="(id, name) in sectionModes"
+        @click="chooseSection(id)"
+        :data-selected="store.stockSectionMode == id"
+      >
+        {{ name }}
+      </button>
+    </div>
+
     <transition name="tab-change" mode="out-in">
       <keep-alive>
         <component :is="chosenSectionComponent" :key="chosenSectionComponent"></component>
@@ -8,41 +19,46 @@
   </section>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent } from 'vue';
+import { computed, KeepAlive } from 'vue';
 import { useStore } from '../../store';
 import StockListTab from '../tabs/StockListTab.vue';
 import StockGeneratorTab from '../tabs/StockGeneratorTab.vue';
 import NumberGeneratorTab from '../tabs/NumberGeneratorTab.vue';
 
-export default defineComponent({
+const store = useStore();
-  setup() {
+type SectionMode = typeof store.stockSectionMode;
-    return {
-      store: useStore(),
-    };
-  },
 
-  computed: {
+const sectionModes: { [key: string]: SectionMode } = {
-    chosenSectionComponent() {
+  SKŁAD: 'stock-list',
-      switch (this.store.stockSectionMode) {
+  'GNR. NUMERU': 'number-generator',
-        case 'stock-list':
+  'GNR. SKŁADU': 'stock-generator',
-          return StockListTab;
+};
 
-        case 'stock-generator':
+const chosenSectionComponent = computed(() => {
-          return StockGeneratorTab;
+  switch (store.stockSectionMode) {
+    case 'stock-list':
+      return StockListTab;
 
-        case 'number-generator':
+    case 'stock-generator':
-          return NumberGeneratorTab;
+      return StockGeneratorTab;
 
-        default:
+    case 'number-generator':
-          return StockListTab;
+      return NumberGeneratorTab;
-      }
+
-    },
+    default:
-  },
+      return StockListTab;
+  }
 });
+
+function chooseSection(sectionId: SectionMode) {
+  store.stockSectionMode = sectionId;
+}
 </script>
 
 <style lang="scss">
+@import '../../styles/global.scss';
+
 // Tab change animation
 .tab-change {
   &-enter-from,
@@ -61,9 +77,38 @@ export default defineComponent({
   grid-row: 1 / 4;
   grid-column: 2;
 
-  padding: 0 1px;
-
   overflow: hidden;
+  padding: 1px;
+}
+
+.section_modes {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 0.5em;
+
+  margin-bottom: 0.5em;
+
+  button {
+    position: relative;
+    border-radius: 0.5em 0.5em 0 0;
+
+    &::after {
+      position: absolute;
+      bottom: 0;
+      left: 50%;
+      transform: translateX(-50%);
+
+      content: '';
+      width: 0;
+      height: 2px;
+      transition: all 100ms;
+      background-color: $accentColor;
+    }
+
+    &[data-selected='true']::after {
+      width: 100%;
+    }
+  }
 }
 </style>
 

src/components/tabs/NumberGeneratorTab.vue

@@ -2,7 +2,6 @@
   <div class="number-generator tab">
     <div class="tab_header">
       <h2>GENERATOR NUMERU POCIĄGU</h2>
-      <button class="btn" @click="() => (store.stockSectionMode = 'stock-list')">POWRÓT DO LISTY &gt;</button>
     </div>
 
     <div class="tab_content">
@@ -35,15 +34,12 @@
 </template>
 
 <script setup lang="ts">
-import { Ref, computed, ref } from 'vue';
+import { Ref, ref } from 'vue';
-import { useStore } from '../../store';
 
 import genData from '../../constants/numberGeneratorData.json';
 
 type RegionName = keyof typeof genData.regionNumbers;
 
-const store = useStore();
-
 const beginRegionName = ref(null) as Ref<RegionName | null>;
 const endRegionName = ref(null) as Ref<RegionName | null>;
 const categoryRules = ref(null) as Ref<string | null>;

src/components/tabs/StockGeneratorTab.vue

@@ -2,7 +2,6 @@
   <div class="stock-generator tab">
     <div class="tab_header">
       <h2>GENERATOR SKŁADU TOWAROWEGO</h2>
-      <button class="btn" @click="() => (store.stockSectionMode = 'stock-list')">POWRÓT DO LISTY &gt;</button>
     </div>
 
     <div class="tab_content">
@@ -229,8 +228,6 @@ export default defineComponent({
 @import '../../styles/global.scss';
 @import '../../styles/tab.scss';
 
-
-
 h2 {
   margin: 1em 0;
 }

src/components/tabs/StockListTab.vue

@@ -1,6 +1,6 @@
 <template>
   <section class="stock-list">
-    <div class="stock_actions">
+    <!-- <div class="stock_actions">
       <label class="file-label">
         <input
           type="file"
@@ -14,7 +14,7 @@
 
       <button class="btn" @click="store.stockSectionMode = 'number-generator'">GENERUJ NUMER</button>
       <button class="btn" @click="store.stockSectionMode = 'stock-generator'">LOSUJ SKŁAD</button>
-    </div>
+    </div> -->
 
     <div class="stock_controls" :data-disabled="store.chosenStockListIndex == -1">
       <b class="no">
@@ -112,7 +112,7 @@
     <StockThumbnails :onListItemClick="onListItemClick" :onStockImageError="stockImageError" />
 
     <!-- Stock list -->
-    <ul ref="list">
+    <ul ref="stock_list">
       <li v-if="stockIsEmpty" class="list-empty">
         <div class="stock-info">Lista pojazdów jest pusta!</div>
       </li>
@@ -431,6 +431,8 @@ export default defineComponent({
   flex-wrap: wrap;
 
   padding: 0.5em;
+  margin-bottom: 1em;
+
   background-color: #353a57;
 
   &[data-disabled='true'] {
@@ -462,7 +464,7 @@ export default defineComponent({
 .stock_actions {
   display: grid;
   gap: 0.5em;
-  margin: 1em 0;
+  margin-bottom: 1em;
 
   grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
 

src/styles/tab.scss

@@ -1,11 +1,13 @@
+@import './global.scss';
+
 .tab {
   height: 100%;
   margin-top: 1px;
 
   &_header {
-    display: flex;
+    padding: 0.5em 1em;
-    align-items: center;
+
-    gap: 0.5em;
+    background-color: $secondaryColor;
 
     h2 {
       margin: 0;