Move Navigation from NavDrawer to AppBar, redesign page structure and routes
This commit is contained in:
100
software/src/pages/account/accountDataPage/accountDataCard.vue
Normal file
100
software/src/pages/account/accountDataPage/accountDataCard.vue
Normal file
@@ -0,0 +1,100 @@
|
||||
<script setup lang="ts">
|
||||
import cardView from '@/components/cardView.vue';
|
||||
import { useAccountStore } from '@/data/stores/accountStore';
|
||||
import { useFeedbackStore } from '@/data/stores/feedbackStore';
|
||||
|
||||
const accountStore = useAccountStore()
|
||||
const feedbackStore = useFeedbackStore()
|
||||
|
||||
const passwordRules = [
|
||||
value => {
|
||||
if (value) {
|
||||
return true
|
||||
} else {
|
||||
return feedbackStore.i18n.t('required')
|
||||
}
|
||||
},
|
||||
value => {
|
||||
if (value?.length >= 8) {
|
||||
return true
|
||||
} else {
|
||||
return feedbackStore.i18n.t('passwordToShort')
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
const stringRules = [
|
||||
value => {
|
||||
if (value) {
|
||||
return true
|
||||
} else {
|
||||
return feedbackStore.i18n.t('required')
|
||||
}
|
||||
},
|
||||
value => {
|
||||
if (/[^0-9]/.test(value)) {
|
||||
return true
|
||||
} else {
|
||||
return feedbackStore.i18n.t('noDigitsAllowed')
|
||||
}
|
||||
},
|
||||
value => {
|
||||
if (value?.length >= 3) {
|
||||
return true
|
||||
} else {
|
||||
return feedbackStore.i18n.t('notEnoughChars')
|
||||
}
|
||||
}
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<card-view
|
||||
:title="$t('account.masterData')"
|
||||
icon="mdi-account"
|
||||
>
|
||||
<v-row>
|
||||
<v-col>
|
||||
<v-text-field
|
||||
:label="$t('account.email')"
|
||||
v-model="accountStore.userAccount.email"
|
||||
disabled
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-col>
|
||||
<v-text-field
|
||||
:label="$t('account.username')"
|
||||
v-model="accountStore.userAccount.username"
|
||||
disabled
|
||||
/>
|
||||
</v-col>
|
||||
<v-col>
|
||||
<v-text-field
|
||||
:label="$t('account.password')"
|
||||
v-model="accountStore.userAccount.password"
|
||||
type="password"
|
||||
:rules="passwordRules"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row>
|
||||
<v-col>
|
||||
<v-text-field
|
||||
:label="$t('userInfo.firstName')"
|
||||
v-model="accountStore.userAccount.firstName"
|
||||
:rules="stringRules"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col>
|
||||
<v-text-field
|
||||
:label="$t('userInfo.lastName')"
|
||||
v-model="accountStore.userAccount.lastName"
|
||||
:rules="stringRules"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</card-view>
|
||||
</template>
|
||||
@@ -0,0 +1,38 @@
|
||||
<script setup lang="ts">
|
||||
import cardView from '@/components/cardView.vue';
|
||||
import confirmDialog from '@/components/confirmDialog.vue';
|
||||
import outlinedButton from '@/components/outlinedButton.vue';
|
||||
import { ref } from 'vue';
|
||||
|
||||
const showConfirmDialog = ref(false)
|
||||
|
||||
function deleteAccount() {
|
||||
// todo
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<card-view
|
||||
:title="$t('account.managingAccount')"
|
||||
icon="mdi-account-edit"
|
||||
>
|
||||
<v-row>
|
||||
<v-col class="d-flex justify-center align-center">
|
||||
<outlined-button
|
||||
prepend-icon="mdi-delete"
|
||||
color="red"
|
||||
@click="showConfirmDialog = true"
|
||||
>
|
||||
{{ $t("account.delete") }}
|
||||
</outlined-button>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</card-view>
|
||||
|
||||
<confirm-dialog
|
||||
v-model="showConfirmDialog"
|
||||
:title="$t('dialog.deleteAccount.title')"
|
||||
:description="$t('dialog.deleteAccount.description')"
|
||||
:onConfirm="deleteAccount"
|
||||
/>
|
||||
</template>
|
||||
96
software/src/pages/account/accountDataPage/addressesCard.vue
Normal file
96
software/src/pages/account/accountDataPage/addressesCard.vue
Normal file
@@ -0,0 +1,96 @@
|
||||
<script setup lang="ts">
|
||||
import cardView from '@/components/cardView.vue';
|
||||
import { useAccountStore } from '@/data/stores/accountStore';
|
||||
import outlinedButton from '@/components/outlinedButton.vue';
|
||||
import { AddressModel } from '@/data/models/addressModel';
|
||||
import { useFeedbackStore } from '@/data/stores/feedbackStore';
|
||||
import { getNumberStartRules, getPostalRules, getStringRules } from '@/scripts/validationRules';
|
||||
|
||||
const accountStore = useAccountStore()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<card-view
|
||||
icon="mdi-home"
|
||||
:title="$t('account.address')"
|
||||
>
|
||||
<v-expansion-panels v-if="accountStore.userAccount.addresses.length > 0">
|
||||
<v-expansion-panel
|
||||
v-for="address in accountStore.userAccount.addresses"
|
||||
color="primary"
|
||||
>
|
||||
<template #title>
|
||||
{{ address.street + ' ' + address.houseNumber }}
|
||||
</template>
|
||||
|
||||
<template #text>
|
||||
<v-row class="pt-5">
|
||||
<v-col>
|
||||
<v-text-field
|
||||
:label="$t('userInfo.street')"
|
||||
v-model="address.street"
|
||||
:rules="getStringRules()"
|
||||
clearable
|
||||
/>
|
||||
</v-col>
|
||||
<v-col>
|
||||
<v-text-field
|
||||
:label="$t('userInfo.houseNumber')"
|
||||
v-model="address.houseNumber"
|
||||
:rules="getNumberStartRules()"
|
||||
clearable
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row>
|
||||
<v-col>
|
||||
<v-text-field
|
||||
:label="$t('userInfo.postalCode')"
|
||||
v-model="address.postalCode"
|
||||
:rules="getPostalRules()"
|
||||
clearable
|
||||
/>
|
||||
</v-col>
|
||||
<v-col>
|
||||
<v-text-field
|
||||
:label="$t('userInfo.city')"
|
||||
v-model="address.city"
|
||||
:rules="getStringRules()"
|
||||
clearable
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row>
|
||||
<v-col class="d-flex justify-center align-center">
|
||||
<outlined-button
|
||||
@click="accountStore.removeAddress(address)"
|
||||
color="red"
|
||||
prepend-icon="mdi-delete"
|
||||
>
|
||||
{{ $t('remove') }}
|
||||
</outlined-button>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
</v-expansion-panel>
|
||||
</v-expansion-panels>
|
||||
|
||||
<v-empty-state
|
||||
v-else
|
||||
:title="$t('account.noAddresses')"
|
||||
icon="mdi-home-off"
|
||||
/>
|
||||
|
||||
<template #actions>
|
||||
<outlined-button
|
||||
@click="accountStore.userAccount.addresses.push(new AddressModel())"
|
||||
prepend-icon="mdi-plus"
|
||||
color="green"
|
||||
>
|
||||
{{ $t('add') }}
|
||||
</outlined-button>
|
||||
</template>
|
||||
</card-view>
|
||||
</template>
|
||||
61
software/src/pages/account/accountDataPage/index.vue
Normal file
61
software/src/pages/account/accountDataPage/index.vue
Normal file
@@ -0,0 +1,61 @@
|
||||
<script setup lang="ts">
|
||||
import accountDataCard from './accountDataCard.vue';
|
||||
import accountManagingCard from './accountManagingCard.vue';
|
||||
import addressesCard from './addressesCard.vue';
|
||||
import paymentsCard from './paymentsCard.vue';
|
||||
import { ref } from 'vue';
|
||||
import { useAccountStore } from '@/data/stores/accountStore';
|
||||
|
||||
const accountStore = useAccountStore()
|
||||
const updateInProgress = ref(false)
|
||||
|
||||
async function updateAccount() {
|
||||
updateInProgress.value = true
|
||||
|
||||
await accountStore.updateAccount()
|
||||
|
||||
updateInProgress.value = false
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-container max-width="1000">
|
||||
<v-row>
|
||||
<v-col>
|
||||
<account-data-card />
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row>
|
||||
<v-col>
|
||||
<addresses-card />
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row>
|
||||
<v-col>
|
||||
<payments-card />
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row>
|
||||
<v-col>
|
||||
<account-managing-card />
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
|
||||
<VLayoutItem model-value position="bottom" size="60">
|
||||
<div class="ma-4">
|
||||
<v-fab
|
||||
icon="mdi-content-save"
|
||||
location="right"
|
||||
color="green"
|
||||
absolute
|
||||
offset
|
||||
@click="updateAccount"
|
||||
:loading="updateInProgress"
|
||||
/>
|
||||
</div>
|
||||
</VLayoutItem>
|
||||
</template>
|
||||
76
software/src/pages/account/accountDataPage/paymentsCard.vue
Normal file
76
software/src/pages/account/accountDataPage/paymentsCard.vue
Normal file
@@ -0,0 +1,76 @@
|
||||
<script setup lang="ts">
|
||||
import cardView from '@/components/cardView.vue';
|
||||
import { useAccountStore } from '@/data/stores/accountStore';
|
||||
import outlinedButton from '@/components/outlinedButton.vue';
|
||||
import { PaymentModel } from '@/data/models/paymentModel';
|
||||
import { getIbanRules, getStringRules } from '@/scripts/validationRules';
|
||||
|
||||
const accountStore = useAccountStore()
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<card-view
|
||||
icon="mdi-currency-usd"
|
||||
:title="$t('account.payment')"
|
||||
>
|
||||
<v-expansion-panels
|
||||
v-if="accountStore.userAccount.payments.length > 0"
|
||||
>
|
||||
<v-expansion-panel
|
||||
v-for="payment in accountStore.userAccount.payments"
|
||||
color="primary"
|
||||
>
|
||||
<template #title>
|
||||
{{ payment.bankName }}
|
||||
</template>
|
||||
<template #text>
|
||||
<v-row class="pt-5">
|
||||
<v-col>
|
||||
<v-text-field
|
||||
:label="$t('userInfo.bankName')"
|
||||
v-model="payment.bankName"
|
||||
:rules="getStringRules()"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col>
|
||||
<v-text-field
|
||||
:label="$t('userInfo.iban')"
|
||||
v-model="payment.iban"
|
||||
:rules="getIbanRules()"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row>
|
||||
<v-col class="d-flex justify-center align-center">
|
||||
<outlined-button
|
||||
@click="accountStore.removePayment(payment)"
|
||||
color="red"
|
||||
prepend-icon="mdi-delete"
|
||||
>
|
||||
{{ $t('remove') }}
|
||||
</outlined-button>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
</v-expansion-panel>
|
||||
</v-expansion-panels>
|
||||
|
||||
<v-empty-state
|
||||
v-else
|
||||
:title="$t('account.noPayments')"
|
||||
icon="mdi-currency-usd-off"
|
||||
/>
|
||||
|
||||
<template #actions>
|
||||
<outlined-button
|
||||
@click="accountStore.userAccount.payments.push(new PaymentModel())"
|
||||
prepend-icon="mdi-plus"
|
||||
color="green"
|
||||
>
|
||||
{{ $t('add') }}
|
||||
</outlined-button>
|
||||
</template>
|
||||
</card-view>
|
||||
</template>
|
||||
Reference in New Issue
Block a user