WIP Поправил валидации на инпутах и баг с обновлением формы

This commit is contained in:
DwCay
2023-04-21 18:05:01 +03:00
parent 50409bbd95
commit 75402fb209
6 changed files with 54 additions and 53 deletions

View File

@@ -1,5 +1,6 @@
<template lang="pug"> <template lang="pug">
button.base-button.text-base( button.base-button.text-base(
type="button"
:disabled="disabled", :disabled="disabled",
:class="{'rounded': rounded, 'outlined': outlined, 'outlined-red': outlinedRed, 'secondary': secondary, 'confirm': confirm, 'added': added, 'added-border-none': addedBorderNone}" :class="{'rounded': rounded, 'outlined': outlined, 'outlined-red': outlinedRed, 'secondary': secondary, 'confirm': confirm, 'added': added, 'added-border-none': addedBorderNone}"
:style="{height: size + 'px', minWidth: size + 'px'}" :style="{height: size + 'px', minWidth: size + 'px'}"
@@ -80,6 +81,8 @@ export default {
&:disabled, &[disabled] &:disabled, &[disabled]
background-color: var(--btn-blue-color-disabled) background-color: var(--btn-blue-color-disabled)
border: 1px solid var(--btn-blue-color-disabled) border: 1px solid var(--btn-blue-color-disabled)
&:focus
outline: 0
.rounded .rounded
padding: 0 padding: 0
border-radius: 50% border-radius: 50%

View File

@@ -66,10 +66,12 @@ export default {
<style lang="sass" scoped> <style lang="sass" scoped>
.avatar-wrapper .avatar-wrapper
width: 400px min-width: 400px
height: 400px min-height: 400px
border-radius: 50% border-radius: 50%
.avatar .avatar
min-width: 400px
min-height: 400px
height: 100% height: 100%
border-radius: 50% border-radius: 50%
</style> </style>

View File

@@ -49,7 +49,7 @@
v-if="isEdit" v-if="isEdit"
left-icon="icon-plus" left-icon="icon-plus"
added-border-none added-border-none
@click="addNewAllergy" @click="(e) => addNewAllergy(e)"
:icon-left-size="12" :icon-left-size="12"
) )
span.font-medium.text-base Добавить span.font-medium.text-base Добавить
@@ -142,11 +142,13 @@ export default {
checkChangeInput() { checkChangeInput() {
this.isCheckChange = checkChangeData(this.initAllergies, this.allergies); this.isCheckChange = checkChangeData(this.initAllergies, this.allergies);
}, },
addNewAllergy() { addNewAllergy(e) {
if (e.pointerType) {
this.allergies.push({ this.allergies.push({
name: null, name: null,
title: null, title: null,
}); });
}
this.checkChangeInput(); this.checkChangeInput();
}, },
deleteAllergy(index) { deleteAllergy(index) {

View File

@@ -22,7 +22,7 @@
) )
q-icon.icon(:name="mapNetworks[data.kind].icon" :class="{old: data.id, new: data.filled}") q-icon.icon(:name="mapNetworks[data.kind].icon" :class="{old: data.id, new: data.filled}")
span.text-sm.font-medium {{ mapNetworks[data.kind].title || data.username }} span.text-sm.font-medium {{ mapNetworks[data.kind].title || data.username }}
.flex.gap-10px(v-else v-click-outside="() => checkNetworksField(index)") .flex.gap-10px(v-else v-click-outside="() => checkNetworksField(index)" :key="key+index")
base-select-networks( base-select-networks(
:list-data="Object.values(mapNetworks)" :list-data="Object.values(mapNetworks)"
:option-data="data.kind" :option-data="data.kind"
@@ -33,8 +33,8 @@
base-input.w-full( base-input.w-full(
v-model="data.username" v-model="data.username"
type="text" type="text"
:name="key"
no-error-icon no-error-icon
:name="key"
:rule="configData[key].rules" :rule="configData[key].rules"
:standout="!isEdit" :standout="!isEdit"
:outlined="isEdit" :outlined="isEdit"
@@ -63,7 +63,7 @@
left-icon="icon-plus" left-icon="icon-plus"
added-border-none added-border-none
:icon-left-size="12" :icon-left-size="12"
@click="() => addNewContact(key)" @click="(e) => addNewContact(e, key)"
) )
span.font-medium.text-base Добавить span.font-medium.text-base Добавить
</template> </template>
@@ -181,7 +181,8 @@ export default {
chooseNetwork(e, index) { chooseNetwork(e, index) {
this.contacts.networks[index].kind = e.currentTarget.id; this.contacts.networks[index].kind = e.currentTarget.id;
}, },
addNewContact(key) { addNewContact(e, key) {
if (e.pointerType) {
if (key === "networks") { if (key === "networks") {
this.contacts[key].push({ this.contacts[key].push({
filled: false, filled: false,
@@ -194,6 +195,7 @@ export default {
username: null, username: null,
}); });
} }
}
this.checkChangeInput(); this.checkChangeInput();
}, },
deleteContact(key, index) { deleteContact(key, index) {

View File

@@ -12,15 +12,8 @@ export function ruleOptionalFields(val, minLength, text) {
} }
export function ruleEmailValue(val, text) { export function ruleEmailValue(val, text) {
return ( const regExp = new RegExp(/^[^\s()<>@,;:/]+@\w[\w.-]+\.[a-z]{2,}$/i);
(val && return (val && val.length < 100 && regExp.test(val)) || text || false;
val.length < 100 &&
val.includes("@") &&
val.match(/@(?=\S+)/) &&
val.match(/(?<=\S+)@/)) ||
text ||
false
);
} }
export function ruleMaxLength(val, maxLength, text) { export function ruleMaxLength(val, maxLength, text) {

View File

@@ -70,15 +70,14 @@ const getters = {
let DMS = person?.insurance_policy?.find((e) => e.title === "DMS"); let DMS = person?.insurance_policy?.find((e) => e.title === "DMS");
return { return {
personalData: { personalData: {
last_name: person?.last_name, last_name: person?.last_name || "",
first_name: person?.first_name, first_name: person?.first_name || "",
patronymic: person?.patronymic, patronymic: person?.patronymic || "",
gender: gender:
person?.gender && (person?.gender &&
genderOptions.find((el) => el.id === person?.gender), genderOptions.find((el) => el.id === person?.gender)) ||
birth_date: person?.birth_date "",
? new Date(person?.birth_date) birth_date: person?.birth_date ? new Date(person?.birth_date) : "",
: new Date(),
photo: person?.photo photo: person?.photo
? { ? {
photo: rootState.getUrl + person.photo, photo: rootState.getUrl + person.photo,
@@ -88,20 +87,20 @@ const getters = {
id: person?.id, id: person?.id,
}, },
registrationAddress: { registrationAddress: {
region: registrationAddress?.region, region: registrationAddress?.region || "",
city: registrationAddress?.city, city: registrationAddress?.city || "",
street: registrationAddress?.street, street: registrationAddress?.street || "",
house_number: registrationAddress?.house_number, house_number: registrationAddress?.house_number || "",
apartment_number: registrationAddress?.apartment_number, apartment_number: registrationAddress?.apartment_number || "",
id: registrationAddress?.id, id: registrationAddress?.id || "",
}, },
residenceAddress: { residenceAddress: {
region: residenceAddress?.region, region: residenceAddress?.region || "",
city: residenceAddress?.city, city: residenceAddress?.city || "",
street: residenceAddress?.street, street: residenceAddress?.street || "",
house_number: residenceAddress?.house_number, house_number: residenceAddress?.house_number || "",
apartment_number: residenceAddress?.apartment_number, apartment_number: residenceAddress?.apartment_number || "",
id: residenceAddress?.id, id: residenceAddress?.id || "",
}, },
insuranceDMS: { insuranceDMS: {
series: DMS?.series, series: DMS?.series,