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: re-translate strings -->
<!-- TODO: upgrade firebase to latest -->

View file

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

View file

@ -1,93 +1,64 @@
<template lang="html">
<b-container fluid>
{{ $t('boards.create') }}
<b-container fluid class="create-board-page pt-3">
<b-form-group label="Board name:" label-for="boardName">
<b-form-input
id="boardName"
v-model.trim="board.name"
class="mb-2"
placeholder="e.g. PS4 collection, Nintendo Switch, Xbox..."
autofocus
required
/>
</b-form-group>
<b-card class="create-board-form">
<b-form @submit.prevent="createBoard">
<h3>{{ $t('boards.create') }}</h3>
<!-- TODO: handle boards without platforms -->
<!-- TODO: Show loading spinner when creating -->
<b-button
v-if="!showOptionalFields"
variant="link"
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"
<b-form-group label="Board name:" label-for="boardName">
<b-form-input
id="boardName"
v-model.trim="board.name"
placeholder="e.g. PS4 collection, Nintendo Switch, Xbox..."
autofocus
required
/>
</template>
</b-form-group>
<platform-picker v-model="board.platforms" />
</b-modal>
<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-form-group
label="Board template"
>
<b-form-radio-group
v-model="selectedTemplate"
:options="boardTemplatesOptions"
name="radios-btn-default"
description="Optional"
/>
<!-- <b-form-group
label="Board template"
>
<b-form-radio-group
v-model="selectedTemplate"
:options="boardTemplatesOptions"
name="radios-btn-default"
description="Optional"
/>
<b-row v-if="selectedTemplate" class="mt-3">
<b-col v-for="column in boardTemplates[selectedTemplate]" :key="column">
<b-card
:header="column"
header-tag="header"
header-class="p-1 pl-2"
hide-footer
/>
</b-col>
</b-row>
</b-form-group>
</b-collapse>
<b-row v-if="selectedTemplate" class="mt-3">
<b-col v-for="column in boardTemplates[selectedTemplate]" :key="column">
<b-card
:header="column"
header-tag="header"
header-class="p-1 pl-2"
hide-footer
/>
</b-col>
</b-row>
</b-form-group> -->
<b-button @click="$router.push({ name: 'home' })">
Cancel
</b-button>
<b-button
variant="primary"
:disabled="!board.name"
@click="createBoard"
>
<b-spinner small v-if="saving" />
<template v-else>Create board</template>
</b-button>
<b-button
variant="primary"
loading
type="submit"
>
<b-spinner small v-if="saving" />
<template v-else>Create board</template>
</b-button>
</b-form>
</b-card>
</b-container>
</template>
@ -98,39 +69,21 @@ export default {
board: {
name: '',
description: '',
theme: null,
backgroundUrl: null,
backgroundColor: null,
platforms: [],
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,
selectedTemplate: null,
boardTemplatesOptions: [
{ value: null, text: 'Blank' },
{ value: 'standard', text: 'Standard' },
{ value: 'detailed', text: 'Detailed' },
{ value: 'completionist', text: 'Completionist' },
],
boardTemplates: {
standard: ['Owned', 'Wishlist'],
detailed: ['Physical', 'Digital', 'Wishlist'],
completionist: ['Owned', 'Playing', 'Completed'],
},
// boardTemplatesOptions: [
// { value: null, text: 'Blank' },
// { value: 'standard', text: 'Standard' },
// { value: 'detailed', text: 'Detailed' },
// { value: 'completionist', text: 'Completionist' },
// ],
// boardTemplates: {
// standard: ['Owned', 'Wishlist'],
// detailed: ['Physical', 'Digital', 'Wishlist'],
// completionist: ['Owned', 'Playing', 'Completed'],
// },
};
},
@ -150,7 +103,6 @@ export default {
const { id } = await this.$store.dispatch('CREATE_BOARD', payload);
this.$bvToast.toast('Board crated');
this.$router.push({ name: 'board', params: { id } });
} catch (e) {
this.$bvToast.toast('There was an error creating board', { variant: 'error' });
@ -159,3 +111,15 @@ export default {
},
};
</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">
<!-- TODO: finish this -->
<!-- TODO: move move arrows to next to list preview -->
<!-- TODO: show list preview in full page view -->
<!-- TODO: show search inline, allow to go full screen (search page) -->
<b-container fluid class="p-0">
@ -11,8 +13,12 @@
<b-col>
<b-card>
<header class="p-1 pl-2 d-flex justify-content-between align-items-center">
<h1>Edit list</h1>
<header class="p-1 mb-3 pl-2 d-flex justify-content-between align-items-center">
<h1 class="mb-0">Edit list</h1>
<b-button variant="success">
Add games
</b-button>
</header>
<form ref="renameListForm" @submit.stop.prevent="saveChanges">
@ -165,23 +171,25 @@
</b-list-group-item>
</b-list-group>
<b-button
variant="primary"
class="ml-auto"
type="submit"
:disabled="saving || isDuplicate"
>
<b-spinner small v-if="saving" />
<span v-else>{{ $t('global.save') }}</span>
</b-button>
<footer class="mt-2 d-flex justify-content-between align-items-center">
<b-button
variant="primary"
type="submit"
:disabled="saving || isDuplicate"
>
<b-spinner small v-if="saving" />
<span v-else>{{ $t('global.save') }}</span>
</b-button>
<b-button
variant="warning"
@click="promptDeleteList"
>
<i class="fas fa-trash-alt fa-fw" aria-hidden />
{{ $t('board.list.delete') }}
</b-button>
<b-button
variant="link"
class="text-danger"
@click="promptDeleteList"
>
<i class="fas fa-trash-alt fa-fw" aria-hidden />
{{ $t('board.list.delete') }}
</b-button>
</footer>
</form>
</b-card>
</b-col>
@ -244,8 +252,8 @@ export default {
existingListNames() {
const originalListName = this.board?.lists[this.listIndex]?.name;
return this.board?.lists.map(({ name }) => name.toLowerCase())
.filter(name => name !== originalListName.toLowerCase());
return this.board?.lists.map(({ name }) => name?.toLowerCase())
.filter(name => originalListName?.toLowerCase() !== name);
},
isDuplicate() {
@ -312,16 +320,13 @@ export default {
},
async deleteList() {
// this.$store.commit('REMOVE_LIST', this.listIndex);
const board = { ...this.board };
await this.$store.dispatch('SAVE_BOARD', true)
.catch(() => {
this.$store.commit('SET_SESSION_EXPIRED', true);
});
board.lists.splice(this.listIndex, 1);
this.$bvToast.toast('List deleted', {
variant: 'warning',
});
await this.$store.dispatch('SAVE_GAME_BOARD', board);
this.$router.push({ name: 'board', params: { id: this.board.id } });
},
async moveList(from, to) {

View file

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

View file

@ -10,23 +10,7 @@
/>
<template v-else>
<header class="my-3 d-flex align-items-center justify-content-between">
<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> -->
<page-title title="Wallpapers">
<b-button
:disabled="outOfSpace"
variant="primary"
@ -39,7 +23,7 @@
<span class="d-none d-sm-inline">Upload</span>
</template>
</b-button>
</header>
</page-title>
<b-alert
v-if="isDuplicate && !saving && file && file.name"

View file

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