Feature/changenote settings

lxljs/string.js

@@ -308,3 +308,16 @@ export function getFormattedEntries(list, vocab, language, context) {
   remove(formatted, value => value === '' || value === null); // Remove empty strings
   return formatted;
 }
+
+export function getSigelLabel(sigel, len) {
+  if (!sigel.friendly_name) {
+    return sigel.code;
+  }
+
+  const sigelPart = ` (${sigel.code})`;
+  const fName = sigel.friendly_name.length + sigelPart.length > len
+      ? `${sigel.friendly_name.substr(0, len - sigelPart.length - 3)}...`
+      : sigel.friendly_name;
+
+  return `${fName}${sigelPart}`;
+}

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

@@ -0,0 +1,108 @@
+<script>
+import { mapGetters } from 'vuex';
+import * as StringUtil from 'lxljs/string';
+import LensMixin from '@/components/mixins/lens-mixin';
+
+export default {
+  name: 'change-categories',
+  mixins: [LensMixin],
+  data() {
+    return {
+      expanded: false,
+    };
+  },
+  props: {
+    sigel: Object,
+    availableCategories: [],
+  },
+  methods: {
+    updateChangeCategories(e, sigel, categoryId) {
+      this.$store.dispatch('updateSubscribedChangeCategories', { libraryId: sigel.code, categoryId: categoryId, checked: e.target.checked });
+    },
+    toggleExpanded() {
+      this.expanded = !this.expanded;
+    },
+    isActiveCategory(categoryId) {
+      const obj = this.userChangeCategories.find(c => c.heldBy === this.sigel.code);
+      return obj ? obj.triggers.includes(categoryId) : false;
+    },
+    label(obj) {
+      return this.getLabel(obj);
+    },
+  },
+  computed: {
+    ...mapGetters([
+      'userChangeCategories',
+    ]),
+    isExpanded() {
+      return this.expanded;
+    },
+    sigelLabel() {
+      return StringUtil.getSigelLabel(this.sigel);
+    },
+  },
+  mounted() {
+    this.$nextTick(() => {
+    });
+  },
+};
+</script>
+
+<template>
+  <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>
+
+    <div v-if="isExpanded">
+      <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'])">
+          <div class="customCheckbox-icon"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="less">
+.Categories {
+  &-arrow {
+    transition: all 0.2s ease;
+    padding: 0 2px;
+    font-size: 14px;
+    color: @grey-darker-transparent;
+
+    &.is-expanded {
+      transform: rotate(90deg);
+    }
+    .Categories-label:hover & {
+      color: @black
+    }
+  }
+  &-row {
+    display: flex;
+    border: solid @grey-lighter;
+    border-width: 0px 0px 1px 0px;
+  }
+  &-key {
+    padding: 0.5em;
+    width: 50%;
+  }
+  &-value {
+    padding: 0.5em;
+    width: 50%;
+  }
+  &-label {
+    padding: 0.5em;
+    cursor: pointer;
+  }
+}
+</style>

vue-client/src/components/usersettings/select-sigel.vue

@@ -1,5 +1,6 @@
 <script>
 import { mapGetters } from 'vuex';
