Merge pull request #11 from Spythere/development

Edit modals fixes & improvements pack

src/components/VehiclesManager/VehicleEditModal.vue

@@ -89,7 +89,7 @@
       <div class="modal-actions">
         <button @click="updateVehicle">Aktualizuj dane</button>
         <button @click="removeVehicle">Usuń pojazd</button>
-        <button @click="closeModal">Nie zapisuj</button>
+        <button @click="closeModal">Wyjdź</button>
       </div>
     </div>
   </div>
@@ -135,20 +135,26 @@ onMounted(() => {
     vehiclesStore.vehiclesTable.find((v) => v.vehicleRef.id == vehiclesStore.selectedVehicleId)?.vehicleRef ?? null;
 
   if (currentVehicleRef.value) {
-    vehicleValues.name = currentVehicleRef.value.name || '';
+    populateVehicleValues(currentVehicleRef.value);
-    vehicleValues.cabinName = currentVehicleRef.value.cabinName || '';
-    vehicleValues.type = currentVehicleRef.value.type || '';
-    vehicleValues.vehicleGroupsId = currentVehicleRef.value.vehicleGroupsId || 0;
-    vehicleValues.hidden = currentVehicleRef.value.hidden;
-    vehicleValues.restrictions = {
-      sponsorOnly: currentVehicleRef.value.restrictions?.sponsorOnly ?? null,
-      teamOnly: currentVehicleRef.value.restrictions?.teamOnly ?? false,
-    };
   }
 
   modalElementRef.value?.focus();
 });
 
+function populateVehicleValues(vehicle: IVehicle) {
+  const lastProps = vehiclesStore.lastVehicleUpdateProps;
+
+  vehicleValues.name = vehicle.name || '';
+  vehicleValues.cabinName = lastProps.cabinName || vehicle.cabinName;
+  vehicleValues.type = lastProps.type || vehicle.type || '';
+  vehicleValues.vehicleGroupsId = lastProps.vehicleGroupsId || vehicle.vehicleGroupsId || 0;
+  vehicleValues.hidden = lastProps.hidden || vehicle.hidden;
+  vehicleValues.restrictions = {
+    sponsorOnly: lastProps.restrictions?.sponsorOnly ?? vehicle.restrictions?.sponsorOnly ?? null,
+    teamOnly: lastProps.restrictions?.teamOnly ?? vehicle.restrictions?.teamOnly ?? false,
+  };
+}
+
 function closeModal() {
   vehiclesStore.selectedVehicleId = -1;
 }
