wiki/client/components/common/page-selector.vue

<template lang="pug">
  v-dialog(v-model='isShown', max-width='850px')
    v-card.page-selector
      .dialog-header.is-dark
        v-icon.mr-3(color='white') mdi-page-next-outline
        span Select Page Location
        v-spacer
        v-progress-circular(
          indeterminate
          color='white'
          :size='20'
          :width='2'
          v-show='searchLoading'
          )
      //- .d-flex(style='min-height:400px;')
      //-   v-flex(xs4).grey(:class='darkMode ? `darken-4` : `lighten-3`')
      //-     v-toolbar(color='grey darken-3', dark, dense, flat)
      //-       .body-2 Folders
      //-       v-spacer
      //-       v-btn(icon): v-icon create_new_folder
      //-     v-treeview(
      //-       v-model='tree'
      //-       :items='treeFolders'
      //-       :load-children='fetchFolders'
      //-       activatable
      //-       open-on-click
      //-       hoverable
      //-       )
      //-       template(slot='prepend', slot-scope='{ item, open, leaf }')
      //-         v-icon {{ open ? 'folder_open' : 'folder' }}
      //-   v-flex(xs8)
      //-     v-toolbar(color='grey darken-2', dark, dense, flat)
      //-       .body-2 Pages
      //-       v-spacer
      //-       v-btn(icon): v-icon forward
      //-       v-btn(icon): v-icon delete
      //-     v-list(dense)
      //-       v-list-item
      //-         v-list-item-avatar: v-icon insert_drive_file
      //-         v-list-item-title File A
      //-       v-divider
      //-       v-list-item
      //-         v-list-item-avatar: v-icon insert_drive_file
      //-         v-list-item-title File B
      //-       v-divider
      //-       v-list-item
      //-         v-list-item-avatar: v-icon insert_drive_file
      //-         v-list-item-title File C
      //-       v-divider
      //-       v-list-item
      //-         v-list-item-avatar: v-icon insert_drive_file
      //-         v-list-item-title File D
      v-card-actions.grey.pa-2(:class='darkMode ? `darken-3-d5` : `lighten-1`')
        v-select(
          solo
          dark
          background-color='grey darken-3-d2'
          hide-details
          single-line
          :items='namespaces'
          style='flex: 0 0 100px;'
          v-model='currentLocale'
          )
        v-text-field(
          solo
          hide-details
          prefix='/'
          v-model='currentPath'
          flat
          clearable
        )
      v-card-chin
        v-spacer
        v-btn(text, @click='close') Cancel
        v-btn.px-4(color='primary', @click='open')
          v-icon(left) mdi-check
          span Select
</template>

<script>
import { get } from 'vuex-pathify'

/* global siteLangs, siteConfig */

export default {
  props: {
    value: {
      type: Boolean,
      default: false
    },
    path: {
      type: String,
      default: 'new-page'
    },
    locale: {
      type: String,
      default: 'en'
    },
    mode: {
      type: String,
      default: 'create'
    },
    openHandler: {
      type: Function,
      default: () => {}
    }
  },
  data() {
    return {
      searchLoading: false,
      currentLocale: siteConfig.lang,
      currentPath: 'new-page',
      tree: [],
      treeChildren: [],
      namespaces: siteLangs.length ? siteLangs.map(ns => ns.code) : [siteConfig.lang]
    }
  },
  computed: {
    darkMode: get('site/dark'),
    isShown: {
      get() { return this.value },
      set(val) { this.$emit('input', val) }
    },
    treeFolders() {
      return [
        {
          id: '/',
          name: '/ (root)',
          children: []
        }
      ]
    }
  },
  watch: {
    isShown(newValue, oldValue) {
      if (newValue && !oldValue) {
        this.currentPath = this.path
        this.currentLocale = this.locale
      }
    }
  },
  methods: {
    close() {
      this.isShown = false
    },
    open() {
      const exit = this.openHandler({
        locale: this.currentLocale,
        path: this.currentPath
      })
      if (exit !== false) {
        this.close()
      }
    },
    async fetchFolders(item) {
      console.info(item)
    }
  }
}
</script>

<style lang='scss'>

.page-selector {
  .v-treeview-node__label {
    font-size: 13px;
  }
}

</style>