mirror of
https://framagit.org/framasoft/framadate/funky-framadate-front.git
synced 2023-08-25 13:53:14 +02:00
success page
This commit is contained in:
tykayn
parent
bd825ec20e
commit
a67d2bd58a
@ -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) {
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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: [
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -1,58 +1,91 @@
|
||||
<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>
|
||||
</h1>
|
||||
<p>
|
||||
<span class="description">
|
||||
{{ 'success.description' | translate }}
|
||||
</span>
|
||||
<span class="share">
|
||||
{{ 'success.share' | translate }}
|
||||
</span>
|
||||
</p>
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<label for="public_share_link">
|
||||
{{ 'success.link' | translate }}
|
||||
</label>
|
||||
<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())">
|
||||
{{ 'success.copy' | translate }}
|
||||
</button>
|
||||
<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>
|
||||
<span class="description">
|
||||
{{
|
||||
'success.description' | translate: { eventTitle: pollService.form.value.title }
|
||||
}}
|
||||
</span>
|
||||
<span class="share">
|
||||
{{ 'success.share' | translate }}
|
||||
</span>
|
||||
<div class="copy">
|
||||
<label for="public_share_link">
|
||||
{{ 'success.link' | translate }}
|
||||
</label>
|
||||
<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())"
|
||||
>
|
||||
{{ '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>
|
||||
<!-- 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>
|
||||
</section>
|
||||
</div>
|
||||
<div class="box-well">
|
||||
<h3 class="title is-3">
|
||||
{{ 'success.label' | translate }}
|
||||
</h3>
|
||||
<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>
|
||||
</main>
|
||||
<footer>
|
||||
<app-footer></app-footer>
|
||||
</footer>
|
||||
|
||||
@ -1,25 +1,42 @@
|
||||
@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 {
|
||||
padding: 2em;
|
||||
}
|
||||
.has-background-success {
|
||||
background: $logo_color_2 !important;
|
||||
.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;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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}`);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@ -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];
|
||||
|
||||
@ -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…",
|
||||
|
||||
@ -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é :"
|
||||
|
||||
@ -307,9 +307,6 @@ mat-checkbox {
|
||||
font-size: 1rem;
|
||||
line-height: 1.25rem;
|
||||
}
|
||||
.icon {
|
||||
width: 1rem;
|
||||
}
|
||||
|
||||
.columns {
|
||||
margin-left: 0;
|
||||
|
||||
@ -9,3 +9,12 @@ main {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
&.is-big {
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -1,10 +1,6 @@
|
||||
#big_container {
|
||||
background: $white;
|
||||
main {
|
||||
margin-bottom: 2em;
|
||||
padding-bottom: 5em;
|
||||
background: $white;
|
||||
}
|
||||
|
||||
.big-header {
|
||||
.container {
|
||||
.column:last-of-type {
|
||||
|
||||
@ -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;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user