display of calendar form

This commit is contained in:
2022-06-06 17:11:43 +02:00
parent c31886fea3
commit 543d30acb9
12 changed files with 79 additions and 37 deletions

View File

@@ -1,17 +1,20 @@
<template>
<teleport to="#mainUser">
<div class="row">
<div class="col-md-4">
<label>Utilisateur principal</label>
</div>
<div class="col-md-8 align-content-end">
<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>
</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"
@addNewEntity="setMainUser"
></pick-entity>
</div>
@@ -20,27 +23,40 @@
<concerned-groups></concerned-groups>
<teleport to="#schedule">
<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') }}
<span v-if="activity.calendarRange === null">(Pas de plage de disponibilité sélectionnée)</span>
<span v-else>(Une plage de disponibilité sélectionnée)</span>
</div>
</div>
</teleport>
<location></location>
<teleport to="#fullCalendar">
<div>
<div class="calendar-actives">
<template class="" v-for="u in getActiveUsers" :key="u.id">
<calendar-active :user="u" ></calendar-active>
</template>
</div>
<div class="row justify-content-between">
<div class="col-sm-4 col-xs-12">
<div class="display-options row justify-content-between">
<div class="col-sm 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="this.slotDuration" id="slotDuration" class="form-select">
<option value="00:05:00">5</option>
<option value="00:10:00">10</option>
<option value="00:15:00">15</option>
<option value="00:30:00">30</option>
<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>
</div>
</div>
<div class="col-sm-4 col-xs-12">
<div class="col-sm col-xs-12">
<div class="float-end">
<div class="input-group mb-3">
<div class="input-group-text">
@@ -210,3 +226,14 @@ export default {
}
</script>
<style>
.calendar-actives {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.display-options {
margin-top: 1rem;
}
</style>