Generalized filters bar, added to network page.

assets/js/networks/actions.js

@@ -1,14 +1,20 @@
 import { get } from '../api';
 
-function initNetworksActions(_store, _router) {
+function initNetworksActions(store, _router) {
     async function fetchNetworks({ _commit }, networkId) {
-        const networks = await get(`/networks/${networkId || ''}`);
+        const networks = await get(`/networks/${networkId || ''}`, {
+
+        });
 
         return networks;
     }
 
     async function fetchNetworkReleases({ _commit }, networkId) {
-        const releases = await get(`/networks/${networkId}/releases`);
+        const releases = await get(`/networks/${networkId}/releases`, {
+            filter: store.state.ui.filter,
+            after: store.getters.after,
+            before: store.getters.before,
+        });
 
         return releases;
     }

assets/js/range-dates.js

@@ -1,18 +0,0 @@
-function rangeDates(range) {
-    return ({
-        new: () => ({
-            after: new Date(0),
-            before: new Date(),
-        }),
-        upcoming: () => ({
-            after: new Date(),
-            before: new Date(2 ** 42),
-        }),
-        all: () => ({
-            after: new Date(0),
-            before: new Date(2 ** 42),
-        }),
-    })[range]();
-}
-
-export default rangeDates;

assets/js/releases/actions.js

@@ -1,28 +1,25 @@
-import dayjs from 'dayjs';
-
 import { get } from '../api';
 
-function initReleasesActions(_store, _router) {
-    async function fetchReleases({ _commit }, {
-        id,
-        filter,
-        after,
-        before,
-    }) {
-        const afterString = dayjs(after).format('YYYY-MM-DD');
-        const beforeString = dayjs(before).format('YYYY-MM-DD');
-
-        const releases = await get(`/releases/${id || ''}`, {
-            filter,
-            after: afterString,
-            before: beforeString,
+function initReleasesActions(store, _router) {
+    async function fetchReleases({ _commit }) {
+        const releases = await get('/releases', {
+            filter: store.state.ui.filter,
+            after: store.getters.after,
+            before: store.getters.before,
         });
 
         return releases;
     }
 
+    async function fetchReleaseById({ _commit }, releaseId) {
+        const release = await get(`/releases/${releaseId}`);
+
+        return release;
+    }
+
     return {
         fetchReleases,
+        fetchReleaseById,
     };
 }
 

assets/js/store.js

@@ -1,6 +1,7 @@
 import Vue from 'vue';
 import Vuex from 'vuex';
 
+import initUiStore from './ui/ui';
 import initAuthStore from './auth/auth';
 import initReleasesStore from './releases/releases';
 import initSitesStore from './sites/sites';
@@ -13,6 +14,7 @@ function initStore(router) {
 
     const store = new Vuex.Store();
 
+    store.registerModule('ui', initUiStore(store, router));
     store.registerModule('auth', initAuthStore(store, router));
     store.registerModule('releases', initReleasesStore(store, router));
     store.registerModule('actors', initActorsStore(store, router));

assets/js/ui/actions.js

@@ -0,0 +1,20 @@
+// import { get } from '../api';
+
+function initUiActions(_store, _router) {
+    function setFilter({ commit }, filter) {
+        commit('setFilter', filter);
+        localStorage.setItem('filter', filter);
+    }
+
+    function setRange({ commit }, range) {
+        commit('setRange', range);
+        localStorage.setItem('range', range);
+    }
+
+    return {
+        setFilter,
+        setRange,
+    };
+}
+
+export default initUiActions;

assets/js/ui/getters.js

@@ -0,0 +1,34 @@
+import dayjs from 'dayjs';
+
+const dateRanges = {
+    new: () => ({
+        after: dayjs(new Date(0)).format('YYYY-MM-DD'),
+        before: dayjs(new Date()).format('YYYY-MM-DD'),
+    }),
+    upcoming: () => ({
+        after: dayjs(new Date()).format('YYYY-MM-DD'),
+        before: dayjs(new Date(2 ** 42)).format('YYYY-MM-DD'),
+    }),
+    all: () => ({
+        after: dayjs(new Date(0)).format('YYYY-MM-DD'),
+        before: dayjs(new Date(2 ** 42)).format('YYYY-MM-DD'),
+    }),
+};
+
+function rangeDates(state) {
+    return dateRanges[state.range]();
+}
+
+function before(state) {
+    return dateRanges[state.range]().before;
+}
+
+function after(state) {
+    return dateRanges[state.range]().after;
+}
+
+export default {
+    rangeDates,
+    before,
+    after,
+};

assets/js/ui/mutations.js

@@ -0,0 +1,12 @@
+function setFilter(state, filter) {
+    state.filter = filter;
+}
+
+function setRange(state, range) {
+    state.range = range;
+}
+
+export default {
+    setFilter,
+    setRange,
+};

assets/js/ui/state.js

@@ -0,0 +1,7 @@
+const storedFilter = localStorage.getItem('filter');
+const storedRange = localStorage.getItem('range');
+
+export default {
+    filter: storedFilter ? storedFilter.split(',') : ['gay', 'transsexual'],
+    range: storedRange || 'new',
+};

assets/js/ui/ui.js

@@ -0,0 +1,15 @@
+import state from './state';
+import mutations from './mutations';
+import getters from './getters';
+import actions from './actions';
+
+function initUiStore(store, router) {
+    return {
+        state,
+        mutations,
+        getters,
+        actions: actions(store, router),
+    };
+}
+
+export default initUiStore;