Workaround for settings routing issue, server update, validation.

Author: husudosu

src/components/addServerModal.vue

@@ -100,12 +100,22 @@ export default {
     };
 
     const onSubmitClicked = () => {
-      console.log("Submit clicked");
-      props.modalController.dismiss(dialog.value);
+      // Validate server data
+      let errors = [];
+      if (dialog.value.name.length === 0) errors.push("Name required");
+      if (dialog.value.host.length === 0) errors.push("Host required");
+
+      if (isNaN(dialog.value.port)) errors.push("Port should be number");
+      else if (dialog.value.port <= 0)
+        errors.push("Port should be greater than 0");
+      else if (dialog.value.port > 65535)
+        errors.push("Port should be smaller than 65535");
+
+      if (errors.length > 0) alert(errors.join("\n"));
+      else props.modalController.dismiss(dialog.value);
     };
 
     const onDeleteClicked = () => {
-      console.log("Delete clicked");
       props.modalController.dismiss({ delete: true });
     };
 

src/dbcrud.js

@@ -52,14 +52,15 @@ export const getServer = async (db, id = null) => {
   }
 };
 
-export const updateServer = async (db, id, data) => {
+export const updateServerSQL = async (db, id, data) => {
   const res = await db.run(
     "UPDATE server SET name=COALESCE(?, name), host=COALESCE(?, host), port=COALESCE(?, port) WHERE id=?",
     [data.name, data.host, data.port, id]
   );
   if (res.changes && res.changes.changes && res.changes.changes < 0) {
     throw new Error(`Error: execute failed`);
   }
+  return res;
 };
 
 export const deleteServer = async (db, id) => {

src/router/index.js

@@ -19,16 +19,16 @@ const routes = [
     path: "/folder/settings",
     component: () => import("../views/Settings.vue"),
   },
-  {
-    name: "folder.collections",
-    path: "/folder/collections",
-    component: () => import("../views/Collections.vue"),
-  },
-  {
-    name: "folder.servers",
-    path: "/folder/servers",
-    component: () => import("../views/Servers.vue"),
-  },
+  // {
+  //   name: "folder.collections",
+  //   path: "/folder/collections",
+  //   component: () => import("../views/Collections.vue"),
+  // },
+  // {
+  //   name: "folder.servers",
+  //   path: "/folder/servers",
+  //   component: () => import("../views/Servers.vue"),
+  // },
   {
     name: "folder.about",
     path: "/folder/about",

src/store/settings.module.js

@@ -1,6 +1,12 @@
 import { Storage } from "@capacitor/storage";
 
-import { createServer, deleteServer, getServer, initDBTables } from "../dbcrud";
+import {
+  createServer,
+  deleteServer,
+  getServer,
+  initDBTables,
+  updateServerSQL,
+} from "../dbcrud";
 import { Capacitor } from "@capacitor/core";
 import { CapacitorSQLite, SQLiteConnection } from "@capacitor-community/sqlite";
 import { useSQLite } from "vue-sqlite-hook";
@@ -77,6 +83,12 @@ export const settings = {
       const index = state.settings.servers.findIndex((el) => el.id === value);
       if (index > -1) state.settings.servers.splice(index, 1);
     },
+    updateServerEntry(state, value) {
+      const index = state.settings.servers.findIndex(
+        (el) => el.id === value.id
+      );
+      if (index > -1) state.settings.servers[index] = value;
+    },
   },
   actions: {
     loadSettings: async function ({ commit, state }) {
@@ -221,5 +233,11 @@ export const settings = {
       await deleteServer(state.dbSession, serverId);
       commit("removeFromServers", serverId);
     },
+    updateServer: async function ({ state, commit, dispatch }, payload) {
+      if (!state.dbSession || !state.dbSession.isDBOpen("remote_db"))
+        await dispatch("initDbSession");
+      await updateServerSQL(state.dbSession, payload.id, payload);
+      commit("updateServerEntry", payload);
+    },
   },
 };

src/views/Collections.vue

@@ -3,7 +3,9 @@
     <ion-header :translucent="true">
       <ion-toolbar>
         <ion-buttons slot="start">
-          <ion-back-button></ion-back-button>
+          <ion-button @click="onBackClicked">
+            <ion-icon :icon="arrowBack"></ion-icon>
+          </ion-button>
         </ion-buttons>
         <ion-title>Media collections</ion-title>
       </ion-toolbar>
@@ -25,7 +27,7 @@
           <ion-icon :icon="add"></ion-icon>
         </ion-fab-button>
       </ion-fab>
-      <ion-list v-if="collections.length > 0">
+      <ion-list>
         <ion-item v-for="collection in collections" :key="collection.id">
           <ion-label class="ion-text-wrap">
             <h2>{{ collection.name }}</h2>
@@ -44,9 +46,8 @@
             <ion-icon slot="icon-only" :icon="trashBin"></ion-icon>
           </ion-button>
         </ion-item>
-      </ion-list>
-      <ion-list v-else>
-        <ion-item>No collections</ion-item>
+
+        <ion-item v-if="collections.length == 0"> I'm empty </ion-item>
       </ion-list>
     </ion-content>
   </ion-page>
@@ -63,15 +64,14 @@ import {
   IonToolbar,
   IonList,
   IonItem,
-  IonBackButton,
   IonIcon,
   IonLabel,
   IonFab,
   IonFabButton,
   IonButton,
   modalController,
 } from "@ionic/vue";
-import { add, trashBin, options } from "ionicons/icons";
+import { add, trashBin, options, arrowBack } from "ionicons/icons";
 import { apiInstance } from "../api";
 import { useStore } from "vuex";
 import addCollectionModal from "../components/addCollectionModal.vue";
@@ -135,6 +135,9 @@ export default {
       await modal.present();
     };
 
+    const onBackClicked = () => {
+      modalController.dismiss();
+    };
     const getCollectionType = (value) => {
       switch (value) {
         case 1:
@@ -152,11 +155,13 @@ export default {
       onDeleteCollectionClicked,
       getCollectionType,
       onEditCollectionClicked,
+      onBackClicked,
       connectedState,
       collections,
       add,
       trashBin,
       options,
+      arrowBack,
     };
   },
   components: {
@@ -168,7 +173,6 @@ export default {
     IonContent,
     IonList,
     IonItem,
-    IonBackButton,
     IonIcon,
     IonLabel,
     IonFab,

src/views/Servers.vue

@@ -3,7 +3,9 @@
     <ion-header :translucent="true">
       <ion-toolbar>
         <ion-buttons slot="start">
-          <ion-back-button></ion-back-button>
+          <ion-button @click="onBackClicked">
+            <ion-icon :icon="arrowBack"></ion-icon>
+          </ion-button>
         </ion-buttons>
         <ion-title>Servers</ion-title>
       </ion-toolbar>
@@ -35,6 +37,7 @@
             <p>{{ item.host }}:{{ item.port }}</p>
           </ion-label>
         </ion-item>
+        <ion-item v-if="servers.length == 0"> I'm empty </ion-item>
       </ion-list>
     </ion-content>
   </ion-page>
@@ -44,7 +47,7 @@
 import { computed } from "vue";
 
 import { useStore } from "vuex";
-import { add } from "ionicons/icons";
+import { add, arrowBack } from "ionicons/icons";
 import {
   IonPage,
   IonToolbar,
@@ -55,12 +58,12 @@ import {
   IonList,
   IonItem,
   IonIcon,
-  IonBackButton,
   IonLabel,
   IonFab,
   IonFabButton,
   modalController,
 } from "@ionic/vue";
+
 import addServerModal from "../components/addServerModal.vue";
 
 export default {
@@ -74,15 +77,12 @@ export default {
     IonList,
     IonItem,
     IonIcon,
-    IonBackButton,
     IonLabel,
     IonFab,
     IonFabButton,
   },
 
   setup() {
-    // Capacitor SQLite and Jeep init
-    // const app = getCurrentInstance();
     const store = useStore();
     const servers = computed(() => store.getters["settings/servers"]);
 
@@ -95,12 +95,9 @@ export default {
         },
       });
       modal.onDidDismiss().then(async (response) => {
-        if (response.data) {
-          // servers.value.push(response.data);
+        if (response.data)
           await store.dispatch("settings/addServer", response.data);
-        }
       });
-
       await modal.present();
     };
 
@@ -114,66 +111,25 @@ export default {
       });
       modal.onDidDismiss().then(async (response) => {
         if (response.data) {
-          // Deletes server
-          if (response.data.delete) {
-            console.log("Delete server");
+          if (response.data.delete)
             await store.dispatch("settings/removeServer", server.id);
-          } else {
-            console.log("Update server");
-          }
+          else await store.dispatch("settings/updateServer", response.data);
         }
       });
       await modal.present();
     };
-    // const onUpdateServerClicked = async (server) => {
-    //   const modal = await modalController.create({
-    //     component: addServerModal,
-    //     componentProps: {
-    //       modalController,
-    //       server,
-    //     },
-    //   });
-    //   modal.onDidDismiss().then(async (response) => {
-    //     if (response.data) {
-    //       const index = servers.value.findIndex((el) => el.id === server.id);
-
-    //       if (!response.data.delete) {
-    //         await updateServer(db.value, server.id, response.data);
-    //         servers.value[index] = Object.assign(
-    //           servers.value[index],
-    //           response.data
-    //         );
-    //       }
-    //     }
-    //   }
-    // }
-    //       // Update server
-    //       // if (!response.data.delete) {
-    //       //   servers.value[index] = Object.assign(
-    //       //     servers.value[index],
-    //       //     response.data
-    //       //   );
-    //       // } else {
-    //       //   // Delete server
-    //       //   servers.value.splice(index, 1);
-    //       // }
-    //       // await store.dispatch("settings/setSetting", {
-    //       //   key: "servers",
-    //       //   value: JSON.stringify(servers.value),
-    //       // });
-    //       // Reload settings
-    //       // store.dispatch("settings/loadSettings");
-    //     }
-    //   });
 
-    //   await modal.present();
-    // };
+    const onBackClicked = () => {
+      modalController.dismiss();
+    };
 
     return {
       servers,
       addNewserver,
       onUpdateServerClicked,
+      onBackClicked,
       add,
+      arrowBack,
     };
   },
 };