mirror of
https://github.com/Spythere/station-manager-2.0.git
synced 2026-05-03 13:38:13 +00:00
refactor: code organization
This commit is contained in:
+25
-27
@@ -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;
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user