Enable the Vue 3 front-end

resources/js/stores/groups.js

@@ -0,0 +1,96 @@
+import { defineStore } from 'pinia'
+import { useUserStore } from '@/stores/user'
+import { useNotifyStore } from '@/stores/notify'
+import groupService from '@/services/groupService'
+
+export const useGroups = defineStore({
+    id: 'groups',
+
+    state: () => {
+        return {
+            items: [],
+            fetchedOn: null,
+        }
+    },
+
+    getters: {
+        current(state) {
+            const group = state.items.find(item => item.id === parseInt(useUserStore().preferences.activeGroup))
+
+            return group ? group.name : trans('commons.all')
+        },
+
+        withoutTheAllGroup(state) {
+            return state.items.filter(item => item.id > 0)
+        },
+
+        theAllGroup(state) {
+            return state.items.find(item => item.id == 0)
+        },
+
+        isEmpty() {
+            return this.withoutTheAllGroup.length == 0
+        },
+
+        count() {
+            return this.withoutTheAllGroup.length
+        },
+    },
+
+    actions: {
+        /**
+         * Adds or edits a group
+         * @param {object} group 
+         */
+        addOrEdit(group) {
+            const index = this.items.findIndex(g => g.id === parseInt(group.id))
+            
+            if (index > -1) {
+                this.items[index] = group
+                useNotifyStore().success({ text: trans('groups.group_name_saved') })
+            }
+            else {
+                this.items.push(group)
+                useNotifyStore().success({ text: trans('groups.group_successfully_created') })
+            }            
+        },
+
+        /**
+         * Fetches the groups collection from the backend
+         */
+        async fetch() {
+            // We do not want to fetch fresh data multiple times in the same 2s timespan
+            const age = Math.floor(Date.now() - this.fetchedOn)
+            const isNotFresh = age > 2000
+
+            if (isNotFresh) {
+                this.fetchedOn = Date.now()
+
+                await groupService.getAll().then(response => {
+                    this.items = response.data
+                })
+            }
+        },
+
+        /**
+         * Deletes a group
+         */
+        async delete(id) {
+            const user = useUserStore()
+
+            if (confirm(trans('groups.confirm.delete'))) {
+                await groupService.delete(id).then(response => {
+                    this.items = this.items.filter(a => a.id !== id)
+                    useNotifyStore().success({ text: trans('groups.group_successfully_deleted') })
+
+                    // Reset group filter to 'All' (groupId=0) since the backend has already made
+                    // the change automatically. This prevents a new request.
+                    if( parseInt(user.preferences.activeGroup) === id ) {
+                        user.preferences.activeGroup = 0
+                    }
+                })
+            }
+        },
+
+    },
+})