⚡ add confirmation modal for admin user, issue #59

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;

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' >
     <i class='fa fa-paper-plane' ></i > Envoyer
-
 </button >
 <button
     class='btn btn--primary btn-block submit-votestack update'

src/app/pages/voting/voting-summary/voting-summary.component.html

@@ -124,3 +124,48 @@
 
     </tbody >
 </table >
+<button
+    *ngIf='config.isAdmin'
+    type="button"
+    (click)="showModalDialog()"
+    pButton
+    icon="pi pi-external-link"
+    label="Show" >
+    show admin confirmation modal
+</button >
+<p-dialog
+    [(visible)]="config.displayConfirmVoteModalAdmin"
+    [modal]="true"
+    [baseZIndex]="10000"
+    [draggable]="false"
+    [resizable]="false"
+    [showHeader]="false"
+    [transitionOptions]="'200ms'" >
+    <div style='max-width: 30em; padding: 2em 1em;' >
+        <h4 class='title' >
+            Participation validée !
+        </h4 >
+        <p class="margin-btm-x1" >
+            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 :
+        </p >
+        <br >
+        <a
+            href='{{config.urlAdmin}}'
+            class='text-ellipsis' >{{config.urlAdmin}}</a >
+        <framadate-copy-text [textToCopy]='config.urlAdmin' ></framadate-copy-text >
+        <br >
+        <p class="margin-btm-x6 margin-top-x2" >Conservez-le précieusement !</p >
+        <br >
+        <button
+            type="button btn--large btn btn--block"
+            pButton
+            icon="fa fa-check"
+            (click)="config.displayConfirmVoteModalAdmin=false"
+            label='Revenir au sondage'
+            class="btn btn--primary btn--default btn--purple btn--black-text" >
+
+        </button >
+    </div >
+
+</p-dialog >

src/app/pages/voting/voting-summary/voting-summary.component.ts

@@ -55,4 +55,7 @@ export class VotingSummaryComponent implements OnInit {
     }
 
 
+    showModalDialog() {
+        this.config.displayConfirmVoteModalAdmin = true;
+    }
 }

src/app/pages/voting/voting.component.html

@@ -14,17 +14,4 @@
 
 
 </form>
-<div ng-show="show_popup" class="popup">
-    <h4 class="margin-btm-x2">Participation validée !</h4>
-    <p class="margin-btm-x1">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 :</p>
-    <p>https://framadate.org/urladmindusondage</p>
-    <button class="btn btn--primary btn--small btn--purple btn--black-text">Copier le lien</button>
-    <p class="margin-btm-x6 margin-top-x2">Conservez-le précieusement !</p>
-    <button class="btn btn--primary btn--default btn--purple btn--black-text">Revenir au sondage</button>
 
-
-</div>
-<div class="rgba-black" [hidden]="show_mask">
-
-</div>

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;

src/app/ui/copy-text/copy-text.component.html

@@ -5,5 +5,9 @@
     class=" btn btn--primary btn--outline"
     id="copyLink" >
     <i class='fa fa-copy' ></i >
-    {{"admin.copy_link" |translate}} " {{ textToCopy}}"
+    {{"admin.copy_link" |translate}}
+    <span *ngIf='displayContentToCopy' >
+
+    " {{ textToCopy}}"
+    </span >
 </button >

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,) {
     }

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;
+}