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 {
// 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/prompt pour entrer le pass à double hasher en md5
let url = '';
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}`;
}
console.log('getParticipationUrl', url);
return url;
}
@ -801,7 +801,7 @@ export class PollService implements Resolve<Poll> {
*/
copyText(textToCopy: string) {
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) => {
console.log('resp', resp);
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">
<button class="button">
Fermer
<button class="button" (click)="displayMenu = false">
{{ 'SENTENCES.Close' | translate }}
<i class="fa fa-times"></i>
</button>
<button class="export export-print btn" (click)="print()">
<i class="fa fa-print"></i>
Imprimer le sondage
{{ 'participation.modal.options.print' | translate }}
</button>
<button class="export export-csv btn" (click)="exportCSV()">
<i class="fa fa-file-calc-o" aria-hidden="true"></i>
Exporter en .csv
{{ 'participation.modal.options.export_csv' | translate }}
</button>
<button class="export export-json btn" (click)="exportJson()">
<i class="fa fa-file-archive-o" aria-hidden="true"></i>
export json
</button>
<button class="replicate duplicate btn" [routerLink]="['']">
<i class="fa fa-pencil" aria-hidden="true"></i>
Modifier
JSON
</button>
<button class="replicate duplicate btn" (click)="duplicate()">
<i class="fa fa-copy" aria-hidden="true"></i>
Dupliquer
{{ 'success.copy' | translate }}
</button>
<div id="export_and_share">
<div class="sharing" *ngIf="pollService.poll">
<div class="margin-top-x8">
Lien administrateur
<!-- <div id="export_and_share">-->
<!-- <div class="sharing" *ngIf="pollService.poll">-->
<!-- <div class="margin-top-x8">-->
<!-- Lien administrateur-->
<i class="fa fa-share" aria-hidden="true"></i>
</div>
<p class="nobold text-14" for="copyLink">
<a href="{{ pollService.getParticipationUrl() }}"> {{ pollService.getParticipationUrl() }} </a>
<app-copy-text [textToCopy]="pollService.getParticipationUrl()"></app-copy-text>
</p>
</div>
</div>
<div class="admin-actions" *ngIf="pollService.admin_key">
<!-- <i class="fa fa-share" aria-hidden="true"></i>-->
<!-- </div>-->
<!-- <p class="nobold text-14" for="copyLink">-->
<!-- <a href="{{ pollService.getParticipationUrl() }}"> {{ pollService.getParticipationUrl() }} </a>-->
<!-- <app-copy-text [textToCopy]="pollService.getParticipationUrl()"></app-copy-text>-->
<!-- </p>-->
<!-- </div>-->
<!-- </div>-->
<div class="admin-actions" *ngIf="pollService._poll.getValue().admin_key">
<button class="replicate duplicate button has-text-warning" (click)="deleteAllVotes()">
<i class="fa fa-user-times" aria-hidden="true"></i>
Supprimer tous les votes
{{ 'participation.modal.options.delete_votes' | translate }}
</button>
<button class="replicate duplicate button has-text-warning" (click)="deleteAllComments()">
<i class="fa fa-comments-o" aria-hidden="true"></i>
Supprimer tous les commentaires
{{ 'participation.modal.options.delete_comments' | translate }}
</button>
<button class="replicate duplicate button has-text-danger" (click)="deletePoll()">
<i class="fa fa-trash" aria-hidden="true"></i>
Supprimer le sondage
{{ 'participation.modal.options.delete_poll' | translate }}
</button>
</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 { PollUtilitiesService } from '../../../core/services/poll.utilities.service';
import { StorageService } from '../../../core/services/storage.service';
@ -14,6 +14,8 @@ import { ConfirmationService } from 'primeng/api';
styleUrls: ['./actions-menu.component.scss'],
})
export class ActionsMenuComponent implements OnInit {
@Input() displayMenu = false;
constructor(
private router: Router,
private utils: PollUtilitiesService,

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

@ -39,12 +39,9 @@
/>
</div>
<div class="column is-narrow">
<button
class="is-primary button"
(click)="pollService.copyText(pollService.getParticipationUrl())"
>
{{ 'success.copy' | translate }}
</button>
<app-copy-text
[textToCopy]="pollService.getParticipationUrl()"
></app-copy-text>
</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">
<div class="step">
<section class="main-title-poll rounded-block">
<div class="rounded-block">
<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)="pollService.copyText(pollService.getParticipationUrl())"
>
{{ 'success.copy' | translate }}
</button>
</div>
<div class="contained-in-large-column">
<div class="rounded-block admin-share-link" *ngIf="poll.admin_key || show_admin_stuff">
<h2 class="title is-2">
{{ 'participation.share_title' | translate }}
</h2>
<p class="description">
{{ 'participation.share_description' | translate }}
</p>
<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">
<app-copy-text [textToCopy]="pollService.getParticipationUrl()"></app-copy-text>
</div>
</div>
</div>
<section class="main-title-poll rounded-block">
<div class="columns">
<div class="column">
<h2 class="title is-2">
{{ poll.title }}
</h2>
</div>
<div class="column is-narrow">
<div class="columns">
<button class="options-button pull-right" (click)="displayOptions()">
{{ 'participation.menu_label' | translate }}
<i class="fa fa-chevron-down"></i>
</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>
<p class="description">
{{ poll.description }}
</p>
<app-actions-menu [displayMenu]="display_options_menu" *ngIf="display_options_menu"></app-actions-menu>
<button
class="vote-button is-primary button"
*ngIf="poll.votes_allowed"
@ -70,6 +47,13 @@
>
{{ 'participation.fav_title' | translate }}
</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">
Les votes sont désactivés
</span>
@ -115,16 +99,12 @@
</button>
</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-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 class="poll-comments">
<h2 class="title is-3">
@ -133,9 +113,9 @@
<div class="rounded-block">
<!-- *ngIf="poll.allow_comments"-->
<app-comments [poll]="poll" [vote_stack]="storageService.vote_stack"></app-comments>
<!-- <div class="alert has-background-info" *ngIf="!poll.allow_comments">-->
<!-- Ce sondage ne permet pas d'ajouter de commentaires-->
<!-- </div>-->
<div class="alert has-background-info" *ngIf="!poll.allow_comments">
Ce sondage ne permet pas d'ajouter de commentaires
</div>
</div>
</section>
</div>

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

@ -13,3 +13,10 @@
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 {
public fetching = true;
public environment = environment;
private routeSubscription: Subscription;
window: any;
@ -25,8 +24,10 @@ export class ConsultationComponent implements OnInit, OnDestroy {
public poll: Poll;
public pollSlug: string;
public pass_hash: string;
maxYesCount: any = 1;
detailledDisplay: boolean = false;
public maxYesCount: any = 1;
public detailledDisplay: boolean = false;
public display_options_menu: boolean = false;
public show_admin_stuff: boolean = true;
constructor(
private router: Router,
@ -83,7 +84,7 @@ export class ConsultationComponent implements OnInit, OnDestroy {
}
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 { ResultsRoundedComponent } from './results-rounded/results-rounded.component';
import { PollResultsDinumComponent } from './poll-results-dinum/poll-results-dinum.component';
import { ChoiceTableComponent } from './choice-table/choice-table.component';
@NgModule({
declarations: [
@ -30,6 +31,7 @@ import { PollResultsDinumComponent } from './poll-results-dinum/poll-results-din
EditComponent,
ResultsRoundedComponent,
PollResultsDinumComponent,
ChoiceTableComponent,
],
imports: [
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="rounded-block" *ngFor="let group of poll.choices_grouped">
<div class="date-label">
{{ showAsDate(group.date_string) | date: 'fullDate':'Europe/Paris' }}
</div>
<div class="list-of-choices">
<div class="time-slice-choice white-block" *ngFor="let choice of group.choices; index as ii">
<div class="columns is-vcentered time-span-display">
<div class="column">
<div class="choice-label">
{{ choice.name }}
<div class="date-choices">
<div class="time-slice-choice white-block" *ngFor="let choice of group.choices; index as ii">
<div class="columns is-vcentered time-span-display">
<div class="column">
<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 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 class="choice-header" *ngIf="poll.max_score > 0"></div>
<div class="choice-header" *ngIf="poll.max_score > 0"></div>
<div class="choice-bars-display" *ngIf="!detailledDisplay">
<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>
<app-choice-table [choice]="choice" [detailledDisplay]="detailledDisplay"></app-choice-table>
</div>
</div>
</div>

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

@ -262,6 +262,8 @@
"vote": "Vote",
"menu_label": "Options",
"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_description_one": "The preferred choice with {{maxYesCount}} yes is",
"fav_description_several": "The preferred choices are",

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

@ -272,6 +272,8 @@
"vote": "Voter",
"menu_label": "Options",
"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_description_one": "Le choix préféré avec {{maxYesCount}} oui est",
"fav_description_several": "Les choix préférés sont",