xevion/the-office
1
0
Fork 0
mirror of https://github.com/Xevion/the-office.git synced 2025-12-09 20:08:47 -06:00
Code Issues Packages Projects Releases Wiki Activity

Add characters route link to top, add Vuex sorted characters getter

Browse Source
This commit is contained in:
Xevion
2022-05-19 03:28:24 -05:00
parent 56e570a3a7
commit da5221ec0d
2 changed files with 44 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
src/App.vue
View File

@@ -2,14 +2,16 @@
<div id="app">
<b-navbar>
<b-navbar-brand>
<router-link :to="{ name: 'Home' }" class="no-link">The Office Quotes</router-link>
<b-badge style="font-size: 0.80rem;" class="mx-2" v-if="showBreakpointMarker" variant="dark">
<span id="marker-xs" class="d-sm-none">XS</span>
<span id="marker-sm" class="d-none d-sm-block d-md-none">SM</span>
<span id="marker-md" class="d-none d-md-block d-lg-none">MD</span>
<span id="marker-lg" class="d-none d-lg-block d-xl-none">LG</span>
<span id="marker-xl" class="d-none d-xl-block">XL</span>
</b-badge>
<router-link :to="{ name: 'Home' }" class="no-link">
The Office Quotes
</router-link>
<b-badge v-if="showBreakpointMarker" style="font-size: 0.80rem;" class="mx-2" variant="dark">
<span id="marker-xs" class="d-sm-none">XS</span>
<span id="marker-sm" class="d-none d-sm-block d-md-none">SM</span>
<span id="marker-md" class="d-none d-md-block d-lg-none">MD</span>
<span id="marker-lg" class="d-none d-lg-block d-xl-none">LG</span>
<span id="marker-xl" class="d-none d-xl-block">XL</span>
</b-badge>
</b-navbar-brand>
<b-collapse id="nav-collapse" is-nav>
<b-navbar-nav>
@@ -23,29 +25,39 @@
About
</router-link>
</b-nav-item>
<b-nav-item href="#">
<router-link :to="{ name: 'Characters' }" class="no-link">
Characters
</router-link>
</b-nav-item>
</b-navbar-nav>
</b-collapse>
</b-navbar>
<ais-instant-search index-name="prod_THEOFFICEQUOTES" :search-client="searchClient"
:insights-client="insightsClient">
<ais-instant-search
index-name="prod_THEOFFICEQUOTES" :search-client="searchClient"
:insights-client="insightsClient"
>
<b-container :fluid="true" class="py-2 px-lg-5 px-md-4">
<b-row class="my-3 pl-1" cols="12">
<b-col lg="3" xl="2" md="12">
<ais-search-box @keydown.native="showResults" ref="searchbox" placeholder="Search here…"/>
<Skeleton secondary_color="#3e3e3e" border_radius="1px" primary_color="#4A4A4A"
:inner_style="{ 'min-height': '35.6px' }"></Skeleton>
<ais-search-box ref="searchbox" placeholder="Search here…" @keydown.native="showResults" />
<Skeleton
secondary_color="#3e3e3e" border_radius="1px"
primary_color="#4A4A4A"
:inner_style="{ 'min-height': '35.6px' }"
/>
</b-col>
</b-row>
<b-row align-h="start" cols="12">
<b-col lg="3" xl="2" md="12">
<SeasonList></SeasonList>
<SeasonList />
</b-col>
<b-col lg="8" xl="7" md="12" class="pt-md-2 pt-lg-0">
<router-view/>
<router-view />
</b-col>
</b-row>
</b-container>
<ais-configure :clickAnalytics="true"/>
<ais-configure :click-analytics="true" />
</ais-instant-search>
</div>
</template>
@@ -119,16 +131,16 @@ export default {
insightsClient: window.aa,
};
},
computed: {
showBreakpointMarker() {
return process.env.NODE_ENV === 'development';
}
},
methods: {
showResults() {
if (this.$refs.searchbox.currentRefinement !== "" && this.$route.path !== "/search_results")
this.$router.push({name: "SearchResults"});
},
},
computed: {
showBreakpointMarker() {
return process.env.NODE_ENV === 'development';
}
}
};
</script>

11
src/store.js
View File

@@ -167,6 +167,17 @@ export default new Vuex.Store({
},
getCharacter: (state) => (character_id) => {
return state.characters[character_id];
},
getSortedCharacters: (state) => () => {
let keys = Object.keys(state.characters);
console.log(keys)
keys.sort((a, b) => {
const a_count = state.characters[a].appearances;
const b_count = state.characters[b].appearances
if (a_count < b_count) return 1;
else return -1;
})
return keys;
}
}
});