gamebrary/src/pages/Releases.vue

109 lines
2.6 KiB
Vue
Raw Normal View History

2020-08-15 00:02:34 +00:00
<template lang="html">
2020-09-26 00:09:20 +00:00
<b-container-fluid>
<b-jumbotron
2020-09-26 00:24:18 +00:00
header="Releases"
2020-09-26 00:09:20 +00:00
header-level="5"
fluid
lead="Select a theme below"
/>
2020-09-01 22:38:59 +00:00
2020-09-26 00:09:20 +00:00
<b-container>
2020-09-26 00:24:18 +00:00
<b-row>
<b-col>
2020-09-26 00:41:18 +00:00
<b-list-group>
<b-list-group-item
class="d-flex justify-content-between align-items-center"
v-for="release in releases"
:key="release.id"
:active="release.id === selectedRelease.id"
@click="selectedRelease = release"
>
<h6 class="m-0">
2020-09-26 00:24:18 +00:00
<b-badge>{{ release.tag_name }}</b-badge>
{{ release.name }}
</h6>
2020-09-26 00:41:18 +00:00
</b-list-group-item>
</b-list-group>
2020-09-26 00:24:18 +00:00
</b-col>
<b-col cols="8">
<!-- TODO: add releases selector, only display latest by default -->
<b-card
2020-09-26 00:41:18 +00:00
v-if="selectedRelease"
2020-09-26 00:24:18 +00:00
hide-footer
class="mb-3"
>
<template v-slot:header>
<h6 class="mb-0">
2020-09-26 00:41:18 +00:00
<b-badge>{{ selectedRelease.tag_name }}</b-badge>
{{ selectedRelease.name }}
2020-09-26 00:24:18 +00:00
</h6>
</template>
<small class="text-muted">
2020-09-26 00:41:18 +00:00
{{ $t('releases.published', { date: formatDate(selectedRelease.published_at) }) }}
2020-09-26 00:24:18 +00:00
</small>
<b-card-text>
2020-09-26 00:41:18 +00:00
<vue-markdown :source="selectedRelease.body" class="w-100 releases" />
2020-09-26 00:24:18 +00:00
</b-card-text>
</b-card>
</b-col>
</b-row>
2020-09-26 00:09:20 +00:00
</b-container>
</b-container-fluid>
2020-08-15 00:02:34 +00:00
</template>
<script>
2020-09-01 22:38:59 +00:00
import { mapState } from 'vuex';
2020-08-15 00:02:34 +00:00
import VueMarkdown from 'vue-markdown';
import moment from 'moment';
export default {
components: {
VueMarkdown,
},
2020-09-26 00:24:18 +00:00
data() {
return {
selectedRelease: null,
};
},
2020-09-01 22:38:59 +00:00
computed: {
...mapState(['releases', 'notification', 'settings']),
},
mounted() {
2020-09-26 00:41:18 +00:00
const [latestRelease] = this.releases;
this.selectedRelease = latestRelease;
if (this.notification) {
const [latestRelease] = this.releases;
if (latestRelease && latestRelease.tag_name) {
this.$store.commit('UPDATE_SETTING', { key: 'release', value: latestRelease.tag_name });
this.$store.dispatch('SAVE_SETTINGS', this.settings)
.then(() => {
this.$store.commit('SET_NOTIFICATION', false);
})
.catch(() => {
this.$bvToast.toast(
'There was an error saving your settings',
{ title: 'Error', variant: 'danger' });
});
}
}
2020-08-15 00:02:34 +00:00
},
methods: {
formatDate(date) {
return moment(date).format('LL');
},
},
};
</script>