@kalisio/kdk 2.0.0 → 2.1.0

package/core/client/mixins/mixin.base-activity.js

@@ -0,0 +1,232 @@
+import _ from 'lodash'
+import logger from 'loglevel'
+import { Layout } from '../layout.js'
+
+export function baseActivity (name) {
+  return {
+    methods: {
+      getAppName () {
+        return this.$config('appName')
+      },
+      getTopPane () {
+        return Layout.getPane('top')
+      },
+      getTopPaneMode () {
+        return Layout.getPane('top').mode
+      },
+      isTopPaneVisible () {
+        return Layout.getPane('top').visible
+      },
+      setTopPane (content, mode, filter) {
+        Layout.setPane('top', { content, mode, filter }, this)
+      },
+      setTopPaneMode (mode) {
+        Layout.setPaneMode('top', mode)
+      },
+      setTopPaneVisible (visible) {
+        Layout.setPaneVisible('top', visible)
+      },
+      configureTopPane () {
+        Layout.setPane('top', _.get(this.activityOptions, 'topPane'), this)
+      },
+      clearTopPane () {
+        Layout.setPane('top', null)
+      },
+      getLeftPane () {
+        return Layout.getPane('left')
+      },
+      getLeftPaneMode () {
+        return Layout.getPane('left').mode
+      },
+      isLeftPaneVisible () {
+        return Layout.getPane('left').visible
+      },
+      setLeftPane (content, mode, filter) {
+        Layout.setPane('left', { content, mode, filter }, this)
+      },
+      setLeftPaneMode (mode) {
+        Layout.setPaneMode('left', mode)
+      },
+      setLeftPaneVisible (visible) {
+        Layout.setPaneVisible('left', visible)
+      },
+      configureLeftPane () {
+        Layout.setPane('left', _.get(this.activityOptions, 'leftPane'), this)
+      },
+      clearLeftPane () {
+        Layout.setPane('left', null)
+      },
+      getBottomPane () {
+        return Layout.getPane('bottom')
+      },
+      getBottomPaneMode () {
+        return Layout.getPane('bottom').mode
+      },
+      isBottomPaneVisible () {
+        return Layout.getPane('bottom').visible
+      },
+      setBottomPane (content, mode, filter) {
+        Layout.setPane('bottom', { content, mode, filter }, this)
+      },
+      setBottomPaneMode (mode) {
+        Layout.setPaneMode('bottom', mode)
+      },
+      setBottomPaneVisible (visible) {
+        Layout.setPaneMode('bottom', visible)
+      },
+      configureBottomPane () {
+        Layout.setPane('bottom', _.get(this.activityOptions, 'bottomPane'), this)
+      },
+      clearBottomPane () {
+        Layout.setPane('bottom', null)
+      },
+      getRightPane () {
+        return Layout.getPane('right')
+      },
+      getRightPaneMode () {
+        return this.getRightPane().mode
+      },
+      isRightPaneVisible () {
+        return this.getRightPane().visible
+      },
+      setRightPane (content, mode, filter) {
+        Layout.setPane('right', { content, mode, filter }, this)
+      },
+      setRightPaneMode (mode) {
+        Layout.setPaneMode('right', mode)
+      },
+      setRightPaneVisible (visible) {
+        Layout.setPaneMode('right', visible)
+      },
+      configureRightPane () {
+        Layout.setPane('right', _.get(this.activityOptions, 'rightPane'), this)
+      },
+      clearRightPane () {
+        Layout.setPane('right', null)
+      },
+      getPage () {
+        return Layout.getPage()
+      },
+      setPage (content, mode, filter, sticky) {
+        Layout.setPage({ content, mode, filter, sticky }, this)
+      },
+      setPageMode (mode) {
+        Layout.setPageMode(mode)
+      },
+      configurePage () {
+        Layout.setPage(_.get(this.activityOptions, 'page'), this)
+      },
+      clearPage () {
+        Layout.setPage(null)
+      },
+      getFab () {
+        return Layout.getFab()
+      },
+      setFab (content, mode, filter) {
+        Layout.setFab({ content, mode, filter }, this)
+      },
+      configureFab () {
+        Layout.setFab(_.get(this.activityOptions, 'fab'), this)
+      },
+      clearFab () {
+        Layout.setFab(null)
+      },
+      configureWindows () {
+        const windows = _.get(this.activityOptions, 'windows', null)
+        _.forOwn(windows, (window, placement) => {
+          Layout.setWindow(placement, window, this)
+        })
+      },
+      clearWindows () {
+        const windows = _.get(this.activityOptions, 'windows', null)
+        _.forOwn(windows, (window, placement) => {
+          Layout.setWindow(placement, null)
+        })
+      },
+      openWindow (placement) {
+        Layout.setWindowVisible(placement, true)
+      },
+      closeWindow (placement) {
+        Layout.setWindowVisible(placement, false)
+      },
+      findWindow (widget) {
+        return Layout.findWindow(widget)
+      },
+      isWidgetWindowVisible (widget) {
+        const { window } = this.findWindow(widget)
+        return (window && window.visible)
+      },
+      openWidget (widget) {
+        const { placement, window } = this.findWindow(widget)
+        if (!placement) {
+          logger.warn(`[KDK] Cannot find widget ${widget}`)
+          return
+        }
+        if (window.current !== widget) Layout.setWindowCurrent(placement, widget)
+        Layout.setWindowVisible(placement, true)
+      },
+      closeWidget (widget) {
+        const result = this.findWindow(widget)
+        if (!result.placement) {
+          logger.warn(`Cannot find widget ${widget}`)
+          return
+        }
+        Layout.setWindowVisible(result.placement, false)
+      },
+      clearActivity () {
+        this.clearTopPane()
+        this.clearBottomPane()
+        this.clearLeftPane()
+        this.clearRightPane()
+        this.clearPage()
+        this.clearFab()
+        this.clearWindows()
+      },
+      configureActivity () {
+        this.configureTopPane()
+        this.configureLeftPane()
+        this.configureBottomPane()
+        this.configureRightPane()
+        this.configurePage()
+        this.configureFab()
+        this.configureWindows()
+      },
+      goBack () {
+        this.$router.back()
+      },
+      refresh () {
+        window.location.reload()
+      },
+      launchTour (name) {
+        // If no name we extract tour name from route name
+        if (!name) {
+          const routeName = this.$route.name
+          let tourName = routeName
+          // Manage routes with different pages
+          if (_.has(this.$route, 'params.page')) {
+            tourName += '/' + _.get(this.$route, 'params.page')
+          }
+          name = tourName
+        }
+        this.$store.patch('tours.current', { name })
+      }
+    },
+    beforeCreate () {
+      // Identify this activity using its name or the route name
+      this.activityName = name || _.camelCase(this.$options.name)
+      // Setup the options
+      this.activityOptions = this.$config(this.activityName)
+    },
+    mounted () {
+      // Configure the activity
+      this.configureActivity()
+      // Whenever the user abilities are updated, update activity as well
+      this.$events.on('user-abilities-changed', this.configureActivity)
+    },
+    beforeUnmount () {
+      this.$events.off('user-abilities-changed', this.configureActivity)
+      // Clear the activity
+      this.clearActivity()
+    }
+  }
+}

