mirror of
https://github.com/romancm/gamebrary
synced 2024-11-27 05:30:22 +00:00
lavoro di mercoledi
This commit is contained in:
Gamebrary
parent
c26dadf26a
commit
bee7121451
7 changed files with 227 additions and 229 deletions
|
|
@ -15,7 +15,6 @@
|
|||
/>
|
||||
|
||||
<amazon-links class="mt-2" />
|
||||
<pre>{{ game.speedruns || 'nain!' }}</pre>
|
||||
|
||||
<div class="game-info">
|
||||
<game-rating :game="game" />
|
||||
|
|
|
|||
|
|
@ -1,5 +1,8 @@
|
|||
<template lang="html">
|
||||
<b-dropdown-item-button v-b-modal="`game-modal-${list.name}`">
|
||||
<b-button
|
||||
variant="success"
|
||||
v-b-modal="`game-modal-${list.name}`"
|
||||
>
|
||||
<i class="fas fa-plus fa-fw" />
|
||||
{{ $t('board.addGame.title') }}
|
||||
|
||||
|
|
@ -20,7 +23,7 @@
|
|||
<recent-games :list="list" />
|
||||
</b-tabs>
|
||||
</b-modal>
|
||||
</b-dropdown-item-button>
|
||||
</b-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
/>
|
||||
|
||||
<template v-else>
|
||||
<header class="p-1 pl-2 d-flex justify-content-between align-items-start">
|
||||
<header class="p-1 pl-2 d-flex justify-content-between align-items-center">
|
||||
<h6 class="p-0 m-0">
|
||||
<span v-b-modal="`rename-list-${listIndex}`">
|
||||
<b-badge>{{ list.games.length }}</b-badge>
|
||||
|
|
@ -39,11 +39,10 @@
|
|||
|
||||
<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" />
|
||||
<i class="fa fa-pencil-alt fa-fw" />
|
||||
</b-button>
|
||||
|
||||
<!-- TODO: consolidate public/private actions -->
|
||||
|
|
|
|||
|
|
@ -1,77 +1,81 @@
|
|||
<template lang="html">
|
||||
<div class="game-list-settings">
|
||||
<add-game-modal :list="list" />
|
||||
<header class="p-1 pl-2 d-flex justify-content-between align-items-center">
|
||||
<h6 class="p-0 m-0">
|
||||
List settings
|
||||
</h6>
|
||||
|
||||
<!-- <sort-list :list="list" :list-index="listIndex" /> -->
|
||||
<b-form-radio-group
|
||||
v-model="sortOrder"
|
||||
variant="primary"
|
||||
:options="sortingOptions"
|
||||
/>
|
||||
<add-game-modal :list="list" />
|
||||
|
||||
<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>
|
||||
<b-button
|
||||
variant="transparent"
|
||||
@click="$emit('close')"
|
||||
>
|
||||
<i class="fas fa-times fa-fw" aria-hidden />
|
||||
|
||||
<span v-else-if="sortOrder">
|
||||
Games will be sorted by
|
||||
</b-button>
|
||||
</header>
|
||||
|
||||
<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" /> -->
|
||||
<b-dropdown-item
|
||||
variant="danger"
|
||||
@click="promptDeleteList"
|
||||
>
|
||||
<i class="fas fa-trash-alt fa-fw" aria-hidden />
|
||||
{{ $t('board.list.delete') }}
|
||||
</b-dropdown-item>
|
||||
<b-list-group class="p-2">
|
||||
<b-list-group-item>
|
||||
<rename-list :list="list" :list-index="listIndex" />
|
||||
</b-list-group-item>
|
||||
|
||||
<b-dropdown-divider />
|
||||
<b-list-group-item>
|
||||
<sort-list :list="list" :list-index="listIndex" />
|
||||
</b-list-group-item>
|
||||
|
||||
<b-dropdown-text>
|
||||
<small class="text-muted d-flex justify-content-center">Move list</small>
|
||||
<b-button-group size="sm" class="w-100">
|
||||
<b-list-group-item>
|
||||
<change-list-view :list="list" :list-index="listIndex" />
|
||||
</b-list-group-item>
|
||||
|
||||
<list-preferences :list="list" :list-index="listIndex" />
|
||||
|
||||
<b-list-group-item>
|
||||
<b-button>Save</b-button>
|
||||
</b-list-group-item>
|
||||
|
||||
<b-list-group-item>
|
||||
<b-button
|
||||
v-b-tooltip.hover
|
||||
:title="$t('board.list.moveLeft')"
|
||||
:disabled="isFirst"
|
||||
@click="moveList(listIndex, listIndex - 1)"
|
||||
variant="warning"
|
||||
@click="promptDeleteList"
|
||||
>
|
||||
<i class="fas fa-angle-left fa-fw" aria-hidden />
|
||||
<i class="fas fa-trash-alt fa-fw" aria-hidden />
|
||||
{{ $t('board.list.delete') }}
|
||||
</b-button>
|
||||
</b-list-group-item>
|
||||
|
||||
<b-button
|
||||
v-b-tooltip.hover
|
||||
:title="$t('board.list.moveRight')"
|
||||
:disabled="isLast"
|
||||
@click="moveList(listIndex, listIndex + 1)"
|
||||
>
|
||||
<i class="fas fa-angle-right fa-fw" aria-hidden />
|
||||
</b-button>
|
||||
</b-button-group>
|
||||
</b-dropdown-text>
|
||||
<b-button>Save</b-button>
|
||||
<b-button @click="$emit('close')">Cancel</b-button>
|
||||
boom boom boom
|
||||
<b-list-group-item>
|
||||
<small class="text-muted d-flex justify-content-center">Move list</small>
|
||||
<b-button-group size="sm" class="w-100">
|
||||
<b-button
|
||||
v-b-tooltip.hover
|
||||
:title="$t('board.list.moveLeft')"
|
||||
:disabled="isFirst"
|
||||
@click="moveList(listIndex, listIndex - 1)"
|
||||
>
|
||||
<i class="fas fa-angle-left fa-fw" aria-hidden />
|
||||
</b-button>
|
||||
|
||||
<b-button
|
||||
v-b-tooltip.hover
|
||||
:title="$t('board.list.moveRight')"
|
||||
:disabled="isLast"
|
||||
@click="moveList(listIndex, listIndex + 1)"
|
||||
>
|
||||
<i class="fas fa-angle-right fa-fw" aria-hidden />
|
||||
</b-button>
|
||||
</b-button-group>
|
||||
</b-list-group-item>
|
||||
</b-list-group>
|
||||
</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 ListPreferences from '@/components/Lists/ListPreferences';
|
||||
import SortList from '@/components/Lists/SortList';
|
||||
import AddGameModal from '@/components/Lists/AddGameModal';
|
||||
import { mapState } from 'vuex';
|
||||
|
||||
|
|
@ -79,9 +83,9 @@ export default {
|
|||
components: {
|
||||
ChangeListView,
|
||||
RenameList,
|
||||
// ListPreferences,
|
||||
ListPreferences,
|
||||
AddGameModal,
|
||||
// SortList,
|
||||
SortList,
|
||||
},
|
||||
|
||||
props: {
|
||||
|
|
@ -109,6 +113,10 @@ export default {
|
|||
},
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.localList = JSON.parse(JSON.stringify(this.list));
|
||||
},
|
||||
|
||||
methods: {
|
||||
promptDeleteList() {
|
||||
this.$bvModal.msgBoxConfirm(this.$t('board.list.deleteWarning.message'), {
|
||||
|
|
|
|||
|
|
@ -1,91 +1,70 @@
|
|||
<!-- DEPRECATED -->
|
||||
<!-- TODO: remove/merge with list settings -->
|
||||
<template lang="html">
|
||||
<b-dropdown-item-button
|
||||
v-b-modal="modalId"
|
||||
>
|
||||
<i class="fas fa-cogs fa-fw" aria-hidden />
|
||||
{{ $t('board.list.settings') }}
|
||||
<form ref="renameListForm" @submit.stop.prevent="save">
|
||||
<b-list-group-item>
|
||||
<b-form-checkbox
|
||||
v-model="showReleaseDates"
|
||||
name="check-button"
|
||||
class="mb-2"
|
||||
switch
|
||||
>
|
||||
{{ $t('board.list.showReleaseDates') }}
|
||||
</b-form-checkbox>
|
||||
</b-list-group-item>
|
||||
|
||||
<b-modal
|
||||
:id="modalId"
|
||||
footer-class="d-flex justify-content-between pt-0"
|
||||
hide-footer
|
||||
size="sm"
|
||||
@show="getSettings"
|
||||
>
|
||||
<template v-slot:modal-header="{ close }">
|
||||
<modal-header
|
||||
:title="$t('board.list.settings')"
|
||||
@close="close"
|
||||
>
|
||||
<b-button
|
||||
variant="primary"
|
||||
:disabled="saving"
|
||||
@click="save"
|
||||
>
|
||||
<b-spinner small v-if="saving" />
|
||||
<span v-else>Save</span>
|
||||
</b-button>
|
||||
</modal-header>
|
||||
</template>
|
||||
<b-list-group-item>
|
||||
<b-form-checkbox
|
||||
v-model="showGameProgress"
|
||||
name="check-button"
|
||||
class="mb-2"
|
||||
switch
|
||||
>
|
||||
{{ $t('board.list.showGameProgress') }}
|
||||
</b-form-checkbox>
|
||||
</b-list-group-item>
|
||||
|
||||
<form ref="renameListForm" @submit.stop.prevent="save">
|
||||
<b-form-checkbox
|
||||
v-model="showReleaseDates"
|
||||
name="check-button"
|
||||
class="mb-2"
|
||||
switch
|
||||
>
|
||||
{{ $t('board.list.showReleaseDates') }}
|
||||
</b-form-checkbox>
|
||||
<b-list-group-item>
|
||||
<b-form-checkbox
|
||||
v-model="highlightCompletedGames"
|
||||
name="check-button"
|
||||
class="mb-2"
|
||||
switch
|
||||
>
|
||||
Highlight completed games
|
||||
</b-form-checkbox>
|
||||
</b-list-group-item>
|
||||
|
||||
<b-form-checkbox
|
||||
v-model="showGameProgress"
|
||||
name="check-button"
|
||||
class="mb-2"
|
||||
switch
|
||||
>
|
||||
{{ $t('board.list.showGameProgress') }}
|
||||
</b-form-checkbox>
|
||||
<b-list-group-item>
|
||||
<b-form-checkbox
|
||||
v-model="showGameNotes"
|
||||
name="check-button"
|
||||
class="mb-2"
|
||||
switch
|
||||
>
|
||||
{{ $t('board.list.showGameNotes') }}
|
||||
</b-form-checkbox>
|
||||
</b-list-group-item>
|
||||
|
||||
<b-form-checkbox
|
||||
v-model="highlightCompletedGames"
|
||||
name="check-button"
|
||||
class="mb-2"
|
||||
switch
|
||||
>
|
||||
Highlight completed games
|
||||
</b-form-checkbox>
|
||||
<b-list-group-item>
|
||||
<b-form-checkbox
|
||||
v-model="showGameTags"
|
||||
name="check-button"
|
||||
class="mb-2"
|
||||
switch
|
||||
>
|
||||
{{ $t('board.list.showGameTags') }}
|
||||
</b-form-checkbox>
|
||||
</b-list-group-item>
|
||||
|
||||
<b-form-checkbox
|
||||
v-model="showGameNotes"
|
||||
name="check-button"
|
||||
class="mb-2"
|
||||
switch
|
||||
>
|
||||
{{ $t('board.list.showGameNotes') }}
|
||||
</b-form-checkbox>
|
||||
|
||||
<b-form-checkbox
|
||||
v-model="showGameTags"
|
||||
name="check-button"
|
||||
class="mb-2"
|
||||
switch
|
||||
>
|
||||
{{ $t('board.list.showGameTags') }}
|
||||
</b-form-checkbox>
|
||||
|
||||
<b-form-checkbox
|
||||
v-model="showGameCount"
|
||||
name="check-button"
|
||||
switch
|
||||
>
|
||||
{{ $t('board.list.showGameCount') }}
|
||||
</b-form-checkbox>
|
||||
</form>
|
||||
</b-modal>
|
||||
</b-dropdown-item-button>
|
||||
<b-list-group-item>
|
||||
<b-form-checkbox
|
||||
v-model="showGameCount"
|
||||
name="check-button"
|
||||
switch
|
||||
>
|
||||
{{ $t('board.list.showGameCount') }}
|
||||
</b-form-checkbox>
|
||||
</b-list-group-item>
|
||||
</form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -103,7 +82,6 @@ export default {
|
|||
showGameNotes: false,
|
||||
showGameTags: false,
|
||||
showGameCount: false,
|
||||
saving: false,
|
||||
};
|
||||
},
|
||||
|
||||
|
|
@ -117,6 +95,10 @@ export default {
|
|||
},
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getSettings();
|
||||
},
|
||||
|
||||
methods: {
|
||||
getSettings() {
|
||||
const {
|
||||
|
|
|
|||
|
|
@ -1,53 +1,32 @@
|
|||
<template lang="html">
|
||||
<b-dropdown-item-button
|
||||
v-b-modal="modalId"
|
||||
>
|
||||
<i class="fas fa-pencil-alt fa-fw" aria-hidden />
|
||||
{{ $t('board.list.renameList') }}
|
||||
<form ref="renameListForm" @submit.stop.prevent="submit">
|
||||
<b-form-input
|
||||
ref="listNameField"
|
||||
autofocus
|
||||
v-model.trim="listName"
|
||||
:placeholder="$t('board.list.renameListPlaceholder')"
|
||||
required
|
||||
/>
|
||||
|
||||
<b-modal
|
||||
:id="modalId"
|
||||
hide-footer
|
||||
size="sm"
|
||||
@show="getListName"
|
||||
<b-alert
|
||||
v-if="isDuplicate && listName.length > 0"
|
||||
class="mt-3 mb-0"
|
||||
show
|
||||
variant="warning"
|
||||
>
|
||||
<template v-slot:modal-header="{ close }">
|
||||
<modal-header
|
||||
:title="$t('board.list.renameList')"
|
||||
@close="close"
|
||||
>
|
||||
<b-button
|
||||
variant="primary"
|
||||
class="ml-auto"
|
||||
:disabled="saving || !dirtied || isDuplicate"
|
||||
@click="submit"
|
||||
>
|
||||
<b-spinner small v-if="saving" />
|
||||
<span v-else>{{ $t('global.save') }}</span>
|
||||
</b-button>
|
||||
</modal-header>
|
||||
</template>
|
||||
{{ $t('board.list.duplicateWarning') }}
|
||||
</b-alert>
|
||||
|
||||
<form ref="renameListForm" @submit.stop.prevent="submit">
|
||||
<b-form-input
|
||||
ref="listNameField"
|
||||
autofocus
|
||||
v-model.trim="listName"
|
||||
:placeholder="$t('board.list.renameListPlaceholder')"
|
||||
required
|
||||
/>
|
||||
|
||||
<b-alert
|
||||
v-if="isDuplicate && listName.length > 0"
|
||||
class="mt-3 mb-0"
|
||||
show
|
||||
variant="warning"
|
||||
>
|
||||
{{ $t('board.list.duplicateWarning') }}
|
||||
</b-alert>
|
||||
</form>
|
||||
</b-modal>
|
||||
</b-dropdown-item-button>
|
||||
<b-button
|
||||
variant="primary"
|
||||
class="ml-auto"
|
||||
:disabled="saving || !dirtied || isDuplicate"
|
||||
@click="submit"
|
||||
>
|
||||
<b-spinner small v-if="saving" />
|
||||
<span v-else>{{ $t('global.save') }}</span>
|
||||
</b-button>
|
||||
</form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -69,10 +48,6 @@ export default {
|
|||
computed: {
|
||||
...mapState(['board']),
|
||||
|
||||
modalId() {
|
||||
return `rename-list-${this.listIndex}`;
|
||||
},
|
||||
|
||||
dirtied() {
|
||||
const { name } = this.list;
|
||||
|
||||
|
|
@ -91,6 +66,10 @@ export default {
|
|||
},
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getListName();
|
||||
},
|
||||
|
||||
methods: {
|
||||
getListName() {
|
||||
const { name } = this.list;
|
||||
|
|
|
|||
|
|
@ -1,35 +1,56 @@
|
|||
<template lang="html">
|
||||
<b-dropdown-item-button v-b-modal="modalId">
|
||||
<i class="fas fa-sort fa-fw" aria-hidden />
|
||||
{{ $t('board.list.sortList') }}
|
||||
|
||||
<b-modal
|
||||
:id="modalId"
|
||||
size="sm"
|
||||
hide-footer
|
||||
@show="getSortValue"
|
||||
<form ref="renameListForm" @submit.stop.prevent="save">
|
||||
<b-form-group
|
||||
id="list-sorting"
|
||||
label="Sort list by:"
|
||||
label-for="sortField"
|
||||
description="We'll never share your email with anyone else."
|
||||
>
|
||||
<template v-slot:modal-header="{ close }">
|
||||
<modal-header
|
||||
:title="$t('board.list.sortList')"
|
||||
:subtitle="list.name"
|
||||
@close="close"
|
||||
>
|
||||
<b-button
|
||||
variant="primary"
|
||||
class="ml-auto"
|
||||
:disabled="saving"
|
||||
@click="save"
|
||||
>
|
||||
<b-spinner small v-if="saving" />
|
||||
<span v-else>{{ $t('global.save') }}</span>
|
||||
</b-button>
|
||||
</modal-header>
|
||||
</template>
|
||||
<b-form-select
|
||||
id="sortField"
|
||||
:options="sortingOptions"
|
||||
v-model="sortOrder"
|
||||
placeholder="Enter email"
|
||||
required
|
||||
/>
|
||||
</b-form-group>
|
||||
|
||||
<!-- <b-form-radio-group
|
||||
v-model="sortOrder"
|
||||
stacked
|
||||
variant="primary"
|
||||
:options="sortingOptions"
|
||||
/> -->
|
||||
|
||||
</b-modal>
|
||||
</b-dropdown-item-button>
|
||||
<!-- TODO: move to computed -->
|
||||
<b-alert
|
||||
class="mb-0 mt-2 small"
|
||||
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>
|
||||
|
||||
<b-button
|
||||
variant="primary"
|
||||
class="ml-auto"
|
||||
:disabled="saving"
|
||||
@click="save"
|
||||
>
|
||||
<b-spinner small v-if="saving" />
|
||||
<span v-else>{{ $t('global.save') }}</span>
|
||||
</b-button>
|
||||
</form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -41,13 +62,20 @@ 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' },
|
||||
],
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
modalId() {
|
||||
return `sort-list-${this.listIndex}`;
|
||||
},
|
||||
mounted() {
|
||||
this.getSortValue();
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
|
|
|||
Loading…
Reference in a new issue