FileManager.vue

<template>
  <div>
    <UnderConstruction class="tw-top-0 tw-right-0">
      <template #title>
        <p>Die komplette bisherige Medienseite wird aufgelöst.</p>
        <p>
          Stattdessen wird es möglich sein, eine Playlist direkt innerhalb der jeweiligen Sendung zu
          bearbeiten bzw. neu anzulegen.
        </p>
      </template>

      <PageHeader :title="$t('filePlaylistManager.title')" />

      <template v-if="!loaded.shows">
        <div class="tw-text-center">
          {{ $t('loading') }}
        </div>
      </template>

      <template v-else-if="selectedShow">
        <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>
    </UnderConstruction>
  </div>
</template>

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

export default {
  components: {
    UnderConstruction,
    PageHeader,
    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',
    }),
    loaded() {
      return {
        shows: this.$store.state.shows.loaded.shows,
      }
    },
  },
  watch: {
    selectedShow: {
      immediate: true,
      handler(newShow) {
        if (newShow) {
          this.$store.dispatch('files/fetchFiles', { showSlug: newShow.slug })
          this.$store.dispatch('playlists/fetch', { showSlug: newShow.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>