add toggle button to show/add remote and ranges for each user in calendar

This commit is contained in:
2022-05-20 20:40:24 +02:00
parent 2b770036a5
commit 461fc1c41f
5 changed files with 75 additions and 20 deletions

View File

@@ -1,5 +1,15 @@
<template>
<span class="badge" :style="style">{{ user.text }}</span>
<span class="badge" :style="style">
{{ user.text }}
<span class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault" v-model="rangeShow">
<label class="form-check-label" for="flexSwitchCheckDefault">Disponibilité</label>
</span>
<span class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault" v-model="remoteShow">
<label class="form-check-label" for="flexSwitchCheckDefault">Agenda</label>
</span>
</span>
</template>
<script>
@@ -14,17 +24,22 @@ export default {
backgroundColor: this.$store.getters.getUserData(this.user).mainColor,
};
},
mainColor() {
return 'blue';
console.log('mainColor userId', this.userId);
console.log(this.$store.state.usersData);
if (!this.$store.getters.hasUserDataById(this.userId)) {
return 'blue';
rangeShow: {
set (value) {
this.$store.commit('showUserOnCalendar', {user: this.user, ranges: value});
},
get() {
return this.$store.getters.isRangeShownOnCalendarForUser(this.user);
}
return this.$store.getters.getUserDataById(this.userId).mainColor;
}
},
remoteShow: {
set (value) {
this.$store.commit('showUserOnCalendar', {user: this.user, remote: value});
},
get() {
return this.$store.getters.isRemoteShownOnCalendarForUser(this.user);
}
},
}
}
</script>