enable loading state in api creation, success page update
This commit is contained in:
tykayn
parent
bf1df96dcd
commit
a969b30a03
|
|
@ -6,21 +6,6 @@
|
|||
.subtitle {
|
||||
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 {
|
||||
margin: 2em 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -32,7 +32,6 @@ export class ApiService {
|
|||
private readonly usersPollsEndpoint = apiEndpoints.users.polls.name;
|
||||
private readonly usersPollsSendEmailEndpoint = apiEndpoints.users.polls.sendEmail.name;
|
||||
private baseHref: string;
|
||||
private loading = false;
|
||||
|
||||
constructor(private http: HttpClient, private loader: LoaderService, private toastService: ToastService) {
|
||||
this.baseHref = apiBaseHref;
|
||||
|
|
@ -99,13 +98,13 @@ export class ApiService {
|
|||
console.log('Error', error.message);
|
||||
}
|
||||
console.log(error.config);
|
||||
this.loading = false;
|
||||
this.loader.setStatus(false);
|
||||
}
|
||||
|
||||
public async createPoll(poll: Poll): Promise<Subscription> {
|
||||
// this.loader.setStatus(true);
|
||||
console.log('createPoll config', poll);
|
||||
|
||||
this.loader.setStatus(true);
|
||||
return this.axiosInstance.post(
|
||||
`${this.baseHref}${currentApiRoutes['api_new_poll']}`,
|
||||
poll,
|
||||
|
|
@ -310,12 +309,12 @@ export class ApiService {
|
|||
/////////////////////
|
||||
|
||||
public async sendEmailToUserOfItsPollsList(email: string): Promise<void> {
|
||||
if (this.loading) {
|
||||
if (this.loader.isLoading) {
|
||||
return;
|
||||
}
|
||||
// If user is not authenticated: the list of polls is send to user's email by the backend.
|
||||
try {
|
||||
this.loading;
|
||||
this.loader.setStatus(false);
|
||||
await this.axiosInstance.get<Poll[]>(
|
||||
`${this.usersEndpoint}/${email}${this.usersPollsEndpoint}${this.usersPollsSendEmailEndpoint}`
|
||||
);
|
||||
|
|
|
|||
|
|
@ -31,7 +31,9 @@ export class PollService implements Resolve<Poll> {
|
|||
private uuidService: UuidService,
|
||||
private titleService: Title,
|
||||
private toastService: ToastService
|
||||
) {}
|
||||
) {
|
||||
this._poll.next(new Poll());
|
||||
}
|
||||
|
||||
/**
|
||||
* auto fetch a poll when route is looking for one in the administration pattern
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ import { Poll } from '../../core/models/poll.model';
|
|||
styleUrls: ['./administration.component.scss'],
|
||||
})
|
||||
export class AdministrationComponent implements OnInit, OnDestroy {
|
||||
public poll: Poll = new Poll();
|
||||
public poll: Poll;
|
||||
private routeSubscription: Subscription;
|
||||
|
||||
constructor(private route: ActivatedRoute) {}
|
||||
|
|
|
|||
|
|
@ -6,16 +6,15 @@
|
|||
</p>
|
||||
<br />
|
||||
<label class="hidden" for="title">Titre</label>
|
||||
errors:
|
||||
<pre class="debug padded warning">
|
||||
form.errors :
|
||||
{{ form.controls.title.errors | json }}
|
||||
</pre
|
||||
>
|
||||
<!-- errors:-->
|
||||
<!-- <pre class="debug padded warning">-->
|
||||
<!-- form.errors :-->
|
||||
<!-- {{ form.controls.title.errors | json }}-->
|
||||
<!-- </pre-->
|
||||
<!-- >-->
|
||||
|
||||
<input
|
||||
matInput
|
||||
#title
|
||||
class="input is-block is-fullwidth"
|
||||
[placeholder]="'creation.choose_title_placeholder' | translate"
|
||||
formControlName="title"
|
||||
id="title"
|
||||
|
|
@ -24,6 +23,8 @@
|
|||
required="required"
|
||||
#title
|
||||
/>
|
||||
|
||||
<app-erasable-input [inputModel]="form.value.title"></app-erasable-input>
|
||||
<span class="button is-error" *ngIf="form.controls.title.errors">
|
||||
Ce champ est requis
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -7,52 +7,65 @@
|
|||
{{ 'creation.title' | translate }}
|
||||
</h1>
|
||||
</div>
|
||||
<div class="column">
|
||||
<!-- [disabled]="!form.valid || !form.valid"-->
|
||||
<button class="btn is-success" (click)="createPoll()">
|
||||
<i class="fa fa-save"></i>
|
||||
Enregistrer le sondage
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- [disabled]="!form.valid || !form.valid"-->
|
||||
|
||||
<button class="btn is-success is-fixed-bottom" (click)="createPoll()">
|
||||
<i class="fa fa-save"></i>
|
||||
Enregistrer le sondage
|
||||
</button>
|
||||
</header>
|
||||
<main class="columns">
|
||||
<div class="column">
|
||||
<p class="label is-medium">
|
||||
{{ 'creation.want' | translate }}
|
||||
</p>
|
||||
|
||||
<app-kind-select [form]="form"></app-kind-select>
|
||||
|
||||
<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 class="step-choices" *ngIf="currentStep === 'base'">
|
||||
<app-kind-select [form]="form"></app-kind-select>
|
||||
<app-base-config [form]="form"></app-base-config>
|
||||
</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>
|
||||
<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>
|
||||
|
||||
<button
|
||||
class="btn"
|
||||
[class]="{ 'is-primary': advancedDisplayEnabled, 'is-info': !advancedDisplayEnabled }"
|
||||
(click)="advancedDisplayEnabled = !advancedDisplayEnabled"
|
||||
>
|
||||
<i class="fa fa-save"></i>
|
||||
{{ 'creation.advanced' | translate }}
|
||||
</button>
|
||||
<app-advanced-config
|
||||
[poll]="poll"
|
||||
[form]="form"
|
||||
*ngIf="advancedDisplayEnabled"
|
||||
></app-advanced-config>
|
||||
<button
|
||||
class="btn"
|
||||
[class]="{ 'is-primary': advancedDisplayEnabled, 'is-info': !advancedDisplayEnabled }"
|
||||
(click)="advancedDisplayEnabled = !advancedDisplayEnabled"
|
||||
>
|
||||
<i class="fa fa-save"></i>
|
||||
{{ 'creation.advanced' | translate }}
|
||||
</button>
|
||||
<app-advanced-config
|
||||
[poll]="poll"
|
||||
[form]="form"
|
||||
*ngIf="advancedDisplayEnabled"
|
||||
></app-advanced-config>
|
||||
</div>
|
||||
<div class="bar-nav-admin">
|
||||
<div class="columns">
|
||||
<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>
|
||||
</main>
|
||||
<footer class="column" *ngIf="show_debug_data">
|
||||
|
|
|
|||
|
|
@ -84,4 +84,13 @@
|
|||
.btn {
|
||||
margin: 0.5em;
|
||||
}
|
||||
|
||||
.bar-nav-admin {
|
||||
//position:fixed;
|
||||
//bottom: 0;
|
||||
background: #ccc;
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 1em;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -22,6 +22,8 @@ export class FormComponent implements OnInit {
|
|||
|
||||
public advancedDisplayEnabled = false;
|
||||
public show_debug_data = false;
|
||||
public currentStep = 'base';
|
||||
public steps = ['base', 'choices', 'advanced'];
|
||||
|
||||
constructor(
|
||||
private fb: FormBuilder,
|
||||
|
|
@ -36,6 +38,7 @@ export class FormComponent implements OnInit {
|
|||
|
||||
ngOnInit(): void {
|
||||
this.initFormDefault();
|
||||
// this.goNextStep();
|
||||
}
|
||||
|
||||
initFormDefault(showDemoValues = environment.autofill): void {
|
||||
|
|
@ -105,7 +108,7 @@ export class FormComponent implements OnInit {
|
|||
* add example values to the form, overrides defaults of PollConfiguration
|
||||
*/
|
||||
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({
|
||||
title: title,
|
||||
custom_url: this.pollUtilitiesService.makeSlugFromString(title),
|
||||
|
|
@ -145,7 +148,11 @@ export class FormComponent implements OnInit {
|
|||
alert('todo');
|
||||
}
|
||||
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 {
|
||||
|
|
|
|||
|
|
@ -1,68 +1,84 @@
|
|||
<section class="hero is-medium is-success">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<h1 class="title is-1">
|
||||
{{ 'resume.title' | translate }}
|
||||
</h1>
|
||||
<div class="container has-text-centered">
|
||||
<h1 class="title is-1">🎉 {{ 'resume.title' | translate }}</h1>
|
||||
<h2 class="subtitle">
|
||||
{{ 'resume.admins' | translate }}
|
||||
Votre sondage «
|
||||
<strong class="poll-title">
|
||||
{{ poll.title }}
|
||||
</strong>
|
||||
» a bien été créé !
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<br />
|
||||
<section class="text-center">
|
||||
<section class="admin">
|
||||
<h2 i18n></h2>
|
||||
<p>
|
||||
Votre sondage «
|
||||
<strong class="poll-title">
|
||||
{{ poll.title }}
|
||||
</strong>
|
||||
» a bien été créé !
|
||||
</p>
|
||||
<p>
|
||||
Voici les liens d’accès au sondage, conservez-les soigneusement ! (Si vous les perdez vous pourrez toujours
|
||||
les recevoir par email)
|
||||
</p>
|
||||
<div class="container padded">
|
||||
<div class="has-text-centered">
|
||||
<div class="main-block">
|
||||
<div class="admin">
|
||||
<h2 class="title is-2">
|
||||
{{ 'resume.admins' | translate }}
|
||||
</h2>
|
||||
<p>
|
||||
Voici les liens d’accès au sondage, conservez-les soigneusement ! (Si vous les perdez vous pourrez
|
||||
toujours les recevoir par email)
|
||||
</p>
|
||||
<h2 class="title is-2">
|
||||
Côté admin
|
||||
</h2>
|
||||
<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>
|
||||
Pour accéder au sondage et à tous ses paramètres :
|
||||
<a href="{{ pollService.getAdministrationUrl() }}">{{ pollService.getAdministrationUrl() }} </a>
|
||||
</p>
|
||||
<app-copy-text [textToCopy]="pollService.getAdministrationUrl()"></app-copy-text>
|
||||
<a [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>
|
||||
</section>
|
||||
<section class="public">
|
||||
<h2 i18n>{{ 'resume.users' | translate }}</h2>
|
||||
<p>
|
||||
Pour modifier le sondage :
|
||||
<a href="{{ pollService.getAdministrationUrl() }}">{{ pollService.getAdministrationUrl() }} </a>
|
||||
</p>
|
||||
<app-copy-text [textToCopy]="pollService.getAdministrationUrl()"></app-copy-text>
|
||||
<a href="{{ pollService.getAdministrationUrl() }}"> <i class="fa fa-pencil"></i> Modifier le sondage </a>
|
||||
</section>
|
||||
<section class="mail">
|
||||
<h2 i18n>{{ 'resume.links_mail' | translate }}</h2>
|
||||
<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>
|
||||
<!-- <img src="assets/img/undraw_group_selfie_ijc6.svg" alt="image succès" />-->
|
||||
</div>
|
||||
<section class="mail">
|
||||
<h2 i18n>{{ 'resume.links_mail' | translate }}</h2>
|
||||
<p>
|
||||
<label for="email">
|
||||
Pour être sûr de retrouver ces liens, nous pouvons vous les envoyer sur votre mail :
|
||||
</label>
|
||||
<br />
|
||||
<input type="email" [(ngModel)]="mailToRecieve" placeholder="email" />
|
||||
<br />
|
||||
<button class="btn btn--primary" (click)="sendToEmail()">
|
||||
Envoyer les liens du sondage
|
||||
<i class="fa fa-paper-plane" aria-hidden="true"></i>
|
||||
</button>
|
||||
<br />
|
||||
<br />
|
||||
<a class="button is-info" href="{{ poll.custom_url }}">
|
||||
Voir le sondage côté public
|
||||
</a>
|
||||
</p>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,6 @@
|
|||
.button,
|
||||
a,
|
||||
button {
|
||||
margin-bottom: 1ch;
|
||||
margin-right: 1ch;
|
||||
}
|
||||
|
|
@ -2,6 +2,7 @@ import { Component, Input, OnInit } from '@angular/core';
|
|||
import { PollService } from '../../../core/services/poll.service';
|
||||
import { Poll } from '../../../core/models/poll.model';
|
||||
import { environment } from 'src/environments/environment';
|
||||
import { Title } from '@angular/platform-browser';
|
||||
|
||||
@Component({
|
||||
selector: 'app-success',
|
||||
|
|
@ -13,8 +14,13 @@ export class SuccessComponent {
|
|||
mailToRecieve: string;
|
||||
window: any = window;
|
||||
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() {
|
||||
alert('todo');
|
||||
|
|
|
|||
|
|
@ -19,6 +19,8 @@ select {
|
|||
|
||||
input {
|
||||
margin-right: 1ch;
|
||||
margin-bottom: 1em;
|
||||
margin-top: 1em;
|
||||
|
||||
&[type='date']::after {
|
||||
content: 'au format JJ/MM/AAAA';
|
||||
|
|
|
|||
|
|
@ -6,3 +6,22 @@ main {
|
|||
margin: 0 auto;
|
||||
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;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue