SourceEditor.vue 3.34 KB
Newer Older
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45
<template lang="pug">

  div.relative-position.full-height

    q-carousel.source-editor-carousel.full-height(v-model="slide", arrows, color="dark")

      //---------- slide 1
      q-carousel-slide.q-pa-none
        slide-header
          | Select source

        .slide-body(:class="[isMobile ? 'mobile' : 'desktop']")
          // TODO: if documents, check userHasFeature
          template(v-for="(button, index) in buttons")
            q-item-separator.q-ma-none.bg-grey-3(v-if="index > 0")

            .q-py-lg.q-pl-lg(
            @click="selectSource(button.value)",
            :class="{'text-dark text-weight-bold': selectedSource === button.value}")
              | {{ button.label }}

      //---------- slide 2
      q-carousel-slide.q-pa-none
        slide-header
          template(v-if="selectedSource === 'piecemaker'") Select timeline
          template(v-else) Select {{ selectedSource.slice(0, -1) }}

        .slide-body(:class="[isMobile ? 'mobile' : 'desktop']")
          template(v-if="selectedSource === 'cells'")
            source-cells
          template(v-if="selectedSource === 'piecemaker'")
            source-piecemaker(@nextSlide="onNextSlide()")
          template(v-if="selectedSource === 'documents'")
            source-documents

      //---------- slide 3
      q-carousel-slide.q-pa-none(v-if="selectedSource === 'piecemaker'")
        slide-header(v-if="storeCurrentTimeline")
          | {{ storeCurrentTimeline.title }}

        .slide-body(:class="[isMobile ? 'mobile' : 'desktop']")
          source-piecemaker-details

    .absolute-top-left.fit.bg-white.q-pa-md(v-if="cachedNewCell")
      | Place new
46
      span.lowercase &nbsp;{{ cachedNewCell.configuration.value.component.substr(4, cachedNewCell.configuration.value.component.length - 4) }}
47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113
</template>

<script>
  import SlideHeader from './SlideHeader'
  import SourceCells from './sources/SourceCells'
  import SourceDocuments from './sources/SourceDocuments'
  import SourcePiecemaker from './sources/SourcePiecemaker'
  import SourcePiecemakerDetails from './sources/SourcePiecemakerDetails'

  import { mapGetters } from 'vuex'
  import { userHasFeature } from 'mbjs-quasar/src/lib'

  export default {
    components: {
      SlideHeader,
      SourceCells,
      SourceDocuments,
      SourcePiecemaker,
      SourcePiecemakerDetails
    },
    data () {
      return {
        buttons: [{
          label: 'Cells', value: 'cells'
        }, {
          label: 'Piecemaker', value: 'piecemaker'
        }, {
          label: 'Documents', value: 'documents'
        }],
        slide: 0,
        selectedSource: 'cells',
        isMobile: this.$q.platform.is.mobile
      }
    },
    computed: {
      ...mapGetters({
        user: 'auth/getUserState',
        storeCurrentTimeline: 'mosys/getCurrentTimeline',
        cachedNewCell: 'mosys/getNewCell'
      }),
      userHasDocuments () {
        return userHasFeature(this.user, 'documents')
      }
    },
    beforeDestroy () {
      this.$store.commit('mosys/hideSources')
    },
    methods: {
      onNextSlide () {
        this.slide += 1
      },
      selectSource (target) {
        this.selectedSource = target
        this.slide = 1
      }
    }
  }
</script>

<style scoped lang="stylus">
  .slide-body
    overflow-y scroll
    &.mobile
      height calc(80vh - 52px)
    &.desktop
      height calc(calc(100vh - 59px) - 52px)
</style>