package/core/client/mixins/mixin.base-collection.js

@@ -0,0 +1,162 @@
+import _ from 'lodash'
+import logger from 'loglevel'
+import { getLocale } from '../utils/utils.locale.js'
+
+export const baseCollection = {
+  emits: [
+    'collection-refreshed',
+    'selection-changed',
+    'item-toggled'
+  ],
+  props: {
+    // This value can be overriden in activities if they want to manage pagination by themselves
+    // nbItemsPerPage = 0 means that the client does not handle pagination and server defaults will be used
+    nbItemsPerPage: {
+      type: Number,
+      default: 12
+    },
+    // This value indicate if items of each page replace or are appended to previous ones
+    appendItems: {
+      type: Boolean,
+      default: false
+    },
+    // Only invoke refresh at most once per every refreshThrottle milliseconds
+    refreshThrottle: {
+      type: Number,
+      default: 500
+    }
+  },
+  computed: {
+    nbPages () {
+      return (this.nbItemsPerPage > 0 ? Math.ceil(this.nbTotalItems / this.nbItemsPerPage) : 1)
+    }
+  },
+  data () {
+    return {
+      items: [],
+      nbTotalItems: 0,
+      currentPage: 1
+    }
+  },
+  methods: {
+    subscribe (query) {
+      // Remove previous listener if any
+      this.unsubscribe()
+      this.itemListener = this.getService().watch({ listStrategy: this.listStrategy || 'smart' })
+        .find({ query })
+        .subscribe(response => {
+          // Manage GeoJson features collection as well
+          if (response.type === 'FeatureCollection') {
+            this.items = response.features
+          } else if (this.appendItems) {
+            // Append the response ensuring there is no duplicates
+            this.items = _.unionBy(response.data, this.items, '_id')
+            // We keep order from the updated list as depending on the sorting criteria a new item might have to be pushed on top of current items
+            const sortQuery = _.get(this.getCollectionBaseQuery(), '$sort')
+            if (sortQuery) {
+              // By default orderBy is case sensitive while using collation we want to perform case insensitive sort
+              this.items = _.orderBy(this.items,
+                // Sort function for each sort property
+                _.map(_.keys(sortQuery), property => {
+                  return item => {
+                    const value = _.get(item, property)
+                    return (typeof value === 'string' ? value.toLowerCase() : value)
+                  }
+                }),
+                // Sort order for each sort property
+                _.map(_.values(sortQuery), value => { return value > 0 ? 'asc' : 'desc' }))
+            }
+          } else {
+            this.items = response.data
+          }
+          this.nbTotalItems = response.total
+          this.onCollectionRefreshed()
+        }, error => {
+          logger.error(error)
+        })
+    },
+    unsubscribe () {
+      if (this.itemListener) {
+        this.itemListener.unsubscribe()
+        this.itemListener = null
+      }
+    },
+    getCollectionBaseQuery () {
+      // This method should be overriden in collections
+      return {}
+    },
+    getCollectionFilterQuery () {
+      // This method should be overriden in collections
+      return {}
+    },
+    getCollectionPaginationQuery () {
+      // This method can be overriden in collections
+      if (this.nbItemsPerPage > 0) {
+        return {
+          $limit: this.nbItemsPerPage,
+          $skip: (this.currentPage - 1) * this.nbItemsPerPage
+        }
+      } else return {}
+    },
+    resetCollection () {
+      // Reset pagination and start again refreshing the collection
+      this.items = []
+      this.currentPage = 1
+      this.refreshCollection()
+    },
+    onPageChanged () {
+      this.refreshCollection()
+    },
+    onItemToggled (item, toggled) {
+      this.$emit('item-toggled', item, toggled)
+    },
+    onItemSelected (item, section) {
+      this.$emit('selection-changed', item, section)
+    },
+    onItemsSelected (items) {
+      this.$emit('selection-changed', items)
+    },
+    onCollectionRefreshed () {
+      this.$emit('collection-refreshed', this.items)
+    },
+    onItemsUpdated (items) {
+      // When we append items some items of the previous pages might have been updated.
+      // In this case we need to reset the full collection as Rx only tracks changes on the current page
+      let updatedItems = (Array.isArray(items) ? items : [items])
+      // We keep order from the updated list as depending on the sorting criteria a new item might have to be pushed on top of current items
+      updatedItems = _.intersectionWith(this.items, updatedItems, (item1, item2) => (item1._id.toString() === item2._id.toString()))
+      if (updatedItems.length > 0) this.resetCollection()
+    }
+  },
+  created () {
+    // Avoid initiating too much request as the same time, this might be the case
+    // when async UI components update simultaneously the base/filter query
+    // see https://github.com/kalisio/kdk/issues/432
+    const refreshCollection = () => {
+      // Add locale to perform sorting (i.e. collation) correctly w.r.t. user's language
+      const fullQuery = Object.assign({ $locale: getLocale() },
+        this.getCollectionBaseQuery(),
+        this.getCollectionFilterQuery(),
+        this.getCollectionPaginationQuery())
+      // Find the desired items
+      this.subscribe(fullQuery)
+    }
+    this.refreshCollection = _.throttle(refreshCollection, this.refreshThrottle, { leading: false })
+
+    if (this.appendItems) {
+      const service = this.getService()
+      service.on('patched', this.onItemsUpdated)
+      service.on('updated', this.onItemsUpdated)
+      service.on('removed', this.onItemsUpdated)
+    }
+  },
+  beforeUnmount () {
+    this.unsubscribe()
+    if (this.appendItems) {
+      const service = this.getService()
+      service.off('patched', this.onItemsUpdated)
+      service.off('updated', this.onItemsUpdated)
+      service.off('removed', this.onItemsUpdated)
+    }
+  }
+}

