Webservice auf neue Logik umgebaut

src/modules/process/models/process/Process.js

@@ -1,11 +1,13 @@
 import { BaseModel } from "@/modules/shared/models/Basemodel";
+import { View } from "./View";
 
 export class Process extends BaseModel {
-  constructor({ id, name, description } = {}) {
+  constructor({ id, name, description, views = [] } = {}) {
     super();
     this.id = id;
     this.name = name;
     this.description = description;
+    this.views = views.map((view) => new View(view));
     this.topic = "system_process";
   }
 

src/modules/process/models/process/View.js

@@ -0,0 +1,22 @@
+import { BaseModel } from "@/modules/shared/models/Basemodel";
+
+export class View extends BaseModel {
+  constructor({ id, name, layout } = {}) {
+    super();
+    this.id = id ?? null;
+    this.name = name ?? "";
+    this.layout = layout ?? {}; // Layout-JSON oder ähnliche Struktur
+    this.topic = "system_processView";
+  }
+
+  getPublicFields() {
+    return ["id", "name", "layout"];
+  }
+
+  toJSON() {
+    return this.getPublicFields().reduce((obj, key) => {
+      obj[key] = this[key];
+      return obj;
+    }, {});
+  }
+}

src/modules/process/pages/ProcessOverviewComponent.vue

@@ -9,7 +9,7 @@
       v-model="processObject.description"
     ></textarea>
     <ProcessTableComponent
-      :viewProp="objectData"
+      :viewProp="processObject.views"
       :tableTitleProp="'Ansichten'"
     ></ProcessTableComponent>
     <ProcessTableComponent
@@ -21,8 +21,9 @@
 
 <script>
 import ProcessTableComponent from "@/modules/process/components/process/ProcessTableComponent.vue";
-import { getObject } from "@/utils/getObject.js";
-//import { getSpecificObject } from "@/utils/getSpecificObject";
+import socketService from "@/modules/shared/services/WebSocketService";
+import { View } from "@/modules/process/models/process/View";
+
 export default {
   name: "ProcessOverviewComponent",
   // Verwendete Komponenten
@@ -45,7 +46,7 @@ export default {
   data() {
     return {
       processObject: {},
-      objectData: {},
+      objectData: [],
     };
   },
 
@@ -59,17 +60,27 @@ export default {
   mounted() {
     this.processObject = { ...this.object };
     console.log(this.processObject);
-    this.wsHandler = getObject(
+    socketService.subscribe(
+      "system_processView",
+      "_id",
+      { "processLink.transientValue": this.processObject.id },
+      (val) => {
+        val.forEach((element) => {
+          let curView = new View({ id: element }).makeReactive();
+          curView.subscribe(["name"]);
+          this.processObject.views.push(curView);
+        });
+      }
+    );
+    /*this.wsHandler = getObject(
       "system_processView",
       ["name", "description"],
       (id, updated) => {
         this.objectData = { ...this.objectData, [id]: updated };
       }
-    );
-  },
-  beforeUnmount() {
-    this.specificObjectHandler?.unsubscribe();
+    );*/
   },
+  beforeUnmount() {},
 };
 </script>
 

src/pages/DevelopmentDashboard.vue

@@ -75,7 +75,9 @@ export default {
     );*/
   },
 
-  beforeUnmount() {},
+  beforeUnmount() {
+    console.log(this.objectData);
+  },
 };
 </script>