mirror of
https://github.com/romancm/gamebrary
synced 2024-09-20 05:41:57 +00:00
game list settings wip
This commit is contained in:
Gamebrary
parent
3ab63bef11
commit
1fdfa987bc
5 changed files with 125 additions and 129 deletions
|
|
@ -6,7 +6,7 @@
|
|||
"license": "MIT",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "vue-cli-service serve --port 4000",
|
||||
"dev": "vue-cli-service serve --port 4000 --open",
|
||||
"build": "vue-cli-service build",
|
||||
"test:unit": "vue-cli-service test:unit",
|
||||
"test:e2e": "vue-cli-service test:e2e",
|
||||
|
|
|
|||
|
|
@ -13,90 +13,98 @@
|
|||
:id="listIndex"
|
||||
>
|
||||
<b-card no-body>
|
||||
<div
|
||||
class="p-1 pl-2 d-flex justify-content-between align-items-center"
|
||||
>
|
||||
<p class="list-name p-0 m-0">
|
||||
<span v-b-modal="`rename-list-${listIndex}`">
|
||||
{{ list.name }}
|
||||
</span>
|
||||
<game-list-settings
|
||||
v-if="editing && user && user.uid === board.owner"
|
||||
:list="list"
|
||||
:list-index="listIndex"
|
||||
@close="editing = false"
|
||||
/>
|
||||
|
||||
<br />
|
||||
<template v-else>
|
||||
<header class="p-1 pl-2 d-flex justify-content-between align-items-start">
|
||||
<h6 class="p-0 m-0">
|
||||
<span v-b-modal="`rename-list-${listIndex}`">
|
||||
<b-badge>{{ list.games.length }}</b-badge>
|
||||
{{ list.name }}
|
||||
</span>
|
||||
|
||||
<small v-if="showGameCount" class="text-muted">
|
||||
{{ list.games.length }} {{ $t('global.games') }}
|
||||
</small>
|
||||
<small v-if="showGameCount" class="text-muted">
|
||||
{{ list.games.length }} {{ $t('global.games') }}
|
||||
</small>
|
||||
|
||||
<small v-if="autoSortEnabled" class="text-muted" v-b-modal="`sort-list-${listIndex}`">
|
||||
{{ `${$t('board.list.sortedBy')} ${$t(`board.list.${list.settings.sortOrder}`)}` }}
|
||||
</small>
|
||||
</p>
|
||||
<small v-if="autoSortEnabled" class="text-muted" v-b-modal="`sort-list-${listIndex}`">
|
||||
{{ `${$t('board.list.sortedBy')} ${$t(`board.list.${list.settings.sortOrder}`)}` }}
|
||||
</small>
|
||||
</h6>
|
||||
|
||||
<list-settings
|
||||
v-if="user && user.uid === board.owner"
|
||||
:list="list"
|
||||
:list-index="listIndex"
|
||||
/>
|
||||
<b-button
|
||||
v-if="user && user.uid === board.owner"
|
||||
size="sm"
|
||||
variant="transparent"
|
||||
@click="editing = true"
|
||||
>
|
||||
<i class="fa fa-pencil-alt fa-fw text-secondary" />
|
||||
</b-button>
|
||||
|
||||
<!-- TODO: consolidate public/private actions -->
|
||||
<!-- TODO: consolidate public/private actions -->
|
||||
<b-button
|
||||
v-else
|
||||
disabled
|
||||
size="sm"
|
||||
variant="secondary"
|
||||
class="m-1"
|
||||
>
|
||||
<i class="fas fa-ellipsis-h fa-fw" aria-hidden />
|
||||
</b-button>
|
||||
</header>
|
||||
|
||||
<b-button
|
||||
v-else
|
||||
disabled
|
||||
size="sm"
|
||||
variant="secondary"
|
||||
class="m-1"
|
||||
<draggable
|
||||
class="games"
|
||||
handle=".card"
|
||||
ghost-class="card-placeholder"
|
||||
drag-class="border-success"
|
||||
chosen-class="border-primary"
|
||||
filter=".drag-filter"
|
||||
delay="50"
|
||||
animation="500"
|
||||
:list="list.games"
|
||||
:id="listIndex"
|
||||
:move="validateMove"
|
||||
:disabled="draggingDisabled"
|
||||
:group="{ name: 'games' }"
|
||||
@end="dragEnd"
|
||||
@start="dragStart"
|
||||
>
|
||||
<i class="fas fa-ellipsis-h fa-fw" aria-hidden />
|
||||
</b-button>
|
||||
</div>
|
||||
<component
|
||||
v-for="game in sortedGames"
|
||||
:id="game"
|
||||
:is="gameCardComponent"
|
||||
:key="game"
|
||||
:list="list"
|
||||
:game-id="game"
|
||||
:class="{ 'mb-2': view !== 'covers'}"
|
||||
v-b-toggle.game-sidebar
|
||||
@click.native="openGame(game, list)"
|
||||
/>
|
||||
|
||||
<draggable
|
||||
class="games"
|
||||
handle=".card"
|
||||
ghost-class="card-placeholder"
|
||||
drag-class="border-success"
|
||||
chosen-class="border-primary"
|
||||
filter=".drag-filter"
|
||||
delay="50"
|
||||
animation="500"
|
||||
:list="list.games"
|
||||
:id="listIndex"
|
||||
:move="validateMove"
|
||||
:disabled="draggingDisabled"
|
||||
:group="{ name: 'games' }"
|
||||
@end="dragEnd"
|
||||
@start="dragStart"
|
||||
>
|
||||
<component
|
||||
v-for="game in sortedGames"
|
||||
:id="game"
|
||||
:is="gameCardComponent"
|
||||
:key="game"
|
||||
:list="list"
|
||||
:game-id="game"
|
||||
:class="{ 'mb-2': view !== 'covers'}"
|
||||
v-b-toggle.game-sidebar
|
||||
@click.native="openGame(game, list)"
|
||||
/>
|
||||
|
||||
<b-button
|
||||
block
|
||||
v-if="isEmpty"
|
||||
class="mb-2"
|
||||
variant="light"
|
||||
v-b-modal="`game-modal-${list.name}`"
|
||||
>
|
||||
{{ $t('board.list.emptyListButton') }}
|
||||
</b-button>
|
||||
</draggable>
|
||||
<b-button
|
||||
block
|
||||
v-if="isEmpty"
|
||||
class="mb-2"
|
||||
variant="light"
|
||||
v-b-modal="`game-modal-${list.name}`"
|
||||
>
|
||||
{{ $t('board.list.emptyListButton') }}
|
||||
</b-button>
|
||||
</draggable>
|
||||
</template>
|
||||
</b-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import draggable from 'vuedraggable';
|
||||
import ListSettings from '@/components/Lists/ListSettings';
|
||||
import GameListSettings from '@/components/Lists/GameListSettings';
|
||||
import GameCardDefault from '@/components/GameCards/GameCardDefault';
|
||||
import GameCardCovers from '@/components/GameCards/GameCardCovers';
|
||||
import GameCardGrid from '@/components/GameCards/GameCardGrid';
|
||||
|
|
@ -113,7 +121,7 @@ export default {
|
|||
GameCardGrid,
|
||||
GameCardCompact,
|
||||
GameCardText,
|
||||
ListSettings,
|
||||
GameListSettings,
|
||||
draggable,
|
||||
},
|
||||
|
||||
|
|
@ -131,6 +139,7 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
draggingId: null,
|
||||
editing: false,
|
||||
gameCardComponents: {
|
||||
single: 'GameCardDefault',
|
||||
covers: 'GameCardCovers',
|
||||
|
|
@ -182,15 +191,11 @@ export default {
|
|||
},
|
||||
|
||||
view() {
|
||||
const { settings } = this.list;
|
||||
|
||||
return settings && settings.view;
|
||||
return this.list?.settings?.view;
|
||||
},
|
||||
|
||||
showGameCount() {
|
||||
const { settings } = this.list;
|
||||
|
||||
return settings && settings.showGameCount;
|
||||
return this.list?.settings?.showGameCount;
|
||||
},
|
||||
|
||||
gameCardComponent() {
|
||||
|
|
@ -268,6 +273,8 @@ export default {
|
|||
flex-shrink: 0;
|
||||
cursor: default;
|
||||
position: relative;
|
||||
height: auto;
|
||||
min-height: 200px;
|
||||
width: calc(300px + 1rem);
|
||||
|
||||
@media(max-width: 400px) {
|
||||
|
|
@ -330,8 +337,4 @@ export default {
|
|||
opacity: .1;
|
||||
background: #000;
|
||||
}
|
||||
|
||||
.list-name {
|
||||
line-height: 0.9rem;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,16 +1,31 @@
|
|||
<template lang="html">
|
||||
<b-dropdown
|
||||
right
|
||||
variant="transparent"
|
||||
toggle-class="m-0"
|
||||
>
|
||||
<template v-slot:button-content>
|
||||
<i class="fas fa-ellipsis-h fa-fw" aria-hidden />
|
||||
</template>
|
||||
|
||||
<div class="game-list-settings">
|
||||
<add-game-modal :list="list" />
|
||||
|
||||
<sort-list :list="list" :list-index="listIndex" />
|
||||
<!-- <sort-list :list="list" :list-index="listIndex" /> -->
|
||||
<b-form-radio-group
|
||||
v-model="sortOrder"
|
||||
variant="primary"
|
||||
:options="sortingOptions"
|
||||
/>
|
||||
|
||||
<b-alert
|
||||
class="mb-0 mt-2"
|
||||
show
|
||||
:variant="sortOrder !== 'sortByCustom' ? 'warning' : 'info'"
|
||||
>
|
||||
<span v-if="sortOrder === 'sortByCustom'">
|
||||
Games will be added to end of list, drag games to re-order.
|
||||
</span>
|
||||
|
||||
<span v-else-if="sortOrder">
|
||||
Games will be sorted by
|
||||
|
||||
<span class="text-lowercase">
|
||||
{{ $t(`board.list.${sortOrder}`)}}
|
||||
</span>
|
||||
</span>
|
||||
</b-alert>
|
||||
<rename-list :list="list" :list-index="listIndex" />
|
||||
<change-list-view :list="list" :list-index="listIndex" />
|
||||
<!-- <list-preferences :list="list" :list-index="listIndex" /> -->
|
||||
|
|
@ -21,7 +36,9 @@
|
|||
<i class="fas fa-trash-alt fa-fw" aria-hidden />
|
||||
{{ $t('board.list.delete') }}
|
||||
</b-dropdown-item>
|
||||
|
||||
<b-dropdown-divider />
|
||||
|
||||
<b-dropdown-text>
|
||||
<small class="text-muted d-flex justify-content-center">Move list</small>
|
||||
<b-button-group size="sm" class="w-100">
|
||||
|
|
@ -44,14 +61,17 @@
|
|||
</b-button>
|
||||
</b-button-group>
|
||||
</b-dropdown-text>
|
||||
</b-dropdown>
|
||||
<b-button>Save</b-button>
|
||||
<b-button @click="$emit('close')">Cancel</b-button>
|
||||
boom boom boom
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ChangeListView from '@/components/Lists/ChangeListView';
|
||||
import RenameList from '@/components/Lists/RenameList';
|
||||
// import ListPreferences from '@/components/Lists/ListPreferences';
|
||||
import SortList from '@/components/Lists/SortList';
|
||||
// import SortList from '@/components/Lists/SortList';
|
||||
import AddGameModal from '@/components/Lists/AddGameModal';
|
||||
import { mapState } from 'vuex';
|
||||
|
||||
|
|
@ -61,7 +81,7 @@ export default {
|
|||
RenameList,
|
||||
// ListPreferences,
|
||||
AddGameModal,
|
||||
SortList,
|
||||
// SortList,
|
||||
},
|
||||
|
||||
props: {
|
||||
|
|
@ -138,3 +158,9 @@ export default {
|
|||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" rel="stylesheet/scss" scoped>
|
||||
.game-list-settings {
|
||||
min-height: 50vh;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -27,31 +27,7 @@
|
|||
</modal-header>
|
||||
</template>
|
||||
|
||||
<form ref="renameListForm" @submit.stop.prevent="save">
|
||||
<b-form-radio-group
|
||||
v-model="sortOrder"
|
||||
variant="primary"
|
||||
:options="sortingOptions"
|
||||
/>
|
||||
|
||||
<b-alert
|
||||
class="mb-0 mt-2"
|
||||
show
|
||||
:variant="sortOrder !== 'sortByCustom' ? 'warning' : 'info'"
|
||||
>
|
||||
<span v-if="sortOrder === 'sortByCustom'">
|
||||
Games will be added to end of list, drag games to re-order.
|
||||
</span>
|
||||
|
||||
<span v-else-if="sortOrder">
|
||||
Games will be sorted by
|
||||
|
||||
<span class="text-lowercase">
|
||||
{{ $t(`board.list.${sortOrder}`)}}
|
||||
</span>
|
||||
</span>
|
||||
</b-alert>
|
||||
</form>
|
||||
</b-modal>
|
||||
</b-dropdown-item-button>
|
||||
</template>
|
||||
|
|
@ -65,15 +41,6 @@ export default {
|
|||
|
||||
data() {
|
||||
return {
|
||||
sortOrder: null,
|
||||
saving: false,
|
||||
sortingOptions: [
|
||||
{ text: this.$t('board.list.sortByCustom'), value: 'sortByCustom' },
|
||||
{ text: this.$t('board.list.sortByName'), value: 'sortByName' },
|
||||
{ text: this.$t('board.list.sortByRating'), value: 'sortByRating' },
|
||||
{ text: this.$t('board.list.sortByProgress'), value: 'sortByProgress' },
|
||||
// { text: 'Release date', value: 'sortByReleaseDate' },
|
||||
],
|
||||
};
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
class="mr-2"
|
||||
:to="{ name: 'edit-board', params: { id: board.id } }"
|
||||
>
|
||||
Edit
|
||||
Edit board
|
||||
</b-button>
|
||||
|
||||
<!-- <b-button
|
||||
|
|
|
|||
Loading…
Reference in a new issue