Skip to content

Commit

Permalink
COM-3874 - fix reviews
Browse files Browse the repository at this point in the history
  • Loading branch information
Manon Palin committed Jan 2, 2025
1 parent 6c53586 commit 8c767a4
Showing 1 changed file with 83 additions and 84 deletions.
167 changes: 83 additions & 84 deletions src/core/components/courses/SlotContainer.vue
View file
Original file line number Diff line number Diff line change
@@ -1,96 +1,94 @@
<template>
<div>
<div class="q-mb-xl">
<q-item class="slot-section-title">
<q-item-section side>
<q-icon color="copper-grey-700" size="xl" :name="formatSlotTitle.icon" flat dense />
</q-item-section>
<q-item-section>
<div class="text-weight-bold">{{ formatSlotTitle.title }}</div>
<div class="slot-section-title-subtitle">{{ formatSlotTitle.subtitle }}</div>
</q-item-section>
</q-item>
<div v-if="!course.slots.length && isVendorInterface && isRofOrVendorAdmin" class="row gutter-profile">
<ni-date-input class="col-xs-12 col-md-6" caption="Date de démarrage souhaitée"
:model-value="estimatedStartDate" @update:model-value="inputTmpEstimatedStartDate($event)"
@blur="updateEstimatedStartDate" :disabled="course.archivedAt" />
</div>
<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="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>
<div class="row q-pa-md">
<div class="index">{{ index + 1 }}</div>
<div class="q-mx-md">
<div>{{ step.name }}</div>
<div class="type text-capitalize">{{ step.typeLabel }}</div>
</div>
<q-item class="slot-section-title">
<q-item-section side>
<q-icon color="copper-grey-700" size="xl" :name="formatSlotTitle.icon" flat dense />
</q-item-section>
<q-item-section>
<div class="text-weight-bold">{{ formatSlotTitle.title }}</div>
<div class="slot-section-title-subtitle">{{ formatSlotTitle.subtitle }}</div>
</q-item-section>
</q-item>
<div v-if="!course.slots.length && isVendorInterface && isRofOrVendorAdmin" class="row gutter-profile">
<ni-date-input class="col-xs-12 col-md-6" caption="Date de démarrage souhaitée"
:model-value="estimatedStartDate" @update:model-value="inputTmpEstimatedStartDate($event)"
@blur="updateEstimatedStartDate" :disabled="course.archivedAt" />
</div>
<q-card class="q-pa-md">
<q-item-section @click="showStepDetails" class="slots cursor-pointer bg-copper-grey-50 copper-grey-700">
{{ showStepList ? 'Masquer' : 'Afficher' }} la liste des étapes de la formation
<q-icon size="xs" :name="showStepList ? 'expand_less' : 'expand_more'" color="copper-grey-700" />
</q-item-section>
<div v-if="showStepList" class="bg-copper-grey-50 q-px-md">
<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>
<div class="row q-pa-md">
<div class="index">{{ index + 1 }}</div>
<div class="q-mx-md">
<div>{{ step.name }}</div>
<div class="type text-capitalize">{{ step.typeLabel }}</div>
</div>
<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>
<div v-for="slot in day[1]" :key="slot._id" @click="openEditionModal(slot)"
:class="getSlotClass(step)">
<div class="q-mr-md">{{ formatSlotSchedule(slot) }}</div>
<div v-if="step.type === ON_SITE" class="q-mr-md">{{ getSlotAddress(slot) }}</div>
<div v-else class="q-mr-md ellipsis link-container">
<a class="link" :href="slot.meetingLink" target="_blank" @click="$event.stopPropagation()">
{{ slot.meetingLink }}
</a>
{{ !slot.meetingLink ? 'Lien vers la visio non renseigné' : '' }}
</div>
<q-icon v-if="canEdit" name="edit" size="12px" color="copper-grey-500" />
</div>
<div v-if="!isElearningStep(step)" class="slots-container">
<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>
<div v-for="slot in day[1]" :key="slot._id" @click="openEditionModal(slot)"
:class="getSlotClass(step)">
<div class="q-mr-md">{{ formatSlotSchedule(slot) }}</div>
<div v-if="step.type === ON_SITE" class="q-mr-md">{{ getSlotAddress(slot) }}</div>
<div v-else class="q-mr-md ellipsis link-container">
<a class="link" :href="slot.meetingLink" target="_blank" @click="$event.stopPropagation()">
{{ slot.meetingLink }}
</a>
{{ !slot.meetingLink ? 'Lien vers la visio non renseigné' : '' }}
</div>
<q-icon v-if="canEdit" name="edit" size="12px" color="copper-grey-500" />
</div>
</div>
<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 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 class="q-mt-sm" v-if="canEdit && isRofOrVendorAdmin && isVendorInterface" align="right">
<ni-button label="Ajouter un créneau" color="primary" icon="add" @click="addDateToPlan(step.key)"
:disable="addDateToPlanLoading" />
</div>
</div>
<div class="q-mt-sm" v-if="canEdit && isRofOrVendorAdmin && isVendorInterface" align="right">
<ni-button label="Ajouter un créneau" color="primary" icon="add" @click="addDateToPlan(step.key)"
:disable="addDateToPlanLoading" />
</div>
</div>
</q-item-section>
</template>
</q-card>
</div>

<slot-edition-modal v-model="editionModal" :edited-course-slot="editedCourseSlot" :step-types="stepTypes"
:validations="v$.editedCourseSlot" @hide="resetEditionModal" :loading="modalLoading" @delete="deleteCourseSlot"
@submit="updateCourseSlot" @update="setCourseSlot" :is-rof-or-vendor-admin="isRofOrVendorAdmin"
:is-vendor-interface="isVendorInterface" :is-only-slot="isOnlySlot" :is-planned-slot="isPlannedSlot"
@unplan-slot="unplanSlot" />
</div>
</q-item-section>
</div>
</q-card>
</div>

<slot-edition-modal v-model="editionModal" :edited-course-slot="editedCourseSlot" :step-types="stepTypes"
:validations="v$.editedCourseSlot" @hide="resetEditionModal" :loading="modalLoading" @delete="deleteCourseSlot"
@submit="updateCourseSlot" @update="setCourseSlot" :is-rof-or-vendor-admin="isRofOrVendorAdmin"
:is-vendor-interface="isVendorInterface" :is-only-slot="isOnlySlot" :is-planned-slot="isPlannedSlot"
@unplan-slot="unplanSlot" />
</template>

<script>
Expand Down Expand Up @@ -210,7 +208,7 @@ export default {
typeLabel: getStepTypeLabel(step.type),
})));
const showSlotToPlan = ref(Object.entries(stepList.value.map(s => [s.key, false])));
const showSlotToPlan = ref(stepList.value.map(s => ({ [s.key]: false })));
const rules = computed(() => ({
editedCourseSlot: {
Expand Down Expand Up @@ -493,7 +491,6 @@ export default {
flex-direction: row
justify-content: space-between
padding: 16px
margin: 4px
.index
background-color: $copper-500
border-radius: 50%
Expand Down Expand Up @@ -527,4 +524,6 @@ export default {
grid-template-columns: repeat(4, 15vw)
@media screen and (max-width: 767px)
grid-template-columns: repeat(1, 50vw)
.q-item__section
margin-left: 0px
</style>

0 comments on commit 8c767a4

Please sign in to comment.