Skip to content
GitLab
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
Menu
Open sidebar
Framasoft
Framadate
funky-framadate-front
Commits
0932f110
Commit
0932f110
authored
Oct 27, 2021
by
Tykayn
Committed by
tykayn
Oct 27, 2021
Browse files
display primeng calendar multiselector
parent
dfb3e981
Pipeline
#454181
failed with stage
in 1 minute and 42 seconds
Changes
11
Pipelines
1
Hide whitespace changes
Inline
Side-by-side
src/app/core/services/poll.service.ts
View file @
0932f110
...
...
@@ -40,6 +40,7 @@ export class PollService implements Resolve<Poll> {
public
showDateInterval
=
false
;
public
allowSeveralHours
=
false
;
public
richTextMode
=
false
;
public
calendar
:
any
;
constructor
(
private
http
:
HttpClient
,
...
...
@@ -56,6 +57,8 @@ export class PollService implements Resolve<Poll> {
this
.
createFormGroup
();
if
(
environment
.
poll
.
autoFillDemo
)
{
this
.
setDemoValues
();
}
else
{
this
.
calendar
=
[
new
Date
()];
}
}
...
...
@@ -67,6 +70,11 @@ export class PollService implements Resolve<Poll> {
this
.
addChoice
(
'
raisin
'
);
this
.
addChoice
(
'
abricot
'
);
this
.
calendar
=
[
this
.
dateUtilities
.
addDaysToDate
(
1
,
new
Date
()),
this
.
dateUtilities
.
addDaysToDate
(
2
,
new
Date
()),
this
.
dateUtilities
.
addDaysToDate
(
3
,
new
Date
()),
];
this
.
form
.
patchValue
({
title
:
'
mon titre
'
,
description
:
'
répondez SVP <3 ! *-*
'
,
...
...
src/app/features/administration/administration.module.ts
View file @
0932f110
...
...
@@ -16,6 +16,8 @@ import { StepThreeComponent } from './form/step-three/step-three.component';
import
{
StepFourComponent
}
from
'
./form/step-four/step-four.component
'
;
import
{
StepFiveComponent
}
from
'
./form/step-five/step-five.component
'
;
import
{
DevMenuComponent
}
from
'
./dev-menu/dev-menu.component
'
;
import
{
CalendarModule
}
from
'
primeng/calendar
'
;
import
{
DateViewsComponent
}
from
'
./form/date-views/date-views.component
'
;
@
NgModule
({
declarations
:
[
...
...
@@ -29,10 +31,12 @@ import { DevMenuComponent } from './dev-menu/dev-menu.component';
StepFourComponent
,
StepFiveComponent
,
DevMenuComponent
,
DateViewsComponent
,
],
imports
:
[
AdministrationRoutingModule
,
CommonModule
,
CalendarModule
,
ReactiveFormsModule
,
SharedModule
,
TranslateModule
.
forChild
({
extend
:
true
}),
...
...
src/app/features/administration/form/date-views/date-views.component.html
0 → 100644
View file @
0932f110
<button
class=
"btn btn--primary"
(click)=
"pollService.addChoice()"
>
{{ 'dates.add' | translate }}
</button>
<div
*ngFor=
"let choice of pollService.dateList; index as id"
class=
"date-choice"
>
<input
[(ngModel)]=
"choice.date_object"
name=
"dateChoices_{{ id }}"
id=
"dateChoices_{{ id }}"
useValueAsDate
type=
"date"
/>
<button
(click)=
"pollService.dateList.splice(id, 1)"
class=
"btn btn-warning"
>
<i
class=
"fa fa-times"
aria-hidden=
"true"
></i>
</button>
<button
(click)=
"pollService.addTimeToDate(choice, id)"
*ngIf=
"'true' === pollService.allowSeveralHours"
class=
"btn btn--primary"
>
{{ 'dates.add_time' | translate }}
</button>
<div
*ngIf=
"'true' === pollService.allowSeveralHours"
class=
"several-times"
>
<div
*ngFor=
"let timeItem of choice.timeList; index as idTime"
class=
"time-choice"
>
<input
[(ngModel)]=
"timeItem.literal"
name=
"dateTime_{{ id }}_Choices_{{ idTime }}"
id=
"dateTime_{{ id }}_Choices_{{ idTime }}"
type=
"text"
/>
<button
(click)=
"choice.timeList.splice(idTime, 1)"
class=
"btn btn-warning"
>
<i
class=
"fa fa-times"
aria-hidden=
"true"
></i>
</button>
</div>
</div>
</div>
<button
(click)=
"pollService.showDateInterval = !pollService.showDateInterval"
[ngClass]=
"{ active: pollService.showDateInterval }"
class=
"btn btn--primary"
id=
"toggle_interval_button"
>
<i
class=
"fa fa-clock-o"
aria-hidden=
"true"
></i>
{{ 'dates.add_interval' | translate }}
</button>
<section
*ngIf=
"pollService.showDateInterval"
class=
"date-interval form-row"
>
<h2>
{{ 'dates.add_interval' | translate }}
</h2>
<div
class=
"columns"
>
<div
class=
"column"
>
{{ 'dates.interval_propose' | translate }}
</div>
<div
class=
"column"
>
<label
for=
"start_interval"
class=
"hidden"
>
start
</label>
<input
id=
"start_interval"
(change)=
"pollService.countDays()"
formControlName=
"startDateInterval"
type=
"date"
/>
</div>
</div>
<div
class=
"columns"
>
<div
class=
"column"
>
{{ 'dates.interval_span' | translate }}
</div>
<div
class=
"column"
>
<label
for=
"end_interval"
class=
"hidden"
>
end
</label>
<input
id=
"end_interval"
formControlName=
"endDateInterval"
type=
"date"
/>
</div>
</div>
<button
(click)=
"pollService.addIntervalOfDates()"
class=
"btn btn-block btn--primary"
>
<i
class=
"fa fa-plus"
aria-hidden=
"true"
></i>
{{ 'dates.interval_button' | translate }}
{{ pollService.intervalDays }}
{{ 'dates.interval_button_dates' | translate }}
</button>
</section>
src/app/features/administration/form/date-views/date-views.component.scss
0 → 100644
View file @
0932f110
src/app/features/administration/form/date-views/date-views.component.spec.ts
0 → 100644
View file @
0932f110
import
{
async
,
ComponentFixture
,
TestBed
}
from
'
@angular/core/testing
'
;
import
{
DateViewsComponent
}
from
'
./date-views.component
'
;
describe
(
'
DateViewsComponent
'
,
()
=>
{
let
component
:
DateViewsComponent
;
let
fixture
:
ComponentFixture
<
DateViewsComponent
>
;
beforeEach
(
async
(()
=>
{
TestBed
.
configureTestingModule
({
declarations
:
[
DateViewsComponent
],
}).
compileComponents
();
}));
beforeEach
(()
=>
{
fixture
=
TestBed
.
createComponent
(
DateViewsComponent
);
component
=
fixture
.
componentInstance
;
fixture
.
detectChanges
();
});
it
(
'
should create
'
,
()
=>
{
expect
(
component
).
toBeTruthy
();
});
});
src/app/features/administration/form/date-views/date-views.component.ts
0 → 100644
View file @
0932f110
import
{
Component
,
OnInit
}
from
'
@angular/core
'
;
import
{
PollService
}
from
'
../../../../core/services/poll.service
'
;
@
Component
({
selector
:
'
app-date-views
'
,
templateUrl
:
'
./date-views.component.html
'
,
styleUrls
:
[
'
./date-views.component.scss
'
],
})
export
class
DateViewsComponent
implements
OnInit
{
constructor
(
public
pollService
:
PollService
)
{}
ngOnInit
():
void
{}
}
src/app/features/administration/form/step-four/step-four.component.html
View file @
0932f110
<app-stepper
[step_current]=
"4"
[step_max]=
"5"
></app-stepper>
<div
class=
"step"
>
<div
class=
"min-height"
>
<form
action=
"#"
[formGroup]=
"pollService.form"
>
<app-stepper
[step_current]=
"4"
[step_max]=
"5"
></app-stepper>
<div
class=
"creator-infos"
>
<label
class=
""
for=
"creatorEmail"
>
<span>
{{ 'creation.name' | translate }}
</span>
</label>
<label
class=
"hidden"
for=
"creatorPseudo"
>
<span>
{{ 'creation.email' | translate }}
</span>
</label>
<input
#title
matInput
placeholder=
"pseudo"
formControlName=
"creatorPseudo"
id=
"creatorPseudo"
required
/>
<input
#title
matInput
placeholder=
"mon-email@example.com"
formControlName=
"creatorEmail"
id=
"creatorEmail"
required
/>
</div>
<div
class=
"creator-infos"
>
<label
class=
""
for=
"creatorEmail"
>
<span>
{{ 'creation.name' | translate }}
</span>
</label>
<input
#title
matInput
placeholder=
"pseudo"
formControlName=
"creatorPseudo"
id=
"creatorPseudo"
required
/>
<label
class=
"hidden"
for=
"creatorPseudo"
>
<span>
{{ 'creation.email' | translate }}
</span>
</label>
<input
#title
matInput
placeholder=
"mon-email@example.com"
formControlName=
"creatorEmail"
id=
"creatorEmail"
required
/>
</div>
<fieldset
class=
"advanced-config"
>
<button
class=
"btn is-info"
(click)=
"advancedDisplayEnabled = !advancedDisplayEnabled"
>
<i
class=
"fa fa-save"
></i>
{{ 'creation.advanced' | translate }}
</button>
<fieldset
class=
"complete well"
*ngIf=
"advancedDisplayEnabled"
>
<h2>
{{ 'creation.advanced' | translate }}
</h2>
<fieldset
class=
"advanced-config"
>
<button
class=
"btn is-info"
(click)=
"advancedDisplayEnabled = !advancedDisplayEnabled"
>
<i
class=
"fa fa-save"
></i>
{{ 'creation.advanced' | translate }}
</button>
<fieldset
class=
"complete well"
*ngIf=
"advancedDisplayEnabled"
>
<h2>
{{ 'creation.advanced' | translate }}
</h2>
<br
/>
<br
/>
<label
for=
"slug"
>
Url pour les participants
</label>
<br
/>
<span
>
{{ urlPrefix }}
<strong>
{{ form.controls.custom_url.value }}
</strong>
</span>
<app-copy-text
[textToCopy]=
"urlPrefix + form.controls.custom_url.value"
></app-copy-text>
<label
for=
"slug"
>
Url pour les participants
</label>
<br
/>
<span
>
{{ urlPrefix }}
<strong>
{{ pollService.form.controls.custom_url.value }}
</strong>
</span>
<app-copy-text
[textToCopy]=
"urlPrefix + pollService.form.controls.custom_url.value"
></app-copy-text>
<button
mat-button
*ngIf=
"form.controls.custom_url.value"
matSuffix
mat-icon-button
aria-label=
"Clear"
(click)=
"slug.value = ''"
></button>
<input
#slug
matInput
id=
"slug"
placeholder=
"Url"
formControlName=
"slug"
required
/>
<br
/>
<div
appearance=
"outline"
class=
"is-not-flex"
>
<mat-label>
Nombre de jours avant expiration
</mat-label>
<input
#expiracy
id=
"expiracy"
matInput
type=
"number"
placeholder=
"Nombre de jours avant expiration"
formControlName=
"expiracyNumberOfDays"
required
/>
<button
mat-button
*ngIf=
"expiracy.value"
matSuffix
mat-icon-button
aria-label=
"Clear"
(click)=
"expiracy.value = ''"
>
<i
class=
"fa fa-close"
></i>
<button
mat-button
*ngIf=
"form.controls.custom_url.value"
matSuffix
mat-icon-button
aria-label=
"Clear"
(click)=
"slug.value = ''"
></button>
<input
#slug
matInput
id=
"slug"
placeholder=
"Url"
formControlName=
"slug"
required
/>
<br
/>
<div
appearance=
"outline"
class=
"is-not-flex"
>
<mat-label>
Nombre de jours avant expiration
</mat-label>
<input
#expiracy
id=
"expiracy"
matInput
type=
"number"
placeholder=
"Nombre de jours avant expiration"
formControlName=
"expiracyNumberOfDays"
required
/>
<button
mat-button
*ngIf=
"expiracy.value"
matSuffix
mat-icon-button
aria-label=
"Clear"
(click)=
"expiracy.value = ''"
>
<i
class=
"fa fa-close"
></i>
</button>
</div>
<br
/>
<mat-checkbox
class=
"is-not-flex"
formControlName=
"areResultsPublic"
>
Les participants pourront consulter les résultats
</mat-checkbox>
<br
/>
<mat-checkbox
class=
"is-not-flex"
formControlName=
"isAboutDate"
>
Les choix possibles concerneront des dates
</mat-checkbox>
<br
/>
<mat-checkbox
class=
"is-not-flex"
formControlName=
"isProtectedByPassword"
>
Le sondage sera protégé par un mot de passe
</mat-checkbox>
<br
/>
<mat-checkbox
class=
"is-not-flex"
formControlName=
"isOwnerNotifiedByEmailOnNewVote"
>
Vous recevrez un mail à chaque nouvelle participation
</mat-checkbox>
<br
/>
<mat-checkbox
class=
"is-not-flex"
formControlName=
"isOwnerNotifiedByEmailOnNewComment"
>
Vous recevrez un mail à chaque nouveau commentaire
</mat-checkbox>
<br
/>
<mat-checkbox
class=
"is-not-flex"
formControlName=
"isMaybeAnswerAvailable"
>
La réponse « peut-être » sera disponible
</mat-checkbox>
</fieldset>
</fieldset>
</form>
</div>
<div
class=
"columns"
>
<div
class=
"column"
>
<button
class=
"button is-secondary is-fullwidth"
[routerLink]=
"['/administration/step/4']"
>
précédent
</button>
</div>
<div
class=
"column"
>
<!-- [disabled]="form.invalid"-->
<button
class=
"button is-primary is-fullwidth"
[routerLink]=
"['/administration/step/5']"
>
suivant
</button>
</div>
<br
/>
<mat-checkbox
class=
"is-not-flex"
formControlName=
"areResultsPublic"
>
Les participants pourront consulter les résultats
</mat-checkbox>
<br
/>
<mat-checkbox
class=
"is-not-flex"
formControlName=
"isAboutDate"
>
Les choix possibles concerneront des dates
</mat-checkbox>
<br
/>
<mat-checkbox
class=
"is-not-flex"
formControlName=
"isProtectedByPassword"
>
Le sondage sera protégé par un mot de passe
</mat-checkbox>
<br
/>
<mat-checkbox
class=
"is-not-flex"
formControlName=
"isOwnerNotifiedByEmailOnNewVote"
>
Vous recevrez un mail à chaque nouvelle participation
</mat-checkbox>
<br
/>
<mat-checkbox
class=
"is-not-flex"
formControlName=
"isOwnerNotifiedByEmailOnNewComment"
>
Vous recevrez un mail à chaque nouveau commentaire
</mat-checkbox>
<br
/>
<mat-checkbox
class=
"is-not-flex"
formControlName=
"isMaybeAnswerAvailable"
>
La réponse « peut-être » sera disponible
</mat-checkbox>
</fieldset>
</fieldset>
</div>
</div>
src/app/features/administration/form/step-four/step-four.component.ts
View file @
0932f110
import
{
Component
,
Input
,
OnInit
}
from
'
@angular/core
'
;
import
{
PollService
}
from
'
../../../../core/services/poll.service
'
;
@
Component
({
selector
:
'
app-step-four
'
,
...
...
@@ -12,7 +13,7 @@ export class StepFourComponent implements OnInit {
step_max
:
any
;
@
Input
()
form
:
any
;
constructor
()
{}
constructor
(
public
pollService
:
PollService
)
{}
ngOnInit
():
void
{}
}
src/app/features/administration/form/step-three/step-three.component.html
View file @
0932f110
...
...
@@ -62,89 +62,27 @@
</div>
<hr
/>
<span
class=
"count-dates title"
>
{{ pollService.
dateList
.length }}
{{ pollService.
calendar
.length }}
</span>
<span>
{{ 'dates.count_dates' | translate }}
</span>
<button
class=
"btn btn--primary"
(click)=
"pollService.addChoice()"
>
{{ 'dates.add' | translate }}
</button>
<div
*ngFor=
"let choice of pollService.dateList; index as id"
class=
"date-choice"
>
<input
[(ngModel)]=
"choice.date_object"
name=
"dateChoices_{{ id }}"
id=
"dateChoices_{{ id }}"
useValueAsDate
type=
"date"
/>
<button
(click)=
"pollService.dateList.splice(id, 1)"
class=
"btn btn-warning"
>
<i
class=
"fa fa-times"
aria-hidden=
"true"
></i>
</button>
<button
(click)=
"pollService.addTimeToDate(choice, id)"
*ngIf=
"'true' === pollService.allowSeveralHours"
class=
"btn btn--primary"
>
{{ 'dates.add_time' | translate }}
</button>
<div
*ngIf=
"'true' === pollService.allowSeveralHours"
class=
"several-times"
>
<div
*ngFor=
"let timeItem of choice.timeList; index as idTime"
class=
"time-choice"
>
<input
[(ngModel)]=
"timeItem.literal"
name=
"dateTime_{{ id }}_Choices_{{ idTime }}"
id=
"dateTime_{{ id }}_Choices_{{ idTime }}"
type=
"text"
/>
<button
(click)=
"choice.timeList.splice(idTime, 1)"
class=
"btn btn-warning"
>
<i
class=
"fa fa-times"
aria-hidden=
"true"
></i>
</button>
</div>
</div>
<div
class=
"calendar"
>
<p-calendar
[(ngModel)]=
"pollService.calendar"
firstDayOfWeek=
"5"
selectionMode=
"multiple"
inputId=
"multiple"
showButtonBar=
"true"
[inline]=
"true"
[showWeek]=
"true"
></p-calendar>
</div>
</div>
<button
(click)=
"pollService.showDateInterval = !pollService.showDateInterval"
[ngClass]=
"{ active: pollService.showDateInterval }"
class=
"btn btn--primary"
id=
"toggle_interval_button"
>
<i
class=
"fa fa-clock-o"
aria-hidden=
"true"
></i>
{{ 'dates.add_interval' | translate }}
</button>
<section
*ngIf=
"pollService.showDateInterval"
class=
"date-interval form-row"
>
<h2>
{{ 'dates.add_interval' | translate }}
</h2>
<div
class=
"columns"
>
<div
class=
"column"
>
{{ 'dates.interval_propose' | translate }}
</div>
<div
class=
"column"
>
<label
for=
"start_interval"
class=
"hidden"
>
start
</label>
<input
id=
"start_interval"
(change)=
"pollService.countDays()"
formControlName=
"startDateInterval"
type=
"date"
/>
</div>
</div>
<div
class=
"columns"
>
<div
class=
"column"
>
{{ 'dates.interval_span' | translate }}
</div>
<div
class=
"column"
>
<label
for=
"end_interval"
class=
"hidden"
>
end
</label>
<input
id=
"end_interval"
formControlName=
"endDateInterval"
type=
"date"
/>
</div>
</div>
<button
(click)=
"pollService.addIntervalOfDates()"
class=
"btn btn-block btn--primary"
>
<i
class=
"fa fa-plus"
aria-hidden=
"true"
></i>
{{ 'dates.interval_button' | translate }}
{{ pollService.intervalDays }}
{{ 'dates.interval_button_dates' | translate }}
</button>
</section>
<!-- <div class="debug">-->
<!-- <pre>{{pollService.calendar |json}}</pre>-->
<!-- </div>-->
</div>
</div>
<div
class=
"columns"
>
<div
class=
"column"
>
...
...
src/app/features/administration/form/step-three/step-three.component.scss
View file @
0932f110
@import
'../../../../../styles/variables'
;
.ui-datepicker
table
td
.ui-datepicker-today
>
a
.ui-state-active
,
.ui-datepicker
table
td
.ui-datepicker-today
>
span
.ui-state-active
{
background-color
:
$primary-color
!
important
;
}
.calendar
{
margin-top
:
1em
;
}
src/assets/i18n/FR.json
View file @
0932f110
...
...
@@ -27,7 +27,7 @@
},
"creation"
:
{
"title"
:
"Créer un sondage"
,
"want"
:
"
Je veux créer un
sondage"
,
"want"
:
"
Choisissez le type de
sondage"
,
"advanced"
:
"Options avancées"
,
"kind"
:
{
"classic"
:
"Textes"
,
...
...
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment