[VYMCA-104] Add Favorites option

ymcatwincities · Dec 3, 2020 · db2130f · db2130f
1 parent 7bcf48d
commit db2130f
Show file tree

Hide file tree

Showing 30 changed files with 1,045 additions and 39 deletions.
diff --git a/js/gated-content/dist/gated-content.css b/js/gated-content/dist/gated-content.css
diff --git a/js/gated-content/dist/gated-content.umd.min.js b/js/gated-content/dist/gated-content.umd.min.js
diff --git a/js/gated-content/src/GatedContent.vue b/js/gated-content/src/GatedContent.vue
@@ -34,14 +34,9 @@ export default {
       'getAppSettings',
     ]),
   },
-  created() {
-    this.$store.dispatch('setAppUrl', this.appUrl);
-    if (this.appUrl !== undefined && this.appUrl.length > 0) {
-      window.location = this.appUrl;
-    }
-  },
-  mounted() {
-    this.$store.dispatch('setSettings', JSON.parse(this.settings));
+  async mounted() {
+    await this.$store.dispatch('setSettings', JSON.parse(this.settings));
+    await this.$store.dispatch('loadFavorites');
   },
 };
 </script>

diff --git a/js/gated-content/src/components/AddToFavorite.vue b/js/gated-content/src/components/AddToFavorite.vue
@@ -0,0 +1,95 @@
+<template>
+  <div
+    :class="{ active: isActive, 'add-to-favorite': true }"
+    class="fa-stack fa-50"
+  >
+    <Spinner v-if="loading"></Spinner>
+    <template v-else>
+      <i class="fas fa-heart fa-stack-1x" title="Add to favorite" @click="onClick"></i>
+    </template>
+  </div>
+</template>
+
+<script>
+import Spinner from '@/components/Spinner.vue';
+
+export default {
+  name: 'AddToFavorite',
+  components: {
+    Spinner,
+  },
+  props: {
+    id: {
+      type: Number,
+      required: true,
+    },
+    type: {
+      type: String,
+      required: true,
+    },
+    bundle: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      loading: false,
+      shareModal: {
+        visible: false,
+      },
+    };
+  },
+  computed: {
+    isActive() {
+      return this.$store.getters.isFavorite({
+        id: this.id,
+        type: this.type,
+        bundle: this.bundle,
+      });
+    },
+  },
+  methods: {
+    onClick() {
+      this.loading = true;
+      setTimeout(this.addToFavorite, 1000);
+    },
+    addToFavorite() {
+      let action = 'addItemToFavorites';
+      if (this.isActive) {
+        action = 'deleteItemFromFavorites';
+      }
+      this.$store.dispatch(action, {
+        id: this.id,
+        type: this.type,
+        bundle: this.bundle,
+      })
+        .then(() => {
+          this.loading = false;
+        });
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+.add-to-favorite {
+  cursor: pointer;
+  display: inline-block;
+  margin: 0 20px;
+  font-size: 1.5rem;
+
+  .spinner {
+    width: 25px;
+    height: 25px;
+  }
+
+  &.active {
+    color: $red;
+  }
+
+  &:hover {
+    color: $red;
+  }
+}
+</style>
diff --git a/js/gated-content/src/components/Modal.vue b/js/gated-content/src/components/Modal.vue
@@ -0,0 +1,28 @@
+<template>
+  <transition name="modal">
+    <div class="modal-mask">
+      <div class="modal-wrapper">
+        <div class="modal-container">
+          <div class="modal-header">
+            <slot name="header"></slot>
+            <button class="modal-default-button" @click="$emit('close')">
+              Close
+            </button>
+          </div>
+          <div class="modal-body">
+            <slot name="body"></slot>
+          </div>
+          <div class="modal-footer">
+            <slot name="footer"></slot>
+          </div>
+        </div>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script>
+export default {
+  name: 'Modal',
+};
+</script>
diff --git a/js/gated-content/src/components/blog/BlogListing.vue b/js/gated-content/src/components/blog/BlogListing.vue
@@ -40,10 +40,11 @@ import Spinner from '@/components/Spinner.vue';
 import Pagination from '@/components/Pagination.vue';
 import { JsonApiCombineMixin } from '@/mixins/JsonApiCombineMixin';
 import { SettingsMixin } from '@/mixins/SettingsMixin';
+import { FavoritesMixin } from '@/mixins/FavoritesMixin';
 
 export default {
   name: 'BlogListing',
-  mixins: [JsonApiCombineMixin, SettingsMixin],
+  mixins: [JsonApiCombineMixin, SettingsMixin, FavoritesMixin],
   components: {
     BlogTeaser,
     Spinner,
@@ -67,6 +68,16 @@ export default {
       type: Boolean,
       default: false,
     },
+    favorites: {
+      type: Boolean,
+      default: false,
+    },
+    sort: {
+      type: Object,
+      default() {
+        return { path: 'created', direction: 'DESC' };
+      },
+    },
     pagination: {
       type: Boolean,
       default: false,
@@ -96,6 +107,7 @@ export default {
   watch: {
     $route: 'load',
     excludedVideoId: 'load',
+    sort: 'load',
   },
   async mounted() {
     this.featuredLocal = this.featured;
@@ -115,10 +127,7 @@ export default {
       }
 
       params.sort = {
-        sortByDate: {
-          path: 'created',
-          direction: 'DESC',
-        },
+        sortBy: this.sort,
       };
 
       params.filter = {};
@@ -132,6 +141,20 @@ export default {
         };
       }
 
+      if (this.favorites) {
+        if (this.isFavoritesTypeEmpty('node', 'vy_blog_post')) {
+          this.loading = false;
+          return;
+        }
+        params.filter.includeFavorites = {
+          condition: {
+            path: 'drupal_internal__nid',
+            operator: 'IN',
+            value: this.getFavoritesTypeIds('node', 'vy_blog_post'),
+          },
+        };
+      }
+
       if (this.category) {
         params.filter['field_gc_video_category.id'] = this.category;
       }

diff --git a/js/gated-content/src/components/blog/BlogTeaser.vue b/js/gated-content/src/components/blog/BlogTeaser.vue
@@ -8,12 +8,22 @@
         </div>
         <div class="title">{{ blog.attributes.title }}</div>
     </router-link>
+    <AddToFavorite
+      :id="blog.attributes.drupal_internal__nid"
+      :type="'node'"
+      :bundle="'vy_blog_post'"
+    ></AddToFavorite>
   </div>
 </template>
 
 <script>
+import AddToFavorite from '@/components/AddToFavorite.vue';
+
 export default {
   name: 'BlogTeaser',
+  components: {
+    AddToFavorite,
+  },
   props: {
     blog: {
       type: Object,

diff --git a/js/gated-content/src/components/event/EventListing.vue b/js/gated-content/src/components/event/EventListing.vue
@@ -38,10 +38,11 @@ import client from '@/client';
 import EventTeaser from '@/components/event/EventTeaser.vue';
 import Spinner from '@/components/Spinner.vue';
 import { JsonApiCombineMixin } from '@/mixins/JsonApiCombineMixin';
+import { FavoritesMixin } from '@/mixins/FavoritesMixin';
 
 export default {
   name: 'EventListing',
-  mixins: [JsonApiCombineMixin],
+  mixins: [JsonApiCombineMixin, FavoritesMixin],
   components: {
     EventTeaser,
     Spinner,
@@ -71,6 +72,16 @@ export default {
       type: Boolean,
       default: false,
     },
+    favorites: {
+      type: Boolean,
+      default: false,
+    },
+    sort: {
+      type: Object,
+      default() {
+        return { path: 'date.value', direction: 'ASC' };
+      },
+    },
     limit: {
       type: Number,
       default: 0,
@@ -102,6 +113,8 @@ export default {
     $route: 'load',
     excludedVideoId: 'load',
     date: 'load',
+    eventType: 'load',
+    sort: 'load',
   },
   async mounted() {
     this.featuredLocal = this.featured;
@@ -196,6 +209,20 @@ export default {
         };
       }
 
+      if (this.favorites) {
+        if (this.isFavoritesTypeEmpty('eventinstance', this.eventType)) {
+          this.loading = false;
+          return;
+        }
+        params.filter.includeFavorites = {
+          condition: {
+            path: 'drupal_internal__id',
+            operator: 'IN',
+            value: this.getFavoritesTypeIds('eventinstance', this.eventType),
+          },
+        };
+      }
+
       if (this.limit !== 0) {
         params.page = {
           limit: this.limit,
@@ -208,10 +235,7 @@ export default {
 
       params.filter.status = 1;
       params.sort = {
-        sortByDate: {
-          path: 'date.value',
-          direction: 'ASC',
-        },
+        sortByDate: this.sort,
       };
 
       client

diff --git a/js/gated-content/src/components/event/EventTeaser.vue b/js/gated-content/src/components/event/EventTeaser.vue
@@ -34,13 +34,22 @@
         </div>
       </div>
     </router-link>
+    <AddToFavorite
+      :id="video.attributes.drupal_internal__id"
+      :type="'eventinstance'"
+      :bundle="type"
+    ></AddToFavorite>
   </div>
 </template>
 
 <script>
+import AddToFavorite from '@/components/AddToFavorite.vue';
 
 export default {
   name: 'EventTeaser',
+  components: {
+    AddToFavorite,
+  },
   props: {
     video: {
       type: Object,
@@ -80,6 +89,9 @@ export default {
           return 'LiveStream';
       }
     },
+    type() {
+      return this.video.type.replace('eventinstance--', '');
+    },
   },
 };
 </script>
diff --git a/js/gated-content/src/components/video/CategoryTeaser.vue b/js/gated-content/src/components/video/CategoryTeaser.vue
@@ -8,12 +8,22 @@
         </div>
         <div class="title">{{ category.attributes.name }}</div>
     </router-link>
+    <AddToFavorite
+      :id="category.attributes.drupal_internal__tid"
+      :type="'taxonomy_term'"
+      :bundle="'gc_category'"
+    ></AddToFavorite>
   </div>
 </template>
 
 <script>
+import AddToFavorite from '@/components/AddToFavorite.vue';
+
 export default {
   name: 'CategoryTeaser',
+  components: {
+    AddToFavorite,
+  },
   props: {
     category: {
       type: Object,