Browse Source

dispatch form functions in pollService, copy texts for mobile menu

develop
Tykayn 8 months ago committed by tykayn
parent
commit
1d33d0787c
  1. 35
      src/app/core/components/header/header.component.html
  2. 4
      src/app/core/components/sibebar/navigation/navigation.component.html
  3. 4
      src/app/core/core.module.ts
  4. 311
      src/app/core/services/poll.service.ts
  5. 18
      src/app/features/administration/form/form.component.html
  6. 286
      src/app/features/administration/form/form.component.ts
  7. 2
      src/app/features/administration/form/step-five/step-five.component.html
  8. 28
      src/app/features/administration/form/step-four/step-four.component.html
  9. 110
      src/app/features/administration/form/step-one/step-one.component.html
  10. 140
      src/app/features/administration/form/step-three/step-three.component.html
  11. 136
      src/app/features/administration/form/step-two/step-two.component.html
  12. 3
      src/app/features/administration/form/step-two/step-two.component.scss
  13. 54
      src/app/features/administration/form/step-two/step-two.component.ts
  14. 4
      src/app/features/administration/stepper/stepper.component.scss
  15. 4
      src/app/features/consultation/consultation.component.html
  16. 4
      src/app/features/user-profile/user-polls/user-polls.component.html
  17. 2
      src/app/shared/components/selectors/language-selector/language-selector.component.html
  18. 6
      src/app/shared/components/selectors/theme-selector/theme-selector.component.html
  19. 4
      src/assets/i18n/FR.json
  20. 1
      src/environments/environment.prod.ts
  21. 3
      src/environments/environment.ts
  22. 2
      src/styles.scss
  23. 4
      src/styles/libraries/_overrides.scss
  24. 11
      src/styles/partials/_form-controls.scss
  25. 74
      src/styles/partials/_forms.scss
  26. 19
      src/styles/partials/_responsive.scss
  27. 5
      src/styles/partials/global.scss
  28. 2
      src/styles/themes/_light.scss
  29. 2
      src/styles/variables.scss

35
src/app/core/components/header/header.component.html

@ -6,11 +6,6 @@
<span class="app-title title is-2">
{{ appTitle }}
</span>
<span class="dev-env button has-background-success" *ngIf="!env.production">
<i>
(dev)
</i>
</span>
</a>
<a
@ -43,7 +38,35 @@
</div>
</div>
<div class="mobile-menu" *ngIf="mobileMenuVisible">
menu mobile
menu mobile ---
<button class="button is-default" (click)="mobileMenuVisible = !mobileMenuVisible">fermer</button>
<ul class="ui-listbox">
<li>
Imprimer
</li>
<li>
Exporter CSV
</li>
<li>
Modifier
</li>
<li>
URL administrateur
<input type="text" />
copier
</li>
<li>
Supprimer tous les votes
</li>
<li>
Supprimer tous les commentaires
</li>
<li>
Supprimer le sondage
</li>
<li></li>
</ul>
</div>
</nav>
</header>

4
src/app/core/components/sibebar/navigation/navigation.component.html

@ -5,10 +5,10 @@
<a
class="navbar-item"
*ngFor="let poll of _pollsAvailables | async"
routerLink="{{ '/poll/' + poll.slug + '/consultation' }}"
routerLink="{{ '/poll/' + poll.custom_url + '/consultation' }}"
routerLinkActive="is-active"
>
« {{ poll.slug }} »
« {{ poll.custom_url }} »
</a>
</div>
</div>

4
src/app/core/core.module.ts

