@itools-front/ifrontui/src/components/WNavigatorBar/WNavigatorBar.ts

Vue Material Component Framework

// Styles
import './WNavigatorBar.sass'

// Extensions
import VAppBar from '../VAppBar/VAppBar'

// Components
import VAvatar from '../VAvatar/VAvatar'
import VChip from '../VChip/VChip'
import VSpacer from '../VGrid/VSpacer'
import VList from '../VList/VList'
import VListItem from '../VList/VListItem'
import VIcon from '../VIcon/VIcon'
import VBtn from '../VBtn/VBtn'

// Utilities
import { getSlot } from '../../util/helpers'

// Types
import { VNode } from 'vue'


/* @vue/component */
export default VAppBar.extend({
  name: 'w-navigator-bar',
  props: {
    title: {
      type: String,
    },
    pageName: {
      type: String,
    },
    logo_src: {
      type: String,
      required: true,
    },
    
  },
  data: () => ({
    currentBarWidth: 0,
    widthThreshold: 700,
    listVisible: false,
    list: {} as VNode,
    colors: {
      primary: '#1976d2 !important',
      error: '#ff5252 !important',
      success: '#4caf50 !important',
      warning: '#fb8c00 !important',
    }
  }),
  mounted(){
    this.currentBarWidth = window.innerWidth
    window.addEventListener('resize', () => {
      this.currentBarWidth = window.innerWidth
    });
  },
  methods: {
    genLogo(): VNode {
      const imgProp = {
        src: this.logo_src,
        alt: ''
      }
      const image = this.$createElement('img', { attrs: imgProp })
      const avatar = this.$createElement(VAvatar, {
        style: {
          height: '35px',
          width: '105px',
          marginRight: '16px',
          borderRadius: '0',
        }
      }, [image])

      return avatar
    },
    genTitle(): VNode | null {
      if(!this.title) return null
      const h1 = this.$createElement('h1', {
        staticClass: 'w-navigator-bar__title',
      }, this.title)
      const title = this.$createElement('div', [h1])
      return title
    },
    getColor(key: string){
      if(key == '') return ''
      return this.colors[key as keyof typeof this.colors];
    },
    genPageName(): VNode | null {
      let cName = ''
      if(this.$el && this.$el.classList.length){
        for(let i = 0; i < this.$el.classList.length; i++){
          if(['error', 'success', 'warning'].indexOf(this.$el.classList[i]) !== -1){
            cName = this.$el.classList[i]
          }
        }
      }

      if (!this.pageName || this.currentBarWidth < this.widthThreshold) return null
      const pageName = this.$createElement(VChip, {
        staticClass: 'w-navigator-bar__pageName',
        style: {
          color: this.getColor(cName),
        }
      }, this.pageName)
      return pageName
    },
    genSpacer(): VNode {
      return this.$createElement(VSpacer)
    },
    toggleMenu(x: number, y: number) {
      this.listVisible = !this.listVisible; 
    },
    genBtns(){
      return  getSlot(this, 'actions')
    },
    genList(){
      const slotVm = getSlot(this, 'actions')
      if(!slotVm || !slotVm.length) return null
      const listItems = [] as any
      for(let i = 0; i < slotVm.length; i++){
        const vm = slotVm[i]
        if(!vm.tag) continue
        listItems.push(this.$createElement(VListItem,{
          style: {
            padding: '0px',
          }
        }, [vm]))
      }
      const icon = this.$createElement(VIcon,'mdi-dots-vertical')
      const btn = this.$createElement(VBtn, {
        props: {icon: true, color: "#ffffff", },
        on: {
          click: () => {
            this.listVisible = !this.listVisible
            this.list = this.$createElement(VList, {
              style: {
                marginTop: '120px',
              },
              props: {
                color: '#757575',
              },
            }, listItems)
          }
        } 
      }, [icon]);
      return this.list.hasOwnProperty('componentInstance') && this.listVisible? [btn, this.list] : [btn]

    },

  },
  render(h): VNode {
    const appbarProps = {
      flat: true,
      fixed: true,
    }
    const data = {
      staticClass: 'w-navigator-bar',
      ...appbarProps,
      ref: 'navigatorBar'
    }
    const children = [
      this.genLogo(),
      this.genTitle(),
      this.genPageName(),
      this.genSpacer(),
      getSlot(this),
    ]
    if(this.currentBarWidth > this.widthThreshold){
      this.listVisible = false
      children.push(this.genBtns())
    }else{
      const list = this.genList()
      if(list && Array.isArray(list)){
        children.push(...list)
      } 
    }
    return h(VAppBar, data, children)
  },
})