Client - fix modals

This commit is contained in:
Sam 2023-07-13 16:35:11 +02:00
parent 14e66aee04
commit 8cd2354955
4 changed files with 55 additions and 23 deletions

View File

@ -1,5 +1,5 @@
<template> <template>
<div id="modal"> <div id="modal" role="dialog">
<div class="custom-modal"> <div class="custom-modal">
<Card> <Card>
<template #title> <template #title>

View File

@ -2,6 +2,7 @@
<div id="user-infos" class="description-list"> <div id="user-infos" class="description-list">
<Modal <Modal
v-if="displayModal" v-if="displayModal"
name="user"
:title="$t('common.CONFIRMATION')" :title="$t('common.CONFIRMATION')"
:message=" :message="
displayModal === 'delete' displayModal === 'delete'
@ -15,6 +16,7 @@
: resetUserPassword(user.username) : resetUserPassword(user.username)
" "
@cancelAction="updateDisplayModal('')" @cancelAction="updateDisplayModal('')"
@keydown.esc="updateDisplayModal('')"
/> />
<div class="info-box success-message" v-if="isSuccess"> <div class="info-box success-message" v-if="isSuccess">
{{ {{
@ -190,6 +192,10 @@
function updateDisplayModal(value: string) { function updateDisplayModal(value: string) {
displayModal.value = value displayModal.value = value
if (value !== '') { if (value !== '') {
const button = document.getElementById('user-cancel-button')
if (button) {
button.focus()
}
store.commit(USERS_STORE.MUTATIONS.UPDATE_IS_SUCCESS, false) store.commit(USERS_STORE.MUTATIONS.UPDATE_IS_SUCCESS, false)
} }
} }

View File

@ -2,10 +2,12 @@
<div id="user-infos-edition"> <div id="user-infos-edition">
<Modal <Modal
v-if="displayModal" v-if="displayModal"
name="account"
:title="$t('common.CONFIRMATION')" :title="$t('common.CONFIRMATION')"
:message="$t('user.CONFIRM_ACCOUNT_DELETION')" :message="$t('user.CONFIRM_ACCOUNT_DELETION')"
@confirmAction="deleteAccount(user.username)" @confirmAction="deleteAccount(user.username)"
@cancelAction="updateDisplayModal(false)" @cancelAction="updateDisplayModal(false)"
@keydown.esc="updateDisplayModal(false)"
/> />
<div class="profile-form form-box"> <div class="profile-form form-box">
<ErrorMessage :message="errorMessages" v-if="errorMessages" /> <ErrorMessage :message="errorMessages" v-if="errorMessages" />
@ -62,7 +64,11 @@
<button class="danger" @click.prevent="updateDisplayModal(true)"> <button class="danger" @click.prevent="updateDisplayModal(true)">
{{ $t('buttons.DELETE_MY_ACCOUNT') }} {{ $t('buttons.DELETE_MY_ACCOUNT') }}
</button> </button>
<button class="confirm" v-if="canRequestExport()" @click.prevent="requestExport"> <button
class="confirm"
v-if="canRequestExport()"
@click.prevent="requestExport"
>
{{ $t('buttons.REQUEST_DATA_EXPORT') }} {{ $t('buttons.REQUEST_DATA_EXPORT') }}
</button> </button>
</div> </div>
@ -73,22 +79,22 @@
{{ $t('user.EXPORT_REQUEST.ONLY_ONE_EXPORT_PER_DAY') }} {{ $t('user.EXPORT_REQUEST.ONLY_ONE_EXPORT_PER_DAY') }}
</span> </span>
<div v-if="exportRequest" class="data-export-archive"> <div v-if="exportRequest" class="data-export-archive">
{{$t('user.EXPORT_REQUEST.DATA_EXPORT')}} {{ $t('user.EXPORT_REQUEST.DATA_EXPORT') }}
({{ exportRequestDate }}): ({{ exportRequestDate }}):
<span <span
v-if="exportRequest.status=== 'successful'" v-if="exportRequest.status === 'successful'"
class="archive-link" class="archive-link"
@click.prevent="downloadArchive(exportRequest.file_name)" @click.prevent="downloadArchive(exportRequest.file_name)"
> >
<i class="fa fa-download" aria-hidden="true" /> <i class="fa fa-download" aria-hidden="true" />
{{ $t("user.EXPORT_REQUEST.DOWNLOAD_ARCHIVE") }} {{ $t('user.EXPORT_REQUEST.DOWNLOAD_ARCHIVE') }}
({{ getReadableFileSize(exportRequest.file_size) }}) ({{ getReadableFileSize(exportRequest.file_size) }})
</span> </span>
<span v-else> <span v-else>
{{ $t(`user.EXPORT_REQUEST.STATUS.${exportRequest.status}`)}} {{ $t(`user.EXPORT_REQUEST.STATUS.${exportRequest.status}`) }}
</span> </span>
<span v-if="generatingLink"> <span v-if="generatingLink">
{{ $t(`user.EXPORT_REQUEST.GENERATING_LINK`)}} {{ $t(`user.EXPORT_REQUEST.GENERATING_LINK`) }}
<i class="fa fa-spinner fa-pulse" aria-hidden="true" /> <i class="fa fa-spinner fa-pulse" aria-hidden="true" />
</span> </span>
</div> </div>
@ -111,11 +117,15 @@
onUnmounted, onUnmounted,
} from 'vue' } from 'vue'
import authApi from "@/api/authApi"; import authApi from '@/api/authApi'
import PasswordInput from '@/components/Common/PasswordInput.vue' import PasswordInput from '@/components/Common/PasswordInput.vue'
import { AUTH_USER_STORE, ROOT_STORE } from '@/store/constants' import { AUTH_USER_STORE, ROOT_STORE } from '@/store/constants'
import { TAppConfig } from '@/types/application' import { TAppConfig } from '@/types/application'
import {IAuthUserProfile, IUserAccountPayload, IExportRequest} from '@/types/user' import {
IAuthUserProfile,
IUserAccountPayload,
IExportRequest,
} from '@/types/user'
import { useStore } from '@/use/useStore' import { useStore } from '@/use/useStore'
import { formatDate } from '@/utils/dates' import { formatDate } from '@/utils/dates'
import { getReadableFileSize } from '@/utils/files' import { getReadableFileSize } from '@/utils/files'
@ -150,8 +160,8 @@
const exportRequest: ComputedRef<IExportRequest | null> = computed( const exportRequest: ComputedRef<IExportRequest | null> = computed(
() => store.getters[AUTH_USER_STORE.GETTERS.EXPORT_REQUEST] () => store.getters[AUTH_USER_STORE.GETTERS.EXPORT_REQUEST]
) )
const exportRequestDate: ComputedRef<string | null> = computed( const exportRequestDate: ComputedRef<string | null> = computed(() =>
() => getExportRequestDate() getExportRequestDate()
) )
const generatingLink: Ref<boolean> = ref(false) const generatingLink: Ref<boolean> = ref(false)
@ -175,19 +185,22 @@
userForm.new_password = new_password userForm.new_password = new_password
} }
function getExportRequestDate() { function getExportRequestDate() {
return exportRequest.value ? formatDate( return exportRequest.value
exportRequest.value.created_at, ? formatDate(
user.value.timezone, exportRequest.value.created_at,
user.value.date_format, user.value.timezone,
true, user.value.date_format,
null, true true,
) : null null,
true
)
: null
} }
function canRequestExport() { function canRequestExport() {
return exportRequestDate.value return exportRequestDate.value
? isBefore(new Date(exportRequestDate.value), subDays(new Date(), 1)) ? isBefore(new Date(exportRequestDate.value), subDays(new Date(), 1))
: true : true
} }
function updateProfile() { function updateProfile() {
const payload: IUserAccountPayload = { const payload: IUserAccountPayload = {
@ -202,6 +215,12 @@
} }
function updateDisplayModal(value: boolean) { function updateDisplayModal(value: boolean) {
displayModal.value = value displayModal.value = value
if (displayModal.value) {
const button = document.getElementById('account-cancel-button')
if (button) {
button.focus()
}
}
} }
function deleteAccount(username: string) { function deleteAccount(username: string) {
store.dispatch(AUTH_USER_STORE.ACTIONS.DELETE_ACCOUNT, { username }) store.dispatch(AUTH_USER_STORE.ACTIONS.DELETE_ACCOUNT, { username })
@ -225,7 +244,7 @@
document.body.appendChild(archive_link) document.body.appendChild(archive_link)
archive_link.click() archive_link.click()
}) })
.finally(() => generatingLink.value = false) .finally(() => (generatingLink.value = false))
} }
onUnmounted(() => { onUnmounted(() => {
@ -284,8 +303,8 @@
.data-export { .data-export {
padding: $default-padding 0; padding: $default-padding 0;
.data-export-archive { .data-export-archive {
padding-top: $default-padding*2; padding-top: $default-padding * 2;
font-size: .9em; font-size: 0.9em;
.archive-link { .archive-link {
color: var(--app-a-color); color: var(--app-a-color);

View File

@ -2,10 +2,12 @@
<div id="oauth2-app" class="description-list"> <div id="oauth2-app" class="description-list">
<Modal <Modal
v-if="displayModal" v-if="displayModal"
name="app"
:title="$t('common.CONFIRMATION')" :title="$t('common.CONFIRMATION')"
:message="$t(messageToDisplay)" :message="$t(messageToDisplay)"
@confirmAction="confirmAction(client.id)" @confirmAction="confirmAction(client.id)"
@cancelAction="updateDisplayModal(false)" @cancelAction="updateDisplayModal(false)"
@keydown.esc="updateDisplayModal(false)"
/> />
<div v-if="client && client.client_id"> <div v-if="client && client.client_id">
<div <div
@ -178,6 +180,11 @@
displayModal.value = value displayModal.value = value
if (!value) { if (!value) {
messageToDisplay.value = null messageToDisplay.value = null
} else {
const button = document.getElementById('app-cancel-button')
if (button) {
button.focus()
}
} }
} }
function confirmAction(clientId: number) { function confirmAction(clientId: number) {