From 0932f110f725dd83bbd8d0858d27e41d3e9e8dda Mon Sep 17 00:00:00 2001 From: Tykayn Date: Wed, 27 Oct 2021 12:21:25 +0200 Subject: [PATCH] display primeng calendar multiselector --- src/app/core/services/poll.service.ts | 8 + .../administration/administration.module.ts | 4 + .../form/date-views/date-views.component.html | 76 +++++++ .../form/date-views/date-views.component.scss | 0 .../date-views/date-views.component.spec.ts | 24 ++ .../form/date-views/date-views.component.ts | 13 ++ .../form/step-four/step-four.component.html | 212 ++++++++++-------- .../form/step-four/step-four.component.ts | 3 +- .../form/step-three/step-three.component.html | 92 ++------ .../form/step-three/step-three.component.scss | 9 + src/assets/i18n/FR.json | 2 +- 11 files changed, 272 insertions(+), 171 deletions(-) create mode 100644 src/app/features/administration/form/date-views/date-views.component.html create mode 100644 src/app/features/administration/form/date-views/date-views.component.scss create mode 100644 src/app/features/administration/form/date-views/date-views.component.spec.ts create mode 100644 src/app/features/administration/form/date-views/date-views.component.ts diff --git a/src/app/core/services/poll.service.ts b/src/app/core/services/poll.service.ts index 0489ca02..43649aa0 100644 --- a/src/app/core/services/poll.service.ts +++ b/src/app/core/services/poll.service.ts @@ -40,6 +40,7 @@ export class PollService implements Resolve { public showDateInterval = false; public allowSeveralHours = false; public richTextMode = false; + public calendar: any; constructor( private http: HttpClient, @@ -56,6 +57,8 @@ export class PollService implements Resolve { this.createFormGroup(); if (environment.poll.autoFillDemo) { this.setDemoValues(); + } else { + this.calendar = [new Date()]; } } @@ -67,6 +70,11 @@ export class PollService implements Resolve { this.addChoice('raisin'); this.addChoice('abricot'); + this.calendar = [ + this.dateUtilities.addDaysToDate(1, new Date()), + this.dateUtilities.addDaysToDate(2, new Date()), + this.dateUtilities.addDaysToDate(3, new Date()), + ]; this.form.patchValue({ title: 'mon titre', description: 'répondez SVP <3 ! *-* ', diff --git a/src/app/features/administration/administration.module.ts b/src/app/features/administration/administration.module.ts index da8cb01b..f164885a 100644 --- a/src/app/features/administration/administration.module.ts +++ b/src/app/features/administration/administration.module.ts @@ -16,6 +16,8 @@ import { StepThreeComponent } from './form/step-three/step-three.component'; import { StepFourComponent } from './form/step-four/step-four.component'; import { StepFiveComponent } from './form/step-five/step-five.component'; import { DevMenuComponent } from './dev-menu/dev-menu.component'; +import { CalendarModule } from 'primeng/calendar'; +import { DateViewsComponent } from './form/date-views/date-views.component'; @NgModule({ declarations: [ @@ -29,10 +31,12 @@ import { DevMenuComponent } from './dev-menu/dev-menu.component'; StepFourComponent, StepFiveComponent, DevMenuComponent, + DateViewsComponent, ], imports: [ AdministrationRoutingModule, CommonModule, + CalendarModule, ReactiveFormsModule, SharedModule, TranslateModule.forChild({ extend: true }), diff --git a/src/app/features/administration/form/date-views/date-views.component.html b/src/app/features/administration/form/date-views/date-views.component.html new file mode 100644 index 00000000..19d684fb --- /dev/null +++ b/src/app/features/administration/form/date-views/date-views.component.html @@ -0,0 +1,76 @@ + +
+ + + +
+
+ + +
+
+
+ +
+

{{ 'dates.add_interval' | translate }}

+
+
+ {{ 'dates.interval_propose' | translate }} +
+
+ + +
+
+
+
+ {{ 'dates.interval_span' | translate }} +
+
+ + +
+
+ +
diff --git a/src/app/features/administration/form/date-views/date-views.component.scss b/src/app/features/administration/form/date-views/date-views.component.scss new file mode 100644 index 00000000..e69de29b diff --git a/src/app/features/administration/form/date-views/date-views.component.spec.ts b/src/app/features/administration/form/date-views/date-views.component.spec.ts new file mode 100644 index 00000000..2016c18a --- /dev/null +++ b/src/app/features/administration/form/date-views/date-views.component.spec.ts @@ -0,0 +1,24 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { DateViewsComponent } from './date-views.component'; + +describe('DateViewsComponent', () => { + let component: DateViewsComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [DateViewsComponent], + }).compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(DateViewsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/features/administration/form/date-views/date-views.component.ts b/src/app/features/administration/form/date-views/date-views.component.ts new file mode 100644 index 00000000..f7199cd8 --- /dev/null +++ b/src/app/features/administration/form/date-views/date-views.component.ts @@ -0,0 +1,13 @@ +import { Component, OnInit } from '@angular/core'; +import { PollService } from '../../../../core/services/poll.service'; + +@Component({ + selector: 'app-date-views', + templateUrl: './date-views.component.html', + styleUrls: ['./date-views.component.scss'], +}) +export class DateViewsComponent implements OnInit { + constructor(public pollService: PollService) {} + + ngOnInit(): void {} +} diff --git a/src/app/features/administration/form/step-four/step-four.component.html b/src/app/features/administration/form/step-four/step-four.component.html index 3ec32b0f..849c5996 100644 --- a/src/app/features/administration/form/step-four/step-four.component.html +++ b/src/app/features/administration/form/step-four/step-four.component.html @@ -1,99 +1,127 @@ - +
+
+
+ -
- - - - -
+
+ + + + +
-
- -
-

{{ 'creation.advanced' | translate }}

+
+ +
+

{{ 'creation.advanced' | translate }}

-
+
- -
- {{ urlPrefix }} {{ form.controls.custom_url.value }} - - + +
+ {{ urlPrefix }} {{ pollService.form.controls.custom_url.value }} + + - - -
-
- Nombre de jours avant expiration - - + +
+
+ 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 + +
+
+ +
+
+
+
-
- - 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 - - - +
+ + +
+
+
diff --git a/src/app/features/administration/form/step-four/step-four.component.ts b/src/app/features/administration/form/step-four/step-four.component.ts index 92ec005b..852f079e 100644 --- a/src/app/features/administration/form/step-four/step-four.component.ts +++ b/src/app/features/administration/form/step-four/step-four.component.ts @@ -1,4 +1,5 @@ import { Component, Input, OnInit } from '@angular/core'; +import { PollService } from '../../../../core/services/poll.service'; @Component({ selector: 'app-step-four', @@ -12,7 +13,7 @@ export class StepFourComponent implements OnInit { step_max: any; @Input() form: any; - constructor() {} + constructor(public pollService: PollService) {} ngOnInit(): void {} } diff --git a/src/app/features/administration/form/step-three/step-three.component.html b/src/app/features/administration/form/step-three/step-three.component.html index e2e6f07b..a60b02b3 100644 --- a/src/app/features/administration/form/step-three/step-three.component.html +++ b/src/app/features/administration/form/step-three/step-three.component.html @@ -62,89 +62,27 @@
- {{ pollService.dateList.length }} + {{ pollService.calendar.length }} {{ 'dates.count_dates' | translate }} - -
- - - -
-
- - -
-
+
+
-
- -
-

{{ 'dates.add_interval' | translate }}

-
-
- {{ 'dates.interval_propose' | translate }} -
-
- - -
-
-
-
- {{ 'dates.interval_span' | translate }} -
-
- - -
-
- -
+ + + +
diff --git a/src/app/features/administration/form/step-three/step-three.component.scss b/src/app/features/administration/form/step-three/step-three.component.scss index e69de29b..715893f8 100644 --- a/src/app/features/administration/form/step-three/step-three.component.scss +++ b/src/app/features/administration/form/step-three/step-three.component.scss @@ -0,0 +1,9 @@ +@import '../../../../../styles/variables'; + +.ui-datepicker table td.ui-datepicker-today > a.ui-state-active, +.ui-datepicker table td.ui-datepicker-today > span.ui-state-active { + background-color: $primary-color !important; +} +.calendar { + margin-top: 1em; +} diff --git a/src/assets/i18n/FR.json b/src/assets/i18n/FR.json index 650df2d2..cec21961 100644 --- a/src/assets/i18n/FR.json +++ b/src/assets/i18n/FR.json @@ -27,7 +27,7 @@ }, "creation": { "title": "Créer un sondage", - "want": "Je veux créer un sondage", + "want": "Choisissez le type de sondage", "advanced": "Options avancées", "kind": { "classic": "Textes",