FileManager.vue

<template>
    <b-container>
        <show-selector
                ref="showSelector"
                title="Files &amp; playlists"
                :callback="showHasSwitched"
        />
        <hr>

        <jumbotron />

        <!-- All the UI for uploading and editing files is only shown if the user
        choose to edit files in the jumbotron above -->
        <div v-if="mode === 'files'">
            <files />
        </div>

        <!-- All the UI for creating and editing playlists is only shown if the user
        choose to edit playlists in the jumbotron above -->
        <div v-if="mode === 'playlists'">
            <playlists />
        </div>
    </b-container>
</template>

<script>
    import {mapGetters} from 'vuex'
    import showSelector from '../components/ShowSelector.vue'
    import jumbotron from '../components/filemanager/Jumbotron.vue'
    import files from '../components/filemanager/Files.vue'
    import playlists from '../components/filemanager/Playlists.vue'

    export default {
        components: {
            'show-selector': showSelector,
            'jumbotron': jumbotron,
            'files': files,
            'playlists': playlists,
        },

        // the data this component will be handling: mostly flags and local versions
        // of the data fetched from the AuRa tank API
        data() {
            return {
                // for formatting the buttons - this way we could customize it later
                button: {
                    files: 'info',
                    playlists: 'outline-info'
                },

            }
        },

        computed: {
            ...mapGetters({
                selectedShow: 'shows/selectedShow',
                mode: 'fileManagerMode'
            })
        },

        // Right after this component is set up, we want to fetch all available shows
        // from the AuRa tank module. This works quite similar to the ShowManager.
        // We also want to load the files and playlists as soon as the shows are
        // loaded.
        created() {
            this.$store.dispatch('shows/fetchShows', {
                callback: () => {
                    this.showHasSwitched()
                    this.$refs.showSelector.updateInputSelector()
                }
            })
        },

        // Now for our hotchpotch of methods, mostly for fetching data from and
        // posting/updating data to the AuRa tank API
        methods: {

            // This switches the UI elements to reflect another show and fetches all
            // relevent data from the tank API.
            showHasSwitched() {
                this.$store.dispatch('files/fetchFiles', {
                    slug: this.selectedShow.slug
                })
                this.$store.dispatch('playlists/fetch', {
                    slug: this.selectedShow.slug
                })
            },

        }
    }
</script>

<style>
    div.filelistbox {
        border: 1px solid #e9ecef;
        border-radius: 0.3rem;
        padding: 1rem 2rem;
    }

    .stateNew {
        color: red;
        font-weight: bold;
    }

    .stateRunning {
        color: darkgreen;
    }

    .stateUndefined {
        color: orange;
        font-weight: bold;
    }

    .upDownArrows {
        font-size: 1.15rem;
    }

    .modalPlaylistRows {
        padding: 0.2rem 0;
    }
</style>