Found duplicate bug in selection values

Author: almerk

client/src/components/Main.vue

@@ -13,7 +13,7 @@
  v-model="selectedTypeIds"
  />
  <span>{{ type.name }}</span>
- <badge>{{ calendarsOfType(type.id) }}</badge>
+ <badge>{{ calendarsOfType(type.id).length }}</badge>
  </label>
  </li>
  </ul>
@@ -34,15 +34,18 @@
  :disabled="!inArray(calendar.typeId, selectedTypeIds)"
  />
  <span>{{ calendar.name }}</span>
- <badge>{{ eventsOfCalendar(calendar.id) }}</badge>
+ <badge>{{ eventsOfCalendar(calendar.id).length }}</badge>
  </label>
  </li>
  </ul>
  </fieldset>
  </toolbar>
  </aside>
  <main>
- <feed :events="displayedEvents" :selectedEventId="selectedEventId"></feed>
+ <feed
+ :events="displayedEventIds"
+ :selectedEventId="selectedEventId"
+ ></feed>
  <div id="calendar"></div>
  </main>
  </div>
@@ -58,15 +61,14 @@ export default {
  components: {
  toolbar,
  feed,
- badge
+ badge,
  },
  data() {
  return {
  selectedEventId: this.$route.params.eventId,
  selectedTypeIds: [],
  selectedCalendarIds: [],
- selectedEventIds:[],
- displayedEvents: [],
+ displayedEventIds: [],
  };
  },
  methods: {
@@ -93,11 +95,10 @@ export default {
  return notIn.length == 0 ? [] : full;
  },
  calendarsOfType(id) {
- return this.calendars.filter((x) => x.typeId == id).length;
+ return this.calendars.filter((x) => x.typeId == id);
  },
  eventsOfCalendar(id) {
- return this.$store.getters.events.filter((x) => x.calendarId == id)
- .length;
+ return this.$store.getters.events.filter((x) => x.calendarId == id);
  },
  color(typeName) {
  return events.typeColorHSL(typeName.toLowerCase(), 0);
@@ -144,17 +145,13 @@ export default {
  events(newValue, oldValue) {
  const addedEvents = newValue.filter((x) => !oldValue.includes(x));
  const removedEvents = oldValue.filter((x) => !newValue.includes(x));
- addedEvents.forEach((ev) => {
- this.displayedEvents.push({
- ...ev,
- isDisplayed: this.selectedCalendarIds.includes(ev.calendarId),
- });
- });
+ this.displayedEventIds.push(
+ ...addedEvents
+ .filter((e) => this.selectedCalendarIds.includes(e.calendarId))
+ .map((e) => e.id)
+ );
  removedEvents.forEach((ev) => {
- const index = this.displayedEvents.findIndex(
- (x) => x.objectId == ev.objectId
- );
- this.$delete(this.displayedEvents, index);
+ this.$delete(this.displayedEventIds, ev.id);
  });
  },
  selectedTypeIds(newValue, oldValue) {
@@ -171,14 +168,22 @@ export default {
  ];
  },
  selectedCalendarIds(newValue, oldValue) {
+ console.log(newValue, oldValue);
  const added = newValue.filter((x) => !oldValue.includes(x));
  const removed = oldValue.filter((x) => !newValue.includes(x));
- this.displayedEvents
- .filter((x) => added.includes(x.calendarId))
- .forEach((x) => (x.isDisplayed = true));
- this.displayedEvents
- .filter((x) => removed.includes(x.calendarId))
- .forEach((x) => (x.isDisplayed = false));
+ console.log('added',added);
+ console.log('removed',removed);
+ return;
+ added.forEach((cId) => {
+ const toAdd = this.eventsOfCalendar(cId).map((x) => x.id);
+ // console.log('toAdd',toAdd)
+ this.displayedEventIds.push(...toAdd);
+ });
+ removed.forEach((cId) => {
+ const toDelete = this.eventsOfCalendar(cId).map((x) => x.id);
+ console.log('toDelete',toAdd)
+ toDelete.forEach((id) => this.$delete(this.displayedEventIds, id));
+ });
  },
  },
 };

client/src/components/calendar.event.vue

@@ -18,7 +18,7 @@ export default {
  ...events.all,
  },
  props: {
- event: Object,
+ eventId: String,
  },
  data() {
  return {
@@ -49,8 +49,4 @@ export default {
 };
 </script>
 <style >
-[v-cloak]{
- background: red;
- height: 100px;width: 100px;
-}
 </style>

client/src/components/feed.vue

@@ -1,12 +1,12 @@
 <template>
  <div id="feed">
  <h6 class="date-label"
- >#no date<badge>{{ noDateEvents.length }}</badge></h6
+ >#no date<badge>{{ noDateEventIds.length }}</badge></h6
  >
- <template v-for="event in events">
+ <template v-for="eventId in noDateEventIds">
  <calendar-event
- :key="event.id"
- :event="event"
+ :key="eventId"
+ :eventId="eventId"
  :class="[{ selected: event.id == selectedEventId }]"
  >
  </calendar-event>
@@ -20,11 +20,8 @@ import VueScrollTo from "vue-scrollto";
 import Badge from "./ui/badge.vue";
 
 export default {
- created() {
- this.events.forEach(this.addEvent);
- },
  props: {
- displayedEvents: Array,
+ displayedEventIds: Array,
  selectedEventId: String,
  },
  components: {
@@ -33,28 +30,20 @@ export default {
  },
  data() {
  return {
- noDateEvents: [],
+ noDateEventIds: [],
+
  };
  },
  computed: {
- events() {
- return this.$store.getters.events;
- },
  occurencies() {
  return this.$store.getters["occurencies/values"];
  },
  },
  methods: {
  removeFrom(array, ev) {
- const index = array.findIndex((x) => x.objectId == ev.objectId);
+ const index = array.findIndex((x) => x.objectId == ev.id);
  if (index >= 0) this.$delete(array, index);
- },
- addEvent(ev) {
- this.noDateEvents.push(ev);
- },
- removeEvent(ev) {
- this.removeFrom(this.noDateEvents, ev);
- },
+ }
  },
  updated() {
  if (this.selectedEventId)
@@ -64,12 +53,10 @@ export default {
  });
  },
  watch: {
- events(newEvents, oldEvents) {
- const addedEvents = newEvents.filter((e) => !oldEvents.includes(e));
- addedEvents.forEach(this.addEvent);
- const removedEvents = oldEvents.filter((e) => !newEvents.includes(e));
- removedEvents.forEach(this.removeEvent);
- },
+ displayedEventIds(newValue, oldValue) {
+ console.log(newValue,'!!!',oldValue)
+
+ }
  },
 };
 </script>