station-manager-2.0/src/views/VehiclesManagerView.vue

<template>
  <div class="manager-view">
    <div class="view-wrapper">
      <div class="top-bar">
        <div class="brand">
          <img class="brand-image" src="/icon-logo.svg" alt="logo" />
          <h3>Edytor pojazdów</h3>
        </div>
      </div>

      <div class="mode-change-box">
        <button @click="changeTab('vehicles')">POJAZDY</button>
        <button @click="changeTab('vehicleGroups')">GRUPY</button>
      </div>

      <keep-alive>
        <component :is="tableTabs[currentTab]"></component>
      </keep-alive>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { useVehiclesStore } from '../stores/vehicles.store';

import VehiclesTable from '../components/VehiclesManager/VehiclesTable.vue';
import VehicleGroupsTable from '../components/VehiclesManager/VehicleGroupsTable.vue';

const tableTabs: Record<TableTabName, any> = {
  vehicles: VehiclesTable,
  vehicleGroups: VehicleGroupsTable,
};

type TableTabName = 'vehicles' | 'vehicleGroups';

const vehiclesStore = useVehiclesStore();
const currentTab = ref<TableTabName>('vehicles');

onMounted(() => {
  vehiclesStore.fetchVehicles();
});

function changeTab(tabName: TableTabName) {
  currentTab.value = tabName;
}
</script>

<style lang="scss">
.view-wrapper {
  display: grid;
  grid-template-rows: auto 1fr;
  max-height: 100vh;
  padding: 0.5em;
}

.brand {
  display: flex;
  gap: 0.5em;
}

img.brand-image {
  max-width: 4em;
}

.mode-change-box {
  display: flex;
  gap: 0.5em;
  margin-top: 1em;
}

// For children tab elements
.table-search-box {
  display: flex;
  gap: 0.5em;
  margin-top: 0.5em;
}

.table-wrapper {
  width: 100%;
  overflow: auto;
  margin-top: 1em;
}

.table-wrapper table > thead > tr > td {
  & > div {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5em;
  }

  &[data-sortable='true'] {
    cursor: pointer;
  }
}

.table-wrapper table > tbody > tr {
  cursor: pointer;

  &:hover {
    background: #1a293b;
  }
}

.table-visible-results-box {
  margin-top: 0.5em;
}

.table-visible-results-box input {
  max-width: 70px;
}
</style>