pimelon-ui 0.0.98

package/src/resources/documentResource.js

@@ -0,0 +1,194 @@
+import { reactive } from 'vue'
+import { getCacheKey, createResource } from './resources'
+import {
+  updateRowInListResource,
+  deleteRowInListResource,
+  revertRowInListResource,
+} from './listResource'
+import { getLocal, saveLocal } from './local'
+
+let documentCache = reactive({})
+
+export function createDocumentResource(options, vm) {
+  if (!(options.doctype && options.name)) return
+
+  let cacheKey = getCacheKey([options.doctype, options.name])
+  let cachedResource = documentCache[cacheKey]
+  if (cachedResource) {
+    if (cachedResource.auto) {
+      cachedResource.reload()
+    }
+    return cachedResource
+  }
+
+  let setValueOptions = {
+    url: 'melon.client.set_value',
+    makeParams(values) {
+      return {
+        doctype: out.doctype,
+        name: out.name,
+        fieldname: values,
+      }
+    },
+    beforeSubmit(params) {
+      out.previousDoc = JSON.stringify(out.doc)
+      Object.assign(out.doc, params.fieldname || {})
+      // update data in list resources
+      updateRowInListResource(out.doctype, out.doc)
+    },
+    onSuccess(data) {
+      out.doc = transform(data)
+      options.setValue?.onSuccess?.call(vm, data)
+    },
+    onError(error) {
+      out.doc = JSON.parse(out.previousDoc)
+      options.setValue?.onError?.call(vm, error)
+      // revert data in list resource
+      revertRowInListResource(out.doctype, out.doc)
+    },
+  }
+
+  let out = reactive({
+    doctype: options.doctype,
+    name: options.name,
+    doc: null,
+    auto: options.auto || true,
+    get: createResource(
+      {
+        url: 'melon.client.get',
+        makeParams() {
+          return {
+            doctype: out.doctype,
+            name: out.name,
+          }
+        },
+        onSuccess(data) {
+          saveLocal(cacheKey, data)
+          out.doc = transform(data)
+          options.onSuccess?.call(vm, out.doc)
+        },
+        onError: options.onError,
+      },
+      vm
+    ),
+    setValue: createResource(setValueOptions, vm),
+    setValueDebounced: createResource(
+      {
+        ...setValueOptions,
+        debounce: options.debounce || 500,
+      },
+      vm
+    ),
+    delete: createResource(
+      {
+        url: 'melon.client.delete',
+        makeParams() {
+          return {
+            doctype: out.doctype,
+            name: out.name,
+          }
+        },
+        onSuccess() {
+          out.doc = null
+          options.delete?.onSuccess?.call(vm)
+          // delete from list resources
+          deleteRowInListResource(out.doctype, out.name)
+        },
+        onError: options.delete?.onError,
+      },
+      vm
+    ),
+    reload,
+    setDoc,
+  })
+
+  for (let methodKey in options.whitelistedMethods) {
+    let methodOptions = options.whitelistedMethods[methodKey]
+    if (typeof methodOptions == 'string') {
+      methodOptions = {
+        method: methodOptions,
+      }
+    }
+    let { method, onSuccess, ...otherOptions } = methodOptions
+    out[methodKey] = createResource(
+      {
+        url: 'run_doc_method',
+        makeParams(values) {
+          return {
+            dt: out.doctype,
+            dn: out.name,
+            method: method,
+            args: JSON.stringify(values),
+          }
+        },
+        onSuccess(data) {
+          if (data.docs) {
+            for (let doc of data.docs) {
+              if (
+                doc.doctype === out.doctype &&
+                doc.name.toString() === out.name.toString()
+              ) {
+                out.doc = transform(doc)
+                // update data in list resources
+                updateRowInListResource(out.doctype, out.doc)
+                break
+              }
+            }
+          }
+          onSuccess?.call(vm, out.doc)
+        },
+        ...otherOptions,
+      },
+      vm
+    )
+  }
+
+  function reload() {
+    return out.get.fetch()
+  }
+
+  function setDoc(doc) {
+    if (typeof doc === 'function') {
+      doc = doc.call(vm, out.doc)
+    }
+    out.doc = transform(doc)
+  }
+
+  function transform(doc) {
+    if (options.transform) {
+      let returnValue = options.transform.call(vm, doc)
+      if (typeof returnValue === 'object') {
+        return returnValue
+      }
+    }
+    return doc
+  }
+
+  if (options.realtime && vm.$socket) {
+    vm.$socket.on('list_update', (data) => {
+      if (data.doctype == out.doctype && data.name == out.name) {
+        out.get.fetch()
+      }
+    })
+  }
+
+  // cache
+  documentCache[cacheKey] = out
+  // offline
+  getLocal(cacheKey).then((data) => {
+    if ((out.get.loading || !out.get.fetched) && data) {
+      out.doc = transform(data)
+    }
+  })
+
+  if (out.auto) {
+    out.get.fetch()
+  }
+
+  return out
+}
+
+export function getCachedDocumentResource(doctype, name) {
+  let cacheKey = getCacheKey([doctype, name])
+  return documentCache[cacheKey] || null
+}

