refactor: code organization

This commit is contained in:
2024-10-23 15:23:33 +02:00
parent 018357c5ed
commit 5a32c96a88
29 changed files with 1134 additions and 615 deletions
+25 -27
View File
@@ -1,7 +1,7 @@
<template>
<div class="manager" v-if="store.user">
<RoutesModal v-if="store.currentStation" />
<UpdateCard v-if="store.changesResponse.length > 0" />
<div class="manager-view" v-if="authStore.user != null">
<RoutesModal v-if="sceneriesStore.currentStation" />
<UpdateCard v-if="sceneriesStore.changesResponse.length > 0" />
<hr color="white" />
<TableActions />
@@ -16,7 +16,7 @@
</thead>
<tbody>
<tr v-for="(station, row) in store.sortedStationList" tabindex="0">
<tr v-for="(station, row) in sceneriesStore.sortedStationList" tabindex="0">
<td v-for="(_, propName) in headerNameList" @click="changeProperty(station, row, propName as string)" :class="propName">
<span v-if="propName === 'url'" :style="station.url ? 'color: gold' : 'color: gray;'">URL</span>
<span v-else-if="propName === 'projectUrl'" :style="station.projectUrl ? 'color: gold' : 'color: gray;'">URL</span>
@@ -39,8 +39,8 @@
<select
name="availability"
:id="`select-${row}`"
v-model="store.sortedStationList[row]['availability']"
@input="(e) => changeAvailability(station, store.sortedStationList[row]['availability'], e)"
v-model="sceneriesStore.sortedStationList[row]['availability']"
@input="(e) => changeAvailability(station, sceneriesStore.sortedStationList[row]['availability'], e)"
>
<option value="default">dostępna (w paczce)</option>
<option value="nonDefault">dostępna (poza paczką)</option>
@@ -61,18 +61,23 @@
<script lang="ts">
import { defineComponent } from 'vue';
import changeMixin from '../mixins/changeMixin';
import { useStore } from '../store';
import { SceneryRowItem, Availability, AuthState } from '../types/types';
import RoutesModal from '../components/RoutesModal.vue';
import TableActions from '../components/TableActions.vue';
import UpdateCard from '../components/UpdateCard.vue';
import RouteList from '../components/RouteList.vue';
import { AuthState } from '../types/auth.types';
import { SceneryRowItem, Availability } from '../types/sceneries.types';
import { useSceneriesStore } from '../stores/sceneries.store';
import { useAuthStore } from '../stores/auth.store';
export default defineComponent({
components: { RoutesModal, TableActions, UpdateCard, RouteList },
mixins: [changeMixin],
data: () => ({
sceneriesStore: useSceneriesStore(),
authStore: useAuthStore(),
AuthState,
headerNameList: {
name: 'Nazwa',
@@ -96,20 +101,13 @@ export default defineComponent({
},
}),
setup() {
const store = useStore();
return {
store,
};
},
mounted() {
this.store.fetchSceneriesData();
this.sceneriesStore.fetchSceneriesData();
},
methods: {
changeProperty(station: SceneryRowItem, row: number, propertyName: string) {
this.store.selectedStationName = station.name;
this.sceneriesStore.selectedStationName = station.name;
if (propertyName == 'checkpoints') {
this.changeCheckpoints(row);
@@ -121,12 +119,12 @@ export default defineComponent({
return;
}
const stationListRow = this.store.stationList.findIndex((station) => station.name == this.store.sortedStationList[row].name);
const stationListRow = this.sceneriesStore.stationList.findIndex((station) => station.name == this.sceneriesStore.sortedStationList[row].name);
if (stationListRow == -1) return;
const oldValue = (this.store.stationList[stationListRow] as any)[propertyName];
const oldValue = (this.sceneriesStore.stationList[stationListRow] as any)[propertyName];
if (typeof oldValue === 'boolean') {
(this.store.stationList[stationListRow] as any)[propertyName] = !oldValue;
(this.sceneriesStore.stationList[stationListRow] as any)[propertyName] = !oldValue;
// this.$set(this.stationList[stationListRow], propertyName, !oldValue);
this.addChange(station, propertyName, oldValue, !oldValue);
return;
@@ -134,21 +132,21 @@ export default defineComponent({
let newValue = prompt(`Zmień wartość dla rubryki ${this.headerNameList[propertyName]}`, oldValue || '');
if (newValue == null) return;
(this.store.stationList[stationListRow] as any)[propertyName] = typeof oldValue === 'number' ? parseInt(newValue) : newValue;
(this.sceneriesStore.stationList[stationListRow] as any)[propertyName] = typeof oldValue === 'number' ? parseInt(newValue) : newValue;
// this.$set(this.stationList[stationListRow], propertyName, parseInt(newValue));
this.addChange(station, propertyName, oldValue, typeof oldValue === 'number' ? parseInt(newValue) : newValue);
},
changeCheckpoints(row: number) {
const stationListRow = this.store.stationList.findIndex((station) => station.name == this.store.sortedStationList[row].name);
const stationListRow = this.sceneriesStore.stationList.findIndex((station) => station.name == this.sceneriesStore.sortedStationList[row].name);
if (stationListRow == -1) return;
const oldCheckpoints = this.store.stationList[stationListRow].checkpoints;
const oldCheckpoints = this.sceneriesStore.stationList[stationListRow].checkpoints;
const newCheckpoints = prompt('Wpisz posterunki (oddzielone średnikiem):', oldCheckpoints);
if (newCheckpoints === null) return;
this.store.stationList[stationListRow]['checkpoints'] = newCheckpoints;
this.addChange(this.store.sortedStationList[row], 'checkpoints', oldCheckpoints, newCheckpoints);
this.sceneriesStore.stationList[stationListRow]['checkpoints'] = newCheckpoints;
this.addChange(this.sceneriesStore.sortedStationList[row], 'checkpoints', oldCheckpoints, newCheckpoints);
},
changeAvailability(scenery: SceneryRowItem, availability: Availability, e: Event) {
@@ -161,12 +159,12 @@ export default defineComponent({
if (!confirmRemove) return;
this.store.stationList = this.store.stationList.filter(({ id }) => id != scenery.id);
this.sceneriesStore.stationList = this.sceneriesStore.stationList.filter(({ id }) => id != scenery.id);
this.addRemovalChange(scenery);
},
showRoutesModal(scenery: SceneryRowItem) {
this.store.currentStation = scenery;
this.sceneriesStore.currentStation = scenery;
},
},
});