UtilityPanelContent.vue

<template>
  <div class="utility-panel-content" data-test="utility-panel-content" tabindex="0">
    <Scratchpad v-if="showScratchpad" />
    <LessonNotes
      v-if="showLessonNotes"
      :notations="notationsData"
      :glossary-terms="vocabularyData"
      @handleEmptyStateRedirect="emptyStateRedirect"
    />
    <UniversalGlossary v-if="showUniversalGlossary" :glossary-data="universalNotations" />
  </div>
</template>

<script lang="ts">
import { Vue, Options, prop } from 'vue-class-component'
import 'carbon-web-components/es/components/data-table/table.js'
import 'carbon-web-components/es/components/data-table/table-body.js'
import 'carbon-web-components/es/components/data-table/table-head'
import 'carbon-web-components/es/components/data-table/table-cell.js'
import 'carbon-web-components/es/components/data-table/table-row.js'
import 'carbon-web-components/es/components/data-table/table-header-row'
import LessonNotes from './LessonNotes.vue'
import UniversalGlossary from './UniversalGlossary.vue'
import Scratchpad from './Scratchpad.vue'

class Props {
  selection = prop<any>({})
  notationsData = prop<any>({})
  vocabularyData = prop<any>({})
}

@Options({
  components: { LessonNotes, UniversalGlossary, Scratchpad },
  computed: {
    universalNotations: {
      get () {
        const data = document.getElementById('universal-notes')
        let universalNotes

        if (data) {
          universalNotes = JSON.parse(data.innerHTML)
        }
        return universalNotes
      }
    }
  }
})

export default class UtilityPanelContent extends Vue.with(Props) {
  showLessonNotes:boolean = false
  showUniversalGlossary:boolean = false
  showScratchpad:boolean = false
  fallbackPanelSelection = 'Scratchpad'

  chooseTitle (val: any) {
    this.showScratchpad = val === 'Scratchpad'
    this.showLessonNotes = val === 'Lesson Notes'
    this.showUniversalGlossary = val === 'Glossary'
  }

  emptyStateRedirect (label:string) {
    this.$emit('emptyStateRedirect', label)
  }

  mounted () {
    if (this.notationsData.length === 0 && this.vocabularyData.length === 0) {
      this.$emit('emptyStateRedirect', this.fallbackPanelSelection)
    }
  }
}
</script>

<style lang="scss">
@import 'carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/themes/mixins';
@import '../../../scss/variables/colors.scss';
@import 'carbon-components/scss/globals/scss/typography';

.utility-panel-content {
  background-color: $background-color-white;
  padding: $spacing-06 $spacing-05;

  bx-table-header-cell {
    color: $text-color-black;
    background-color: $background-color-light;
  }

  bx-table-cell,
  bx-table-cell:hover {
    color: $text-color-light;
    background-color: $background-color-white;
    border-top: none;
    border-bottom: 1px solid $border-color;
  }
}
</style>