dispatch form functions in pollService, copy texts for mobile menu

This commit is contained in:
Tykayn 2021-10-19 12:14:11 +02:00 committed by tykayn
parent 2546d0d813
commit 1d33d0787c
29 changed files with 648 additions and 632 deletions

View File

@ -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>

View File

@ -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>

View File

@ -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 {

View File

@ -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
* @param config
* add all the dates between the start and end dates in the interval section
*/
makeSlug(config: Poll): string {
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(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

View File

@ -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>

View File

@ -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);
this.pollService.askInitFormDefault();
}
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();
}
}
}
/**
* 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() {}
}

View File

@ -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

View File

@ -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"

View File

@ -4,18 +4,23 @@
<h2 class="title is-2">
{{ 'creation.choose_title' | translate }}
</h2>
<div class="columns">
<div class="column">
<label class="hidden" for="title">Titre</label>
<input
class="input input-lg"
class="input-lg"
#title
matInput
[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"
@ -26,17 +31,24 @@
>
<i class="fa fa-close"></i>
</button>
</div>
</div>
</section>
<div class="poll-description">
<div class="columns">
<div class="column">
<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>
<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
@ -44,6 +56,8 @@
<div class="text-info">
300 caractères maximum
</div>
</div>
<div class="column">
<button
mat-button
*ngIf="description.value"
@ -55,5 +69,7 @@
<i class="fa fa-close"></i>
</button>
</div>
</div>
</div>
</form>
</div>

View File

@ -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>
</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 #title matInput placeholder="pseudo" formControlName="creatorPseudo" id="creatorPseudo" required />
<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
#title
matInput
placeholder="mon-email@example.com"
formControlName="creatorEmail"
id="creatorEmail"
required
[(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>

View File

@ -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>

View File

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

View File

@ -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() {}
get choices(): FormArray {
return this.form.get('choices') as FormArray;
}
addTime() {}
removeAllTimes() {}
resetTimes() {}
drop(event: CdkDragDrop<string[]>) {
// moveItemInArray(this.choices, event.previousIndex, event.currentIndex);
}
addChoice() {}
addTimeToDate(choice: any, id: number) {}
countDays() {}
}

View File

@ -5,7 +5,7 @@
height: 0.5em;
display: inline-block;
min-width: 1px;
background: $grey-light;
background: $border-color !important;
width: 100%;
}
.step-bar-progress {
@ -15,5 +15,5 @@
height: 0.5em;
display: inline-block;
min-width: 1px;
background: $primary;
background: $primary_color;
}

View File

@ -27,10 +27,10 @@
</div>
</div>
<footer class="card-footer" *ngIf="!isArchived">
<a routerLink="{{ '../../../poll/' + poll.slug + '/participation' }}" class="card-footer-item">
<a routerLink="{{ '../../../poll/' + poll.custom_url + '/participation' }}" class="card-footer-item">
Participer
</a>
<a routerLink="{{ '../../../poll/' + poll.slug + '/administration' }}" class="card-footer-item">
<a routerLink="{{ '../../../poll/' + poll.custom_url + '/administration' }}" class="card-footer-item">
Administrer
</a>
</footer>

View File

@ -13,8 +13,8 @@
<tr *ngFor="let poll of (_user | async)?.polls">
<th>{{ poll.title }}</th>
<td>
<a routerLink="{{ '../../poll/' + poll.slug + '/consultation' }}">
{{ poll.slug }}
<a routerLink="{{ '../../poll/' + poll.custom_url + '/consultation' }}">
{{ poll.custom_url }}
</a>
</td>
</tr>

View File

@ -2,7 +2,7 @@
<img src="assets/img/icone-langue.svg" alt="langue" />
<div class="buttons has-addons">
<label for="lang_selector" class="hidden">{{ 'selector.lang' | translate }}</label>
<select class="select" id="lang_selector" (change)="setLang()" [(ngModel)]="currentLang">
<select class="input select" id="lang_selector" (change)="setLang()" [(ngModel)]="currentLang">
<option *ngFor="let language of availableLanguages" value="{{ language }}">
{{ language }} - {{ 'LANGUAGES.' + language | translate }}
</option>

View File

@ -2,21 +2,21 @@
<div class="column">
<div class="buttons has-addons">
<button
class="button"
class="button is-outlined"
[ngClass]="{ 'is-active': (currentTheme | async) === themeEnum.LIGHT }"
(click)="selectTheme('LIGHT')"
>
<i class="fa fa-sun-o" aria-hidden="true"></i>
</button>
<button
class="button"
class="button is-outlined"
[ngClass]="{ 'is-active': (currentTheme | async) === themeEnum.DARK }"
(click)="selectTheme('DARK')"
>
<i class="fa fa-moon" aria-hidden="true"></i>
</button>
<button
class="button"
class="button is-outlined"
[ngClass]="{ 'is-active': (currentTheme | async) === themeEnum.RED }"
(click)="selectTheme('RED')"
>

View File

@ -30,8 +30,8 @@
"want": "Je veux créer un sondage",
"advanced": "Options avancées",
"kind": {
"classic": "classique",
"date": "spécial dates"
"classic": "Textes",
"date": "Dates"
},
"choose_title": "Renseignez un nom pour votre sondage",
"choose_title_placeholder": "Quel resto ce soir?",

View File

@ -38,6 +38,7 @@ export const environment = {
},
},
poll: {
autoFillDemo: false,
defaultConfig: {
expiracyInDays: 60,
expiracyAfterLastModificationInDays: 180,

View File

@ -16,7 +16,7 @@ const apiV1 = {
export const environment = {
production: false,
appTitle: 'FramaDate',
appTitle: 'FunkyDate',
appVersion: '2.0.0',
appLogo: 'assets/img/logo.png',
api: {
@ -53,6 +53,7 @@ export const environment = {
},
},
poll: {
autoFillDemo: true,
defaultConfig: {
expiracyInDays: 60,
expiracyAfterLastModificationInDays: 180,

View File

@ -34,7 +34,7 @@
@import './styles/variables';
@import './styles/dev-utilities/mixins';
@import './styles/dev-utilities/helpers';
// @import './styles/dev-utilities/debug';
@import './styles/dev-utilities/debug';
@import './styles/libraries/frameworks';
@import './styles/libraries/overrides';
// typography

View File

@ -9,8 +9,8 @@ $fullhd-enabled: false;
// Update some of Bulma's component variables
$body-background-color: $black;
$control-border-width: 2px;
$input-border-color: transparent;
$input-shadow: none;
$input-border-color: $border-color;
// $input-shadow: none;
// bulma css override
$colors: mergeColorMaps(

View File

@ -2,14 +2,9 @@ input,
select,
textarea {
@extend .clickable;
margin-bottom: 0.25rem;
padding: 0.5rem;
&:active,
&:focus,
&:hover {
color: $primary_color;
}
@extend .input;
padding: calc(0.5em - 1px);
border-color: $border-color !important;
}
textarea {

View File

@ -1,78 +1,6 @@
@charset "UTF-8";
label {
line-height: 2.5em;
}
.ui-inputswitch {
margin-left: 1ch;
margin-right: 1ch;
}
.input-lg {
display: block;
width: 100%;
}
select {
margin-right: 1ch;
}
input {
margin-right: 1ch;
&[type='date']::after {
content: 'au format JJ/MM/AAAA';
display: inline-block;
position: relative;
}
}
input,
select,
textarea {
width: 100%;
padding: 1rem;
border: 1px solid $border-color;
}
input,
select {
display: inline-block;
margin-bottom: 10px;
margin-left: 5px;
}
.next {
max-width: 200px;
}
input[type='text'],
textarea {
max-width: 350px;
}
li {
list-style-type: none;
}
.next {
margin-bottom: 50px;
}
.nobold {
font-weight: normal;
}
.btn-block {
display: block;
width: 100%;
}
button[type='submit'] {
margin-top: 2em;
}
hr {
margin: 4em 0;
border: solid 3px $primary;
border: solid 3px $primary_color;
}

View File

@ -1,21 +1,2 @@
@media (min-width: $widescreen) {
select,
input,
label + select,
label {
width: 45%;
}
.date-choice > input:first-of-type {
width: 80%;
}
.date-choice .btn--primary,
.several-times {
margin-left: 1rem;
display: inline-block;
}
.time-choice {
input {
width: 70%;
}
}
}

View File

@ -1,9 +1,6 @@
@charset "UTF-8";
html {
font-size: 1rem; /* 10px */
font-size: 1rem; /* 16px */
color: $font_color;
}
main {
min-height: 90vh;
}

View File

@ -1,5 +1,5 @@
#big_container {
background: $primary;
background: $primary_color;
&.theme-light-watermelon {
.big-header {

View File

@ -51,7 +51,7 @@ $choice_select_border_color: $d-info;
$hover-color: $d-neutral;
$border-color: $d-neutral;
$grey-dark: $d-primary;
$grey-light: $beige-light;
$grey-lighter: $beige-light;
$clicked-color: $d-primary;
$mini-button-color: $d-primary-intense;
$warning: $d-warning;