Use Intersection component to fetch team list on visibility

This commit is contained in:
Andrew Bastin
2021-05-11 23:39:23 -04:00
parent 853acfda2c
commit dd3b51d0b7

View File

@@ -6,20 +6,22 @@
<ul> <ul>
<li> <li>
<span class="select-wrapper"> <span class="select-wrapper">
<select <SmartIntersection @intersecting="onTeamSelectIntersect">
type="text" <select
id="team" type="text"
class="team" id="team"
autofocus class="team"
@change="updateSelectedTeam(myTeams[$event.target.value])" autofocus
> @change="updateSelectedTeam(myTeams[$event.target.value])"
<option :key="undefined" :value="undefined" hidden disabled selected> >
Select team <option :key="undefined" :value="undefined" hidden disabled selected>
</option> Select team
<option v-for="(team, index) in myTeams" :key="index" :value="index"> </option>
{{ team.name }} <option v-for="(team, index) in myTeams" :key="index" :value="index">
</option> {{ team.name }}
</select> </option>
</select>
</SmartIntersection>
</span> </span>
</li> </li>
</ul> </ul>
@@ -46,10 +48,14 @@ export default {
} }
} }
`, `,
pollInterval: 5000, pollInterval: 10000,
}, },
}, },
methods: { methods: {
onTeamSelectIntersect() {
// Load team data as soon as intersection
this.$apollo.queries.myTeams.refetch()
},
updateCollectionsType(tabID) { updateCollectionsType(tabID) {
this.$emit("update-collection-type", tabID) this.$emit("update-collection-type", tabID)
}, },