Add Vuex label module

lib/www/client/source/src/store/index.js

@@ -6,6 +6,7 @@ import user from './modules/user'
 import snack from './modules/snack'
 import project from './modules/project'
 import event from './modules/event'
+import label from './modules/label'
 import notify from './modules/notify'
 
 Vue.use(Vuex)
@@ -17,6 +18,7 @@ export default new Vuex.Store({
     snack,
     project,
     event,
+    label,
     notify
   }
 })

lib/www/client/source/src/store/modules/label/actions.js

@@ -0,0 +1,106 @@
+
+/** Fetch labels from server
+ */
+async function refreshLabels ({commit, dispatch, state, rootState}) {
+
+  if (state.loading) {
+    commit('abortLabelsLoading');
+  }
+
+  commit('setLabelsLoading');
+  const pid = rootState.project.projectId;
+  const url = `/project/${pid}/label`;
+  const init = {
+    signal: state.loading.signal
+  };
+  const res = await dispatch('api', [url, init]);
+
+  if (res) {
+    commit('setLabels', res);
+    commit('setLabelsTimestamp');
+  }
+  commit('clearLabelsLoading');
+}
+
+/** Return a subset of labels from state.labels.
+ *
+ * Note that, unlike other actions in the get* family,
+ * the return value is not isomorphic to the state.
+ *
+ * While state.labels is an object, getLabels() returns
+ * an array with each item have the shape:
+ *
+ * { label: "labelName", view: {…}, model: {…} }
+ *
+ * This is intended to be useful, for instance, for a table
+ * of labels.
+ */
+async function getLabels ({commit, dispatch, state}, [projectId, {sortBy, sortDesc, itemsPerPage, page, text, label}]) {
+
+  let filteredLabels = Object.entries(state.labels).map(i => {
+    return {
+      label: i[0],
+      ...i[1]
+    }
+  });
+
+  if (sortBy) {
+
+    sortBy.forEach( (key, idx) => {
+      filteredLabels.sort( (el0, el1) => {
+        const a = key == "label" ? el0[0] : el0[1].view[key];
+        const b = key == "label" ? el1[0] : el1[1].view[key];
+        if (a < b) {
+          return -1;
+        } else if (a > b) {
+          return 1;
+        } else if (a == b) {
+          return 0;
+        } else if (a && !b) {
+          return 1;
+        } else if (!a && b) {
+          return -1;
+        } else {
+          return 0;
+        }
+      });
+      if (sortDesc && sortDesc[idx] === true) {
+        filteredLabels.reverse();
+      }
+    });
+
+  }
+
+  if (label) {
+    filteredLabels = filteredLabels.filter( label => label.label == label );
+  }
+
+  if (text) {
+    const textFilter = (value, search, item) => {
+      return String(value).toLowerCase().includes(search.toLowerCase());
+    };
+
+    const searchFunctions = {
+      label: numberFilter,
+      description: textFilter,
+    };
+
+    filteredLabels = filteredLabels.filter ( item => {
+      return textFilter(item.label, text, item) ?? textFilter(item.view.description, text, item);
+    });
+  }
+
+  const count = filteredLabels.length;
+
+  if (itemsPerPage && itemsPerPage > 0) {
+    const offset = (page > 0)
+      ? (page-1) * itemsPerPage
+      : 0;
+
+    filteredLabels = filteredLabels.slice(offset, offset+itemsPerPage);
+  }
+
+  return {labels: filteredLabels, count};
+}
+
+export default { refreshLabels, getLabels };

lib/www/client/source/src/store/modules/label/getters.js

@@ -0,0 +1,22 @@
+
+function labels (state) {
+  return state.labels;
+}
+
+/** Return labels that can be added by users.
+ *
+ * As opposed to system labels.
+ */
+function userLabels (state) {
+  return Object.fromEntries(Object.entries(state.labels).filter(i => i[1].model.user));
+}
+
+function labelCount (state) {
+  return state.labels?.length ?? 0;
+}
+
+function labelsLoading (state) {
+  return !!state.loading;
+}
+
+export default { labels, userLabels, labelCount, labelsLoading };

lib/www/client/source/src/store/modules/label/index.js

@@ -0,0 +1,6 @@
+import state from './state'
+import getters from './getters'
+import actions from './actions'
+import mutations from './mutations'
+
+export default { state, getters, actions, mutations };

lib/www/client/source/src/store/modules/label/mutations.js

@@ -0,0 +1,49 @@
+
+function setLabels (state, labels) {
+  // We don't need or want the events array to be reactive, since
+  // it can be tens of thousands of items long.
+  state.labels = Object.freeze(labels);
+}
+
+function setLabelsLoading (state, abortController = new AbortController()) {
+  state.loading = abortController;
+}
+
+// This assumes that we know any transactions have finished or we
+// don't care about aborting.
+function clearLabelsLoading (state) {
+  state.loading = null;
+}
+
+function setLabelsTimestamp (state, timestamp = new Date()) {
+  // NOTE: There is no `modified_on` property in the labels
+  // result or in the database schema, but we could add
+  // one.
+  if (timestamp === true) {
+    const tstamp = state.labels
+      .map( i => i.modified_on )
+      .reduce( (acc, cur) => acc > cur ? acc : cur );
+    state.timestamp = tstamp ? new Date(tstamp) : new Date();
+  } else {
+    state.timestamp = timestamp;
+  }
+}
+
+function setLabelsETag (state, etag) {
+  state.etag = etag;
+}
+
+function abortLabelsLoading (state) {
+  if (state.loading) {
+    state.loading.abort();
+  }
+  state.loading = null;
+}
+
+export default {
+  setLabels,
+  setLabelsLoading,
+  clearLabelsLoading,
+  setLabelsTimestamp,
+  setLabelsETag
+};

lib/www/client/source/src/store/modules/label/state.js

@@ -0,0 +1,8 @@
+const state = () => ({
+  labels: Object.freeze([]),
+  loading: null,
+  timestamp: null,
+  etag: null,
+});
+
+export default state;