From 19453978beaebbd69ef2d3e73edfe839486284b7 Mon Sep 17 00:00:00 2001 From: Tykayn Date: Fri, 15 Oct 2021 10:37:38 +0200 Subject: [PATCH] put steppers in creation form --- .../administration-routing.module.ts | 6 +- .../administration/administration.module.ts | 2 - .../administration/form/form.component.html | 51 +++---- .../administration/form/form.component.scss | 38 +----- .../administration/form/form.component.ts | 8 +- .../naming/naming.component.html | 1 - .../naming/naming.component.scss | 0 .../naming/naming.component.spec.ts | 24 ---- .../administration/naming/naming.component.ts | 12 -- .../stepper/stepper.component.html | 125 ++---------------- .../stepper/stepper.component.scss | 19 +++ .../stepper/stepper.component.ts | 60 +-------- .../old-stuff/config/defaultConfigs.ts | 16 +-- src/styles/partials/_form-controls.scss | 39 +----- src/styles/partials/_forms.scss | 9 +- src/styles/variables.scss | 5 +- 16 files changed, 80 insertions(+), 335 deletions(-) delete mode 100644 src/app/features/administration/naming/naming.component.html delete mode 100644 src/app/features/administration/naming/naming.component.scss delete mode 100644 src/app/features/administration/naming/naming.component.spec.ts delete mode 100644 src/app/features/administration/naming/naming.component.ts diff --git a/src/app/features/administration/administration-routing.module.ts b/src/app/features/administration/administration-routing.module.ts index aa3fae29..8b2bf8f4 100644 --- a/src/app/features/administration/administration-routing.module.ts +++ b/src/app/features/administration/administration-routing.module.ts @@ -2,12 +2,8 @@ import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { AdministrationComponent } from './administration.component'; -import { NamingComponent } from './naming/naming.component'; -const routes: Routes = [ - { path: '', component: AdministrationComponent }, - { path: 'naming', component: NamingComponent }, -]; +const routes: Routes = [{ path: '', component: AdministrationComponent }]; @NgModule({ imports: [RouterModule.forChild(routes)], diff --git a/src/app/features/administration/administration.module.ts b/src/app/features/administration/administration.module.ts index 51b2c7a8..5a5a2e84 100644 --- a/src/app/features/administration/administration.module.ts +++ b/src/app/features/administration/administration.module.ts @@ -7,7 +7,6 @@ import { SharedModule } from '../../shared/shared.module'; import { AdministrationRoutingModule } from './administration-routing.module'; import { AdministrationComponent } from './administration.component'; import { StepperComponent } from './stepper/stepper.component'; -import { NamingComponent } from './naming/naming.component'; import { FormComponent } from './form/form.component'; import { DateValueAccessorModule } from 'angular-date-value-accessor'; import { ClassicChoicesComponent } from './form/classic-choices/classic-choices.component'; @@ -18,7 +17,6 @@ import { StepTwoComponent } from './form/step-two/step-two.component'; declarations: [ AdministrationComponent, StepperComponent, - NamingComponent, FormComponent, ClassicChoicesComponent, StepOneComponent, diff --git a/src/app/features/administration/form/form.component.html b/src/app/features/administration/form/form.component.html index 9a29badc..99a59178 100644 --- a/src/app/features/administration/form/form.component.html +++ b/src/app/features/administration/form/form.component.html @@ -2,19 +2,8 @@

{{ 'creation.title' | translate }}

-
-
-
-

- Étape {{ step_current }} / - {{ step_max }} -

-
-
-
-
-
+
@@ -46,9 +35,7 @@ mode de saisie avancée - + - - - - Url pour les participants - {{ urlPrefix }} - - - -
- -
- - - - -
- PollConfiguration du sondage - - Nombre de jours avant expiration - - - - - Les participants pourront consulter les résultats - - - Les choix possibles concerneront des dates - - - Le sondage sera protégé par un mot de passe - - - Vous recevrez un mail à chaque nouvelle participation - - - Vous recevrez un mail à chaque nouveau commentaire - - - La réponse « peut-être » sera disponible - - -
- - -
-
- - - - Done -

You are now done.

-
- - -
-
- -
- - +
+
+

+ Étape {{ step_current }} / + {{ step_max }} +

+
+
+
+
+
diff --git a/src/app/features/administration/stepper/stepper.component.scss b/src/app/features/administration/stepper/stepper.component.scss index e69de29b..4967d1b5 100644 --- a/src/app/features/administration/stepper/stepper.component.scss +++ b/src/app/features/administration/stepper/stepper.component.scss @@ -0,0 +1,19 @@ +@import '../../../../styles/variables'; + +.step-bar-container { + margin: 1em 0; + height: 0.5em; + display: inline-block; + min-width: 1px; + background: $grey-light; + width: 100%; +} +.step-bar-progress { + position: relative; + top: -0.6em; + left: 0; + height: 0.5em; + display: inline-block; + min-width: 1px; + background: $primary; +} diff --git a/src/app/features/administration/stepper/stepper.component.ts b/src/app/features/administration/stepper/stepper.component.ts index eb797594..cf7163c8 100644 --- a/src/app/features/administration/stepper/stepper.component.ts +++ b/src/app/features/administration/stepper/stepper.component.ts @@ -1,65 +1,13 @@ import { Component, Input, OnInit } from '@angular/core'; -import { FormBuilder, FormGroup, Validators } from '@angular/forms'; - -import { Poll } from '../../../core/models/poll.model'; -import { UuidService } from '../../../core/services/uuid.service'; -import { DateService } from '../../../core/services/date.service'; @Component({ selector: 'app-stepper', templateUrl: './stepper.component.html', styleUrls: ['./stepper.component.scss'], }) -export class StepperComponent implements OnInit { +export class StepperComponent { @Input() - public poll?: Poll; - - public pollFormGroup: FormGroup; - public configurationFormGroup: FormGroup; - public choicesFormGroup: FormGroup; - - public urlPrefix: string = window.location.origin + '/participation/'; - - constructor(private fb: FormBuilder, private uuidService: UuidService) {} - - ngOnInit(): void { - this.pollFormGroup = this.fb.group({ - question: [this.poll ? this.poll.title : '', [Validators.required]], - slug: [this.poll ? this.poll.slug : this.uuidService.getUUID(), [Validators.required]], - description: [this.poll ? this.poll.description : ''], - }); - - this.configurationFormGroup = this.fb.group({ - title: [this.poll ? this.poll.configuration : false, [Validators.required]], - isAboutDate: [this.poll ? this.poll.configuration.isAboutDate : false, [Validators.required]], - isProtectedByPassword: [ - this.poll ? this.poll.configuration.isProtectedByPassword : false, - [Validators.required], - ], - isOwnerNotifiedByEmailOnNewVote: [ - this.poll ? this.poll.configuration.isOwnerNotifiedByEmailOnNewVote : false, - [Validators.required], - ], - isOwnerNotifiedByEmailOnNewComment: [ - this.poll ? this.poll.configuration.isOwnerNotifiedByEmailOnNewComment : false, - [Validators.required], - ], - isMaybeAnswerAvailable: [ - this.poll ? this.poll.configuration.isMaybeAnswerAvailable : false, - [Validators.required], - ], - areResultsPublic: [this.poll ? this.poll.configuration.areResultsPublic : true, [Validators.required]], - expiracyNumberOfDays: [ - this.poll ? DateService.diffInDays(new Date(), this.poll.configuration.expires) : 60, - [Validators.required], - ], - }); - } - - public savePoll(): void { - if (this.pollFormGroup.valid && this.configurationFormGroup.valid) { - console.log('Le sondage est correctement rempli, prêt à enregistrer.'); - // TODO : save the poll - } - } + public step_current: number = 1; + @Input() + public step_max: number = 5; } diff --git a/src/app/features/old-stuff/config/defaultConfigs.ts b/src/app/features/old-stuff/config/defaultConfigs.ts index 60c9486c..01caaea1 100644 --- a/src/app/features/old-stuff/config/defaultConfigs.ts +++ b/src/app/features/old-stuff/config/defaultConfigs.ts @@ -1,10 +1,10 @@ export interface DateChoice { literal: string; - timeList: TimeSlices[]; + timeList: TimeChoice[]; date_object: Date; } -export interface TimeSlices { +export interface TimeChoice { literal: string; } @@ -15,27 +15,27 @@ export interface PollAnswer { file: string; literal: string; date_object: Date; - timeList: TimeSlices[]; + timeList: TimeChoice[]; } const currentYear = new Date().getFullYear(); const currentMonth = new Date().getMonth(); const currentDay = new Date().getDate(); -export const basicSlicesOfDay: TimeSlices[] = [{ literal: 'matin' }, { literal: 'midi' }, { literal: 'soir' }]; -export const otherSlicesOfDay: TimeSlices[] = [ +export const basicSlicesOfDay: TimeChoice[] = [{ literal: 'matin' }, { literal: 'midi' }, { literal: 'soir' }]; +export const otherSlicesOfDay: TimeChoice[] = [ { literal: 'aux aurores' }, { literal: 'au petit dej' }, { literal: 'au deuxième petit dej des hobbits' }, ]; -export const defaultTimeOfDay: TimeSlices[] = (() => { +export const defaultTimeOfDay: TimeChoice[] = (() => { return [...basicSlicesOfDay]; })(); -export const otherTimeOfDay: TimeSlices[] = (() => { +export const otherTimeOfDay: TimeChoice[] = (() => { return [...otherSlicesOfDay]; })(); -export const moreTimeOfDay: TimeSlices[] = (() => { +export const moreTimeOfDay: TimeChoice[] = (() => { return [...otherSlicesOfDay]; })(); export const defaultDates: DateChoice[] = [ diff --git a/src/styles/partials/_form-controls.scss b/src/styles/partials/_form-controls.scss index 8857d5d9..96e166b3 100644 --- a/src/styles/partials/_form-controls.scss +++ b/src/styles/partials/_form-controls.scss @@ -3,7 +3,6 @@ select, textarea { @extend .clickable; margin-bottom: 0.25rem; - border-bottom: 2px solid $primary_color; padding: 0.5rem; &:active, @@ -13,44 +12,10 @@ textarea { } } -select, -option { - -webkit-appearance: none; - -moz-appearance: none; - border-radius: 0; - background-color: transparent; - background-image: url('/assets/img/fleche_bas.svg'); - padding-right: 2.5rem; - background-repeat: no-repeat; - background-size: 9px 8px; - background-position: right 1rem center; - background-clip: border-box; - min-width: 10rem; -} - -select { - @extend .select, .input; -} - -#multi_hours select { - min-width: 300px !important; -} - -input { - @extend .input, .text-ellipsis; -} - -label { - margin-top: 0.5rem; -} - textarea { + min-height: 3em; width: 100%; - max-width: 100%; - min-height: 213px; - padding: 0.5em 1em; - margin-bottom: 1em; - border-left: 3px solid $primary_color; + display: block; } .comment { diff --git a/src/styles/partials/_forms.scss b/src/styles/partials/_forms.scss index c39585b0..6a465dee 100644 --- a/src/styles/partials/_forms.scss +++ b/src/styles/partials/_forms.scss @@ -30,9 +30,9 @@ input { input, select, textarea { + width: 100%; padding: 1rem; - border: 1px solid $secondary_color; - border-bottom: 3px solid $primary_color; + border: 1px solid $border-color; } input, @@ -71,3 +71,8 @@ li { button[type='submit'] { margin-top: 2em; } + +hr { + margin: 4em 0; + border: solid 3px $primary; +} diff --git a/src/styles/variables.scss b/src/styles/variables.scss index 9816496b..3d27c00c 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -48,8 +48,9 @@ $logo_color_2: $d-primary-intense; $legend_color: $d-info-text; $legend_color_2: $d-info; $choice_select_border_color: $d-info; -$hover-color: $warm-grey; -$grey-dark: $warm-grey; +$hover-color: $d-neutral; +$border-color: $d-neutral; +$grey-dark: $d-primary; $grey-light: $beige-light; $clicked-color: $d-primary; $mini-button-color: $d-primary-intense;