From b3ac1533ee83fea1d18c13e68750174058f1feed Mon Sep 17 00:00:00 2001
From: Andrew Berezovsky <andrew.berezovsky@gmail.com>
Date: Tue, 15 Feb 2022 16:12:01 +0300
Subject: [PATCH 1/2] feat: Added separate component for results list
 rendering.

---
 openy_af4_vue_app/src/components/Results.vue  | 286 +---------------
 .../src/components/ResultsList.vue            | 312 ++++++++++++++++++
 .../src/components/modals/BookmarkedItems.vue |   4 -
 3 files changed, 323 insertions(+), 279 deletions(-)
 create mode 100644 openy_af4_vue_app/src/components/ResultsList.vue

diff --git a/openy_af4_vue_app/src/components/Results.vue b/openy_af4_vue_app/src/components/Results.vue
index d1e5e99..ae915d0 100644
--- a/openy_af4_vue_app/src/components/Results.vue
+++ b/openy_af4_vue_app/src/components/Results.vue
@@ -37,173 +37,14 @@
             </span>
           </div>
 
-          <div
-            v-for="item in data.table"
-            :key="item.nid ? item.nid : item.offering_id"
-            class="result"
-            role="button"
-            @click="showActivityDetailsModal(item)"
-          >
-            <div class="d-sm-none hidden-sm hidden-md hidden-lg">
-              <div class="result-header">
-                <span class="title">
-                  {{ item.name }}
-                </span>
-              </div>
-
-              <div class="ages-spots">
-                <span v-if="item.ages || (selectedAges.length && !legacyMode)" class="ages">
-                  <span class="age-label">{{ 'Ages' | t }}:</span>
-                  <span v-if="!selectedAges.length || legacyMode" class="info">
-                    {{ item.ages }}
-                  </span>
-                  <template v-for="age in selectedAges" v-else>
-                    <template
-                      v-if="
-                        (!item.min_age || parseInt(item.min_age) <= age) &&
-                          (!item.max_age || parseInt(item.max_age) >= age)
-                      "
-                    >
-                      <AgeIcon :key="age" :age="parseInt(age)" :ages="ages" big />
-                    </template>
-                  </template>
-                </span>
-                <AvailableSpots
-                  v-if="!disableSpotsAvailable && item.spots_available !== ''"
-                  :spots="Number(item.spots_available)"
-                  :wait-list="Number(item.wait_list_availability)"
-                />
-              </div>
-
-              <div v-if="item.dates" class="item-detail dates">
-                <i class="fa fa-calendar"></i>
-                <span>
-                  <span class="info">{{ item.dates }}</span>
-                  <br />
-                  <span v-if="item.days" class="details">{{ item.days }}</span>
-                </span>
-              </div>
-
-              <div class="item-detail schedule">
-                <i class="fa fa-clock fa-clock-o"></i>
-                <span class="schedule-items">
-                  <span
-                    v-for="(schedule, index) in item.schedule"
-                    :key="index"
-                    class="schedule-item"
-                  >
-                    <span class="info">{{ schedule.time }}</span>
-                    <br />
-                    <span class="details">{{ schedule.days }}</span>
-                  </span>
-                </span>
-              </div>
-
-              <div v-if="item.location" class="item-detail">
-                <i class="fa fa-map-marker"></i>
-                <span>
-                  <span class="info">{{ item.location }}</span>
-                  <br />
-                  <span v-if="item.roomName" class="details">{{ item.roomName }}</span>
-                </span>
-              </div>
-
-              <div v-if="item.instructor" class="item-detail instructor">
-                <i class="fa fa-user"></i>
-                <span>
-                  <span class="info">{{ item.instructor }}</span>
-                  <br />
-                  <span v-if="item.substitute" class="details">{{ item.substitute }}</span>
-                </span>
-              </div>
-            </div>
-
-            <div class="d-none d-sm-block hidden-xs">
-              <div class="result-header">
-                <span class="title">
-                  {{ item.name }}
-                </span>
-                <span v-if="item.ages || (selectedAges.length && !legacyMode)" class="ages">
-                  <span class="age-label">{{ 'Ages' | t }}:</span>
-                  <span v-if="!selectedAges.length || legacyMode" class="info">
-                    {{ item.ages }}
-                  </span>
-                  <template v-for="age in selectedAges" v-else>
-                    <template
-                      v-if="
-                        (!item.min_age || parseInt(item.min_age) <= age) &&
-                          (!item.max_age || parseInt(item.max_age) >= age)
-                      "
-                    >
-                      <AgeIcon :key="age" :age="parseInt(age)" :ages="ages" big />
-                    </template>
-                  </template>
-                </span>
-              </div>
-
-              <div class="row">
-                <div class="col-sm-4">
-                  <div v-if="item.dates" class="item-detail dates">
-                    <i class="fa fa-calendar"></i>
-                    <span>
-                      <span class="info">{{ item.dates }}</span>
-                      <br />
-                      <span v-if="item.days" class="details">{{ item.days }}</span>
-                    </span>
-                  </div>
-
-                  <div class="item-detail schedule">
-                    <i class="fa fa-clock fa-clock-o"></i>
-                    <span class="schedule-items">
-                      <span
-                        v-for="(schedule, index) in item.schedule"
-                        :key="index"
-                        class="schedule-item"
-                      >
-                        <span class="info">{{ schedule.time }}</span>
-                        <br />
-                        <span class="details">{{ schedule.days }}</span>
-                      </span>
-                    </span>
-                  </div>
-                </div>
-
-                <div class="col-sm-4">
-                  <div v-if="item.location" class="item-detail">
-                    <i class="fa fa-map-marker"></i>
-                    <span>
-                      <span class="info">{{ item.location }}</span>
-                      <br />
-                      <span v-if="item.roomName" class="details">{{ item.roomName }}</span>
-                    </span>
-                  </div>
-
-                  <div v-if="item.instructor" class="item-detail instructor">
-                    <i class="fa fa-user"></i>
-                    <span>
-                      <span class="info">{{ item.instructor }}</span>
-                      <br />
-                      <span v-if="item.substitute" class="details">{{ item.substitute }}</span>
-                    </span>
-                  </div>
-                </div>
-
-                <div class="col-sm-4">
-                  <div v-if="item.price" class="item-detail price">
-                    <i class="fa fa-money-bill fa-money"></i>
-                    <span>
-                      <span class="info">{{ item.price }}</span>
-                    </span>
-                  </div>
-                  <AvailableSpots
-                    v-if="!disableSpotsAvailable && item.spots_available !== ''"
-                    :spots="Number(item.spots_available)"
-                    :wait-list="Number(item.wait_list_availability)"
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
+          <ResultsList
+            :results="data.table"
+            :ages="ages"
+            :selected-ages="selectedAges"
+            :legacy-mode="legacyMode"
+            :disable-spots-available="disableSpotsAvailable"
+            @showActivityDetailsModal="showActivityDetailsModal($event)"
+          />
           <slot v-if="!data.table.length" name="no-results" />
 
           <ActivityDetailsModal
