API tools faq
paste
Guest User

Untitled

a guest
Aug 29th, 2024
138
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 9.72 KB | None | 0 0
raw download clone embed print report
  1. <script setup lang="ts">
  2. import * as v from 'valibot'
  3. import type {FormSubmitEvent} from '#ui/types'
  4.  
  5. const schema = v.object({
  6.   type_adhesion: v.object({
  7.     value: v.string(),
  8.     label: v.string()
  9.   }),
  10.   type_licence: v.object({
  11.     value: v.string(),
  12.     label: v.string()
  13.   }),
  14.   numero_license: v.optional(v.string()),
  15.   nom: v.pipe(
  16.       v.string(),
  17.       v.minLength(3, 'Veuillez entrer un nom valide avec au moins 3 caractères'),
  18.   ),
  19.   prenom: v.pipe(
  20.       v.string(),
  21.       v.minLength(2, 'Le prénom doit contenir au moins 2 caractères'),
  22.   ),
  23.   date_naissance: v.string(),
  24.   sexe: v.object({
  25.     value: v.string(),
  26.     label: v.string()
  27.   }),
  28.   nationalite: v.pipe(
  29.       v.string(),
  30.       v.minLength(3, 'Veuillez entrer une nationalité valide'),
  31.   ),
  32.   taille: v.object({
  33.     value: v.string(),
  34.     label: v.string()
  35.   }),
  36.   majeur: v.object({
  37.     value: v.string(),
  38.     label: v.string()
  39.   }),
  40.   representant_nom: v.optional(v.string()),
  41.   representant_telephone: v.optional(v.string()),
  42.   representant_lien: v.optional(v.string()),
  43.   adresse: v.pipe(
  44.       v.string(),
  45.       v.minLength(3, 'L\'adresse doit contenir au moins 3 caractères'),
  46.       v.maxLength(255, 'L\'adresse doit contenir au maximum 255 caractères')
  47.   ),
  48.   email: v.pipe(
  49.       v.string(),
  50.       v.email('Veuillez entrer une adresse email valide')
  51.   ),
  52.   adherent_telephone: v.pipe(v.string(), v.minLength(10, 'Le numéro de téléphone doit contenir au moins 10 caractères')),
  53.   adherent_email: v.pipe(
  54.       v.string(),
  55.       v.email('Veuillez entrer une adresse email valide')
  56.   ),
  57.   adherent_adresse: v.pipe(
  58.       v.string(),
  59.       v.minLength(3, 'L\'adresse doit contenir au moins 3 caractères'),
  60.       v.maxLength(255, 'L\'adresse doit contenir au maximum 255 caractères')
  61.   ),
  62.   reglement: v.object({
  63.     value: v.string(),
  64.     label: v.string()
  65.   }),
  66.   reduction: v.object({
  67.     value: v.string(),
  68.     label: v.string()
  69.   }),
  70.  
  71.  
  72. })
  73. type Schema = v.InferOutput<typeof schema>
  74.  
  75. const type_adhesion_options = [
  76.   {value: 'creation', label: 'Création'},
  77.   {value: 'renouvellement', label: 'Renouvellement'},
  78.   {value: 'mutation', label: 'Mutation'}
  79. ]
  80. const type_licence_options = [
  81.   {value: 'loisir', label: 'Loisir'},
  82.   {value: 'compétition', label: 'Compétition'},
  83.   {value: 'encadrement', label: 'Encadrement'}
  84. ]
  85. const sexe_options = [
  86.   {value: 'M', label: 'Homme'},
  87.   {value: 'F', label: 'Femme'}
  88. ]
  89. const taille_options = [
  90.   {value: 'S', label: 'S'},
  91.   {value: 'M', label: 'M'},
  92.   {value: 'L', label: 'L'},
  93.   {value: 'XL', label: 'XL'}
  94. ]
  95. const majeur_options = [
  96.   {value: 'oui', label: 'Oui'},
  97.   {value: 'non', label: 'Non'}
  98. ]
  99. const reglement_options = [
  100.   {value: 'cheque', label: 'Chèque'},
  101.   {value: 'espece', label: 'Espèce'},
  102.   {value: 'coupon_sport', label: 'Coupon sport ANCV (non dématérialisé)'},
  103.   {value: 'cheque_vacance', label: 'Chèque vacances ANCV'},
  104. ]
  105. const reduction_options = [
  106.   {value: 'aucune', label: 'Aucune'},
  107.   {value: 'caf', label: 'Bon CAF'},
  108.   {value: 'ce', label: 'Reçu CE'},
  109.   {value: 'passsport', label: 'Pass\'Sport'},
  110.   {value: 'famille', label: 'Réduction de 15€ pour le second athlète d\'une même famille'},
  111. ]
  112.  
  113. let information = reactive({
  114.   type_adhesion: '',
  115.   type_licence: '',
  116.   numero_license: '',
  117.   nom: '',
  118.   prenom: '',
  119.   date_naissance: '',
  120.   sexe: '',
  121.   nationalite: '',
  122.   taille: '',
  123.   majeur: '',
  124.   representant_nom: '',
  125.   representant_telephone: '',
  126.   representant_lien: '',
  127.   adherent_adresse: '',
  128.   adherent_email: '',
  129.   adherent_telephone: '',
  130.   reglement: '',
  131.   reduction: ''
  132.  
  133. })
  134.  
  135. async function onSubmit(event: FormSubmitEvent<Schema>) {
  136.   console.log(event.data)
  137. }
  138.  
  139. onMounted(() => {
  140.   setInterval(() => {
  141.     console.log(information)
  142.   }, 1000)
  143. })
  144. </script>
  145.  
  146. <template>
  147.   <Banner title="Nous rejoindre" :description="''">
  148.     <template #outside>
  149.       <UForm :schema="v.safeParser(schema)" :state="information" @submit="console.log('cc')">
  150.         <div class="flex flex-col items-center w-full gap-8">
  151.  
  152.           <div class="flex flex-col gap-4 max-w-screen-sm w-full">
  153.  
  154.             <div class="col-span-12">
  155.               <h2 class="text-left text-xl font-semibold">Licenses</h2>
  156.             </div>
  157.  
  158.             <UFormGroup class="col-span-6" label="Votre type d'adhésion" size="lg" name="type_adhesion">
  159.               <USelectMenu :options="type_adhesion_options" v-model="information.type_adhesion" size="lg"
  160.                           placeholder="Sélectionner une option"/>
  161.             </UFormGroup>
  162.  
  163.             <UFormGroup class="col-span-6" label="Numéro de license" size="lg"
  164.                        v-if="information.type_adhesion?.value === 'renouvellement' || information.type_adhesion?.value === 'mutation'"
  165.                        name="numero_license">
  166.               <UInput size="lg" v-model="information.numero_license"/>
  167.             </UFormGroup>
  168.  
  169.  
  170.             <UFormGroup class="col-span-6" label="Type de licence" size="lg" name="type_licence">
  171.               <USelectMenu :options="type_licence_options" v-model="information.type_licence" size="lg"
  172.                           placeholder="Sélectionner une option"/>
  173.             </UFormGroup>
  174.  
  175.  
  176.             <UFormGroup class="col-span-6" label="Nom de l'adhérent" size="lg" name="nom">
  177.               <UInput size="lg" v-model="information.nom" placeholder="Nom"/>
  178.             </UFormGroup>
  179.  
  180.             <UFormGroup class="col-span-6" label="Prénom de l'adhérent" size="lg" name="prenom">
  181.               <UInput size="lg" v-model="information.prenom" placeholder="Prénom"/>
  182.             </UFormGroup>
  183.  
  184.             <UFormGroup class="col-span-6" label="Date de naissance" size="lg" name="date_naissance">
  185.               <UInput type="date" size="lg" v-model="information.date_naissance"/>
  186.             </UFormGroup>
  187.  
  188.             <UFormGroup class="col-span-6" label="Sexe" size="lg" name="sexe">
  189.               <USelectMenu :options="sexe_options" v-model="information.sexe" size="lg"
  190.                           placeholder="Sélectionner une option"/>
  191.             </UFormGroup>
  192.  
  193.             <UFormGroup class="col-span-6" label="Nationalité" size="lg" name="nationalite">
  194.               <UInput size="lg" v-model="information.nationalite" placeholder="Nationalité"/>
  195.             </UFormGroup>
  196.  
  197.             <UFormGroup class="col-span-6" label="Taille" size="lg" name="taille">
  198.               <USelectMenu :options="taille_options" v-model="information.taille" size="lg"
  199.                           placeholder="Sélectionner une option"/>
  200.             </UFormGroup>
  201.  
  202.             <UFormGroup class="col-span-6" label="Majeur" size="lg" name="majeur">
  203.               <USelectMenu :options="majeur_options" v-model="information.majeur" size="lg"
  204.                           placeholder="Sélectionner une option"/>
  205.             </UFormGroup>
  206.  
  207.  
  208.           </div>
  209.  
  210.           <div class="flex flex-col gap-4 max-w-screen-sm w-full" v-if="information.majeur?.value === 'non'">
  211.  
  212.             <div class="col-span-12">
  213.               <h2 class="text-left text-xl font-semibold">Coordonnées du représentant légal</h2>
  214.             </div>
  215.  
  216.             <UFormGroup class="col-span-6" label="Nom" size="lg" name="representant_nom">
  217.               <UInput size="lg" v-model="information.representant_nom" placeholder="Nom"/>
  218.             </UFormGroup>
  219.  
  220.             <UFormGroup class="col-span-6" label="Téléphone" size="lg" name="representant_telephone">
  221.               <UInput size="lg" v-model="information.representant_telephone" placeholder="Téléphone"/>
  222.             </UFormGroup>
  223.  
  224.             <UFormGroup class="col-span-6" label="Lien de parenté" size="lg" name="representant_lien">
  225.               <UInput size="lg" v-model="information.representant_lien" placeholder="Lien de parenté"/>
  226.             </UFormGroup>
  227.  
  228.           </div>
  229.  
  230.           <div class="flex flex-col gap-4 max-w-screen-sm w-full">
  231.  
  232.             <div class="col-span-12">
  233.               <h2 class="text-left text-xl font-semibold">Coordonnées de l'adhérent</h2>
  234.             </div>
  235.  
  236.             <UFormGroup class="col-span-6" label="Téléphone" size="lg" name="adherent_telephone">
  237.               <UInput size="lg" v-model="information.adherent_telephone" placeholder="Téléphone"/>
  238.             </UFormGroup>
  239.  
  240.             <UFormGroup class="col-span-6" label="Adresse" size="lg" name="adherent_adresse">
  241.               <UInput size="lg" v-model="information.adherent_adresse" placeholder="Adresse"/>
  242.             </UFormGroup>
  243.  
  244.             <UFormGroup class="col-span-6" label="Adresse email" size="lg" name="adherent_email">
  245.               <UInput size="lg" v-model="information.adherent_email" placeholder="Adresse email"/>
  246.             </UFormGroup>
  247.  
  248.           </div>
  249.  
  250.           <div class="flex flex-col gap-4 max-w-screen-sm w-full">
  251.  
  252.             <div class="col-span-12">
  253.               <h2 class="text-left text-xl font-semibold">Moyen de paiement (175€)</h2>
  254.             </div>
  255.  
  256.             <UFormGroup class="col-span-6" label="Moyen de paiement" size="lg" name="reglement">
  257.               <USelectMenu :options="reglement_options" v-model="information.reglement" size="lg"
  258.                           placeholder="Sélectionner une option"/>
  259.             </UFormGroup>
  260.  
  261.             <UFormGroup class="col-span-6" label="Réduction" size="lg" name="reduction">
  262.               <USelectMenu :options="reduction_options" v-model="information.reduction" size="lg"
  263.                           placeholder="Sélectionner une option"/>
  264.             </UFormGroup>
  265.  
  266.             <UButton type="submit" class="w-fit" color="cerulean-blue">S'inscrire</UButton>
  267.  
  268.  
  269.           </div>
  270.  
  271.  
  272.         </div>
  273.  
  274.  
  275.       </UForm>
  276.     </template>
  277.   </Banner>
  278. </template>
  279.  
  280. <style scoped>
  281.  
  282. </style>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!