From b3daa1ce88c8e95e254833ceb8c8537bf121c50d Mon Sep 17 00:00:00 2001
From: "Abdulmhsen B. A. A." <admin@arabcoders.org>
Date: Mon, 1 Jul 2024 22:27:48 +0300
Subject: [PATCH] Fixed bug prevent adding new options if the backend.options
 is empty.

---
 frontend/pages/backend/[backend]/edit.vue  |  15 +-
 frontend/pages/backend/[backend]/index.vue | 304 ++++++++++++---------
 src/Libs/Traits/APITraits.php              |   2 +-
 3 files changed, 181 insertions(+), 140 deletions(-)

diff --git a/frontend/pages/backend/[backend]/edit.vue b/frontend/pages/backend/[backend]/edit.vue
index 84b5ae7d..ad9da6ce 100644
--- a/frontend/pages/backend/[backend]/edit.vue
+++ b/frontend/pages/backend/[backend]/edit.vue
@@ -360,12 +360,14 @@ useHead({title: 'Backends - Edit: ' + id})
 
 const loadContent = async () => {
   const content = await request(`/backend/${id}`)
-  backend.value = await content.json()
+  let json = await content.json()
 
-  if (!backend.value?.options) {
-    backend.value.options = {}
+  if (!json?.options || typeof json.options !== 'object') {
+    json.options = {}
   }
 
+  backend.value = json;
+
   if ('plex' === backend.value.type) {
     await getServers()
   }
@@ -427,7 +429,12 @@ const addOption = async () => {
   }
 
   backend.value.options = backend.value.options || {}
-  backend.value.options[selectedOption.value] = ''
+  if (backend.value.options.length < 1) {
+    backend.value.options = {[selectedOption.value]: ''}
+  } else {
+    backend.value.options[selectedOption.value] = ''
+  }
+
   newOptions.value[selectedOption.value] = true
   selectedOption.value = ''
 }
diff --git a/frontend/pages/backend/[backend]/index.vue b/frontend/pages/backend/[backend]/index.vue
index ef4846c5..cdd29c01 100644
--- a/frontend/pages/backend/[backend]/index.vue
+++ b/frontend/pages/backend/[backend]/index.vue
@@ -1,136 +1,157 @@
 <template>
-  <div class="columns is-multiline">
-    <div class="column is-12 is-clearfix is-unselectable">
-      <span class="title is-4">
-        <span class="icon"><i class="fas fa-server"></i>&nbsp;</span>
-        <NuxtLink to="/backends" v-text="'Backends'"/>
-        : {{ backend }}
-      </span>
-      <div class="is-pulled-right">
-        <div class="field is-grouped">
-          <p class="control">
-            <NuxtLink class="button is-danger" v-tooltip.bottom="'Delete Backend'" :to="`/backend/${backend}/delete`">
-              <span class="icon"><i class="fas fa-trash"></i></span>
-            </NuxtLink>
-          </p>
-          <p class="control">
-            <NuxtLink class="button is-primary" v-tooltip.bottom="'Edit Backend'" :to="`/backend/${backend}/edit`">
-              <span class="icon"><i class="fas fa-edit"></i></span>
-            </NuxtLink>
-          </p>
+  <div class="columns is-multiline" v-if="isLoading || isError">
+    <div class="column is-12">
+      <Message message_class="is-background-info-90 has-text-dark" title="Loading" v-if="isLoading"
+               icon="fas fa-spinner fa-spin" message="Loading backend settings. Please wait..."/>
+
+      <Message message_class="has-background-warning-80 has-text-dark" icon="fas fa-exclamation-triangle"
+               title="Warning" v-if="!isLoading && isError">
+        <p>
+          <span class="icon"><i class="fas fa-exclamation"></i></span>
+          There was error loading your backend data. Please try again later.
+        </p>
+        <div v-if="error">
+          <pre><code>{{ error }}</code></pre>
         </div>
-      </div>
-      <div class="is-hidden-mobile">
-        <span class="subtitle">Basic information about backend activity.</span>
-      </div>
+      </Message>
     </div>
   </div>
 
-  <div class="columns is-multiline">
-    <div class="column is-12">
-      <div class="content">
-        <h1 class="title is-4">Useful Tools</h1>
-        <ul>
-          <li>
-            <NuxtLink :to="`/backend/${backend}/mismatched`" v-text="'Find possible mis-identified content.'"/>
-          </li>
-          <li>
-            <NuxtLink :to="`/backend/${backend}/unmatched`" v-text="'Find unmatched content.'"/>
-          </li>
-          <li>
-            <NuxtLink :to="`/backend/${backend}/libraries`" v-text="'View backend libraries.'"/>
-          </li>
-          <li>
-            <NuxtLink :to="`/backend/${backend}/users`" v-text="'View backend users.'"/>
-          </li>
-          <li>
-            <NuxtLink :to="`/backend/${backend}/sessions`" v-text="'View active sessions.'"/>
-          </li>
-          <li>
-            <NuxtLink :to="`/backend/${backend}/search`" v-text="'Search backend content.'"/>
-          </li>
-        </ul>
-      </div>
-    </div>
-  </div>
-
-  <div class="columns" v-if="bHistory.length<1">
-    <div class="column is-12">
-      <Message message_class="is-background-warning-80 has-text-dark" title="Warning" icon="fas fa-exclamation-circle"
-               message="No items were found. There are probably no items in the local database yet."/>
-    </div>
-  </div>
-  <div class="columns is-multiline" v-else>
-    <div class="column is-12">
-      <h1 class="title is-4">Recent History</h1>
-    </div>
-    <div class="column is-6-tablet" v-for="history in bHistory" :key="history.id">
-      <div class="card" :class="{ 'is-success': history.watched }">
-        <header class="card-header">
-          <p class="card-header-title is-text-overflow pr-1">
-            <NuxtLink :to="`/history/${history.id}`" v-text="makeName(history)"/>
-          </p>
-          <span class="card-header-icon">
-            <span class="icon" v-if="'episode' === history.type"><i class="fas fa-tv"></i></span>
-            <span class="icon" v-else><i class="fas fa-film"></i></span>
-          </span>
-        </header>
-        <div class="card-content">
-          <div class="columns is-multiline is-mobile has-text-centered">
-            <div class="column is-4-tablet is-6-mobile has-text-left-mobile">
-              <span class="icon-text">
-                <span class="icon"><i class="fas fa-calendar"></i>&nbsp;</span>
-                <span class="has-tooltip"
-                      v-tooltip="`Updated at: ${moment.unix(history.updated_at ?? history.updated).format(TOOLTIP_DATE_FORMAT)}`">
-                  {{ moment.unix(history.updated_at ?? history.updated).fromNow() }}
-                </span>
-              </span>
-            </div>
-            <div class="column is-4-tablet is-6-mobile has-text-right-mobile">
-              <span class="icon-text">
-                <span class="icon"><i class="fas fa-server"></i></span>
-                <span>
-                  <NuxtLink :to="'/backend/'+history.via" v-text="history.via"/>
-                </span>
-              </span>
-            </div>
-            <div class="column is-4-tablet is-12-mobile has-text-left-mobile">
-              <span class="icon-text">
-                <span class="icon"><i class="fas fa-envelope"></i></span>
-                <span>{{ history.event }}</span>
-              </span>
-            </div>
-          </div>
-        </div>
-        <div class="card-footer" v-if="history.progress">
-          <div class="card-footer-item">
-            <span class="has-text-success" v-if="history.watched">Played</span>
-            <span class="has-text-danger" v-else>Unplayed</span>
-          </div>
-          <div class="card-footer-item">{{ formatDuration(history.progress) }}</div>
-        </div>
-      </div>
-    </div>
-    <div class="column is-12">
-      <NuxtLink :to="`/history/?perpage=50&page=1&q=${backend}.via://${backend}&key=metadata`">
-        <span class="icon-text">
-          <span class="icon"><i class="fas fa-history"></i></span>
-          <span>View all history related to this backend</span>
+  <template v-if="!isLoading && !isError">
+    <div class="columns is-multiline">
+      <div class="column is-12 is-clearfix is-unselectable">
+        <span class="title is-4">
+          <span class="icon"><i class="fas fa-server"></i>&nbsp;</span>
+          <NuxtLink to="/backends" v-text="'Backends'"/>
+          : {{ backend }}
         </span>
-      </NuxtLink>
-    </div>
-  </div>
-
-  <div class="columns is-multiline" v-if="info">
-    <div class="column is-12">
-      <h1 class="title is-4">Basic info</h1>
-    </div>
-    <div class="column is-12">
-      <div class="content">
-        <code class="is-block is-pre-wrap" v-text="info"></code>
+        <div class="is-pulled-right">
+          <div class="field is-grouped">
+            <p class="control">
+              <NuxtLink class="button is-danger" v-tooltip.bottom="'Delete Backend'" :to="`/backend/${backend}/delete`">
+                <span class="icon"><i class="fas fa-trash"></i></span>
+              </NuxtLink>
+            </p>
+            <p class="control">
+              <NuxtLink class="button is-primary" v-tooltip.bottom="'Edit Backend'" :to="`/backend/${backend}/edit`">
+                <span class="icon"><i class="fas fa-edit"></i></span>
+              </NuxtLink>
+            </p>
+          </div>
+        </div>
+        <div class="is-hidden-mobile">
+          <span class="subtitle">Basic information about backend activity.</span>
+        </div>
       </div>
     </div>
-  </div>
+
+    <div class="columns is-multiline">
+      <div class="column is-12">
+        <div class="content">
+          <h1 class="title is-4">Useful Tools</h1>
+          <ul>
+            <li>
+              <NuxtLink :to="`/backend/${backend}/mismatched`" v-text="'Find possible mis-identified content.'"/>
+            </li>
+            <li>
+              <NuxtLink :to="`/backend/${backend}/unmatched`" v-text="'Find unmatched content.'"/>
+            </li>
+            <li>
+              <NuxtLink :to="`/backend/${backend}/libraries`" v-text="'View backend libraries.'"/>
+            </li>
+            <li>
+              <NuxtLink :to="`/backend/${backend}/users`" v-text="'View backend users.'"/>
+            </li>
+            <li>
+              <NuxtLink :to="`/backend/${backend}/sessions`" v-text="'View active sessions.'"/>
+            </li>
+            <li>
+              <NuxtLink :to="`/backend/${backend}/search`" v-text="'Search backend content.'"/>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+
+    <div class="columns" v-if="bHistory.length<1">
+      <div class="column is-12">
+        <Message message_class="is-background-warning-80 has-text-dark" title="Warning" icon="fas fa-exclamation-circle"
+                 message="No items were found. There are probably no items in the local database yet."/>
+      </div>
+    </div>
+
+    <div class="columns is-multiline" v-else>
+      <div class="column is-12">
+        <h1 class="title is-4">Recent History</h1>
+      </div>
+      <div class="column is-6-tablet" v-for="history in bHistory" :key="history.id">
+        <div class="card" :class="{ 'is-success': history.watched }">
+          <header class="card-header">
+            <p class="card-header-title is-text-overflow pr-1">
+              <NuxtLink :to="`/history/${history.id}`" v-text="makeName(history)"/>
+            </p>
+            <span class="card-header-icon">
+              <span class="icon" v-if="'episode' === history.type"><i class="fas fa-tv"></i></span>
+              <span class="icon" v-else><i class="fas fa-film"></i></span>
+            </span>
+          </header>
+          <div class="card-content">
+            <div class="columns is-multiline is-mobile has-text-centered">
+              <div class="column is-4-tablet is-6-mobile has-text-left-mobile">
+                <span class="icon-text">
+                  <span class="icon"><i class="fas fa-calendar"></i>&nbsp;</span>
+                  <span class="has-tooltip"
+                        v-tooltip="`Updated at: ${moment.unix(history.updated_at ?? history.updated).format(TOOLTIP_DATE_FORMAT)}`">
+                    {{ moment.unix(history.updated_at ?? history.updated).fromNow() }}
+                  </span>
+                </span>
+              </div>
+              <div class="column is-4-tablet is-6-mobile has-text-right-mobile">
+                <span class="icon-text">
+                  <span class="icon"><i class="fas fa-server"></i></span>
+                  <span>
+                    <NuxtLink :to="'/backend/'+history.via" v-text="history.via"/>
+                  </span>
+                </span>
+              </div>
+              <div class="column is-4-tablet is-12-mobile has-text-left-mobile">
+                <span class="icon-text">
+                  <span class="icon"><i class="fas fa-envelope"></i></span>
+                  <span>{{ history.event }}</span>
+                </span>
+              </div>
+            </div>
+          </div>
+          <div class="card-footer" v-if="history.progress">
+            <div class="card-footer-item">
+              <span class="has-text-success" v-if="history.watched">Played</span>
+              <span class="has-text-danger" v-else>Unplayed</span>
+            </div>
+            <div class="card-footer-item">{{ formatDuration(history.progress) }}</div>
+          </div>
+        </div>
+      </div>
+      <div class="column is-12">
+        <NuxtLink :to="`/history/?perpage=50&page=1&q=${backend}.via://${backend}&key=metadata`">
+          <span class="icon-text">
+            <span class="icon"><i class="fas fa-history"></i></span>
+            <span>View all history related to this backend</span>
+          </span>
+        </NuxtLink>
+      </div>
+    </div>
+
+    <div class="columns is-multiline" v-if="info">
+      <div class="column is-12">
+        <h1 class="title is-4">Basic info</h1>
+      </div>
+      <div class="column is-12">
+        <div class="content">
+          <code class="is-block is-pre-wrap" v-text="info"></code>
+        </div>
+      </div>
+    </div>
+  </template>
 </template>
 
 <script setup>
@@ -140,10 +161,11 @@ import {formatDuration, makeName, notification, TOOLTIP_DATE_FORMAT} from "~/uti
 
 const backend = useRoute().params.backend
 
-useHead({title: `Backends: ${backend}`})
-
 const bHistory = ref([])
 const info = ref({})
+const isLoading = ref(true)
+const isError = ref(false)
+const error = ref()
 
 const loadRecentHistory = async () => {
   let search = new URLSearchParams()
@@ -156,7 +178,7 @@ const loadRecentHistory = async () => {
   const json = await response.json()
 
   if (200 !== response.status) {
-    notification('Error', 'Error loading data', `${json.error.code}: ${json.error.message}`);
+    notification('error', 'Error loading data', `${json.error.code}: ${json.error.message}`);
     return
   }
 
@@ -164,13 +186,25 @@ const loadRecentHistory = async () => {
 };
 
 const loadInfo = async () => {
-  const response = await request(`/backend/${backend}/info`)
-  info.value = await response.json()
+  try {
+    isLoading.value = false
+    const response = await request(`/backend/${backend}/info`)
+    info.value = await response.json()
+    if (200 !== response.status) {
+      isError.value = true
+      error.value = `${info.value.error.code}: ${info.value.error.message}`
+      backend.value = ''
+      return;
+    }
+    await loadRecentHistory()
+    useHead({title: `Backends: ${backend}`})
+  } catch (e) {
+    error.value = e
+    isError.value = true
+  } finally {
+    isLoading.value = false
+  }
 }
 
-onMounted(async () => {
-  await loadInfo();
-  await loadRecentHistory()
-})
-
+onMounted(async () => await loadInfo())
 </script>
diff --git a/src/Libs/Traits/APITraits.php b/src/Libs/Traits/APITraits.php
index 814a8189..97eef54d 100644
--- a/src/Libs/Traits/APITraits.php
+++ b/src/Libs/Traits/APITraits.php
@@ -81,7 +81,7 @@ trait APITraits
             ];
 
             if (empty($backend['options'])) {
-                $backend['options'] = (object)[];
+                $backend['options'] = [];
             }
 
             $backends[] = $backend;