some layout for calendar app

This commit is contained in:
2022-06-03 15:25:36 +02:00
parent 3a88ea0b0f
commit 6c3043f6fc
3 changed files with 59 additions and 38 deletions

View File

@@ -1,37 +1,56 @@
<template>
<div class="row">
<div class="col-md-4">
<label>Utilisateur principal</label>
<teleport to="#mainUser">
<div class="row">
<div class="col-md-4">
<label>Utilisateur principal</label>
</div>
<div class="col-md-8 align-content-end">
<pick-entity
:multiple="false"
:types="['user']"
:uniqid="'main_user_calendar'"
:picked="null !== this.$store.getters.getMainUser ? [this.$store.getters.getMainUser] : []"
:removableIfSet="false"
@addNewEntity="setMainUser"
></pick-entity>
</div>
</div>
<div class="col-md-8 align-content-end">
<pick-entity
:multiple="false"
:types="['user']"
:uniqid="'main_user_calendar'"
:picked="null !== this.$store.getters.getMainUser ? [this.$store.getters.getMainUser] : []"
:removableIfSet="false"
@addNewEntity="setMainUser"
></pick-entity>
</div>
</div>
<div class="row">
<select v-model="this.slotDuration">
<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>
</select>
</div>
<div>
<input type="checkbox" v-model="this.hideWeekEnds" /><label>Masquer les week-ends</label>
</div>
</teleport>
<concerned-groups></concerned-groups>
<div>
<template v-for="u in getActiveUsers" :key="u.id">
<calendar-active :user="u" ></calendar-active>
</template>
</div>
<location></location>
<teleport to="#fullCalendar">
<div class="row">
<template v-for="u in getActiveUsers" :key="u.id">
<div class="col-md-4">
<calendar-active :user="u" ></calendar-active>
</div>
</template>
</div>
<div class="row">
<div class="col-md-6">
<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>
</select>
</div>
</div>
<div class="col-md-6 self-end-m">
<div class="input-group mb-3">
<div class="input-group-text">
<input id="showHideWE" class="form-check-input mt-0" type="checkbox" v-model="this.hideWeekEnds" />
<label for="showHideWE" class="form-check-label">Masquer les week-ends</label>
</div>
</div>
</div>
</div>
<FullCalendar ref="fullCalendar" :options="calendarOptions">
<template v-slot:eventContent='arg'>
<b>{{ arg.timeText }}</b>
@@ -39,7 +58,6 @@
</template>
</FullCalendar>
</teleport>
<location></location>
</template>
<script>