add confirmation modal for admin user, issue #59

This commit is contained in:
Baptiste Lemoine 2020-04-02 17:49:10 +02:00
parent a0138f84d3
commit c0a4ec7a0c
9 changed files with 181 additions and 97 deletions

View File

@ -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;

View File

@ -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'

View File

@ -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 >

View File

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

View File

@ -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>

View File

@ -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;

View File

@ -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 >

View File

@ -8,6 +8,7 @@ import {MessageService} from "primeng/api";
})
export class CopyTextComponent implements OnInit {
@Input() public textToCopy: any;
displayContentToCopy = false;
constructor(private messageService: MessageService,) {
}

View File

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