add open/close events to TextCard

src/components/text/TextCard.vue

@@ -15,11 +15,14 @@
           </h4>
 
           <b-nav class="ml-auto flex-nowrap">
-            <b-nav-item v-for="prod in text.prods" :key="prod.id">
+            <b-nav-item
+              v-for="prod in text.prods" :key="prod.id"
+              @click="$emit('open', prod.id)"
+            >
               {{ prod.id }}
             </b-nav-item>
 
-            <b-nav-item>
+            <b-nav-item @click="$emit('close')">
               x
             </b-nav-item>
           </b-nav>

src/pages/Library.vue

@@ -5,9 +5,13 @@
 
     <!-- FOREGROUND (texts) -->
     <section v-for="group in groups" :key="group.id" class="split-screen">
-      <text-card :id="group.id" />
+      <text-card :id="group.id" @open="openText(group, $event)" @close="closeText(group)" />
       <div>
-        <text-card v-for="id in group.prod" :key="id" :id="id" />
+        <text-card
+          v-for="id in group.prod" :key="id"
+          :id="id"
+          @close="closeText(group, id)"
+        />
       </div>
     </section>
   </div>
@@ -53,11 +57,27 @@ export default {
   },
 
   methods: {
-    openText () {
+    openText (group, id) {
+      if (group.prod.includes(id)) return
+      group.prod.push(id)
+      this.updateQuery(this.groups)
+    },
+
+    closeText (group, id) {
+      if (!id) {
+        this.updateQuery(this.groups.filter(grp => grp !== group))
+      } else {
+        group.prod = group.prod.filter(id_ => id_ !== id)
+        this.updateQuery(this.groups)
+      }
+    },
+
+    updateQuery (groups) {
+      // Update the route's query (will not reload the page) and let vue determine what changed.
       this.$router.push({
         query: {
           mode: this.mode,
-          texts: [...this.texts, [50]]
+          texts: groups.map(grp => [grp.id, ...grp.prod])
         }
       })
     }