@operato/app 1.19.10 → 1.19.13
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 +18 -0
- package/dist/src/filters-form/filter-code-select.d.ts +3 -0
- package/dist/src/filters-form/filter-code-select.js +6 -0
- package/dist/src/filters-form/filter-code-select.js.map +1 -0
- package/dist/src/filters-form/index.js +3 -0
- package/dist/src/filters-form/index.js.map +1 -1
- package/dist/src/filters-form/ox-input-code-filter.d.ts +17 -0
- package/dist/src/filters-form/ox-input-code-filter.js +137 -0
- package/dist/src/filters-form/ox-input-code-filter.js.map +1 -0
- package/dist/src/input/ox-input-graphql.js +10 -18
- package/dist/src/input/ox-input-graphql.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +18 -9
- package/src/filters-form/filter-code-select.ts +9 -0
- package/src/filters-form/index.ts +3 -0
- package/src/filters-form/ox-input-code-filter.ts +154 -0
- package/src/input/ox-input-graphql.ts +11 -19
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,24 @@
|
|
|
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.19.13](https://github.com/hatiolab/operato/compare/v1.19.12...v1.19.13) (2025-01-10)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### :bug: Bug Fix
|
|
10
|
+
|
|
11
|
+
* [@graphql-tools](https://github.com/graphql-tools) update for ox-input-graphql ([67af3db](https://github.com/hatiolab/operato/commit/67af3db7b25ff07a384531209c39fb7dbb431c81))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
### [1.19.12](https://github.com/hatiolab/operato/compare/v1.19.11...v1.19.12) (2024-10-22)
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
### :bug: Bug Fix
|
|
19
|
+
|
|
20
|
+
* ox-input-code-filter ([d5c105f](https://github.com/hatiolab/operato/commit/d5c105f6f82d23b350f4ebb46ebb5082e7429912))
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
|
|
6
24
|
### [1.19.10](https://github.com/hatiolab/operato/compare/v1.19.9...v1.19.10) (2024-09-10)
|
|
7
25
|
|
|
8
26
|
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import './ox-input-code-filter.js';
|
|
2
|
+
import { html } from 'lit-html';
|
|
3
|
+
export const FilterCodeSelect = (column, value, owner) => {
|
|
4
|
+
return html ` <ox-input-code-filter name=${column === null || column === void 0 ? void 0 : column.name} .column=${column} .value=${value}></ox-input-code-filter> `;
|
|
5
|
+
};
|
|
6
|
+
//# sourceMappingURL=filter-code-select.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"filter-code-select.js","sourceRoot":"","sources":["../../../src/filters-form/filter-code-select.ts"],"names":[],"mappings":"AAAA,OAAO,2BAA2B,CAAA;AAElC,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAA;AAI/B,MAAM,CAAC,MAAM,gBAAgB,GAAyB,CAAC,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE;IAC7E,OAAO,IAAI,CAAA,+BAA+B,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,YAAY,MAAM,WAAW,KAAK,2BAA2B,CAAA;AACrH,CAAC,CAAA","sourcesContent":["import './ox-input-code-filter.js'\n\nimport { html } from 'lit-html'\n\nimport { FilterSelectRenderer } from '@operato/data-grist'\n\nexport const FilterCodeSelect: FilterSelectRenderer = (column, value, owner) => {\n return html` <ox-input-code-filter name=${column?.name} .column=${column} .value=${value}></ox-input-code-filter> `\n}\n"]}
|
|
@@ -1,5 +1,8 @@
|
|
|
1
1
|
import { registerFilterRenderer } from '@operato/form';
|
|
2
|
+
import { registerFilterRenderer as dataGristFiltersRenderer } from '@operato/data-grist';
|
|
2
3
|
import { FilterResourceSelect } from './filter-resource-select.js';
|
|
4
|
+
import { FilterCodeSelect } from './filter-code-select.js';
|
|
3
5
|
registerFilterRenderer('resource-object', [FilterResourceSelect]);
|
|
4
6
|
registerFilterRenderer('resource-id', [FilterResourceSelect]);
|
|
7
|
+
dataGristFiltersRenderer('code', [FilterCodeSelect]);
|
|
5
8
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/filters-form/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,eAAe,CAAA;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/filters-form/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,eAAe,CAAA;AACtD,OAAO,EAAE,sBAAsB,IAAI,wBAAwB,EAAE,MAAM,qBAAqB,CAAA;AAExF,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAA;AAClE,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAA;AAE1D,sBAAsB,CAAC,iBAAiB,EAAE,CAAC,oBAAoB,CAAC,CAAC,CAAA;AACjE,sBAAsB,CAAC,aAAa,EAAE,CAAC,oBAAoB,CAAC,CAAC,CAAA;AAC7D,wBAAwB,CAAC,MAAM,EAAE,CAAC,gBAAgB,CAAC,CAAC,CAAA","sourcesContent":["import { registerFilterRenderer } from '@operato/form'\nimport { registerFilterRenderer as dataGristFiltersRenderer } from '@operato/data-grist'\n\nimport { FilterResourceSelect } from './filter-resource-select.js'\nimport { FilterCodeSelect } from './filter-code-select.js'\n\nregisterFilterRenderer('resource-object', [FilterResourceSelect])\nregisterFilterRenderer('resource-id', [FilterResourceSelect])\ndataGristFiltersRenderer('code', [FilterCodeSelect])\n"]}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import '@operato/input/ox-select.js';
|
|
2
|
+
import { OxFormField } from '@operato/input';
|
|
3
|
+
type CommonCodeDetail = {
|
|
4
|
+
name: string;
|
|
5
|
+
description: string;
|
|
6
|
+
rank: number;
|
|
7
|
+
};
|
|
8
|
+
export declare class OxInputCodeFilter extends OxFormField {
|
|
9
|
+
static styles: import("lit").CSSResult;
|
|
10
|
+
column: any;
|
|
11
|
+
value?: string;
|
|
12
|
+
codes: CommonCodeDetail[];
|
|
13
|
+
render(): import("lit").TemplateResult<1>;
|
|
14
|
+
fetchCodes(): Promise<void>;
|
|
15
|
+
connectedCallback(): void;
|
|
16
|
+
}
|
|
17
|
+
export {};
|
|
@@ -0,0 +1,137 @@
|
|
|
1
|
+
import { __decorate } from "tslib";
|
|
2
|
+
import '@operato/input/ox-select.js';
|
|
3
|
+
import gql from 'graphql-tag';
|
|
4
|
+
import { css, html } from 'lit';
|
|
5
|
+
import { customElement, property, state } from 'lit/decorators.js';
|
|
6
|
+
import { i18next } from '@operato/i18n';
|
|
7
|
+
import { client, gqlContext } from '@operato/graphql';
|
|
8
|
+
import { OxFormField } from '@operato/input';
|
|
9
|
+
const FETCH_COMMON_CODE_GQL = (codeName) => gql `
|
|
10
|
+
{
|
|
11
|
+
commonCode(name: "${codeName}") {
|
|
12
|
+
details {
|
|
13
|
+
name
|
|
14
|
+
description
|
|
15
|
+
rank
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
`;
|
|
20
|
+
let OxInputCodeFilter = class OxInputCodeFilter extends OxFormField {
|
|
21
|
+
constructor() {
|
|
22
|
+
super(...arguments);
|
|
23
|
+
this.codes = [];
|
|
24
|
+
}
|
|
25
|
+
render() {
|
|
26
|
+
var _a, _b;
|
|
27
|
+
const { name, filter } = this.column;
|
|
28
|
+
const operator = filter.operator;
|
|
29
|
+
const { selectDispOpt = 'code-name' } = this.column.record || {};
|
|
30
|
+
if (!this.codes || this.codes.length === 0) {
|
|
31
|
+
return html `<p>Loading...</p>`;
|
|
32
|
+
}
|
|
33
|
+
return operator === 'in'
|
|
34
|
+
? html `
|
|
35
|
+
<ox-select
|
|
36
|
+
.value=${this.value}
|
|
37
|
+
@change=${(e) => {
|
|
38
|
+
let val = e.detail;
|
|
39
|
+
this.value = (val === null || val === void 0 ? void 0 : val.length) > 0 ? val : undefined;
|
|
40
|
+
this === null || this === void 0 ? void 0 : this.dispatchEvent(new CustomEvent('change', {
|
|
41
|
+
detail: {
|
|
42
|
+
name,
|
|
43
|
+
operator,
|
|
44
|
+
value: this.value
|
|
45
|
+
}
|
|
46
|
+
}));
|
|
47
|
+
}}
|
|
48
|
+
>
|
|
49
|
+
<ox-popup-list multiple attr-selected="checked" with-search align-left>
|
|
50
|
+
<ox-checkbox
|
|
51
|
+
checkAll
|
|
52
|
+
@click=${(e) => {
|
|
53
|
+
var _a;
|
|
54
|
+
const checked = e.target.checked;
|
|
55
|
+
const val = checked ? this.codes.map((code) => code.name) : [];
|
|
56
|
+
(_a = e.target) === null || _a === void 0 ? void 0 : _a.dispatchEvent(new CustomEvent('select', { bubbles: true, detail: val }));
|
|
57
|
+
}}
|
|
58
|
+
>${i18next.t('label.all')}</ox-checkbox
|
|
59
|
+
>
|
|
60
|
+
${(_a = this.codes) === null || _a === void 0 ? void 0 : _a.filter((code) => !!code.name).map((code) => html `
|
|
61
|
+
<ox-checkbox
|
|
62
|
+
option
|
|
63
|
+
value=${code.name}
|
|
64
|
+
@change=${(e) => {
|
|
65
|
+
const parent = e.target.parentElement;
|
|
66
|
+
const checkCnt = e.target.checked ? 1 : -1;
|
|
67
|
+
const checkedLen = parent.querySelectorAll('ox-checkbox[option][checked]').length + checkCnt;
|
|
68
|
+
parent.querySelector('ox-checkbox[checkAll]').checked =
|
|
69
|
+
this.codes.filter((code) => !!code.name).length === checkedLen;
|
|
70
|
+
}}
|
|
71
|
+
>${selectDispOpt.replace('name', code.description).replace('code', code.name)}</ox-checkbox
|
|
72
|
+
>
|
|
73
|
+
`)}
|
|
74
|
+
</ox-popup-list>
|
|
75
|
+
</ox-select>
|
|
76
|
+
`
|
|
77
|
+
: html `
|
|
78
|
+
<ox-select
|
|
79
|
+
.value=${this.value}
|
|
80
|
+
@change=${(e) => {
|
|
81
|
+
this.value = e.detail;
|
|
82
|
+
this.dispatchEvent(new CustomEvent('change', {
|
|
83
|
+
detail: {
|
|
84
|
+
name,
|
|
85
|
+
operator,
|
|
86
|
+
value: this.value
|
|
87
|
+
}
|
|
88
|
+
}));
|
|
89
|
+
}}
|
|
90
|
+
>
|
|
91
|
+
<ox-popup-list with-search>
|
|
92
|
+
<div option value=""> </div>
|
|
93
|
+
${(_b = this.codes) === null || _b === void 0 ? void 0 : _b.map((code) => html `
|
|
94
|
+
<div option value=${code.name}>
|
|
95
|
+
${selectDispOpt.replace('name', code.description).replace('code', code.name)}
|
|
96
|
+
</div>
|
|
97
|
+
`)}
|
|
98
|
+
</ox-popup-list>
|
|
99
|
+
</ox-select>
|
|
100
|
+
`;
|
|
101
|
+
}
|
|
102
|
+
async fetchCodes() {
|
|
103
|
+
var _a;
|
|
104
|
+
const { codeName } = this.column.record || {};
|
|
105
|
+
if (codeName) {
|
|
106
|
+
const response = await client.query({
|
|
107
|
+
query: FETCH_COMMON_CODE_GQL(codeName),
|
|
108
|
+
context: gqlContext()
|
|
109
|
+
});
|
|
110
|
+
this.codes = ((_a = response === null || response === void 0 ? void 0 : response.data) === null || _a === void 0 ? void 0 : _a.commonCode.details) || [];
|
|
111
|
+
this.requestUpdate();
|
|
112
|
+
}
|
|
113
|
+
}
|
|
114
|
+
connectedCallback() {
|
|
115
|
+
super.connectedCallback();
|
|
116
|
+
this.fetchCodes();
|
|
117
|
+
}
|
|
118
|
+
};
|
|
119
|
+
OxInputCodeFilter.styles = css `
|
|
120
|
+
:host {
|
|
121
|
+
min-width: 100px;
|
|
122
|
+
}
|
|
123
|
+
`;
|
|
124
|
+
__decorate([
|
|
125
|
+
property({ type: Object })
|
|
126
|
+
], OxInputCodeFilter.prototype, "column", void 0);
|
|
127
|
+
__decorate([
|
|
128
|
+
property({ type: String })
|
|
129
|
+
], OxInputCodeFilter.prototype, "value", void 0);
|
|
130
|
+
__decorate([
|
|
131
|
+
state()
|
|
132
|
+
], OxInputCodeFilter.prototype, "codes", void 0);
|
|
133
|
+
OxInputCodeFilter = __decorate([
|
|
134
|
+
customElement('ox-input-code-filter')
|
|
135
|
+
], OxInputCodeFilter);
|
|
136
|
+
export { OxInputCodeFilter };
|
|
137
|
+
//# sourceMappingURL=ox-input-code-filter.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ox-input-code-filter.js","sourceRoot":"","sources":["../../../src/filters-form/ox-input-code-filter.ts"],"names":[],"mappings":";AAAA,OAAO,6BAA6B,CAAA;AAEpC,OAAO,GAAG,MAAM,aAAa,CAAA;AAC7B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAElE,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AAEvC,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAA;AACrD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAQ5C,MAAM,qBAAqB,GAAG,CAAC,QAAgB,EAAE,EAAE,CAAC,GAAG,CAAA;;sBAEjC,QAAQ;;;;;;;;CAQ7B,CAAA;AAGM,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,WAAW;IAA3C;;QAUI,UAAK,GAAuB,EAAE,CAAA;IAiHzC,CAAC;IA/GC,MAAM;;QACJ,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,MAAM,CAAA;QACpC,MAAM,QAAQ,GAAI,MAA6B,CAAC,QAAQ,CAAA;QACxD,MAAM,EAAE,aAAa,GAAG,WAAW,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,MAAM,IAAI,EAAE,CAAA;QAEhE,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YAC3C,OAAO,IAAI,CAAA,mBAAmB,CAAA;QAChC,CAAC;QAED,OAAO,QAAQ,KAAK,IAAI;YACtB,CAAC,CAAC,IAAI,CAAA;;qBAES,IAAI,CAAC,KAAK;sBACT,CAAC,CAAc,EAAE,EAAE;gBAC3B,IAAI,GAAG,GAAG,CAAC,CAAC,MAAM,CAAA;gBAClB,IAAI,CAAC,KAAK,GAAG,CAAA,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,MAAM,IAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,SAAS,CAAA;gBAE9C,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,aAAa,CACjB,IAAI,WAAW,CAAC,QAAQ,EAAE;oBACxB,MAAM,EAAE;wBACN,IAAI;wBACJ,QAAQ;wBACR,KAAK,EAAE,IAAI,CAAC,KAAK;qBAClB;iBACF,CAAC,CACH,CAAA;YACH,CAAC;;;;;yBAKY,CAAC,CAAM,EAAE,EAAE;;gBAClB,MAAM,OAAO,GAAG,CAAC,CAAC,MAAM,CAAC,OAAO,CAAA;gBAChC,MAAM,GAAG,GAAG,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,KAAM,CAAC,GAAG,CAAC,CAAC,IAAsB,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAA;gBAEjF,MAAA,CAAC,CAAC,MAAM,0CAAE,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC,CAAC,CAAA;YACpF,CAAC;mBACE,OAAO,CAAC,CAAC,CAAC,WAAW,CAAC;;gBAEzB,MAAA,IAAI,CAAC,KAAK,0CACR,MAAM,CAAC,CAAC,IAAsB,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,EAC/C,GAAG,CACF,CAAC,IAAsB,EAAE,EAAE,CAAC,IAAI,CAAA;;;8BAGpB,IAAI,CAAC,IAAI;gCACP,CAAC,CAAM,EAAE,EAAE;gBACnB,MAAM,MAAM,GAAG,CAAC,CAAC,MAAM,CAAC,aAAa,CAAA;gBACrC,MAAM,QAAQ,GAAG,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;gBAC1C,MAAM,UAAU,GAAG,MAAM,CAAC,gBAAgB,CAAC,8BAA8B,CAAC,CAAC,MAAM,GAAG,QAAQ,CAAA;gBAE5F,MAAM,CAAC,aAAa,CAAC,uBAAuB,CAAC,CAAC,OAAO;oBACnD,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,IAAsB,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,MAAM,KAAK,UAAU,CAAA;YACpF,CAAC;yBACE,aAAa,CAAC,OAAO,CAAC,MAAM,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC,OAAO,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC;;mBAEhF,CACF;;;SAGR;YACH,CAAC,CAAC,IAAI,CAAA;;qBAES,IAAI,CAAC,KAAK;sBACT,CAAC,CAAc,EAAE,EAAE;gBAC3B,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,MAAM,CAAA;gBACrB,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,QAAQ,EAAE;oBACxB,MAAM,EAAE;wBACN,IAAI;wBACJ,QAAQ;wBACR,KAAK,EAAE,IAAI,CAAC,KAAK;qBAClB;iBACF,CAAC,CACH,CAAA;YACH,CAAC;;;;gBAIG,MAAA,IAAI,CAAC,KAAK,0CAAE,GAAG,CACf,CAAC,IAAsB,EAAE,EAAE,CAAC,IAAI,CAAA;sCACV,IAAI,CAAC,IAAI;sBACzB,aAAa,CAAC,OAAO,CAAC,MAAM,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC,OAAO,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC;;iBAE/E,CACF;;;SAGN,CAAA;IACP,CAAC;IAED,KAAK,CAAC,UAAU;;QACd,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,MAAM,IAAI,EAAE,CAAA;QAE7C,IAAI,QAAQ,EAAE,CAAC;YACb,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,KAAK,CAAC;gBAClC,KAAK,EAAE,qBAAqB,CAAC,QAAQ,CAAC;gBACtC,OAAO,EAAE,UAAU,EAAE;aACtB,CAAC,CAAA;YAEF,IAAI,CAAC,KAAK,GAAG,CAAA,MAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,IAAI,0CAAE,UAAU,CAAC,OAAO,KAAI,EAAE,CAAA;YAErD,IAAI,CAAC,aAAa,EAAE,CAAA;QACtB,CAAC;IACH,CAAC;IAED,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAA;QAEzB,IAAI,CAAC,UAAU,EAAE,CAAA;IACnB,CAAC;;AAzHM,wBAAM,GAAG,GAAG,CAAA;;;;GAIlB,AAJY,CAIZ;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDAAY;AACX;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDAAe;AAEjC;IAAR,KAAK,EAAE;gDAA+B;AAV5B,iBAAiB;IAD7B,aAAa,CAAC,sBAAsB,CAAC;GACzB,iBAAiB,CA2H7B","sourcesContent":["import '@operato/input/ox-select.js'\n\nimport gql from 'graphql-tag'\nimport { css, html } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { i18next } from '@operato/i18n'\nimport { FilterConfigObject } from '@operato/data-grist'\nimport { client, gqlContext } from '@operato/graphql'\nimport { OxFormField } from '@operato/input'\n\ntype CommonCodeDetail = {\n name: string\n description: string\n rank: number\n}\n\nconst FETCH_COMMON_CODE_GQL = (codeName: string) => gql`\n{\n commonCode(name: \"${codeName}\") {\n details {\n name\n description\n rank\n }\n }\n}\n`\n\n@customElement('ox-input-code-filter')\nexport class OxInputCodeFilter extends OxFormField {\n static styles = css`\n :host {\n min-width: 100px;\n }\n `\n\n @property({ type: Object }) column: any\n @property({ type: String }) value?: string\n\n @state() codes: CommonCodeDetail[] = []\n\n render() {\n const { name, filter } = this.column\n const operator = (filter as FilterConfigObject).operator\n const { selectDispOpt = 'code-name' } = this.column.record || {}\n\n if (!this.codes || this.codes.length === 0) {\n return html`<p>Loading...</p>`\n }\n\n return operator === 'in'\n ? html`\n <ox-select\n .value=${this.value}\n @change=${(e: CustomEvent) => {\n let val = e.detail\n this.value = val?.length > 0 ? val : undefined\n\n this?.dispatchEvent(\n new CustomEvent('change', {\n detail: {\n name,\n operator,\n value: this.value\n }\n })\n )\n }}\n >\n <ox-popup-list multiple attr-selected=\"checked\" with-search align-left>\n <ox-checkbox\n checkAll\n @click=${(e: any) => {\n const checked = e.target.checked\n const val = checked ? this.codes!.map((code: CommonCodeDetail) => code.name) : []\n\n e.target?.dispatchEvent(new CustomEvent('select', { bubbles: true, detail: val }))\n }}\n >${i18next.t('label.all')}</ox-checkbox\n >\n ${this.codes\n ?.filter((code: CommonCodeDetail) => !!code.name)\n .map(\n (code: CommonCodeDetail) => html`\n <ox-checkbox\n option\n value=${code.name}\n @change=${(e: any) => {\n const parent = e.target.parentElement\n const checkCnt = e.target.checked ? 1 : -1\n const checkedLen = parent.querySelectorAll('ox-checkbox[option][checked]').length + checkCnt\n\n parent.querySelector('ox-checkbox[checkAll]').checked =\n this.codes.filter((code: CommonCodeDetail) => !!code.name).length === checkedLen\n }}\n >${selectDispOpt.replace('name', code.description).replace('code', code.name)}</ox-checkbox\n >\n `\n )}\n </ox-popup-list>\n </ox-select>\n `\n : html`\n <ox-select\n .value=${this.value}\n @change=${(e: CustomEvent) => {\n this.value = e.detail\n this.dispatchEvent(\n new CustomEvent('change', {\n detail: {\n name,\n operator,\n value: this.value\n }\n })\n )\n }}\n >\n <ox-popup-list with-search>\n <div option value=\"\"> </div>\n ${this.codes?.map(\n (code: CommonCodeDetail) => html`\n <div option value=${code.name}>\n ${selectDispOpt.replace('name', code.description).replace('code', code.name)}\n </div>\n `\n )}\n </ox-popup-list>\n </ox-select>\n `\n }\n\n async fetchCodes() {\n const { codeName } = this.column.record || {}\n\n if (codeName) {\n const response = await client.query({\n query: FETCH_COMMON_CODE_GQL(codeName),\n context: gqlContext()\n })\n\n this.codes = response?.data?.commonCode.details || []\n\n this.requestUpdate()\n }\n }\n\n connectedCallback() {\n super.connectedCallback()\n\n this.fetchCodes()\n }\n}\n"]}
|
|
@@ -2,8 +2,6 @@
|
|
|
2
2
|
* @license Copyright © HatioLab Inc. All rights reserved.
|
|
3
3
|
*/
|
|
4
4
|
import { __decorate } from "tslib";
|
|
5
|
-
import { fetch } from 'cross-fetch';
|
|
6
|
-
import { print } from 'graphql';
|
|
7
5
|
import { css } from 'lit';
|
|
8
6
|
import { customElement, property } from 'lit/decorators.js';
|
|
9
7
|
import { graphql } from 'cm6-graphql';
|
|
@@ -12,7 +10,9 @@ import { autocompletion, closeBrackets } from '@codemirror/autocomplete';
|
|
|
12
10
|
import { bracketMatching, syntaxHighlighting } from '@codemirror/language';
|
|
13
11
|
import { oneDarkHighlightStyle, oneDark } from '@codemirror/theme-one-dark';
|
|
14
12
|
import { EditorView, highlightActiveLine, keymap } from '@codemirror/view';
|
|
15
|
-
import {
|
|
13
|
+
import { makeExecutableSchema } from '@graphql-tools/schema';
|
|
14
|
+
import { loadSchema } from '@graphql-tools/load';
|
|
15
|
+
import { UrlLoader } from '@graphql-tools/url-loader';
|
|
16
16
|
import { GRAPHQL_URI } from '@operato/graphql';
|
|
17
17
|
import { OxFormField } from '@operato/input';
|
|
18
18
|
import { togglefullscreen } from '@operato/utils';
|
|
@@ -40,22 +40,14 @@ let OxInputGraphql = class OxInputGraphql extends OxFormField {
|
|
|
40
40
|
}
|
|
41
41
|
}
|
|
42
42
|
async getSchema() {
|
|
43
|
-
const
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
'Content-Type': 'application/json'
|
|
50
|
-
},
|
|
51
|
-
body: JSON.stringify({ query, variables })
|
|
52
|
-
});
|
|
53
|
-
return fetchResult.json();
|
|
54
|
-
};
|
|
55
|
-
return await wrapSchema({
|
|
56
|
-
schema: await introspectSchema(executor),
|
|
57
|
-
executor
|
|
43
|
+
const uri = this.link || GRAPHQL_URI;
|
|
44
|
+
const schema = await loadSchema(uri, {
|
|
45
|
+
loaders: [new UrlLoader()],
|
|
46
|
+
headers: {
|
|
47
|
+
'Content-Type': 'application/json'
|
|
48
|
+
}
|
|
58
49
|
});
|
|
50
|
+
return makeExecutableSchema({ typeDefs: schema, resolvers: {} });
|
|
59
51
|
}
|
|
60
52
|
async getEditor() {
|
|
61
53
|
if (!this._editor) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-input-graphql.js","sourceRoot":"","sources":["../../../src/input/ox-input-graphql.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"ox-input-graphql.js","sourceRoot":"","sources":["../../../src/input/ox-input-graphql.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { css, html, PropertyValues } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport { graphql } from 'cm6-graphql'\n\nimport { history, historyKeymap, indentWithTab } from '@codemirror/commands'\nimport { autocompletion, closeBrackets } from '@codemirror/autocomplete'\nimport { bracketMatching, syntaxHighlighting } from '@codemirror/language'\nimport { oneDarkHighlightStyle, oneDark } from '@codemirror/theme-one-dark'\nimport { EditorView, highlightActiveLine, keymap } from '@codemirror/view'\n\nimport { makeExecutableSchema } from '@graphql-tools/schema'\nimport { loadSchema } from '@graphql-tools/load'\nimport { UrlLoader } from '@graphql-tools/url-loader'\nimport { GRAPHQL_URI } from '@operato/graphql'\nimport { OxFormField } from '@operato/input'\nimport { togglefullscreen } from '@operato/utils'\n\n/**\n WEB Component for code-mirror graphql editor.\n \n Example:\n \n <ox-input-graphql value=${text} link=${link}>\n </ox-input-graphql>\n */\n@customElement('ox-input-graphql')\nexport default class OxInputGraphql extends OxFormField {\n static styles = [\n css`\n :host {\n display: flex;\n flex-direction: column;\n position: relative;\n background: white;\n overflow: auto;\n }\n\n .cm-editor {\n flex: 1;\n }\n `\n ]\n\n /**\n * `value`는 에디터에서 작성중인 contents이다.\n */\n @property({ type: String }) value?: string\n @property({ type: String }) link?: string\n\n private _self_changing: boolean = false\n private _editor?: EditorView\n private _changed: boolean = false\n\n async updated(changes: PropertyValues<this>) {\n const editor = await this.getEditor()\n if (changes.has('value') && editor && !this._self_changing) {\n const to = editor.state.doc.toString().length\n editor.dispatch({\n changes: { from: 0, to, insert: this.value === undefined ? '' : String(this.value) }\n })\n }\n }\n\n async getSchema() {\n const uri = this.link || GRAPHQL_URI\n\n const schema = await loadSchema(uri, {\n loaders: [new UrlLoader()],\n headers: {\n 'Content-Type': 'application/json'\n }\n })\n\n return makeExecutableSchema({ typeDefs: schema, resolvers: {} })\n }\n\n async getEditor() {\n if (!this._editor) {\n var schema\n try {\n schema = await this.getSchema()\n } catch (err) {\n console.error(err)\n }\n\n this._editor = new EditorView({\n doc: this.value,\n extensions: [\n bracketMatching(),\n closeBrackets(),\n history(),\n autocompletion(),\n oneDark,\n syntaxHighlighting(oneDarkHighlightStyle),\n graphql(schema, {\n onShowInDocs(field, type, parentType) {\n alert(`Showing in docs.: Field: ${field}, Type: ${type}, ParentType: ${parentType}`)\n },\n onFillAllFields(view, schema, _query, cursor, token) {\n alert(`Filling all fields. Token: ${token}`)\n }\n }),\n highlightActiveLine(),\n history(),\n keymap.of([...historyKeymap, indentWithTab]),\n EditorView.updateListener.of(async v => {\n if (v.docChanged) {\n this._self_changing = true\n this._changed = true\n\n await this.updateComplete\n\n this._self_changing = false\n }\n })\n ],\n parent: this.renderRoot\n })\n }\n\n this._editor.contentDOM.addEventListener('keydown', event => {\n event.stopPropagation()\n\n if (event.key === 'Escape') {\n togglefullscreen(this._editor!.contentDOM)\n }\n })\n\n this._editor.contentDOM.addEventListener('blur', e => {\n if (!this._changed) {\n return\n }\n\n this.value = this._editor!.state.doc.toString()\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))\n })\n\n return this._editor\n }\n}\n"]}
|