mirror of
https://github.com/romancm/gamebrary
synced 2024-12-04 08:49:17 +00:00
clean up
This commit is contained in:
parent
bc1900c227
commit
73359a9694
7 changed files with 113 additions and 170 deletions
|
@ -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 -->
|
||||||
|
|
|
@ -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>
|
||||||
|
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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) {
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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"
|
||||||
|
|
|
@ -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];
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue