From c0a4ec7a0c143263ed84b494ca30fcce3dc27e00 Mon Sep 17 00:00:00 2001 From: Baptiste Lemoine Date: Thu, 2 Apr 2020 17:49:10 +0200 Subject: [PATCH] :zap: add confirmation modal for admin user, issue #59 --- src/app/config/PollConfig.ts | 11 +- .../choices-list/choices-list.component.html | 1 - .../voting-summary.component.html | 45 ++++ .../voting-summary.component.ts | 3 + src/app/pages/voting/voting.component.html | 13 -- src/app/services/config.service.ts | 4 +- src/app/ui/copy-text/copy-text.component.html | 6 +- src/app/ui/copy-text/copy-text.component.ts | 1 + src/assets/scss/useful_classes.scss | 194 +++++++++++------- 9 files changed, 181 insertions(+), 97 deletions(-) diff --git a/src/app/config/PollConfig.ts b/src/app/config/PollConfig.ts index 4299c25a..a7cd1244 100644 --- a/src/app/config/PollConfig.ts +++ b/src/app/config/PollConfig.ts @@ -28,10 +28,7 @@ export class PollConfig { step: number = 0; // step in the progress of creating a poll stepMax: number = 3; // step max in the progress of creating a poll pollType: string = 'dates';// classic or dates - // front end choices - themeChoices: string[] = ['light-watermelon', 'dark-crystal', 'hot-covid']; - themeSelected: number = 0; - themeClass: string = 'theme-light-watermelon'; + title: string = 'titre'; description: string = 'ma description'; myName: string = 'mon pseudo'; @@ -68,6 +65,12 @@ export class PollConfig { timeList: DateChoice[] = otherDefaultDates; // ranges of time expressed as strings answers: PollAnswer[] = defaultAnswers; + // front end choices + themeChoices: string[] = ['light-watermelon', 'dark-crystal', 'hot-covid']; + themeSelected: number = 0; + themeClass: string = 'theme-light-watermelon'; + // modals + displayConfirmVoteModalAdmin: boolean = false; resetConfig() { const self = this; diff --git a/src/app/pages/voting/choices-list/choices-list.component.html b/src/app/pages/voting/choices-list/choices-list.component.html index f173dca1..f265ecc9 100644 --- a/src/app/pages/voting/choices-list/choices-list.component.html +++ b/src/app/pages/voting/choices-list/choices-list.component.html @@ -18,7 +18,6 @@ [ngClass]='{"btn--primary" : config.myTempVoteStack } ' *ngIf='!config.myVoteStack || !config.myVoteStack.id' > Envoyer - + +
+

+ Participation validée ! +

+

+ Votre vote a bien été pris en compte, mais faites attention, ce sondage n'autorise + l'édition de votre vote qu'avec le lien personnalisé suivant : +

+
+ {{config.urlAdmin}} + +
+

Conservez-le précieusement !

+
+ +
+ + diff --git a/src/app/pages/voting/voting-summary/voting-summary.component.ts b/src/app/pages/voting/voting-summary/voting-summary.component.ts index 73bb56aa..b9ab7cfa 100644 --- a/src/app/pages/voting/voting-summary/voting-summary.component.ts +++ b/src/app/pages/voting/voting-summary/voting-summary.component.ts @@ -55,4 +55,7 @@ export class VotingSummaryComponent implements OnInit { } + showModalDialog() { + this.config.displayConfirmVoteModalAdmin = true; + } } diff --git a/src/app/pages/voting/voting.component.html b/src/app/pages/voting/voting.component.html index 5e2dd885..520a9908 100644 --- a/src/app/pages/voting/voting.component.html +++ b/src/app/pages/voting/voting.component.html @@ -14,17 +14,4 @@ -
-

Participation validée !

-

Votre vote a bien été pris en compte, mais faites attention : ce sondage n'autorise - l'édition de votre vote qu'avec le lien personnalisé suivant :

-

https://framadate.org/urladmindusondage

- -

Conservez-le précieusement !