+import * as StringUtil from 'lxljs/string';
 
 export default {
   name: 'select-sigel',
@@ -13,16 +14,7 @@ export default {
   },
   methods: {
     getSigelLabel(sigel, len) {
-      if (!sigel.friendly_name) {
-        return sigel.code;
-      }
-
-      const sigelPart = ` (${sigel.code})`;
-      const fName = sigel.friendly_name.length + sigelPart.length > len
-        ? `${sigel.friendly_name.substr(0, len - sigelPart.length - 3)}...`
-        : sigel.friendly_name;
-
-      return `${fName}${sigelPart}`;
+      return StringUtil.getSigelLabel(sigel, len);
     },
     updateSigel(value) {
       const doUpdate = () => {

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

@@ -3,6 +3,7 @@ import { mapGetters } from 'vuex';
 import * as StringUtil from 'lxljs/string';
 import UserAvatar from '@/components/shared/user-avatar';
 import SelectSigel from './select-sigel';
+import ChangeCategories from './change-categories.vue';
 
 export default {
   name: 'user-settings',
@@ -12,10 +13,21 @@ export default {
       default: false,
     },
   },
+  data() {
+    return {
+      availableChangeCategories: [],
+    };
+  },
   methods: {
     setUser(userObj) {
       this.$store.dispatch('setUser', userObj);
     },
+    getAvailableChangeCategories() {
+      const fetchUrl = `${this.settings.apiPath}/find.jsonld?@type=ChangeCategory`;
+      fetch(fetchUrl).then(response => response.json()).then((result) => {
+        this.availableChangeCategories = result?.items;
+      });
+    },
     updateLanguage(e) {
       const userObj = this.user;
       userObj.settings.language = e.target.value;
@@ -42,6 +54,9 @@ export default {
     purgeBookmarks() {
       this.$store.dispatch('purgeUserTagged', 'Bookmark');
     },
+    purgeChangeNoteCategories() {
+      this.$store.dispatch('purgeChangeCategories');
+    },
   },
   computed: {
     ...mapGetters([
@@ -52,19 +67,26 @@ export default {
       'resources',
       'userFlagged',
       'userBookmarks',
+      'userChangeCategories',
     ]),
     userHasTaggedRecords() {
       return Object.keys(this.userStorage.list).length > 0;
     },
+    sortedSigels() {
+      return [...this.user.collections].sort((a, b) => StringUtil.getSigelLabel(a).localeCompare(StringUtil.getSigelLabel(b)));
+    },
   },
   components: {
+    'change-categories': ChangeCategories,
     'user-avatar': UserAvatar,
     'select-sigel': SelectSigel,
   },
   watch: {
   },
-  ready() { // Ready method is deprecated in 2.0, switch to "mounted"
+  mounted() {
     this.$nextTick(() => {
+      // TODO: don't do this every time we open user settings
+      this.getAvailableChangeCategories();
     });
   },
 };
@@ -163,7 +185,13 @@ export default {
               </td>
             </tr>
           </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>
+<!--            <button name="clearCategories" class="btn btn&#45;&#45;sm btn-danger" @click.prevent="purgeChangeNoteCategories" @keyup.enter.prevent="purgeChangeNoteCategories">{{ 'Rensa databasen' }}</button>-->
+          </div>
         </form>
         <button class="btn btn-primary btn--lg UserSettings-logout" @click="logout">{{"Log out" | translatePhrase}}</button>
       </div>
@@ -242,6 +270,10 @@ export default {
     }
   }
 
+  &-changeCategories {
+    margin-bottom: 20px;
+  }
+
   &-configTable {
     td {
       padding: 0.5em;

vue-client/src/models/user.js

@@ -35,6 +35,7 @@ export class User {
       sort: false,
       facetSortings: {},
       shelfMarkSearch: '',
+      changeCategoriesSubscribed: [],
     };
     this.uriMinter = null;
   }

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

@@ -405,6 +405,7 @@
     "Back" : "Tillbaka",
     "Transliterate": "Translitterera",
     "Romanize": "Romanisera",
-    "Unlinked entity": "Olänkad entitet"
+    "Unlinked entity": "Olänkad entitet",
+    "Subscribe to change notes": "Prenumerera på ändringsmeddelanden"
     }
 }

vue-client/src/store.js

@@ -425,6 +425,13 @@ const store = new Vuex.Store({
       }
       return collection;
     },
+    userChangeCategories: (state) => {
+      const collection = [];
+      if (state.userDatabase == null || state.userDatabase.requestedNotifications == null) {
+        return collection;
+      }
+      return state.userDatabase.requestedNotifications;
+    },
     userDatabase: state => state.userDatabase,
     status: state => state.status,
     directoryCare: state => state.directoryCare,
@@ -534,6 +541,30 @@ const store = new Vuex.Store({
       }
       dispatch('modifyUserDatabase', { property: 'markedDocuments', value: newList });
     },
+    setNotificationEmail({ dispatch, state }, { userEmail }) {
+      const notificationEmail = cloneDeep(state.userDatabase.notificationEmail);
+      if (userEmail !== notificationEmail) {
+        dispatch('modifyUserDatabase', { property: 'notificationEmail', value: userEmail });
+      }
+    },
+    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] });
+        }
+      } else { // Unchecked => remove from triggers
+        notification.triggers = notification.triggers.filter(id => id !== categoryId);
+      }
+      dispatch('modifyUserDatabase', { property: 'requestedNotifications', value: notifications });
+    },
+    purgeChangeCategories({ dispatch }) {
+      dispatch('modifyUserDatabase', { property: 'requestedNotifications', value: null });
+    },
     loadUserDatabase({ commit, dispatch, state }) {
       if (state.user.id.length === 0) {
         throw new Error('loadUserDatabase was dispatched with no real user loaded.');
@@ -543,6 +574,7 @@ const store = new Vuex.Store({
         httpUtil.get({ url: `${state.settings.apiPath}/_userdata/${digestHex}`, token: state.user.token, contentType: 'text/plain' }).then((result) => {
           commit('setUserDatabase', result);
           dispatch('checkForMigrationOfUserDatabase');
+          dispatch('setNotificationEmail', { userEmail: state.user.email });
         }, (error) => {
           console.error(error);
         });