Przywrócono zmianę nazwy scenerii i usuwanie

src/components/RoutesModal.vue

@@ -226,7 +226,7 @@ export default defineComponent({
       this.store.stationList[index]['routes'] = routeString;
       this.currentRoutes = routeString;
 
-      this.addChange(this.store.currentStation!.name, 'routes', this.routeBackup, routeString);
+      this.addChange(this.store.currentStation!, 'routes', this.routeBackup, routeString);
     },
   },
 });

src/components/TableActions.vue

@@ -108,11 +108,16 @@ export default defineComponent({
 
     async updateListToDb() {
       try {
-        const mappedChangeList = Object.entries(this.store.changeList).map(([k, v]) => {
-          return { name: k, ...v };
+        const mappedChangeList = Object.entries(this.store.changeList).map(([id, v]) => {
+          if (/^#/.test(id)) {
+            delete v.id;
+            return { ...v };
+          }
+
+          return { id: id, ...v };
         });
 
-        await axios.post(
+        const response = await axios.post(
           `${this.API_URL}/manager/updateSceneryList`,
           {
             changeList: mappedChangeList,
@@ -127,10 +132,12 @@ export default defineComponent({
           }
         );
 
+        console.log(response.data);
+
         alert('Zapisano do bazy!');
         this.loadData();
       } catch (error) {
-        this.store.alertMessage = 'Ups!  Wystąpił błąd podczas zapisywania danych!';
+        this.store.alertMessage = 'Ups! Wystąpił błąd podczas zapisywania danych!';
       }
     },
 
@@ -162,10 +169,11 @@ export default defineComponent({
         checkpoints: '',
         authors: '',
         availability: 'default',
+        id: `#${Math.random().toString(32).substring(2)}`,
       };
 
-      this.store.changeList[name] = { ...newSt };
-      this.store.changeBackupList[name] = null;
+      this.store.changeList[newSt.id] = { ...newSt };
+      this.store.changeBackupList[newSt.id] = null;
       this.store.searchedSceneryName = name;
 
       this.store.unsavedChanges = true;

src/mixins/changeMixin.ts

@@ -1,5 +1,6 @@
 import { defineComponent } from 'vue';
 import { useStore } from '../store';
+import { SceneryRowItem } from '../types/types';
 
 export default defineComponent({
   setup() {
@@ -9,41 +10,54 @@ export default defineComponent({
   },
 
   methods: {
-    addChange(stationName: string, propName: string, oldValue: any, newValue: any) {
+    addChange(sceneryData: SceneryRowItem, propName: string, oldValue: any, newValue: any) {
       if (oldValue === newValue) return;
 
-      if (this.store.changeList[stationName] === null || !(stationName in this.store.changeList))
-        this.store.changeList[stationName] = {};
+      const sceneryId = sceneryData.id;
 
-      if (propName === 'name') {
-        const station = this.store.stationList[this.store.stationList.findIndex((v) => v.name == newValue)];
-        console.log(oldValue, newValue, station);
+      if (this.store.changeList[sceneryId] === null || !(sceneryId in this.store.changeList))
+        this.store.changeList[sceneryId] = {};
 
-        this.store.changeBackupList[oldValue] = { ...station, name: oldValue };
-        this.store.changeBackupList[newValue] = null;
+      // if (propName === 'name') {
+      //   const rowStationData = this.store.stationList[this.store.stationList.findIndex((v) => v.id == sceneryId)];
 
-        this.store.changeList[oldValue] = null;
-        this.store.changeList[newValue] = { ...station };
-      } else {
-        this.store.changeList[stationName][propName] = newValue;
+      //   this.store.changeList[sceneryId][propName] = newValue;
+      //   this.store.changeBackupList[sceneryId] = { ...rowStationData, name: oldValue };
+      // } else {
+      this.store.changeList[sceneryId][propName] = newValue;
 
-        if (!this.store.changeBackupList[stationName]) this.store.changeBackupList[stationName] = {};
+      if (!this.store.changeBackupList[sceneryId]) this.store.changeBackupList[sceneryId] = {};
 
-        if (this.store.changeBackupList[stationName][propName] === undefined)
-          this.store.changeBackupList[stationName][propName] = oldValue;
-      }
+      if (this.store.changeBackupList[sceneryId][propName] === undefined)
+        this.store.changeBackupList[sceneryId][propName] = oldValue;
+      // }
 
-      if (this.store.changeList[stationName][propName] == this.store.changeBackupList[stationName][propName]) {
-        delete this.store.changeList[stationName][propName];
-        delete this.store.changeBackupList[stationName][propName];
+      if (this.store.changeList[sceneryId][propName] == this.store.changeBackupList[sceneryId][propName]) {
+        delete this.store.changeList[sceneryId][propName];
+        delete this.store.changeBackupList[sceneryId][propName];
 
-        if (Object.keys(this.store.changeList[stationName]).length == 0) delete this.store.changeList[stationName];
+        if (Object.keys(this.store.changeList[sceneryId]).length == 0) delete this.store.changeList[sceneryId];
 
-        if (Object.keys(this.store.changeBackupList[stationName]).length == 0)
-          delete this.store.changeBackupList[stationName];
+        if (Object.keys(this.store.changeBackupList[sceneryId]).length == 0)
+          delete this.store.changeBackupList[sceneryId];
       }
 
       this.store.unsavedChanges = Object.keys(this.store.changeList).length != 0;
     },
+
+    addRemovalChange(sceneryData: SceneryRowItem) {
+      const sceneryId = sceneryData.id;
+
+      this.store.changeBackupList[sceneryId] = { ...sceneryData };
+
+      this.store.changeList[sceneryId] = {
+        name: sceneryData.name,
+        toRemove: true,
+      };
+
+      this.store.unsavedChanges = Object.keys(this.store.changeList).length != 0;
+
+      console.log(this.store.changeList);
+    },
   },
 });

src/types/types.ts

@@ -1,6 +1,7 @@
 export type Availability = 'default' | 'unavailable' | 'nonPublic' | 'abandoned' | 'nonDefault';
 
 export interface SceneryRowItem {
+  id: string;
   name: string;
   url: string;
   lines: string;

src/views/ManagerView.vue

@@ -11,6 +11,7 @@
         <thead>
           <th v-for="header in headerNameList">{{ header }}</th>
           <th>Dostępność</th>
+          <th>Usuń</th>
         </thead>
 
         <tbody>
@@ -19,7 +20,7 @@
               <span v-if="propName === 'url'" :style="station.url ? 'color: gold' : 'color: gray;'">URL</span>
               <span v-else-if="propName === 'checkpoints'">{{ station[propName] ? 'POKAŻ' : 'DODAJ' }}</span>
               <span v-else-if="propName === 'routes'" v-html="getRouteNames(station)"></span>
-              <span v-else-if="typeof (station as any)[propName] === 'boolean' && propName !== 'supportersOnly'">
+              <span v-else-if="typeof (station as any)[propName] === 'boolean'">
                 {{ (station as any)[propName] ? '✅' : '❌' }}
               </span>
               <span v-else>{{ (station as any)[propName] }}</span>
@@ -30,7 +31,7 @@
                 name="availability"
                 :id="`select-${row}`"
                 v-model="sortedStationList[row]['availability']"
-                @input="(e) => changeAvailability(station.name, sortedStationList[row]['availability'], e)"
+                @input="(e) => changeAvailability(station, sortedStationList[row]['availability'], e)"
               >
                 <option value="default">dostępna (w paczce)</option>
                 <option value="nonDefault">dostępna (poza paczką)</option>
@@ -39,6 +40,8 @@
                 <option value="abandoned">wycofana</option>
               </select>
             </td>
+
+            <td @click="removeStation(station)"><img src="/icon-trash.svg" alt="remove" /></td>
           </tr>
         </tbody>
       </table>
@@ -100,25 +103,6 @@ export default defineComponent({
   },
 
   methods: {
-    addNewStation() {
-      this.store.newStationsCount++;
-      const newSt: SceneryRowItem = {
-        name: `${this.store.newStationsCount}_Sceneria`,
-        url: '',
-        lines: '',
-        project: null,
-        reqLevel: 0,
-        signalType: '',
-        controlType: '',
-        SUP: false,
-        routes: '',
-        checkpoints: '',
-        authors: '',
-        availability: 'default',
-      };
-      this.store.stationList.unshift(newSt);
-    },
-
     getRouteNames(station: SceneryRowItem) {
       if (!station.routes) return '';
       return station.routes
@@ -138,58 +122,64 @@ export default defineComponent({
 
     changeProperty(station: SceneryRowItem, row: number, propertyName: string) {
       this.store.selectedStationName = station.name;
-      if (propertyName == 'name') return;
+
       if (propertyName == 'checkpoints') {
         this.changeCheckpoints(row);
         return;
       }
+
       if (propertyName == 'routes') {
         this.showRoutesModal(station);
         return;
       }
+
       const stationListRow = this.store.stationList.findIndex(
         (station) => station.name == this.sortedStationList[row].name
       );
+
       if (stationListRow == -1) return;
       const oldValue = (this.store.stationList[stationListRow] as any)[propertyName];
       if (typeof oldValue === 'boolean') {
         (this.store.stationList[stationListRow] as any)[propertyName] = !oldValue;
         // this.$set(this.stationList[stationListRow], propertyName, !oldValue);
-        this.addChange(station.name, propertyName, oldValue, !oldValue);
+        this.addChange(station, propertyName, oldValue, !oldValue);
         return;
       }
+
       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.$set(this.stationList[stationListRow], propertyName, parseInt(newValue));
-      this.addChange(
-        station.name,
-        propertyName,
-        oldValue,
-        typeof oldValue === 'number' ? parseInt(newValue) : 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.sortedStationList[row].name
       );
+
       if (stationListRow == -1) return;
       const oldCheckpoints = this.store.stationList[stationListRow].checkpoints;
       const newCheckpoints = prompt('Wpisz posterunki (oddzielone średnikiem):', oldCheckpoints);
       if (newCheckpoints === null) return;
+
       this.store.stationList[stationListRow]['checkpoints'] = newCheckpoints;
-      this.addChange(this.sortedStationList[row].name, 'checkpoints', oldCheckpoints, newCheckpoints);
+      this.addChange(this.sortedStationList[row], 'checkpoints', oldCheckpoints, newCheckpoints);
     },
 
-    changeAvailability(stationName: string, availability: Availability, e: Event) {
+    changeAvailability(scenery: SceneryRowItem, availability: Availability, e: Event) {
       const selectedAvailability: Availability = (e.target as HTMLSelectElement).value as Availability;
-      this.addChange(stationName, 'availability', availability, selectedAvailability);
+      this.addChange(scenery, 'availability', availability, selectedAvailability);
     },
 
-    showRoutesModal(station: SceneryRowItem) {
-      this.store.currentStation = station;
+    removeStation(scenery: SceneryRowItem) {
+      this.store.stationList = this.store.stationList.filter(({ id }) => id != scenery.id);
+      this.addRemovalChange(scenery);
+    },
+
+    showRoutesModal(scenery: SceneryRowItem) {
+      this.store.currentStation = scenery;
     },
   },
 });
@@ -250,4 +240,9 @@ table tr td {
   overflow: auto;
   text-overflow: ellipsis;
 }
+
+td img {
+  height: 1.45em;
+  vertical-align: middle;
+}
 </style>