cheetah-framework/js/framework/utils/persistFactory.js

Cheetah Framework JS used in all our applications

import DialogBehaviours from '@cheetah/mixins/DialogBehaviours'
import Vue from 'vue'
import { i18n } from '@cheetah'
import store from '@cheetah/bootstrap/cheetahStore'
let persistIndex = 0

function capitalized (string) {
  string = string.toString()
  return string.charAt(0).toUpperCase() + string.slice(1)
}

function snakeToCamel (s) {
  return s.replace(/([\_|\-]\w)/g, function (m) { return m[1].toUpperCase() })
}

function create (config) {
  if (!config.propName) {
    throw 'Mandatory option propName in persistFactory.js'
  }
  const capitalizeName = capitalized(snakeToCamel(config.propName))
  const i18nPrefix = config.propName.replace(/-/g, '_')

  let instance

  const persistMethodName = config.methodName ? config.methodName : `persist${capitalizeName}`
  const stopMethodName = `stop${persistIndex++}Persist`

  const PersistPlaceholder = Vue.extend({
    ...(config.dialog ? { dialog: config.dialog } : null),

    mixins: [DialogBehaviours],

    data () {
      return {
        modelInstance: null,
        hideTitle: true,
        dialog: false
      }
    },

    computed: {
      persistComponent () {
        return config.component
      },
      dialogTitle () {
        return this.$t(
          config.dialogTitle
            ? config.dialogTitle
            : (this.modelInstance.id ? 'edition' : 'creation')
        )
      }
    },

    methods: {
      close (data) {
        this.$emit('close', data)
      }
    },

    mounted () {
      /**
       * @todo - find a way to bind event to child component
       */
      // const childComponent = _.first(this.$children)
      //
      // if (childComponent && this.events instanceof Object) {
      //   console.log('childComponent', childComponent)
      //   console.log('this.events', childComponent)
      //   _.each(_.keys(this.events), (eventType) => {
      //     console.log('eventType', eventType, this.events[eventType])
      //     childComponent.$on(eventType, this.events[eventType])
      //   })
      // }
    },
    template: `
    <component :class="dialog ? 'persistFactory-dialog' : ''" :is="dialog ? 'el-dialog' : 'div'"
        v-bind="dialogProps"
        :visible="true"
        :title="dialogTitle"
        @close="close">
      <component :is="persistComponent" :${config.propName}="modelInstance" v-bind="customProps" @close="close" :hide-title="hideTitle"></component>
    </component>
    `
  })

  const methods = {}
  methods[persistMethodName] = function (modelInstance, options = {}) {
    if (instance) {
      this[stopMethodName]()
    }

    // build data
    const data = _.defaults(options, {
      hideTitle: options.dialog === true,
      dialog: true,
      onSuccess () {},
      events: _.defaults(options.events, {})
    })
    data.modelInstance = modelInstance
    data.customProps = _.get(options, 'props', {})

    // instantiate component
    instance = new PersistPlaceholder({
      data,
      i18n,
      store
    }).$on('close', this[stopMethodName])

    // create placeholder
    const element = document.createElement('div')
    element.id = `${capitalizeName}PersistPlaceholder-${instance._uid}`

    // mount component
    this.$el.appendChild(element)
    instance.$mount(`#${element.id}`)
  }
  methods[stopMethodName] = function (data) {
    instance.onSuccess(data)
    instance.$destroy(true)

    if (!instance.dialog) {
      this.$el.removeChild(instance.$el)
    }

    instance = null
  }

  return {
    methods
  }
}

export { create }