Implement saving entry to collection and removing from it

Author: sentosango

src/components/overlays/SaveToCollectionOverlay.vue

@@ -5,7 +5,6 @@
     transition-show="slide-up" transition-hide="slide-down" maximized
   >
     <div class="bg-dark">
-
       <q-toolbar class="row">
         <div class="col text-left"></div>
         <q-toolbar-title class="text-center text-subtitle1 col-7">
@@ -15,7 +14,6 @@
           <q-btn dense v-close-popup>Done</q-btn>
         </div>
       </q-toolbar>
-
       <q-list padding>
         <q-item
           clickable
@@ -32,15 +30,20 @@
           v-ripple
           v-for="collection in collections"
           :key="collection.id"
-          @click="saveToCollection(collection)"
+          @click="toggleSavingToCollection(collection)"
         >
           <q-item-section avatar style="min-width: auto">
-            <q-icon class="text-grey" name="star_outline"/>
+            <q-icon
+              :class="savedToCollection(collection) ? 'text-primary' : 'text-grey'"
+              :name="savedToCollection(collection) ? 'star' : 'star_outline'"
+            />
           </q-item-section>
           <q-item-section>{{ collection.title }}</q-item-section>
+          <q-item-section v-if="savedToCollection(collection)" side>
+            <q-badge color="primary">&check; Saved</q-badge>
+          </q-item-section>
         </q-item>
       </q-list>
-
     </div>
   </q-dialog>
 </template>
@@ -60,14 +63,35 @@ export default {
     saveToReadLater() {
       console.log(`Save entry #${this.entry.id} to read later`)
     },
-    saveToCollection(collection) {
-      console.log(`Save entry #${this.entry.id} to collection #${collection.id}`)
+    toggleSavingToCollection(collection) {
+      const payload = { collectionId: collection.id, entryId: this.entry.id }
+      const isSelectedCollection = this.$route.name === 'collection-entries'
+        && +this.$route.params.collectionId === collection.id
+
+      if (this.savedToCollection(collection)) {
+        // todo: Bug! Removing from collection not synced with UI
+        this.$store.dispatch('removeEntryFromCollection', payload)
+        if (isSelectedCollection) {
+          this.$store.commit('removeEntries', [this.entry])
+        }
+      } else {
+        this.$store.dispatch('saveEntryToCollection', payload)
+        if (isSelectedCollection) {
+          this.$store.commit('unshiftEntries', [this.entry])
+        }
+      }
     },
   },
   computed: {
     collections () {
       return this.$store.state.collections
     },
+    savedToCollection() {
+      console.log(this.entry)
+      return collection => this.entry.collections.some(
+        entryCollection => entryCollection.id === collection.id
+      )
+    },
   },
 }
 </script>