Liness/framadate-responsive
5
0
Fork 0
forked from tykayn/funky-framadate-front
Code Pull Requests Activity

feature choice text

Browse Source
This commit is contained in:
Tykayn 2022-02-09 12:25:08 +01:00 committed by tykayn
parent 8a6b331355
commit 5edeb34ceb
14 changed files with 188 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/app/core/models/choice.model.ts
View File

@ -10,7 +10,11 @@ export class AnswerStats {
count: number;
people: Array<string>;
}
export class ChoiceText {
public name: string; // text of the choice, displayed as an option
public url_href: string; // url used as clickable link on a picture
public url_display: string; // url to fetch a picture to display, this picture might be clickable with url_href filled
}
export class Choice {
public id: number;
public name: string;

3
src/app/core/models/poll.model.ts
View File

@ -1,4 +1,4 @@
import { Choice, ChoiceGroup } from './choice.model';
import { Choice, ChoiceGroup, ChoiceText } from './choice.model';
import { Comment } from './comment.model';
import { Owner } from './owner.model';
import { DateChoice, TimeSlices } from './dateChoice.model';
@ -13,6 +13,7 @@ export class Poll {
public archiveNumberOfDays?: number;
public areResultsPublic?: boolean = true;
public choices: Choice[] = [];
public choicesText: ChoiceText[] = [];
public choices_grouped: ChoiceGroup[] = [];
public comments: Comment[] = [];
public creation_date?: string = new Date().toISOString();

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

@ -126,7 +126,7 @@ export class PollService implements Resolve<Poll> {
choices: new FormArray([]),
whoModifiesAnswers: ['self', [Validators.required]],
whoCanChangeAnswers: ['self', [Validators.required]],
isAboutDate: [true, [Validators.required]],
isAboutDate: [false, [Validators.required]],
expiresDaysDelay: [environment.expiresDaysDelay, []],
expiracy_date: [this.DateUtilitiesService.addDaysToDate(environment.expiresDaysDelay, new Date()), []],
isZeroKnoledge: [false, [Validators.required]],
@ -776,6 +776,9 @@ export class PollService implements Resolve<Poll> {
newpoll.dateChoices.push(converted_day);
}
console.log('newpoll.dateChoices', newpoll.dateChoices);
} else {
// text choices
newpoll.choicesText = Object.assign([], this.storageService.choicesText);
}
newpoll.choices = Object.assign([], this.storageService.choices);
// newpoll.dateChoices = Object.assign([], this.storageService.dateChoices);

28
src/app/core/services/storage.service.ts
View File

@ -1,20 +1,11 @@
import { Injectable } from '@angular/core';
import { LocalStorage } from 'ngx-webstorage';
import { LanguageEnum } from '../enums/language.enum';
import { Theme } from '../enums/theme.enum';
import { Stack } from '../models/stack.model';
import { Choice } from '../models/choice.model';
import { Choice, ChoiceText } from '../models/choice.model';
import { Vote } from '../models/vote.model';
import { environment } from '../../../environments/environment';
import {
basicSlicesOfDay,
DateChoice,
defaultTimeOfDay,
moreTimeOfDay,
otherDefaultDates,
TimeSlices,
} from '../../../../mocks/old-stuff/config/defaultConfigs';
import { DateChoice, defaultTimeOfDay, TimeSlices } from '../../../../mocks/old-stuff/config/defaultConfigs';
import { Poll } from '../models/poll.model';
import { Owner } from '../models/owner.model';
import { DateUtilitiesService } from './date.utilities.service';
@ -42,9 +33,24 @@ export class StorageService {
@LocalStorage()
public vote_stack: Stack = new Stack();
/**
* choix de dates
*/
@LocalStorage()
public choices: Choice[] = [];
/**
* choix textes dans un sondage classique
*/
@LocalStorage()
public choicesText: ChoiceText[] = [
{
name: '',
url_display: '',
url_href: '',
},
];
constructor(public dateUtilities: DateUtilitiesService, private toastService: ToastService) {
if (environment.autofill_participation) {
this.userPolls.push(new Poll(new Owner(), 'Démo: Anniversaire de tonton Patrick', 'aujourdhui-ou-demain'));

65
src/app/features/administration/form/option-link/option-link.component.html
View File

@ -1 +1,64 @@
<p>option-link works!</p>
<div class="options">
<h1 class="title is-1">
{{ 'choices.title' | translate }}
</h1>
<!--{{ 'choices.helper' |translate}}-->
<div class="rounded-block" *ngFor="let choice of StorageService.choicesText; index as ii">
<label [for]="'option_' + ii">{{ 'choices.element' | translate }} {{ ii + 1 }}</label>
<input type="text" [(ngModel)]="choice.name" class="input" />
<div class="image-preview" *ngIf="choice.url_display">
<img src="{{ choice.url_display }}" alt="image" class="icon is-rounded" />
</div>
<div class="href-preview" *ngIf="choice.url_href">
{{ choice.url_href }}
</div>
<button (click)="openLinkModal(choice)" class="has-no-outline" *ngIf="!choice.url_href || !choice.url_display">
<img class="icon" src="assets/icons/link.svg" />
{{ 'choices.add_link' | translate }}
</button>
<button class="button delete-date is-block" (click)="StorageService.choicesText.splice(ii, 1)">
<img class="icon" src="assets/icons/trash.svg" />
{{ 'choices.delete' | translate }}
</button>
</div>
</div>
<button class="is-primary button is-fullwidth" (click)="addLink()">
{{ 'choices.add' | translate }}
</button>
<!-- dialog search-->
<p-dialog
[modal]="true"
[(visible)]="display_option_dialog"
[breakpoints]="{ '960px': '75vw' }"
[style]="{ width: '75vw' }"
[draggable]="false"
[showHeader]="false"
[resizable]="true"
>
<h1 class="title is-1">
{{ 'choices.modal.title' | translate }}
</h1>
<p class="description">
{{ 'choices.modal.description' | translate }}
</p>
<label for="modal_url">
{{ 'choices.modal.url_label' | translate }}
</label>
<input type="text" [(ngModel)]="url_href" id="modal_url" />
<label for="modal_url">
{{ 'choices.modal.img_label' | translate }}
</label>
<input type="text" [(ngModel)]="url_display" id="modal_img_url" />
<div class="bottom has-text-right">
<button class="button marged-right" (click)="closeModal()">
{{ 'SENTENCES.Cancel' | translate }}
</button>
<button class="is-primary" (click)="validateModal()">
{{ 'choices.modal.validate' | translate }}
</button>
</div>
</p-dialog>
<app-wip-todo></app-wip-todo>

10
src/app/features/administration/form/option-link/option-link.component.scss
View File

@ -0,0 +1,10 @@
.options {
button {
border: 0;
background: transparent;
padding-left: 0.75rem;
img {
margin-right: 1em;
}
}
}

28
src/app/features/administration/form/option-link/option-link.component.ts
View File

@ -1,4 +1,6 @@
import { Component, OnInit } from '@angular/core';
import { StorageService } from '../../../../core/services/storage.service';
import { ChoiceText } from '../../../../core/models/choice.model';
@Component({
selector: 'app-option-link',
@ -6,7 +8,31 @@ import { Component, OnInit } from '@angular/core';
styleUrls: ['./option-link.component.scss'],
})
export class OptionLinkComponent implements OnInit {
constructor() {}
public url_href: string;
public url_display: string;
public choice_for_modal: ChoiceText; // choice to be modified after validation of modal
public display_option_dialog: boolean = false;
constructor(public StorageService: StorageService) {}
ngOnInit(): void {}
openLinkModal(choice: ChoiceText) {
this.choice_for_modal = choice;
this.display_option_dialog = true;
}
addLink() {
this.StorageService.choicesText.push(new ChoiceText());
}
validateModal() {
this.choice_for_modal.url_href = '' + this.url_href;
this.choice_for_modal.url_display = '' + this.url_display;
this.display_option_dialog = false;
}
closeModal() {
this.display_option_dialog = false;
}
}

68
src/app/features/administration/form/steps/step-three/step-three.component.html
View File

@ -1,40 +1,44 @@
<app-stepper [step_current]="3" [step_max]="pollService.step_max"></app-stepper>
<div class="step min-height">
<h2 class="title is-2">
{{ 'dates.title' | translate }}
</h2>
<app-errors-list [form]="pollService.form"></app-errors-list>
<!-- sélecteur d'interface-->
<button class="button is-fullwidth date-input-selector is-secondary" (click)="changeDateInputMode()">
<span *ngIf="pollService.mode_calendar">
{{ 'dates.manual_input' | translate }}
</span>
<span *ngIf="!pollService.mode_calendar">
{{ 'dates.datepicker_input' | translate }}
</span>
</button>
<!-- choix spécialement pour les dates-->
<div class="calendar" *ngIf="pollService.mode_calendar">
<p-calendar
[(ngModel)]="pollService.calendar"
firstDayOfWeek="1"
selectionMode="multiple"
inputId="multiple"
showButtonBar="true"
[locale]="'calendar_widget' | translate"
[disabledDates]="pollService.disabled_dates"
[inline]="true"
[showWeek]="false"
></p-calendar>
<div class="text-options" *ngIf="!pollService.form.value.isAboutDate">
<app-option-link></app-option-link>
</div>
<div class="date-options" *ngIf="pollService.form.value.isAboutDate">
<h2 class="title is-2">
{{ 'dates.title' | translate }}
</h2>
<!-- sélecteur d'interface-->
<button class="button is-fullwidth date-input-selector is-secondary" (click)="changeDateInputMode()">
<span *ngIf="pollService.mode_calendar">
{{ 'dates.manual_input' | translate }}
</span>
<span *ngIf="!pollService.mode_calendar">
{{ 'dates.datepicker_input' | translate }}
</span>
</button>
<div class="text-date-list" *ngIf="!pollService.mode_calendar">
<app-day-list
[form]="pollService.form"
[hasSeveralHours]="environment.creation_display_hour_per_day && pollService.form.value.hasSeveralHours"
></app-day-list>
<!-- choix spécialement pour les dates-->
<div class="calendar" *ngIf="pollService.mode_calendar">
<p-calendar
[(ngModel)]="pollService.calendar"
firstDayOfWeek="1"
selectionMode="multiple"
inputId="multiple"
showButtonBar="true"
[locale]="'calendar_widget' | translate"
[disabledDates]="pollService.disabled_dates"
[inline]="true"
[showWeek]="false"
></p-calendar>
</div>
<div class="text-date-list" *ngIf="!pollService.mode_calendar">
<app-day-list
[form]="pollService.form"
[hasSeveralHours]="environment.creation_display_hour_per_day && pollService.form.value.hasSeveralHours"
></app-day-list>
</div>
</div>
</div>
<app-nav-steps

1
src/app/features/consultation/poll-results-detailed/poll-results-detailed.component.scss
View File

@ -12,7 +12,6 @@
table {
overflow: scroll;
max-width: 90vw !important;
display: block;
}
table {

17
src/app/shared/components/ui/wip-todo/wip-todo.component.html
View File

@ -8,4 +8,21 @@
amélioration avec le bouton de feedback.
</div>
</div>
<p>
Support:
<a href="mailto:{{ env.appSupportEmail }}">
mail
</a>
<a href="{{ env.appSupportWebpage }}">
Autres canaux
</a>
<a href="https://framagit.org/framasoft/framadate/funky-framadate-front/-/tree/master">
<i class="fa fa-gitlab"></i> Sources</a
>
|
<a href="https://framagit.org/framasoft/framadate/funky-framadate-front/-/tree/master/docs">
<i class="fa fa-book"></i>
🚴 Documentation
</a>
</p>
</div>

2
src/app/shared/components/ui/wip-todo/wip-todo.component.ts
View File

@ -1,4 +1,5 @@
import { Component, OnInit } from '@angular/core';
import { environment } from '../../../../../environments/environment';
@Component({
selector: 'app-wip-todo',
@ -6,6 +7,7 @@ import { Component, OnInit } from '@angular/core';
styleUrls: ['./wip-todo.component.scss'],
})
export class WipTodoComponent implements OnInit {
env: any = environment;
constructor() {}
ngOnInit(): void {}

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

@ -123,7 +123,7 @@
"answer_preset_1": "réponse de démo 1",
"answer_preset_2": "réponse 2",
"answer_preset_3": "la réponse D",
"add": "Ajouter option",
"add": "Ajouter proposition",
"continue": "Voyons ce que ça donne",
"modal": {
"title": "Ajoutez un lien à l’option",

3
src/styles/dev-utilities/_helpers.scss
View File

@ -36,6 +36,9 @@
.marged {
margin: 1em;
}
.marged-right {
margin-right: 1em;
}
.marged-v {
margin-top: 1em;
margin-bottom: 1em;

7
src/styles/partials/_forms.scss
View File

@ -30,7 +30,6 @@ select,
textarea {
display: inline-block;
padding: 1rem;
width: calc(100% - 45px);
margin-right: 2px;
margin-bottom: 1em;
@ -55,7 +54,6 @@ select,
line-height: 1.25rem;
border: solid 1px $font-color !important;
border-radius: 4px;
max-width: 90vw !important;
@extend .clickable;
&:focus {
@extend .outlined;
@ -101,7 +99,6 @@ textarea {
width: 100%;
display: inline-block;
text-align: left;
max-width: 90vw;
}
}
input[type='radio'] {
@ -145,14 +142,12 @@ option {
background-position: right 1rem center;
background-clip: border-box;
min-width: 10rem;
max-width: 90vw;
margin-bottom: 0.25rem;
border-bottom: 2px solid $primary_color !important;
}
select {
@extend .select, .input;
max-width: 90vw;
}
#multi_hours select {
@ -162,13 +157,11 @@ select {
input {
border-color: #4e4c59 !important;
@extend .text-ellipsis;
max-width: 90vw;
display: block;
}
textarea {
width: 100%;
max-width: 90vw;
min-height: 213px;
padding: 0.5em 1em;
margin-bottom: 1em;