Liness/framadate-responsive
5
0
Fork 0
forked from tykayn/funky-framadate-front
Code Pull Requests Activity

dispatch form functions in pollService, copy texts for mobile menu

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
src/app/core/components/header/header.component.html
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>

4
src/app/core/components/sibebar/navigation/navigation.component.html
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>

4
src/app/core/core.module.ts
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 {

313
src/app/core/services/poll.service.ts
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

18
src/app/features/administration/form/form.component.html
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>

286
src/app/features/administration/form/form.component.ts
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() {}
}

2
src/app/features/administration/form/step-five/step-five.component.html
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

28
src/app/features/administration/form/step-four/step-four.component.html
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"

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

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

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

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

54
src/app/features/administration/form/step-two/step-two.component.ts
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() {}
}

4
src/app/features/administration/stepper/stepper.component.scss
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;
}

4
src/app/features/consultation/consultation.component.html
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>

4
src/app/features/user-profile/user-polls/user-polls.component.html
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>

2
src/app/shared/components/selectors/language-selector/language-selector.component.html
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>

6
src/app/shared/components/selectors/theme-selector/theme-selector.component.html
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')"
>

4
src/assets/i18n/FR.json
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?",

1
src/environments/environment.prod.ts
View File

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

3
src/environments/environment.ts
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,

2
src/styles.scss
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

4
src/styles/libraries/_overrides.scss
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(

11
src/styles/partials/_form-controls.scss
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 {

74
src/styles/partials/_forms.scss
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;
}

19
src/styles/partials/_responsive.scss
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%;
}
}
}

5
src/styles/partials/global.scss
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;
}

2
src/styles/themes/_light.scss
View File

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

2
src/styles/variables.scss
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;