FileManager.vue

<template>
    <b-container>
        <template v-if="selectedShow">
            <show-selector
                ref="showSelector"
                :title="$t('filePlaylistManager.title')"
                :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>
        </template>

        <div
            v-else-if="loaded.shows && !selectedShow"
            class="tw-text-center"
            v-html="$t('noAssignedShows', { adminUrl })"
        />
    </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 {
                adminUrl: `${import.meta.env.VUE_APP_BASEURI_STEERING}/admin`,

                // 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: () => {
                    if (!this.selectedShow) {
                        return
                    }

                    this.$nextTick(() => {
                        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>