From 1a410f120bc051e4b086ca47e6a4351f55272dd4 Mon Sep 17 00:00:00 2001 From: Tykayn Date: Sun, 7 Nov 2021 14:52:49 +0100 Subject: [PATCH] add libs and steps components --- package.json | 5 +- src/app/core/services/poll.service.ts | 13 +- .../administration-routing.module.ts | 22 ++- .../administration/administration.module.ts | 13 ++ .../administration/form/form.component.html | 111 ++------------ .../steps/step-five/step-five.component.html | 92 ++++++++++++ .../steps/step-five/step-five.component.scss | 0 .../step-five/step-five.component.spec.ts | 24 ++++ .../steps/step-five/step-five.component.ts | 22 +++ .../steps/step-four/step-four.component.html | 127 ++++++++++++++++ .../steps/step-four/step-four.component.scss | 0 .../step-four/step-four.component.spec.ts | 24 ++++ .../steps/step-four/step-four.component.ts | 19 +++ .../steps/step-one/step-one.component.html | 91 ++++++++++++ .../steps/step-one/step-one.component.scss | 0 .../steps/step-one/step-one.component.spec.ts | 24 ++++ .../form/steps/step-one/step-one.component.ts | 19 +++ .../step-three/step-three.component.html | 98 +++++++++++++ .../step-three/step-three.component.scss | 9 ++ .../step-three/step-three.component.spec.ts | 24 ++++ .../steps/step-three/step-three.component.ts | 23 +++ .../steps/step-two/step-two.component.html | 43 ++++++ .../steps/step-two/step-two.component.scss | 3 + .../steps/step-two/step-two.component.spec.ts | 24 ++++ .../form/steps/step-two/step-two.component.ts | 61 ++++++++ .../stepper/stepper.component.html | 125 ++-------------- .../stepper/stepper.component.scss | 19 +++ .../stepper/stepper.component.ts | 50 +------ src/styles/variables.scss | 136 ++++++------------ yarn.lock | 19 +++ 30 files changed, 886 insertions(+), 354 deletions(-) create mode 100644 src/app/features/administration/form/steps/step-five/step-five.component.html create mode 100644 src/app/features/administration/form/steps/step-five/step-five.component.scss create mode 100644 src/app/features/administration/form/steps/step-five/step-five.component.spec.ts create mode 100644 src/app/features/administration/form/steps/step-five/step-five.component.ts create mode 100644 src/app/features/administration/form/steps/step-four/step-four.component.html create mode 100644 src/app/features/administration/form/steps/step-four/step-four.component.scss create mode 100644 src/app/features/administration/form/steps/step-four/step-four.component.spec.ts create mode 100644 src/app/features/administration/form/steps/step-four/step-four.component.ts create mode 100644 src/app/features/administration/form/steps/step-one/step-one.component.html create mode 100644 src/app/features/administration/form/steps/step-one/step-one.component.scss create mode 100644 src/app/features/administration/form/steps/step-one/step-one.component.spec.ts create mode 100644 src/app/features/administration/form/steps/step-one/step-one.component.ts create mode 100644 src/app/features/administration/form/steps/step-three/step-three.component.html create mode 100644 src/app/features/administration/form/steps/step-three/step-three.component.scss create mode 100644 src/app/features/administration/form/steps/step-three/step-three.component.spec.ts create mode 100644 src/app/features/administration/form/steps/step-three/step-three.component.ts create mode 100644 src/app/features/administration/form/steps/step-two/step-two.component.html create mode 100644 src/app/features/administration/form/steps/step-two/step-two.component.scss create mode 100644 src/app/features/administration/form/steps/step-two/step-two.component.spec.ts create mode 100644 src/app/features/administration/form/steps/step-two/step-two.component.ts diff --git a/package.json b/package.json index 324a7cdd..d5c23125 100644 --- a/package.json +++ b/package.json @@ -45,10 +45,12 @@ "@fullcalendar/core": "^4.4.0", "@ngx-translate/core": "^12.1.2", "@ngx-translate/http-loader": "^5.0.0", + "angular-date-value-accessor": "^1.0.2", "axios": "^0.19.2", "bulma": "^0.9.0", "bulma-switch": "^2.0.0", "chart.js": "^2.9.3", + "crypto": "^1.0.1", "crypto-js": "^4.0.0", "fork-awesome": "^1.1.7", "ng-keyboard-shortcuts": "^10.1.17", @@ -57,6 +59,7 @@ "ngx-markdown": "^9.0.0", "ngx-webstorage": "^5.0.0", "node-forge": "^0.10.0", + "primeng": "^11.0.0", "quill": "^1.3.7", "rxjs": "^6.5.5", "rxjs-compat": "^6.5.5", @@ -75,9 +78,9 @@ "@babel/preset-env": "^7.9.5", "@babel/preset-typescript": "^7.9.0", "@compodoc/compodoc": "^1.1.11", + "@types/crypto-js": "^4.0.0", "@types/jest": "^26.0.0", "@types/node": "^14.0.1", - "@types/crypto-js": "^4.0.0", "@typescript-eslint/eslint-plugin": "^3.0.0", "@typescript-eslint/parser": "^3.0.0", "babel-jest": "^26.0.0", diff --git a/src/app/core/services/poll.service.ts b/src/app/core/services/poll.service.ts index 5114b7c8..97e8abb6 100644 --- a/src/app/core/services/poll.service.ts +++ b/src/app/core/services/poll.service.ts @@ -17,6 +17,7 @@ import { Title } from '@angular/platform-browser'; import { DateUtilitiesService } from './date.utilities.service'; import { Stack } from '../models/stack.model'; import { Vote } from '../models/vote.model'; +import { FormGroup } from '@angular/forms'; @Injectable({ providedIn: 'root', @@ -25,6 +26,16 @@ export class PollService implements Resolve { _poll: BehaviorSubject = new BehaviorSubject(undefined); public readonly poll: Observable = this._poll.asObservable(); public pass_hash: string; + public calendar: Date[] = []; + public form: FormGroup; + public startDateInterval: string; + public endDateInterval: string; + public intervalDays: any; + public intervalDaysDefault = 7; + public previousRouteName: string = '/administration'; + public nextRouteName: string = '/administration/step/2'; + public step_current: number = 1; + public step_max: number = 5; constructor( private http: HttpClient, @@ -262,7 +273,7 @@ export class PollService implements Resolve { if (this._poll && this._poll.getValue) { const polltemp = this._poll.getValue(); if (polltemp) { - url = `${environment.frontDomain}#/poll/${polltemp.custom_url}/consultation`; + url = `${environment.api.baseHref}#/poll/${polltemp.custom_url}/consultation`; } } // TODO handle pass access diff --git a/src/app/features/administration/administration-routing.module.ts b/src/app/features/administration/administration-routing.module.ts index 9fad9e8b..05b6a355 100644 --- a/src/app/features/administration/administration-routing.module.ts +++ b/src/app/features/administration/administration-routing.module.ts @@ -2,11 +2,27 @@ import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { AdministrationComponent } from './administration.component'; -import { NamingComponent } from './naming/naming.component'; +import { StepTwoComponent } from './form/steps/step-two/step-two.component'; +import { StepThreeComponent } from './form/steps/step-three/step-three.component'; +import { StepFourComponent } from './form/steps/step-four/step-four.component'; +import { StepFiveComponent } from './form/steps/step-five/step-five.component'; +import { StepOneComponent } from './form/steps/step-one/step-one.component'; const routes: Routes = [ - { path: '', component: AdministrationComponent, data: { animation: 'AdminPage' } }, - { path: 'naming', component: NamingComponent }, + { + path: '', + component: AdministrationComponent, + }, + { + path: 'step', + children: [ + { path: '1', component: StepOneComponent }, + { path: '2', component: StepTwoComponent }, + { path: '3', component: StepThreeComponent }, + { path: '4', component: StepFourComponent }, + { path: '5', component: StepFiveComponent }, + ], + }, ]; @NgModule({ diff --git a/src/app/features/administration/administration.module.ts b/src/app/features/administration/administration.module.ts index 8d906d69..b0faa2a9 100644 --- a/src/app/features/administration/administration.module.ts +++ b/src/app/features/administration/administration.module.ts @@ -9,6 +9,12 @@ import { AdministrationComponent } from './administration.component'; import { StepperComponent } from './stepper/stepper.component'; import { NamingComponent } from './naming/naming.component'; import { FormComponent } from './form/form.component'; +import { StepOneComponent } from './form/steps/step-one/step-one.component'; +import { StepTwoComponent } from './form/steps/step-two/step-two.component'; +import { StepThreeComponent } from './form/steps/step-three/step-three.component'; +import { StepFourComponent } from './form/steps/step-four/step-four.component'; +import { StepFiveComponent } from './form/steps/step-five/step-five.component'; +import { CalendarModule } from 'primeng/calendar'; import { SuccessComponent } from './success/success.component'; import { DateSelectComponent } from './form/date-select/date-select.component'; import { TextSelectComponent } from './form/text-select/text-select.component'; @@ -34,6 +40,12 @@ import { TimeListComponent } from './form/date/list/time/time-list.component'; KindSelectComponent, BaseConfigComponent, AdvancedConfigComponent, + StepOneComponent, + StepTwoComponent, + StepThreeComponent, + StepFourComponent, + StepFiveComponent, + SuccessComponent, IntervalComponent, DayListComponent, PickerComponent, @@ -42,6 +54,7 @@ import { TimeListComponent } from './form/date/list/time/time-list.component'; imports: [ AdministrationRoutingModule, CommonModule, + CalendarModule, ReactiveFormsModule, SharedModule, FormsModule, diff --git a/src/app/features/administration/form/form.component.html b/src/app/features/administration/form/form.component.html index a9f584b7..820437ed 100644 --- a/src/app/features/administration/form/form.component.html +++ b/src/app/features/administration/form/form.component.html @@ -1,101 +1,14 @@ -
-
-
-
-
-

- {{ 'creation.title' | translate }} -

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

+ {{ 'creation.title' | translate }} +

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

Debug data

- 
-				form values :
-					{{ form.value | json }}
-
- 
-				poll initial values :
-					{{ poll | json }}
-
-
-
-
-
+ +
diff --git a/src/app/features/administration/form/steps/step-five/step-five.component.html b/src/app/features/administration/form/steps/step-five/step-five.component.html new file mode 100644 index 00000000..daa5d9bd --- /dev/null +++ b/src/app/features/administration/form/steps/step-five/step-five.component.html @@ -0,0 +1,92 @@ + +
+

+ Félicitations, votre sondage " + {{ pollService.form.value.title }} " est créé +

+ Un récapitulatif par email vous a été envoyé. Partagez-le au monde avec ce lien: Administrez-le avec cet autre lien: + +
+ +

+ {{ 'resume.title' | translate }} +

+
+

{{ 'resume.admins' | translate }}

+

+ Votre sondage « + + {{ pollService.form.value.title }} + + » a bien été créé ! +

+

+ Voici les liens d’accès au sondage, conservez-les soigneusement ! (Si vous les perdez vous pourrez toujours + les recevoir par email) +

+ +

+ Pour accéder au sondage et à tous ses paramètres : + {{ pollService.form.value.urlAdmin }} +

+ + + Voir le sondage coté administrateur·ice + +

+ Note : Le sondage sera supprimé {{ pollService.form.value.deletionDateAfterLastModification }} jours après + la date de sa dernière modification. +

+
+
+

{{ 'resume.users' | translate }}

+

+ Pour accéder au sondage : + {{ pollService.form.value.urlPublic }} +

+ + + Voir le sondage + +
+
+

{{ 'resume.links_mail' | translate }}

+ + Voir le sondage + +
+
+
+
+
+ +
+
+ +
+ image WIP + + + + +
+ {{ poll.custom_url }} +
+
+ le formulaire est invalide + 
  {{ form.errors | json }}
+
+
diff --git a/src/app/features/administration/form/steps/step-five/step-five.component.scss b/src/app/features/administration/form/steps/step-five/step-five.component.scss new file mode 100644 index 00000000..e69de29b diff --git a/src/app/features/administration/form/steps/step-five/step-five.component.spec.ts b/src/app/features/administration/form/steps/step-five/step-five.component.spec.ts new file mode 100644 index 00000000..19eb8e0c --- /dev/null +++ b/src/app/features/administration/form/steps/step-five/step-five.component.spec.ts @@ -0,0 +1,24 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { StepFiveComponent } from './step-five.component'; + +describe('StepFiveComponent', () => { + let component: StepFiveComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [StepFiveComponent], + }).compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(StepFiveComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/features/administration/form/steps/step-five/step-five.component.ts b/src/app/features/administration/form/steps/step-five/step-five.component.ts new file mode 100644 index 00000000..cf46cab1 --- /dev/null +++ b/src/app/features/administration/form/steps/step-five/step-five.component.ts @@ -0,0 +1,22 @@ +import { Component, Input, OnInit } from '@angular/core'; +import { FormGroup } from '@angular/forms'; +import { PollService } from '../../../../../core/services/poll.service'; + +@Component({ + selector: 'app-step-five', + templateUrl: './step-five.component.html', + styleUrls: ['./step-five.component.scss'], +}) +export class StepFiveComponent implements OnInit { + @Input() step_max: any; + @Input() public form: FormGroup; + poll: any; + constructor(public pollService: PollService) {} + ngOnInit(): void {} + + askInitFormDefault() {} + + createPoll() {} + + automaticSlug() {} +} diff --git a/src/app/features/administration/form/steps/step-four/step-four.component.html b/src/app/features/administration/form/steps/step-four/step-four.component.html new file mode 100644 index 00000000..849c5996 --- /dev/null +++ b/src/app/features/administration/form/steps/step-four/step-four.component.html @@ -0,0 +1,127 @@ +
+
+
+ + +
+ + + + +
+ +
+ +
+

{{ 'creation.advanced' | translate }}

+ +
+ + +
+ {{ urlPrefix }} {{ pollService.form.controls.custom_url.value }} + + + + + +
+
+ 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 + +
+
+
+
+
+
+ +
+
+ + +
+
+
diff --git a/src/app/features/administration/form/steps/step-four/step-four.component.scss b/src/app/features/administration/form/steps/step-four/step-four.component.scss new file mode 100644 index 00000000..e69de29b diff --git a/src/app/features/administration/form/steps/step-four/step-four.component.spec.ts b/src/app/features/administration/form/steps/step-four/step-four.component.spec.ts new file mode 100644 index 00000000..a86bd20d --- /dev/null +++ b/src/app/features/administration/form/steps/step-four/step-four.component.spec.ts @@ -0,0 +1,24 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { StepFourComponent } from './step-four.component'; + +describe('StepFourComponent', () => { + let component: StepFourComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [StepFourComponent], + }).compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(StepFourComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/features/administration/form/steps/step-four/step-four.component.ts b/src/app/features/administration/form/steps/step-four/step-four.component.ts new file mode 100644 index 00000000..423e67b4 --- /dev/null +++ b/src/app/features/administration/form/steps/step-four/step-four.component.ts @@ -0,0 +1,19 @@ +import { Component, Input, OnInit } from '@angular/core'; +import { PollService } from '../../../../../core/services/poll.service'; + +@Component({ + selector: 'app-step-four', + templateUrl: './step-four.component.html', + styleUrls: ['./step-four.component.scss'], +}) +export class StepFourComponent implements OnInit { + urlPrefix: any; + advancedDisplayEnabled: any; + @Input() + step_max: any; + @Input() + form: any; + constructor(public pollService: PollService) {} + + ngOnInit(): void {} +} diff --git a/src/app/features/administration/form/steps/step-one/step-one.component.html b/src/app/features/administration/form/steps/step-one/step-one.component.html new file mode 100644 index 00000000..c88d7ea2 --- /dev/null +++ b/src/app/features/administration/form/steps/step-one/step-one.component.html @@ -0,0 +1,91 @@ +
+
+ +
+

+ {{ 'creation.choose_title' | translate }} +

+
+
+ + +
+ + +
+ +
+
+
+
+
+
+ +
+ + + +
+
+ richTextMode activé +
+ +
+ 300 caractères maximum +
+
+
+ +
+
+
+ slug: {{ pollService.form.value.custom_url }} +
+
+
+
+ + +
+
+
diff --git a/src/app/features/administration/form/steps/step-one/step-one.component.scss b/src/app/features/administration/form/steps/step-one/step-one.component.scss new file mode 100644 index 00000000..e69de29b diff --git a/src/app/features/administration/form/steps/step-one/step-one.component.spec.ts b/src/app/features/administration/form/steps/step-one/step-one.component.spec.ts new file mode 100644 index 00000000..2443e97c --- /dev/null +++ b/src/app/features/administration/form/steps/step-one/step-one.component.spec.ts @@ -0,0 +1,24 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { StepOneComponent } from './step-one.component'; + +describe('StepOneComponent', () => { + let component: StepOneComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [StepOneComponent], + }).compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(StepOneComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/features/administration/form/steps/step-one/step-one.component.ts b/src/app/features/administration/form/steps/step-one/step-one.component.ts new file mode 100644 index 00000000..f013b61b --- /dev/null +++ b/src/app/features/administration/form/steps/step-one/step-one.component.ts @@ -0,0 +1,19 @@ +import { Component, Input, OnInit } from '@angular/core'; +import { FormGroup } from '@angular/forms'; +import { PollService } from '../../../../../core/services/poll.service'; + +@Component({ + selector: 'app-step-one', + templateUrl: './step-one.component.html', + styleUrls: ['./step-one.component.scss'], +}) +export class StepOneComponent implements OnInit { + constructor(public pollService: PollService) {} + + @Input() + step_max: any; + @Input() + form: FormGroup; + + ngOnInit(): void {} +} diff --git a/src/app/features/administration/form/steps/step-three/step-three.component.html b/src/app/features/administration/form/steps/step-three/step-three.component.html new file mode 100644 index 00000000..2dfaa6c4 --- /dev/null +++ b/src/app/features/administration/form/steps/step-three/step-three.component.html @@ -0,0 +1,98 @@ +
+ + + +
+
+ + {{ pollService.timeList.length }} + + + {{ 'dates.count_time' | translate }} + (pour chaque jour) + +
+
+ + + +
+ +
+
+
+ + + +
+
+
+
+ + {{ pollService.calendar.length }} + + + {{ 'dates.count_dates' | translate }} + +
+ +
+ + + +
+
+
+
+ +
+
+ + +
+
diff --git a/src/app/features/administration/form/steps/step-three/step-three.component.scss b/src/app/features/administration/form/steps/step-three/step-three.component.scss new file mode 100644 index 00000000..b35d40a1 --- /dev/null +++ b/src/app/features/administration/form/steps/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/app/features/administration/form/steps/step-three/step-three.component.spec.ts b/src/app/features/administration/form/steps/step-three/step-three.component.spec.ts new file mode 100644 index 00000000..c7d2c651 --- /dev/null +++ b/src/app/features/administration/form/steps/step-three/step-three.component.spec.ts @@ -0,0 +1,24 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { StepThreeComponent } from './step-three.component'; + +describe('StepThreeComponent', () => { + let component: StepThreeComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [StepThreeComponent], + }).compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(StepThreeComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/features/administration/form/steps/step-three/step-three.component.ts b/src/app/features/administration/form/steps/step-three/step-three.component.ts new file mode 100644 index 00000000..621b2737 --- /dev/null +++ b/src/app/features/administration/form/steps/step-three/step-three.component.ts @@ -0,0 +1,23 @@ +import { Component, Input, OnInit } from '@angular/core'; +import { PollService } from '../../../../../core/services/poll.service'; +import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop'; + +@Component({ + selector: 'app-step-three', + templateUrl: './step-three.component.html', + styleUrls: ['./step-three.component.scss'], +}) +export class StepThreeComponent implements OnInit { + @Input() + step_max: any; + @Input() + form: any; + + constructor(public pollService: PollService) {} + + ngOnInit(): void {} + + drop(event: CdkDragDrop) { + // moveItemInArray(this.pollService.choices, event.previousIndex, event.currentIndex); + } +} diff --git a/src/app/features/administration/form/steps/step-two/step-two.component.html b/src/app/features/administration/form/steps/step-two/step-two.component.html new file mode 100644 index 00000000..4ffd4b05 --- /dev/null +++ b/src/app/features/administration/form/steps/step-two/step-two.component.html @@ -0,0 +1,43 @@ +
+
+ +

+ {{ 'creation.want' | translate }} +

+
+
+ +
+
+ +
+
+
+
+
+ +
+
+ + +
+
+
diff --git a/src/app/features/administration/form/steps/step-two/step-two.component.scss b/src/app/features/administration/form/steps/step-two/step-two.component.scss new file mode 100644 index 00000000..182a819e --- /dev/null +++ b/src/app/features/administration/form/steps/step-two/step-two.component.scss @@ -0,0 +1,3 @@ +.fa { + margin-right: 1em; +} diff --git a/src/app/features/administration/form/steps/step-two/step-two.component.spec.ts b/src/app/features/administration/form/steps/step-two/step-two.component.spec.ts new file mode 100644 index 00000000..e5e2b6f2 --- /dev/null +++ b/src/app/features/administration/form/steps/step-two/step-two.component.spec.ts @@ -0,0 +1,24 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { StepTwoComponent } from './step-two.component'; + +describe('StepTwoComponent', () => { + let component: StepTwoComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [StepTwoComponent], + }).compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(StepTwoComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/features/administration/form/steps/step-two/step-two.component.ts b/src/app/features/administration/form/steps/step-two/step-two.component.ts new file mode 100644 index 00000000..2a030ff0 --- /dev/null +++ b/src/app/features/administration/form/steps/step-two/step-two.component.ts @@ -0,0 +1,61 @@ +import { ChangeDetectorRef, Component, Inject, Input, OnInit } from '@angular/core'; +import { FormArray, FormBuilder } from '@angular/forms'; +import { DOCUMENT } from '@angular/common'; +import { CdkDragDrop } from '@angular/cdk/drag-drop'; +import { Router } from '@angular/router'; +import { UuidService } from '../../../../../core/services/uuid.service'; +import { ToastService } from '../../../../../core/services/toast.service'; +import { PollService } from '../../../../../core/services/poll.service'; +import { DateUtilitiesService } from '../../../../../core/services/date.utilities.service'; +import { ApiService } from '../../../../../core/services/api.service'; + +@Component({ + selector: 'app-step-two', + templateUrl: './step-two.component.html', + styleUrls: ['./step-two.component.scss'], +}) +export class StepTwoComponent implements OnInit { + ngOnInit(): void {} + + @Input() + form: any; + @Input() + step_max: any; + timeList: any; + allowSeveralHours: string; + dateList: any; + showDateInterval: boolean; + intervalDays: any; + + constructor( + private fb: FormBuilder, + private cd: ChangeDetectorRef, + private uuidService: UuidService, + private toastService: ToastService, + public pollService: PollService, + private router: Router, + public dateUtilities: DateUtilitiesService, + private apiService: ApiService, + @Inject(DOCUMENT) private document: any + ) { + this.form = this.pollService.form; + } + + addIntervalOfDates() {} + + get choices(): FormArray { + return this.form.get('choices') as FormArray; + } + + addTime() {} + + removeAllTimes() {} + + resetTimes() {} + + addChoice() {} + + addTimeToDate(choice: any, id: number) {} + + countDays() {} +} diff --git a/src/app/features/administration/stepper/stepper.component.html b/src/app/features/administration/stepper/stepper.component.html index 00d5d761..6d196e3e 100644 --- a/src/app/features/administration/stepper/stepper.component.html +++ b/src/app/features/administration/stepper/stepper.component.html @@ -1,114 +1,11 @@ - - -
- Informations du sondage - - Titre - - - - - Description - - - - - 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..186e7dd5 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: $border-color !important; + width: 100%; +} +.step-bar-progress { + position: relative; + top: -0.6em; + left: 0; + height: 0.5em; + display: inline-block; + min-width: 1px; + background: $primary_color; +} diff --git a/src/app/features/administration/stepper/stepper.component.ts b/src/app/features/administration/stepper/stepper.component.ts index 4df9c485..cf7163c8 100644 --- a/src/app/features/administration/stepper/stepper.component.ts +++ b/src/app/features/administration/stepper/stepper.component.ts @@ -1,55 +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 = '/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.custom_url : this.uuidService.getUUID(), [Validators.required]], - description: [this.poll ? this.poll.description : ''], - }); - - this.configurationFormGroup = this.fb.group({ - title: [this.poll ? this.poll : false, [Validators.required]], - isAboutDate: [this.poll ? this.poll.kind === 'date' : false, [Validators.required]], - isProtectedByPassword: [this.poll ? this.poll.password.length : false, [Validators.required]], - isOwnerNotifiedByEmailOnNewVote: [ - this.poll ? this.poll.isOwnerNotifiedByEmailOnNewVote : false, - [Validators.required], - ], - isOwnerNotifiedByEmailOnNewComment: [ - this.poll ? this.poll.isOwnerNotifiedByEmailOnNewComment : false, - [Validators.required], - ], - areResultsPublic: [this.poll ? this.poll.areResultsPublic : true, [Validators.required]], - expiracyNumberOfDays: [this.poll ? this.poll.default_expiracy_days_from_now : '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/styles/variables.scss b/src/styles/variables.scss index 410d2a66..0b0e3f4b 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -1,106 +1,62 @@ @charset "UTF-8"; -// ****************************** config ****************************** -$theme-vars: 'violet'; // violet , blue -// ****************************** colors from styleguide https://app.zeplin.io/project/5d4d83d68866d6522ff2ff10/styleguide/colors?cid=5d502bb032e23e3516af8154 +// colors from styleguide https://app.zeplin.io/project/5d4d83d68866d6522ff2ff10/styleguide/colors?cid=5d502bb032e23e3516af8154 +$green: #64d16e; $black: #000000; +$ugly-purple: #b24eb7; +$lavender-pink: #e9bdeb; $white: #ffffff; +$dark-lavender: #7d6c99; +$dusty-orange: #f18647; +$violet: #bd10e0; +$red: #cd0000; $cool-grey: #aeafb1; $warm-grey: #807e7e; - -$green: #64d16e; -$dusty-orange: #f18647; -$red: #cd0000; -$pink: #fa7c91; - -$purple: #8a4d76; -$ugly-purple: #b24eb7; -$violet: #bd10e0; $wisteria: #bf83c2; $pale-purple: #d198d4; -$lavender-pink: #e9bdeb; -$dark-lavender: #7d6c99; - -// themes ****************************** blue variation around styleguide -$blueish-green: #64d1a9; -$blueish-dusty-orange: #74a389; -$blueish-red: #9d00cd; -$blueish-pink: #d47cfa; -$blueish-purple: #4d4d8a; -$blueish-ugly-purple: #4d5b8a; -$blueish-violet: #5810bd; -$blueish-wisteria: #8b83bf; -$blueish-pale-purple: #8a9bd1; -$blueish-lavender-pink: #8a97e9; -$blueish-dark-lavender: #7d6c8a; -$blueish-brown: #636c77; +$purple: #8a4d76; +$pink: #fa7c91; $brown: #757763; $beige-light: #d0d1cd; $beige-lighter: #eff0eb; -// ****************************** interpretations in app +// DINUM colors -$primary_color: $ugly-purple; -$primary: $ugly-purple; -$secondary_color: $lavender-pink; +$d-primary: #3e3882; // bleu 800 +$d-primary-intense: #6359cf; // bleu 600 +$d-grey: #f6f5fd; // bleu 30 +$d-neutral: #767486; // bleu 30 +$d-alt: #a9607f; + +$d-info: #ecf4ff; +$d-info-text: #316ec7; +$d-success: #ecfff5; +$d-success-text: #128149; +$d-warning: #dcd3bb; +$d-warning-text: #86671b; +$d-error: #ffecee; +$d-error-text: #d51b38; + +// interpretations in app +$primary_color: $d-primary; +$primary: $d-primary; +$secondary_color: $d-primary-intense; $font_color: $black; -$logo_color: $dark-lavender; -$logo_color_2: $green; -$legend_color: $dark-lavender; -$legend_color_2: $dusty-orange; -$choice_select_border_color: $cool-grey; -$hover-color: $warm-grey; -$grey-dark: $warm-grey; -$grey-light: $beige-light; -$clicked-color: $wisteria; -$mini-button-color: $pale-purple; -$warning: $dusty-orange; -$danger: $red; -$success: $green; -// ****************************** render ****************************** -@if $theme-vars == 'violet' { - $primary_color: $ugly-purple; - $primary: $ugly-purple; - $secondary_color: $lavender-pink; - $font_color: $black; - $logo_color: $dark-lavender; - $logo_color_2: $green; - $legend_color: $dark-lavender; - $legend_color_2: $dusty-orange; - $choice_select_border_color: $cool-grey; - $hover-color: $warm-grey; - $grey-dark: $warm-grey; - $grey-light: $beige-light; - $clicked-color: $wisteria; - $mini-button-color: $pale-purple; - $warning: $dusty-orange; - $danger: $red; - $success: $green; +$logo_color: $d-primary; +$logo_color_2: $d-primary-intense; +$legend_color: $d-info-text; +$legend_color_2: $d-info; +$choice_select_border_color: $d-info; +$hover-color: $d-neutral; +$border-color: $d-neutral; +$grey-dark: $d-primary; +$grey-lighter: $beige-light; +$clicked-color: $d-primary; +$mini-button-color: $d-primary-intense; +$warning: $d-warning; +$danger: $d-error; +$success: $d-success; - // FONT - $default_font: 'pt_sans'; - $title_font: 'proza_libre', 'Brie Light', 'Arial', 'DejaVu Sans Mono'; -} @else if $theme-vars == 'blue' { - $primary_color: $blueish-ugly-purple; - $primary: $blueish-ugly-purple; - $secondary_color: $blueish-lavender-pink; - $font_color: $black; - $logo_color: $blueish-dark-lavender; - $logo_color_2: $blueish-green; - $legend_color: $blueish-dark-lavender; - $legend_color_2: $blueish-dusty-orange; - $choice_select_border_color: $cool-grey; - $hover-color: $warm-grey; - $grey-dark: $warm-grey; - $grey-light: $beige-light; - $clicked-color: $blueish-wisteria; - $mini-button-color: $blueish-pale-purple; - $warning: $blueish-dusty-orange; - $danger: $blueish-red; - $success: $blueish-green; - - // FONT - $default_font: 'pt_sans'; - $title_font: 'proza_libre', 'Brie Light', 'Arial', 'DejaVu Sans Mono'; -} +$default_font: 'pt_sans'; +$title_font: 'proza_libre', 'Brie Light', 'Arial', 'DejaVu Sans Mono'; diff --git a/yarn.lock b/yarn.lock index d24ce927..a1ff46b2 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2150,6 +2150,13 @@ amdefine@>=0.0.4: resolved "https://registry.yarnpkg.com/amdefine/-/amdefine-1.0.1.tgz#4a5282ac164729e93619bcfd3ad151f817ce91f5" integrity sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU= +angular-date-value-accessor@^1.0.2: + version "1.2.1" + resolved "https://registry.yarnpkg.com/angular-date-value-accessor/-/angular-date-value-accessor-1.2.1.tgz#a5f07b11fef1c0d1fde5aa851057de177c510137" + integrity sha512-4lhVi5PRpaIKtsCDEHioue324u1j18t46ZrD/jI7+M6DrZeRyxfMeSGsZXWNOC6eaq9x/pzXyaE8slXSj3Qd5A== + dependencies: + tslib "^2.0.0" + ansi-align@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/ansi-align/-/ansi-align-3.0.0.tgz#b536b371cf687caaef236c18d3e21fe3797467cb" @@ -3755,6 +3762,11 @@ crypto-random-string@^2.0.0: resolved "https://registry.yarnpkg.com/crypto-random-string/-/crypto-random-string-2.0.0.tgz#ef2a7a966ec11083388369baa02ebead229b30d5" integrity sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA== +crypto@^1.0.1: + version "1.0.1" + resolved "https://registry.yarnpkg.com/crypto/-/crypto-1.0.1.tgz#2af1b7cad8175d24c8a1b0778255794a21803037" + integrity sha512-VxBKmeNcqQdiUQUW2Tzq0t377b54N2bMtXO/qiLa+6eRRmmC4qT3D4OnTGoT/U6O9aklQ/jTwbOtRMTTY8G0Ig== + css-color-names@0.0.4, css-color-names@^0.0.4: version "0.0.4" resolved "https://registry.yarnpkg.com/css-color-names/-/css-color-names-0.0.4.tgz#808adc2e79cf84738069b646cb20ec27beb629e0" @@ -9451,6 +9463,13 @@ pretty-format@^26.0.0, pretty-format@^26.1.0: ansi-styles "^4.0.0" react-is "^16.12.0" +primeng@^11.0.0: + version "11.4.5" + resolved "https://registry.yarnpkg.com/primeng/-/primeng-11.4.5.tgz#128137d727d555f68c212a1dcb1f2af3b0f4afd4" + integrity sha512-7f5LDHrvFsJA4670Ftmib5ndDxTqcaQiM88XXJrjWYNGjXsXT3Yc5g9fgPvDrg2D38/jjpcSYeW9kalNcvlbrQ== + dependencies: + tslib "^2.0.0" + prismjs@^1.20.0: version "1.20.0" resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.20.0.tgz#9b685fc480a3514ee7198eac6a3bf5024319ff03"