chill-bundles/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/Components/CalendarActive.vue

<template>
    <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
                    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"
            />
            &nbsp;<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"
            />
            &nbsp;<label
                class="form-check-label"
                for="flexSwitchCheckDefault"
                title="Agenda"
                ><i class="fa fa-calendar"
            /></label>
        </span>
    </div>
</template>

<script>
import { mapGetters } from "vuex";

export default {
    name: "CalendarActive",
    props: {
        user: {
            type: Object,
            required: true,
        },
        invite: {
            type: Object,
            required: false,
            default: null,
        },
    },
    computed: {
        style() {
            return {
                backgroundColor: this.$store.getters.getUserData(this.user)
                    .mainColor,
            };
        },
        rangeShow: {
            set(value) {
                this.$store.commit("showUserOnCalendar", {
                    user: this.user,
                    ranges: value,
                });
            },
            get() {
                return this.$store.getters.isRangeShownOnCalendarForUser(
                    this.user,
                );
            },
        },
        remoteShow: {
            set(value) {
                this.$store.commit("showUserOnCalendar", {
                    user: this.user,
                    remotes: value,
                });
            },
            get() {
                return this.$store.getters.isRemoteShownOnCalendarForUser(
                    this.user,
                );
            },
        },
    },
};
</script>

<style scoped lang="scss">
.calendar-active {
    margin: 0 0.25rem 0.25rem 0;
    padding: 0.5rem;

    border-radius: 0.5rem;

    color: var(--bs-blue);

    & > .badge-user {
        margin-right: 0.5rem;
    }
}
</style>