tykayn/funky-framadate-front
1
1
Fork 1
mirror of https://framagit.org/framasoft/framadate/funky-framadate-front.git synced 2023-08-25 13:53:14 +02:00
Code Issues Projects Releases Wiki Activity

display text choices in consultation

Browse Source
This commit is contained in:
Tykayn 2022-02-10 12:16:11 +01:00 committed by tykayn
parent fc3f2daec0
commit e9850bca2d
15 changed files with 202 additions and 164 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/app/core/services/poll.service.ts
View File

@ -611,8 +611,9 @@ export class PollService implements Resolve<Poll> {
public getParticipationUrl(): string { public getParticipationUrl(): string {
// http://localhost:4200/#/poll/dessin-anime/consultation // http://localhost:4200/#/poll/dessin-anime/consultation
// TODO handle secure access // handle secure access
// http://localhost:4200/#/poll/citron/consultation/secure/1c01ed9c94fc640a1be864f197ff808c // http://localhost:4200/#/poll/citron/consultation/secure/1c01ed9c94fc640a1be864f197ff808c
// http://localhost:4200/#/poll/citron/consultation/prompt pour entrer le pass à double hasher en md5
let url = ''; let url = '';
let suffix_password = ''; let suffix_password = '';
@ -631,7 +632,6 @@ export class PollService implements Resolve<Poll> {
url = `${environment.frontDomain}/#/poll/${this.form.value.custom_url}/consultation${suffix_password}`; url = `${environment.frontDomain}/#/poll/${this.form.value.custom_url}/consultation${suffix_password}`;
} }
console.log('getParticipationUrl', url);
return url; return url;
} }
@ -801,7 +801,7 @@ export class PollService implements Resolve<Poll> {
*/ */
copyText(textToCopy: string) { copyText(textToCopy: string) {
this._clipboardService.copyFromContent(textToCopy); this._clipboardService.copyFromContent(textToCopy);
console.log("this.translate.get('success.copy_message')", this.translate.get('success.copy_message'));
this.translate.get('success.copy_message').subscribe((resp) => { this.translate.get('success.copy_message').subscribe((resp) => {
console.log('resp', resp); console.log('resp', resp);
this.toastService.display(`${resp} ${textToCopy}`); this.toastService.display(`${resp} ${textToCopy}`);

49
src/app/features/administration/actions-menu/actions-menu.component.html
View File

@ -1,55 +1,50 @@
<div class="actions"> <div class="actions">
<button class="button"> <button class="button" (click)="displayMenu = false">
Fermer {{ 'SENTENCES.Close' | translate }}
<i class="fa fa-times"></i> <i class="fa fa-times"></i>
</button> </button>
<button class="export export-print btn" (click)="print()"> <button class="export export-print btn" (click)="print()">
<i class="fa fa-print"></i> <i class="fa fa-print"></i>
Imprimer le sondage {{ 'participation.modal.options.print' | translate }}
</button> </button>
<button class="export export-csv btn" (click)="exportCSV()"> <button class="export export-csv btn" (click)="exportCSV()">
<i class="fa fa-file-calc-o" aria-hidden="true"></i> <i class="fa fa-file-calc-o" aria-hidden="true"></i>
Exporter en .csv {{ 'participation.modal.options.export_csv' | translate }}
</button> </button>
<button class="export export-json btn" (click)="exportJson()"> <button class="export export-json btn" (click)="exportJson()">
<i class="fa fa-file-archive-o" aria-hidden="true"></i> <i class="fa fa-file-archive-o" aria-hidden="true"></i>
export json JSON
</button>
<button class="replicate duplicate btn" [routerLink]="['']">
<i class="fa fa-pencil" aria-hidden="true"></i>
Modifier
</button> </button>
<button class="replicate duplicate btn" (click)="duplicate()"> <button class="replicate duplicate btn" (click)="duplicate()">
<i class="fa fa-copy" aria-hidden="true"></i> <i class="fa fa-copy" aria-hidden="true"></i>
Dupliquer {{ 'success.copy' | translate }}
</button> </button>
<div id="export_and_share"> <!-- <div id="export_and_share">-->
<div class="sharing" *ngIf="pollService.poll"> <!-- <div class="sharing" *ngIf="pollService.poll">-->
<div class="margin-top-x8"> <!-- <div class="margin-top-x8">-->
Lien administrateur <!-- Lien administrateur-->
<i class="fa fa-share" aria-hidden="true"></i> <!-- <i class="fa fa-share" aria-hidden="true"></i>-->
</div> <!-- </div>-->
<p class="nobold text-14" for="copyLink"> <!-- <p class="nobold text-14" for="copyLink">-->
<a href="{{ pollService.getParticipationUrl() }}"> {{ pollService.getParticipationUrl() }} </a> <!-- <a href="{{ pollService.getParticipationUrl() }}"> {{ pollService.getParticipationUrl() }} </a>-->
<app-copy-text [textToCopy]="pollService.getParticipationUrl()"></app-copy-text> <!-- <app-copy-text [textToCopy]="pollService.getParticipationUrl()"></app-copy-text>-->
</p> <!-- </p>-->
</div> <!-- </div>-->
</div> <!-- </div>-->
<div class="admin-actions" *ngIf="pollService.admin_key"> <div class="admin-actions" *ngIf="pollService._poll.getValue().admin_key">
<button class="replicate duplicate button has-text-warning" (click)="deleteAllVotes()"> <button class="replicate duplicate button has-text-warning" (click)="deleteAllVotes()">
<i class="fa fa-user-times" aria-hidden="true"></i> <i class="fa fa-user-times" aria-hidden="true"></i>
Supprimer tous les votes {{ 'participation.modal.options.delete_votes' | translate }}
</button> </button>
<button class="replicate duplicate button has-text-warning" (click)="deleteAllComments()"> <button class="replicate duplicate button has-text-warning" (click)="deleteAllComments()">
<i class="fa fa-comments-o" aria-hidden="true"></i> <i class="fa fa-comments-o" aria-hidden="true"></i>
Supprimer tous les commentaires {{ 'participation.modal.options.delete_comments' | translate }}
</button> </button>
<button class="replicate duplicate button has-text-danger" (click)="deletePoll()"> <button class="replicate duplicate button has-text-danger" (click)="deletePoll()">
<i class="fa fa-trash" aria-hidden="true"></i> <i class="fa fa-trash" aria-hidden="true"></i>
Supprimer le sondage {{ 'participation.modal.options.delete_poll' | translate }}
</button> </button>
</div> </div>
</div> </div>

4
src/app/features/administration/actions-menu/actions-menu.component.ts
View File

@ -1,4 +1,4 @@
import { Component, OnInit } from '@angular/core'; import { Component, Input, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router'; import { ActivatedRoute, Router } from '@angular/router';
import { PollUtilitiesService } from '../../../core/services/poll.utilities.service'; import { PollUtilitiesService } from '../../../core/services/poll.utilities.service';
import { StorageService } from '../../../core/services/storage.service'; import { StorageService } from '../../../core/services/storage.service';
@ -14,6 +14,8 @@ import { ConfirmationService } from 'primeng/api';
styleUrls: ['./actions-menu.component.scss'], styleUrls: ['./actions-menu.component.scss'],
}) })
export class ActionsMenuComponent implements OnInit { export class ActionsMenuComponent implements OnInit {
@Input() displayMenu = false;
constructor( constructor(
private router: Router, private router: Router,
private utils: PollUtilitiesService, private utils: PollUtilitiesService,

9
src/app/features/administration/success/success.component.html
View File

@ -39,12 +39,9 @@
/> />
</div> </div>
<div class="column is-narrow"> <div class="column is-narrow">
<button <app-copy-text
class="is-primary button" [textToCopy]="pollService.getParticipationUrl()"
(click)="pollService.copyText(pollService.getParticipationUrl())" ></app-copy-text>
>
{{ 'success.copy' | translate }}
</button>
</div> </div>
</div> </div>
</div> </div>

53
src/app/features/consultation/choice-table/choice-table.component.html Normal file
View File

@ -0,0 +1,53 @@
<div class="choice-bars-display" *ngIf="!detailledDisplay">
<div class="columns" *ngIf="choice.yes && choice.yes.count > 0">
<div class="column is-narrow">
{{ 'participation.yes' | translate }}
</div>
<div class="column">
<div class="bar has-text-centered has-background-yes" *ngIf="choice.yes">
{{ choice.yes.count }}
</div>
</div>
</div>
<div class="columns" *ngIf="choice.maybe && choice.maybe.count > 0">
<div class="column is-narrow">
{{ 'participation.maybe' | translate }}
</div>
<div class="column">
<div class="bar has-text-centered has-background-maybe">
{{ choice.maybe.count }}
</div>
</div>
</div>
<div class="columns" *ngIf="choice.no && choice.no.count > 0">
<div class="column is-narrow">
{{ 'participation.no' | translate }}
</div>
<div class="column">
<div class="bar has-text-centered has-background-no">
{{ choice.no.count }}
</div>
</div>
</div>
</div>
<div class="choice-details-display" *ngIf="detailledDisplay">
<p class="description-details">
{{ 'participation.details' | translate }}
<!-- display each name for each kind of answer-->
</p>
<div class="choice-display-yes" *ngIf="choice.yes">
<div class="people has-background-yes" *ngFor="let peopleName of choice.yes.people">
<img class="icon" src="assets/icons/check-square.svg" alt="icone ok" /> {{ peopleName }}
</div>
</div>
<div class="choice-display-maybe" *ngIf="choice.maybe">
<div class="people has-background-maybe" *ngFor="let peopleName of choice.maybe.people">
<img class="icon" src="assets/icons/box.svg" alt="icone ok" /> {{ peopleName }}
</div>
</div>
<div class="choice-display-no" *ngIf="choice.no">
<div class="people has-background-no" *ngFor="let peopleName of choice.no.people">
<img class="icon" src="assets/icons/x-square.svg" alt="icone ok" /> {{ peopleName }}
</div>
</div>
</div>

0
src/app/features/consultation/choice-table/choice-table.component.scss Normal file
View File

24
src/app/features/consultation/choice-table/choice-table.component.spec.ts Normal file
View File

@ -0,0 +1,24 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { ChoiceTableComponent } from './choice-table.component';
describe('ChoiceTableComponent', () => {
let component: ChoiceTableComponent;
let fixture: ComponentFixture<ChoiceTableComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ChoiceTableComponent],
}).compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(ChoiceTableComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

15
src/app/features/consultation/choice-table/choice-table.component.ts Normal file
View File

@ -0,0 +1,15 @@
import { Component, Input, OnInit } from '@angular/core';
import { Choice } from '../../../core/models/choice.model';
@Component({
selector: 'app-choice-table',
templateUrl: './choice-table.component.html',
styleUrls: ['./choice-table.component.scss'],
})
export class ChoiceTableComponent implements OnInit {
@Input() detailledDisplay: boolean;
@Input() choice: Choice;
constructor() {}
ngOnInit(): void {}
}

92
src/app/features/consultation/consultation.component.html
View File

@ -1,68 +1,45 @@
<app-header [linkToHome]="true"></app-header> <app-header [linkToHome]="false"></app-header>
<section class="poll_loaded padded consultation" *ngIf="!fetching && poll"> <section class="poll_loaded padded consultation" *ngIf="!fetching && poll">
<div class="step"> <div class="contained-in-large-column">
<section class="main-title-poll rounded-block"> <div class="rounded-block admin-share-link" *ngIf="poll.admin_key || show_admin_stuff">
<div class="rounded-block"> <h2 class="title is-2">
<label for="public_share_link"> {{ 'participation.share_title' | translate }}
{{ 'success.link' | translate }} </h2>
</label> <p class="description">
<div class="columns"> {{ 'participation.share_description' | translate }}
<div class="column"> </p>
<input type="text" [value]="pollService.getParticipationUrl()" id="public_share_link" /> <label for="public_share_link">
</div> {{ 'success.link' | translate }}
<div class="column is-narrow"> </label>
<button <div class="columns">
class="is-primary button" <div class="column">
(click)="pollService.copyText(pollService.getParticipationUrl())" <input type="text" [value]="pollService.getParticipationUrl()" id="public_share_link" />
> </div>
{{ 'success.copy' | translate }} <div class="column is-narrow">
</button> <app-copy-text [textToCopy]="pollService.getParticipationUrl()"></app-copy-text>
</div>
</div> </div>
</div> </div>
</div>
<section class="main-title-poll rounded-block">
<div class="columns"> <div class="columns">
<div class="column"> <div class="column">
<h2 class="title is-2"> <h2 class="title is-2">
{{ poll.title }} {{ poll.title }}
</h2> </h2>
</div> </div>
<div class="column is-narrow"> <div class="columns">
<button class="options-button pull-right" (click)="displayOptions()"> <button class="options-button pull-right" (click)="displayOptions()">
{{ 'participation.menu_label' | translate }} {{ 'participation.menu_label' | translate }}
<i class="fa fa-chevron-down"></i> <i class="fa fa-chevron-down"></i>
</button> </button>
<div class="dropdown is-active">
<div class="dropdown-trigger">
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu2">
<span>Content</span>
<span class="icon is-small">
<i class="fas fa-angle-down" aria-hidden="true"></i>
</span>
</button>
</div>
<div class="dropdown-menu" id="dropdown-menu2" role="menu">
<div class="dropdown-content">
<div class="dropdown-item">
<p>You can insert <strong>any type of content</strong> within the dropdown menu.</p>
</div>
<hr class="dropdown-divider" />
<div class="dropdown-item">
<p>You simply need to use a <code>&lt;div&gt;</code> instead.</p>
</div>
<hr class="dropdown-divider" />
<a href="#" class="dropdown-item">
This is a link
</a>
</div>
</div>
</div>
</div> </div>
</div> </div>
<p class="description"> <p class="description">
{{ poll.description }} {{ poll.description }}
</p> </p>
<app-actions-menu [displayMenu]="display_options_menu" *ngIf="display_options_menu"></app-actions-menu>
<button <button
class="vote-button is-primary button" class="vote-button is-primary button"
*ngIf="poll.votes_allowed" *ngIf="poll.votes_allowed"
@ -70,6 +47,13 @@
> >
{{ 'participation.fav_title' | translate }} {{ 'participation.fav_title' | translate }}
</button> </button>
<button
class="edit-poll-button button is-default"
routerLink="/administration/step/7"
*ngIf="poll.admin_key || show_admin_stuff"
>
{{ 'SENTENCES.change-the-poll' | translate }}
</button>
<span *ngIf="!poll.votes_allowed"> <span *ngIf="!poll.votes_allowed">
Les votes sont désactivés Les votes sont désactivés
</span> </span>
@ -115,16 +99,12 @@
</button> </button>
</div> </div>
</div> </div>
<!--affichages différents des réponses-->
<div class="results-not-visible" *ngIf="poll.hideResults">
Résultats cachés aux visiteurs
</div>
<app-poll-results-dinum [poll]="poll" [detailledDisplay]="detailledDisplay"></app-poll-results-dinum> <app-poll-results-dinum [poll]="poll" [detailledDisplay]="detailledDisplay"></app-poll-results-dinum>
<!--<app-poll-results-compact [poll]="poll"></app-poll-results-compact>-->
<!-- <button-->
<!-- class="btn btn-block submit-votestack"-->
<!-- (click)="addVoteStack()"-->
<!-- *ngIf="!storageService.vote_stack || !storageService.vote_stack.id"-->
<!-- >-->
<!-- <i class="fa fa-paper-plane" aria-hidden="true"></i> Envoyer-->
<!-- </button>-->
</section> </section>
<section class="poll-comments"> <section class="poll-comments">
<h2 class="title is-3"> <h2 class="title is-3">
@ -133,9 +113,9 @@
<div class="rounded-block"> <div class="rounded-block">
<!-- *ngIf="poll.allow_comments"--> <!-- *ngIf="poll.allow_comments"-->
<app-comments [poll]="poll" [vote_stack]="storageService.vote_stack"></app-comments> <app-comments [poll]="poll" [vote_stack]="storageService.vote_stack"></app-comments>
<!-- <div class="alert has-background-info" *ngIf="!poll.allow_comments">--> <div class="alert has-background-info" *ngIf="!poll.allow_comments">
<!-- Ce sondage ne permet pas d'ajouter de commentaires--> Ce sondage ne permet pas d'ajouter de commentaires
<!-- </div>--> </div>
</div> </div>
</section> </section>
</div> </div>

7
src/app/features/consultation/consultation.component.scss
View File

@ -13,3 +13,10 @@
min-height: 2rem; min-height: 2rem;
} }
} }
.options-button {
border: 0;
background: transparent;
}
.vote-button {
margin-right: 2rem;
}

9
src/app/features/consultation/consultation.component.ts
View File

@ -17,7 +17,6 @@ import { environment } from 'src/environments/environment';
}) })
export class ConsultationComponent implements OnInit, OnDestroy { export class ConsultationComponent implements OnInit, OnDestroy {
public fetching = true; public fetching = true;
public environment = environment; public environment = environment;
private routeSubscription: Subscription; private routeSubscription: Subscription;
window: any; window: any;
@ -25,8 +24,10 @@ export class ConsultationComponent implements OnInit, OnDestroy {
public poll: Poll; public poll: Poll;
public pollSlug: string; public pollSlug: string;
public pass_hash: string; public pass_hash: string;
maxYesCount: any = 1; public maxYesCount: any = 1;
detailledDisplay: boolean = false; public detailledDisplay: boolean = false;
public display_options_menu: boolean = false;
public show_admin_stuff: boolean = true;
constructor( constructor(
private router: Router, private router: Router,
@ -83,7 +84,7 @@ export class ConsultationComponent implements OnInit, OnDestroy {
} }
displayOptions() { displayOptions() {
alert('TODO'); this.display_options_menu = !this.display_options_menu;
} }
/** /**

2
src/app/features/consultation/consultation.module.ts
View File

@ -16,6 +16,7 @@ import { AdministrationModule } from '../administration/administration.module';
import { EditComponent } from './edit/edit.component'; import { EditComponent } from './edit/edit.component';
import { ResultsRoundedComponent } from './results-rounded/results-rounded.component'; import { ResultsRoundedComponent } from './results-rounded/results-rounded.component';
import { PollResultsDinumComponent } from './poll-results-dinum/poll-results-dinum.component'; import { PollResultsDinumComponent } from './poll-results-dinum/poll-results-dinum.component';
import { ChoiceTableComponent } from './choice-table/choice-table.component';
@NgModule({ @NgModule({
declarations: [ declarations: [
@ -30,6 +31,7 @@ import { PollResultsDinumComponent } from './poll-results-dinum/poll-results-din
EditComponent, EditComponent,
ResultsRoundedComponent, ResultsRoundedComponent,
PollResultsDinumComponent, PollResultsDinumComponent,
ChoiceTableComponent,
], ],
imports: [ imports: [
CommonModule, CommonModule,

92
src/app/features/consultation/poll-results-dinum/poll-results-dinum.component.html
View File

@ -1,79 +1,37 @@
<div class="text-choices rounded-block" *ngIf="poll.kind == 'text'">
<div class="text-choice" *ngFor="let choice of poll.choices_grouped; index as ii">
<div class="choice-label">
{{ choice.date_string }}
</div>
<app-choice-table [choice]="choice" [detailledDisplay]="detailledDisplay"></app-choice-table>
</div>
</div>
<div class="date-choices" *ngIf="poll.kind == 'date'"> <div class="date-choices" *ngIf="poll.kind == 'date'">
<div class="rounded-block" *ngFor="let group of poll.choices_grouped"> <div class="rounded-block" *ngFor="let group of poll.choices_grouped">
<div class="date-label"> <div class="date-label">
{{ showAsDate(group.date_string) | date: 'fullDate':'Europe/Paris' }} {{ showAsDate(group.date_string) | date: 'fullDate':'Europe/Paris' }}
</div> </div>
<div class="list-of-choices"> <div class="list-of-choices">
<div class="time-slice-choice white-block" *ngFor="let choice of group.choices; index as ii"> <div class="date-choices">
<div class="columns is-vcentered time-span-display"> <div class="time-slice-choice white-block" *ngFor="let choice of group.choices; index as ii">
<div class="column"> <div class="columns is-vcentered time-span-display">
<div class="choice-label"> <div class="column">
{{ choice.name }} <div class="choice-label">
{{ choice.name }}
</div>
</div>
<div class="column is-narrow">
<span class="max_score" *ngIf="poll.max_score > 0 && choice.score == poll.max_score">
<i class="fa fa-star fa-2x"></i>
</span>
</div>
<div class="column is-narrow">
<div class="buttons"></div>
</div> </div>
</div> </div>
<div class="column is-narrow"> <div class="choice-header" *ngIf="poll.max_score > 0"></div>
<span class="max_score" *ngIf="poll.max_score > 0 && choice.score == poll.max_score">
<i class="fa fa-star fa-2x"></i>
</span>
</div>
<div class="column is-narrow">
<div class="buttons"></div>
</div>
</div>
<div class="choice-header" *ngIf="poll.max_score > 0"></div>
<div class="choice-bars-display" *ngIf="!detailledDisplay"> <app-choice-table [choice]="choice" [detailledDisplay]="detailledDisplay"></app-choice-table>
<div class="columns" *ngIf="choice.yes.count > 0">
<div class="column is-narrow">
{{ 'participation.yes' | translate }}
</div>
<div class="column">
<div class="bar has-text-centered has-background-yes">
{{ choice.yes.count }}
</div>
</div>
</div>
<div class="columns" *ngIf="choice.maybe.count > 0">
<div class="column is-narrow">
{{ 'participation.maybe' | translate }}
</div>
<div class="column">
<div class="bar has-text-centered has-background-maybe">
{{ choice.maybe.count }}
</div>
</div>
</div>
<div class="columns" *ngIf="choice.no.count > 0">
<div class="column is-narrow">
{{ 'participation.no' | translate }}
</div>
<div class="column">
<div class="bar has-text-centered has-background-no">
{{ choice.no.count }}
</div>
</div>
</div>
</div>
<div class="choice-details-display" *ngIf="detailledDisplay">
<p class="description-details">
{{ 'participation.details' | translate }}
<!-- display each name for each kind of answer-->
</p>
<div class="choice-display-yes">
<div class="people has-background-yes" *ngFor="let peopleName of choice.yes.people">
<img class="icon" src="assets/icons/check-square.svg" alt="icone ok" /> {{ peopleName }}
</div>
</div>
<div class="choice-display-maybe">
<div class="people has-background-maybe" *ngFor="let peopleName of choice.maybe.people">
<img class="icon" src="assets/icons/box.svg" alt="icone ok" /> {{ peopleName }}
</div>
</div>
<div class="choice-display-no">
<div class="people has-background-no" *ngFor="let peopleName of choice.no.people">
<img class="icon" src="assets/icons/x-square.svg" alt="icone ok" /> {{ peopleName }}
</div>
</div>
</div> </div>
</div> </div>
</div> </div>

2
src/assets/i18n/en.json
View File

@ -262,6 +262,8 @@
"vote": "Vote", "vote": "Vote",
"menu_label": "Options", "menu_label": "Options",
"end_of_poll": "Poll votes end on", "end_of_poll": "Poll votes end on",
"share_title": "Tell your voters that your poll is ready !",
"share_description": "All people having the link will be able to participate.",
"fav_title": "Vote", "fav_title": "Vote",
"fav_description_one": "The preferred choice with {{maxYesCount}} yes is", "fav_description_one": "The preferred choice with {{maxYesCount}} yes is",
"fav_description_several": "The preferred choices are", "fav_description_several": "The preferred choices are",

2
src/assets/i18n/fr.json
View File

@ -272,6 +272,8 @@
"vote": "Voter", "vote": "Voter",
"menu_label": "Options", "menu_label": "Options",
"end_of_poll": "Fin du sondage le", "end_of_poll": "Fin du sondage le",
"share_title": "Informez les participants que votre sondage est prêt !",
"share_description": "Toutes personne disposant du lien pourra voter.",
"fav_title": "Voter", "fav_title": "Voter",
"fav_description_one": "Le choix préféré avec {{maxYesCount}} oui est", "fav_description_one": "Le choix préféré avec {{maxYesCount}} oui est",
"fav_description_several": "Les choix préférés sont", "fav_description_several": "Les choix préférés sont",