Skip to content

Commit

Permalink
COM-3874 - show / mask slots to plan
Browse files Browse the repository at this point in the history
  • Loading branch information
Manon Palin authored and Manon Palin committed Dec 24, 2024
1 parent 1cfbf00 commit 6c53586
Showing 1 changed file with 55 additions and 29 deletions.
84 changes: 55 additions & 29 deletions src/core/components/courses/SlotContainer.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,12 +15,12 @@
:model-value="estimatedStartDate" @update:model-value="inputTmpEstimatedStartDate($event)"
@blur="updateEstimatedStartDate" :disabled="course.archivedAt" />
</div>
<q-card class="q-pa-md" title="Afficher la liste des créneaux">
<q-item-section @click="showDetails()" class="slots cursor-pointer">
{{ showSlotList ? 'Cacher' : 'Afficher' }} la liste de tous les créneaux
<q-icon size="xs" :name="iconName" color="copper-grey-700" />
<q-card class="q-pa-md">
<q-item-section @click="showStepDetails()" class="slots cursor-pointer bg-copper-grey-100 copper-grey-700">
{{ showStepList ? 'Masquer' : 'Afficher' }} la liste des étapes de la formation
<q-icon size="xs" :name="showStepList.value ? 'expand_less' : 'expand_more'" color="copper-grey-700" />
</q-item-section>
<template v-if="showSlotList">
<template v-if="showStepList">
<q-item-section v-for="(step, index) in stepList" :key="step.key" class="q-pb-sm flex">
<div :class="getStepClass(step)">
<div v-if="isStepToPlan(step)" class="to-plan-header">Créneaux à programmer</div>
Expand All @@ -31,8 +31,8 @@
<div class="type text-capitalize">{{ step.typeLabel }}</div>
</div>
</div>
<div v-if="!isElearningStep(step)" class="slots-container">
<div v-for="day in Object.entries(omit(courseSlotsByStepAndDate[step.key], SLOTS_TO_PLAN_KEY))"
<div v-if="!isElearningStep(step)" class="slots-container cursor-pointer">
<div v-for="day in Object.entries(omit(courseSlotsByStepAndDate[step.key], TO_PLAN_KEY))"
:key="day" class="row q-ml-xl q-my-sm">
<div class="text-weight-bold q-mr-md">{{ day[0] }}</div>
<div>
Expand All @@ -50,13 +50,28 @@
</div>
</div>
</div>
<div v-if="isStepToPlan(step) && !!get(courseSlotsByStepAndDate[step.key], SLOTS_TO_PLAN_KEY)"
class="to-plan-slot">
<div v-for="slot in Object.values(get(courseSlotsByStepAndDate[step.key], SLOTS_TO_PLAN_KEY)).flat()"
:key="slot._id" @click="openEditionModal(slot)"
:class="['row items-center q-ml-xl q-mb-md', canEdit && 'cursor-pointer hover-orange']">
<div class="clickable-name text-orange-500 q-mr-md">créneau à planifier</div>
<q-icon v-if="canEdit" name="edit" size="12px" color="copper-grey-500" />
<div v-if="isStepToPlan(step) && !!get(courseSlotsByStepAndDate[step.key], TO_PLAN_KEY)"
class="q-mx-lg bg-peach-100">
<q-item-section @click="() => showSlotToPlanDetails(step.key)" class="slots cursor-pointer">
<span class="text-orange-500">
{{ showSlotToPlan[step.key] ? 'Masquer' : 'Afficher' }}
{{ formatQuantity(
'créneau',
Object.values(get(courseSlotsByStepAndDate[step.key], TO_PLAN_KEY)).flat().length,
'x'
) }} à planifier
</span>
<q-icon :name="showSlotToPlan[step.key] ? 'expand_less' : 'expand_more'" size="20px"
class="q-ml-sm" />
</q-item-section>
<div v-if="showSlotToPlan[step.key]" class="slots-to-plan-grid">
<div v-for="slot in
Object.values(get(courseSlotsByStepAndDate[step.key], TO_PLAN_KEY)).flat()"
:key="slot._id" @click="openEditionModal(slot)"
:class="['row items-center q-ml-lg q-mb-sm', canEdit && 'cursor-pointer hover-orange']">
<div class="clickable-name text-orange-500 q-mr-md">créneau à planifier</div>
<q-icon v-if="canEdit" name="edit" size="12px" color="copper-grey-500" />
</div>
</div>
</div>
<div class="q-mt-sm" v-if="canEdit && isRofOrVendorAdmin && isVendorInterface" align="right">
Expand Down Expand Up @@ -127,10 +142,10 @@ export default {
const modalLoading = ref(false);
const editedCourseSlot = ref({});
const editionModal = ref(false);
const SLOTS_TO_PLAN_KEY = 'toPlan';
const TO_PLAN_KEY = 'toPlan';
const isOnlySlot = ref(false);
const isPlannedSlot = ref(false);
const showSlotList = ref(true);
const showStepList = ref(true);
const { isVendorInterface } = useCourses();
const { waitForFormValidation } = useValidations();
Expand Down Expand Up @@ -182,7 +197,7 @@ export default {
const slotsByStepAndDateList = Object.keys(slotsByStep)
.map(key => groupBy(
slotsByStep[key],
s => (s.startDate ? CompaniDate(s.startDate).format(DD_MM_YYYY) : SLOTS_TO_PLAN_KEY)
s => (s.startDate ? CompaniDate(s.startDate).format(DD_MM_YYYY) : TO_PLAN_KEY)
));
return Object.fromEntries(Object.keys(slotsByStep).map((key, index) => [key, slotsByStepAndDateList[index]]));
Expand All @@ -195,6 +210,8 @@ export default {
typeLabel: getStepTypeLabel(step.type),
})));
const showSlotToPlan = ref(Object.entries(stepList.value.map(s => [s.key, false])));
const rules = computed(() => ({
editedCourseSlot: {
address: {
Expand Down Expand Up @@ -225,8 +242,6 @@ export default {
const v$ = useVuelidate(rules, { editedCourseSlot });
const iconName = computed(() => (showSlotList.value ? 'expand_less' : 'expand_more'));
const getSlotAddress = slot => get(slot, 'address.fullAddress') || 'Adresse non renseignée';
const openEditionModal = (slot) => {
Expand Down Expand Up @@ -296,6 +311,7 @@ export default {
NotifyNegative('Erreur lors de l\'ajout de la date à planifier.');
} finally {
addDateToPlanLoading.value = false;
showSlotToPlan.value[stepId] = true;
}
};
Expand Down Expand Up @@ -366,7 +382,7 @@ export default {
const isElearningStep = step => step.type === E_LEARNING;
const isPlannedStep = step => !!courseSlotsByStepAndDate.value[step.key] &&
Object.keys(courseSlotsByStepAndDate.value[step.key]).every(date => date !== SLOTS_TO_PLAN_KEY);
Object.keys(courseSlotsByStepAndDate.value[step.key]).every(date => date !== TO_PLAN_KEY);
const isStepToPlan = step => !(isElearningStep(step) || isPlannedStep(step));
Expand All @@ -388,7 +404,11 @@ export default {
canEdit.value && `cursor-pointer hover-${isPlannedStep(step) ? 'blue' : 'orange'}`,
];
const showDetails = () => { showSlotList.value = !showSlotList.value; };
const showStepDetails = () => { showStepList.value = !showStepList.value; };
const showSlotToPlanDetails = (stepId) => {
showSlotToPlan.value[stepId] = !showSlotToPlan.value[stepId];
};
const created = async () => {
if (!course.value) emit('refresh');
Expand All @@ -404,18 +424,18 @@ export default {
modalLoading,
editedCourseSlot,
editionModal,
SLOTS_TO_PLAN_KEY,
TO_PLAN_KEY,
isOnlySlot,
isPlannedSlot,
showSlotList,
showStepList,
showSlotToPlanDetails,
// Computed
v$,
course,
formatSlotTitle,
stepTypes,
courseSlotsByStepAndDate,
stepList,
iconName,
// Methods
get,
omit,
Expand All @@ -434,7 +454,9 @@ export default {
getStepClass,
getSlotClass,
formatSlotSchedule,
showDetails,
showStepDetails,
showSlotToPlan,
formatQuantity,
};
},
};
Expand Down Expand Up @@ -470,12 +492,8 @@ export default {
.slots
flex-direction: row
justify-content: space-between
background-color: $copper-grey-100
padding: 16px
margin: 4px
color: $copper-grey-700
.to-plan-slot
width: fit-content
.index
background-color: $copper-500
border-radius: 50%
Expand All @@ -501,4 +519,12 @@ export default {
text-decoration-color: $primary
.link-container
max-width: 14em
.slots-to-plan-grid
display: grid
grid-auto-flow: row
grid-template-rows: auto
grid-gap: 16px
grid-template-columns: repeat(4, 15vw)
@media screen and (max-width: 767px)
grid-template-columns: repeat(1, 50vw)
</style>

0 comments on commit 6c53586

Please sign in to comment.