@kigi/components 1.5.10 → 1.5.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/package.json +1 -1
  2. package/src/components/mbg-select-multi-list/mbg-select-multi-list.ts +156 -142
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kigi/components",
3
- "version": "1.5.10",
3
+ "version": "1.5.11",
4
4
  "description": "@kigi/components",
5
5
  "main": "src/components/index.ts",
6
6
  "scripts": {
package/src/components/mbg-select-multi-list/mbg-select-multi-list.ts CHANGED
@@ -5,157 +5,171 @@ import * as Fuse from 'fuse.js'
5
5
  import { UtilUID } from '../../helpers/util-uid'
6
6
 
7
7
  export class MbgSelectMultiListController {
8
- private data: Array<any>
9
- private ngModel: any
10
- private dataModel: Array<any>
11
- private fetch: Function
12
- private label: string
13
- private isLoading: boolean
14
- private inputValue: string
15
- private listRowTransclude: string
16
- private listHeaderTransclude: string
17
- private placeholderLeft: string
18
- private placeholderRight: string
19
- private inputValueResult: string
20
-
21
- constructor(public $scope, public $element, public $attrs, public $timeout, public $compile, public $transclude) { }
22
-
23
- $onInit() {
24
- this.placeholderLeft = this.placeholderLeft || ''
25
- this.placeholderRight = this.placeholderRight || ''
26
- this.$scope.$c = this.$scope.$parent
27
- this.findTransclude()
28
- this.findTranscludeHeader()
29
- this.$scope.$watch('$ctrl.data', (data) => {
30
- this.afterFetchData(data)
31
- }, true)
32
- this.$timeout(() => {
33
- this.ngModel = this.ngModel || []
34
- this.dataModel = JSON.parse(JSON.stringify(this.ngModel)) || []
35
- })
36
- }
37
-
38
- findTransclude() {
39
- this.$transclude(this.$scope, (cloneEl) => {
40
- angular.forEach(cloneEl, cl => {
41
- let element = angular.element(cl)[0]
42
- if (element.nodeName && element.nodeName === 'MBG-ROW-CONTENT') {
43
- this.listRowTransclude = element.innerHTML
44
- }
45
- })
46
- })
47
- }
48
-
49
- findTranscludeHeader() {
50
- this.$transclude(this.$scope, (cloneEl) => {
51
- angular.forEach(cloneEl, cl => {
52
- let element = angular.element(cl)[0]
53
- if (element.nodeName && element.nodeName === 'MBG-HEADER-CONTENT') {
54
- this.listHeaderTransclude = element.innerHTML
55
- }
56
- })
57
- })
58
- }
59
-
60
- executeFetch() {
61
- this.$timeout(() => {
62
- this.fetch({ query: (this.inputValue || '') })
63
- })
64
- }
65
-
66
- afterFetchData(data) {
67
- this.$timeout(() => {
68
- this.data = (data || []).filter((row) => this.ngModel.filter((model) => angular.equals(row, model)).length === 0)
69
- })
70
- }
71
-
72
- selectRow(row) {
73
- const copyRow = JSON.parse(JSON.stringify(row))
74
- const index = this.findIndexRow(this.data, row)
75
- if (index !== -1) {
76
- copyRow._uid = UtilUID.generete()
77
- this.ngModel.push(copyRow)
78
- this.dataModel.push(copyRow)
79
- this.data.splice(index, 1)
80
- this.$timeout(() => {
81
- (this.ngModel || []).forEach((model) => {
82
- delete model._uid
83
- })
84
- }, 500)
8
+ private data: Array<any>
9
+ private ngModel: any
10
+ private dataModel: Array<any>
11
+ private fetch: Function
12
+ private label: string
13
+ private isLoading: boolean
14
+ private inputValue: string
15
+ private listRowTransclude: string
16
+ private listHeaderTransclude: string
17
+ private placeholderLeft: string
18
+ private placeholderRight: string
19
+ private inputValueResult: string
20
+
21
+ constructor(
22
+ public $scope,
23
+ public $element,
24
+ public $attrs,
25
+ public $timeout,
26
+ public $compile,
27
+ public $transclude,
28
+ ) {}
29
+
30
+ $onInit() {
31
+ this.placeholderLeft = this.placeholderLeft || ''
32
+ this.placeholderRight = this.placeholderRight || ''
33
+ this.$scope.$c = this.$scope.$parent
34
+ this.findTransclude()
35
+ this.findTranscludeHeader()
36
+ this.$scope.$watch(
37
+ '$ctrl.data',
38
+ (data) => {
39
+ this.afterFetchData(data)
40
+ },
41
+ true,
42
+ )
43
+ this.$timeout(() => {
44
+ this.ngModel = this.ngModel || []
45
+ this.dataModel = JSON.parse(JSON.stringify(this.ngModel)) || []
46
+ })
47
+ }
48
+
49
+ findTransclude() {
50
+ this.$transclude(this.$scope, (cloneEl) => {
51
+ angular.forEach(cloneEl, (cl) => {
52
+ let element = angular.element(cl)[0]
53
+ if (element.nodeName && element.nodeName === 'MBG-ROW-CONTENT') {
54
+ this.listRowTransclude = element.innerHTML
85
55
  }
86
- }
87
-
88
- removeRow(row) {
89
- this.$timeout(() => {
90
- const index = this.findIndexRow(this.ngModel, row)
91
- const indexData = this.findIndexRow(this.dataModel, row)
92
- if (index !== -1) {
93
- this.ngModel.splice(index, 1)
94
- this.dataModel.splice(indexData, 1)
95
- this.executeFetch()
96
- }
97
- })
98
- }
99
-
100
- searchNgModel() {
101
- this.$timeout(() => {
102
- const dataModel = JSON.parse(JSON.stringify(this.ngModel))
103
- const options = {
104
- shouldSort: true,
105
- threshold: 0.3,
106
- location: 0,
107
- distance: 100,
108
- maxPatternLength: 32,
109
- minMatchCharLength: 1,
110
- keys: [this.label]
111
- }
112
- const fuse = new Fuse(dataModel, options)
113
- const result = fuse.search(this.inputValueResult)
114
- this.dataModel = result.length > 0 ? result : dataModel
56
+ })
57
+ })
58
+ }
59
+
60
+ findTranscludeHeader() {
61
+ this.$transclude(this.$scope, (cloneEl) => {
62
+ angular.forEach(cloneEl, (cl) => {
63
+ let element = angular.element(cl)[0]
64
+ if (element.nodeName && element.nodeName === 'MBG-HEADER-CONTENT') {
65
+ this.listHeaderTransclude = element.innerHTML
66
+ }
67
+ })
68
+ })
69
+ }
70
+
71
+ executeFetch() {
72
+ this.$timeout(() => {
73
+ this.fetch({ query: this.inputValue || '' })
74
+ })
75
+ }
76
+
77
+ afterFetchData(data) {
78
+ this.$timeout(() => {
79
+ this.data = (data || []).filter(
80
+ (row) => this.ngModel.filter((model) => angular.equals(row, model)).length === 0,
81
+ )
82
+ })
83
+ }
84
+
85
+ selectRow(row) {
86
+ const copyRow = JSON.parse(JSON.stringify(row))
87
+ const index = this.findIndexRow(this.data, row)
88
+ if (index !== -1) {
89
+ copyRow._uid = UtilUID.generete()
90
+ this.ngModel.push(copyRow)
91
+ this.dataModel.push(copyRow)
92
+ this.data.splice(index, 1)
93
+ this.$timeout(() => {
94
+ ;(this.ngModel || []).forEach((model) => {
95
+ delete model._uid
115
96
  })
116
-
117
- }
118
-
119
- findIndexRow(array: Array<any>, row) {
120
- return array.findIndex((data) => angular.equals(data, row))
121
- }
122
-
123
- async addEvent(row) {
124
- const target: any = angular.element('.result-multi-list-wrapper')
125
- await target.animate({ scrollTop: this.dataModel.length * 44 }, 500)
126
- this.$timeout(() => {
127
- const element = angular.element(`div[id="${row['_uid']}"]`)
128
- element.addClass('active')
129
- this.$timeout(() => element.removeClass('active'), 300)
130
- }, 100)
97
+ }, 500)
131
98
  }
99
+ }
100
+
101
+ removeRow(row) {
102
+ this.$timeout(() => {
103
+ const index = this.findIndexRow(this.ngModel, row)
104
+ const indexData = this.findIndexRow(this.dataModel, row)
105
+ if (index !== -1) {
106
+ this.ngModel.splice(index, 1)
107
+ this.dataModel.splice(indexData, 1)
108
+ this.executeFetch()
109
+ }
110
+ })
111
+ }
112
+
113
+ searchNgModel() {
114
+ this.$timeout(() => {
115
+ const search = (this.label || '').split(',')
116
+ const keys = search.map((word) => word.trim())
117
+ const dataModel = JSON.parse(JSON.stringify(this.ngModel))
118
+ const options = {
119
+ shouldSort: true,
120
+ threshold: 0.3,
121
+ location: 0,
122
+ distance: 100,
123
+ maxPatternLength: 32,
124
+ minMatchCharLength: 1,
125
+ keys,
126
+ }
127
+ const fuse = new Fuse(dataModel, options)
128
+ const result = fuse.search(this.inputValueResult)
129
+ this.dataModel = result.length > 0 ? result : dataModel
130
+ })
131
+ }
132
+
133
+ findIndexRow(array: Array<any>, row) {
134
+ return array.findIndex((data) => angular.equals(data, row))
135
+ }
136
+
137
+ async addEvent(row) {
138
+ const target: any = angular.element('.result-multi-list-wrapper')
139
+ await target.animate({ scrollTop: this.dataModel.length * 44 }, 500)
140
+ this.$timeout(() => {
141
+ const element = angular.element(`div[id="${row['_uid']}"]`)
142
+ element.addClass('active')
143
+ this.$timeout(() => element.removeClass('active'), 300)
144
+ }, 100)
145
+ }
132
146
  }
133
147
 
134
148
  MbgSelectMultiListController.$inject = [
135
- '$scope',
136
- '$element',
137
- '$attrs',
138
- '$timeout',
139
- '$compile',
140
- '$transclude'
149
+ '$scope',
150
+ '$element',
151
+ '$attrs',
152
+ '$timeout',
153
+ '$compile',
154
+ '$transclude',
141
155
  ]
142
156
 
143
157
  const mbgSelectMultiList = {
144
- transclude: true,
145
- bindings: {
146
- ngModel: '=?',
147
- fetch: '&?',
148
- label: '@?',
149
- count: '=?',
150
- placeholderLeft: '@?',
151
- placeholderRight: '@?',
152
- titleLeft: '@?',
153
- titleRight: '@?',
154
- data: '=?',
155
- isLoading: '=?'
156
- },
157
- template,
158
- controller: MbgSelectMultiListController,
158
+ transclude: true,
159
+ bindings: {
160
+ ngModel: '=?',
161
+ fetch: '&?',
162
+ label: '@?',
163
+ count: '=?',
164
+ placeholderLeft: '@?',
165
+ placeholderRight: '@?',
166
+ titleLeft: '@?',
167
+ titleRight: '@?',
168
+ data: '=?',
169
+ isLoading: '=?',
170
+ },
171
+ template,
172
+ controller: MbgSelectMultiListController,
159
173
  }
160
174
 
161
175
  export { mbgSelectMultiList }