@@ -223,7 +64,6 @@
             v-model="bookmarkedItemsModal.visible"
             :cart-items="cartItems"
             :ages="ages"
-            :selected-ages="selectedAges"
             :disable-spots-available="disableSpotsAvailable"
             @removeItem="removeItem($event)"
             @removeItems="removeItems"
@@ -244,9 +84,8 @@ import Loading from '@/components/Loading.vue'
 import ActivityDetailsModal from '@/components/modals/ActivityDetails.vue'
 import BookmarkedItemsModal from '@/components/modals/BookmarkedItems.vue'
 import BookmarkFeatureModal from '@/components/modals/BookmarkFeature.vue'
-import AvailableSpots from '@/components/AvailableSpots'
-import AgeIcon from '@/components/AgeIcon.vue'
 import BookmarkIcon from '@/components/BookmarkIcon'
+import ResultsList from '@/components/ResultsList.vue'
 
 export default {
   name: 'Results',
@@ -255,9 +94,8 @@ export default {
     ActivityDetailsModal,
     BookmarkedItemsModal,
     BookmarkFeatureModal,
-    AvailableSpots,
-    AgeIcon,
-    BookmarkIcon
+    BookmarkIcon,
+    ResultsList
   },
   props: {
     data: {
@@ -392,107 +230,5 @@ export default {
       color: $af-blue;
     }
   }
-
-  .result {
-    padding: 10px;
-    color: $af-black;
-
-    @include media-breakpoint-up('lg') {
-      padding: 20px;
-    }
-
-    &:nth-of-type(odd) {
-      background-color: $af-light-gray;
-    }
-
-    .result-header {
-      display: flex;
-      justify-content: space-between;
-    }
-
-    .title {
-      font-size: 14px;
-      line-height: 21px;
-      color: $af-blue;
-      font-weight: bold;
-      margin-bottom: 10px;
-
-      @include media-breakpoint-up('lg') {
-        font-size: 18px;
-        line-height: 27px;
-        margin-bottom: 20px;
-      }
-    }
-
-    .ages-spots {
-      display: flex;
-      justify-content: space-between;
-      margin-bottom: 15px;
-    }
-
-    .age-label {
-      font-size: 10px;
-      line-height: 15px;
-      margin-right: 5px;
-
-      @include media-breakpoint-up('lg') {
-        font-size: 12px;
-        line-height: 18px;
-        margin-right: 10px;
-      }
-    }
-
-    .item-detail {
-      display: flex;
-      margin-bottom: 10px;
-
-      @include media-breakpoint-up('lg') {
-        margin-bottom: 20px;
-      }
-
-      &:last-child {
-        margin-bottom: 0;
-      }
-
-      .schedule-items {
-        display: flex;
-
-        @include media-breakpoint-up('md') {
-          flex-direction: column;
-        }
-
-        .schedule-item {
-          margin-right: 10px;
-
-          @include media-breakpoint-up('md') {
-            margin-right: 0;
-          }
-
-          &:last-child {
-            margin-right: 0;
-          }
-        }
-      }
-
-      .details {
-        font-size: 10px;
-        line-height: 15px;
-      }
-
-      .fa {
-        font-size: 20px;
-        color: $af-dark-gray;
-        margin-right: 10px;
-        width: 20px;
-        text-align: center;
-        flex-shrink: 0;
-      }
-    }
-
-    .info {
-      font-size: 12px;
-      line-height: 18px;
-    }
-  }
 }
 </style>
diff --git a/openy_af4_vue_app/src/components/ResultsList.vue b/openy_af4_vue_app/src/components/ResultsList.vue
new file mode 100644
index 0000000..ada4015
--- /dev/null
+++ b/openy_af4_vue_app/src/components/ResultsList.vue
@@ -0,0 +1,312 @@
+<template>
+  <div class="results-list-component">
+    <div
+      v-for="item in results"
+      :key="item.nid ? item.nid : item.offering_id"
+      class="result"
+      role="button"
+      @click="showActivityDetailsModal(item)"
+    >
+      <div class="d-sm-none hidden-sm hidden-md hidden-lg">
+        <div class="result-header">
+          <span class="title">
+            {{ item.name }}
+          </span>
+        </div>
+
+        <div class="ages-spots">
+          <span v-if="item.ages || (selectedAges.length && !legacyMode)" class="ages">
+            <span class="age-label">{{ 'Ages' | t }}:</span>
+            <span v-if="!selectedAges.length || legacyMode" class="info">
+              {{ item.ages }}
+            </span>
+            <template v-for="age in selectedAges" v-else>
+              <template
+                v-if="
+                  (!item.min_age || parseInt(item.min_age) <= age) &&
+                    (!item.max_age || parseInt(item.max_age) >= age)
+                "
+              >
+                <AgeIcon :key="age" :age="parseInt(age)" :ages="ages" big />
+              </template>
+            </template>
+          </span>
+          <AvailableSpots
+            v-if="!disableSpotsAvailable && item.spots_available !== ''"
+            :spots="Number(item.spots_available)"
+            :wait-list="Number(item.wait_list_availability)"
+          />
+        </div>
+
+        <div v-if="item.dates" class="item-detail dates">
+          <i class="fa fa-calendar"></i>
+          <span>
+            <span class="info">{{ item.dates }}</span>
+            <br />
+            <span v-if="item.days" class="details">{{ item.days }}</span>
+          </span>
+        </div>
+
+        <div class="item-detail schedule">
+          <i class="fa fa-clock fa-clock-o"></i>
+          <span class="schedule-items">
+            <span v-for="(schedule, index) in item.schedule" :key="index" class="schedule-item">
+              <span class="info">{{ schedule.time }}</span>
+              <br />
+              <span class="details">{{ schedule.days }}</span>
+            </span>
+          </span>
+        </div>
+
+        <div v-if="item.location" class="item-detail">
+          <i class="fa fa-map-marker"></i>
+          <span>
+            <span class="info">{{ item.location }}</span>
+            <br />
+            <span v-if="item.roomName" class="details">{{ item.roomName }}</span>
+          </span>
+        </div>
+
+        <div v-if="item.instructor" class="item-detail instructor">
+          <i class="fa fa-user"></i>
+          <span>
+            <span class="info">{{ item.instructor }}</span>
+            <br />
+            <span v-if="item.substitute" class="details">{{ item.substitute }}</span>
+          </span>
+        </div>
+      </div>
+
+      <div class="d-none d-sm-block hidden-xs">
+        <div class="result-header">
+          <span class="title">
+            {{ item.name }}
+          </span>
+          <span v-if="item.ages || (selectedAges.length && !legacyMode)" class="ages">
+            <span class="age-label">{{ 'Ages' | t }}:</span>
+            <span v-if="!selectedAges.length || legacyMode" class="info">
+              {{ item.ages }}
+            </span>
+            <template v-for="age in selectedAges" v-else>
+              <template
+                v-if="
+                  (!item.min_age || parseInt(item.min_age) <= age) &&
+                    (!item.max_age || parseInt(item.max_age) >= age)
+                "
+              >
+                <AgeIcon :key="age" :age="parseInt(age)" :ages="ages" big />
+              </template>
+            </template>
+          </span>
+        </div>
+
+        <div class="row">
+          <div class="col-sm-4">
+            <div v-if="item.dates" class="item-detail dates">
+              <i class="fa fa-calendar"></i>
+              <span>
+                <span class="info">{{ item.dates }}</span>
+                <br />
+                <span v-if="item.days" class="details">{{ item.days }}</span>
+              </span>
+            </div>
+
+            <div class="item-detail schedule">
+              <i class="fa fa-clock fa-clock-o"></i>
+              <span class="schedule-items">
+                <span v-for="(schedule, index) in item.schedule" :key="index" class="schedule-item">
+                  <span class="info">{{ schedule.time }}</span>
+                  <br />
+                  <span class="details">{{ schedule.days }}</span>
+                </span>
+              </span>
+            </div>
+          </div>
+
+          <div class="col-sm-4">
+            <div v-if="item.location" class="item-detail">
+              <i class="fa fa-map-marker"></i>
+              <span>
+                <span class="info">{{ item.location }}</span>
+                <br />
+                <span v-if="item.roomName" class="details">{{ item.roomName }}</span>
+              </span>
+            </div>
+
+            <div v-if="item.instructor" class="item-detail instructor">
+              <i class="fa fa-user"></i>
+              <span>
+                <span class="info">{{ item.instructor }}</span>
+                <br />
+                <span v-if="item.substitute" class="details">{{ item.substitute }}</span>
+              </span>
+            </div>
+          </div>
+
+          <div class="col-sm-4">
+            <div v-if="item.price" class="item-detail price">
+              <i class="fa fa-money-bill fa-money"></i>
+              <span>
+                <span class="info">{{ item.price }}</span>
+              </span>
+            </div>
+            <AvailableSpots
+              v-if="!disableSpotsAvailable && item.spots_available !== ''"
+              :spots="Number(item.spots_available)"
+              :wait-list="Number(item.wait_list_availability)"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import AvailableSpots from '@/components/AvailableSpots'
+import AgeIcon from '@/components/AgeIcon.vue'
+
+export default {
+  name: 'ResultsList',
+  components: {
+    AvailableSpots,
+    AgeIcon
+  },
+  props: {
+    results: {
+      type: Array,
+      required: true
+    },
+    ages: {
+      type: Array,
+      required: true
+    },
+    selectedAges: {
+      type: Array,
+      required: true
+    },
+    legacyMode: {
+      type: Boolean,
+      required: true
+    },
+    disableSpotsAvailable: {
+      type: Boolean,
+      required: true
+    }
+  },
+  data() {
+    return {}
+  },
+  methods: {
+    showActivityDetailsModal(item) {
+      this.$emit('showActivityDetailsModal', item)
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.results-list-component {
+  .result {
+    padding: 10px;
+    color: $af-black;
+
+    @include media-breakpoint-up('lg') {
+      padding: 20px;
+    }
+
+    &:nth-of-type(odd) {
+      background-color: $af-light-gray;
+    }
+
+    .result-header {
+      display: flex;
+      justify-content: space-between;
+    }
+
+    .title {
+      font-size: 14px;
+      line-height: 21px;
+      color: $af-blue;
+      font-weight: bold;
+      margin-bottom: 10px;
+
+      @include media-breakpoint-up('lg') {
+        font-size: 18px;
+        line-height: 27px;
+        margin-bottom: 20px;
+      }
+    }
+
+    .ages-spots {
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 15px;
+    }
+
+    .age-label {
+      font-size: 10px;
+      line-height: 15px;
+      margin-right: 5px;
+
+      @include media-breakpoint-up('lg') {
+        font-size: 12px;
+        line-height: 18px;
+        margin-right: 10px;
+      }
+    }
+
+    .item-detail {
+      display: flex;
+      margin-bottom: 10px;
+
+      @include media-breakpoint-up('lg') {
+        margin-bottom: 20px;
+      }
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+
+      .schedule-items {
+        display: flex;
+
+        @include media-breakpoint-up('md') {
+          flex-direction: column;
+        }
+
+        .schedule-item {
+          margin-right: 10px;
+
+          @include media-breakpoint-up('md') {
+            margin-right: 0;
+          }
+
+          &:last-child {
+            margin-right: 0;
+          }
+        }
+      }
+
+      .details {
+        font-size: 10px;
+        line-height: 15px;
+      }
+
+      .fa {
+        font-size: 20px;
+        color: $af-dark-gray;
+        margin-right: 10px;
+        width: 20px;
+        text-align: center;
+        flex-shrink: 0;
+      }
+    }
+
+    .info {
+      font-size: 12px;
+      line-height: 18px;
+    }
+  }
+}
+</style>
diff --git a/openy_af4_vue_app/src/components/modals/BookmarkedItems.vue b/openy_af4_vue_app/src/components/modals/BookmarkedItems.vue
index fbd9e01..0efba0d 100644
--- a/openy_af4_vue_app/src/components/modals/BookmarkedItems.vue
+++ b/openy_af4_vue_app/src/components/modals/BookmarkedItems.vue
@@ -160,10 +160,6 @@ export default {
       type: Array,
       required: true
     },
-    selectedAges: {
-      type: Array,
-      required: true
-    },
     disableSpotsAvailable: {
       type: Boolean,
       required: true

From 2cef2a9e65e824dd6ca798fc2b44708151e66c72 Mon Sep 17 00:00:00 2001
From: Andrii Podanenko <podarokua@gmail.com>
Date: Wed, 16 Mar 2022 13:51:06 +0200
Subject: [PATCH 2/2] docs: Cuctom component API

---
 README.md | 36 ++++++++++++++++++++++++++++++++++++
 1 file changed, 36 insertions(+)

diff --git a/README.md b/README.md
index f881dc3..c8ae171 100644
--- a/README.md
+++ b/README.md
@@ -161,3 +161,39 @@ document.addEventListener('openy_activity_finder_event', (e) => {
   ...
 })
 ```
+
+### Add custom component in between of results
+
+ it allows flexibility in terms of results rendering for the developer:
+```
+          <ResultsList
+            :results="data.table"
+            :ages="ages"
+            :selected-ages="selectedAges"
+            :legacy-mode="legacyMode"
+            :disable-spots-available="disableSpotsAvailable"
+            @showActivityDetailsModal="showActivityDetailsModal($event)"
+          />
+```
+can be changed to this:
+```
+          <ResultsList
+            :results="data.table.slice(0, 2)"
+            :ages="ages"
+            :selected-ages="selectedAges"
+            :legacy-mode="legacyMode"
+            :disable-spots-available="disableSpotsAvailable"
+            @showActivityDetailsModal="showActivityDetailsModal($event)"
+          />
+          <YGBWAds />
+          <ResultsList
+            :results="data.table.slice(2)"
+            :ages="ages"
+            :selected-ages="selectedAges"
+            :legacy-mode="legacyMode"
+            :disable-spots-available="disableSpotsAvailable"
+            @showActivityDetailsModal="showActivityDetailsModal($event)"
+          />
+```
+where YGBWAds is custom component to render custom content in between the results.
+See https://github.com/ymcatwincities/openy_activity_finder/pull/148