From c9a2d5228baa71317129ef6f4609d588cd94b44b Mon Sep 17 00:00:00 2001
From: Piethein Strengholt <piethein@strengholt-online.nl>
Date: Mon, 15 Jul 2024 11:41:57 +0200
Subject: [PATCH] fix changing categories when selecting categories from
 pulldown

---
 client/src/components/Mobile.vue  |  9 ++-------
 client/src/components/Modal.vue   | 21 ++++++++++++++-------
 client/src/components/Sidebar.vue |  8 ++++----
 3 files changed, 20 insertions(+), 18 deletions(-)

diff --git a/client/src/components/Mobile.vue b/client/src/components/Mobile.vue
index fe4cf2e6a..89cbcb36b 100644
--- a/client/src/components/Mobile.vue
+++ b/client/src/components/Mobile.vue
@@ -45,13 +45,8 @@
       <p class="content-header">Click the button below to enable notifications</p>
       <button @click="subscribeNotifications()" type="button" class="btn btn-danger">Subscribe to notifications</button>
       <br><br>
-      <button
-          type="button"
-          class="btn btn-secondary"
-          data-dismiss="modal"
-          @click="closeModal()"
-        >Cancel
-      </button>
+
+      <button @click="closeModal()" type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
     </div>
   </div>
 </template>
diff --git a/client/src/components/Modal.vue b/client/src/components/Modal.vue
index ea31f6278..e9718d901 100644
--- a/client/src/components/Modal.vue
+++ b/client/src/components/Modal.vue
@@ -19,15 +19,15 @@
               </div>
 
               <div class="modal-body" v-if="this.store.showModal==='newfeed'">
-                <div v-if="this.store.categories.length > 0">
+                <div v-if="this.clonedCategories.length > 0">
                   <input class="form-control"  type="text" placeholder="Enter feed or website url..." v-model="url">
                   <br>
                   <div class="form-group row">
                     <label for="inputFeedDescription" class="col-sm-3 col-form-label">Category</label>
                     <div class="col-sm-9">
-                      <select class="form-select" id="category" v-model="store.currentSelection.categoryId" aria-label="Select Category">
+                      <select class="form-select" id="category" v-model="clonedSelectedCategory" aria-label="Select Category">
                         <option
-                          v-for="category in this.store.categories"
+                          v-for="category in this.clonedCategories"
                           :value="category.id"
                           :key="category.id"
                           v-bind:id="category.id"
@@ -42,7 +42,7 @@
                 </div>
                 <br>
                 <button
-                  v-if="this.store.categories.length > 0"
+                  v-if="this.clonedCategories.length > 0"
                   type="submit"
                   class="btn btn-primary mb-2"
                   @click="checkWebsite"
@@ -352,8 +352,10 @@ export default {
       url: null,
       category: {},
       categories: {},
+      categories2: {},
       feed: {},
-      selectedCategory: null
+      selectedCategory: null,
+      clonedSelectedCategory: null
     };
   },
   created: function() {
@@ -371,7 +373,6 @@ export default {
               this.feed = JSON.parse(JSON.stringify( this.store.categories[x].feeds[i]));
             }
           }
-
         }
       }
     }
@@ -385,6 +386,12 @@ export default {
       },
       deep: true
     },
+    "store.showModal": {
+      handler: function(data) {
+        this.clonedCategories = JSON.parse(JSON.stringify(this.store.categories));
+        this.clonedSelectedCategory = this.store.currentSelection.categoryId;
+      },
+    },
     inputCategory() {
       if (this.inputCategory) {
         this.category = JSON.parse(JSON.stringify(this.inputCategory));
@@ -436,7 +443,7 @@ export default {
     newFeed: function() {
       axios
         .post(import.meta.env.VITE_VUE_APP_HOSTNAME + "/api/feeds", {
-          categoryId: this.category.id,
+          categoryId: this.clonedSelectedCategory,
           feedName: this.feed.feedName,
           feedDesc: this.feed.feedDesc,
           url: this.feed.url,
diff --git a/client/src/components/Sidebar.vue b/client/src/components/Sidebar.vue
index 5732eddd2..965e8059e 100644
--- a/client/src/components/Sidebar.vue
+++ b/client/src/components/Sidebar.vue
@@ -37,7 +37,7 @@
           <span class="badge">{{ this.store.newUnreads }}</span>
         </span>
       </div>
-      <div v-bind:class="{ 'selected':  store.currentSelection.status === 'unread' }" v-on:click="loadType('unread')" id="unread" class="sidebar-category-top">
+      <div v-bind:class="{ 'selected': store.currentSelection.status === 'unread' }" v-on:click="loadType('unread')" id="unread" class="sidebar-category-top">
         <span class="glyphicon">
           <BootstrapIcon icon="record-circle-fill" variant="light" />
         </span>
@@ -46,7 +46,7 @@
           <span class="badge">{{ this.store.unreadCount }}</span>
         </span>
       </div>
-      <div v-bind:class="{ 'selected':  store.currentSelection.status === 'star' }" v-on:click="loadType('star')" id="star" class="sidebar-category-top">
+      <div v-bind:class="{ 'selected': store.currentSelection.status === 'star' }" v-on:click="loadType('star')" id="star" class="sidebar-category-top">
         <span class="glyphicon">
           <BootstrapIcon icon="heart-fill" variant="light" />
         </span>
@@ -55,7 +55,7 @@
           <span class="badge">{{ this.store.starCount }}</span>
         </span>
       </div>
-      <div v-bind:class="{ 'selected':  store.currentSelection.status === 'hot' }" v-on:click="loadType('hot')" id="hot" class="sidebar-category-top">
+      <div v-bind:class="{ 'selected': store.currentSelection.status === 'hot' }" v-on:click="loadType('hot')" id="hot" class="sidebar-category-top">
         <span class="glyphicon">
           <BootstrapIcon icon="fire" variant="light" />
         </span>
@@ -64,7 +64,7 @@
           <span class="badge">{{ this.store.hotCount }}</span>
         </span>
       </div>
-      <div v-bind:class="{ 'selected':  store.currentSelection.status === 'read' }" v-on:click="loadType('read')" id="read" class="sidebar-category-top">
+      <div v-bind:class="{ 'selected': store.currentSelection.status === 'read' }" v-on:click="loadType('read')" id="read" class="sidebar-category-top">
         <span class="glyphicon">
           <BootstrapIcon icon="check-circle-fill" variant="light" />
         </span>