Dodano changelog; poprawki reaktywności

src/mixins/changeMixin.ts

@@ -1,6 +1,6 @@
 import { defineComponent } from 'vue';
 import { useStore } from '../store';
-import { SceneryRowItem } from '../types/types';
+import { ChangeProp, SceneryRowItem } from '../types/types';
 
 export default defineComponent({
   setup() {
@@ -13,50 +13,57 @@ export default defineComponent({
     addChange(sceneryData: SceneryRowItem, propName: string, oldValue: any, newValue: any) {
       if (oldValue === newValue) return;
 
+      const changePropName = propName as ChangeProp;
+
       const sceneryId = sceneryData.id;
 
-      if (this.store.changeList[sceneryId] === null || !(sceneryId in this.store.changeList))
-        this.store.changeList[sceneryId] = {};
+      let changeItem = this.store.changeList.find((item) => item.id == sceneryId);
 
-      // if (propName === 'name') {
-      //   const rowStationData = this.store.stationList[this.store.stationList.findIndex((v) => v.id == sceneryId)];
-
-      //   this.store.changeList[sceneryId][propName] = newValue;
-      //   this.store.changeBackupList[sceneryId] = { ...rowStationData, name: oldValue };
-      // } else {
-      this.store.changeList[sceneryId][propName] = newValue;
-
-      if (!this.store.changeBackupList[sceneryId]) this.store.changeBackupList[sceneryId] = {};
-
-      if (this.store.changeBackupList[sceneryId][propName] === undefined)
-        this.store.changeBackupList[sceneryId][propName] = oldValue;
-      // }
-
-      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[sceneryId]).length == 0) delete this.store.changeList[sceneryId];
-
-        if (Object.keys(this.store.changeBackupList[sceneryId]).length == 0)
-          delete this.store.changeBackupList[sceneryId];
+      if (!changeItem) {
+        changeItem = { id: sceneryId, name: sceneryData.name };
+        this.store.changeList.push(changeItem);
       }
 
-      this.store.unsavedChanges = Object.keys(this.store.changeList).length != 0;
+      changeItem[changePropName] = newValue;
+
+      const sceneryBackup = this.store.backupList.find((scenery) => scenery.id == sceneryId);
+      if (!sceneryBackup) return;
+
+      if (sceneryBackup && sceneryBackup[changePropName] == changeItem[changePropName])
+        delete changeItem[changePropName];
+
+      if (Object.keys(changeItem).length == 2 && changeItem.id)
+        this.store.changeList = this.store.changeList.filter((item) => changeItem?.id != item.id);
+
+      // if (
+      //   changeItem[changePropName] !== undefined &&
+      //   backupChangeItem[changePropName] !== undefined &&
+      //   changeItem[changePropName] == backupChangeItem[changePropName]
+      // ) {
+      //   console.log('delete');
+
+      //   delete changeItem[changePropName];
+      //   delete backupChangeItem[changePropName];
+
+      //   if (Object.keys(changeItem).length == 1 && changeItem.id)
+      //     this.store.changeList = this.store.changeList.filter((item) => changeItem?.id != item.id);
+
+      //   if (Object.keys(backupChangeItem).length == 1 && backupChangeItem.id)
+      //     this.store.changeBackupList = this.store.changeList.filter((item) => backupChangeItem?.id != item.id);
+      // }
+
+      this.store.unsavedChanges = this.store.changeList.length != 0;
     },
 
     addRemovalChange(sceneryData: SceneryRowItem) {
       const sceneryId = sceneryData.id;
 
-      this.store.changeBackupList[sceneryId] = { ...sceneryData };
+      let changeItem = this.store.changeList.find((item) => item.id == sceneryId);
 
-      this.store.changeList[sceneryId] = {
-        name: sceneryData.name,
-        toRemove: true,
-      };
+      if (!changeItem) this.store.changeList.push({ id: sceneryId, name: sceneryData.name, toRemove: true });
+      else changeItem['toRemove'] = true;
 
       this.store.unsavedChanges = Object.keys(this.store.changeList).length != 0;
-
       console.log(this.store.changeList);
     },
   },

src/mixins/dataMixin.ts

@@ -29,11 +29,10 @@ export default defineComponent({
           })
         ).data;
 
-        this.store.backupList = JSON.stringify(data);
+        this.store.backupList = JSON.parse(JSON.stringify(data));
         this.store.stationList = data;
         this.store.unsavedChanges = false;
         this.store.changeList = [];
-        this.store.changeBackupList = [];
 
         this.store.dataState = 'LOADED';
       } catch (error) {

src/mixins/routesMixin.ts

@@ -0,0 +1,22 @@
+import { defineComponent } from 'vue';
+import { SceneryRowItem } from '../types/types';
+
+export default defineComponent({
+  methods: {
+    getRouteNames(routes: SceneryRowItem['routes']) {
+      return routes
+        .split(';')
+        .map((route) => {
+          // !Oc_2EPB
+          const props1 = route.split('_')[0];
+          const props2 = route.split('_')[1];
+          const isInternal = props1.startsWith('!');
+          const name = isInternal ? props1.replace('!', '') : props1;
+          return `${isInternal ? '<u>' + name + '</u>' : name} <span style='color: #aaa'>(${props2[0]}/${props2[1]}/${
+            props2[2]
+          }${props2[3] ? '/B' : ''})</span>`;
+        })
+        .join(', ');
+    },
+  },
+});