package/core/client/mixins/mixin.base-context.js

@@ -0,0 +1,54 @@
+export const baseContext = {
+  props: {
+    contextId: {
+      type: String,
+      default: ''
+    }
+  },
+  data () {
+    return {
+      contextLoaded: false
+    }
+  },
+  watch: {
+    $route (to, from) {
+      // React to route changes but reusing the same component as this one is generic
+      this.refreshContext()
+    }
+  },
+  methods: {
+    clearContext () {
+      this.$store.set('context', null)
+      this.contextLoaded = false
+    },
+    setContext (context) {
+      // Set context in store so that contextual services are aware of it
+      this.$store.set('context', context)
+      this.contextLoaded = true
+    },
+    async refreshContext () {
+      if (this.contextId) {
+        // Context already set ?
+        let context = this.$store.get('context')
+        if (context && context._id === this.contextId) {
+          return
+        }
+        // Otherwise clear so that underlying components will be destroyed
+        this.clearContext()
+        // Then update the context
+        context = await this.service.get(this.contextId)
+        this.setContext(context)
+      } else {
+        this.clearContext()
+      }
+    }
+  },
+  created () {
+    this.service = this.$api.getService(this.$config('context.service'))
+    // Register the context
+    this.refreshContext()
+  },
+  beforeUnmount () {
+    this.clearContext()
+  }
+}

