Singleton and database frontend further integration

Added singleton to DataService, added adding, updating and removing exhibits to database

editor_frontend/src/components/ExhibitEditor.vue

@@ -7,7 +7,7 @@
           <label for="name">Name:</label>
           <input id="name" type="text" v-model="exhibit.name" class="name" />
         </div>
-        <button>Save</button>
+        <button @click="saveExhibit">Save</button>
       </ul>
     </section>
     <section>
@@ -119,10 +119,7 @@ export default defineComponent({
       this.exhibit.widgets.splice(index, 1);
     },
     async getExhibit(id: string) {
-      let docData = await dataService.getOne(id);
-      this.exhibit.id = id;
-      this.exhibit.name = docData.name;
-      this.exhibit.description = docData.description;
+      this.exhibit = await dataService.getOne(id);
     },
     addExtras() {
       if (this.extra_key.length > 0 && this.extra_value.length > 0) {
@@ -140,6 +137,14 @@ export default defineComponent({
     saveExtras(key: string, value: string) {
       this.exhibit.extra.set(key, value);
     },
+    saveExhibit() {
+      if (this.exhibit.name) {
+        this.exhibit.description = "";
+        dataService.update(this.exhibit);
+      } else {
+        this.error_msg = "Exhibit has to have a name";
+      }
+    },
   },
 });
 </script>

editor_frontend/src/components/TheList.vue

@@ -36,12 +36,13 @@ export default defineComponent({
       this.items = await dataService.getAll();
     },
     remove(item: Exhibit) {
+      dataService.delete(item.id);
       this.items.splice(this.items.indexOf(item), 1);
     },
-    add() {
+    async add() {
+      const id = await dataService.createEmpty();
       let exhibit = new Exhibit();
-      exhibit.id = "0";
-      exhibit.name = "New Exhibit";
+      exhibit.id = id;
       this.items.push(exhibit);
     },
   },

editor_frontend/src/models/Exhibit.ts

@@ -1,3 +1,7 @@
+import firebase from "firebase/compat";
+import DocumentData = firebase.firestore.DocumentData;
+import exhibitEditor from "@/components/ExhibitEditor.vue";
+
 export class Exhibit {
   id: string; // id of exhibit
   name: string; // name of exhibit
@@ -14,6 +18,35 @@ export class Exhibit {
     this.extra = new Map<string, string>();
     this.widgets = [];
   }
+
+  toFirestoreConverter() {
+    const pairArr: ExhibitPair[] = [];
+    Array.from(this.extra.entries()).forEach((el) => {
+      pairArr.push(new ExhibitPair(el[0], el[1]));
+    });
+
+    return {
+      name: this.name,
+      description: this.description,
+      extra: JSON.stringify(pairArr),
+      widgets: JSON.stringify(this.widgets),
+    };
+  }
+
+  static fromFirebaseConverter(id: string, data: DocumentData | undefined) {
+    const newExhibit = new Exhibit();
+    newExhibit.id = id;
+    newExhibit.name = data?.name;
+    newExhibit.description = data?.description;
+    newExhibit.widgets = JSON.parse(data?.widgets);
+
+    const pairArr: ExhibitPair[] = JSON.parse(data?.extra);
+    pairArr.forEach((el) => {
+      newExhibit.extra.set(el.value, el.key);
+    });
+
+    return newExhibit;
+  }
 }
 
 export class Widget {
@@ -27,3 +60,13 @@ export class Widget {
     this.data = "";
   }
 }
+
+class ExhibitPair {
+  value: string;
+  key: string;
+
+  constructor(value: string, key: string) {
+    this.value = value;
+    this.key = key;
+  }
+}

editor_frontend/src/services/DataService.ts

@@ -1,15 +1,37 @@
-import { getFirestore } from "firebase/firestore";
+import {
+  addDoc,
+  collection,
+  deleteDoc,
+  doc,
+  getDoc,
+  getDocs,
+  getFirestore,
+  orderBy,
+  query,
+  updateDoc
+} from "firebase/firestore";
 import firebaseApp from "@/initfirestore";
-import { query, collection, getDocs, getDoc, doc } from "firebase/firestore";
 import { Exhibit } from "@/models/Exhibit";
 
 const db = getFirestore(firebaseApp);
 
 class DataService {
+  private static exists: boolean;
+  private static instance: DataService;
+  constructor() {
+    if (DataService.exists) {
+      return DataService.instance;
+    }
+    DataService.exists = true;
+    DataService.instance = this;
+    return this;
+  }
   async getAll() {
     const sth = [] as Exhibit[];
     sth.pop();
-    const querySnap = await getDocs(query(collection(db, "exhibits")));
+    const querySnap = await getDocs(
+      query(collection(db, "exhibits"), orderBy("name"))
+    );
 
     // add each doc to 'countries' array
     querySnap.forEach((doc) => {
@@ -20,25 +42,35 @@ class DataService {
   }
 
   async getOne(id: string) {
-    const sth = new Exhibit();
     const snap = await getDoc(doc(db, "exhibits", id));
-    sth.id = id;
-    sth.name = snap.data()?.name;
-    sth.description = snap.data()?.description;
-    return sth;
+    console.log(Exhibit.fromFirebaseConverter(snap.id, snap.data()));
+    return Exhibit.fromFirebaseConverter(snap.id, snap.data());
   }
 
-  /*create(exhibit) {
-    return coll.add(exhibit);
+  async create(exhibit: Exhibit) {
+    console.log(exhibit.toFirestoreConverter());
+    await addDoc(collection(db, "exhibits"), exhibit.toFirestoreConverter());
   }
 
-  update(id, value) {
-    return coll.doc(id).update(value);
+  async createEmpty() {
+    const sth = await addDoc(
+      collection(db, "exhibits"),
+      new Exhibit().toFirestoreConverter()
+    );
+    return sth.id;
   }
 
-  delete(id) {
-    return coll.doc(id).delete();
-  }*/
+  async update(exhibit: Exhibit) {
+    console.log(exhibit.toFirestoreConverter());
+    await updateDoc(
+      doc(db, "exhibits", exhibit.id),
+      exhibit.toFirestoreConverter()
+    );
+  }
+
+  async delete(id: string) {
+    await deleteDoc(doc(db, "exhibits", id));
+  }
 }
 
 export default new DataService();