@operato/app 1.2.53 → 1.3.3

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.
package/CHANGELOG.md CHANGED
@@ -3,6 +3,39 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ### [1.3.3](https://github.com/hatiolab/operato/compare/v1.3.2...v1.3.3) (2023-06-16)
7
+
8
+ **Note:** Version bump only for package @operato/app
9
+
10
+
11
+
12
+
13
+
14
+ ### [1.3.2](https://github.com/hatiolab/operato/compare/v1.3.1...v1.3.2) (2023-06-13)
15
+
16
+ **Note:** Version bump only for package @operato/app
17
+
18
+
19
+
20
+
21
+
22
+ ### [1.3.1](https://github.com/hatiolab/operato/compare/v1.3.0...v1.3.1) (2023-06-13)
23
+
24
+ **Note:** Version bump only for package @operato/app
25
+
26
+
27
+
28
+
29
+
30
+ ## [1.3.0](https://github.com/hatiolab/operato/compare/v1.2.53...v1.3.0) (2023-06-13)
31
+
32
+
33
+ ### :rocket: New Features
34
+
35
+ * add filter type ( resource-object ) ([79c0866](https://github.com/hatiolab/operato/commit/79c0866bd33ec5982e0d8f9d6536cec4f7d6f75e))
36
+
37
+
38
+
6
39
  ### [1.2.53](https://github.com/hatiolab/operato/compare/v1.2.52...v1.2.53) (2023-06-12)
7
40
 
8
41
 
@@ -4,7 +4,7 @@ import { html } from 'lit-html';
4
4
  import { i18next } from '@operato/i18n';
5
5
  import { openPopup } from '@operato/layout';
6
6
  function openResourceSelector(column, value, confirmCallback) {
7
- const { queryName, select, list, basicArgs, valueField = 'id' } = column.record.options;
7
+ const { queryName, select, list, basicArgs, valueField = 'id', title } = column.record.options;
8
8
  var actualValue;
9
9
  if (typeof valueField === 'function') {
10
10
  actualValue = valueField(value);
@@ -13,30 +13,46 @@ function openResourceSelector(column, value, confirmCallback) {
13
13
  actualValue = value === null || value === void 0 ? void 0 : value[valueField];
14
14
  }
15
15
  var template = html `
16
- <ox-selector-resource-id
16
+ <ox-selector-resource-object
17
17
  .value=${actualValue}
18
18
  .confirmCallback=${confirmCallback}
19
19
  .queryName=${queryName}
20
- .select=${select}
20
+ .columns=${select}
21
21
  .list=${list}
22
22
  .basicArgs=${basicArgs}
23
23
  .valueField=${valueField}
24
- ></ox-selector-resource-id>
24
+ ></ox-selector-resource-object>
25
25
  `;
26
26
  const popup = openPopup(template, {
27
27
  backdrop: true,
28
28
  size: 'large',
29
- title: i18next.t('title.select_item')
29
+ search: {
30
+ autofocus: true,
31
+ placeholder: title || i18next.t('title.select_item'),
32
+ handler: (instance, value) => {
33
+ /* instance: template instance */
34
+ instance.searchText(value);
35
+ }
36
+ },
37
+ filter: {
38
+ handler: (instance) => {
39
+ /* instance: template instance */
40
+ instance.toggleFilter();
41
+ }
42
+ }
30
43
  });
31
44
  }
32
45
  export const FilterResourceSelect = (column, value, owner) => {
33
46
  const filter = column.filter;
34
47
  const { operator = 'like' } = filter;
48
+ var { idField = 'id', nameField = 'name', descriptionField = 'description' } = column.record.options || {};
49
+ const hideValue = value ? value[idField] : '';
50
+ const text = value ? value[nameField] : '';
35
51
  return operator === 'like'
36
52
  ? html ` <input
37
53
  type="text"
38
54
  name=${column.name}
39
- .value=${value}
55
+ .value=${text}
40
56
  @change=${(e) => {
41
57
  const input = e.target;
42
58
  input.dispatchEvent(new CustomEvent('filter-change', {
@@ -54,20 +70,35 @@ export const FilterResourceSelect = (column, value, owner) => {
54
70
  ? html ``
55
71
  : operator === 'eq'
56
72
  ? html `
73
+ <input name='${column.name}' .value=${hideValue} type="text" hidden></input>
57
74
  <input
58
- style="min-width: 100px; min-height: 24px"
59
75
  type="text"
60
- name=${column.name}
61
- .value=${value}
76
+ name='${column.name}_disp'
77
+ .value=${text}
62
78
  readonly
63
79
  @click=${(e) => {
64
80
  e.stopPropagation();
81
+ const input = e.target;
65
82
  const confirmCallback = (selected) => {
66
- var { idField = 'id', nameField = 'name', descriptionField = 'description' } = column.record.options || {};
83
+ let disp = selected ? selected[idField] : '';
84
+ if (selected && nameField) {
85
+ disp = selected[nameField];
86
+ }
87
+ input.value = disp;
88
+ let codeInput = owner.tagName.toLowerCase() == 'ox-grid-header'
89
+ ? owner.renderRoot.querySelector(`[name="${column.name}"]`)
90
+ : owner.renderRoot.querySelector(`form [name="${column.name}"]`);
91
+ const objectValue = selected ? selected[idField] : '';
92
+ codeInput.value = objectValue;
93
+ input.dispatchEvent(new Event('change', { bubbles: true }));
67
94
  owner.dispatchEvent(new CustomEvent('filter-change', {
68
95
  bubbles: true,
69
96
  composed: true,
70
- detail: selected ? selected[idField] : ''
97
+ detail: {
98
+ name: column.name,
99
+ operator,
100
+ value: objectValue
101
+ }
71
102
  }));
72
103
  };
73
104
  openResourceSelector(column, value, confirmCallback);
@@ -1 +1 @@
1
- {"version":3,"file":"filter-resource-select.js","sourceRoot":"","sources":["../../../src/filter-renderer/filter-resource-select.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/input/ox-checkbox.js'\nimport '../selector/ox-selector-resource-id'\n\nimport { html } from 'lit-html'\n\nimport { ColumnConfig, FilterConfigObject, FilterSelectRenderer } from '@operato/data-grist'\nimport { i18next } from '@operato/i18n'\nimport { openPopup } from '@operato/layout'\n\ntype SelectedCallback = (value: { id: string; name: string; description: string }) => void\n\nfunction openResourceSelector(column: ColumnConfig, value: any, confirmCallback: SelectedCallback) {\n const { queryName, select, list, basicArgs, valueField = 'id' } = column.record.options\n\n var actualValue\n if (typeof valueField === 'function') {\n actualValue = valueField(value)\n } else {\n actualValue = value?.[valueField]\n }\n\n var template = html`\n <ox-selector-resource-id\n .value=${actualValue}\n .confirmCallback=${confirmCallback}\n .queryName=${queryName}\n .select=${select}\n .list=${list}\n .basicArgs=${basicArgs}\n .valueField=${valueField}\n ></ox-selector-resource-id>\n `\n\n const popup = openPopup(template, {\n backdrop: true,\n size: 'large',\n title: i18next.t('title.select_item')\n })\n}\n\nexport const FilterResourceSelect: FilterSelectRenderer = (column, value, owner) => {\n const filter = column.filter as FilterConfigObject\n const { operator = 'like' } = filter\n\n return operator === 'like'\n ? html` <input\n type=\"text\"\n name=${column.name}\n .value=${value}\n @change=${(e: CustomEvent) => {\n const input = e.target as HTMLInputElement\n input.dispatchEvent(\n new CustomEvent('filter-change', {\n bubbles: true,\n composed: true,\n detail: {\n name: column.name,\n operator,\n value: input.value\n }\n })\n )\n }}\n />`\n : operator == 'in'\n ? html``\n : operator === 'eq'\n ? html`\n <input\n style=\"min-width: 100px; min-height: 24px\"\n type=\"text\"\n name=${column.name}\n .value=${value}\n readonly\n @click=${(e: Event) => {\n e.stopPropagation()\n\n const confirmCallback = (selected?: { [field: string]: any }) => {\n var { idField = 'id', nameField = 'name', descriptionField = 'description' } = column.record.options || {}\n\n owner.dispatchEvent(\n new CustomEvent('filter-change', {\n bubbles: true,\n composed: true,\n detail: selected ? selected[idField] : ''\n })\n )\n }\n\n openResourceSelector(column, value, confirmCallback)\n }}\n />\n `\n : html``\n}\n"]}
1
+ {"version":3,"file":"filter-resource-select.js","sourceRoot":"","sources":["../../../src/filter-renderer/filter-resource-select.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/input/ox-checkbox.js'\nimport '../selector/ox-selector-resource-id'\n\nimport { html } from 'lit-html'\n\nimport { ColumnConfig, FilterConfigObject, FilterSelectRenderer } from '@operato/data-grist'\nimport { i18next } from '@operato/i18n'\nimport { openPopup } from '@operato/layout'\n\ntype SelectedCallback = (value: { id: string; name: string; description: string }) => void\n\nfunction openResourceSelector(column: ColumnConfig, value: any, confirmCallback: SelectedCallback) {\n const { queryName, select, list, basicArgs, valueField = 'id', title } = column.record.options\n\n var actualValue\n if (typeof valueField === 'function') {\n actualValue = valueField(value)\n } else {\n actualValue = value?.[valueField]\n }\n\n var template = html`\n <ox-selector-resource-object\n .value=${actualValue}\n .confirmCallback=${confirmCallback}\n .queryName=${queryName}\n .columns=${select}\n .list=${list}\n .basicArgs=${basicArgs}\n .valueField=${valueField}\n ></ox-selector-resource-object>\n `\n\n const popup = openPopup(template, {\n backdrop: true,\n size: 'large',\n search: {\n autofocus: true,\n placeholder: title || i18next.t('title.select_item'),\n handler: (instance: any, value: any) => {\n /* instance: template instance */\n instance.searchText(value)\n }\n },\n filter: {\n handler: (instance: any) => {\n /* instance: template instance */\n instance.toggleFilter()\n }\n }\n })\n}\n\nexport const FilterResourceSelect: FilterSelectRenderer = (column, value, owner: any) => {\n const filter = column.filter as FilterConfigObject\n const { operator = 'like' } = filter\n var { idField = 'id', nameField = 'name', descriptionField = 'description' } = column.record.options || {};\n const hideValue = value ? value[idField] : '';\n const text = value ? value[nameField] : '';\n\n return operator === 'like'\n ? html` <input\n type=\"text\"\n name=${column.name}\n .value=${text}\n @change=${(e: CustomEvent) => {\n const input = e.target as HTMLInputElement\n input.dispatchEvent(\n new CustomEvent('filter-change', {\n bubbles: true,\n composed: true,\n detail: {\n name: column.name,\n operator,\n value: input.value\n }\n })\n )\n }}\n />`\n : operator == 'in'\n ? html``\n : operator === 'eq'\n ? html`\n <input name='${column.name}' .value=${hideValue} type=\"text\" hidden></input>\n <input\n type=\"text\"\n name='${column.name}_disp'\n .value=${text}\n readonly\n @click=${(e: Event) => {\n e.stopPropagation()\n\n const input = e.target as HTMLInputElement;\n\n const confirmCallback = (selected?: { [field: string]: any }) => {\n let disp = selected ? selected[idField] : '';\n\n if(selected && nameField){\n disp = selected[nameField];\n }\n\n input.value = disp;\n\n let codeInput = owner.tagName.toLowerCase() == 'ox-grid-header' \n ? owner.renderRoot.querySelector(`[name=\"${column.name}\"]`)\n : owner.renderRoot.querySelector(`form [name=\"${column.name}\"]`);\n\n const objectValue = selected ? selected[idField] : '';\n codeInput.value = objectValue;\n\n input.dispatchEvent(new Event('change', { bubbles: true }))\n\n owner.dispatchEvent(\n new CustomEvent('filter-change', {\n bubbles: true,\n composed: true,\n detail: {\n name: column.name,\n operator,\n value: objectValue\n }\n })\n )\n }\n\n openResourceSelector(column, value, confirmCallback)\n }}\n />\n `\n : html``\n}\n"]}
@@ -1,4 +1,4 @@
1
1
  import '@operato/input/ox-checkbox.js';
2
- import '../selector/ox-selector-resource-id';
2
+ import '../selector/ox-selector-resource-object';
3
3
  import { FilterSelectRenderer } from '@operato/form';
4
4
  export declare const FilterResourceSelect: FilterSelectRenderer;
@@ -1,10 +1,10 @@
1
1
  import '@operato/input/ox-checkbox.js';
2
- import '../selector/ox-selector-resource-id';
2
+ import '../selector/ox-selector-resource-object';
3
3
  import { html } from 'lit-html';
4
4
  import { i18next } from '@operato/i18n';
5
5
  import { openPopup } from '@operato/layout';
6
6
  function openResourceSelector(filter, value, confirmCallback) {
7
- const { queryName, select, list, basicArgs, valueField = 'id' } = filter.options || {};
7
+ const { queryName, select, list, basicArgs, valueField = 'id', title } = filter.options || {};
8
8
  var actualValue;
9
9
  if (typeof valueField === 'function') {
10
10
  actualValue = valueField(value);
@@ -13,29 +13,45 @@ function openResourceSelector(filter, value, confirmCallback) {
13
13
  actualValue = value === null || value === void 0 ? void 0 : value[valueField];
14
14
  }
15
15
  var template = html `
16
- <ox-selector-resource-id
16
+ <ox-selector-resource-object
17
17
  .value=${actualValue}
18
18
  .confirmCallback=${confirmCallback}
19
19
  .queryName=${queryName}
20
- .select=${select}
20
+ .columns=${select}
21
21
  .list=${list}
22
22
  .basicArgs=${basicArgs}
23
23
  .valueField=${valueField}
24
- ></ox-selector-resource-id>
24
+ ></ox-selector-resource-object>
25
25
  `;
26
26
  const popup = openPopup(template, {
27
27
  backdrop: true,
28
28
  size: 'large',
29
- title: i18next.t('title.select_item')
29
+ search: {
30
+ autofocus: true,
31
+ placeholder: title || i18next.t('title.select_item'),
32
+ handler: (instance, value) => {
33
+ /* instance: template instance */
34
+ instance.searchText(value);
35
+ }
36
+ },
37
+ filter: {
38
+ handler: (instance) => {
39
+ /* instance: template instance */
40
+ instance.toggleFilter();
41
+ }
42
+ }
30
43
  });
31
44
  }
32
45
  export const FilterResourceSelect = (filter, value, owner) => {
33
46
  const { name, operator = 'like' } = filter;
47
+ var { idField = 'id', nameField = 'name', descriptionField = 'description' } = filter.options || {};
48
+ const hideValue = value ? value[idField] : '';
49
+ const text = value ? value[nameField] : '';
34
50
  return operator === 'like'
35
51
  ? html ` <input
36
52
  type="text"
37
53
  name=${name}
38
- .value=${value}
54
+ .value=${text}
39
55
  @change=${(e) => {
40
56
  const input = e.target;
41
57
  input.dispatchEvent(new CustomEvent('filter-change', {
@@ -53,20 +69,35 @@ export const FilterResourceSelect = (filter, value, owner) => {
53
69
  ? html ``
54
70
  : operator === 'eq'
55
71
  ? html `
56
- <input
57
- style="min-width: 100px; min-height: 24px"
72
+ <input name='${name}' .value=${hideValue} type="text" hidden></input>
73
+ <input
58
74
  type="text"
59
- name=${name}
60
- .value=${value}
75
+ name='${name}_disp'
76
+ .value=${text}
61
77
  readonly
62
78
  @click=${(e) => {
63
79
  e.stopPropagation();
80
+ const input = e.target;
64
81
  const confirmCallback = (selected) => {
65
- var { idField = 'id', nameField = 'name', descriptionField = 'description' } = filter.options || {};
82
+ let disp = selected ? selected[idField] : '';
83
+ if (selected && nameField) {
84
+ disp = selected[nameField];
85
+ }
86
+ input.value = disp;
87
+ let codeInput = owner.tagName.toLowerCase() == 'ox-grid-header'
88
+ ? owner.renderRoot.querySelector(`[name="${name}"]`)
89
+ : owner.renderRoot.querySelector(`form [name="${name}"]`);
90
+ const objectValue = selected ? selected[idField] : '';
91
+ codeInput.value = objectValue;
92
+ input.dispatchEvent(new Event('change', { bubbles: true }));
66
93
  owner.dispatchEvent(new CustomEvent('filter-change', {
67
94
  bubbles: true,
68
95
  composed: true,
69
- detail: selected ? selected[idField] : ''
96
+ detail: {
97
+ name: name,
98
+ operator,
99
+ value: objectValue
100
+ }
70
101
  }));
71
102
  };
72
103
  openResourceSelector(filter, value, confirmCallback);
@@ -1 +1 @@
1
- {"version":3,"file":"filter-resource-select.js","sourceRoot":"","sources":["../../../src/filters-form/filter-resource-select.ts"],"names":[],"mappings":"AAAA,OAAO,+BAA+B,CAAA;AACtC,OAAO,qCAAqC,CAAA;AAE5C,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAA;AAG/B,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AACvC,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAI3C,SAAS,oBAAoB,CAAC,MAAoB,EAAE,KAAU,EAAE,eAAiC;IAC/F,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,UAAU,GAAG,IAAI,EAAE,GAAG,MAAM,CAAC,OAAO,IAAI,EAAE,CAAA;IAEtF,IAAI,WAAW,CAAA;IACf,IAAI,OAAO,UAAU,KAAK,UAAU,EAAE;QACpC,WAAW,GAAG,UAAU,CAAC,KAAK,CAAC,CAAA;KAChC;SAAM;QACL,WAAW,GAAG,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAG,UAAU,CAAC,CAAA;KAClC;IAED,IAAI,QAAQ,GAAG,IAAI,CAAA;;eAEN,WAAW;yBACD,eAAe;mBACrB,SAAS;gBACZ,MAAM;cACR,IAAI;mBACC,SAAS;oBACR,UAAU;;GAE3B,CAAA;IAED,MAAM,KAAK,GAAG,SAAS,CAAC,QAAQ,EAAE;QAChC,QAAQ,EAAE,IAAI;QACd,IAAI,EAAE,OAAO;QACb,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,mBAAmB,CAAC;KACtC,CAAC,CAAA;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,oBAAoB,GAAyB,CAAC,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE;IACjF,MAAM,EAAE,IAAI,EAAE,QAAQ,GAAG,MAAM,EAAE,GAAG,MAAM,CAAA;IAE1C,OAAO,QAAQ,KAAK,MAAM;QACxB,CAAC,CAAC,IAAI,CAAA;;eAEK,IAAI;iBACF,KAAK;kBACJ,CAAC,CAAc,EAAE,EAAE;YAC3B,MAAM,KAAK,GAAG,CAAC,CAAC,MAA0B,CAAA;YAC1C,KAAK,CAAC,aAAa,CACjB,IAAI,WAAW,CAAC,eAAe,EAAE;gBAC/B,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,IAAI;gBACd,MAAM,EAAE;oBACN,IAAI;oBACJ,QAAQ;oBACR,KAAK,EAAE,KAAK,CAAC,KAAK;iBACnB;aACF,CAAC,CACH,CAAA;QACH,CAAC;SACA;QACL,CAAC,CAAC,QAAQ,IAAI,IAAI;YAClB,CAAC,CAAC,IAAI,CAAA,EAAE;YACR,CAAC,CAAC,QAAQ,KAAK,IAAI;gBACnB,CAAC,CAAC,IAAI,CAAA;;;;iBAIO,IAAI;mBACF,KAAK;;mBAEL,CAAC,CAAQ,EAAE,EAAE;oBACpB,CAAC,CAAC,eAAe,EAAE,CAAA;oBAEnB,MAAM,eAAe,GAAG,CAAC,QAAmC,EAAE,EAAE;wBAC9D,IAAI,EAAE,OAAO,GAAG,IAAI,EAAE,SAAS,GAAG,MAAM,EAAE,gBAAgB,GAAG,aAAa,EAAE,GAAG,MAAM,CAAC,OAAO,IAAI,EAAE,CAAA;wBAEnG,KAAK,CAAC,aAAa,CACjB,IAAI,WAAW,CAAC,eAAe,EAAE;4BAC/B,OAAO,EAAE,IAAI;4BACb,QAAQ,EAAE,IAAI;4BACd,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE;yBAC1C,CAAC,CACH,CAAA;oBACH,CAAC,CAAA;oBAED,oBAAoB,CAAC,MAAM,EAAE,KAAK,EAAE,eAAe,CAAC,CAAA;gBACtD,CAAC;;OAEJ;gBACH,CAAC,CAAC,IAAI,CAAA,EAAE,CAAA;AACZ,CAAC,CAAA","sourcesContent":["import '@operato/input/ox-checkbox.js'\nimport '../selector/ox-selector-resource-id'\n\nimport { html } from 'lit-html'\n\nimport { FilterConfig, FilterSelectRenderer } from '@operato/form'\nimport { i18next } from '@operato/i18n'\nimport { openPopup } from '@operato/layout'\n\ntype SelectedCallback = (value: { id: string; name: string; description: string }) => void\n\nfunction openResourceSelector(filter: FilterConfig, value: any, confirmCallback: SelectedCallback) {\n const { queryName, select, list, basicArgs, valueField = 'id' } = filter.options || {}\n\n var actualValue\n if (typeof valueField === 'function') {\n actualValue = valueField(value)\n } else {\n actualValue = value?.[valueField]\n }\n\n var template = html`\n <ox-selector-resource-id\n .value=${actualValue}\n .confirmCallback=${confirmCallback}\n .queryName=${queryName}\n .select=${select}\n .list=${list}\n .basicArgs=${basicArgs}\n .valueField=${valueField}\n ></ox-selector-resource-id>\n `\n\n const popup = openPopup(template, {\n backdrop: true,\n size: 'large',\n title: i18next.t('title.select_item')\n })\n}\n\nexport const FilterResourceSelect: FilterSelectRenderer = (filter, value, owner) => {\n const { name, operator = 'like' } = filter\n\n return operator === 'like'\n ? html` <input\n type=\"text\"\n name=${name}\n .value=${value}\n @change=${(e: CustomEvent) => {\n const input = e.target as HTMLInputElement\n input.dispatchEvent(\n new CustomEvent('filter-change', {\n bubbles: true,\n composed: true,\n detail: {\n name,\n operator,\n value: input.value\n }\n })\n )\n }}\n />`\n : operator == 'in'\n ? html``\n : operator === 'eq'\n ? html`\n <input\n style=\"min-width: 100px; min-height: 24px\"\n type=\"text\"\n name=${name}\n .value=${value}\n readonly\n @click=${(e: Event) => {\n e.stopPropagation()\n\n const confirmCallback = (selected?: { [field: string]: any }) => {\n var { idField = 'id', nameField = 'name', descriptionField = 'description' } = filter.options || {}\n\n owner.dispatchEvent(\n new CustomEvent('filter-change', {\n bubbles: true,\n composed: true,\n detail: selected ? selected[idField] : ''\n })\n )\n }\n\n openResourceSelector(filter, value, confirmCallback)\n }}\n />\n `\n : html``\n}\n"]}
1
+ {"version":3,"file":"filter-resource-select.js","sourceRoot":"","sources":["../../../src/filters-form/filter-resource-select.ts"],"names":[],"mappings":"AAAA,OAAO,+BAA+B,CAAA;AACtC,OAAO,yCAAyC,CAAA;AAEhD,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAA;AAG/B,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AACvC,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAI3C,SAAS,oBAAoB,CAAC,MAAoB,EAAE,KAAU,EAAE,eAAiC;IAC/F,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,UAAU,GAAG,IAAI,EAAE,KAAK,EAAE,GAAG,MAAM,CAAC,OAAO,IAAI,EAAE,CAAA;IAE7F,IAAI,WAAW,CAAA;IACf,IAAI,OAAO,UAAU,KAAK,UAAU,EAAE;QACpC,WAAW,GAAG,UAAU,CAAC,KAAK,CAAC,CAAA;KAChC;SAAM;QACL,WAAW,GAAG,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAG,UAAU,CAAC,CAAA;KAClC;IAED,IAAI,QAAQ,GAAG,IAAI,CAAA;;eAEN,WAAW;yBACD,eAAe;mBACrB,SAAS;iBACX,MAAM;cACT,IAAI;mBACC,SAAS;oBACR,UAAU;;GAE3B,CAAA;IAED,MAAM,KAAK,GAAG,SAAS,CAAC,QAAQ,EAAE;QAChC,QAAQ,EAAE,IAAI;QACd,IAAI,EAAE,OAAO;QACb,MAAM,EAAE;YACN,SAAS,EAAE,IAAI;YACf,WAAW,EAAE,KAAK,IAAI,OAAO,CAAC,CAAC,CAAC,mBAAmB,CAAC;YACpD,OAAO,EAAE,CAAC,QAAa,EAAE,KAAU,EAAE,EAAE;gBACrC,iCAAiC;gBACjC,QAAQ,CAAC,UAAU,CAAC,KAAK,CAAC,CAAA;YAC5B,CAAC;SACF;QACD,MAAM,EAAE;YACN,OAAO,EAAE,CAAC,QAAa,EAAE,EAAE;gBACzB,iCAAiC;gBACjC,QAAQ,CAAC,YAAY,EAAE,CAAA;YACzB,CAAC;SACF;KACF,CAAC,CAAA;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,oBAAoB,GAAyB,CAAC,MAAM,EAAE,KAAK,EAAE,KAAU,EAAE,EAAE;IACtF,MAAM,EAAE,IAAI,EAAE,QAAQ,GAAG,MAAM,EAAE,GAAG,MAAM,CAAA;IAC1C,IAAI,EAAE,OAAO,GAAG,IAAI,EAAE,SAAS,GAAG,MAAM,EAAE,gBAAgB,GAAG,aAAa,EAAE,GAAG,MAAM,CAAC,OAAO,IAAI,EAAE,CAAC;IACpG,MAAM,SAAS,GAAG,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IAC9C,MAAM,IAAI,GAAG,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IAE3C,OAAO,QAAQ,KAAK,MAAM;QACxB,CAAC,CAAC,IAAI,CAAA;;eAEK,IAAI;iBACF,IAAI;kBACH,CAAC,CAAc,EAAE,EAAE;YAC3B,MAAM,KAAK,GAAG,CAAC,CAAC,MAA0B,CAAA;YAC1C,KAAK,CAAC,aAAa,CACjB,IAAI,WAAW,CAAC,eAAe,EAAE;gBAC/B,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,IAAI;gBACd,MAAM,EAAE;oBACN,IAAI;oBACJ,QAAQ;oBACR,KAAK,EAAE,KAAK,CAAC,KAAK;iBACnB;aACF,CAAC,CACH,CAAA;QACH,CAAC;SACA;QACL,CAAC,CAAC,QAAQ,IAAI,IAAI;YAClB,CAAC,CAAC,IAAI,CAAA,EAAE;YACR,CAAC,CAAC,QAAQ,KAAK,IAAI;gBACnB,CAAC,CAAC,IAAI,CAAA;uBACa,IAAI,YAAY,SAAS;;;kBAG9B,IAAI;mBACH,IAAI;;mBAEJ,CAAC,CAAQ,EAAE,EAAE;oBACpB,CAAC,CAAC,eAAe,EAAE,CAAA;oBACnB,MAAM,KAAK,GAAG,CAAC,CAAC,MAA0B,CAAC;oBAE3C,MAAM,eAAe,GAAG,CAAC,QAAmC,EAAE,EAAE;wBAC9D,IAAI,IAAI,GAAG,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;wBAE7C,IAAG,QAAQ,IAAI,SAAS,EAAC;4BACvB,IAAI,GAAG,QAAQ,CAAC,SAAS,CAAC,CAAC;yBAC5B;wBACD,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC;wBAEnB,IAAI,SAAS,GAAG,KAAK,CAAC,OAAO,CAAC,WAAW,EAAE,IAAI,gBAAgB;4BACjD,CAAC,CAAC,KAAK,CAAC,UAAU,CAAC,aAAa,CAAC,UAAU,IAAI,IAAI,CAAC;4BACpD,CAAC,CAAC,KAAK,CAAC,UAAU,CAAC,aAAa,CAAC,eAAe,IAAI,IAAI,CAAC,CAAC;wBAExE,MAAM,WAAW,GAAG,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;wBACtD,SAAS,CAAC,KAAK,GAAG,WAAW,CAAC;wBAE9B,KAAK,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;wBAE3D,KAAK,CAAC,aAAa,CACjB,IAAI,WAAW,CAAC,eAAe,EAAE;4BAC/B,OAAO,EAAE,IAAI;4BACb,QAAQ,EAAE,IAAI;4BACd,MAAM,EAAE;gCACN,IAAI,EAAE,IAAI;gCACV,QAAQ;gCACR,KAAK,EAAE,WAAW;6BACnB;yBACF,CAAC,CACH,CAAA;oBACH,CAAC,CAAA;oBAED,oBAAoB,CAAC,MAAM,EAAE,KAAK,EAAE,eAAe,CAAC,CAAA;gBACtD,CAAC;;OAEJ;gBACH,CAAC,CAAC,IAAI,CAAA,EAAE,CAAA;AACZ,CAAC,CAAA","sourcesContent":["import '@operato/input/ox-checkbox.js'\nimport '../selector/ox-selector-resource-object'\n\nimport { html } from 'lit-html'\n\nimport { FilterConfig, FilterSelectRenderer } from '@operato/form'\nimport { i18next } from '@operato/i18n'\nimport { openPopup } from '@operato/layout'\n\ntype SelectedCallback = (value: { id: string; name: string; description: string }) => void\n\nfunction openResourceSelector(filter: FilterConfig, value: any, confirmCallback: SelectedCallback) {\n const { queryName, select, list, basicArgs, valueField = 'id', title } = filter.options || {}\n\n var actualValue\n if (typeof valueField === 'function') {\n actualValue = valueField(value)\n } else {\n actualValue = value?.[valueField]\n }\n\n var template = html`\n <ox-selector-resource-object\n .value=${actualValue}\n .confirmCallback=${confirmCallback}\n .queryName=${queryName}\n .columns=${select}\n .list=${list}\n .basicArgs=${basicArgs}\n .valueField=${valueField}\n ></ox-selector-resource-object>\n `\n\n const popup = openPopup(template, {\n backdrop: true,\n size: 'large',\n search: {\n autofocus: true,\n placeholder: title || i18next.t('title.select_item'),\n handler: (instance: any, value: any) => {\n /* instance: template instance */\n instance.searchText(value)\n }\n },\n filter: {\n handler: (instance: any) => {\n /* instance: template instance */\n instance.toggleFilter()\n }\n }\n })\n}\n\nexport const FilterResourceSelect: FilterSelectRenderer = (filter, value, owner: any) => {\n const { name, operator = 'like' } = filter\n var { idField = 'id', nameField = 'name', descriptionField = 'description' } = filter.options || {};\n const hideValue = value ? value[idField] : '';\n const text = value ? value[nameField] : '';\n\n return operator === 'like'\n ? html` <input\n type=\"text\"\n name=${name}\n .value=${text}\n @change=${(e: CustomEvent) => {\n const input = e.target as HTMLInputElement\n input.dispatchEvent(\n new CustomEvent('filter-change', {\n bubbles: true,\n composed: true,\n detail: {\n name,\n operator,\n value: input.value\n }\n })\n )\n }}\n />`\n : operator == 'in'\n ? html``\n : operator === 'eq'\n ? html`\n <input name='${name}' .value=${hideValue} type=\"text\" hidden></input>\n <input \n type=\"text\"\n name='${name}_disp'\n .value=${text}\n readonly\n @click=${(e: Event) => {\n e.stopPropagation()\n const input = e.target as HTMLInputElement;\n\n const confirmCallback = (selected?: { [field: string]: any }) => {\n let disp = selected ? selected[idField] : '';\n\n if(selected && nameField){\n disp = selected[nameField];\n }\n input.value = disp;\n\n let codeInput = owner.tagName.toLowerCase() == 'ox-grid-header' \n ? owner.renderRoot.querySelector(`[name=\"${name}\"]`)\n : owner.renderRoot.querySelector(`form [name=\"${name}\"]`);\n\n const objectValue = selected ? selected[idField] : '';\n codeInput.value = objectValue;\n\n input.dispatchEvent(new Event('change', { bubbles: true }))\n\n owner.dispatchEvent(\n new CustomEvent('filter-change', {\n bubbles: true,\n composed: true,\n detail: {\n name: name,\n operator,\n value: objectValue\n }\n })\n )\n }\n\n openResourceSelector(filter, value, confirmCallback)\n }}\n />\n `\n : html``\n}\n"]}