@questwork/vue-q-list-vue3 3.1.8 → 3.1.9

package/lib/models/expansionFactory/expansionFactory.js

@@ -0,0 +1,27 @@
+const { ExpansionManagerQList, ExpansionManagerTemplate } = require('../expansionManager')
+
+
+class ExpansionFactory {
+  static getExpansionManager(config) {
+    const { type } = config
+    switch (type) {
+      case 'template': {
+        return ExpansionManagerTemplate.init(config)
+      }
+      case 'q-list': {
+        return ExpansionManagerQList.init(config)
+      }
+      default: {
+        return ExpansionManagerQList.init(config)
+      }
+
+    }
+  }
+
+}
+
+
+
+module.exports = {
+  ExpansionFactory,
+}

package/lib/models/expansionFactory/index.js

@@ -0,0 +1,5 @@
+const { ExpansionFactory } = require('./expansionFactory')
+
+module.exports = {
+  ExpansionFactory,
+}

package/lib/models/expansionManager/expansionManager.js

@@ -0,0 +1,30 @@
+const { getValidation } = require('../../helpers')
+
+class ExpansionManager {
+  constructor(options = {}) {
+    options = options || {}
+    this.noDataMessage = options.noDataMessage || 'No Data'
+    this.qRow = options.qRow
+    this.restriction = options.restriction
+    this.type = options.type
+  }
+  static init(options) {
+    if (options instanceof ExpansionManager) {
+      return options
+    }
+    const instance = new this(options)
+    return instance.isValid ? instance : null
+  }
+
+  get isValid() {
+    return this
+  }
+
+  get expansibility() {
+    return this.restriction ? getValidation({ rule: this.restriction, data: this.qRow}) : true
+  }
+}
+
+module.exports = {
+  ExpansionManager
+}

package/lib/models/expansionManager/expansionManagerQList.js

@@ -0,0 +1,60 @@
+const { ExpansionManager } = require('./expansionManager')
+const { getValue } = require('../../helpers')
+
+class ExpansionManagerQList extends ExpansionManager {
+   constructor(options = {}) {
+    options = options || {}
+    super(options)
+    this._QRow = options._QRow
+    this.bulkAction = options.bulkAction
+    this.listData = options.listData
+    this.headers = options.headers || []
+    this.rowUniqueKey = options.rowUniqueKey
+    this.setQRows()
+  }
+
+  get selectedQRows() {
+    return this._qRows.filter((r) => r.getIsChecked())
+  }
+
+  get selectedRows() {
+    return this.selectedQRows.map((r) => (r.get()))
+  }
+
+  onExpansionSelectedRowsChange() {
+    const isChecked = !(this._qRows).find((r) => !r.getIsChecked())
+    this.qRow.setChecked(isChecked, false)
+  }
+
+  setCheckedAll(val) {
+    this._qRows.forEach((r) => r.setChecked(val))
+  }
+
+  setCheckedRows(rows) {
+    this._qRows.forEach((r) => {
+      r.updateIsChecked(rows)
+    })
+    this.onExpansionSelectedRowsChange()
+  }
+
+  setQRows() {
+    const rows = getValue(this.listData, this.qRow) || []
+    if (!Array.isArray(rows)) {
+      this._qRows = []
+    } else {
+      this._qRows = rows.map((row) => {
+        if (row instanceof this._QRow) {
+          return row
+        }
+        return this._QRow.init({
+          row,
+          uniqueKey: this.rowUniqueKey
+        })
+      })
+    }
+  }
+}
+
+module.exports = {
+  ExpansionManagerQList
+}

package/lib/models/expansionManager/expansionManagerTemplate.js

@@ -0,0 +1,13 @@
+const { ExpansionManager } = require('./expansionManager')
+
+class ExpansionManagerTemplate extends ExpansionManager {
+  constructor(options = {}) {
+    options = options || {}
+    super(options)
+    this.templateValue = options.templateValue || []
+  }
+}
+
+module.exports = {
+  ExpansionManagerTemplate
+}

package/lib/models/expansionManager/index.js

@@ -0,0 +1,9 @@
+const { ExpansionManager } = require('./expansionManager')
+const { ExpansionManagerQList } = require('./expansionManagerQList')
+const { ExpansionManagerTemplate } = require('./expansionManagerTemplate')
+
+module.exports = {
+  ExpansionManager,
+  ExpansionManagerQList,
+  ExpansionManagerTemplate
+}

package/lib/models/qRow/qRow.js

@@ -1,10 +1,11 @@
+const { ExpansionFactory } = require('../expansionFactory')
 const { dateHelper } = require('@questwork/utilities/lib/dateHelper')
 const { TemplateCompiler } = require('@questwork/q-utilities')
 
 class QRow {
   constructor(options = {}) {
     options = options || {}
-    this.isChecked = options.isChecked || false 
+    this.isChecked = options.isChecked
     this.cssMaker = options.cssMaker
     this.cssNames = options.cssNames || []
     this.editable = (typeof options.editable === 'boolean') ? options.editable : true
@@ -15,6 +16,7 @@ class QRow {
     this.shouldBeVisible = setShouldBeVisible(options.shouldBeVisible || null)
     this.uniqueKey = options.uniqueKey
     this._templateCompiler = TemplateCompiler.init(this.row)
+    this._expansionManager = {}
   }
 
   // Class methods
@@ -57,6 +59,11 @@ class QRow {
   get isValid() {
     return !!this.row
   }
+
+  get isAllowCheck() {
+    return true
+  }
+
   get read() {
     return !this.unread
   }
@@ -138,17 +145,34 @@ class QRow {
     this.editable = val
   }
 
+  setChecked(val, force = true) {
+    if (this.isAllowCheck) {
+      this.isChecked = val
+      if (force && this._expansionManager && typeof this._expansionManager.setCheckedAll === 'function') {
+        this._expansionManager.setCheckedAll(val)
+      }
+    }
+  }
+
   setExpansion(val) {
     this.expansion = val
     return this
   }
 
+  setExpansionManager(config) {
+    this._expansionManager = ExpansionFactory.getExpansionManager({
+      _QRow: QRow,
+      ...config,
+      qRow: this,
+    })
+  }
+
   toggleExpansion() {
     this.expansion = !this.expansion
   }
 
   updateIsChecked(selectedRows = []) {
-    this.isChecked = selectedRows.filter((selectedRow) => {
+    this.isChecked = typeof this.isChecked === 'boolean' ? this.isChecked : selectedRows.filter((selectedRow) => {
       return typeof selectedRow.getUniqueKey === 'function' && selectedRow.getUniqueKey() === this.getUniqueKey()
     }).length > 0
     return this

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@questwork/vue-q-list-vue3",
-  "version": "3.1.8",
+  "version": "3.1.9",
   "description": "Questwork vue component for displaying a list",
   "exports": {
     ".": {