finnow/web-app/src/pages/home/ProfileModule.vue

42 lines
1.5 KiB
Vue

<script setup lang="ts">
import { ProfileApiClient } from '@/api/profile';
import AppButton from '@/components/AppButton.vue';
import ConfirmModal from '@/components/ConfirmModal.vue';
import HomeModule from '@/components/HomeModule.vue';
import { useProfileStore } from '@/stores/profile-store';
import { useTemplateRef } from 'vue';
import { useRouter } from 'vue-router';
const profileStore = useProfileStore()
const router = useRouter()
const confirmDeleteModal = useTemplateRef('confirmDeleteModal')
async function deleteProfile() {
if (profileStore.state && await confirmDeleteModal.value?.confirm()) {
const api = new ProfileApiClient()
try {
await api.deleteProfile(profileStore.state.name)
await router.replace('/profiles')
} catch (err) {
console.error(err)
}
}
}
</script>
<template>
<HomeModule title="Profile">
<template v-slot:default>
<p>Your currently selected profile is: {{ profileStore.state?.name }}</p>
<ConfirmModal ref="confirmDeleteModal">
<p>Are you sure you want to delete this profile?</p>
<p>This will permanently remove all data associated with this profile, and this cannot be undone!</p>
</ConfirmModal>
</template>
<template v-slot:actions>
<AppButton icon="folder-open" @click="router.push('/profiles')">Choose another profile</AppButton>
<AppButton button-style="secondary" icon="trash" @click="deleteProfile()">Delete</AppButton>
</template>
</HomeModule>
</template>