mirror of
https://github.com/romancm/gamebrary
synced 2024-11-13 23:17:08 +00:00
Address more todos
This commit is contained in:
Gamebrary
parent
d4f5c99fb1
commit
a846367059
6 changed files with 37 additions and 106 deletions
|
|
@ -1,3 +1,4 @@
|
|||
<!-- TODO: allow board sorting -->
|
||||
<!-- TODO: Use moment? or use dayjs without wrapper -->
|
||||
<!-- TODO: remove toasts -->
|
||||
<!-- TODO: add mega search shift + k -->
|
||||
|
|
|
|||
|
|
@ -27,7 +27,6 @@
|
|||
</b-button>
|
||||
|
||||
<template v-if="user">
|
||||
<!-- TODO: show active board at top -->
|
||||
<h4 class="my-2">Add to list:</h4>
|
||||
|
||||
<b-list-group flush>
|
||||
|
|
|
|||
|
|
@ -64,7 +64,7 @@ $boardHeight: 200px;
|
|||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
height: $boardHeight;
|
||||
width: 100%;
|
||||
// width: 100%;
|
||||
// width: 363.2px;
|
||||
|
||||
// @media(max-width: 1024px) { width: 320px; }
|
||||
|
|
@ -79,6 +79,6 @@ $boardHeight: 200px;
|
|||
}
|
||||
|
||||
.list {
|
||||
width: 60px;
|
||||
// width: 60px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,5 @@
|
|||
<template lang="html">
|
||||
<b-row v-if="user" class="p-1 boards">
|
||||
<!-- TODO: allow reorganizing and save -->
|
||||
<!-- TODO: add sorting -->
|
||||
<template v-if="showPlaceholder">
|
||||
Loading
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,80 +1,40 @@
|
|||
<!-- TODO: add filters -->
|
||||
<!-- TODO: add view toggle -->
|
||||
<!-- TODO: add empty state with predefined searches -->
|
||||
<!-- TODO: add pagination -->
|
||||
<template lang="html">
|
||||
<b-container>
|
||||
<b-row>
|
||||
<portal to="pageTitle">Search</portal>
|
||||
<!-- TODO: add filters -->
|
||||
<!-- TODO: add view toggle -->
|
||||
<!-- <b-col cols="3" class="position-sticky mt-2">
|
||||
<b-card>
|
||||
Filter
|
||||
<portal to="pageTitle">Search</portal>
|
||||
|
||||
<h3>Sort by</h3>
|
||||
Latest
|
||||
Oldest
|
||||
Relevance
|
||||
<portal to="headerActions">
|
||||
<search-box class="mr-2" />
|
||||
</portal>
|
||||
|
||||
<h3>Filters</h3>
|
||||
Tags
|
||||
Genre
|
||||
Platform
|
||||
Year released
|
||||
</b-card>
|
||||
</b-col> -->
|
||||
<b-skeleton v-if="loading" />
|
||||
|
||||
<!-- <b-col cols="9">
|
||||
|
||||
</b-col> -->
|
||||
<div class="p-2">
|
||||
<b-button
|
||||
v-if="boardId"
|
||||
variant="primary"
|
||||
:to="{ name: 'board', params: { id: boardId } }"
|
||||
>
|
||||
Back to board
|
||||
</b-button>
|
||||
|
||||
<portal to="headerActions">
|
||||
<search-box class="mr-2" />
|
||||
</portal>
|
||||
<!-- <b-alert show variant="success">
|
||||
Custom search controls go here!
|
||||
</b-alert> -->
|
||||
<!-- TODO: add filters -->
|
||||
<!-- TODO: add empty state with predefined searches -->
|
||||
<!-- TODO: add pagination -->
|
||||
<b-skeleton v-if="loading" />
|
||||
|
||||
<div v-else-if="searchResults.length > 0">
|
||||
<header class="my-2 d-flex align-items-center justify-content-between">
|
||||
<!-- <pre>{{ activeBoardList }}</pre> -->
|
||||
<h3 v-if="activeBoardList.length">
|
||||
Add games to <strong>{{ activeBoardList.name }}</strong>
|
||||
</h3>
|
||||
<!-- <h3>Search results</h3> -->
|
||||
|
||||
</header>
|
||||
|
||||
<div class="masonry-container">
|
||||
<game-card-search
|
||||
v-for="game in searchResults"
|
||||
class="masonry-item"
|
||||
:key="game.id"
|
||||
:game="game"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<b-container v-else-if="query.length > 0">
|
||||
<b-alert show variant="info" class="mt-5">
|
||||
<h4 class="alert-heading">No results found</h4>
|
||||
<hr>
|
||||
<p class="mb-0">
|
||||
Please try a different search
|
||||
</p>
|
||||
</b-alert>
|
||||
</b-container>
|
||||
</div>
|
||||
<b-row v-else-if="searchResults.length">
|
||||
<b-col
|
||||
cols="4"
|
||||
v-for="game in searchResults"
|
||||
:key="game.id"
|
||||
>
|
||||
<game-card-search :game="game" />
|
||||
</b-col>
|
||||
</b-row>
|
||||
|
||||
<div
|
||||
v-else-if="query.length > 0"
|
||||
class="text-center mt-5 ml-auto mr-auto"
|
||||
>
|
||||
<p>No results found</p>
|
||||
|
||||
<b-button
|
||||
:to="{ name: 'search' }"
|
||||
variant="light"
|
||||
>
|
||||
Clear search
|
||||
</b-button>
|
||||
</div>
|
||||
</b-container>
|
||||
</template>
|
||||
|
||||
|
|
@ -122,7 +82,7 @@ export default {
|
|||
|
||||
watch: {
|
||||
query(value) {
|
||||
// todo: Avoid search if new/old values are same
|
||||
// TODO: Avoid search if new/old values are same
|
||||
this.search(value);
|
||||
},
|
||||
},
|
||||
|
|
@ -132,19 +92,6 @@ export default {
|
|||
},
|
||||
|
||||
methods: {
|
||||
async addToActiveList({ list, listIndex, boardId }) {
|
||||
const boardIndex = this.boards.findIndex(({ id }) => id === boardId);
|
||||
const board = this.boards[boardIndex];
|
||||
|
||||
board.lists[listIndex].games.push(this.game.id);
|
||||
|
||||
try {
|
||||
await this.$store.dispatch('SAVE_GAME_BOARD', board);
|
||||
} catch (e) {
|
||||
// this.$bvToast.toast(`There was an error adding "${this.game.name}"`, { title: list.name, variant: 'danger' });
|
||||
}
|
||||
},
|
||||
|
||||
async search() {
|
||||
this.loading = true;
|
||||
|
||||
|
|
@ -155,15 +102,3 @@ export default {
|
|||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" rel="stylesheet/scss" scoped>
|
||||
.masonry-container {
|
||||
column-count: 5;
|
||||
column-gap: 1rem;
|
||||
}
|
||||
|
||||
.masonry-item {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -6,13 +6,11 @@ import routes from '@/routes';
|
|||
Vue.use(VueRouter);
|
||||
|
||||
const router = new VueRouter({
|
||||
// TODO: enable history mode
|
||||
// mode: 'history',
|
||||
mode: 'history',
|
||||
routes,
|
||||
});
|
||||
|
||||
// TODO: add navigation guards when trying to access private routes.
|
||||
|
||||
// TODO: restore and update navigation guards
|
||||
// router.beforeEach((to, from, next) => {
|
||||
// if (to.meta.public || store.state.user) next();
|
||||
//
|
||||
|
|
|
|||
Loading…
Reference in a new issue