@@ -197,6 +203,8 @@ async function updateVehicle() {
     oldGroup._count.vehicles -= 1;
     newGroup._count.vehicles += 1;
 
+    vehiclesStore.lastVehicleUpdateProps = updatedData;
+
     alert('Zaktualizowano pojazd: ' + updatedData.name);
   } catch (error) {
     alert(handleAPIErrors(error));

src/components/VehiclesManager/VehicleGroupEditModal.vue

@@ -71,8 +71,11 @@
         <div class="details-cargo-types" v-if="currentVehicleGroupType == 'wagon'">
           <input type="checkbox" id="include-cargo-types" v-model="includeCargoTypes" />
           <label for="include-cargo-types">Ładunki (wagon):</label>
+          (JSON: {{ isCargoTypesJsonValid ? 'poprawny' : 'niepoprawny' }})
           <br />
-          <textarea name="" id="">{{ JSON.stringify(vehicleGroupValues.cargoTypes) }}</textarea>
+          <textarea name="cargo-types-textarea" id="cargo-types-textarea" v-model="cargoTypesJsonString">{{
+            JSON.stringify(vehicleGroupValues.cargoTypes)
+          }}</textarea>
         </div>
 
         <div class="details-mass-speeds">
@@ -80,7 +83,7 @@
           <label for="include-mass-speeds">Dopuszczalne masy:</label>
           (JSON: {{ isMassSpeedsJsonValid ? 'poprawny' : 'niepoprawny' }})
           <br />
-          <textarea name="" id="" v-model="massSpeedsJsonString">{{
+          <textarea name="mass-speeds-textarea" id="mass-speeds-textarea" v-model="massSpeedsJsonString">{{
             JSON.stringify(vehicleGroupValues.massSpeeds)
           }}</textarea>
         </div>
@@ -91,14 +94,14 @@
       <div class="modal-actions">
         <button @click="updateVehicleGroup">Aktualizuj dane</button>
         <button @click="removeVehicleGroup">Usuń grupę</button>
-        <button @click="closeModal">Nie zapisuj</button>
+        <button @click="closeModal">Wyjdź</button>
       </div>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { computed, onMounted, PropType, reactive, ref, Ref, useTemplateRef, watch } from 'vue';
+import { computed, onMounted, PropType, reactive, ref, useTemplateRef, watch } from 'vue';
 import { useVehiclesStore } from '../../stores/vehicles.store';
 import client from '../../common/http';
 import { AxiosError } from 'axios';
@@ -159,6 +162,8 @@ onMounted(() => {
   modalElementRef.value?.focus();
 });
 
+// JSON watchers
+
 watch(massSpeedsJsonString, (val) => {
   try {
     JSON.parse(val);
@@ -168,19 +173,30 @@ watch(massSpeedsJsonString, (val) => {
   }
 });
 
+watch(cargoTypesJsonString, (val) => {
+  try {
+    JSON.parse(val);
+    isCargoTypesJsonValid.value = true;
+  } catch (error) {
+    isCargoTypesJsonValid.value = false;
+  }
+});
+
 function populateVehicleGroupValues(vehicleGroup: IVehicleGroup) {
   if (!vehicleGroup.locoProps) currentVehicleGroupType.value = 'wagon';
 
-  vehicleGroupValues.name = vehicleGroup.name || '';
+  const lastProps = vehiclesStore.lastVehicleGroupUpdateProps;
-  vehicleGroupValues.length = vehicleGroup.length || 0;
+
-  vehicleGroupValues.weight = vehicleGroup.weight || 0;
+  vehicleGroupValues.name = lastProps.name || vehicleGroup.name || '';
-  vehicleGroupValues.speed = vehicleGroup.speed || 0;
+  vehicleGroupValues.length = lastProps.length || vehicleGroup.length || 0;
-  vehicleGroupValues.speedLoco = vehicleGroup.speedLoco || null;
+  vehicleGroupValues.weight = lastProps.weight || vehicleGroup.weight || 0;
-  vehicleGroupValues.speedLoaded = vehicleGroup.speedLoaded || null;
+  vehicleGroupValues.speed = lastProps.speed || vehicleGroup.speed || 0;
+  vehicleGroupValues.speedLoco = lastProps.speedLoco || vehicleGroup.speedLoco || null;
+  vehicleGroupValues.speedLoaded = lastProps.speedLoaded || vehicleGroup.speedLoaded || null;
 
   vehicleGroupValues.locoProps = {
-    coldStart: vehicleGroup.locoProps?.coldStart ?? false,
+    coldStart: lastProps.locoProps?.coldStart ?? vehicleGroup.locoProps?.coldStart ?? false,
-    doubleManned: vehicleGroup.locoProps?.doubleManned ?? false,
+    doubleManned: lastProps.locoProps?.doubleManned ?? vehicleGroup.locoProps?.doubleManned ?? false,
   };
 
   vehicleGroupValues.cargoTypes = [];
@@ -224,6 +240,16 @@ async function updateVehicleGroup() {
 
   if (!vehicleGroup) return;
 
+  if (!isMassSpeedsJsonValid.value) {
+    alert('JSON dopuszczalnych mas jest niepoprawny! Popraw go przed zaktualizowaniem danych!');
+    return;
+  }
+
+  if (!isCargoTypesJsonValid.value) {
+    alert('JSON ładunków jest niepoprawny! Popraw go przed zaktualizowaniem danych!');
+    return;
+  }
+
   try {
     const updatedData = (
       await client.put<UpdateVehicleGroupAPIResponse>(`/manager/vehicleGroups/${vehicleGroup.id}`, {
@@ -245,7 +271,7 @@ async function updateVehicleGroup() {
       tableObject.vehicleGroupRef = updatedData;
     }
 
-    // alert('Zaktualizowano grupę: ' + updatedData.name);
+    alert('Zaktualizowano grupę: ' + updatedData.name);
     closeModal();
   } catch (error) {
     alert(handleAPIErrors(error));
@@ -270,7 +296,7 @@ async function removeVehicleGroup() {
       (v) => v.vehicleGroupRef.id != vehicleGroup.id,
     );
 
-    // alert('Usunięto pojazd: ' + removedData.name);
+    alert('Usunięto pojazd: ' + removedData.name);
     closeModal();
   } catch (error) {
     alert(handleAPIErrors(error));

src/components/VehiclesManager/VehicleGroupsTable.vue

@@ -24,12 +24,7 @@
     <table class="vehicle-manager-table">
       <thead>
         <tr>
-          <td
+          <td v-for="header in headers" :style="`width: ${header.elementWidth}px`" @click="sortTableBy(header.id)">
-            v-for="header in headers"
-            :style="`width: ${header.elementWidth}px`"
-            @click="sortTableBy(header.id)"
-            :data-sortable="header.sortable"
-          >
             <div>
               {{ header.title }}
 
@@ -65,15 +60,11 @@
           </td>
 
           <td>
-            {{ row.vehicleGroupRef.speedLoco }}
+            {{ row.vehicleGroupRef.speedLoco ?? '-' }}
           </td>
 
           <td>
-            {{ row.vehicleGroupRef.speedLoaded }}
+            {{ row.vehicleGroupRef.speedLoaded ?? '-' }}
-          </td>
-
-          <td>
-            {{ row.vehicleGroupRef._count.vehicles }}
           </td>
 
           <td>
@@ -85,7 +76,15 @@
           </td>
 
           <td>
-            {{ row.vehicleGroupRef.massSpeeds ? 'WPISANE' : 'BRAK' }}
+            {{ row.vehicleGroupRef.massSpeeds ? '✅' : '❌' }}
+          </td>
+
+          <td>
+            {{ row.vehicleGroupRef.cargoTypes?.length ?? '-' }}
+          </td>
+
+          <td>
+            {{ row.vehicleGroupRef._count.vehicles ?? '0' }}
           </td>
         </tr>
       </tbody>
@@ -97,14 +96,14 @@
 import { computed, onMounted, ref, watch } from 'vue';
 import { useVehiclesStore } from '../../stores/vehicles.store';
 import { LucideArrowDown, LucideArrowUp, LucidePlus, LucideX } from 'lucide-vue-next';
-import { IVehicleGroup, IVehicleGroupTableRow, VehicleGroupEditRowKey } from '../../types/vehicles.types';
+import { IVehicleGroup } from '../../types/vehicles.types';
 import VehicleGroupEditModal from './VehicleGroupEditModal.vue';
 
 interface TableHeader {
   id: string;
   elementWidth: number;
   title: string;
-  sortable: boolean;
+  defaultSorterDir: number;
 }
 
 const sorterFunctions: Record<string, (v1: IVehicleGroup, v2: IVehicleGroup) => number> = {
@@ -115,20 +114,28 @@ const sorterFunctions: Record<string, (v1: IVehicleGroup, v2: IVehicleGroup) =>
   speed: (v1, v2) => (v1.speed - v2.speed) * activeSortDir.value,
   speedLoco: (v1, v2) => ((v1.speedLoco || 0) - (v2.speedLoco || 0)) * activeSortDir.value,
   speedLoaded: (v1, v2) => ((v1.speedLoaded || 0) - (v2.speedLoaded || 0)) * activeSortDir.value,
+  coldStart: (v1, v2) =>
+    ((v1.locoProps?.coldStart ? 1 : -1) - (v2.locoProps?.coldStart ? 1 : -1)) * activeSortDir.value,
+  doubleManned: (v1, v2) =>
+    ((v1.locoProps?.doubleManned ? 1 : -1) - (v2.locoProps?.doubleManned ? 1 : -1)) * activeSortDir.value,
+  massSpeeds: (v1, v2) => ((v1.massSpeeds ? 1 : -1) - (v2.massSpeeds ? 1 : -1)) * activeSortDir.value,
+  cargoTypes: (v1, v2) => ((v1.cargoTypes?.length ?? 0) - (v2.cargoTypes?.length ?? 0)) * activeSortDir.value,
+  vehicles: (v1, v2) => (v1._count.vehicles - v2._count.vehicles) * activeSortDir.value,
 };
 
 const headers: TableHeader[] = [
-  { id: 'id', elementWidth: 50, title: '#', sortable: true },
+  { id: 'id', elementWidth: 50, title: '#', defaultSorterDir: 1 },
-  { id: 'name', elementWidth: 150, title: 'Nazwa', sortable: true },
+  { id: 'name', elementWidth: 150, title: 'Nazwa', defaultSorterDir: 1 },
-  { id: 'length', elementWidth: 100, title: 'Długość', sortable: true },
+  { id: 'length', elementWidth: 100, title: 'Długość', defaultSorterDir: -1 },
-  { id: 'weight', elementWidth: 100, title: 'Masa', sortable: true },
+  { id: 'weight', elementWidth: 100, title: 'Masa', defaultSorterDir: -1 },
-  { id: 'speed', elementWidth: 100, title: 'Prędkość', sortable: true },
+  { id: 'speed', elementWidth: 100, title: 'Prędkość', defaultSorterDir: -1 },
-  { id: 'speedLoco', elementWidth: 100, title: 'Prędkość (lok)', sortable: true },
+  { id: 'speedLoco', elementWidth: 100, title: 'Prędkość (lok)', defaultSorterDir: -1 },
-  { id: 'speedLoaded', elementWidth: 100, title: 'Prędkość (ład.)', sortable: true },
+  { id: 'speedLoaded', elementWidth: 100, title: 'Prędkość (ład.)', defaultSorterDir: -1 },
-  { id: 'vehicles', elementWidth: 80, title: 'Pojazdy', sortable: true },
+  { id: 'coldStart', elementWidth: 75, title: 'Zimny start', defaultSorterDir: -1 },
-  { id: 'coldStart', elementWidth: 75, title: 'Zimny start', sortable: true },
+  { id: 'doubleManned', elementWidth: 75, title: 'Podwójna obsada', defaultSorterDir: -1 },
-  { id: 'doubleManned', elementWidth: 75, title: 'Podwójna obsada', sortable: true },
+  { id: 'massSpeeds', elementWidth: 80, title: 'Prędkości wg masy', defaultSorterDir: -1 },
-  { id: 'massSpeeds', elementWidth: 100, title: 'Prędkości wg masy', sortable: false },
+  { id: 'cargoTypes', elementWidth: 80, title: 'Ładunki', defaultSorterDir: -1 },
+  { id: 'vehicles', elementWidth: 80, title: 'Pojazdy', defaultSorterDir: -1 },
 ];
 
 const vehiclesStore = useVehiclesStore();
@@ -164,7 +171,7 @@ function sortTableBy(id: string) {
   if (!(id in sorterFunctions)) return;
 
   if (activeSortKey.value == id) activeSortDir.value *= -1;
-  else activeSortDir.value = 1;
+  else activeSortDir.value = headers.find((h) => h.id == id)?.defaultSorterDir ?? 1;
 
   activeSortKey.value = id;
 }
@@ -196,4 +203,6 @@ async function addVehicleGroupRow() {
 }
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+@use '../../styles/vehicle_tables';
+</style>

src/components/VehiclesManager/VehiclesTable.vue

@@ -183,3 +183,7 @@ async function addVehicleRow() {
   }
 }
 </script>
+
+<style lang="scss" scoped>
+@use '../../styles/vehicle_tables';
+</style>

src/stores/vehicles.store.ts

@@ -15,6 +15,7 @@ import {
   ICreateVehicleGroupBody,
   RemoveVehicleGroupAPIResponse,
   IVehicleGroupAPI,
+  IVehicleGroup,
 } from '../types/vehicles.types';
 import { LoadingState } from '../types/common.types';
 
@@ -26,6 +27,9 @@ export const useVehiclesStore = defineStore('vehiclesStore', {
     selectedVehicleId: -1,
     selectedVehicleGroupId: -1,
 
+    lastVehicleUpdateProps: {} as Partial<IVehicle>,
+    lastVehicleGroupUpdateProps: {} as Partial<IVehicleGroup>,
+
     vehiclesTable: [] as IVehicleTableRow[],
     vehicleGroupsTable: [] as IVehicleGroupTableRow[],
   }),

src/styles/_fonts.scss

@@ -21,3 +21,11 @@
   font-weight: 600;
   src: url('/fonts/inter-v19-latin_latin-ext-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }
+
+@font-face {
+  font-display: swap;
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 800;
+  src: url('/fonts/inter-v20-latin_latin-ext-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}

src/styles/_global.scss

@@ -1,4 +1,4 @@
-@use "sass:color";
+@use 'sass:color';
 @use 'fonts';
 
 body,
@@ -61,7 +61,6 @@ table thead tr td img {
 
 table tbody tr {
   background-color: #2c394b;
-  transition: background-color 100ms;
   text-overflow: ellipsis;
 }
 

src/styles/_vehicle_tables.scss

@@ -0,0 +1,40 @@
+.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;
+}

src/views/VehiclesManagerView.vue

@@ -9,8 +9,8 @@
       </div>
 
       <div class="mode-change-box">
-        <button @click="changeTab('vehicles')">POJAZDY</button>
+        <button @click="changeTab('vehicles')" :data-active="currentTab == 'vehicles'">POJAZDY</button>
-        <button @click="changeTab('vehicleGroups')">GRUPY</button>
+        <button @click="changeTab('vehicleGroups')" :data-active="currentTab == 'vehicleGroups'">GRUPY</button>
       </div>
 
       <keep-alive>
@@ -46,7 +46,7 @@ function changeTab(tabName: TableTabName) {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .view-wrapper {
   display: grid;
   grid-template-rows: auto 1fr;
@@ -67,47 +67,9 @@ img.brand-image {
   display: flex;
   gap: 0.5em;
   margin-top: 1em;
-}
 
-// For children tab elements
+  button[data-active='true'] {
-.table-search-box {
+    color: gold;
-  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>