feat(Contact): add formatted address modal
fix: better UI/UX for additional contacts MAY REQUIRE SOME DATA MIGRATION
This commit is contained in:
parent
18163aa2ac
commit
6b3f96c196
2 changed files with 169 additions and 24 deletions
|
|
@ -20,6 +20,53 @@
|
|||
label="Numéro de téléphone"
|
||||
outlined
|
||||
v-model="$store.state.data.contacts.phone" /> -->
|
||||
<v-row class="justify-center">
|
||||
<v-col cols="12" md="6">
|
||||
<div class="text-h6">Adresse</div>
|
||||
</v-col>
|
||||
<v-col cols="12" md="6" class="d-flex justify-end">
|
||||
<v-btn @click="addressModal = true">
|
||||
<v-icon left>room</v-icon>
|
||||
<span>Changer votre adresse</span>
|
||||
</v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<!-- <v-row
|
||||
v-if="address !== ''"
|
||||
class="justify-center pb-6">
|
||||
<v-card
|
||||
class="mx-auto"
|
||||
max-width="600px"
|
||||
>
|
||||
<v-card-text>
|
||||
{{ address }}
|
||||
</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-spacer />
|
||||
<v-tooltip top>
|
||||
<template v-slot:activator="{ on, attrs }">
|
||||
<v-btn
|
||||
v-bind="attrs" v-on="on"
|
||||
icon outlined color="info"
|
||||
@click="addressModal = true"
|
||||
>
|
||||
<v-icon small>edit</v-icon>
|
||||
</v-btn>
|
||||
</template>
|
||||
<span>Editer votre adresse</span>
|
||||
</v-tooltip>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-row> -->
|
||||
<!--
|
||||
<v-textarea
|
||||
prepend-icon="room"
|
||||
label="Adresse"
|
||||
outlined
|
||||
v-model="$store.state.data.contacts.address"
|
||||
:rules="rules.address" /> -->
|
||||
<v-divider />
|
||||
<div class="text-h6 pt-5 pb-5">Réseaux sociaux et site web</div>
|
||||
<v-form v-model="formValid" ref="form">
|
||||
<v-text-field
|
||||
prepend-icon="public"
|
||||
|
|
@ -27,12 +74,6 @@
|
|||
outlined
|
||||
:rules="rules.website"
|
||||
v-model="$store.state.data.contacts.website" />
|
||||
<v-textarea
|
||||
prepend-icon="room"
|
||||
label="Adresse"
|
||||
outlined
|
||||
v-model="$store.state.data.contacts.address"
|
||||
:rules="rules.address" />
|
||||
<v-text-field
|
||||
prepend-icon="$vuetify.icons.facebook"
|
||||
label="Compte facebook"
|
||||
|
|
@ -52,6 +93,7 @@
|
|||
v-model="$store.state.data.contacts.instagram"
|
||||
:rules="rules.instagram" />
|
||||
</v-form>
|
||||
<v-divider />
|
||||
<AdditionalContacts />
|
||||
<!-- <v-card
|
||||
v-for="(contact, index) in $store.state.data.contacts.peoples"
|
||||
|
|
@ -91,6 +133,54 @@
|
|||
</v-col>
|
||||
</v-row>
|
||||
</v-card> -->
|
||||
<v-dialog v-model="addressModal" max-width="500px">
|
||||
<v-card>
|
||||
<v-card-title>
|
||||
Renseignez une adresse physique
|
||||
</v-card-title>
|
||||
<v-card-text>
|
||||
<p>
|
||||
Préférez une adresse à laquelle vous acceuillez du public plutôt qu'une adresse personelle.
|
||||
</p>
|
||||
<p>
|
||||
Dans le cas ou votre association opère à plusieurs adresses, mettez celle qui est la plus importante selon vous ou ne renseignez pas d'adresse.
|
||||
</p>
|
||||
<v-row>
|
||||
<v-col cols="12" sm="6" class="py-0">
|
||||
<v-text-field
|
||||
label="Première ligne"
|
||||
v-model="firstLine"
|
||||
:rules="rules.firstLine" />
|
||||
</v-col>
|
||||
<v-col cols="12" sm="6" class="py-0">
|
||||
<v-text-field
|
||||
label="Deuxième ligne"
|
||||
v-model="secondLine"
|
||||
:rules="rules.secondLine" />
|
||||
</v-col>
|
||||
<v-col cols="12" sm="4" class="py-0">
|
||||
<v-text-field
|
||||
label="Code postal"
|
||||
type="number"
|
||||
v-model="postalCode"
|
||||
:rules="rules.postalCode" />
|
||||
</v-col>
|
||||
<v-col cols="12" sm="8" class="py-0">
|
||||
<v-text-field
|
||||
label="Ville"
|
||||
v-model="city"
|
||||
:rules="rules.city" />
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-spacer />
|
||||
<v-btn color="primary" text @click="addressModal = false">
|
||||
Fermer
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -104,14 +194,51 @@ export default {
|
|||
mounted () {
|
||||
this.$refs.form.validate()
|
||||
},
|
||||
watch: {
|
||||
addressModal (val) {
|
||||
if (val) {
|
||||
// decode address
|
||||
let raw = this.$store.state.data.contacts.address.split('\n')
|
||||
this.firstLine = raw[0]
|
||||
if (raw.length === 3) {
|
||||
this.secondLine = raw[1]
|
||||
raw = raw[2].split('%postalsep%')
|
||||
} else {
|
||||
raw = raw[1].split('%postalsep%')
|
||||
}
|
||||
this.postalCode = raw[0]
|
||||
this.city = raw[1]
|
||||
} else {
|
||||
// encode address
|
||||
let encoded = ''
|
||||
encoded += this.firstLine
|
||||
if (this.secondLine !== '') {
|
||||
encoded += '\n' + this.secondLine
|
||||
}
|
||||
encoded += '\n' + this.postalCode + '%postalsep%' + this.city
|
||||
this.address = encoded.replace('%postalsep%', '')
|
||||
this.$store.state.data.contacts.address = encoded
|
||||
}
|
||||
}
|
||||
},
|
||||
data: () => ({
|
||||
formValid: false,
|
||||
addressModal: false,
|
||||
rules: {
|
||||
website: [
|
||||
v => v === '' || /^(?:http(s)?:\/\/)?[\w.-]+(?:\.[\w.-]+)+[\w\-._~:/?#[\]@!$&'()*+,;=.]+$/gm.test(v) || "L'adresse web doit être valide"
|
||||
],
|
||||
address: [
|
||||
v => v.length < 200 || 'Maximum 200 caractères'
|
||||
firstLine: [
|
||||
v => /^[0-9,-.A-Za-zÀàÂâÆzÉéÈèÊêËëÏïÎîÙùÛûÜüÇç' ]{2,40}$/gm.test(v) || "Ce champs doit être une ligne d'adresse valide"
|
||||
],
|
||||
secondLine: [
|
||||
v => v === '' || /^[0-9,-.A-Za-zÀàÂâÆzÉéÈèÊêËëÏïÎîÙùÛûÜüÇç' ]{2,40}$/gm.test(v) || "Ce champs doit être une ligne d'adresse valide"
|
||||
],
|
||||
postalCode: [
|
||||
v => /^[0-9]{2,6}$/gm.test(v) || 'Ce champs doit être un code postal valide'
|
||||
],
|
||||
city: [
|
||||
v => v === '' || /^[0-9-A-Za-zÀàÂâÆzÉéÈèÊêËëÏïÎîÙùÛûÜüÇç' ]{2,40}$/gm.test(v) || "Ce champs doit être une ligne d'adresse valide"
|
||||
],
|
||||
facebook: [
|
||||
v => v === '' || /(http(s)?:\/\/)?(www\.)?facebook\.com\/(\S+){3,}/g.test(v) || 'Ce champs doit être une url facebook valide'
|
||||
|
|
@ -122,7 +249,11 @@ export default {
|
|||
instagram: [
|
||||
v => v === '' || /(http(s)?:\/\/)?(www\.)?instagram\.com\/(\S+){3,}/g.test(v) || 'Ce champs doit être une url instagram valide'
|
||||
]
|
||||
}
|
||||
},
|
||||
firstLine: '',
|
||||
secondLine: '',
|
||||
postalCode: '',
|
||||
city: ''
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue