This commit is contained in:
Gamebrary 2022-05-24 10:21:32 -07:00
parent bc1900c227
commit 73359a9694
7 changed files with 113 additions and 170 deletions

View file

@ -1,3 +1,4 @@
<!-- TODO: remove toasts -->
<!-- TODO: add mega search shift + k --> <!-- TODO: add mega search shift + k -->
<!-- TODO: re-translate strings --> <!-- TODO: re-translate strings -->
<!-- TODO: upgrade firebase to latest --> <!-- TODO: upgrade firebase to latest -->

View file

@ -1,7 +1,6 @@
<template lang="html"> <template lang="html">
<div> <div>
<pre>{{ gameLogo }}</pre> <pre>{{ gameLogo }}</pre>
<!-- <pre>{{ speedruns }}</pre> -->
</div> </div>
</template> </template>

View file

@ -1,93 +1,64 @@
<template lang="html"> <template lang="html">
<b-container fluid> <b-container fluid class="create-board-page pt-3">
{{ $t('boards.create') }}
<b-form-group label="Board name:" label-for="boardName"> <b-card class="create-board-form">
<b-form-input <b-form @submit.prevent="createBoard">
id="boardName" <h3>{{ $t('boards.create') }}</h3>
v-model.trim="board.name"
class="mb-2"
placeholder="e.g. PS4 collection, Nintendo Switch, Xbox..."
autofocus
required
/>
</b-form-group>
<b-form-group label="Board name:" label-for="boardName">
<!-- TODO: handle boards without platforms --> <b-form-input
<!-- TODO: Show loading spinner when creating --> id="boardName"
v-model.trim="board.name"
<b-button placeholder="e.g. PS4 collection, Nintendo Switch, Xbox..."
v-if="!showOptionalFields" autofocus
variant="link" required
class="px-0"
size="sm"
@click="showOptionalFields = !showOptionalFields"
>
Show more fields
</b-button>
<b-collapse v-model="showOptionalFields">
<b-form-group
label="Board description"
label-for="boardDescription"
>
<b-form-textarea
id="boardDescription"
v-model="board.description"
maxlength="280"
rows="2"
/>
</b-form-group>
<b-button v-b-modal.platformsModal>Choose platforms</b-button>
<b-modal id="platformsModal" hide-footer>
<template v-slot:modal-header="{ close }">
<modal-header
:title="$t('boards.create')"
@close="close"
/> />
</template> </b-form-group>
<platform-picker v-model="board.platforms" /> <b-form-group
</b-modal> label="Board description"
label-for="boardDescription"
>
<b-form-textarea
id="boardDescription"
v-model="board.description"
maxlength="280"
rows="2"
/>
</b-form-group>
<b-form-group <!-- <b-form-group
label="Board template" label="Board template"
> >
<b-form-radio-group <b-form-radio-group
v-model="selectedTemplate" v-model="selectedTemplate"
:options="boardTemplatesOptions" :options="boardTemplatesOptions"
name="radios-btn-default" name="radios-btn-default"
description="Optional" description="Optional"
/> />
<b-row v-if="selectedTemplate" class="mt-3"> <b-row v-if="selectedTemplate" class="mt-3">
<b-col v-for="column in boardTemplates[selectedTemplate]" :key="column"> <b-col v-for="column in boardTemplates[selectedTemplate]" :key="column">
<b-card <b-card
:header="column" :header="column"
header-tag="header" header-tag="header"
header-class="p-1 pl-2" header-class="p-1 pl-2"
hide-footer hide-footer
/> />
</b-col> </b-col>
</b-row> </b-row>
</b-form-group> </b-form-group> -->
</b-collapse>
<b-button @click="$router.push({ name: 'home' })"> <b-button
Cancel variant="primary"
</b-button> loading
type="submit"
<b-button >
variant="primary" <b-spinner small v-if="saving" />
:disabled="!board.name" <template v-else>Create board</template>
@click="createBoard" </b-button>
> </b-form>
<b-spinner small v-if="saving" /> </b-card>
<template v-else>Create board</template>
</b-button>
</b-container> </b-container>
</template> </template>
@ -98,39 +69,21 @@ export default {
board: { board: {
name: '', name: '',
description: '', description: '',
theme: null,
backgroundUrl: null,
backgroundColor: null,
platforms: [],
lists: [], lists: [],
}, },
stepTitles: {
1: 'Name your board',
2: 'Game search will be limited to the platforms selected.',
3: 'Use a board template or start from scratch',
},
showOptionalFields: false,
platformCategories: {
1: 'console',
2: 'arcade',
3: 'platform',
4: 'operating_system',
5: 'portable_console',
6: 'computer',
},
saving: false, saving: false,
selectedTemplate: null, selectedTemplate: null,
boardTemplatesOptions: [ // boardTemplatesOptions: [
{ value: null, text: 'Blank' }, // { value: null, text: 'Blank' },
{ value: 'standard', text: 'Standard' }, // { value: 'standard', text: 'Standard' },
{ value: 'detailed', text: 'Detailed' }, // { value: 'detailed', text: 'Detailed' },
{ value: 'completionist', text: 'Completionist' }, // { value: 'completionist', text: 'Completionist' },
], // ],
boardTemplates: { // boardTemplates: {
standard: ['Owned', 'Wishlist'], // standard: ['Owned', 'Wishlist'],
detailed: ['Physical', 'Digital', 'Wishlist'], // detailed: ['Physical', 'Digital', 'Wishlist'],
completionist: ['Owned', 'Playing', 'Completed'], // completionist: ['Owned', 'Playing', 'Completed'],
}, // },
}; };
}, },
@ -150,7 +103,6 @@ export default {
const { id } = await this.$store.dispatch('CREATE_BOARD', payload); const { id } = await this.$store.dispatch('CREATE_BOARD', payload);
this.$bvToast.toast('Board crated');
this.$router.push({ name: 'board', params: { id } }); this.$router.push({ name: 'board', params: { id } });
} catch (e) { } catch (e) {
this.$bvToast.toast('There was an error creating board', { variant: 'error' }); this.$bvToast.toast('There was an error creating board', { variant: 'error' });
@ -159,3 +111,15 @@ export default {
}, },
}; };
</script> </script>
<style lang="scss" rel="stylesheet/scss" scoped>
.create-board-page {
background-image: url('~/public/bg-tile.png');
height: calc(100vh - 56px);
}
.create-board-form {
max-width: 420px;
margin: 0 auto;
}
</style>

View file

@ -1,4 +1,6 @@
<template lang="html"> <template lang="html">
<!-- TODO: finish this -->
<!-- TODO: move move arrows to next to list preview -->
<!-- TODO: show list preview in full page view --> <!-- TODO: show list preview in full page view -->
<!-- TODO: show search inline, allow to go full screen (search page) --> <!-- TODO: show search inline, allow to go full screen (search page) -->
<b-container fluid class="p-0"> <b-container fluid class="p-0">
@ -11,8 +13,12 @@
<b-col> <b-col>
<b-card> <b-card>
<header class="p-1 pl-2 d-flex justify-content-between align-items-center"> <header class="p-1 mb-3 pl-2 d-flex justify-content-between align-items-center">
<h1>Edit list</h1> <h1 class="mb-0">Edit list</h1>
<b-button variant="success">
Add games
</b-button>
</header> </header>
<form ref="renameListForm" @submit.stop.prevent="saveChanges"> <form ref="renameListForm" @submit.stop.prevent="saveChanges">
@ -165,23 +171,25 @@
</b-list-group-item> </b-list-group-item>
</b-list-group> </b-list-group>
<b-button <footer class="mt-2 d-flex justify-content-between align-items-center">
variant="primary" <b-button
class="ml-auto" variant="primary"
type="submit" type="submit"
:disabled="saving || isDuplicate" :disabled="saving || isDuplicate"
> >
<b-spinner small v-if="saving" /> <b-spinner small v-if="saving" />
<span v-else>{{ $t('global.save') }}</span> <span v-else>{{ $t('global.save') }}</span>
</b-button> </b-button>
<b-button <b-button
variant="warning" variant="link"
@click="promptDeleteList" class="text-danger"
> @click="promptDeleteList"
<i class="fas fa-trash-alt fa-fw" aria-hidden /> >
{{ $t('board.list.delete') }} <i class="fas fa-trash-alt fa-fw" aria-hidden />
</b-button> {{ $t('board.list.delete') }}
</b-button>
</footer>
</form> </form>
</b-card> </b-card>
</b-col> </b-col>
@ -244,8 +252,8 @@ export default {
existingListNames() { existingListNames() {
const originalListName = this.board?.lists[this.listIndex]?.name; const originalListName = this.board?.lists[this.listIndex]?.name;
return this.board?.lists.map(({ name }) => name.toLowerCase()) return this.board?.lists.map(({ name }) => name?.toLowerCase())
.filter(name => name !== originalListName.toLowerCase()); .filter(name => originalListName?.toLowerCase() !== name);
}, },
isDuplicate() { isDuplicate() {
@ -312,16 +320,13 @@ export default {
}, },
async deleteList() { async deleteList() {
// this.$store.commit('REMOVE_LIST', this.listIndex); const board = { ...this.board };
await this.$store.dispatch('SAVE_BOARD', true) board.lists.splice(this.listIndex, 1);
.catch(() => {
this.$store.commit('SET_SESSION_EXPIRED', true);
});
this.$bvToast.toast('List deleted', { await this.$store.dispatch('SAVE_GAME_BOARD', board);
variant: 'warning',
}); this.$router.push({ name: 'board', params: { id: this.board.id } });
}, },
async moveList(from, to) { async moveList(from, to) {

View file

@ -2,9 +2,7 @@
<!-- TODO: pagination? --> <!-- TODO: pagination? -->
<template lang="html"> <template lang="html">
<b-container fluid> <b-container fluid>
<page-title <page-title title="Notes">
title="Notes"
>
<b-form-input <b-form-input
v-if="!showEmptyState" v-if="!showEmptyState"
type="search" type="search"
@ -12,10 +10,6 @@
placeholder="Search notes" placeholder="Search notes"
v-model="search" v-model="search"
/> />
<!-- <b-button>
Add note
</b-button> -->
</page-title> </page-title>
<empty-state <empty-state

View file

@ -10,23 +10,7 @@
/> />
<template v-else> <template v-else>
<header class="my-3 d-flex align-items-center justify-content-between"> <page-title title="Wallpapers">
<h1>Wallpapers</h1>
<!-- <div class="space-used ml-auto mr-3">
<small
class="d-block text-center"
:class="{ 'text-danger': outOfSpace }"
v-text="usedSpaceText"
/>
<b-progress
:value="spaceUsed"
:max="maxSpace"
:variant="outOfSpace ? 'danger' : 'success'"
/>
</div> -->
<b-button <b-button
:disabled="outOfSpace" :disabled="outOfSpace"
variant="primary" variant="primary"
@ -39,7 +23,7 @@
<span class="d-none d-sm-inline">Upload</span> <span class="d-none d-sm-inline">Upload</span>
</template> </template>
</b-button> </b-button>
</header> </page-title>
<b-alert <b-alert
v-if="isDuplicate && !saving && file && file.name" v-if="isDuplicate && !saving && file && file.name"

View file

@ -144,10 +144,6 @@ export default {
state.game.gog = data; state.game.gog = data;
}, },
REMOVE_LIST(state, index) {
state.board.lists.splice(index, 1);
},
MOVE_LIST(state, { from, to }) { MOVE_LIST(state, { from, to }) {
const cutOut = state.board.lists.splice(from, 1)[0]; const cutOut = state.board.lists.splice(from, 1)[0];