Allow only one set of change categories for all library codes

Author: lrosenstrom

vue-client/src/components/usersettings/change-categories.vue

@@ -8,71 +8,99 @@ export default {
   mixins: [LensMixin],
   data() {
     return {
-      expanded: false,
+      categoriesIsExpanded: false,
+      sigelIsExpanded: false,
     };
   },
   props: {
     sigel: Object,
     availableCategories: [],
+    availableSigels: [],
   },
   methods: {
-    updateChangeCategories(e, sigel, categoryId) {
-      this.$store.dispatch('updateSubscribedChangeCategories', { libraryId: this.sigelUri, categoryId: categoryId, checked: e.target.checked });
+    updateSigel(e, sigel) {
+      console.log('available sigels', JSON.stringify(this.availableSigels));
+      console.log('sigelCode', sigel);
+      this.$store.dispatch('updateSubscribedSigel', { libraryId: this.sigelUri(sigel), checked: e.target.checked });
     },
-    toggleExpanded() {
-      this.expanded = !this.expanded;
+    updateCategory(e, categoryId) {
+      this.$store.dispatch('updateSubscribedChangeCategory', { categoryId: categoryId, checked: e.target.checked });
+    },
+    toggleSigelExpanded() {
+      this.sigelIsExpanded = !this.sigelIsExpanded;
+    },
+    toggleCategoriesExpanded() {
+      this.categoriesIsExpanded = !this.categoriesIsExpanded;
     },
     isActiveCategory(categoryId) {
-      const obj = this.userChangeCategories.find(c => c.heldBy === this.sigelUri);
+      const obj = this.userChangeCategories[0];
       return obj ? obj.triggers.includes(categoryId) : false;
     },
+    isActiveSigel(sigel) {
+      console.log('this.userChangeCategories', JSON.stringify(this.userChangeCategories));
+      const obj = this.userChangeCategories.find(c => c.heldBy === this.sigelUri(sigel));
+      return !!obj;
+    },
     label(obj) {
       return this.getLabel(obj);
     },
+    sigelLabel(sigel) {
+      return StringUtil.getSigelLabel(sigel);
+    },
+    sigelUri(sigel) {
+      return StringUtil.getLibraryUri(sigel.code);
+    },
   },
   computed: {
     ...mapGetters([
       'userChangeCategories',
     ]),
-    isExpanded() {
-      return this.expanded;
-    },
-    sigelLabel() {
-      return StringUtil.getSigelLabel(this.sigel);
-    },
-    sigelUri() {
-      return StringUtil.getLibraryUri(this.sigel.code);
-    },
   },
   mounted() {
-    this.$nextTick(() => {
-    });
   },
 };
 </script>
 
-<template>
+<template><div>
   <div class="Categories">
-      <div class="Categories-label" @click="toggleExpanded">
-        <i class="Categories-arrow fa fa-chevron-right"
-        :class="{'icon is-expanded' : isExpanded}"
-        ></i>
-      {{ sigelLabel }}
+    <div class="Categories-label" @click="toggleSigelExpanded">
+      <i class="Categories-arrow fa fa-chevron-right"
+      :class="{'icon is-expanded' : sigelIsExpanded}"
+      ></i>
+      {{ 'Collections' | translatePhrase }}
+    </div>
+    <div v-if="sigelIsExpanded">
+      <div class="Categories-row" v-for="sigel in availableSigels" :key="sigel.code">
+        <div class="Categories-key">{{ sigelLabel(sigel) }}</div>
+        <div class="Categories-value">
+          <input id="categoryCheckbox"
+            class="customCheckbox-input"
+            type="checkbox"
+            @change="e => updateSigel(e, sigel)" :checked="isActiveSigel(sigel)">
+          <div class="customCheckbox-icon"></div>
+        </div>
       </div>
-
-    <div v-if="isExpanded">
+    </div>
+    <div class="Categories-label" @click="toggleCategoriesExpanded">
+      <i class="Categories-arrow fa fa-chevron-right"
+        :class="{'icon is-expanded' : categoriesIsExpanded}"
+      ></i>
+      {{ 'Change categories' | translatePhrase }}
+    </div>
+    <div v-if="categoriesIsExpanded">
       <div class="Categories-row" v-for="category in availableCategories" :key="category['@id']">
         <div class="Categories-key">{{ label(category) }}</div>
         <div class="Categories-value">
           <input id="categoryCheckbox"
             class="customCheckbox-input"
             type="checkbox"
-            @change="updateChangeCategories(...arguments, sigel, category['@id'])" :checked="isActiveCategory(category['@id'])">
+            @change="e => updateCategory(e, category['@id'])" :checked="isActiveCategory(category['@id'])">
           <div class="customCheckbox-icon"></div>
         </div>
       </div>
     </div>
   </div>
+</div>
 </template>
 
 <style scoped lang="less">
@@ -96,11 +124,11 @@ export default {
     border-width: 0px 0px 1px 0px;
   }
   &-key {
-    padding: 0.5em;
+    padding: 0.6em;
     width: 50%;
   }
   &-value {
-    padding: 0.5em;
+    padding: 0.6em;
     width: 50%;
   }
   &-label {

vue-client/src/components/usersettings/user-settings.vue

@@ -187,9 +187,7 @@ export default {
           </table>
           <h5 class="uppercaseHeading--bold">{{ 'Subscribe to change notes' | translatePhrase }}</h5>
           <div class="UserSettings-changeCategories">
-            <div v-for="sigel in sortedSigels" :key="sigel.code">
-              <change-categories :sigel="sigel" :userChangeCategories="userChangeCategories" :availableCategories="availableChangeCategories"/>
-            </div>
+            <change-categories :available-sigels="sortedSigels" :userChangeCategories="userChangeCategories" :availableCategories="availableChangeCategories"/>
           </div>
         </form>
         <button class="btn btn-primary btn--lg UserSettings-logout" @click="logout">{{"Log out" | translatePhrase}}</button>

vue-client/src/resources/json/i18n.json

@@ -408,6 +408,8 @@
     "Unlinked entity": "Olänkad entitet",
     "Subscribe to change notes": "Prenumerera på ändringsmeddelanden",
     "Changes": "Ändringar",
-    "Handled": "Hanterad"
+    "Handled": "Hanterad",
+    "Change categories": "Ändringskategorier",
+    "Collections": "Sigler"
     }
 }

vue-client/src/store.js

@@ -1,6 +1,6 @@
 import Vue from 'vue';
 import Vuex from 'vuex';
-import { cloneDeep, each, set, get, assign, filter, isObject } from 'lodash-es';
+import { cloneDeep, each, set, get, assign, filter, isObject, isEmpty } from 'lodash-es';
 import ClientOAuth2 from 'client-oauth2';
 import * as VocabUtil from 'lxljs/vocab';
 import * as StringUtil from 'lxljs/string';
@@ -530,19 +530,51 @@ const store = new Vuex.Store({
         dispatch('modifyUserDatabase', { property: 'notificationEmail', value: userEmail });
       }
     },
+    updateSubscribedSigel({ dispatch, state }, { libraryId, checked }) {
+      let notifications = cloneDeep(state.userDatabase.requestedNotifications) || [];
+      const notification = notifications[0];
+      let categories = [];
+      if (notification) {
+        categories = notification.triggers;
+      }
+      if (checked) {
+        console.log('changed, pushing notication', { heldBy: libraryId, triggers: categories });
+        notifications.push({ heldBy: libraryId, triggers: categories });
+      } else if (notifications.length === 1) { // Unchecked & removing the last element
+        notifications.forEach((n) => { n.heldBy = 'none'; });
+      } else { // Unchecked => remove whole notification
+        notifications = notifications.filter(n => n.heldBy !== libraryId);
+      }
+
+      dispatch('modifyUserDatabase', { property: 'requestedNotifications', value: notifications });
+    },
+    updateSubscribedChangeCategory({ dispatch, state }, { categoryId, checked }) {
+      const notifications = cloneDeep(state.userDatabase.requestedNotifications) || [];
+      if (isEmpty(notifications)) {
+        notifications.push({ heldBy: 'none', triggers: [categoryId] });
+      }
+      notifications.forEach((n) => {
+        if (checked) {
+          n.triggers.push(categoryId);
+        } else { // Unchecked => remove from triggers
+          n.triggers = n.triggers.filter(id => id !== categoryId);
+        }
+      });
+      dispatch('modifyUserDatabase', { property: 'requestedNotifications', value: notifications });
+    },
     updateSubscribedChangeCategories({ dispatch, state }, { libraryId, categoryId, checked }) {
       const notifications = cloneDeep(state.userDatabase.requestedNotifications) || [];
-
-      const notification = notifications?.find(obj => obj.heldBy === libraryId);
-      if (checked) {
-        if (notification) {
-          notification.triggers.push(categoryId);
-        } else {
-          notifications.push({ heldBy: libraryId, triggers: [categoryId] });
+      notifications?.forEach((n) => {
+        if (checked) {
+          if (n) {
+            n.triggers.push(categoryId);
+          } else {
+            n.push({ heldBy: libraryId, triggers: [categoryId] });
+          }
+        } else { // Unchecked => remove from triggers
+          n.triggers = n.triggers.filter(id => id !== categoryId);
         }
-      } else { // Unchecked => remove from triggers
-        notification.triggers = notification.triggers.filter(id => id !== categoryId);
-      }
+      });
       dispatch('modifyUserDatabase', { property: 'requestedNotifications', value: notifications });
     },
     purgeChangeCategories({ dispatch }) {