Replace local GroupSwitch & Searchbox components with 2fauth/ui ones

This commit is contained in:
Bubka
2025-06-25 17:47:04 +02:00
parent f5646500da
commit a5f7ec20a3
8 changed files with 115 additions and 231 deletions

View File

@ -3,100 +3,104 @@ import { useUserStore } from '@/stores/user'
import { useNotify } from '@2fauth/ui'
import groupService from '@/services/groupService'
export const useGroups = defineStore({
id: 'groups',
export const useGroups = defineStore('groups', () => {
state: () => {
return {
items: [],
fetchedOn: null,
const user = useUserStore()
const notify = useNotify()
// STATE
const items = ref([])
const fetchedOn = ref(null)
// GETTERS
const current = computed(() => {
const group = items.value.find(item => item.id === parseInt(user.preferences.activeGroup))
return group && user.preferences.activeGroup != 0 ? group.name : null
})
const withoutTheAllGroup = computed(() => items.value.filter(item => item.id > 0))
const theAllGroup = computed(() => items.value.find(item => item.id == 0))
const isEmpty = computed(() => withoutTheAllGroup.value.length == 0)
const count = computed(() => withoutTheAllGroup.value.length)
// ACTIONS
function $reset() {
items.value = [];
fetchedOn.value = null;
}
/**
* Adds or edits a group
* @param {object} group
*/
function addOrEdit(group) {
const index = items.value.findIndex(g => g.id === parseInt(group.id))
if (index > -1) {
items.value[index] = group
notify.success({ text: this.$i18n.global.t('message.groups.group_name_saved') })
}
},
else {
items.value.push(group)
notify.success({ text: this.$i18n.global.t('message.groups.group_successfully_created') })
}
}
getters: {
current(state) {
const group = state.items.find(item => item.id === parseInt(useUserStore().preferences.activeGroup))
/**
* Fetches the groups collection from the backend
*/
async function fetch() {
// We do not want to fetch fresh data multiple times in the same 2s timespan
const age = Math.floor(Date.now() - fetchedOn.value)
const isNotFresh = age > 2000
// TODO : restore translated prompt
return group ? group.name : 'message.all'
},
if (isNotFresh) {
fetchedOn.value = Date.now()
withoutTheAllGroup(state) {
return state.items.filter(item => item.id > 0)
},
await groupService.getAll().then(response => {
items.value = response.data
})
}
}
/**
* Deletes a group
*/
async function remove(id) {
if (confirm(this.$i18n.global.t('message.groups.confirm.delete'))) {
await groupService.delete(id).then(response => {
items.value = items.value.filter(a => a.id !== id)
notify.success({ text: this.$i18n.global.t('message.groups.group_successfully_deleted') })
theAllGroup(state) {
return state.items.find(item => item.id == 0)
},
// 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
}
})
}
}
isEmpty() {
return this.withoutTheAllGroup.length == 0
},
return {
// STATE
items,
fetchedOn,
count() {
return this.withoutTheAllGroup.length
},
},
// GETTERS
current,
withoutTheAllGroup,
theAllGroup,
isEmpty,
count,
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
// TODO : restore translated message
useNotify().success({ text: 'message.groups.group_name_saved' })
}
else {
this.items.push(group)
// TODO : restore translated message
useNotify().success({ text: 'message.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()
// TODO : restore translated message
// if (confirm(t('message.groups.confirm.delete'))) {
if (confirm('message.groups.confirm.delete')) {
await groupService.delete(id).then(response => {
this.items = this.items.filter(a => a.id !== id)
// TODO : restore translated message
useNotify().success({ text: 'message.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
}
})
}
},
},
// ACTIONS
$reset,
addOrEdit,
fetch,
remove,
}
})