Skip to content
This repository has been archived by the owner on Sep 27, 2022. It is now read-only.

feat: Added separate component for results list rendering. #148

Merged
merged 2 commits into from
Mar 16, 2022
Merged

feat: Added separate component for results list rendering. #148

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b3ac153
feat: Added separate component for results list rendering.
duozersk Feb 15, 2022
2cef2a9
docs: Cuctom component API
podarok Mar 16, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 36 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
286 changes: 11 additions & 275 deletions openy_af4_vue_app/src/components/Results.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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"
Expand All @@ -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',
Expand All @@ -255,9 +94,8 @@ export default {
ActivityDetailsModal,
BookmarkedItemsModal,
BookmarkFeatureModal,
AvailableSpots,
AgeIcon,
BookmarkIcon
BookmarkIcon,
ResultsList
},
props: {
data: {
Expand Down Expand Up @@ -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>
Loading