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

success page

This commit is contained in:
Tykayn 2022-02-09 11:30:22 +01:00 committed by tykayn
parent bd825ec20e
commit a67d2bd58a
17 changed files with 175 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/app/core/core.module.ts
View File

@ -4,8 +4,6 @@ import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router'; import { RouterModule } from '@angular/router';
import { TranslateModule } from '@ngx-translate/core'; import { TranslateModule } from '@ngx-translate/core';
import { FooterComponent } from './components/footer/footer.component';
import { HeaderComponent } from './components/header/header.component';
import { HomeComponent } from './components/home/home.component'; import { HomeComponent } from './components/home/home.component';
import { LogoComponent } from './components/logo/logo.component'; import { LogoComponent } from './components/logo/logo.component';
import { NavigationComponent } from './components/sibebar/navigation/navigation.component'; import { NavigationComponent } from './components/sibebar/navigation/navigation.component';
@ -14,9 +12,9 @@ import { SharedModule } from '../shared/shared.module';
import { DialogModule } from 'primeng/dialog'; import { DialogModule } from 'primeng/dialog';
@NgModule({ @NgModule({
declarations: [FooterComponent, HeaderComponent, HomeComponent, LogoComponent, NavigationComponent], declarations: [HomeComponent, LogoComponent, NavigationComponent],
imports: [CommonModule, FormsModule, RouterModule, TranslateModule, SharedModule, DialogModule], imports: [CommonModule, FormsModule, RouterModule, TranslateModule, SharedModule, DialogModule],
exports: [HeaderComponent, FooterComponent, NavigationComponent, LogoComponent], exports: [NavigationComponent, LogoComponent],
}) })
export class CoreModule { export class CoreModule {
constructor(@Optional() @SkipSelf() parentModule: CoreModule) { constructor(@Optional() @SkipSelf() parentModule: CoreModule) {

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

@ -615,11 +615,14 @@ export class PollService implements Resolve<Poll> {
const polltemp = this._poll.getValue(); const polltemp = this._poll.getValue();
if (polltemp) { if (polltemp) {
url = `${environment.frontDomain}/#/poll/${polltemp.custom_url}/consultation`; url = `${environment.frontDomain}/#/poll/${polltemp.custom_url}/consultation`;
} else {
url = `${environment.frontDomain}/#/poll/${this.form.value.custom_url}/consultation`;
} }
} else { } else {
url = `${environment.frontDomain}/#/poll/${this.form.value.custom_url}/consultation`; url = `${environment.frontDomain}/#/poll/${this.form.value.custom_url}/consultation`;
} }
console.log('getParticipationUrl', url);
// TODO handle pass access // TODO handle pass access
return url; return url;
} }

1
src/app/features/administration/administration.module.ts
View File

@ -37,6 +37,7 @@ import { HoursComponent } from './form/hours/hours.component';
import { ActionsMenuComponent } from './actions-menu/actions-menu.component'; import { ActionsMenuComponent } from './actions-menu/actions-menu.component';
import { NavStepsComponent } from './nav-steps/nav-steps.component'; import { NavStepsComponent } from './nav-steps/nav-steps.component';
import { DialogModule } from 'primeng/dialog'; import { DialogModule } from 'primeng/dialog';
import { CoreModule } from '../../core/core.module';
@NgModule({ @NgModule({
declarations: [ declarations: [

2
src/app/features/administration/form/steps/step-six/step-six.component.html
View File

@ -18,7 +18,7 @@
<p> <p>
{{ 'owner.email_description' | translate }} {{ 'owner.email_description' | translate }}
</p> </p>
<input class="input" type="text" id="email" formControlName="creatorEmail" /> <input class="input" type="email" id="email" formControlName="creatorEmail" />
</form> </form>
</div> </div>
</div> </div>

2
src/app/features/administration/nav-steps/nav-steps.component.ts
View File

@ -43,7 +43,7 @@ export class NavStepsComponent implements OnInit {
createPoll() { createPoll() {
this.pollService.createPoll().then( this.pollService.createPoll().then(
(resp) => { (resp) => {
this.router.navigate(['administration/success']); this.router.navigate(['/administration/success']);
}, },
(err) => { (err) => {
console.error('oops err', err); console.error('oops err', err);

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

@ -1,58 +1,91 @@
<section <app-header></app-header>
class=" " <header></header>
[ngClass]="{ 'has-background-success': pollService.admin_key, 'has-background-danger': pollService.admin_key }" <main>
> <div class="container">
<div class="hero-body"> <section>
<div class="contained-in-main-column"> <div class="">
<div class="main-block"> <div class="contained-in-large-column">
<h1 class="title is-1"> <div class="main-block" *ngIf="pollService.admin_key">
<span class="success-creation-title" *ngIf="pollService.admin_key"> <div class="columns">
<img class="icon" src="assets/icons/check-circle.svg" alt="icone ok" /> <div class="column is-narrow">
<strong class="poll-title"> <img
{{ 'success.description' | translate }} class="icon is-big icon-success"
</strong> src="assets/icons/check-circle.svg"
</span> alt="icone ok"
<span *ngIf="!pollService.admin_key"> />
{{ 'success.not_created' | translate }} :( </div>
<br /> <div class="column">
<button class="button is-primary" [routerLink]="['/administration/step/7']"> <h1 class="title is-2 poll-title success-creation-title is-success">
{{ 'success.go_back' | translate }} {{ 'success.title' | translate }}
</button> </h1>
</span> <span class="description">
</h1> {{
<p> 'success.description' | translate: { eventTitle: pollService.form.value.title }
<span class="description"> }}
{{ 'success.description' | translate }} </span>
</span> <span class="share">
<span class="share"> {{ 'success.share' | translate }}
{{ 'success.share' | translate }} </span>
</span> <div class="copy">
</p> <label for="public_share_link">
<div class="columns"> {{ 'success.link' | translate }}
<div class="column"> </label>
<label for="public_share_link"> <div class="columns">
{{ 'success.link' | translate }} <div class="column">
</label> <input
<input type="text" [value]="pollService.getParticipationUrl()" id="public_share_link" /> type="text"
</div> [value]="pollService.getParticipationUrl()"
<div class="column is-narrow"> id="public_share_link"
<button class="is-primary button" (click)="copyText(pollService.getParticipationUrl())"> />
{{ 'success.copy' | translate }} </div>
</button> <div class="column is-narrow">
<button
class="is-primary button"
(click)="copyText(pollService.getParticipationUrl())"
>
{{ 'success.copy' | translate }}
</button>
</div>
</div>
</div>
</div>
</div>
<div class="rounded-block">
<h2 class="title is-2 has-text-primary go-see-title">
{{ 'success.label' | translate }}
</h2>
<button
class="button is-primary is-fullwidth"
routerLink="{{ pollService.getAdministrationUrlFromForm() }}"
>
{{ 'success.action' | translate }}
</button>
</div>
<hr />
<!-- <div class="debug">-->
<!-- pollService.form.value.title: {{pollService.form.value.title}} <br>-->
<!-- getParticipationUrl: {{pollService.getParticipationUrl()}}-->
<!-- getAdministrationUrlFromForm: {{ pollService.getAdministrationUrlFromForm() }}-->
<!-- </div>-->
</div> </div>
</div> </div>
<!-- cas d'échec de création du sondage-->
<div class="contained-in-large-column" *ngIf="!pollService.admin_key">
<div class="no-admin-key padded has-background-danger">
{{ 'success.network_error' | translate }}
</div>
<h1 class="title is-1">
{{ 'success.not_created' | translate }}
</h1>
<button class="button is-primary" [routerLink]="['/administration/step/7']">
{{ 'success.go_back' | translate }}
</button>
</div>
</div> </div>
</div> </section>
</div> </div>
<div class="box-well"> </main>
<h3 class="title is-3"> <footer>
{{ 'success.label' | translate }} <app-footer></app-footer>
</h3> </footer>
<button class="button is-primary" routerLink="{{ pollService.getAdministrationUrlFromForm() }}">
{{ 'success.action' | translate }}
</button>
</div>
</section>
<div class="no-admin-key padded has-background-danger" *ngIf="!pollService.admin_key">
{{ 'success.network_error' | translate }}
</div>

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

@ -1,25 +1,42 @@
@import './src/styles/variables'; @import './src/styles/variables';
.button,
a,
button {
margin-bottom: 1ch;
margin-right: 1ch;
}
a {
padding: 1em;
max-width: 20em;
@extend .truncate;
}
.admin-ok pre,
.truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
:host { :host {
padding: 2em; .button,
} a,
.has-background-success { button {
background: $logo_color_2 !important; margin-bottom: 1ch;
margin-right: 1ch;
}
a {
padding: 1em;
max-width: 20em;
@extend .truncate;
}
.admin-ok pre,
.truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.main-block {
padding-top: 2em;
}
.has-background-success {
background: $logo_color_2 !important;
}
.copy {
margin-top: 2rem;
}
.button {
padding: 0.5rem 1rem;
}
.go-see-title {
font-size: 20px;
color: $d-primary-intense;
}
} }

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

@ -19,7 +19,6 @@ export class SuccessComponent {
window: any = window; window: any = window;
environment = environment; environment = environment;
today: Date = new Date(); today: Date = new Date();
eventTitle: any;
constructor( constructor(
public pollService: PollService, public pollService: PollService,
@ -29,15 +28,9 @@ export class SuccessComponent {
private translate: TranslateService, private translate: TranslateService,
private titleService: Title private titleService: Title
) { ) {
this.eventTitle = pollService.form.value.title;
this.titleService.setTitle( this.titleService.setTitle(
environment.appTitle + ' - 🎉 succès de création de sondage - ' + this.pollService.form.value.title environment.appTitle + ' - 🎉 succès de création de sondage - ' + this.pollService.form.value.title
); );
this.pollService.poll.subscribe((newpoll: Poll) => {
this.poll = newpoll;
});
} }
sendToEmail() { sendToEmail() {
@ -50,6 +43,10 @@ export class SuccessComponent {
*/ */
copyText(participationUrl: string) { copyText(participationUrl: string) {
this._clipboardService.copyFromContent(participationUrl); this._clipboardService.copyFromContent(participationUrl);
this.toastService.display(this.translate.get('success.copy_message') + ` ${participationUrl}`); console.log("this.translate.get('success.copy_message')", this.translate.get('success.copy_message'));
this.translate.get('success.copy_message').subscribe((resp) => {
console.log('resp', resp);
this.toastService.display(`${resp} ${participationUrl}`);
});
} }
} }

4
src/app/shared/shared.module.ts
View File

@ -34,6 +34,8 @@ import { AboutComponent } from '../features/shared/components/ui/static-pages/ab
import { RouterModule } from '@angular/router'; import { RouterModule } from '@angular/router';
import { ChoiceButtonDinumComponent } from '../features/shared/components/choice-button-dinum/choice-button-dinum.component'; import { ChoiceButtonDinumComponent } from '../features/shared/components/choice-button-dinum/choice-button-dinum.component';
import { DialogModule } from 'primeng/dialog'; import { DialogModule } from 'primeng/dialog';
import { HeaderComponent } from '../core/components/header/header.component';
import { FooterComponent } from '../core/components/footer/footer.component';
const COMPONENTS = [ const COMPONENTS = [
AboutComponent, AboutComponent,
@ -51,6 +53,8 @@ const COMPONENTS = [
WipTodoComponent, WipTodoComponent,
ShortcutsHelpComponent, ShortcutsHelpComponent,
ChoiceButtonDinumComponent, ChoiceButtonDinumComponent,
HeaderComponent,
FooterComponent,
]; ];
const ANGULAR_MODULES = [CommonModule, ChartsModule, FormsModule, TranslateModule]; const ANGULAR_MODULES = [CommonModule, ChartsModule, FormsModule, TranslateModule];

2
src/assets/i18n/en.json
View File

@ -184,7 +184,7 @@
"network_error": "network error", "network_error": "network error",
"go_back": "Go back", "go_back": "Go back",
"copy": "Copy", "copy": "Copy",
"copy_message": "Text copied:" "copy_message": "Text copied :"
}, },
"visibility": { "visibility": {
"top_txt": "A few settings…", "top_txt": "A few settings…",

4
src/assets/i18n/fr.json
View File

@ -177,7 +177,7 @@
}, },
"success": { "success": {
"title": "Votre sondage est prêt !", "title": "Votre sondage est prêt !",
"description": "L'événement « {{eventTitle}} » est créé.", "description": "L'événement « {{eventTitle}} » est créé.",
"share": "Vous pouvez inviter vos contacts à y participer en partageant le lien ci-dessous.", "share": "Vous pouvez inviter vos contacts à y participer en partageant le lien ci-dessous.",
"link": "Lien de partage public", "link": "Lien de partage public",
"label": "Consultez dès maintenant votre sondage", "label": "Consultez dès maintenant votre sondage",
@ -186,7 +186,7 @@
"users": "Côté sondés", "users": "Côté sondés",
"links_mail": "Recevoir les liens par e-mail", "links_mail": "Recevoir les liens par e-mail",
"not_created": "n'a pas été créé", "not_created": "n'a pas été créé",
"network_error": "n'a pas été créé", "network_error": "erreur de réseau",
"go_back": "Revenir en arrière", "go_back": "Revenir en arrière",
"copy": "Copier", "copy": "Copier",
"copy_message": "Texte copié :" "copy_message": "Texte copié :"

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

@ -307,9 +307,6 @@ mat-checkbox {
font-size: 1rem; font-size: 1rem;
line-height: 1.25rem; line-height: 1.25rem;
} }
.icon {
width: 1rem;
}
.columns { .columns {
margin-left: 0; margin-left: 0;

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

@ -9,3 +9,12 @@ main {
width: 100%; width: 100%;
margin: 0 auto; margin: 0 auto;
} }
.icon {
width: 1.5rem;
height: 1.5rem;
&.is-big {
width: 3rem;
height: 3rem;
}
}

13
src/styles/partials/_typo.scss
View File

@ -42,16 +42,20 @@ body {
.p-dialog-header { .p-dialog-header {
color: $primary_color !important; color: $primary_color !important;
.p-dialog-title { .p-dialog-title {
font-size: 2rem; font-size: 2rem;
} }
} }
.p-dialog-content { .p-dialog-content {
padding: 1rem 2rem; padding: 1rem 2rem;
.title { .title {
color: $secondary_color !important; color: $secondary_color !important;
} }
} }
.p-dialog-footer { .p-dialog-footer {
padding: 3rem 2.5rem; padding: 3rem 2.5rem;
} }
@ -68,4 +72,13 @@ body {
.text-center { .text-center {
text-align: center; text-align: center;
} }
.title {
&.is-success {
color: $success_color;
}
}
.icon-success {
fill: $success_color;
}
} }

6
src/styles/partials/global.scss
View File

@ -101,6 +101,12 @@ main {
width: 100vw; width: 100vw;
display: block; display: block;
} }
.contained-in-large-column {
max-width: $large-column-width;
margin: 0 auto;
width: 100vw;
display: block;
}
.contained-desktop, .contained-desktop,
.stuff { .stuff {
display: block; display: block;

6
src/styles/themes/_base.scss
View File

@ -1,10 +1,6 @@
#big_container { #big_container {
background: $white; background: $white;
main {
margin-bottom: 2em;
padding-bottom: 5em;
background: $white;
}
.big-header { .big-header {
.container { .container {
.column:last-of-type { .column:last-of-type {

1
src/styles/variables.scss
View File

@ -71,6 +71,7 @@ $default_font: 'helvetica', 'proza_libre', 'Arial', 'DejaVu Sans Mono';
$title_font: 'helvetica', 'proza_libre', 'Arial', 'DejaVu Sans Mono'; $title_font: 'helvetica', 'proza_libre', 'Arial', 'DejaVu Sans Mono';
// sizes and breakpoints // sizes and breakpoints
$large-column-width: 588px;
$main-column-width: 25rem; $main-column-width: 25rem;
$main-column-width-inner: 23.75rem; $main-column-width-inner: 23.75rem;
$mobile-size: 25rem; $mobile-size: 25rem;