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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -1,25 +1,42 @@
@import './src/styles/variables';
:host {
.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 {
padding: 2em;
.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;
}
}

View File

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

View File

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

View File

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

View File

@ -177,7 +177,7 @@
},
"success": {
"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.",
"link": "Lien de partage public",
"label": "Consultez dès maintenant votre sondage",
@ -186,7 +186,7 @@
"users": "Côté sondés",
"links_mail": "Recevoir les liens par e-mail",
"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",
"copy": "Copier",
"copy_message": "Texte copié:"

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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