package/src/resources/index.js

@@ -0,0 +1,4 @@
+export { createResource } from './resources'
+export { createDocumentResource } from './documentResource'
+export { createListResource } from './listResource'
+export { default as resourcesPlugin } from './plugin'

package/src/resources/listResource.js

@@ -0,0 +1,312 @@
+import { reactive } from 'vue'
+import { getCacheKey, createResource } from './resources'
+import { saveLocal, getLocal } from './local'
+
+let listCache = reactive({})
+let resourcesByDocType = {}
+
+export function createListResource(options, vm) {
+  if (!options.doctype) {
+    throw new Error('List resource requires doctype')
+  }
+
+  let cacheKey = getCacheKey(options.cache)
+  if (cacheKey) {
+    let cachedResource = listCache[cacheKey]
+    if (cachedResource) {
+      if (cachedResource.auto) {
+        cachedResource.reload()
+      }
+      return cachedResource
+    }
+  }
+
+  let out = reactive({
+    doctype: options.doctype,
+    fields: options.fields,
+    filters: options.filters,
+    orderBy: options.orderBy,
+    start: options.start || 0,
+    pageLength: options.pageLength || 20,
+    parent: options.parent,
+    debug: options.debug || 0,
+    originalData: null,
+    data: null,
+    next,
+    hasNextPage: true,
+    auto: options.auto,
+    list: createResource(
+      {
+        url: options.url || 'melon.client.get_list',
+        makeParams() {
+          return {
+            doctype: out.doctype,
+            fields: out.fields,
+            filters: out.filters,
+            order_by: out.orderBy,
+            start: out.start,
+            limit: out.pageLength,
+            limit_start: out.start,
+            limit_page_length: out.pageLength,
+            parent: out.parent,
+            debug: out.debug,
+          }
+        },
+        onSuccess(data) {
+          if (data.length < out.pageLength) {
+            out.hasNextPage = false
+          }
+          let pagedData
+          if (!out.start || out.start == 0) {
+            pagedData = data
+          } else if (out.start > 0) {
+            pagedData = out.originalData.concat(data)
+          }
+          saveLocal(cacheKey, pagedData)
+          setData(pagedData)
+          options.onSuccess?.call(vm, out.data)
+        },
+        onError: options.onError,
+      },
+      vm
+    ),
+    fetchOne: createResource(
+      {
+        url: 'melon.client.get_list',
+        makeParams(name) {
+          return {
+            doctype: out.doctype,
+            fields: out.fields || '*',
+            filters: { name },
+          }
+        },
+        onSuccess(data) {
+          if (data.length > 0 && out.originalData) {
+            let doc = data[0]
+            updateRowInListResource(out.doctype, doc)
+          }
+
+          options.fetchOne?.onSuccess?.call(vm, out.data)
+        },
+        onError: options.fetchOne?.onError,
+      },
+      vm
+    ),
+    insert: createResource(
+      {
+        url: 'melon.client.insert',
+        makeParams(values) {
+          return {
+            doc: {
+              doctype: out.doctype,
+              ...values,
+            },
+          }
+        },
+        onSuccess(data) {
+          out.list.fetch()
+          options.insert?.onSuccess?.call(vm, data)
+        },
+        onError: options.insert?.onError,
+      },
+      vm
+    ),
+    setValue: createResource(
+      {
+        url: 'melon.client.set_value',
+        makeParams(options) {
+          let { name, ...values } = options
+          return {
+            doctype: out.doctype,
+            name: name,
+            fieldname: values,
+          }
+        },
+        onSuccess(doc) {
+          updateRowInListResource(out.doctype, doc)
+          options.setValue?.onSuccess?.call(vm, doc)
+        },
+        onError: options.setValue?.onError,
+      },
+      vm
+    ),
+    delete: createResource(
+      {
+        url: 'melon.client.delete',
+        makeParams(name) {
+          return {
+            doctype: out.doctype,
+            name,
+          }
+        },
+        onSuccess(data) {
+          out.list.fetch()
+          options.delete?.onSuccess?.call(vm, data)
+        },
+        onError: options.delete?.onError,
+      },
+      vm
+    ),
+    runDocMethod: createResource(
+      {
+        url: 'run_doc_method',
+        makeParams({ method, name, ...values }) {
+          return {
+            dt: out.doctype,
+            dn: name,
+            method: method,
+            args: JSON.stringify(values),
+          }
+        },
+        onSuccess(data) {
+          if (data.docs) {
+            for (let doc of data.docs) {
+              updateRowInListResource(doc.doctype, doc)
+            }
+          }
+          options.runDocMethod?.onSuccess?.call(vm, data)
+        },
+        onError: options.runDocMethod?.onError,
+      },
+      vm
+    ),
+    update,
+    reload,
+    setData,
+    transform,
+  })
+
+  function update(updatedOptions) {
+    out.doctype = updatedOptions.doctype
+    out.fields = updatedOptions.fields
+    out.filters = updatedOptions.filters
+    out.orderBy = updatedOptions.orderBy
+    out.start = updatedOptions.start
+    out.pageLength = updatedOptions.pageLength
+    out.parent = updatedOptions.parent
+    out.debug = updatedOptions.debug
+  }
+
+  function transform(data) {
+    if (options.transform) {
+      let returnValue = options.transform.call(vm, data)
+      if (returnValue != null) {
+        return returnValue
+      }
+    }
+    return data
+  }
+
+  function reload() {
+    let _start = out.start
+    let _pageLength = out.pageLength
+    if (out.start > 0) {
+      out.start = 0
+      out.pageLength = out.originalData.length
+    }
+    return out.list.fetch().finally(() => {
+      out.start = _start
+      out.pageLength = _pageLength
+    })
+  }
+
+  function setData(data) {
+    out.originalData = data
+    if (typeof data === 'function') {
+      data = data.call(vm, out.data)
+    }
+    out.data = transform(data)
+  }
+
+  function next() {
+    out.start = out.start + out.pageLength
+    out.list.fetch()
+  }
+
+  if (options.realtime && vm.$socket) {
+    vm.$socket.on('list_update', (data) => {
+      if (
+        data.doctype === out.doctype &&
+        out.originalData?.find((d) => d.name === data.name)
+      ) {
+        out.fetchOne.submit(data.name)
+      }
+    })
+  }
+
+  if (cacheKey) {
+    // cache
+    listCache[cacheKey] = out
+    // offline
+    getLocal(cacheKey).then((data) => {
+      if ((out.list.loading || !out.list.fetched) && data) {
+        setData(data)
+      }
+    })
+  }
+
+  if (options.auto) {
+    out.list.fetch()
+  }
+
+  resourcesByDocType[out.doctype] = resourcesByDocType[out.doctype] || []
+  resourcesByDocType[out.doctype].push(out)
+
+  return out
+}
+
+export function getCachedListResource(cacheKey) {
+  cacheKey = getCacheKey(cacheKey)
+  return listCache[cacheKey] || null
+}
+
+export function updateRowInListResource(doctype, doc) {
+  if (!doc.name) return
+  let resources = resourcesByDocType[doctype] || []
+  for (let resource of resources) {
+    if (resource.originalData) {
+      for (let row of resource.originalData) {
+        if (row.name && row.name == doc.name) {
+          let previousRowData = JSON.stringify(row)
+          for (let key in row) {
+            if (key in doc) {
+              row[key] = doc[key]
+            }
+          }
+          row._previousData = previousRowData
+        }
+      }
+      resource.data = resource.transform(resource.originalData)
+    }
+  }
+}
+
+export function deleteRowInListResource(doctype, docname) {
+  let resources = resourcesByDocType[doctype] || []
+  for (let resource of resources) {
+    if (resource.originalData) {
+      resource.originalData = resource.originalData.filter(
+        (row) => row.name.toString() !== docname
+      )
+      resource.data = resource.transform(resource.originalData)
+    }
+  }
+}
+
+export function revertRowInListResource(doctype, doc) {
+  let resources = resourcesByDocType[doctype] || []
+  for (let resource of resources) {
+    if (resource.originalData) {
+      for (let row of resource.originalData) {
+        if (row.name && row.name == doc.name) {
+          let previousRowData = JSON.parse(row._previousData)
+          for (let key in row) {
+            row[key] = previousRowData[key]
+          }
+          delete row._previousData
+        }
+      }
+      resource.data = resource.transform(resource.originalData)
+    }
+  }
+}

