Use Intersection component to fetch team list on visibility
This commit is contained in:
@@ -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)
|
||||||
},
|
},
|
||||||
|
|||||||
Reference in New Issue
Block a user