tykayn
/
funky-framadate-front
mirror of https://framagit.org/framasoft/framadate/funky-framadate-front.git
1
1
Fork 0
Code Issues Projects Releases Wiki Activity

enable loading state in api creation, success page update

This commit is contained in:
Tykayn 2021-05-03 12:36:03 +02:00 committed by tykayn
parent bf1df96dcd
commit a969b30a03
13 changed files with 196 additions and 131 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/app/core/components/home/home.component.scss
View File

@ -6,21 +6,6 @@
.subtitle { .subtitle {
min-height: 4em; min-height: 4em;
} }
.creation,
.search {
min-height: 20em;
max-width: 40em;
margin-bottom: 10em;
margin-left: auto;
margin-right: auto;
.title {
margin-bottom: 2em;
}
.button {
border: 0;
}
}
.poll-list { .poll-list {
margin: 2em 0; margin: 2em 0;
} }

9
src/app/core/services/api.service.ts
View File

@ -32,7 +32,6 @@ export class ApiService {
private readonly usersPollsEndpoint = apiEndpoints.users.polls.name; private readonly usersPollsEndpoint = apiEndpoints.users.polls.name;
private readonly usersPollsSendEmailEndpoint = apiEndpoints.users.polls.sendEmail.name; private readonly usersPollsSendEmailEndpoint = apiEndpoints.users.polls.sendEmail.name;
private baseHref: string; private baseHref: string;
private loading = false;
constructor(private http: HttpClient, private loader: LoaderService, private toastService: ToastService) { constructor(private http: HttpClient, private loader: LoaderService, private toastService: ToastService) {
this.baseHref = apiBaseHref; this.baseHref = apiBaseHref;
@ -99,13 +98,13 @@ export class ApiService {
console.log('Error', error.message); console.log('Error', error.message);
} }
console.log(error.config); console.log(error.config);
this.loading = false; this.loader.setStatus(false);
} }
public async createPoll(poll: Poll): Promise<Subscription> { public async createPoll(poll: Poll): Promise<Subscription> {
// this.loader.setStatus(true); // this.loader.setStatus(true);
console.log('createPoll config', poll); console.log('createPoll config', poll);
this.loader.setStatus(true);
return this.axiosInstance.post( return this.axiosInstance.post(
`${this.baseHref}${currentApiRoutes['api_new_poll']}`, `${this.baseHref}${currentApiRoutes['api_new_poll']}`,
poll, poll,
@ -310,12 +309,12 @@ export class ApiService {
///////////////////// /////////////////////
public async sendEmailToUserOfItsPollsList(email: string): Promise<void> { public async sendEmailToUserOfItsPollsList(email: string): Promise<void> {
if (this.loading) { if (this.loader.isLoading) {
return; return;
} }
// If user is not authenticated: the list of polls is send to user's email by the backend. // If user is not authenticated: the list of polls is send to user's email by the backend.
try { try {
this.loading; this.loader.setStatus(false);
await this.axiosInstance.get<Poll[]>( await this.axiosInstance.get<Poll[]>(
`${this.usersEndpoint}/${email}${this.usersPollsEndpoint}${this.usersPollsSendEmailEndpoint}` `${this.usersEndpoint}/${email}${this.usersPollsEndpoint}${this.usersPollsSendEmailEndpoint}`
); );

4
src/app/core/services/poll.service.ts
View File

@ -31,7 +31,9 @@ export class PollService implements Resolve<Poll> {
private uuidService: UuidService, private uuidService: UuidService,
private titleService: Title, private titleService: Title,
private toastService: ToastService private toastService: ToastService
) {} ) {
this._poll.next(new Poll());
}
/** /**
* auto fetch a poll when route is looking for one in the administration pattern * auto fetch a poll when route is looking for one in the administration pattern

2
src/app/features/administration/administration.component.ts
View File

@ -10,7 +10,7 @@ import { Poll } from '../../core/models/poll.model';
styleUrls: ['./administration.component.scss'], styleUrls: ['./administration.component.scss'],
}) })
export class AdministrationComponent implements OnInit, OnDestroy { export class AdministrationComponent implements OnInit, OnDestroy {
public poll: Poll = new Poll(); public poll: Poll;
private routeSubscription: Subscription; private routeSubscription: Subscription;
constructor(private route: ActivatedRoute) {} constructor(private route: ActivatedRoute) {}

17
src/app/features/administration/form/base-config/base-config.component.html
View File

@ -6,16 +6,15 @@
</p> </p>
<br /> <br />
<label class="hidden" for="title">Titre</label> <label class="hidden" for="title">Titre</label>
errors: <!-- errors:-->
<pre class="debug padded warning"> <!-- <pre class="debug padded warning">-->
form.errors : <!-- form.errors :-->
{{ form.controls.title.errors | json }} <!-- {{ form.controls.title.errors | json }}-->
</pre <!-- </pre-->
> <!-- >-->
<input <input
matInput class="input is-block is-fullwidth"
#title
[placeholder]="'creation.choose_title_placeholder' | translate" [placeholder]="'creation.choose_title_placeholder' | translate"
formControlName="title" formControlName="title"
id="title" id="title"
@ -24,6 +23,8 @@
required="required" required="required"
#title #title
/> />
<app-erasable-input [inputModel]="form.value.title"></app-erasable-input>
<span class="button is-error" *ngIf="form.controls.title.errors"> <span class="button is-error" *ngIf="form.controls.title.errors">
Ce champ est requis Ce champ est requis
</span> </span>

89
src/app/features/administration/form/form.component.html
View File

@ -7,52 +7,65 @@
{{ 'creation.title' | translate }} {{ 'creation.title' | translate }}
</h1> </h1>
</div> </div>
<div class="column">
<!-- [disabled]="!form.valid || !form.valid"--> <!-- [disabled]="!form.valid || !form.valid"-->
<button class="btn is-success" (click)="createPoll()">
<i class="fa fa-save"></i> <button class="btn is-success is-fixed-bottom" (click)="createPoll()">
Enregistrer le sondage <i class="fa fa-save"></i>
</button> Enregistrer le sondage
</div> </button>
</header> </header>
<main class="columns"> <main class="columns">
<div class="column"> <div class="column">
<p class="label is-medium"> <p class="label is-medium">
{{ 'creation.want' | translate }} {{ 'creation.want' | translate }}
</p> </p>
<div class="step-choices" *ngIf="currentStep === 'base'">
<app-kind-select [form]="form"></app-kind-select> <app-kind-select [form]="form"></app-kind-select>
<app-base-config [form]="form"></app-base-config>
<div class="field is-grouped is-grouped-right">
<p class="control">
<a class="button is-light" (click)="goPreviousStep()">
Précédent
</a>
</p>
<p class="control">
<a class="button is-primary" (click)="goNextStep()">
Suivant
</a>
</p>
</div> </div>
<div class="step-choices" *ngIf="currentStep === 'choices'">
<app-date-select
*ngIf="form.value && form.value.kind == 'date'"
[form]="form"
></app-date-select>
<app-text-select
*ngIf="form.value && form.value.kind == 'date'"
[form]="form"
></app-text-select>
<app-base-config [form]="form"></app-base-config> <button
<app-date-select *ngIf="form.value && form.value.kind == 'date'" [form]="form"></app-date-select> class="btn"
<app-text-select *ngIf="form.value && form.value.kind == 'date'" [form]="form"></app-text-select> [class]="{ 'is-primary': advancedDisplayEnabled, 'is-info': !advancedDisplayEnabled }"
(click)="advancedDisplayEnabled = !advancedDisplayEnabled"
<button >
class="btn" <i class="fa fa-save"></i>
[class]="{ 'is-primary': advancedDisplayEnabled, 'is-info': !advancedDisplayEnabled }" {{ 'creation.advanced' | translate }}
(click)="advancedDisplayEnabled = !advancedDisplayEnabled" </button>
> <app-advanced-config
<i class="fa fa-save"></i> [poll]="poll"
{{ 'creation.advanced' | translate }} [form]="form"
</button> *ngIf="advancedDisplayEnabled"
<app-advanced-config ></app-advanced-config>
[poll]="poll" </div>
[form]="form" <div class="bar-nav-admin">
*ngIf="advancedDisplayEnabled" <div class="columns">
></app-advanced-config> <div class="column">
<p class="control">
<a class="button is-light" (click)="goPreviousStep()">
Précédent
</a>
</p>
</div>
<div class="column">
<p class="control text-right">
<a class="button is-primary" (click)="goNextStep()">
Suivant
</a>
</p>
</div>
</div>
</div>
</div> </div>
</main> </main>
<footer class="column" *ngIf="show_debug_data"> <footer class="column" *ngIf="show_debug_data">

9
src/app/features/administration/form/form.component.scss
View File

@ -84,4 +84,13 @@
.btn { .btn {
margin: 0.5em; margin: 0.5em;
} }
.bar-nav-admin {
//position:fixed;
//bottom: 0;
background: #ccc;
display: block;
width: 100%;
padding: 1em;
}
} }

11
src/app/features/administration/form/form.component.ts
View File

@ -22,6 +22,8 @@ export class FormComponent implements OnInit {
public advancedDisplayEnabled = false; public advancedDisplayEnabled = false;
public show_debug_data = false; public show_debug_data = false;
public currentStep = 'base';
public steps = ['base', 'choices', 'advanced'];
constructor( constructor(
private fb: FormBuilder, private fb: FormBuilder,
@ -36,6 +38,7 @@ export class FormComponent implements OnInit {
ngOnInit(): void { ngOnInit(): void {
this.initFormDefault(); this.initFormDefault();
// this.goNextStep();
} }
initFormDefault(showDemoValues = environment.autofill): void { initFormDefault(showDemoValues = environment.autofill): void {
@ -105,7 +108,7 @@ export class FormComponent implements OnInit {
* add example values to the form, overrides defaults of PollConfiguration * add example values to the form, overrides defaults of PollConfiguration
*/ */
setDemoValues(): void { setDemoValues(): void {
const title = 'le titre de démo oh oh' + new Date(); const title = 'le titre de démo oh oh ' + new Date().getTime();
this.form.patchValue({ this.form.patchValue({
title: title, title: title,
custom_url: this.pollUtilitiesService.makeSlugFromString(title), custom_url: this.pollUtilitiesService.makeSlugFromString(title),
@ -145,7 +148,11 @@ export class FormComponent implements OnInit {
alert('todo'); alert('todo');
} }
goNextStep() { goNextStep() {
alert('todo'); console.log('this.steps', this.steps);
let indexCurrentStep = this.steps.indexOf(this.currentStep);
indexCurrentStep += 1;
this.currentStep = this.steps[indexCurrentStep];
window.scrollTo(0, 0);
} }
public createPoll(): void { public createPoll(): void {

136
src/app/features/administration/success/success.component.html
View File

@ -1,68 +1,84 @@
<section class="hero is-medium is-success"> <section class="hero is-medium is-success">
<div class="hero-body"> <div class="hero-body">
<div class="container"> <div class="container has-text-centered">
<h1 class="title is-1"> <h1 class="title is-1">🎉 {{ 'resume.title' | translate }}</h1>
{{ 'resume.title' | translate }}
</h1>
<h2 class="subtitle"> <h2 class="subtitle">
{{ 'resume.admins' | translate }} Votre sondage «
<strong class="poll-title">
{{ poll.title }}
</strong>
» a bien été créé !
</h2> </h2>
</div> </div>
</div> </div>
</section> </section>
<br /> <div class="container padded">
<section class="text-center"> <div class="has-text-centered">
<section class="admin"> <div class="main-block">
<h2 i18n></h2> <div class="admin">
<p> <h2 class="title is-2">
Votre sondage « {{ 'resume.admins' | translate }}
<strong class="poll-title"> </h2>
{{ poll.title }} <p>
</strong> Voici les liens d’accès au sondage, conservez-les soigneusement ! (Si vous les perdez vous pourrez
» a bien été créé ! toujours les recevoir par email)
</p> </p>
<p> <h2 class="title is-2">
Voici les liens d’accès au sondage, conservez-les soigneusement ! (Si vous les perdez vous pourrez toujours Côté admin
les recevoir par email) </h2>
</p> <p>
Pour accéder au sondage et à tous ses paramètres :
<br />
<a class="button is-info" href="{{ pollService.getAdministrationUrl() }}"
>{{ pollService.getAdministrationUrl() }}
</a>
</p>
<app-copy-text [textToCopy]="pollService.getAdministrationUrl()"></app-copy-text>
<a class="button is-info" [href]="pollService.getAdministrationUrl()">
Voir le sondage coté administrateur·ice
</a>
<p class="note">
Note : Le sondage sera supprimé {{ poll.default_expiracy_days_from_now }} jours après la date de sa
dernière modification.
</p>
</div>
<div class="public">
<h2 class="title is-2" i18n>{{ 'resume.users' | translate }}</h2>
<p>
Pour modifier le sondage :
<br />
<a class="button is-info" href="{{ pollService.getAdministrationUrl() }}"
>{{ pollService.getAdministrationUrl() }}
</a>
</p>
<app-copy-text [textToCopy]="pollService.getAdministrationUrl()"></app-copy-text>
<br />
<a class="button is-info" href="{{ pollService.getAdministrationUrl() }}">
<i class="fa fa-pencil"></i> Modifier le sondage
</a>
</div>
<p> <!-- <img src="assets/img/undraw_group_selfie_ijc6.svg" alt="image succès" />-->
Pour accéder au sondage et à tous ses paramètres : </div>
<a href="{{ pollService.getAdministrationUrl() }}">{{ pollService.getAdministrationUrl() }} </a> <section class="mail">
</p> <h2 i18n>{{ 'resume.links_mail' | translate }}</h2>
<app-copy-text [textToCopy]="pollService.getAdministrationUrl()"></app-copy-text> <p>
<a [href]="pollService.getAdministrationUrl()"> <label for="email">
Voir le sondage coté administrateur·ice Pour être sûr de retrouver ces liens, nous pouvons vous les envoyer sur votre mail :
</a> </label>
<p class="note"> <br />
Note : Le sondage sera supprimé {{ poll.default_expiracy_days_from_now }} jours après la date de sa dernière <input type="email" [(ngModel)]="mailToRecieve" placeholder="email" />
modification. <br />
</p> <button class="btn btn--primary" (click)="sendToEmail()">
</section> Envoyer les liens du sondage
<section class="public"> <i class="fa fa-paper-plane" aria-hidden="true"></i>
<h2 i18n>{{ 'resume.users' | translate }}</h2> </button>
<p> <br />
Pour modifier le sondage : <br />
<a href="{{ pollService.getAdministrationUrl() }}">{{ pollService.getAdministrationUrl() }} </a> <a class="button is-info" href="{{ poll.custom_url }}">
</p> Voir le sondage côté public
<app-copy-text [textToCopy]="pollService.getAdministrationUrl()"></app-copy-text> </a>
<a href="{{ pollService.getAdministrationUrl() }}"> <i class="fa fa-pencil"></i> Modifier le sondage </a> </p>
</section> </section>
<section class="mail"> </div>
<h2 i18n>{{ 'resume.links_mail' | translate }}</h2> </div>
<p>
Pour être sur de retrouver ces liens, nous pouvons vous les envoyer sur votre mail :
<input type="email" [(ngModel)]="mailToRecieve" placeholder="email" />
</p>
<button class="btn btn--primary" (click)="sendToEmail()">
<i class="fa fa-paper-plane" aria-hidden="true"></i>
Envoyer les liens du sondage
</button>
<a href="{{ poll.custom_url }}">
Voir le sondage côté public
</a>
</section>
<!-- <img src="assets/img/undraw_group_selfie_ijc6.svg" alt="image succès" />-->
</section>

6
src/app/features/administration/success/success.component.scss
View File

@ -0,0 +1,6 @@
.button,
a,
button {
margin-bottom: 1ch;
margin-right: 1ch;
}

8
src/app/features/administration/success/success.component.ts
View File

@ -2,6 +2,7 @@ import { Component, Input, OnInit } from '@angular/core';
import { PollService } from '../../../core/services/poll.service'; import { PollService } from '../../../core/services/poll.service';
import { Poll } from '../../../core/models/poll.model'; import { Poll } from '../../../core/models/poll.model';
import { environment } from 'src/environments/environment'; import { environment } from 'src/environments/environment';
import { Title } from '@angular/platform-browser';
@Component({ @Component({
selector: 'app-success', selector: 'app-success',
@ -13,8 +14,13 @@ export class SuccessComponent {
mailToRecieve: string; mailToRecieve: string;
window: any = window; window: any = window;
environment = environment; environment = environment;
constructor(public pollService: PollService, private titleService: Title) {
this.titleService.setTitle(environment.appTitle + ' - 🎉 succès de création de sondage -');
constructor(public pollService: PollService) {} this.pollService.poll.subscribe((newpoll: Poll) => {
this.poll = newpoll;
});
}
sendToEmail() { sendToEmail() {
alert('todo'); alert('todo');

2
src/styles/partials/_forms.scss
View File

@ -19,6 +19,8 @@ select {
input { input {
margin-right: 1ch; margin-right: 1ch;
margin-bottom: 1em;
margin-top: 1em;
&[type='date']::after { &[type='date']::after {
content: 'au format JJ/MM/AAAA'; content: 'au format JJ/MM/AAAA';

19
src/styles/partials/_main.scss
View File

@ -6,3 +6,22 @@ main {
margin: 0 auto; margin: 0 auto;
padding: 0 2rem; padding: 0 2rem;
} }
.main-block {
min-height: 20em;
max-width: 40em;
margin-bottom: 10em;
margin-left: auto;
margin-right: auto;
.title {
margin-top: 2em;
margin-bottom: 2em;
}
.button {
border: 0;
}
}
.creation,
.search {
@extend .main-block;
}