Alexander/FitTrackee
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Client - fix modals

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
fittrackee_client/src/components/Common/Modal.vue
View File

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

6
fittrackee_client/src/components/User/ProfileDisplay/UserInfos.vue
View File

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

51
fittrackee_client/src/components/User/ProfileEdition/UserAccountEdition.vue
View File

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

7
fittrackee_client/src/components/User/UserApps/UserApp.vue
View File

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