{"version":3,"file":"Groups-Dk16tBRO.js","sources":["../../../resources/js/views/groups/Groups.vue"],"sourcesContent":["<script setup>\n    import { UseColorMode } from '@vueuse/components'\n    import { useGroups } from '@/stores/groups'\n    import { useBusStore } from '@/stores/bus'\n\n    const router = useRouter()\n    const groups = useGroups()\n    const bus = useBusStore()\n\n    const isFetching = ref(false)\n\n    onMounted(async () => {\n        // We want the store to be up-to-date to manage the groups\n        isFetching.value = groups.isEmpty\n\n        await groups.fetch()\n        .finally(() => {\n            isFetching.value = false\n        })\n    })\n\n    // We use the beforeRouteLeave with the bus store to pass the group\n    // name to the edit view to prevent a new request in the editGroup component.\n    // This could be achieved using <a> anchor with a @click event here but then\n    // the link won't have a href which is poor design for accessibility.\n    onBeforeRouteLeave((to, from) => {\n        if (to.name == 'editGroup') {\n            bus.editedGroupName = groups.items.find(g => g.id == to.params.groupId)?.name\n        }\n    })\n\n</script>\n\n<template>\n    <ResponsiveWidthWrapper>\n        <h1 class=\"title has-text-grey-dark\">\n            {{ $t('groups.groups') }}\n        </h1>\n        <div class=\"is-size-7-mobile\">\n            {{ $t('groups.manage_groups_legend')}}\n        </div>\n        <div class=\"mt-3 mb-6\">\n            <RouterLink class=\"is-link mt-5\" :to=\"{ name: 'createGroup' }\">\n                <FontAwesomeIcon :icon=\"['fas', 'plus-circle']\" /> {{ $t('groups.create_group') }}\n            </RouterLink>\n        </div>\n        <div v-if=\"!groups.isEmpty\">\n            <div v-for=\"group in groups.withoutTheAllGroup\" :key=\"group.id\" class=\"group-item is-size-5 is-size-6-mobile\">\n                {{ group.name }}\n                <!-- delete icon -->\n                <UseColorMode v-slot=\"{ mode }\">\n                    <button type=\"button\" class=\"button tag is-pulled-right\" :class=\"mode == 'dark' ? 'is-dark' : 'is-white'\" @click=\"groups.delete(group.id)\"  :title=\"$t('commons.delete')\">\n                        {{ $t('commons.delete') }}\n                    </button>\n                </UseColorMode>\n                <!-- edit link -->\n                <RouterLink :to=\"{ name: 'editGroup', params: { groupId: group.id }}\" class=\"has-text-grey px-1\" :title=\"$t('commons.rename')\">\n                    <FontAwesomeIcon :icon=\"['fas', 'pen-square']\" />\n                </RouterLink>\n                <span class=\"is-family-primary is-size-6 is-size-7-mobile has-text-grey\">{{ $t('groups.x_accounts', { count: group.twofaccounts_count }) }}</span>\n            </div>\n            <div class=\"mt-2 is-size-7 is-pulled-right\">\n                {{ $t('groups.deleting_group_does_not_delete_accounts')}}\n            </div>\n        </div>\n        <div v-if=\"isFetching && groups.isEmpty\" class=\"has-text-centered\">\n            <span class=\"is-size-4\">\n                <FontAwesomeIcon :icon=\"['fas', 'spinner']\" spin />\n            </span>\n        </div>\n        <!-- footer -->\n        <VueFooter :showButtons=\"true\">\n            <ButtonBackCloseCancel :returnTo=\"{ name: 'accounts' }\" action=\"close\" />\n        </VueFooter>\n    </ResponsiveWidthWrapper>\n</template>"],"names":["useRouter","groups","useGroups","bus","useBusStore","isFetching","ref","onMounted","onBeforeRouteLeave","to","from","_a","g"],"mappings":"smBAKmBA,EAAS,EACxB,MAAMC,EAASC,EAAS,EAClBC,EAAMC,EAAW,EAEjBC,EAAaC,EAAI,EAAK,EAE5B,OAAAC,EAAU,SAAY,CAElBF,EAAW,MAAQJ,EAAO,QAE1B,MAAMA,EAAO,MAAK,EACjB,QAAQ,IAAM,CACXI,EAAW,MAAQ,EACtB,CAAA,CACJ,CAAA,EAMDG,EAAmB,CAACC,EAAIC,IAAS,OACzBD,EAAG,MAAQ,cACXN,EAAI,iBAAkBQ,EAAAV,EAAO,MAAM,KAAKW,GAAKA,EAAE,IAAMH,EAAG,OAAO,OAAO,IAAhD,YAAAE,EAAmD,KAEhF,CAAA"}