package/src/resources/local.js

@@ -0,0 +1,16 @@
+import { get, set } from 'idb-keyval'
+
+export function saveLocal(key, data) {
+  if (typeof indexedDB === 'undefined') {
+    return Promise.resolve(null)
+  }
+  if (!key) return Promise.resolve()
+  return set(key, JSON.stringify(data))
+}
+
+export function getLocal(key) {
+  if (typeof indexedDB === 'undefined') {
+    return Promise.resolve(null)
+  }
+  return get(key).then((val) => (val ? JSON.parse(val) : val))
+}

package/src/resources/plugin.js

@@ -0,0 +1,105 @@
+import { reactive, watch } from 'vue'
+import { createResource, getCachedResource } from './resources'
+import {
+  createDocumentResource,
+  getCachedDocumentResource,
+} from './documentResource'
+import { createListResource, getCachedListResource } from './listResource'
+
+let createMixin = (mixinOptions) => ({
+  created() {
+    if (this.$options.resources) {
+      this._resources = reactive({})
+      for (let key in this.$options.resources) {
+        let options = this.$options.resources[key]
+
+        if (typeof options == 'function') {
+          watch(
+            () => {
+              try {
+                return options.call(this)
+              } catch (error) {
+                console.warn('Failed to get resource options\n\n', error)
+                return null
+              }
+            },
+            (options, oldOptions) => {
+              if (!options) {
+                return
+              }
+
+              let changed =
+                !oldOptions ||
+                JSON.stringify(options) !== JSON.stringify(oldOptions)
+
+              if (!changed) return
+
+              if (options.type === 'document') {
+                let resource = createDocumentResource(options, this)
+                this._resources[key] = resource
+              } else {
+                let resource = this._resources[key]
+                if (!resource) {
+                  resource = createResourceForOptions(options, this)
+                  this._resources[key] = resource
+                } else {
+                  resource.update(options)
+                  if (resource.auto) {
+                    resource.reload()
+                  }
+                }
+              }
+            },
+            {
+              immediate: true,
+            }
+          )
+        } else {
+          let resource = createResourceForOptions(options, this)
+          this._resources[key] = resource
+        }
+      }
+    }
+  },
+  methods: {
+    $getResource(cacheKey) {
+      return getCachedResource(cacheKey)
+    },
+    $getDocumentResource(doctype, name) {
+      return getCachedDocumentResource(doctype, name)
+    },
+    $getDoc(doctype, name) {
+      let resource = this.$getDocumentResource(doctype, name)
+      return resource ? resource.doc : null
+    },
+    $getListResource(cacheKey) {
+      return getCachedListResource(cacheKey)
+    },
+    $refetchResource(cache) {
+      let resource = this.$getResource(cache)
+      resource && resource.fetch()
+    },
+  },
+  computed: {
+    $resources() {
+      return this._resources
+    },
+  },
+})
+
+function createResourceForOptions(options, vm) {
+  if (options.type === 'document') {
+    return createDocumentResource(options, vm)
+  }
+  if (options.type === 'list') {
+    return createListResource(options, vm)
+  }
+  return createResource(options, vm)
+}
+
+export default {
+  install(app, options) {
+    let resourceMixin = createMixin(options)
+    app.mixin(resourceMixin)
+  },
+}