@ -1,6 +1,6 @@
import { CommonModule } from '@angular/common';
import { NgModule, Optional, SkipSelf } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
import { TranslateModule } from '@ngx-translate/core';
@ -14,7 +14,7 @@ import { SharedModule } from '../shared/shared.module';
@NgModule({
declarations: [FooterComponent, HeaderComponent, HomeComponent, LogoComponent, NavigationComponent],
imports: [CommonModule, FormsModule, RouterModule, TranslateModule, SharedModule],
imports: [CommonModule, FormsModule, ReactiveFormsModule, RouterModule, TranslateModule, SharedModule],
exports: [HeaderComponent, FooterComponent, NavigationComponent, LogoComponent],
})
export class CoreModule {

311
src/app/core/services/poll.service.ts

@ -1,5 +1,5 @@
import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, Resolve, Router, RouterStateSnapshot } from '@angular/router';
import { ChangeDetectorRef, Inject, Injectable } from '@angular/core';
import { ActivatedRoute, ActivatedRouteSnapshot, Resolve, Router, RouterStateSnapshot } from '@angular/router';
import { BehaviorSubject, Observable, Subscription } from 'rxjs';
import { Answer } from '../enums/answer.enum';
@ -12,6 +12,10 @@ import { UserService } from './user.service';
import { UuidService } from './uuid.service';
import { HttpClient } from '@angular/common/http';
import { environment } from '../../../environments/environment';
import { FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms';
import { DateChoice, defaultTimeOfDay, otherDefaultDates } from '../../features/old-stuff/config/defaultConfigs';
import { DateUtilities } from '../../features/old-stuff/config/DateUtilities';
import { DOCUMENT } from '@angular/common';
@Injectable({
providedIn: 'root',
@ -19,6 +23,23 @@ import { environment } from '../../../environments/environment';
export class PollService implements Resolve<Poll> {
private _poll: BehaviorSubject<Poll | undefined> = new BehaviorSubject<Poll | undefined>(undefined);
public readonly poll: Observable<Poll | undefined> = this._poll.asObservable();
public form: FormGroup;
public startDateInterval: string;
public endDateInterval: string;
public intervalDays: any;
public intervalDaysDefault = 7;
public dateList: DateChoice[] = otherDefaultDates; // sets of days as strings, config to set identical time for days in a special days poll
public timeList: any = defaultTimeOfDay; // ranges of time expressed as strings
public previousRouteName: string = '/administration';
public nextRouteName: string = '/administration/step/2';
public step_current: number = 1;
public step_max: number = 5;
public round: Function;
public urlPrefix: string = window.location.origin + '/participation/';
public advancedDisplayEnabled = false;
public showDateInterval = false;
public allowSeveralHours = false;
public richTextMode = false;
constructor(
private http: HttpClient,
@ -26,8 +47,78 @@ export class PollService implements Resolve<Poll> {
private apiService: ApiService,
private userService: UserService,
private uuidService: UuidService,
private toastService: ToastService
) {}
private toastService: ToastService,
public dateUtilities: DateUtilities,
public route: ActivatedRoute,
@Inject(DOCUMENT) private document: any,
private fb: FormBuilder
) {
this.createFormGroup();
if (environment.poll.autoFillDemo) {
this.setDemoValues();
}
}
/**
* add example values to the form
*/
setDemoValues(): void {
this.addChoice('orange');
this.addChoice('raisin');
this.addChoice('abricot');
this.form.patchValue({
title: 'mon titre',
description: 'répondez SVP <3 ! *-* ',
custom_url: this.uuidService.getUUID(),
creatorPseudo: 'Chuck Norris',
creatorEmail: 'chucknorris@example.com',
isAboutDate: true,
whoModifiesAnswers: 'everybody',
whoCanChangeAnswers: 'everybody',
isProtectedByPassword: false,
isOwnerNotifiedByEmailOnNewVote: false,
isOwnerNotifiedByEmailOnNewComment: false,
isMaybeAnswerAvailable: false,
richTextMode: false,
areResultsPublic: true,
expiracyNumberOfDays: 60,
});
this.automaticSlug();
}
/**
* set the poll slug from other data of the poll
*/
automaticSlug() {
this.form.patchValue({ custom_url: this.makeSlug(this.form) });
}
public createFormGroup() {
let form = this.fb.group({
title: ['', [Validators.required, Validators.minLength(12)]],
creatorPseudo: ['', [Validators.required]],
created_at: [new Date(), [Validators.required]],
creatorEmail: ['', [Validators.required]],
custom_url: [this.uuidService.getUUID(), [Validators.required]],
description: ['', [Validators.required]],
choices: new FormArray([]),
whoModifiesAnswers: ['', [Validators.required]],
whoCanChangeAnswers: ['', [Validators.required]],
isAboutDate: [true, [Validators.required]],
startDateInterval: ['', [Validators.required]],
endDateInterval: ['', [Validators.required]],
isProtectedByPassword: [false, [Validators.required]],
isOwnerNotifiedByEmailOnNewVote: [false, [Validators.required]],
isOwnerNotifiedByEmailOnNewComment: [false, [Validators.required]],
isMaybeAnswerAvailable: [false, [Validators.required]],
areResultsPublic: [true, [Validators.required]],
richTextMode: [false, [Validators.required]],
expiracyNumberOfDays: [60, [Validators.required, Validators.min(0)]],
});
this.form = form;
return form;
}
/**
* auto fetch a poll when route is looking for one in the administration pattern
@ -82,21 +173,217 @@ export class PollService implements Resolve<Poll> {
}
/**
* make a uniq slug for the current poll creation
* add all the dates between the start and end dates in the interval section
*/
addIntervalOfDates(): void {
const newIntervalArray = this.dateUtilities.getDatesInRange(
this.dateUtilities.parseInputDateToDateObject(this.startDateInterval),
this.dateUtilities.parseInputDateToDateObject(this.endDateInterval),
1
);
const converted = [];
newIntervalArray.forEach((element) => {
converted.push({
literal: element.literal,
date_object: element.date_object,
timeList: [],
});
});
this.dateList = [...new Set(converted)];
// add only dates that are not already present with a Set of unique items
console.log('this.dateList', this.dateList);
this.showDateInterval = false;
this.form.patchValue({ choices: this.dateList });
this.toastService.display(`les dates ont été ajoutées aux réponses possibles.`);
}
/**
* handle keyboard shortcuts
* @param $event
* @param choice_number
*/
keyOnChoice($event: KeyboardEvent, choice_number: number): void {
$event.preventDefault();
console.log('this.choices.length', this.choices.length);
console.log('choice_number', choice_number);
const lastChoice = this.choices.length - 1 === choice_number;
// reset field with Ctrl + D
// add a field with Ctrl + N
// go to previous choice with arrow up
// go to next choice with arrow down
console.log('$event', $event);
if ($event.key == 'ArrowUp' && choice_number > 0) {
this.focusOnChoice(choice_number - 1);
}
if ($event.key == 'ArrowDown') {
// add a field if we are on the last choice
if (lastChoice) {
this.addChoice();
this.toastService.display('choix ajouté par raccourci "flèche bas"');
} else {
this.focusOnChoice(choice_number + 1);
}
}
if ($event.ctrlKey && $event.key == 'Backspace') {
this.deleteChoiceField(choice_number);
this.toastService.display('choix supprimé par raccourci "Ctrl + retour"');
this.focusOnChoice(Math.min(choice_number - 1, 0));
}
if ($event.ctrlKey && $event.key == 'Enter') {
// go to other fields
const elem = this.document.querySelector('#creatorEmail');
if (elem) {
elem.focus();
}
}
}
/**
* change time spans
*/
addTime() {
this.timeList.push({
literal: '',
timeList: [],
date_object: new Date(),
});
}
removeAllTimes() {
this.timeList = [];
}
resetTimes() {
this.timeList = otherDefaultDates;
}
/**
* add a time period to a specific date choice,
* focus on the new input
* @param config
* @param id
*/
addTimeToDate(config: any, id: number) {
this.timeList.push({
literal: '',
timeList: [],
date_object: new Date(),
});
const selector = '[ng-reflect-choice_label="dateTime_' + id + '_Choices_' + (this.timeList.length - 1) + '"]';
const elem = this.document.querySelector(selector);
if (elem) {
elem.focus();
}
}
public createPoll(): void {
console.log('this.form', this.form);
const newpoll = this.newPollFromForm(this.form);
console.log('newpoll', newpoll);
this.apiService.createPoll(newpoll);
}
/**
* default interval of dates proposed is from today to 7 days more
*/
setDefaultDatesForInterval(): void {
const dateCurrent = new Date();
const dateJson = dateCurrent.toISOString();
this.startDateInterval = dateJson.substring(0, 10);
this.endDateInterval = this.dateUtilities
.addDaysToDate(this.intervalDaysDefault, dateCurrent)
.toISOString()
.substring(0, 10);
this.form.patchValue({
startDateInterval: this.startDateInterval,
endDateInterval: this.endDateInterval,
});
this.countDays();
}
askInitFormDefault(): void {
this.initFormDefault(false);
this.toastService.display('formulaire réinitialisé');
}
countDays(): void {
this.intervalDays = this.dateUtilities.countDays(
this.dateUtilities.parseInputDateToDateObject(this.startDateInterval),
this.dateUtilities.parseInputDateToDateObject(this.endDateInterval)
);
}
focusOnChoice(index): void {
const selector = '#choice_label_' + index;
const elem = this.document.querySelector(selector);
if (elem) {
elem.focus();
}
}
deleteChoiceField(index: number): void {
if (this.choices.length !== 1) {
this.choices.removeAt(index);
}
}
initFormDefault(showDemoValues = true): void {
this.form = this.createFormGroup();
console.log('this.form ', this.form);
this.setDefaultDatesForInterval();
if (showDemoValues) {
this.setDemoValues();
}
}
get choices(): FormArray {
return this.form.get('choices') as FormArray;
}
reinitChoices(): void {
this.choices.setValue([]);
}
addChoice(optionalLabel = ''): void {
const newControlGroup = this.fb.group({
label: this.fb.control('', [Validators.required]),
imageUrl: ['', [Validators.required]],
});
if (optionalLabel) {
newControlGroup.patchValue({
label: optionalLabel,
imageUrl: 'mon url',
});
}
this.choices.push(newControlGroup);
console.log('this.choices.length', this.choices.length);
this.focusOnChoice(this.choices.length - 1);
}
/**
* make a uniq slug for the current poll creation
* @param form
*/
makeSlug(config: Poll): string {
makeSlug(form: FormGroup): string {
let str = '';
str =
config.configuration.dateCreated.getFullYear() +
form.value.created_at.getFullYear() +
'_' +
(config.configuration.dateCreated.getMonth() + 1) +
(form.value.created_at.getMonth() + 1) +
'_' +
config.configuration.dateCreated.getDate() +
form.value.created_at.getDate() +
'_' +
config.owner.pseudo +
form.value.creatorPseudo +
'_' +
config.title;
form.value.title;
str = str.replace(/^\s+|\s+$/g, ''); // trim
str = str.toLowerCase();
@ -212,7 +499,7 @@ export class PollService implements Resolve<Poll> {
// access
visibility: newpoll.configuration.areResultsPublic, // visible to one with the link:
voteChoices: newpoll.configuration.isMaybeAnswerAvailable ? 'yes, maybe, no' : 'yes', // possible answers to a vote choice: only "yes", "yes, maybe, no"
creationDate: new Date(),
created_at: new Date(),
expirationDate: '', // expiracy date
voteStackId: null, // id of the vote stack to update
pollId: null, // id of the current poll when created. data given by the backend api

18
src/app/features/administration/form/form.component.html

@ -3,22 +3,32 @@
<h2 classs="title is-2">
{{ 'creation.title' | translate }}
</h2>
<app-stepper [step_current]="step_current" [step_max]="step_max"></app-stepper>
<app-stepper [step_current]="pollService.step_current" [step_max]="pollService.step_max"></app-stepper>
</header>
<section class="step-container">
<router-outlet>
<app-step-one></app-step-one>
<app-step-one [form]="form"></app-step-one>
</router-outlet>
</section>
<footer>
<div class="columns">
<div class="column">
<button class="button is-large is-secondary" [routerLink]="previousRouteName" *ngIf="step_current != 1">
<button
class="button is-large is-secondary"
[routerLink]="pollService.previousRouteName"
*ngIf="pollService.step_current != 1"
>
précédent
</button>
</div>
<div class="column">
<button class="button is-primary is-large is-pulled-right" [disabled]="form.invalid">suivant</button>
<!-- [disabled]="form.invalid"-->
<button
class="button is-primary is-large is-pulled-right"
[routerLink]="[pollService.nextRouteName, { from: route }]"
>
suivant
</button>
</div>
</div>
</footer>

286
src/app/features/administration/form/form.component.ts

@ -9,7 +9,7 @@ import { DateUtilities } from '../../old-stuff/config/DateUtilities';
import { DOCUMENT } from '@angular/common';
import { DateChoice, defaultTimeOfDay, otherDefaultDates } from '../../old-stuff/config/defaultConfigs';
import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
import { Router } from '@angular/router';
import { ActivatedRoute, Router } from '@angular/router';
@Component({
selector: 'app-admin-form',
@ -21,23 +21,6 @@ export class FormComponent implements OnInit {
public poll?: Poll;
public form: FormGroup;
public urlPrefix: string = window.location.origin + '/participation/';
public advancedDisplayEnabled = false;
public showDateInterval = false;
public allowSeveralHours = false;
public richTextMode = false;
startDateInterval: string;
endDateInterval: string;
intervalDays: any;
intervalDaysDefault = 7;
dateList: DateChoice[] = otherDefaultDates; // sets of days as strings, config to set identical time for days in a special days poll
timeList: any = defaultTimeOfDay; // ranges of time expressed as strings
step_current: number = 1;
step_max: number = 5;
public round: Function;
private nextRouteName: string = '/administration/step/2';
previousRouteName: string = '/administration';
constructor(
private fb: FormBuilder,
private cd: ChangeDetectorRef,
@ -46,273 +29,16 @@ export class FormComponent implements OnInit {
private pollService: PollService,
private router: Router,
public dateUtilities: DateUtilities,
public route: ActivatedRoute,
private apiService: ApiService,
@Inject(DOCUMENT) private document: any
) {}
drop(event: CdkDragDrop<string[]>) {
// moveItemInArray(this.choices, event.previousIndex, event.currentIndex);
}
get choices(): FormArray {
return this.form.get('choices') as FormArray;
) {
this.form = this.pollService.form;
}
ngOnInit(): void {
this.initFormDefault();
const pollsAvailable = this.pollService.getAllAvailablePolls();
console.log('pollsAvailable', pollsAvailable);
}
public createPoll(): void {
console.log('this.form', this.form);
const newpoll = this.pollService.newPollFromForm(this.form);
console.log('newpoll', newpoll);
this.apiService.createPoll(newpoll);
}
addChoice(optionalLabel = ''): void {
const newControlGroup = this.fb.group({
label: this.fb.control('', [Validators.required]),
imageUrl: ['', [Validators.required]],
});
if (optionalLabel) {
newControlGroup.patchValue({
label: optionalLabel,
imageUrl: 'mon url',
});
}
this.choices.push(newControlGroup);
this.cd.detectChanges();
console.log('this.choices.length', this.choices.length);
this.focusOnChoice(this.choices.length - 1);
}
focusOnChoice(index): void {
const selector = '#choice_label_' + index;
const elem = this.document.querySelector(selector);
if (elem) {
elem.focus();
}
}
deleteChoiceField(index: number): void {
if (this.choices.length !== 1) {
this.choices.removeAt(index);
}
}
reinitChoices(): void {
this.choices.setValue([]);
}
initFormDefault(showDemoValues = true): void {
this.form = this.fb.group({
title: ['', [Validators.required, Validators.minLength(12)]],
creatorPseudo: ['', [Validators.required]],
creatorEmail: ['', [Validators.required]],
slug: [this.uuidService.getUUID(), [Validators.required]],
description: ['', [Validators.required]],
choices: new FormArray([]),
whoModifiesAnswers: ['', [Validators.required]],
whoCanChangeAnswers: ['', [Validators.required]],
isAboutDate: [true, [Validators.required]],
startDateInterval: ['', [Validators.required]],
endDateInterval: ['', [Validators.required]],
isProtectedByPassword: [false, [Validators.required]],
isOwnerNotifiedByEmailOnNewVote: [false, [Validators.required]],
isOwnerNotifiedByEmailOnNewComment: [false, [Validators.required]],
isMaybeAnswerAvailable: [false, [Validators.required]],
areResultsPublic: [true, [Validators.required]],
richTextMode: [false, [Validators.required]],
expiracyNumberOfDays: [60, [Validators.required, Validators.min(0)]],
});
console.log('this.form ', this.form);
this.setDefaultDatesForInterval();
if (showDemoValues) {
this.setDemoValues();
}
}
/**
* default interval of dates proposed is from today to 7 days more
*/
setDefaultDatesForInterval(): void {
const dateCurrent = new Date();
const dateJson = dateCurrent.toISOString();
this.startDateInterval = dateJson.substring(0, 10);
this.endDateInterval = this.dateUtilities
.addDaysToDate(this.intervalDaysDefault, dateCurrent)
.toISOString()
.substring(0, 10);
this.form.patchValue({
startDateInterval: this.startDateInterval,
endDateInterval: this.endDateInterval,
});
this.countDays();
}
/**
* add example values to the form
*/
setDemoValues(): void {
this.addChoice('orange');
this.addChoice('raisin');
this.addChoice('abricot');
this.form.patchValue({
title: 'mon titre',
description: 'répondez SVP <3 ! *-* ',
slug: this.uuidService.getUUID(),
creatorPseudo: 'Chuck Norris',
creatorEmail: 'chucknorris@example.com',
isAboutDate: true,
whoModifiesAnswers: 'everybody',
whoCanChangeAnswers: 'everybody',
isProtectedByPassword: false,
isOwnerNotifiedByEmailOnNewVote: false,
isOwnerNotifiedByEmailOnNewComment: false,
isMaybeAnswerAvailable: false,
richTextMode: false,
areResultsPublic: true,
expiracyNumberOfDays: 60,
});
this.automaticSlug();
}
askInitFormDefault(): void {
this.initFormDefault(false);
this.toastService.display('formulaire réinitialisé');
}
countDays(): void {
this.intervalDays = this.dateUtilities.countDays(
this.dateUtilities.parseInputDateToDateObject(this.startDateInterval),
this.dateUtilities.parseInputDateToDateObject(this.endDateInterval)
);
this.cd.detectChanges();
}
/**
* add all the dates between the start and end dates in the interval section
*/
addIntervalOfDates(): void {
const newIntervalArray = this.dateUtilities.getDatesInRange(
this.dateUtilities.parseInputDateToDateObject(this.startDateInterval),
this.dateUtilities.parseInputDateToDateObject(this.endDateInterval),
1
);
const converted = [];
newIntervalArray.forEach((element) => {
converted.push({
literal: element.literal,
date_object: element.date_object,
timeList: [],
});
});
this.dateList = [...new Set(converted)];
// add only dates that are not already present with a Set of unique items
console.log('this.dateList', this.dateList);
this.showDateInterval = false;
this.form.patchValue({ choices: this.dateList });
this.toastService.display(`les dates ont été ajoutées aux réponses possibles.`);
}
/**
* handle keyboard shortcuts
* @param $event
* @param choice_number
*/
keyOnChoice($event: KeyboardEvent, choice_number: number): void {
$event.preventDefault();
console.log('this.choices.length', this.choices.length);
console.log('choice_number', choice_number);
const lastChoice = this.choices.length - 1 === choice_number;
// reset field with Ctrl + D
// add a field with Ctrl + N
// go to previous choice with arrow up
// go to next choice with arrow down
console.log('$event', $event);
if ($event.key == 'ArrowUp' && choice_number > 0) {
this.focusOnChoice(choice_number - 1);
}
if ($event.key == 'ArrowDown') {
// add a field if we are on the last choice
if (lastChoice) {
this.addChoice();
this.toastService.display('choix ajouté par raccourci "flèche bas"');
} else {
this.focusOnChoice(choice_number + 1);
}
}
if ($event.ctrlKey && $event.key == 'Backspace') {
this.deleteChoiceField(choice_number);
this.toastService.display('choix supprimé par raccourci "Ctrl + retour"');
this.cd.detectChanges();
this.focusOnChoice(Math.min(choice_number - 1, 0));
}
if ($event.ctrlKey && $event.key == 'Enter') {
// go to other fields
const elem = this.document.querySelector('#creatorEmail');
if (elem) {
elem.focus();
}
}
this.pollService.askInitFormDefault();
}
/**
* change time spans
*/
addTime() {
this.timeList.push({
literal: '',
timeList: [],
date_object: new Date(),
});
}
removeAllTimes() {
this.timeList = [];
}
resetTimes() {
this.timeList = otherDefaultDates;
}
/**
* add a time period to a specific date choice,
* focus on the new input
* @param config
* @param id
*/
addTimeToDate(config: any, id: number) {
this.timeList.push({
literal: '',
timeList: [],
date_object: new Date(),
});
const selector = '[ng-reflect-choice_label="dateTime_' + id + '_Choices_' + (this.timeList.length - 1) + '"]';
this.cd.detectChanges();
const elem = this.document.querySelector(selector);
if (elem) {
elem.focus();
}
}
/**
* set the poll slug from other data of the poll
*/
automaticSlug() {
this.poll.slug = this.pollService.makeSlug(this.poll);
}
goNextStep() {
this.router.navigate([this.nextRouteName]);
}
goNextStep() {}
}

2
src/app/features/administration/form/step-five/step-five.component.html

@ -25,7 +25,7 @@
</button>
<div class="well">
{{ poll.slug }}
{{ poll.custom_url }}
</div>
<div class="has-background-danger" *ngIf="!form.valid">
le formulaire est invalide

28
src/app/features/administration/form/step-four/step-four.component.html

@ -1,5 +1,27 @@
<app-stepper [step_current]="4" [step_max]="step_max"></app-stepper>
<div class="creator-infos">
<label class="" for="creatorEmail">
<span>
{{ 'creation.name' | translate }}
</span>
</label>
<label class="hidden" for="creatorPseudo">
<span>
{{ 'creation.email' | translate }}
</span>
</label>
<input #title matInput placeholder="pseudo" formControlName="creatorPseudo" id="creatorPseudo" required />
<input
#title
matInput
placeholder="mon-email@example.com"
formControlName="creatorEmail"
id="creatorEmail"
required
/>
</div>
<fieldset class="advanced-config">
<button class="btn is-info" (click)="advancedDisplayEnabled = !advancedDisplayEnabled">
<i class="fa fa-save"></i>
@ -13,13 +35,13 @@
<label for="slug">Url pour les participants </label>
<br />
<span
>{{ urlPrefix }} <strong> {{ form.controls.slug.value }} </strong>
>{{ urlPrefix }} <strong> {{ form.controls.custom_url.value }} </strong>
</span>
<app-copy-text [textToCopy]="urlPrefix + form.controls.slug.value"></app-copy-text>
<app-copy-text [textToCopy]="urlPrefix + form.controls.custom_url.value"></app-copy-text>
<button
mat-button
*ngIf="form.controls.slug.value"
*ngIf="form.controls.custom_url.value"
matSuffix
mat-icon-button
aria-label="Clear"

110
src/app/features/administration/form/step-one/step-one.component.html

@ -4,56 +4,72 @@
<h2 class="title is-2">
{{ 'creation.choose_title' | translate }}
</h2>
<label class="hidden" for="title">Titre</label>
<input
class="input input-lg"
#title
matInput
[placeholder]="'creation.choose_title_placeholder' | translate"
formControlName="title"
id="title"
autofocus="autofocus"
(change)="updateSlug()"
required
/>
<button
mat-button
*ngIf="title.value"
matSuffix
mat-icon-button
aria-label="Clear"
(click)="title.value = ''"
>
<i class="fa fa-close"></i>
</button>
<div class="columns">
<div class="column">
<label class="hidden" for="title">Titre</label>
<input
class="input-lg"
#title
[placeholder]="'creation.choose_title_placeholder' | translate"
formControlName="title"
aria-placeholder="Quel resto ce soir ?"
placeholder="Quel resto ce soir ?"
id="title"
autofocus="autofocus"
(change)="updateSlug()"
required
/>
</div>
<div class="column is-narrow">
<button
mat-button
*ngIf="title.value"
matSuffix
mat-icon-button
aria-label="Clear"
(click)="title.value = ''"
>
<i class="fa fa-close"></i>
</button>
</div>
</div>
</section>
<div class="poll-description">
<label for="descr">Description (optionnel)</label>
<span class="rich-text-toggle">
mode de saisie avancée
<i class="fa fa-text"></i><input type="checkbox" formControlName="richTextMode" />
</span>
<textarea
#description
matInput
id="descr"
placeholder="Description"
formControlName="description"
required
></textarea>
<div class="text-info">
300 caractères maximum
<div class="columns">
<div class="column">
<label for="descr">Description (optionnel)</label>
<div class="rich-text-toggle">
<label for="richTextMode">mode de saisie avancée</label>
<mat-checkbox formControlName="richTextMode" id="richTextMode"></mat-checkbox>
</div>
<textarea
class="ui-inputtextarea"
#description
matInput
id="descr"
class="is-large is-full"
placeholder="Description"
formControlName="description"
required
></textarea>
<div class="text-info">
300 caractères maximum
</div>
</div>
<div class="column">
<button
mat-button
*ngIf="description.value"
matSuffix
mat-icon-button
aria-label="Clear"
(click)="description.value = ''"
>
<i class="fa fa-close"></i>
</button>
</div>
</div>
<button
mat-button
*ngIf="description.value"
matSuffix
mat-icon-button
aria-label="Clear"
(click)="description.value = ''"
>
<i class="fa fa-close"></i>
</button>
</div>
</form>
</div>

140
src/app/features/administration/form/step-three/step-three.component.html

@ -1,23 +1,127 @@
<app-stepper [step_current]="3" [step_max]="step_max"></app-stepper>
<div class="creator-infos">
<label class="" for="creatorEmail">
<span>
{{ 'creation.name' | translate }}
<!-- choix spécialement pour les dates-->
<div class="dates-list">
<div class="title">
<span class="count-dates">
{{ timeList.length }}
</span>
</label>
<label class="hidden" for="creatorPseudo">
<span>
{{ 'creation.email' | translate }}
<span class="count-dates-txt">
{{ 'dates.count_time' | translate }}
(pour chaque jour)
</span>
</label>
<input #title matInput placeholder="pseudo" formControlName="creatorPseudo" id="creatorPseudo" required />
<input
#title
matInput
placeholder="mon-email@example.com"
formControlName="creatorEmail"
id="creatorEmail"
required
/>
</div>
<div class="actions">
<button (click)="addTime()" *ngIf="'false' === allowSeveralHours" class="btn btn--primary" id="add_time_button">
<i class="fa fa-plus" aria-hidden="true"></i>
{{ 'dates.add_time' | translate }}
</button>
<button
(click)="removeAllTimes()"
*ngIf="'false' === allowSeveralHours"
class="btn btn--warning"
id="remove_time_button"
>
<i class="fa fa-trash" aria-hidden="true"></i>
Aucune plage horaire
</button>
<button
(click)="resetTimes()"
*ngIf="'false' === allowSeveralHours"
class="btn btn--warning"
id="reset_time_button"
>
<i class="fa fa-refresh" aria-hidden="true"></i>
réinitialiser
</button>
</div>
<div *ngIf="'false' === allowSeveralHours" class="identical-dates">
<div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)">
<div *ngFor="let time of timeList; index as id" class="time-choice" cdkDrag>
<label for="timeChoices_{{ id }}">
<i class="fa fa-clock-o" aria-hidden="true"></i>
</label>
<input [(ngModel)]="time.literal" name="timeChoices_{{ id }}" type="text" id="timeChoices_{{ id }}" />
<button (click)="time.timeList.splice(id, 1)" class="btn btn-warning">
<i class="fa fa-times" aria-hidden="true"></i>
</button>
</div>
</div>
</div>
<hr />
<span class="count-dates title">
{{ dateList.length }}
</span>
<span>
{{ 'dates.count_dates' | translate }}
</span>
<button class="btn btn--primary" (click)="addChoice()">
{{ 'dates.add' | translate }}
</button>
<div *ngFor="let choice of dateList; index as id" class="date-choice">
<input
[(ngModel)]="choice.date_object"
name="dateChoices_{{ id }}"
id="dateChoices_{{ id }}"
useValueAsDate
type="date"
/>
<button (click)="dateList.splice(id, 1)" class="btn btn-warning">
<i class="fa fa-times" aria-hidden="true"></i>
</button>
<button (click)="addTimeToDate(choice, id)" *ngIf="'true' === allowSeveralHours" class="btn btn--primary">
{{ 'dates.add_time' | translate }}
</button>
<div *ngIf="'true' === allowSeveralHours" class="several-times">
<div *ngFor="let timeItem of choice.timeList; index as idTime" class="time-choice">
<input
[(ngModel)]="timeItem.literal"
name="dateTime_{{ id }}_Choices_{{ idTime }}"
id="dateTime_{{ id }}_Choices_{{ idTime }}"
type="text"
/>
<button (click)="choice.timeList.splice(idTime, 1)" class="btn btn-warning">
<i class="fa fa-times" aria-hidden="true"></i>
</button>
</div>
</div>
</div>
</div>
<button
(click)="showDateInterval = !showDateInterval"
[ngClass]="{ active: showDateInterval }"
class="btn btn--primary"
id="toggle_interval_button"
>
<i class="fa fa-clock-o" aria-hidden="true"></i>
{{ 'dates.add_interval' | translate }}
</button>
<section *ngIf="showDateInterval" class="date-interval form-row">
<h2>{{ 'dates.add_interval' | translate }}</h2>
<div class="columns">
<div class="column">
{{ 'dates.interval_propose' | translate }}
</div>
<div class="column">
<label for="start_interval" class="hidden">start</label>
<input id="start_interval" (change)="countDays()" formControlName="startDateInterval" type="date" />
</div>
</div>
<div class="columns">
<div class="column">
{{ 'dates.interval_span' | translate }}
</div>
<div class="column">
<label for="end_interval" class="hidden">end</label>
<input id="end_interval" formControlName="endDateInterval" type="date" />
</div>
</div>
<button (click)="addIntervalOfDates()" class="btn btn-block btn--primary">
<i class="fa fa-plus" aria-hidden="true"></i>
{{ 'dates.interval_button' | translate }}
{{ intervalDays }}
{{ 'dates.interval_button_dates' | translate }}
</button>
</section>

136
src/app/features/administration/form/step-two/step-two.component.html

@ -1,4 +1,4 @@
<app-stepper [step_current]="2" [step_max]="step_max"></app-stepper>
<app-stepper [step_current]="2" [step_max]="5"></app-stepper>
<div class="form-field poll-kind">
<h2 class="title is-2">
{{ 'creation.want' | translate }}
@ -7,8 +7,8 @@
<div class="column">
<button
class="btn-block btn"
[ngClass]="{ 'is-primary': form.controls.isAboutDate.value }"
(click)="form.controls.isAboutDate.setValue(true)"
[ngClass]="{ 'is-primary': pollService.form.controls.isAboutDate.value }"
(click)="pollService.form.controls.isAboutDate.setValue(true)"
>
<i class="fa fa-calendar"></i>
{{ 'creation.kind.date' | translate }}
@ -17,8 +17,8 @@
<div class="column">
<button
class="btn-block btn btn-default"
[ngClass]="{ 'is-primary': !form.controls.isAboutDate.value }"
(click)="form.controls.isAboutDate.setValue(false)"
[ngClass]="{ 'is-primary': !pollService.form.controls.isAboutDate.value }"
(click)="pollService.form.controls.isAboutDate.setValue(false)"
>
<i class="fa fa-list-ul"></i>
{{ 'creation.kind.classic' | translate }}
@ -26,129 +26,3 @@
</div>
</div>
</div>
<!-- choix spécialement pour les dates-->
<div class="dates-list">
<div class="title">
<span class="count-dates">
{{ timeList.length }}
</span>
<span class="count-dates-txt">
{{ 'dates.count_time' | translate }}
(pour chaque jour)
</span>
</div>
<div class="actions">
<button (click)="addTime()" *ngIf="'false' === allowSeveralHours" class="btn btn--primary" id="add_time_button">
<i class="fa fa-plus" aria-hidden="true"></i>
{{ 'dates.add_time' | translate }}
</button>
<button
(click)="removeAllTimes()"
*ngIf="'false' === allowSeveralHours"
class="btn btn--warning"
id="remove_time_button"
>
<i class="fa fa-trash" aria-hidden="true"></i>
Aucune plage horaire
</button>
<button
(click)="resetTimes()"
*ngIf="'false' === allowSeveralHours"
class="btn btn--warning"
id="reset_time_button"
>
<i class="fa fa-refresh" aria-hidden="true"></i>
réinitialiser
</button>
</div>
<div *ngIf="'false' === allowSeveralHours" class="identical-dates">
<div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)">
<div *ngFor="let time of timeList; index as id" class="time-choice" cdkDrag>
<label for="timeChoices_{{ id }}">
<i class="fa fa-clock-o" aria-hidden="true"></i>
</label>
<input [(ngModel)]="time.literal" name="timeChoices_{{ id }}" type="text" id="timeChoices_{{ id }}" />
<button (click)="time.timeList.splice(id, 1)" class="btn btn-warning">
<i class="fa fa-times" aria-hidden="true"></i>
</button>
</div>
</div>
</div>
<hr />
<span class="count-dates title">
{{ dateList.length }}
</span>
<span>
{{ 'dates.count_dates' | translate }}
</span>
<button class="btn btn--primary" (click)="addChoice()">
{{ 'dates.add' | translate }}
</button>
<div *ngFor="let choice of dateList; index as id" class="date-choice">
<input
[(ngModel)]="choice.date_object"
name="dateChoices_{{ id }}"
id="dateChoices_{{ id }}"
useValueAsDate
type="date"
/>
<button (click)="dateList.splice(id, 1)" class="btn btn-warning">
<i class="fa fa-times" aria-hidden="true"></i>
</button>
<button (click)="addTimeToDate(choice, id)" *ngIf="'true' === allowSeveralHours" class="btn btn--primary">
{{ 'dates.add_time' | translate }}
</button>
<div *ngIf="'true' === allowSeveralHours" class="several-times">
<div *ngFor="let timeItem of choice.timeList; index as idTime" class="time-choice">
<input
[(ngModel)]="timeItem.literal"
name="dateTime_{{ id }}_Choices_{{ idTime }}"
id="dateTime_{{ id }}_Choices_{{ idTime }}"
type="text"
/>
<button (click)="choice.timeList.splice(idTime, 1)" class="btn btn-warning">
<i class="fa fa-times" aria-hidden="true"></i>
</button>
</div>
</div>
</div>
</div>
<button
(click)="showDateInterval = !showDateInterval"
[ngClass]="{ active: showDateInterval }"
class="btn btn--primary"
id="toggle_interval_button"
>
<i class="fa fa-clock-o" aria-hidden="true"></i>
{{ 'dates.add_interval' | translate }}
</button>
<section *ngIf="showDateInterval" class="date-interval form-row">
<h2>{{ 'dates.add_interval' | translate }}</h2>
<div class="columns">
<div class="column">
{{ 'dates.interval_propose' | translate }}
</div>
<div class="column">
<label for="start_interval" class="hidden">start</label>
<input id="start_interval" (change)="countDays()" formControlName="startDateInterval" type="date" />
</div>
</div>
<div class="columns">
<div class="column">
{{ 'dates.interval_span' | translate }}
</div>
<div class="column">
<label for="end_interval" class="hidden">end</label>
<input id="end_interval" formControlName="endDateInterval" type="date" />
</div>
</div>
<button (click)="addIntervalOfDates()" class="btn btn-block btn--primary">
<i class="fa fa-plus" aria-hidden="true"></i>
{{ 'dates.interval_button' | translate }}
{{ intervalDays }}
{{ 'dates.interval_button_dates' | translate }}
</button>
</section>

3
src/app/features/administration/form/step-two/step-two.component.scss

@ -0,0 +1,3 @@
.fa {
margin-right: 1em;
}

54
src/app/features/administration/form/step-two/step-two.component.ts

@ -1,4 +1,13 @@
import { Component, Input, OnInit } from '@angular/core';
import { ChangeDetectorRef, Component, Inject, Input, OnInit } from '@angular/core';
import { FormArray, FormBuilder } from '@angular/forms';
import { UuidService } from '../../../../core/services/uuid.service';
import { ApiService } from '../../../../core/services/api.service';
import { ToastService } from '../../../../core/services/toast.service';
import { PollService } from '../../../../core/services/poll.service';
import { DateUtilities } from '../../../old-stuff/config/DateUtilities';
import { DOCUMENT } from '@angular/common';
import { CdkDragDrop } from '@angular/cdk/drag-drop';
import { Router } from '@angular/router';
@Component({
selector: 'app-step-two',
@ -6,12 +15,51 @@ import { Component, Input, OnInit } from '@angular/core';
styleUrls: ['./step-two.component.scss'],
})
export class StepTwoComponent implements OnInit {
constructor() {}
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: DateUtilities,
private apiService: ApiService,
@Inject(DOCUMENT) private document: any
) {
this.form = this.pollService.form;
}
addIntervalOfDates() {}
<