- - -
-
- -
diff --git a/src/app/services/config.service.ts b/src/app/services/config.service.ts index 93d98d00..a031fde3 100644 --- a/src/app/services/config.service.ts +++ b/src/app/services/config.service.ts @@ -358,7 +358,9 @@ export class ConfigService extends PollConfig { } handleVoteAdded(res) { - this.messageService.add({severity: 'success', summary: 'Vote ajouté'}); + if (this.isAdmin) { + this.displayConfirmVoteModalAdmin = true; + } // save modifier token this.myVoteStack['modifier_token'] = res.modifier_token; this.myVoteStack['id'] = res.vote_stack.id; diff --git a/src/app/ui/copy-text/copy-text.component.html b/src/app/ui/copy-text/copy-text.component.html index 73c0c417..23e10d50 100644 --- a/src/app/ui/copy-text/copy-text.component.html +++ b/src/app/ui/copy-text/copy-text.component.html @@ -5,5 +5,9 @@ class=" btn btn--primary btn--outline" id="copyLink" > - {{"admin.copy_link" |translate}} " {{ textToCopy}}" + {{"admin.copy_link" |translate}} + + + " {{ textToCopy}}" + diff --git a/src/app/ui/copy-text/copy-text.component.ts b/src/app/ui/copy-text/copy-text.component.ts index 27457fc5..ea70c8f5 100644 --- a/src/app/ui/copy-text/copy-text.component.ts +++ b/src/app/ui/copy-text/copy-text.component.ts @@ -8,6 +8,7 @@ import {MessageService} from "primeng/api"; }) export class CopyTextComponent implements OnInit { @Input() public textToCopy: any; + displayContentToCopy = false; constructor(private messageService: MessageService,) { } diff --git a/src/assets/scss/useful_classes.scss b/src/assets/scss/useful_classes.scss index 8f309333..a075761f 100644 --- a/src/assets/scss/useful_classes.scss +++ b/src/assets/scss/useful_classes.scss @@ -8,120 +8,160 @@ .pull-right { float: right; } + /*Btm paddings*/ -.padding-btm-x1{ - padding-bottom:10px; +.padding-btm-x1 { + padding-bottom: 10px; } -.padding-btm-x2{ - padding-bottom:20px; + +.padding-btm-x2 { + padding-bottom: 20px; } -.padding-btm-x3{ - padding-bottom:30px; + +.padding-btm-x3 { + padding-bottom: 30px; } -.padding-btm-x4{ - padding-bottom:40px; + +.padding-btm-x4 { + padding-bottom: 40px; } -.padding-btm-x5{ - padding-bottom:50px; + +.padding-btm-x5 { + padding-bottom: 50px; } -.padding-btm-x6{ - padding-bottom:60px; + +.padding-btm-x6 { + padding-bottom: 60px; } -.padding-btm-x7{ - padding-bottom:70px; + +.padding-btm-x7 { + padding-bottom: 70px; } -.padding-btm-x8{ - padding-bottom:80px; + +.padding-btm-x8 { + padding-bottom: 80px; } + /*Btm margins*/ -.margin-btm-x1{ - margin-bottom:10px; +.margin-btm-x1 { + margin-bottom: 10px; } -.margin-btm-x2{ - margin-bottom:20px; + +.margin-btm-x2 { + margin-bottom: 20px; } -.margin-btm-x3{ - margin-bottom:30px; + +.margin-btm-x3 { + margin-bottom: 30px; } -.margin-btm-x4{ - margin-bottom:40px; + +.margin-btm-x4 { + margin-bottom: 40px; } -.margin-btm-x5{ - margin-bottom:50px; + +.margin-btm-x5 { + margin-bottom: 50px; } -.margin-btm-x6{ - margin-bottom:60px; + +.margin-btm-x6 { + margin-bottom: 60px; } -.margin-btm-x7{ - margin-bottom:70px; + +.margin-btm-x7 { + margin-bottom: 70px; } -.margin-btm-x8{ - margin-bottom:80px; + +.margin-btm-x8 { + margin-bottom: 80px; } + /*Top paddings*/ -.padding-top-x1{ - padding-top:10px; +.padding-top-x1 { + padding-top: 10px; } -.padding-top-x2{ - padding-top:20px; + +.padding-top-x2 { + padding-top: 20px; } -.padding-top-x3{ - padding-top:30px; + +.padding-top-x3 { + padding-top: 30px; } -.padding-top-x4{ - padding-top:40px; + +.padding-top-x4 { + padding-top: 40px; } -.padding-top-x5{ - padding-top:50px; + +.padding-top-x5 { + padding-top: 50px; } -.padding-top-x6{ - padding-top:60px; + +.padding-top-x6 { + padding-top: 60px; } -.padding-top-x7{ - padding-top:70px; + +.padding-top-x7 { + padding-top: 70px; } -.padding-top-x8{ - padding-top:80px; + +.padding-top-x8 { + padding-top: 80px; } + /*Top margins*/ -.margin-top-x1{ - margin-top:10px; +.margin-top-x1 { + margin-top: 10px; } -.margin-top-x2{ - margin-top:20px; + +.margin-top-x2 { + margin-top: 20px; } -.margin-top-x3{ - margin-top:30px; + +.margin-top-x3 { + margin-top: 30px; } -.margin-top-x4{ - margin-top:40px; + +.margin-top-x4 { + margin-top: 40px; } -.margin-top-x5{ - margin-top:50px; + +.margin-top-x5 { + margin-top: 50px; } -.margin-top-x6{ - margin-top:60px; + +.margin-top-x6 { + margin-top: 60px; } -.margin-top-x7{ - margin-top:70px; + +.margin-top-x7 { + margin-top: 70px; } -.margin-top-x8{ - margin-top:80px; + +.margin-top-x8 { + margin-top: 80px; } -.margin-right-x2{ - margin-bottom:20px; + +.margin-right-x2 { + margin-bottom: 20px; } -.text-14{ - font-size: 14px; + +.text-14 { + font-size: 14px; } /*Pour masquer la page lors de l'apparition d'une popup*/ -.rgba-black{ -position: fixed; -inset: 0px; - width: 100vw; -height: 100vh; -border: medium none; -z-index: 2147483647; -background-color: rgba(216, 216, 216, 0.4); - } +.rgba-black { + position: fixed; + inset: 0px; + width: 100vw; + height: 100vh; + border: medium none; + z-index: 2147483647; + background-color: rgba(216, 216, 216, 0.4); +} + +.text-ellipsis { + text-overflow: ellipsis; + max-width: auto; + word-break: break-all; +}