mirror of
https://github.com/romancm/gamebrary
synced 2024-11-27 13:40:48 +00:00
hook up edit list page save logic
This commit is contained in:
Gamebrary
parent
84c1a00204
commit
c398f127e1
1 changed files with 63 additions and 52 deletions
|
|
@ -2,7 +2,7 @@
|
||||||
<!-- 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>
|
<b-container fluid>
|
||||||
<b-row v-if="list">
|
<b-form-row v-if="list">
|
||||||
<b-col sm="12" md="6">
|
<b-col sm="12" md="6">
|
||||||
<div :style="boardStyles" class="p-3 list-preview d-flex justify-content-center">
|
<div :style="boardStyles" class="p-3 list-preview d-flex justify-content-center">
|
||||||
<game-list :list="list" preview />
|
<game-list :list="list" preview />
|
||||||
|
|
@ -12,12 +12,10 @@
|
||||||
<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 pl-2 d-flex justify-content-between align-items-center">
|
||||||
<h5 class="p-0 m-0">
|
<h1>Edit list</h1>
|
||||||
Edit list
|
|
||||||
</h5>
|
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<form ref="renameListForm" @submit.stop.prevent="saveList">
|
<form ref="renameListForm" @submit.stop.prevent="saveChanges">
|
||||||
<b-form-input
|
<b-form-input
|
||||||
autofocus
|
autofocus
|
||||||
v-model.trim="list.name"
|
v-model.trim="list.name"
|
||||||
|
|
@ -68,6 +66,7 @@
|
||||||
</span>
|
</span>
|
||||||
</b-alert>
|
</b-alert>
|
||||||
|
|
||||||
|
<!-- TODO: add another view that uses avatar for game cover (tiny) -->
|
||||||
<b-form-group
|
<b-form-group
|
||||||
id="list-view"
|
id="list-view"
|
||||||
label="List view:"
|
label="List view:"
|
||||||
|
|
@ -91,6 +90,8 @@
|
||||||
{{ $t('board.list.showReleaseDates') }}
|
{{ $t('board.list.showReleaseDates') }}
|
||||||
</b-form-checkbox>
|
</b-form-checkbox>
|
||||||
|
|
||||||
|
<!-- TODO: add release date styles: countdown/simple date -->
|
||||||
|
|
||||||
<b-form-checkbox
|
<b-form-checkbox
|
||||||
v-model="list.settings.showGameProgress"
|
v-model="list.settings.showGameProgress"
|
||||||
name="check-button"
|
name="check-button"
|
||||||
|
|
@ -135,58 +136,56 @@
|
||||||
{{ $t('board.list.showGameCount') }}
|
{{ $t('board.list.showGameCount') }}
|
||||||
</b-form-checkbox>
|
</b-form-checkbox>
|
||||||
|
|
||||||
<!-- <b-button
|
<b-list-group class="p-2">
|
||||||
|
<!-- TODO: Clone list -->
|
||||||
|
<!-- TODO: Move within board -->
|
||||||
|
<!-- TODO: Move list to different board -->
|
||||||
|
<!-- TODO: edit lists order goes in board settings -->
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<b-button
|
||||||
variant="primary"
|
variant="primary"
|
||||||
class="ml-auto"
|
class="ml-auto"
|
||||||
:disabled="saving || !dirtied || isDuplicate"
|
type="submit"
|
||||||
@click="submit"
|
: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
|
||||||
|
variant="warning"
|
||||||
|
@click="promptDeleteList"
|
||||||
|
>
|
||||||
|
<i class="fas fa-trash-alt fa-fw" aria-hidden />
|
||||||
|
{{ $t('board.list.delete') }}
|
||||||
|
</b-button>
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
<b-list-group class="p-2">
|
|
||||||
<!-- TODO: Clone list -->
|
|
||||||
<!-- TODO: Move within board -->
|
|
||||||
<!-- TODO: Move list to different board -->
|
|
||||||
<!-- TODO: edit lists order goes in board settings -->
|
|
||||||
<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>
|
|
||||||
|
|
||||||
<b-button :disabled="isDuplicate">Save</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-card>
|
</b-card>
|
||||||
</b-col>
|
</b-col>
|
||||||
</b-row>
|
</b-form-row>
|
||||||
</b-container>
|
</b-container>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -275,6 +274,8 @@ export default {
|
||||||
this.loading = true;
|
this.loading = true;
|
||||||
|
|
||||||
await this.$store.dispatch('LOAD_BOARD', this.$route.params.id)
|
await this.$store.dispatch('LOAD_BOARD', this.$route.params.id)
|
||||||
|
|
||||||
|
// TODO: set default values
|
||||||
this.list = JSON.parse(JSON.stringify(this.board.lists[this.$route.params.listIndex]));
|
this.list = JSON.parse(JSON.stringify(this.board.lists[this.$route.params.listIndex]));
|
||||||
|
|
||||||
const hasGames = this.list?.games?.length > 0;
|
const hasGames = this.list?.games?.length > 0;
|
||||||
|
|
@ -334,8 +335,17 @@ export default {
|
||||||
this.$bvToast.toast('List saved');
|
this.$bvToast.toast('List saved');
|
||||||
},
|
},
|
||||||
|
|
||||||
saveList() {
|
async saveChanges() {
|
||||||
console.log('save list');
|
const board = { ...this.board };
|
||||||
|
board.lists[this.listIndex] = this.list;
|
||||||
|
|
||||||
|
this.saving = true;
|
||||||
|
|
||||||
|
await this.$store.dispatch('SAVE_GAME_BOARD', board);
|
||||||
|
|
||||||
|
this.saving = false;
|
||||||
|
|
||||||
|
this.$router.push({ name: 'board', params: { id: board.id }});
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
@ -344,9 +354,10 @@ export default {
|
||||||
<style lang="scss" rel="stylesheet/scss" scoped>
|
<style lang="scss" rel="stylesheet/scss" scoped>
|
||||||
.list-preview {
|
.list-preview {
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
|
height: calc(100vh - 54px);
|
||||||
|
|
||||||
@media(max-width: 780px) {
|
@media(max-width: 780px) {
|
||||||
max-height: 40vh;
|
height: 40vh;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue