Started feed managing

Author: almerk

client/src/App.vue

@@ -5,7 +5,7 @@
 export default {
  created() {
  this.$store.commit("initialize");
- this.$store.commit('occurencies/retrieve',1,2)
+ this.$store.commit("occurencies/retrieve");
  },
  data() {
  return {};

client/src/components/Main.vue

@@ -65,6 +65,7 @@ export default {
  selectedEventId: this.$route.params.eventId,
  selectedTypeIds: [],
  selectedCalendarIds: [],
+ selectedEventIds:[],
  displayedEvents: [],
  };
  },

client/src/components/calendar.event.vue

@@ -5,6 +5,7 @@
  @click.native="eventClick(event.id)"
  :id="`event-${event.id}`"
  :style="styleObj"
+ v-cloak
  ></component>
 </template>
 
@@ -48,4 +49,8 @@ export default {
 };
 </script>
 <style >
+[v-cloak]{
+ background: red;
+ height: 100px;width: 100px;
+}
 </style>

client/src/components/events/anniversary/index.vue

@@ -6,10 +6,8 @@
  <time>{{ date }}
  <small v-if="yearsCount > 0"
  ><label>In current year:</label>
- <span>{{ yearsCount }}</span></small
- >
+ <span>{{ yearsCount }}</span></small>
  </time>
- 
  </fieldset>
  </template>
  </default-index>

client/src/components/feed.vue

@@ -1,42 +1,76 @@
 <template>
  <div id="feed">
- <!-- <test-component/> -->
- <calendar-event
- v-for="event in events"
- :key="event.id"
- :event="event"
- v-show="event.isDisplayed"
- :class="[{ selected: event.id == selectedEventId }]">
- </calendar-event>
+ <h6 class="date-label"
+ >#no date<badge>{{ noDateEvents.length }}</badge></h6
+ >
+ <template v-for="event in events">
+ <calendar-event
+ :key="event.id"
+ :event="event"
+ :class="[{ selected: event.id == selectedEventId }]"
+ >
+ </calendar-event>
+ </template>
  </div>
 </template>
 
 <script>
 import calendarEvent from "./calendar.event.vue";
 import VueScrollTo from "vue-scrollto";
-
+import Badge from "./ui/badge.vue";
 
 export default {
+ created() {
+ this.events.forEach(this.addEvent);
+ },
  props: {
- events: Array,
+ displayedEvents: Array,
  selectedEventId: String,
  },
  components: {
  "calendar-event": calendarEvent,
-
+ Badge,
  },
  data() {
- return { };
+ return {
+ noDateEvents: [],
+ };
+ },
+ 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);
+ if (index >= 0) this.$delete(array, index);
+ },
+ addEvent(ev) {
+ this.noDateEvents.push(ev);
+ },
+ removeEvent(ev) {
+ this.removeFrom(this.noDateEvents, ev);
+ },
  },
  updated() {
- if(this.selectedEventId)
+ if (this.selectedEventId)
  VueScrollTo.scrollTo(`#event-${this.selectedEventId}`, 500, {
  container: "#feed",
  duration: 2000,
  });
  },
+ 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);
+ },
+ },
 };
 </script>
 
@@ -57,4 +91,9 @@ export default {
  grid-column-end: -1;
  grid-row: span 12;
 }
+#feed .date-label {
+ text-transform: lowercase;
+ grid-column-start: 1;
+ grid-column: span 2;
+}
 </style>

client/src/occurencies.js

@@ -3,11 +3,11 @@ import axios from 'axios'
 import dateAndTime from 'date-and-time'
 
 const DEFAULT_DAYS_INTERVAL = 45;
-const START_DATE = dateAndTime.addDays(new Date(), - DEFAULT_DAYS_INTERVAL)
-const FINISH_DATE = dateAndTime.addDays(new Date(), DEFAULT_DAYS_INTERVAL)
+const today = new Date(); today.setHours(0); today.setMinutes(0); today.setSeconds(0)
+const START_DATE = dateAndTime.addDays(today, - DEFAULT_DAYS_INTERVAL)
+const FINISH_DATE = dateAndTime.addDays(today, DEFAULT_DAYS_INTERVAL)
 const format = (date) => dateAndTime.format(date, 'YYYY-MM-DD');
 
-
 export default {
  namespaced: true,
  state: {
@@ -18,18 +18,47 @@ export default {
  },
  getters: {
  values: (state) => state.computed || [],
+ dates: (state) => [...Array(dateAndTime.subtract(state.end, state.start).toDays() + 1).keys()]
+ .map(x => dateAndTime.addDays(state.start, x)),
+ byDates: (state, getters) => state.computed ? getters.dates.reduce((current, val) => {
+ const key = format(val);
+ current[key] = state.computed.filter(x => dateAndTime.isSameDay(val, new Date(x.dateTime.value)));
+ return current;
+ }, {}) : {}
  },
  mutations: {
  retrieve: (state, start, end) => {
+ state.start = start || state.start;
+ state.end = end || state.end;
  const req = endpoints.occurencies(format(state.start), format(state.end))
- state.loading = true;
- axios.get(req)
- .then(response => {
- state.computed = response.data
- console.log(state.computed)
- })
- .catch(err => console.error(`Retrieving occurencies error:`, err));
+ getOccurencies(state, req);
+ },
+ retrievePrevious: (state, start) => {
+ const reqRight = dateAndTime.addDays(state.start, -1);
+ state.start = start || dateAndTime.addDays(state.start, -DEFAULT_DAYS_INTERVAL);
+ const req = endpoints.occurencies(format(state.start), format(reqRight));
+ getOccurencies(state, req, (state, data) => {
+ state.unshift(...data);
+ });
+ },
+ retrieveNext: (state, end) => {
+ const reqLeft = dateAndTime.addDays(state.end, 1);
+ state.end = end || dateAndTime.addDays(state.end, DEFAULT_DAYS_INTERVAL);
+ const req = endpoints.occurencies(format(reqLeft), format(state.end));
+ getOccurencies(state, req, (state, data) => {
+ state.push(...data);
+ });
  },
  clear: (state) => state.computed = null
  }
+}
+
+function getOccurencies(state, req, transformState = (state, data) => { state.computed = data }) {
+ state.loading = true;
+ axios.get(req)
+ .then(response => {
+ transformState(state, response.data);
+ state.loading = false;
+ })
+ .catch(err => console.error(`Retrieving occurencies error:`, err));
 }

server/controllers/occurencies.js

@@ -4,7 +4,10 @@ const computeOccurencies = require('../logic/occurencies.js');
 const occurencies = async (req, res, next, start, end) => {
  const objectsCollection = getCollection(req);
  const values = await objectsCollection.find({ type: /\w*Event/i }).project({ id: true, dates: true, _id: false }).toArray();
- const occurencies = values.map(x => computeOccurencies(x.dates, start, end)).reduce((a, b) => a.concat(b), []);
+ const occurencies = values
+ .map(x => computeOccurencies(x.dates, start, end))
+ .reduce((a, b) => a.concat(b), [])
+ .sort((a, b) => a.dateTime.value - b.dateTime.value);
  res.json(occurencies);
 }