Skip to content

Commit

Permalink
Créé un composant dédié aux sections destinées au contenu personnalis…
Browse files Browse the repository at this point in the history 
…é pour l'utilisateur
  • Loading branch information
@ShallowRed
ShallowRed committed Mar 4, 2025
1 parent 52127b0 commit d1f3606
Show file tree
Hide file tree
Showing 3 changed files with 95 additions and 104 deletions.
156 changes: 77 additions & 79 deletions client/components/form/Survey.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,90 +75,88 @@ function submitForm () {

<template>
<!-- Progress indicator -->
<div class="fr-col-12 fr-col-offset-md-1 fr-col-md-10 fr-col-offset-lg-2 fr-col-lg-8">
<h1 class="fr-h3">
Votre simulation « {{ surveySchema?.title }} »
</h1>
<div class="fr-stepper">
<h2 class="fr-stepper__title">
{{ currentStep?.title }}
<span class="fr-stepper__state">
Étape {{ currentStepIndex }} sur {{ totalCategoriesNumber }}</span>
<h1 class="fr-h3">
Votre simulation « {{ surveySchema?.title }} »
</h1>
<div class="fr-stepper">
<h2 class="fr-stepper__title">
{{ currentStep?.title }}
<span class="fr-stepper__state">
Étape {{ currentStepIndex }} sur {{ totalCategoriesNumber }}</span>
</h2>
<div
class="fr-stepper__steps"
:data-fr-current-step="currentStepIndex"
:data-fr-steps="totalCategoriesNumber"
/>
<p class="fr-stepper__details">
<span class="fr-text--bold">Étape suivante :</span>
{{ nextCategory?.title }}
</p>
</div>

<div
v-if="!isLoading && surveySchema && currentQuestion"
class="simulator-form-container"
>
<!-- Current Question -->
<div class="fr-form-group">
<h2 class="fr-h5">
{{ currentQuestion?.title }}
</h2>
<div
class="fr-stepper__steps"
:data-fr-current-step="currentStepIndex"
:data-fr-steps="totalCategoriesNumber"
/>
<p class="fr-stepper__details">
<span class="fr-text--bold">Étape suivante :</span>
{{ nextCategory?.title }}
</p>
</div>
<p>{{ currentQuestion?.description }}</p>

<!-- Question component based on type -->
<template v-if="currentQuestion">
<RadioButtonQuestion
v-if="currentQuestion.type === 'radio'"
:question="currentQuestion"
:model-value="answers[currentQuestion.id]"
@update:model-value="value => currentQuestion && handleQuestionUpdate(currentQuestion.id, value)"
/>

<div
v-if="!isLoading && surveySchema && currentQuestion"
class="simulator-form-container"
>
<!-- Current Question -->
<div class="fr-form-group">
<h2 class="fr-h5">
{{ currentQuestion?.title }}
</h2>
<p>{{ currentQuestion?.description }}</p>

<!-- Question component based on type -->
<template v-if="currentQuestion">
<RadioButtonQuestion
v-if="currentQuestion.type === 'radio'"
:question="currentQuestion"
:model-value="answers[currentQuestion.id]"
@update:model-value="value => currentQuestion && handleQuestionUpdate(currentQuestion.id, value)"
/>

<MultiSelectQuestion
v-else-if="currentQuestion.type === 'checkbox'"
:question="currentQuestion"
:model-value="answers[currentQuestion.id]"
@update:model-value="value => currentQuestion && handleQuestionUpdate(currentQuestion.id, value)"
/>

<NumberQuestion
v-else-if="currentQuestion.type === 'number'"
:question="currentQuestion"
:model-value="answers[currentQuestion.id]"
@update:model-value="value => currentQuestion && handleQuestionUpdate(currentQuestion.id, value)"
/>

<DateQuestion
v-else-if="currentQuestion.type === 'date'"
:question="currentQuestion"
:model-value="answers[currentQuestion.id]"
@update:model-value="value => currentQuestion && handleQuestionUpdate(currentQuestion.id, value)"
/>
</template>
</div>

<!-- Navigation buttons -->
<div class="fr-btns-group fr-btns-group--inline-reverse fr-mt-5w">
<DsfrButton
:label="isLastQuestion ? 'Terminer' : 'Suivant'"
icon="ri-arrow-right-line"
icon-right
@click="handleNext"
<MultiSelectQuestion
v-else-if="currentQuestion.type === 'checkbox'"
:question="currentQuestion"
:model-value="answers[currentQuestion.id]"
@update:model-value="value => currentQuestion && handleQuestionUpdate(currentQuestion.id, value)"
/>
<DsfrButton
label="Précédent"
secondary
@click="handlePrevious"

<NumberQuestion
v-else-if="currentQuestion.type === 'number'"
:question="currentQuestion"
:model-value="answers[currentQuestion.id]"
@update:model-value="value => currentQuestion && handleQuestionUpdate(currentQuestion.id, value)"
/>
</div>

<DateQuestion
v-else-if="currentQuestion.type === 'date'"
:question="currentQuestion"
:model-value="answers[currentQuestion.id]"
@update:model-value="value => currentQuestion && handleQuestionUpdate(currentQuestion.id, value)"
/>
</template>
</div>
<div
v-else
class="fr-py-5w fr-text--center"
>
<p>{{ isLoading ? 'Chargement du formulaire...' : 'Erreur lors du chargement du formulaire' }}</p>

<!-- Navigation buttons -->
<div class="fr-btns-group fr-btns-group--inline-reverse fr-mt-5w">
<DsfrButton
:label="isLastQuestion ? 'Terminer' : 'Suivant'"
icon="ri-arrow-right-line"
icon-right
@click="handleNext"
/>
<DsfrButton
label="Précédent"
secondary
@click="handlePrevious"
/>
</div>
</div>
<div
v-else
class="fr-py-5w fr-text--center"
>
<p>{{ isLoading ? 'Chargement du formulaire...' : 'Erreur lors du chargement du formulaire' }}</p>
</div>
</template>
15 changes: 15 additions & 0 deletions client/components/layout/UserActionSectionRow.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
<template>
<BrandBackgroundContainer
textured
blue
subtle
>
<SectionContainer type="page-footer">
<div class="fr-grid-row fr-grid-row--gutters">
<div class="fr-col-12 fr-col-offset-md-1 fr-col-md-10 fr-col-offset-lg-2 fr-col-lg-8">
<slot />
</div>
</div>
</SectionContainer>
</BrandBackgroundContainer>
</template>
28 changes: 3 additions & 25 deletions client/pages/simulateurs/[simulateur_id].vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,29 +34,7 @@ onMounted(() => {

<template>
<SimulationHeaderSection :simulateur="simulateur" />
<BrandBackgroundContainer
textured
blue
subtle
>
<SectionContainer type="page-footer">
<div class="fr-grid-row fr-grid-row--gutters">
<Survey :simulateur-id="simulateurId" />
</div>
</SectionContainer>
</BrandBackgroundContainer>
<UserActionSectionRow>
<Survey :simulateur-id="simulateurId" />
</UserActionSectionRow>
</template>

<style scoped lang="scss">
.title-container {
display: flex;
align-items: center;
}
.simulator-form-container {
background-color: white;
padding: 2rem;
border-radius: 4px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
</style>

0 comments on commit d1f3606

Please sign in to comment.