feat: move pinia stores to composition api

Signed-off-by: Alexander Trost <[email protected]>
fivenet-app · Feb 10, 2025 · f33333a · f33333a
1 parent 36dc1e6
commit f33333a
Show file tree

Hide file tree

Showing 30 changed files with 1,772 additions and 1,649 deletions.
diff --git a/app/app.vue b/app/app.vue
@@ -35,13 +35,13 @@ useSeoMeta({
 });
 
 const settings = useSettingsStore();
-const { getUserLocale, isNUIEnabled, design, updateAvailable } = storeToRefs(settings);
+const { getUserLocale, nuiEnabled, design, updateAvailable } = storeToRefs(settings);
 
 if (APP_VERSION !== settings.version) {
     logger.info('Resetting app data because new version has been detected', settings.version, APP_VERSION);
 
-    useClipboardStore().$reset();
-    useDocumentEditorStore().$reset();
+    useClipboardStore().clear();
+    useDocumentEditorStore().clear();
     settings.setVersion(APP_VERSION);
 }
 
@@ -92,7 +92,7 @@ onMounted(async () => {
         return;
     }
 
-    if (isNUIEnabled.value) {
+    if (nuiEnabled.value) {
         // NUI message handling
         window.addEventListener('message', onNUIMessage);
     }
@@ -107,7 +107,7 @@ onBeforeUnmount(async () => {
         return;
     }
 
-    if (isNUIEnabled.value) {
+    if (nuiEnabled.value) {
         // NUI message handling
         window.removeEventListener('message', onNUIMessage);
     }
@@ -187,6 +187,6 @@ const route = router.currentRoute;
             <NotificationProvider />
         </ClientOnly>
 
-        <CookieControl v-if="!isNUIEnabled && route.meta.showCookieOptions !== undefined && route.meta.showCookieOptions" />
+        <CookieControl v-if="!nuiEnabled && route.meta.showCookieOptions !== undefined && route.meta.showCookieOptions" />
     </div>
 </template>
diff --git a/app/components/HelpSlideover.vue b/app/components/HelpSlideover.vue
@@ -8,7 +8,7 @@ const { metaSymbol } = useShortcuts();
 const { t } = useI18n();
 
 const settingsStore = useSettingsStore();
-const { isNUIEnabled } = storeToRefs(settingsStore);
+const { nuiEnabled } = storeToRefs(settingsStore);
 
 const shortcuts = ref(false);
 const query = ref('');
@@ -24,7 +24,7 @@ const links = computed(() =>
                 shortcuts.value = true;
             },
         },
-        !isNUIEnabled.value
+        !nuiEnabled.value
             ? {
                   label: t('common.help'),
                   icon: 'i-mdi-book-open-blank-variant-outline',

diff --git a/app/components/auth/LoginForm.vue b/app/components/auth/LoginForm.vue
@@ -23,7 +23,7 @@ const { loginError } = storeToRefs(authStore);
 const { doLogin } = authStore;
 
 const settingsStore = useSettingsStore();
-const { isNUIEnabled } = storeToRefs(settingsStore);
+const { nuiEnabled } = storeToRefs(settingsStore);
 
 const cookiesStore = useCookiesStore();
 const { hasCookiesAccepted } = storeToRefs(cookiesStore);
@@ -49,9 +49,9 @@ const onSubmitThrottle = useThrottleFn(async (event: FormSubmitEvent<Schema>) =>
     await doLogin(event.data.username, event.data.password).finally(() => useTimeoutFn(() => (canSubmit.value = true), 400));
 }, 1000);
 
-const socialLoginEnabled = ref(hasCookiesAccepted.value && !isNUIEnabled.value);
+const socialLoginEnabled = ref(hasCookiesAccepted.value && !nuiEnabled.value);
 
-watch(hasCookiesAccepted, () => (socialLoginEnabled.value = hasCookiesAccepted.value && !isNUIEnabled.value));
+watch(hasCookiesAccepted, () => (socialLoginEnabled.value = hasCookiesAccepted.value && !nuiEnabled.value));
 
 const passwordVisibility = ref(false);
 
@@ -90,7 +90,7 @@ function togglePasswordVisibility() {
             {{ $t('common.login') }}
         </UButton>
 
-        <div v-if="!isNUIEnabled && login.providers.length > 0" class="space-y-2">
+        <div v-if="!nuiEnabled && login.providers.length > 0" class="space-y-2">
             <p v-if="!socialLoginEnabled" class="text-sm text-error-400">
                 {{ $t('components.auth.LoginForm.social_login_disabled') }}
             </p>

diff --git a/app/components/auth/RegistrationForm.vue b/app/components/auth/RegistrationForm.vue
@@ -5,10 +5,14 @@ import PasswordStrengthMeter from '~/components/auth/PasswordStrengthMeter.vue';
 import DataErrorBlock from '~/components/partials/data/DataErrorBlock.vue';
 import { openTokenMgmt } from '~/composables/nui';
 import { useNotificatorStore } from '~/store/notificator';
+import { useSettingsStore } from '~/store/settings';
 import { NotificationType } from '~~/gen/ts/resources/notifications/notifications';
 
 const notifications = useNotificatorStore();
 
+const settingsStore = useSettingsStore();
+const { nuiEnabled } = storeToRefs(settingsStore);
+
 const accountError = ref<RpcError | undefined>();
 
 const schema = z.object({
@@ -74,7 +78,7 @@ const onSubmitThrottle = useThrottleFn(async (event: FormSubmitEvent<Schema>) =>
         </h2>
 
         <UForm :schema="schema" :state="state" class="space-y-4" @submit="onSubmitThrottle">
-            <UAlert v-if="!isNUIEnabled().value" icon="i-mdi-info-circle">
+            <UAlert v-if="!nuiEnabled" icon="i-mdi-info-circle">
                 <template #description>
                     <I18nT keypath="components.auth.RegistrationForm.subtitle">
                         <template #command>

diff --git a/app/components/auth/account/OAuth2Connection.vue b/app/components/auth/account/OAuth2Connection.vue
@@ -3,6 +3,7 @@ import OAuth2ConnectButton from '~/components/auth/account/OAuth2ConnectButton.v
 import ConfirmModal from '~/components/partials/ConfirmModal.vue';
 import NotSupportedTabletBlock from '~/components/partials/NotSupportedTabletBlock.vue';
 import { useNotificatorStore } from '~/store/notificator';
+import { useSettingsStore } from '~/store/settings';
 import type { OAuth2Account, OAuth2Provider } from '~~/gen/ts/resources/accounts/oauth2';
 import { NotificationType } from '~~/gen/ts/resources/notifications/notifications';
 
@@ -17,6 +18,9 @@ const emit = defineEmits<{
 
 const notifications = useNotificatorStore();
 
+const settingsStore = useSettingsStore();
+const { nuiEnabled } = storeToRefs(settingsStore);
+
 async function disconnectOAuth2Connection(provider: OAuth2Provider): Promise<void> {
     try {
         await getGRPCAuthClient().deleteOAuth2Connection({
@@ -86,7 +90,7 @@ const modal = useModal();
                     </UButton>
                 </div>
 
-                <OAuth2ConnectButton v-if="!isNUIEnabled().value" :provider="provider" />
+                <OAuth2ConnectButton v-if="!nuiEnabled" :provider="provider" />
             </div>
         </template>
 
@@ -102,7 +106,7 @@ const modal = useModal();
                     </UTooltip>
                 </template>
 
-                <NotSupportedTabletBlock v-else-if="isNUIEnabled().value" class="text-sm" />
+                <NotSupportedTabletBlock v-else-if="nuiEnabled" class="text-sm" />
             </div>
         </template>
     </UPageCard>

diff --git a/app/components/calendar/entry/EntryCreateOrUpdateModal.vue b/app/components/calendar/entry/EntryCreateOrUpdateModal.vue
@@ -239,6 +239,7 @@ const onSubmitThrottle = useThrottleFn(async (event: FormSubmitEvent<Schema>) =>
                         <UFormGroup name="startTime" :label="$t('common.begins_at')" class="flex-1" required>
                             <DatePickerPopoverClient
                                 v-model="state.startTime"
+                                date-format="dd.MM.yyyy HH:mm"
                                 :popover="{ popper: { placement: 'bottom-start' } }"
                                 :date-picker="{ mode: 'dateTime', is24hr: true, clearable: true }"
                             />
@@ -247,6 +248,7 @@ const onSubmitThrottle = useThrottleFn(async (event: FormSubmitEvent<Schema>) =>
                         <UFormGroup name="endTime" :label="$t('common.ends_at')" class="flex-1" required>
                             <DatePickerPopoverClient
                                 v-model="state.endTime"
+                                date-format="dd.MM.yyyy HH:mm"
                                 :popover="{ popper: { placement: 'bottom-start' } }"
                                 :date-picker="{ mode: 'dateTime', is24hr: true, clearable: true }"
                             />

diff --git a/app/components/centrum/livemap/CentrumSidebar.vue b/app/components/centrum/livemap/CentrumSidebar.vue
@@ -266,12 +266,13 @@ onBeforeMount(async () => {
 
 onBeforeUnmount(() => stopStream());
 
+const attentionSound = useSounds('/sounds/centrum/attention.mp3', { playbackRate: 1.85 });
+
 const unitCheckupStatusAge = 12.5 * 60 * 1000;
 const unitCheckupStatusReping = 15 * 60 * 1000;
 
-const { play } = useSounds('/sounds/centrum/attention.mp3');
 const debouncedPlay = useDebounceFn(async () => {
-    play({ playbackRate: 1.85 });
+    attentionSound.play();
 }, 950);
 
 const attentionDebouncedPlay = useDebounceFn(async () => debouncedPlay(), 950);
@@ -313,8 +314,6 @@ async function checkup(): Promise<void> {
     lastCheckupNotification.value = now;
 }
 
-const attentionSound = useSounds('/sounds/centrum/attention.mp3');
-
 function sendRequireUnitNotification(): void {
     if (!userOnDuty.value) {
         return;
@@ -327,7 +326,7 @@ function sendRequireUnitNotification(): void {
         timeout: 12500,
     });
 
-    attentionSound.play({ playbackRate: 1.85 });
+    attentionSound.play();
 }
 
 function openTakeDispatches(): void {

diff --git a/app/components/citizens/info/props/CitizenSetMugShotModal.vue b/app/components/citizens/info/props/CitizenSetMugShotModal.vue
@@ -4,6 +4,7 @@ import { z } from 'zod';
 import GenericImg from '~/components/partials/elements/GenericImg.vue';
 import NotSupportedTabletBlock from '~/components/partials/NotSupportedTabletBlock.vue';
 import { useNotificatorStore } from '~/store/notificator';
+import { useSettingsStore } from '~/store/settings';
 import type { File as FilestoreFile } from '~~/gen/ts/resources/filestore/file';
 import { NotificationType } from '~~/gen/ts/resources/notifications/notifications';
 import type { UserProps } from '~~/gen/ts/resources/users/props';
@@ -23,6 +24,9 @@ const notifications = useNotificatorStore();
 
 const appConfig = useAppConfig();
 
+const settingsStore = useSettingsStore();
+const { nuiEnabled } = storeToRefs(settingsStore);
+
 const mugShotSchema = zodFileSingleSchema(appConfig.fileUpload.fileSizes.images, appConfig.fileUpload.types.images);
 const schema = z
     .object({
@@ -110,7 +114,7 @@ const onSubmitThrottle = useThrottleFn(async (event: FormSubmitEvent<Schema>) =>
                     </UFormGroup>
 
                     <UFormGroup name="mugShot" :label="$t('common.image')">
-                        <NotSupportedTabletBlock v-if="isNUIEnabled().value" />
+                        <NotSupportedTabletBlock v-if="nuiEnabled" />
                         <template v-else>
                             <UInput
                                 type="file"

diff --git a/app/components/jobs/colleagues/SelfServicePropsProfilePictureModal.vue b/app/components/jobs/colleagues/SelfServicePropsProfilePictureModal.vue
@@ -5,15 +5,19 @@ import ProfilePictureImg from '~/components/partials/citizens/ProfilePictureImg.
 import NotSupportedTabletBlock from '~/components/partials/NotSupportedTabletBlock.vue';
 import { useAuthStore } from '~/store/auth';
 import { useNotificatorStore } from '~/store/notificator';
+import { useSettingsStore } from '~/store/settings';
 import { NotificationType } from '~~/gen/ts/resources/notifications/notifications';
 import type { SetProfilePictureRequest } from '~~/gen/ts/services/citizenstore/citizenstore';
 
+const { isOpen } = useModal();
+
 const authStore = useAuthStore();
 const { activeChar } = storeToRefs(authStore);
 
 const notifications = useNotificatorStore();
 
-const { isOpen } = useModal();
+const settingsStore = useSettingsStore();
+const { nuiEnabled } = storeToRefs(settingsStore);
 
 const appConfig = useAppConfig();
 
@@ -69,8 +73,6 @@ const onSubmitThrottle = useThrottleFn(async (event: FormSubmitEvent<Schema>) =>
     canSubmit.value = false;
     await setProfilePicture(event.data).finally(() => useTimeoutFn(() => (canSubmit.value = true), 400));
 }, 1000);
-
-const nuiAvailable = isNUIEnabled();
 </script>
 
 <template>
@@ -90,7 +92,7 @@ const nuiAvailable = isNUIEnabled();
                 <div>
                     <div>
                         <UFormGroup name="avatar" class="flex-1" :label="$t('common.avatar')">
-                            <NotSupportedTabletBlock v-if="isNUIEnabled().value" />
+                            <NotSupportedTabletBlock v-if="nuiEnabled" />
                             <UInput
                                 v-else
                                 type="file"
@@ -124,20 +126,14 @@ const nuiAvailable = isNUIEnabled();
                             block
                             color="red"
                             class="flex-1"
-                            :disabled="nuiAvailable || !canSubmit || !activeChar?.avatar"
+                            :disabled="nuiEnabled || !canSubmit || !activeChar?.avatar"
                             :loading="!canSubmit"
                             @click="state.reset = true"
                         >
                             {{ $t('common.reset') }}
                         </UButton>
 
-                        <UButton
-                            type="submit"
-                            block
-                            class="flex-1"
-                            :disabled="nuiAvailable || !canSubmit"
-                            :loading="!canSubmit"
-                        >
+                        <UButton type="submit" block class="flex-1" :disabled="nuiEnabled || !canSubmit" :loading="!canSubmit">
                             {{ $t('common.save') }}
                         </UButton>
                     </UButtonGroup>

diff --git a/app/components/livemap/LivemapBase.vue b/app/components/livemap/LivemapBase.vue
@@ -12,7 +12,7 @@ import PostalSearch from '~/components/livemap/controls/PostalSearch.vue';
 import SettingsButton from '~/components/livemap/controls/SettingsButton.vue';
 import DataErrorBlock from '~/components/partials/data/DataErrorBlock.vue';
 import DataPendingBlock from '~/components/partials/data/DataPendingBlock.vue';
-import { isNUIEnabled, setWaypoint } from '~/composables/nui';
+import { setWaypoint } from '~/composables/nui';
 import { useCentrumStore } from '~/store/centrum';
 import { useLivemapStore } from '~/store/livemap';
 import { useSettingsStore } from '~/store/settings';
@@ -29,7 +29,7 @@ const { can } = useAuth();
 const slideover = useSlideover();
 
 const settingsStore = useSettingsStore();
-const { livemap } = storeToRefs(settingsStore);
+const { livemap, nuiEnabled } = storeToRefs(settingsStore);
 
 const livemapStore = useLivemapStore();
 const { startStream } = livemapStore;
@@ -75,7 +75,7 @@ if (can('LivemapperService.CreateOrUpdateMarker').value) {
         },
     });
 }
-if (isNUIEnabled().value) {
+if (nuiEnabled.value) {
     mapOptions.contextmenuItems.push({
         text: t('components.centrum.livemap.mark_on_gps'),
         callback: (e: ContextMenuItemClickEvent) => setWaypoint(e.latlng.lng, e.latlng.lat),

diff --git a/app/components/partials/citizens/PhoneNumberBlock.vue b/app/components/partials/citizens/PhoneNumberBlock.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { isNUIEnabled, phoneCallNumber } from '~/composables/nui';
+import { phoneCallNumber } from '~/composables/nui';
 import { useNotificatorStore } from '~/store/notificator';
 import { useSettingsStore } from '~/store/settings';
 import { NotificationType } from '~~/gen/ts/resources/notifications/notifications';
@@ -22,7 +22,7 @@ const props = withDefaults(
 );
 
 const settingsStore = useSettingsStore();
-const { streamerMode } = storeToRefs(settingsStore);
+const { nuiEnabled, streamerMode } = storeToRefs(settingsStore);
 
 const notifications = useNotificatorStore();
 
@@ -31,7 +31,7 @@ async function doCall(): Promise<void> {
         return;
     }
 
-    if (isNUIEnabled().value) {
+    if (nuiEnabled.value) {
         return phoneCallNumber(props.number);
     } else {
         notifications.add({

diff --git a/app/components/qualifications/exam/ExamEditorQuestion.vue b/app/components/qualifications/exam/ExamEditorQuestion.vue
@@ -2,6 +2,7 @@
 import { VueDraggable } from 'vue-draggable-plus';
 import { z } from 'zod';
 import NotSupportedTabletBlock from '~/components/partials/NotSupportedTabletBlock.vue';
+import { useSettingsStore } from '~/store/settings';
 import type { ExamQuestion } from '~~/gen/ts/resources/qualifications/exam';
 
 const props = defineProps<{
@@ -15,6 +16,9 @@ const emit = defineEmits<{
 
 const question = useVModel(props, 'modelValue', emit);
 
+const settingsStore = useSettingsStore();
+const { nuiEnabled } = storeToRefs(settingsStore);
+
 const schema = z.object({
     id: z.number(),
     title: z.string().min(3).max(512),
@@ -228,7 +232,7 @@ function changeQuestionType(qt: string): void {
 
                 <template v-else-if="question.data!.data.oneofKind === 'image'">
                     <div class="flex flex-col gap-2">
-                        <NotSupportedTabletBlock v-if="isNUIEnabled().value" />
+                        <NotSupportedTabletBlock v-if="nuiEnabled" />
                         <template v-else>
                             <UInput
                                 type="file"

diff --git a/app/components/rector/JobProps.vue b/app/components/rector/JobProps.vue
@@ -20,7 +20,7 @@ import NotSupportedTabletBlock from '../partials/NotSupportedTabletBlock.vue';
 const { t } = useI18n();
 
 const settingsStore = useSettingsStore();
-const { streamerMode } = storeToRefs(settingsStore);
+const { nuiEnabled, streamerMode } = storeToRefs(settingsStore);
 
 const appConfig = useAppConfig();
 
@@ -393,7 +393,7 @@ const onSubmitThrottle = useThrottleFn(async (event: FormSubmitEvent<Schema>) =>
                                     :ui="{ container: '' }"
                                 >
                                     <div class="flex flex-col">
-                                        <NotSupportedTabletBlock v-if="isNUIEnabled().value" />
+                                        <NotSupportedTabletBlock v-if="nuiEnabled" />
                                         <template v-else>
                                             <UInput
                                                 name="jobLogo"