Commit 9296781e authored by jackie / Andrea Ida Malkah Klaura's avatar jackie / Andrea Ida Malkah Klaura
Browse files

refactor file manager show selector and jumbotron

parent 9a8aba3f
<template>
<b-container>
<!-- This first row is so far only used to provide a dropdown for
choosing one of the loaded shows (which the user has access to) -->
<b-row>
<b-col>
<h3>Dateien und Playlists</h3>
</b-col>
<b-col align="right">
<b-dropdown
id="ddshows"
text="Sendereihe auswählen"
variant="info"
>
<b-dropdown-item
v-for="(show, index) in shows"
:key="show.id"
@click="switchShow(index)"
>
{{ show.name }}
</b-dropdown-item>
</b-dropdown>
</b-col>
</b-row>
<show-selector title="Files &amp; playlists" />
<hr>
<!-- The jumbotron is used to display the name and short description of the
currently selected show and let the user choose between editing files and
playlists -->
<b-jumbotron>
<template slot="header">
<span v-if="loaded.shows">
{{ shows[currentShow].name }}
</span>
<span v-else>Shows are being loaded</span>
</template>
<template slot="lead">
<span v-if="loaded.shows">{{ shows[currentShow].short_description }}</span>
</template>
<hr>
<div align="center">
<b-button-group>
<b-button
size="lg"
:variant="button.files"
@click="switchMode('files')"
>
Files
</b-button>
<b-button
size="lg"
:variant="button.playlists"
@click="switchMode('playlists')"
>
Playlists
</b-button>
</b-button-group>
</div>
</b-jumbotron>
<jumbotron />
<!-- All the UI for uploading and editing files is only shown if the user
choose to edit files in the jumbotron above -->
......@@ -628,11 +575,15 @@ import axios from 'axios'
import filesize from 'filesize'
import prettyDate from '../mixins/prettyDate'
import modalFileManagerLog from './FileManagerModalLog.vue'
import showSelector from './ShowSelector.vue'
import jumbotron from './filemanager/Jumbotron.vue'
export default {
// include the modal for displaying file import logs
components: {
'app-modalFileManagerLog': modalFileManagerLog
'app-modalFileManagerLog': modalFileManagerLog,
'show-selector': showSelector,
'jumbotron': jumbotron,
},
// generic functions that we want to use from our mixins folder
......
<template>
<b-row>
<b-col>
<h3>{{ title }}</h3>
</b-col>
<b-col align="right">
<b-dropdown
id="ddshows"
text="Sendereihe auswählen"
variant="info"
>
<b-dropdown-item
v-for="(show, index) in shows"
:key="show.id"
@click="switchShow(index)"
>
{{ show.name }}
</b-dropdown-item>
</b-dropdown>
</b-col>
</b-row>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
props: {
title: { type: String, default: 'Unlabeled component title' },
},
computed: {
loaded () {
return {
shows: this.$store.state.shows.loaded.shows,
}
},
...mapGetters({
shows: 'shows/shows',
selectedShow: 'shows/selectedShow',
})
},
methods: {
switchShow: function (index) {
this.$store.commit('shows/switchShow', index)
},
}
}
</script>
<template>
<b-jumbotron>
<!-- The jumbotron is used to display the name and short description of the
currently selected show and let the user choose between editing files and
playlists -->
<template slot="header">
<span v-if="loaded.shows">
{{ selectedShow.name }}
</span>
<span v-else>Shows are being loaded</span>
</template>
<template slot="lead">
<span v-if="loaded.shows">{{ selectedShow.short_description }}</span>
</template>
<hr>
<div align="center">
<b-button-group>
<b-button
size="lg"
:variant="button.files"
@click="$store.commit('setFileManagerMode', 'files')"
>
Files
</b-button>
<b-button
size="lg"
:variant="button.playlists"
@click="$store.commit('setFileManagerMode', 'playlists')"
>
Playlists
</b-button>
</b-button-group>
</div>
</b-jumbotron>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
computed: {
loaded () {
return {
shows: this.$store.state.shows.loaded.shows,
}
},
button () {
return {
files: this.mode === 'files' ? 'info' : 'outline-info',
playlists: this.mode === 'playlists' ? 'info' : 'outline-info',
}
},
...mapGetters({
selectedShow: 'shows/selectedShow',
mode: 'fileManagerMode'
})
}
}
</script>
......@@ -10,23 +10,19 @@ Vue.use(Vuex)
const debug = process.env.NODE_ENV !== 'production'
const state = {
items: [],
fileManagerMode: 'files',
}
const getters = {
items: state => state.items,
itemCount: state => state.items.length,
fileManagerMode: state => state.fileManagerMode
}
const actions = {
addItem ({commit}, item) {
commit('addItem', item)
}
}
const mutations = {
addItem (state, item) {
state.items.push(item)
setFileManagerMode (state, mode) {
state.fileManagerMode = mode
}
}
......
const state = {
items: [],
}
const getters = {
items: state => state.items,
itemCount: state => state.items.length,
}
const actions = {
addItem ({commit}, item) {
commit('addItem', item)
}
}
const mutations = {
addItem (state, item) {
state.items.push(item)
}
}
export default {
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment