mirror of
https://gitlab.com/Chill-Projet/chill-bundles.git
synced 2025-08-23 16:13:50 +00:00
first eslint corrections
This commit is contained in:
@@ -1,32 +1,35 @@
|
||||
<template>
|
||||
|
||||
<teleport to="#mainUser">
|
||||
|
||||
<h2 class="chill-red">Utilisateur principal</h2>
|
||||
<h2 class="chill-red">
|
||||
Utilisateur principal
|
||||
</h2>
|
||||
<div>
|
||||
<div>
|
||||
<div v-if="null !== this.$store.getters.getMainUser">
|
||||
<calendar-active :user="this.$store.getters.getMainUser" ></calendar-active>
|
||||
<calendar-active :user="this.$store.getters.getMainUser" />
|
||||
</div>
|
||||
<pick-entity
|
||||
:multiple="false"
|
||||
:types="['user']"
|
||||
:uniqid="'main_user_calendar'"
|
||||
:picked="null !== this.$store.getters.getMainUser ? [this.$store.getters.getMainUser] : []"
|
||||
:removableIfSet="false"
|
||||
:displayPicked="false"
|
||||
:removable-if-set="false"
|
||||
:display-picked="false"
|
||||
:suggested="this.suggestedUsers"
|
||||
:label="'main_user'"
|
||||
@addNewEntity="setMainUser"
|
||||
></pick-entity>
|
||||
@add-new-entity="setMainUser"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</teleport>
|
||||
|
||||
<concerned-groups></concerned-groups>
|
||||
<concerned-groups />
|
||||
|
||||
<teleport to="#schedule">
|
||||
<div class="row mb-3" v-if="activity.startDate !== null">
|
||||
<div
|
||||
class="row mb-3"
|
||||
v-if="activity.startDate !== null"
|
||||
>
|
||||
<label class="col-form-label col-sm-4">Date</label>
|
||||
<div class="col-sm-8">
|
||||
{{ $d(activity.startDate, 'long') }} - {{ $d(activity.endDate, 'hoursOnly') }}
|
||||
@@ -36,83 +39,185 @@
|
||||
</div>
|
||||
</teleport>
|
||||
|
||||
<location></location>
|
||||
<location />
|
||||
|
||||
|
||||
|
||||
<teleport to="#fullCalendar">
|
||||
<div class="calendar-actives">
|
||||
<template class="" v-for="u in getActiveUsers" :key="u.id">
|
||||
<calendar-active :user="u" :invite="this.$store.getters.getInviteForUser(u)"></calendar-active>
|
||||
</template>
|
||||
</div>
|
||||
<div class="display-options row justify-content-between" style="margin-top: 1rem;">
|
||||
<div class="col-sm-9 col-xs-12">
|
||||
<div class="input-group mb-3">
|
||||
<label class="input-group-text" for="slotDuration">Durée des créneaux</label>
|
||||
<select v-model="slotDuration" id="slotDuration" class="form-select">
|
||||
<option value="00:05:00">5 minutes</option>
|
||||
<option value="00:10:00">10 minutes</option>
|
||||
<option value="00:15:00">15 minutes</option>
|
||||
<option value="00:30:00">30 minutes</option>
|
||||
</select>
|
||||
<label class="input-group-text" for="slotMinTime">De</label>
|
||||
<select v-model="slotMinTime" id="slotMinTime" class="form-select">
|
||||
<option value="00:00:00">0h</option>
|
||||
<option value="01:00:00">1h</option>
|
||||
<option value="02:00:00">2h</option>
|
||||
<option value="03:00:00">3h</option>
|
||||
<option value="04:00:00">4h</option>
|
||||
<option value="05:00:00">5h</option>
|
||||
<option value="06:00:00">6h</option>
|
||||
<option value="07:00:00">7h</option>
|
||||
<option value="08:00:00">8h</option>
|
||||
<option value="09:00:00">9h</option>
|
||||
<option value="10:00:00">10h</option>
|
||||
<option value="11:00:00">11h</option>
|
||||
<option value="12:00:00">12h</option>
|
||||
</select>
|
||||
<label class="input-group-text" for="slotMaxTime">À</label>
|
||||
<select v-model="slotMaxTime" id="slotMaxTime" class="form-select">
|
||||
<option value="12:00:00">12h</option>
|
||||
<option value="13:00:00">13h</option>
|
||||
<option value="14:00:00">14h</option>
|
||||
<option value="15:00:00">15h</option>
|
||||
<option value="16:00:00">16h</option>
|
||||
<option value="17:00:00">17h</option>
|
||||
<option value="18:00:00">18h</option>
|
||||
<option value="19:00:00">19h</option>
|
||||
<option value="20:00:00">20h</option>
|
||||
<option value="21:00:00">21h</option>
|
||||
<option value="22:00:00">22h</option>
|
||||
<option value="23:00:00">23h</option>
|
||||
<option value="23:59:59">24h</option>
|
||||
</select>
|
||||
</div>
|
||||
<teleport to="#fullCalendar">
|
||||
<div class="calendar-actives">
|
||||
<template
|
||||
class=""
|
||||
v-for="u in getActiveUsers"
|
||||
:key="u.id"
|
||||
>
|
||||
<calendar-active
|
||||
:user="u"
|
||||
:invite="this.$store.getters.getInviteForUser(u)"
|
||||
/>
|
||||
</template>
|
||||
</div>
|
||||
<div
|
||||
class="display-options row justify-content-between"
|
||||
style="margin-top: 1rem;"
|
||||
>
|
||||
<div class="col-sm-9 col-xs-12">
|
||||
<div class="input-group mb-3">
|
||||
<label
|
||||
class="input-group-text"
|
||||
for="slotDuration"
|
||||
>Durée des créneaux</label>
|
||||
<select
|
||||
v-model="slotDuration"
|
||||
id="slotDuration"
|
||||
class="form-select"
|
||||
>
|
||||
<option value="00:05:00">
|
||||
5 minutes
|
||||
</option>
|
||||
<option value="00:10:00">
|
||||
10 minutes
|
||||
</option>
|
||||
<option value="00:15:00">
|
||||
15 minutes
|
||||
</option>
|
||||
<option value="00:30:00">
|
||||
30 minutes
|
||||
</option>
|
||||
</select>
|
||||
<label
|
||||
class="input-group-text"
|
||||
for="slotMinTime"
|
||||
>De</label>
|
||||
<select
|
||||
v-model="slotMinTime"
|
||||
id="slotMinTime"
|
||||
class="form-select"
|
||||
>
|
||||
<option value="00:00:00">
|
||||
0h
|
||||
</option>
|
||||
<option value="01:00:00">
|
||||
1h
|
||||
</option>
|
||||
<option value="02:00:00">
|
||||
2h
|
||||
</option>
|
||||
<option value="03:00:00">
|
||||
3h
|
||||
</option>
|
||||
<option value="04:00:00">
|
||||
4h
|
||||
</option>
|
||||
<option value="05:00:00">
|
||||
5h
|
||||
</option>
|
||||
<option value="06:00:00">
|
||||
6h
|
||||
</option>
|
||||
<option value="07:00:00">
|
||||
7h
|
||||
</option>
|
||||
<option value="08:00:00">
|
||||
8h
|
||||
</option>
|
||||
<option value="09:00:00">
|
||||
9h
|
||||
</option>
|
||||
<option value="10:00:00">
|
||||
10h
|
||||
</option>
|
||||
<option value="11:00:00">
|
||||
11h
|
||||
</option>
|
||||
<option value="12:00:00">
|
||||
12h
|
||||
</option>
|
||||
</select>
|
||||
<label
|
||||
class="input-group-text"
|
||||
for="slotMaxTime"
|
||||
>À</label>
|
||||
<select
|
||||
v-model="slotMaxTime"
|
||||
id="slotMaxTime"
|
||||
class="form-select"
|
||||
>
|
||||
<option value="12:00:00">
|
||||
12h
|
||||
</option>
|
||||
<option value="13:00:00">
|
||||
13h
|
||||
</option>
|
||||
<option value="14:00:00">
|
||||
14h
|
||||
</option>
|
||||
<option value="15:00:00">
|
||||
15h
|
||||
</option>
|
||||
<option value="16:00:00">
|
||||
16h
|
||||
</option>
|
||||
<option value="17:00:00">
|
||||
17h
|
||||
</option>
|
||||
<option value="18:00:00">
|
||||
18h
|
||||
</option>
|
||||
<option value="19:00:00">
|
||||
19h
|
||||
</option>
|
||||
<option value="20:00:00">
|
||||
20h
|
||||
</option>
|
||||
<option value="21:00:00">
|
||||
21h
|
||||
</option>
|
||||
<option value="22:00:00">
|
||||
22h
|
||||
</option>
|
||||
<option value="23:00:00">
|
||||
23h
|
||||
</option>
|
||||
<option value="23:59:59">
|
||||
24h
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-sm-3 col-xs-12">
|
||||
<div class="float-end">
|
||||
<div class="form-check input-group">
|
||||
<span class="input-group-text">
|
||||
<input id="showHideWE" class="mt-0" type="checkbox" v-model="hideWeekends">
|
||||
</span>
|
||||
<label for="showHideWE" class="form-check-label input-group-text">Week-ends</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-3 col-xs-12">
|
||||
<div class="float-end">
|
||||
<div class="form-check input-group">
|
||||
<span class="input-group-text">
|
||||
<input
|
||||
id="showHideWE"
|
||||
class="mt-0"
|
||||
type="checkbox"
|
||||
v-model="hideWeekends"
|
||||
>
|
||||
</span>
|
||||
<label
|
||||
for="showHideWE"
|
||||
class="form-check-label input-group-text"
|
||||
>Week-ends</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<FullCalendar ref="fullCalendar" :options="calendarOptions">
|
||||
<template v-slot:eventContent='arg'>
|
||||
<span>
|
||||
<b v-if="arg.event.extendedProps.is === 'remote'">{{ arg.event.title}}</b>
|
||||
<b v-else-if="arg.event.extendedProps.is === 'range'">{{ arg.timeText }} {{ arg.event.extendedProps.locationName }} <small>{{ arg.event.extendedProps.userLabel }}</small></b>
|
||||
<b v-else-if="arg.event.extendedProps.is === 'current'">{{ arg.timeText }} {{ $t('current_selected')}} </b>
|
||||
<b v-else-if="arg.event.extendedProps.is === 'local'">{{ arg.event.title}}</b>
|
||||
<b v-else>{{ arg.timeText }} {{ $t('current_selected')}} </b>
|
||||
</span>
|
||||
</template>
|
||||
</FullCalendar>
|
||||
</teleport>
|
||||
</div>
|
||||
<FullCalendar
|
||||
ref="fullCalendar"
|
||||
:options="calendarOptions"
|
||||
>
|
||||
<template #eventContent="arg">
|
||||
<span>
|
||||
<b v-if="arg.event.extendedProps.is === 'remote'">{{ arg.event.title }}</b>
|
||||
<b v-else-if="arg.event.extendedProps.is === 'range'">{{ arg.timeText }} {{ arg.event.extendedProps.locationName }} <small>{{ arg.event.extendedProps.userLabel }}</small></b>
|
||||
<b v-else-if="arg.event.extendedProps.is === 'current'">{{ arg.timeText }} {{ $t('current_selected') }} </b>
|
||||
<b v-else-if="arg.event.extendedProps.is === 'local'">{{ arg.event.title }}</b>
|
||||
<b v-else>{{ arg.timeText }} {{ $t('current_selected') }} </b>
|
||||
</span>
|
||||
</template>
|
||||
</FullCalendar>
|
||||
</teleport>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@@ -1,22 +1,55 @@
|
||||
<template>
|
||||
<div :style="style" class="calendar-active">
|
||||
<div
|
||||
:style="style"
|
||||
class="calendar-active"
|
||||
>
|
||||
<span class="badge-user">
|
||||
{{ user.text }}
|
||||
<template v-if="invite !== null">
|
||||
<i v-if="invite.status === 'accepted'" class="fa fa-check"></i>
|
||||
<i v-else-if="invite.status === 'declined'" class="fa fa-times"></i>
|
||||
<i v-else-if="invite.status === 'pending'" class="fa fa-question-o"></i>
|
||||
<i v-else-if="invite.status === 'tentative'" class="fa fa-question"></i>
|
||||
<i
|
||||
v-if="invite.status === 'accepted'"
|
||||
class="fa fa-check"
|
||||
/>
|
||||
<i
|
||||
v-else-if="invite.status === 'declined'"
|
||||
class="fa fa-times"
|
||||
/>
|
||||
<i
|
||||
v-else-if="invite.status === 'pending'"
|
||||
class="fa fa-question-o"
|
||||
/>
|
||||
<i
|
||||
v-else-if="invite.status === 'tentative'"
|
||||
class="fa fa-question"
|
||||
/>
|
||||
<span v-else="">{{ invite.status }}</span>
|
||||
</template>
|
||||
</span>
|
||||
<span class="form-check-inline form-switch">
|
||||
<input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault" v-model="rangeShow">
|
||||
<label class="form-check-label" for="flexSwitchCheckDefault" title="Disponibilités"><i class="fa fa-calendar-check-o"></i></label>
|
||||
<input
|
||||
class="form-check-input"
|
||||
type="checkbox"
|
||||
id="flexSwitchCheckDefault"
|
||||
v-model="rangeShow"
|
||||
>
|
||||
<label
|
||||
class="form-check-label"
|
||||
for="flexSwitchCheckDefault"
|
||||
title="Disponibilités"
|
||||
><i class="fa fa-calendar-check-o" /></label>
|
||||
</span>
|
||||
<span class="form-check-inline form-switch">
|
||||
<input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault" v-model="remoteShow">
|
||||
<label class="form-check-label" for="flexSwitchCheckDefault" title="Agenda"><i class="fa fa-calendar"></i></label>
|
||||
<input
|
||||
class="form-check-input"
|
||||
type="checkbox"
|
||||
id="flexSwitchCheckDefault"
|
||||
v-model="remoteShow"
|
||||
>
|
||||
<label
|
||||
class="form-check-label"
|
||||
for="flexSwitchCheckDefault"
|
||||
title="Agenda"
|
||||
><i class="fa fa-calendar" /></label>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -1,36 +1,53 @@
|
||||
<template>
|
||||
<div>
|
||||
<h2 class="chill-red">{{ $t('choose_your_calendar_user') }}</h2>
|
||||
<h2 class="chill-red">
|
||||
{{ $t('choose_your_calendar_user') }}
|
||||
</h2>
|
||||
<VueMultiselect
|
||||
name="field"
|
||||
id="calendarUserSelector"
|
||||
v-model="value"
|
||||
track-by="id"
|
||||
label="value"
|
||||
:custom-label="transName"
|
||||
:placeholder="$t('select_user')"
|
||||
:multiple="true"
|
||||
:close-on-select="false"
|
||||
:allow-empty="true"
|
||||
:model-value="value"
|
||||
:select-label="$t('multiselect.select_label')"
|
||||
:deselect-label="$t('multiselect.deselect_label')"
|
||||
:selected-label="$t('multiselect.selected_label')"
|
||||
@select="selectUsers"
|
||||
@remove="unSelectUsers"
|
||||
@close="coloriseSelectedValues"
|
||||
:options="options">
|
||||
</VueMultiselect>
|
||||
name="field"
|
||||
id="calendarUserSelector"
|
||||
v-model="value"
|
||||
track-by="id"
|
||||
label="value"
|
||||
:custom-label="transName"
|
||||
:placeholder="$t('select_user')"
|
||||
:multiple="true"
|
||||
:close-on-select="false"
|
||||
:allow-empty="true"
|
||||
:model-value="value"
|
||||
:select-label="$t('multiselect.select_label')"
|
||||
:deselect-label="$t('multiselect.deselect_label')"
|
||||
:selected-label="$t('multiselect.selected_label')"
|
||||
@select="selectUsers"
|
||||
@remove="unSelectUsers"
|
||||
@close="coloriseSelectedValues"
|
||||
:options="options"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input type="checkbox" id="myCalendar" class="form-check-input" v-model="showMyCalendarWidget" />
|
||||
<label class="form-check-label" for="myCalendar">{{ $t('show_my_calendar') }}</label>
|
||||
<input
|
||||
type="checkbox"
|
||||
id="myCalendar"
|
||||
class="form-check-input"
|
||||
v-model="showMyCalendarWidget"
|
||||
>
|
||||
<label
|
||||
class="form-check-label"
|
||||
for="myCalendar"
|
||||
>{{ $t('show_my_calendar') }}</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input type="checkbox" id="weekends" class="form-check-input" @click="toggleWeekends" />
|
||||
<label class="form-check-label" for="weekends">{{ $t('show_weekends') }}</label>
|
||||
<input
|
||||
type="checkbox"
|
||||
id="weekends"
|
||||
class="form-check-input"
|
||||
@click="toggleWeekends"
|
||||
>
|
||||
<label
|
||||
class="form-check-label"
|
||||
for="weekends"
|
||||
>{{ $t('show_weekends') }}</label>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
<script>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user