package/core/client/mixins/mixin.base-editor.js

@@ -0,0 +1,194 @@
+import logger from 'loglevel'
+import _ from 'lodash'
+
+export const baseEditor = {
+  emits: ['applied'],
+  props: {
+    baseObject: {
+      type: Object,
+      default: () => {}
+    },
+    baseQuery: {
+      type: Object,
+      default: () => {}
+    },
+    schemaName: {
+      type: String,
+      default: undefined
+    },
+    perspective: {
+      type: String,
+      default: ''
+    },
+    // Indicates if the stored object in-memory is only the perspective part (default)
+    // or the full structure, ie { perspective: { xxx } }
+    // Note: the full structure is always retrieved/sent from/to the service anyway but sometimes
+    // it is easier to manipulate a full-object and edit a nested property seen as a perspective on the front side
+    perspectiveAsObject: {
+      type: Boolean,
+      default: true
+    },
+    clearButton: {
+      type: String,
+      default: ''
+    },
+    resetButton: {
+      type: String,
+      default: ''
+    }
+  },
+  computed: {
+    editorTitle () {
+      // Retuns the schema title
+      if (this.getSchema()) {
+        const schemaTitle = this.getSchema().title
+        const objectName = _.get(this.getObject(), 'name')
+        return this.$tie(schemaTitle, { name: objectName, interpolation: { escapeValue: false } })
+      }
+      return ''
+    },
+    editorMode () {
+      return this.objectId ? 'update' : 'create'
+    },
+    applyButton () {
+      return this.editorMode === 'update' ? this.$t('UPDATE') : this.$t('CREATE')
+    }
+  },
+  data () {
+    return {
+      isFormReady: false,
+      applyInProgress: false
+    }
+  },
+  methods: {
+    getBaseObject () {
+      // Start from default object or input base object
+      // This is used to keep track of existing or additional "hidden" or "internal" properties
+      // in addition to the ones edited throught the form
+      const object = {}
+      const baseObject = this.getObject() || this.baseObject
+      if (this.perspective !== '') {
+        if (this.perspectiveAsObject) {
+          Object.assign(object, _.get(baseObject, this.perspective))
+        } else {
+          _.set(object, this.perspective, _.get(baseObject, this.perspective))
+        }
+        // Keep track of ID as it is used to know if we update or create
+        if (baseObject._id) object._id = baseObject._id
+      } else {
+        Object.assign(object, baseObject)
+      }
+      return object
+    },
+    getBaseQuery () {
+      // Start from default query
+      const query = {}
+      Object.assign(query, this.baseQuery)
+      if ((this.editorMode === 'update') && this.perspective && this.perspectiveAsObject) {
+        Object.assign(query, { $select: ['_id', this.perspective] })
+      }
+      return query
+    },
+    getSchemaName () {
+      if (this.schemaName) return this.schemaName
+      // Can be provided as route metadata
+      let schemaName = _.get(this.$route, 'meta.schemaName')
+      if (schemaName) return schemaName
+      // When used with a service by default use the same name for schema as for service
+      schemaName = this.service + (this.objectId ? '.update' : '.create')
+      if (this.perspective) {
+        schemaName += ('-' + this.perspective)
+      }
+      return schemaName
+    },
+    onFormReferenceCreated (reference) {
+      if (reference) {
+        this.form = reference
+      }
+    },
+    onFormReady () {
+      this.isFormReady = true
+      this.fillEditor()
+    },
+    fillEditor () {
+      if (!this.isFormReady) throw new Error('Cannot fill the editor with a non-ready form')
+      if (this.getObject()) {
+        if (this.perspective !== '') {
+          this.form.fill(_.get(this.getObject(), this.perspective))
+        } else {
+          this.form.fill(this.getObject())
+        }
+      }
+    },
+    clearEditor () {
+      if (!this.isFormReady) throw new Error('Cannot clear the editor with a non-ready form')
+      this.form.clear()
+    },
+    resetEditor () {
+      if (!this.isFormReady) throw new Error('Cannot reset the editor with a non-ready form')
+      this.fillEditor()
+    },
+    async apply () {
+      if (!this.getService()) throw new Error('Cannot apply the editor with undefined service')
+      if (!this.form) throw new Error('Cannot apply the editor with a non-ready form')
+      // Validate the form
+      if (!this.form.validate().isValid) return
+      // Now the form is validated apply it to the target object
+      const object = this.getBaseObject()
+      await this.form.apply(object)
+
+      // Small helper to avoid repeating too much similar code
+      const onServiceResponse = async (response) => {
+        await this.form.submitted(response)
+        this.$emit('applied', response)
+      }
+
+      const query = this.getBaseQuery(object)
+      this.applyInProgress = true
+      // Update the item
+      try {
+        if (this.editorMode === 'update') {
+          // Editing mode => patch the item
+          if (this.perspective !== '') {
+            const data = {}
+            if (this.perspectiveAsObject) {
+              _.set(data, this.perspective, _.omit(object, ['_id']))
+            } else {
+              _.set(data, this.perspective, _.get(object, this.perspective))
+            }
+            const response = await this.getService().patch(this.objectId, data, { query })
+            // Keep track of ID as it is used to know if we update or create
+            if (object._id) response._id = object._id
+            onServiceResponse(response)
+          } else {
+            const response = await this.getService().patch(this.objectId, object, { query })
+            onServiceResponse(response)
+          }
+        } else if (this.editorMode === 'create') {
+          // Creation mode => create the item
+          const response = await this.getService().create(object, { query })
+          onServiceResponse(response)
+        } else {
+          logger.warn('Invalid editor mode')
+        }
+      } catch (error) {
+        // User error message on operation should be raised by error hook, otherwise this is more a coding error
+        logger.error(error)
+        return false
+      }
+      this.applyInProgress = false
+      return true
+    },
+    async refresh () {
+      // Clear the form
+      this.form = null
+      // We can then load the schema/object and local refs in parallel
+      await Promise.all([
+        this.loadSchema(this.getSchemaName()),
+        this.loadObject()
+      ])
+      // Check if form has been created meanwhile
+      if (this.isFormReady) this.fillEditor()
+    }
+  }
+}