[#MUI-31] Création d'un composant téléphone (#45)
| Numéro du ticket | Titre du ticket | |------------------|-----------------| | | | ## Description de la PR ## Modification du .env ## Check list - [ ] Pas de régression - [ ] TU/TI/TF rédigée - [ ] TU/TI/TF OK - [ ] CHANGELOG modifié Reviewed-on: #45 Co-authored-by: tristan <tristan@yuno.malio.fr> Co-committed-by: tristan <tristan@yuno.malio.fr>
This commit was merged in pull request #45.
This commit is contained in:
@@ -1,122 +1,83 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="flex justify-center mt-8">
|
||||
<div>
|
||||
<div class="w-[1348px] grid grid-cols-3 gap-x-[160px] gap-y-8">
|
||||
<MalioInputText
|
||||
label="Nom du client (Entreprise)"
|
||||
/>
|
||||
<MalioInputText
|
||||
label="Nom du contact principal"
|
||||
/>
|
||||
<MalioInputText
|
||||
label="Prénom du contact principal"
|
||||
/>
|
||||
<MalioSelectCheckbox
|
||||
label="Catégorie"
|
||||
v-model="multiselectValue"
|
||||
:options="[
|
||||
{label: 'Catégorie 1', value: 'Catégorie 1'},
|
||||
{label: 'Catégorie 2', value: 'Catégorie 2'}
|
||||
]"
|
||||
/>
|
||||
<MalioInputText
|
||||
label="Téléphone"
|
||||
/>
|
||||
<MalioInputEmail
|
||||
label="Email"
|
||||
/>
|
||||
<MalioSelect
|
||||
value=""
|
||||
label="Distributeur / Courtier"
|
||||
:options="[
|
||||
{label: 'Dépend du distributeur', value: 'Dépend du distributeur'},
|
||||
{label: 'Distributeur', value: 'Distributeur'},
|
||||
{label: 'Courtier', value: 'Courtier'},
|
||||
]"
|
||||
/>
|
||||
<MalioSelect
|
||||
value=""
|
||||
label="Nom du courtier"
|
||||
:options="[
|
||||
{label: 'Nom 1', value: 'Nom 1'}
|
||||
]"
|
||||
/>
|
||||
<MalioSelect
|
||||
value=""
|
||||
label="Distributeur / Courtier"
|
||||
:options="[
|
||||
{label: 'Nom 1', value: 'Nom 1'}
|
||||
]"
|
||||
/>
|
||||
<MalioCheckbox label="Prestation de triage"/>
|
||||
</div>
|
||||
<div class="mt-16 flex justify-center">
|
||||
<MalioButton label="Valider" variant="primary"/>
|
||||
<div class="flex justify-center mt-16">
|
||||
<div>
|
||||
<div class="w-[1348px] grid grid-cols-3 gap-x-[80px] gap-y-8">
|
||||
<MalioInputText
|
||||
label="Nom du client (Entreprise)"
|
||||
/>
|
||||
<MalioInputText
|
||||
label="Nom du contact principal"
|
||||
/>
|
||||
<MalioInputText
|
||||
label="Prénom du contact principal"
|
||||
/>
|
||||
<MalioSelectCheckbox
|
||||
v-model="multiselectValue"
|
||||
label="Catégorie"
|
||||
:options="[
|
||||
{label: 'Catégorie 1', value: 'Catégorie 1'},
|
||||
{label: 'Catégorie 2', value: 'Catégorie 2'}
|
||||
]"
|
||||
/>
|
||||
<MalioInputPhone
|
||||
v-for="(_, index) in phones"
|
||||
:key="index"
|
||||
v-model="phones[index]"
|
||||
label="Téléphone"
|
||||
add-icon-name="mdi:plus"
|
||||
:addable="phones.length === 1"
|
||||
@add="addPhoneInput"
|
||||
/>
|
||||
<MalioInputEmail
|
||||
label="Email"
|
||||
/>
|
||||
<MalioSelect
|
||||
v-model="distributeur"
|
||||
value=""
|
||||
label="Distributeur / Courtier"
|
||||
:options="[
|
||||
{label: 'Dépend du distributeur', value: 'Dépend du distributeur'},
|
||||
{label: 'Distributeur', value: 'Distributeur'},
|
||||
{label: 'Courtier', value: 'Courtier'},
|
||||
]"
|
||||
/>
|
||||
<MalioSelect
|
||||
v-model="nomCourtier"
|
||||
value=""
|
||||
label="Nom du courtier"
|
||||
:options="[
|
||||
{label: 'Nom 1', value: 'Nom 1'}
|
||||
]"
|
||||
/>
|
||||
<MalioSelect
|
||||
v-model="nomDistributeur"
|
||||
value=""
|
||||
label="Nom du distributeur"
|
||||
:options="[
|
||||
{label: 'Nom 1', value: 'Nom 1'}
|
||||
]"
|
||||
/>
|
||||
<MalioCheckbox label="Prestation de triage" groupClass="self-center"/>
|
||||
</div>
|
||||
<div class="mt-16 flex justify-center">
|
||||
<MalioButton label="Valider" variant="primary"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-center mt-16">
|
||||
<div>
|
||||
<div class="w-[1348px] grid grid-cols-3 gap-x-[80px] gap-y-8">
|
||||
<MalioInputText
|
||||
label="Nom du client (Entreprise)"
|
||||
/>
|
||||
<MalioInputText
|
||||
label="Nom du contact principal"
|
||||
/>
|
||||
<MalioInputText
|
||||
label="Prénom du contact principal"
|
||||
/>
|
||||
<MalioSelectCheckbox
|
||||
label="Catégorie"
|
||||
v-model="multiselectValue"
|
||||
:options="[
|
||||
{label: 'Catégorie 1', value: 'Catégorie 1'},
|
||||
{label: 'Catégorie 2', value: 'Catégorie 2'}
|
||||
]"
|
||||
/>
|
||||
<MalioInputText
|
||||
label="Téléphone"
|
||||
/>
|
||||
<MalioInputEmail
|
||||
label="Email"
|
||||
/>
|
||||
<MalioSelect
|
||||
value=""
|
||||
label="Distributeur / Courtier"
|
||||
:options="[
|
||||
{label: 'Dépend du distributeur', value: 'Dépend du distributeur'},
|
||||
{label: 'Distributeur', value: 'Distributeur'},
|
||||
{label: 'Courtier', value: 'Courtier'},
|
||||
]"
|
||||
/>
|
||||
<MalioSelect
|
||||
value=""
|
||||
label="Nom du courtier"
|
||||
:options="[
|
||||
{label: 'Nom 1', value: 'Nom 1'}
|
||||
]"
|
||||
/>
|
||||
<MalioSelect
|
||||
value=""
|
||||
label="Distributeur / Courtier"
|
||||
:options="[
|
||||
{label: 'Nom 1', value: 'Nom 1'}
|
||||
]"
|
||||
/>
|
||||
<MalioCheckbox label="Prestation de triage"/>
|
||||
</div>
|
||||
<div class="mt-16 flex justify-center">
|
||||
<MalioButton label="Valider" variant="primary"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {ref} from "vue";
|
||||
import {ref} from 'vue'
|
||||
|
||||
const multiselectValue = ref<Array<string | number>>([])
|
||||
const distributeur = ref<string>('')
|
||||
const phones = ref<string[]>([''])
|
||||
const nomDistributeur = ref<string>('')
|
||||
const nomCourtier = ref<string>('')
|
||||
|
||||
function addPhoneInput() {
|
||||
phones.value.push('')
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user