@operato/board 9.0.0-beta.79 → 9.0.0-beta.80
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 +9 -0
- package/dist/src/selector/board-creation-popup.d.ts +1 -0
- package/dist/src/selector/board-creation-popup.js +52 -0
- package/dist/src/selector/board-creation-popup.js.map +1 -1
- package/dist/src/selector/ox-board-creation-card.js +2 -1
- package/dist/src/selector/ox-board-creation-card.js.map +1 -1
- package/dist/src/selector/ox-board-selector.d.ts +2 -1
- package/dist/src/selector/ox-board-selector.js +30 -4
- package/dist/src/selector/ox-board-selector.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,15 @@
|
|
|
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
|
+
## [9.0.0-beta.80](https://github.com/hatiolab/operato/compare/v9.0.0-beta.79...v9.0.0-beta.80) (2025-05-05)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### :rocket: New Features
|
|
10
|
+
|
|
11
|
+
* add board-type for board ([45f2132](https://github.com/hatiolab/operato/commit/45f2132200f65eac8407db3753c84a0f8a3eff26))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
6
15
|
## [9.0.0-beta.79](https://github.com/hatiolab/operato/compare/v9.0.0-beta.78...v9.0.0-beta.79) (2025-05-04)
|
|
7
16
|
|
|
8
17
|
|
|
@@ -8,6 +8,10 @@ import { css, html, LitElement } from 'lit';
|
|
|
8
8
|
import { customElement, property, query } from 'lit/decorators.js';
|
|
9
9
|
import { i18next, localize } from '@operato/i18n';
|
|
10
10
|
let BoardCreationPopup = class BoardCreationPopup extends localize(i18next)(LitElement) {
|
|
11
|
+
constructor() {
|
|
12
|
+
super(...arguments);
|
|
13
|
+
this.type = 'main';
|
|
14
|
+
}
|
|
11
15
|
static get styles() {
|
|
12
16
|
return [
|
|
13
17
|
css `
|
|
@@ -30,6 +34,17 @@ let BoardCreationPopup = class BoardCreationPopup extends localize(i18next)(LitE
|
|
|
30
34
|
overflow: hidden;
|
|
31
35
|
}
|
|
32
36
|
|
|
37
|
+
[oneline] {
|
|
38
|
+
display: flex;
|
|
39
|
+
flex-direction: row;
|
|
40
|
+
gap: 10px;
|
|
41
|
+
align-items: center;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
[right] {
|
|
45
|
+
margin-left: auto;
|
|
46
|
+
}
|
|
47
|
+
|
|
33
48
|
[content] {
|
|
34
49
|
flex: 1;
|
|
35
50
|
|
|
@@ -81,6 +96,39 @@ let BoardCreationPopup = class BoardCreationPopup extends localize(i18next)(LitE
|
|
|
81
96
|
name="description"
|
|
82
97
|
field-description
|
|
83
98
|
></md-filled-text-field>
|
|
99
|
+
|
|
100
|
+
<div oneline>
|
|
101
|
+
<label>${i18next.t('label.board-type')}</label>
|
|
102
|
+
<div role="radiogroup" aria-labelledby="board-type" right>
|
|
103
|
+
<md-radio
|
|
104
|
+
id="board-type-main"
|
|
105
|
+
name="board-type"
|
|
106
|
+
value="main"
|
|
107
|
+
?checked=${this.type === 'main'}
|
|
108
|
+
@change=${(e) => (this.type = 'main')}
|
|
109
|
+
></md-radio>
|
|
110
|
+
<label for="board-type-main">${i18next.t('label.board-type-main')}</label>
|
|
111
|
+
|
|
112
|
+
<md-radio
|
|
113
|
+
id="board-type-sub"
|
|
114
|
+
name="board-type"
|
|
115
|
+
value="sub"
|
|
116
|
+
?checked=${this.type === 'sub'}
|
|
117
|
+
@change=${(e) => (this.type = 'sub')}
|
|
118
|
+
></md-radio>
|
|
119
|
+
<label for="board-type-sub">${i18next.t('label.board-type-sub')}</label>
|
|
120
|
+
|
|
121
|
+
<md-radio
|
|
122
|
+
id="board-type-popup"
|
|
123
|
+
name="board-type"
|
|
124
|
+
value="popup"
|
|
125
|
+
?checked=${this.type === 'popup'}
|
|
126
|
+
@change=${(e) => (this.type = 'popup')}
|
|
127
|
+
></md-radio>
|
|
128
|
+
<label for="board-type-popup">${i18next.t('label.board-type-popup')}</label>
|
|
129
|
+
</div>
|
|
130
|
+
</div>
|
|
131
|
+
|
|
84
132
|
<md-filled-select
|
|
85
133
|
label=${String(i18next.t('label.group'))}
|
|
86
134
|
field-group
|
|
@@ -125,6 +173,7 @@ let BoardCreationPopup = class BoardCreationPopup extends localize(i18next)(LitE
|
|
|
125
173
|
detail: {
|
|
126
174
|
name,
|
|
127
175
|
description,
|
|
176
|
+
type: this.type,
|
|
128
177
|
groupId,
|
|
129
178
|
model: template === null || template === void 0 ? void 0 : template.model,
|
|
130
179
|
thumbnail: template === null || template === void 0 ? void 0 : template.thumbnail
|
|
@@ -138,6 +187,9 @@ __decorate([
|
|
|
138
187
|
__decorate([
|
|
139
188
|
property({ type: Array })
|
|
140
189
|
], BoardCreationPopup.prototype, "groups", void 0);
|
|
190
|
+
__decorate([
|
|
191
|
+
property({ type: String })
|
|
192
|
+
], BoardCreationPopup.prototype, "type", void 0);
|
|
141
193
|
__decorate([
|
|
142
194
|
query('ox-board-template-list')
|
|
143
195
|
], BoardCreationPopup.prototype, "boardTemplateList", void 0);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"board-creation-popup.js","sourceRoot":"","sources":["../../../src/selector/board-creation-popup.ts"],"names":[],"mappings":";AAAA,OAAO,8CAA8C,CAAA;AACrD,OAAO,qCAAqC,CAAA;AAC5C,OAAO,uCAAuC,CAAA;AAC9C,OAAO,uCAAuC,CAAA;AAC9C,OAAO,8BAA8B,CAAA;AAErC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAElE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAI1C,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"board-creation-popup.js","sourceRoot":"","sources":["../../../src/selector/board-creation-popup.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/textfield/filled-text-field.js'\nimport '@material/web/button/text-button.js'\nimport '@material/web/select/filled-select.js'\nimport '@material/web/select/select-option.js'\nimport '../ox-board-template-list.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { OxBoardTemplateList } from '../ox-board-template-list.js'\n\n@customElement('board-creation-popup')\nexport class BoardCreationPopup extends localize(i18next)(LitElement) {\n static get styles() {\n return [\n css`\n :host {\n display: flex;\n flex-direction: column;\n gap: 10px;\n padding: 10px;\n\n background-color: var(--md-sys-color-surface);\n }\n\n [body] {\n flex: 1;\n\n display: flex;\n flex-direction: row;\n gap: 10px;\n\n overflow: hidden;\n }\n\n [oneline] {\n display: flex;\n flex-direction: row;\n gap: 10px;\n align-items: center;\n }\n\n [right] {\n margin-left: auto;\n }\n\n [content] {\n flex: 1;\n\n display: flex;\n flex-direction: column;\n gap: 10px;\n\n overflow: auto;\n }\n\n [content] > md-filled-text-field[type='textarea'] {\n flex: 1;\n resize: none;\n }\n\n [templates] {\n flex: 2;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n }\n\n [templates] > ox-board-template-list {\n flex: 1;\n overflow: hidden;\n }\n\n md-text-button {\n --_container-color: var(--md-sys-color-primary);\n --_label-text-color: var(--md-sys-color-on-primary);\n }\n `\n ]\n }\n\n @property({ type: String }) defaultGroup?: string\n @property({ type: Array }) groups?: { id: string; name: string }[]\n @property({ type: String }) type?: string = 'main'\n\n @query('ox-board-template-list') boardTemplateList!: OxBoardTemplateList\n\n render() {\n var groups = this.groups || []\n\n return html`\n <div body>\n <div content>\n <md-filled-text-field\n label=${String(i18next.t('label.name'))}\n name=\"name\"\n required\n field-name\n ></md-filled-text-field>\n <md-filled-text-field\n type=\"textarea\"\n label=${String(i18next.t('label.description'))}\n name=\"description\"\n field-description\n ></md-filled-text-field>\n\n <div oneline>\n <label>${i18next.t('label.board-type')}</label>\n <div role=\"radiogroup\" aria-labelledby=\"board-type\" right>\n <md-radio\n id=\"board-type-main\"\n name=\"board-type\"\n value=\"main\"\n ?checked=${this.type === 'main'}\n @change=${(e: Event) => (this.type = 'main')}\n ></md-radio>\n <label for=\"board-type-main\">${i18next.t('label.board-type-main')}</label>\n\n <md-radio\n id=\"board-type-sub\"\n name=\"board-type\"\n value=\"sub\"\n ?checked=${this.type === 'sub'}\n @change=${(e: Event) => (this.type = 'sub')}\n ></md-radio>\n <label for=\"board-type-sub\">${i18next.t('label.board-type-sub')}</label>\n\n <md-radio\n id=\"board-type-popup\"\n name=\"board-type\"\n value=\"popup\"\n ?checked=${this.type === 'popup'}\n @change=${(e: Event) => (this.type = 'popup')}\n ></md-radio>\n <label for=\"board-type-popup\">${i18next.t('label.board-type-popup')}</label>\n </div>\n </div>\n\n <md-filled-select\n label=${String(i18next.t('label.group'))}\n field-group\n helper=\"If there is no group to choose, you can leave it empty.\"\n >\n ${groups.map(\n group => html`\n <md-select-option value=${group.id} ?selected=${this.defaultGroup == group.id}\n >${group.name}</md-select-option\n >\n `\n )}\n </md-filled-select>\n </div>\n\n <div templates>\n <div>${i18next.t('label.board-template')}</div>\n <ox-board-template-list></ox-board-template-list>\n </div>\n </div>\n\n <md-text-button @click=${(e: MouseEvent) => this.onClickSubmit()}\n >${String(i18next.t('button.create'))}</md-text-button\n >\n `\n }\n\n firstUpdated() {\n setTimeout(() => {\n ;(this.renderRoot.querySelector('md-filled-text-field') as any)?.focus()\n }, 100)\n }\n\n async onClickSubmit() {\n var [name, description, groupId] = ['name', 'description', 'group'].map(attr => {\n return (this.renderRoot.querySelector(`[field-${attr}]`) as any)?.value\n })\n\n if (!name) {\n return\n }\n\n const template = await this.boardTemplateList.getSelected()\n\n this.dispatchEvent(\n new CustomEvent('create-board', {\n detail: {\n name,\n description,\n type: this.type,\n groupId,\n model: template?.model,\n thumbnail: template?.thumbnail\n }\n })\n )\n }\n}\n"]}
|
|
@@ -56,11 +56,12 @@ let BoardCreationCard = class BoardCreationCard extends localize(i18next)(LitEle
|
|
|
56
56
|
.defaultGroup=${this.defaultGroup}
|
|
57
57
|
.groups=${this.groups}
|
|
58
58
|
@create-board=${async (e) => {
|
|
59
|
-
var { name, description, groupId, model, thumbnail } = e.detail;
|
|
59
|
+
var { name, description, type, groupId, model, thumbnail } = e.detail;
|
|
60
60
|
this.dispatchEvent(new CustomEvent('create-board', {
|
|
61
61
|
detail: {
|
|
62
62
|
name,
|
|
63
63
|
description,
|
|
64
|
+
type,
|
|
64
65
|
groupId,
|
|
65
66
|
model,
|
|
66
67
|
thumbnail
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-board-creation-card.js","sourceRoot":"","sources":["../../../src/selector/ox-board-creation-card.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AACnC,OAAO,2BAA2B,CAAA;AAElC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAGpC,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;IAClE,MAAM,KAAK,MAAM;QACf,OAAO;YACL,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA4BF;SACF,CAAA;IACH,CAAC;IAQD,MAAM;QACJ,OAAO,IAAI,CAAA,eAAe,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,EAAE,2DAA2D,CAAA;IACnH,CAAC;IAED,OAAO;QACL,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACf,OAAO,IAAI,CAAC,KAAK,CAAA;QACnB,CAAC;QAED;;;;WAIG;QACH,IAAI,QAAQ,GAAG,IAAI,CAAA;;wBAEC,IAAI,CAAC,YAAY;kBACvB,IAAI,CAAC,MAAM;wBACL,KAAK,EAAE,CAAc,EAAE,EAAE;YACvC,IAAI,EAAE,IAAI,EAAE,WAAW,EAAE,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,CAAC,CAAC,MAAM,CAAA;
|
|
1
|
+
{"version":3,"file":"ox-board-creation-card.js","sourceRoot":"","sources":["../../../src/selector/ox-board-creation-card.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AACnC,OAAO,2BAA2B,CAAA;AAElC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAGpC,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;IAClE,MAAM,KAAK,MAAM;QACf,OAAO;YACL,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA4BF;SACF,CAAA;IACH,CAAC;IAQD,MAAM;QACJ,OAAO,IAAI,CAAA,eAAe,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,EAAE,2DAA2D,CAAA;IACnH,CAAC;IAED,OAAO;QACL,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACf,OAAO,IAAI,CAAC,KAAK,CAAA;QACnB,CAAC;QAED;;;;WAIG;QACH,IAAI,QAAQ,GAAG,IAAI,CAAA;;wBAEC,IAAI,CAAC,YAAY;kBACvB,IAAI,CAAC,MAAM;wBACL,KAAK,EAAE,CAAc,EAAE,EAAE;YACvC,IAAI,EAAE,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,CAAC,CAAC,MAAM,CAAA;YAErE,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,cAAc,EAAE;gBAC9B,MAAM,EAAE;oBACN,IAAI;oBACJ,WAAW;oBACX,IAAI;oBACJ,OAAO;oBACP,KAAK;oBACL,SAAS;iBACV;aACF,CAAC,CACH,CAAA;YAED,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAA;QAClC,CAAC;;KAEJ,CAAA;QAED,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC,QAAQ,EAAE;YAC/B,QAAQ,EAAE,IAAI;YACd,IAAI,EAAE,OAAO;YACb,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,oBAAoB,CAAC;SACvC,CAAC,CAAA;IACJ,CAAC;IAED,KAAK,KAAI,CAAC;CACX,CAAA;AApD6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uDAAsB;AACtB;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;iDAAY;AArC3B,iBAAiB;IAD7B,aAAa,CAAC,wBAAwB,CAAC;GAC3B,iBAAiB,CAwF7B","sourcesContent":["import '@material/web/icon/icon.js'\nimport './board-creation-popup.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { openPopup } from '@operato/layout'\n\n@customElement('ox-board-creation-card')\nexport class BoardCreationCard extends localize(i18next)(LitElement) {\n static get styles() {\n return [\n css`\n :host {\n display: flex;\n border: var(--card-list-create-border);\n border-radius: var(--card-list-create-border-radius);\n\n background-color: var(--md-sys-color-surface);\n\n align-content: center;\n justify-content: center;\n }\n\n div {\n display: flex;\n flex-direction: column;\n align-items: center;\n text-align: center;\n font-size: 0.8em;\n color: var(--card-list-create-color);\n text-transform: capitalize;\n }\n\n md-icon {\n --md-icon-size: 42px;\n display: block;\n font-size: 3.5em;\n color: var(--card-list-create-icon-color);\n }\n `\n ]\n }\n\n /* default group id */\n @property({ type: String }) defaultGroup?: string\n @property({ type: Array }) groups: any\n\n private popup: any\n\n render() {\n return html`<div @click=${(e: Event) => this.onClick()}><md-icon>add_circle_outline</md-icon>create board</div> `\n }\n\n onClick() {\n if (this.popup) {\n delete this.popup\n }\n\n /*\n * 기존 설정된 이미지가 선택된 상태가 되게 하기 위해서는 selector에 value를 전달해줄 필요가 있음.\n * 주의. value는 object일 수도 있고, string일 수도 있다.\n * string인 경우에는 해당 보드의 id로 해석한다.\n */\n var template = html`\n <board-creation-popup\n .defaultGroup=${this.defaultGroup}\n .groups=${this.groups}\n @create-board=${async (e: CustomEvent) => {\n var { name, description, type, groupId, model, thumbnail } = e.detail\n\n this.dispatchEvent(\n new CustomEvent('create-board', {\n detail: {\n name,\n description,\n type,\n groupId,\n model,\n thumbnail\n }\n })\n )\n\n this.popup && this.popup.close()\n }}\n ></board-creation-popup>\n `\n\n this.popup = openPopup(template, {\n backdrop: true,\n size: 'large',\n title: i18next.t('title.create-board')\n })\n }\n\n reset() {}\n}\n"]}
|
|
@@ -21,6 +21,7 @@ export declare class BoardSelector extends BoardSelector_base {
|
|
|
21
21
|
}[];
|
|
22
22
|
boards: any[];
|
|
23
23
|
group?: string;
|
|
24
|
+
type?: '' | 'main' | 'sub' | 'popup';
|
|
24
25
|
search?: string;
|
|
25
26
|
inherited?: InheritedValueType;
|
|
26
27
|
creatable: boolean;
|
|
@@ -42,6 +43,6 @@ export declare class BoardSelector extends BoardSelector_base {
|
|
|
42
43
|
page?: number | undefined;
|
|
43
44
|
limit?: number | undefined;
|
|
44
45
|
}): Promise<any>;
|
|
45
|
-
createBoard(name: string, description: string, groupId: string, modelTemplate: any, thumbnail: string): Promise<any>;
|
|
46
|
+
createBoard(name: string, description: string, type: string, groupId: string, modelTemplate: any, thumbnail: string): Promise<any>;
|
|
46
47
|
}
|
|
47
48
|
export {};
|
|
@@ -164,6 +164,21 @@ let BoardSelector = class BoardSelector extends InfiniteScrollable(localize(i18n
|
|
|
164
164
|
this.search = (_a = e.currentTarget) === null || _a === void 0 ? void 0 : _a.value;
|
|
165
165
|
}}
|
|
166
166
|
></ox-input-search>
|
|
167
|
+
<div>
|
|
168
|
+
<label for="type">Type</label>
|
|
169
|
+
<select
|
|
170
|
+
id="type"
|
|
171
|
+
@change=${(e) => {
|
|
172
|
+
var _a;
|
|
173
|
+
this.type = (_a = e.currentTarget) === null || _a === void 0 ? void 0 : _a.value;
|
|
174
|
+
this.requestUpdate();
|
|
175
|
+
}}
|
|
176
|
+
>
|
|
177
|
+
<option value="">${i18next.t('label.all')}</option>
|
|
178
|
+
${['main', 'sub', 'popup'].map(type => html ` <option value=${type}>${type}</option> `)}
|
|
179
|
+
</select>
|
|
180
|
+
</div>
|
|
181
|
+
|
|
167
182
|
<div>
|
|
168
183
|
<label for="group">Group</label>
|
|
169
184
|
<select
|
|
@@ -232,7 +247,7 @@ let BoardSelector = class BoardSelector extends InfiniteScrollable(localize(i18n
|
|
|
232
247
|
this.refreshGroups();
|
|
233
248
|
}
|
|
234
249
|
async updated(changed) {
|
|
235
|
-
if (changed.has('group') || changed.has('inherited') || changed.has('search')) {
|
|
250
|
+
if (changed.has('type') || changed.has('group') || changed.has('inherited') || changed.has('search')) {
|
|
236
251
|
this.refreshBoards();
|
|
237
252
|
}
|
|
238
253
|
}
|
|
@@ -246,8 +261,8 @@ let BoardSelector = class BoardSelector extends InfiniteScrollable(localize(i18n
|
|
|
246
261
|
}));
|
|
247
262
|
}
|
|
248
263
|
async onCreateBoard(e) {
|
|
249
|
-
var { name, description, groupId, model, thumbnail } = e.detail;
|
|
250
|
-
await this.createBoard(name, description, groupId, model, thumbnail);
|
|
264
|
+
var { name, description, type, groupId, model, thumbnail } = e.detail;
|
|
265
|
+
await this.createBoard(name, description, type, groupId, model, thumbnail);
|
|
251
266
|
this.refreshBoards();
|
|
252
267
|
}
|
|
253
268
|
async refreshGroups() {
|
|
@@ -301,6 +316,13 @@ let BoardSelector = class BoardSelector extends InfiniteScrollable(localize(i18n
|
|
|
301
316
|
value: this.search
|
|
302
317
|
});
|
|
303
318
|
}
|
|
319
|
+
if (this.type) {
|
|
320
|
+
filters.push({
|
|
321
|
+
name: 'type',
|
|
322
|
+
operator: 'eq',
|
|
323
|
+
value: this.type
|
|
324
|
+
});
|
|
325
|
+
}
|
|
304
326
|
var variables = {
|
|
305
327
|
filters,
|
|
306
328
|
sortings,
|
|
@@ -317,7 +339,7 @@ let BoardSelector = class BoardSelector extends InfiniteScrollable(localize(i18n
|
|
|
317
339
|
this._page = page;
|
|
318
340
|
return boardListResponse.data.boards.items;
|
|
319
341
|
}
|
|
320
|
-
async createBoard(name, description, groupId, modelTemplate, thumbnail) {
|
|
342
|
+
async createBoard(name, description, type, groupId, modelTemplate, thumbnail) {
|
|
321
343
|
var model = JSON.stringify(modelTemplate || {
|
|
322
344
|
width: 1200,
|
|
323
345
|
height: 800,
|
|
@@ -329,6 +351,7 @@ let BoardSelector = class BoardSelector extends InfiniteScrollable(localize(i18n
|
|
|
329
351
|
board: {
|
|
330
352
|
name,
|
|
331
353
|
description,
|
|
354
|
+
type,
|
|
332
355
|
groupId,
|
|
333
356
|
model,
|
|
334
357
|
thumbnail
|
|
@@ -348,6 +371,9 @@ __decorate([
|
|
|
348
371
|
__decorate([
|
|
349
372
|
property({ type: String })
|
|
350
373
|
], BoardSelector.prototype, "group", void 0);
|
|
374
|
+
__decorate([
|
|
375
|
+
property({ type: String })
|
|
376
|
+
], BoardSelector.prototype, "type", void 0);
|
|
351
377
|
__decorate([
|
|
352
378
|
property({ type: String })
|
|
353
379
|
], BoardSelector.prototype, "search", void 0);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-board-selector.js","sourceRoot":"","sources":["../../../src/selector/ox-board-selector.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/input/ox-input-search.js'\nimport './ox-board-creation-card.js'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { client, gqlContext } from '@operato/graphql'\nimport { i18next, localize } from '@operato/i18n'\nimport { ScrollbarStyles } from '@operato/styles'\nimport InfiniteScrollable from '@operato/utils/mixins/infinite-scrollable.js'\nimport { InheritedValueType } from '@operato/shell'\nimport { adjustFilters } from '@operato/utils'\n\nconst FETCH_BOARD_LIST_GQL = gql`\n query ($filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!], $inherited: InheritedValueType) {\n boards(filters: $filters, pagination: $pagination, sortings: $sortings, inherited: $inherited) {\n items {\n id\n name\n description\n thumbnail\n }\n total\n }\n }\n`\n\nconst FETCH_BOARD_GROUP_LIST_GQL = gql`\n {\n groups {\n items {\n id\n name\n description\n }\n total\n }\n }\n`\n\nconst CREATE_BOARD_GQL = gql`\n mutation CreateBoard($board: NewBoard!) {\n createBoard(board: $board) {\n id\n name\n description\n model\n createdAt\n updatedAt\n }\n }\n`\n\n@customElement('ox-board-selector')\nexport class BoardSelector extends InfiniteScrollable(localize(i18next)(LitElement)) {\n static get styles() {\n return [\n ScrollbarStyles,\n css`\n :host {\n display: grid;\n grid-template-rows: auto auto 1fr;\n overflow: hidden;\n color: var(--md-sys-color-on-surface);\n background-color: var(--md-sys-color-surface);\n }\n\n #main {\n overflow: auto;\n padding: var(--popup-content-padding);\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));\n grid-auto-rows: var(--card-list-rows-height);\n grid-gap: 20px;\n }\n\n .card {\n display: flex;\n flex-direction: column;\n align-items: center;\n overflow: hidden;\n border-radius: var(--card-list-border-radius);\n background-color: var(--card-list-background-color);\n }\n\n .card[selected] {\n border: red solid;\n }\n\n .card.create {\n overflow: visible;\n }\n\n .card:hover {\n cursor: pointer;\n }\n\n .card > .name {\n color: var(--md-sys-color-on-secondary);\n background-color: var(--md-sys-color-secondary);\n opacity: 0.9;\n margin-top: -35px;\n width: 100%;\n font-weight: bolder;\n font-size: 13px;\n text-indent: 7px;\n }\n\n .card > .description {\n color: var(--md-sys-color-on-secondary);\n background-color: var(--md-sys-color-secondary);\n width: 100%;\n min-height: 16px;\n font-size: 0.6rem;\n text-indent: 7px;\n }\n .card img {\n max-height: 100%;\n min-height: 100%;\n }\n\n #filter {\n display: flex;\n align-items: center;\n padding: var(--popup-content-padding);\n color: var(--md-sys-color-on-surface-variant);\n background-color: var(--md-sys-color-surface-variant);\n box-shadow: var(--box-shadow);\n }\n\n #filter > ox-input-search {\n margin-right: auto;\n border: var(--md-sys-color-primary) 1px solid;\n padding: var(--spacing-small) var(--spacing-small);\n border-radius: 999px;\n color: var(--md-sys-color-primary);\n }\n\n #filter > div {\n float: right;\n margin-left: 10px;\n }\n\n #filter * {\n font-size: 15px;\n }\n\n select {\n text-transform: capitalize;\n }\n `\n ]\n }\n\n @property({ type: Array }) groups: { id: string; name: string; description: string }[] = []\n @property({ type: Array }) boards: any[] = []\n @property({ type: String }) group?: string\n @property({ type: String }) search?: string\n @property({ type: String }) inherited?: InheritedValueType = InheritedValueType.Include\n @property({ type: Boolean }) creatable: boolean = false\n @property({ type: String }) value?: string\n\n private _page: number = 1\n private _total: number = 0\n\n constructor() {\n super()\n\n this._infiniteScrollOptions.limit = 50\n }\n\n render() {\n return html`\n <div id=\"filter\">\n <ox-input-search\n @change=${(e: Event) => {\n this.search = (e.currentTarget as any)?.value\n }}\n ></ox-input-search>\n <div>\n <label for=\"group\">Group</label>\n <select\n id=\"group\"\n @change=${(e: Event) => {\n this.group = (e.currentTarget as any)?.value\n this.requestUpdate()\n }}\n >\n <option value=\"\">${i18next.t('label.all')}</option>\n ${this.groups.map(group => html` <option value=${group.id}>${group.description}</option> `)}\n </select>\n </div>\n\n <div>\n <label for=\"inherited\">Inherited</label>\n <select\n id=\"inherited\"\n @change=${(e: Event) => {\n this.inherited = (e.currentTarget as any)?.value\n this.requestUpdate()\n }}\n >\n <option value=\"Include\">Include</option>\n <option value=\"Only\">Only</option>\n <option value=\"None\">None</option>\n </select>\n </div>\n </div>\n\n <div\n id=\"main\"\n @scroll=${(e: Event) => {\n this.onScroll(e)\n }}\n >\n ${this.creatable\n ? html`\n <ox-board-creation-card\n class=\"card create\"\n .groups=${this.groups}\n .defaultGroup=${this.group}\n @create-board=${(e: CustomEvent) => this.onCreateBoard(e)}\n ></ox-board-creation-card>\n `\n : html``}\n ${this.boards.map(\n board => html`\n <div class=\"card\" @click=${(e: Event) => this.onClickSelect(board)} ?selected=${this.value === board.id}>\n <img src=${board.thumbnail} />\n <div class=\"name\">${board.name}</div>\n <div class=\"description\">${board.description}</div>\n </div>\n `\n )}\n </div>\n `\n }\n\n get scrollTargetEl(): HTMLElement | null {\n return this.renderRoot.querySelector('#main') as HTMLElement\n }\n\n async scrollAction() {\n return this.appendBoards()\n }\n\n firstUpdated() {\n this.refreshGroups()\n }\n\n async updated(changed: PropertyValues<this>) {\n if (changed.has('group') || changed.has('inherited') || changed.has('search')) {\n this.refreshBoards()\n }\n }\n\n onClickSelect(board: any) {\n this.dispatchEvent(\n new CustomEvent('board-selected', {\n composed: true,\n bubbles: true,\n detail: {\n board\n }\n })\n )\n }\n\n async onCreateBoard(e: CustomEvent) {\n var { name, description, groupId, model, thumbnail } = e.detail\n\n await this.createBoard(name, description, groupId, model, thumbnail)\n this.refreshBoards()\n }\n\n async refreshGroups() {\n var groupListResponse = await client.query({\n query: FETCH_BOARD_GROUP_LIST_GQL,\n context: gqlContext()\n })\n\n if (!groupListResponse || !groupListResponse.data) return\n\n var groups = groupListResponse.data.groups.items\n this.groups = [...groups]\n\n this.group = groups.filter((group: { id: string }) => group.id == this.group).length > 0 ? this.group : ''\n }\n\n async refreshBoards() {\n var boards = await this.getBoards()\n this.boards = [...boards]\n\n var creationCard = this.renderRoot.querySelector('ox-board-creation-card')\n if (creationCard) {\n ;(creationCard as any).reset()\n }\n }\n\n async appendBoards() {\n var boards = await this.getBoards({ page: this._page + 1 })\n this.boards = [...this.boards, ...boards]\n }\n\n async getBoards({ page = 1, limit = this._infiniteScrollOptions.limit } = {}) {\n var filters = []\n var sortings = [] as any[]\n var pagination = {\n limit,\n page\n }\n\n if (this.group) {\n filters.push({\n name: 'groupId',\n operator: 'eq',\n value: this.group\n })\n }\n\n if (this.search) {\n const value = `%${this.search.trim()}%`\n\n filters.push({\n name: 'name',\n operator: 'search',\n value: this.search\n })\n\n filters.push({\n name: 'description',\n operator: 'search',\n value: this.search\n })\n }\n\n var variables = {\n filters,\n sortings,\n pagination,\n inherited: this.inherited || InheritedValueType.Include\n }\n\n var boardListResponse = await client.query({\n query: FETCH_BOARD_LIST_GQL,\n variables\n })\n\n if (!boardListResponse || !boardListResponse.data) return []\n this._total = boardListResponse.data.boards.total\n this._page = page\n\n return boardListResponse.data.boards.items\n }\n\n async createBoard(name: string, description: string, groupId: string, modelTemplate: any, thumbnail: string) {\n var model = JSON.stringify(\n modelTemplate || {\n width: 1200,\n height: 800,\n fillStyle: 'white'\n }\n )\n\n const response = await client.mutate({\n mutation: CREATE_BOARD_GQL,\n variables: {\n board: {\n name,\n description,\n groupId,\n model,\n thumbnail\n }\n },\n context: gqlContext()\n })\n\n return response.data\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"ox-board-selector.js","sourceRoot":"","sources":["../../../src/selector/ox-board-selector.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/input/ox-input-search.js'\nimport './ox-board-creation-card.js'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { client, gqlContext } from '@operato/graphql'\nimport { i18next, localize } from '@operato/i18n'\nimport { ScrollbarStyles } from '@operato/styles'\nimport InfiniteScrollable from '@operato/utils/mixins/infinite-scrollable.js'\nimport { InheritedValueType } from '@operato/shell'\nimport { adjustFilters } from '@operato/utils'\n\nconst FETCH_BOARD_LIST_GQL = gql`\n query ($filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!], $inherited: InheritedValueType) {\n boards(filters: $filters, pagination: $pagination, sortings: $sortings, inherited: $inherited) {\n items {\n id\n name\n description\n thumbnail\n }\n total\n }\n }\n`\n\nconst FETCH_BOARD_GROUP_LIST_GQL = gql`\n {\n groups {\n items {\n id\n name\n description\n }\n total\n }\n }\n`\n\nconst CREATE_BOARD_GQL = gql`\n mutation CreateBoard($board: NewBoard!) {\n createBoard(board: $board) {\n id\n name\n description\n model\n createdAt\n updatedAt\n }\n }\n`\n\n@customElement('ox-board-selector')\nexport class BoardSelector extends InfiniteScrollable(localize(i18next)(LitElement)) {\n static get styles() {\n return [\n ScrollbarStyles,\n css`\n :host {\n display: grid;\n grid-template-rows: auto auto 1fr;\n overflow: hidden;\n color: var(--md-sys-color-on-surface);\n background-color: var(--md-sys-color-surface);\n }\n\n #main {\n overflow: auto;\n padding: var(--popup-content-padding);\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));\n grid-auto-rows: var(--card-list-rows-height);\n grid-gap: 20px;\n }\n\n .card {\n display: flex;\n flex-direction: column;\n align-items: center;\n overflow: hidden;\n border-radius: var(--card-list-border-radius);\n background-color: var(--card-list-background-color);\n }\n\n .card[selected] {\n border: red solid;\n }\n\n .card.create {\n overflow: visible;\n }\n\n .card:hover {\n cursor: pointer;\n }\n\n .card > .name {\n color: var(--md-sys-color-on-secondary);\n background-color: var(--md-sys-color-secondary);\n opacity: 0.9;\n margin-top: -35px;\n width: 100%;\n font-weight: bolder;\n font-size: 13px;\n text-indent: 7px;\n }\n\n .card > .description {\n color: var(--md-sys-color-on-secondary);\n background-color: var(--md-sys-color-secondary);\n width: 100%;\n min-height: 16px;\n font-size: 0.6rem;\n text-indent: 7px;\n }\n .card img {\n max-height: 100%;\n min-height: 100%;\n }\n\n #filter {\n display: flex;\n align-items: center;\n padding: var(--popup-content-padding);\n color: var(--md-sys-color-on-surface-variant);\n background-color: var(--md-sys-color-surface-variant);\n box-shadow: var(--box-shadow);\n }\n\n #filter > ox-input-search {\n margin-right: auto;\n border: var(--md-sys-color-primary) 1px solid;\n padding: var(--spacing-small) var(--spacing-small);\n border-radius: 999px;\n color: var(--md-sys-color-primary);\n }\n\n #filter > div {\n float: right;\n margin-left: 10px;\n }\n\n #filter * {\n font-size: 15px;\n }\n\n select {\n text-transform: capitalize;\n }\n `\n ]\n }\n\n @property({ type: Array }) groups: { id: string; name: string; description: string }[] = []\n @property({ type: Array }) boards: any[] = []\n @property({ type: String }) group?: string\n @property({ type: String }) type?: '' | 'main' | 'sub' | 'popup'\n @property({ type: String }) search?: string\n @property({ type: String }) inherited?: InheritedValueType = InheritedValueType.Include\n @property({ type: Boolean }) creatable: boolean = false\n @property({ type: String }) value?: string\n\n private _page: number = 1\n private _total: number = 0\n\n constructor() {\n super()\n\n this._infiniteScrollOptions.limit = 50\n }\n\n render() {\n return html`\n <div id=\"filter\">\n <ox-input-search\n @change=${(e: Event) => {\n this.search = (e.currentTarget as any)?.value\n }}\n ></ox-input-search>\n <div>\n <label for=\"type\">Type</label>\n <select\n id=\"type\"\n @change=${(e: Event) => {\n this.type = (e.currentTarget as any)?.value\n this.requestUpdate()\n }}\n >\n <option value=\"\">${i18next.t('label.all')}</option>\n ${['main', 'sub', 'popup'].map(type => html` <option value=${type}>${type}</option> `)}\n </select>\n </div>\n\n <div>\n <label for=\"group\">Group</label>\n <select\n id=\"group\"\n @change=${(e: Event) => {\n this.group = (e.currentTarget as any)?.value\n this.requestUpdate()\n }}\n >\n <option value=\"\">${i18next.t('label.all')}</option>\n ${this.groups.map(group => html` <option value=${group.id}>${group.description}</option> `)}\n </select>\n </div>\n\n <div>\n <label for=\"inherited\">Inherited</label>\n <select\n id=\"inherited\"\n @change=${(e: Event) => {\n this.inherited = (e.currentTarget as any)?.value\n this.requestUpdate()\n }}\n >\n <option value=\"Include\">Include</option>\n <option value=\"Only\">Only</option>\n <option value=\"None\">None</option>\n </select>\n </div>\n </div>\n\n <div\n id=\"main\"\n @scroll=${(e: Event) => {\n this.onScroll(e)\n }}\n >\n ${this.creatable\n ? html`\n <ox-board-creation-card\n class=\"card create\"\n .groups=${this.groups}\n .defaultGroup=${this.group}\n @create-board=${(e: CustomEvent) => this.onCreateBoard(e)}\n ></ox-board-creation-card>\n `\n : html``}\n ${this.boards.map(\n board => html`\n <div class=\"card\" @click=${(e: Event) => this.onClickSelect(board)} ?selected=${this.value === board.id}>\n <img src=${board.thumbnail} />\n <div class=\"name\">${board.name}</div>\n <div class=\"description\">${board.description}</div>\n </div>\n `\n )}\n </div>\n `\n }\n\n get scrollTargetEl(): HTMLElement | null {\n return this.renderRoot.querySelector('#main') as HTMLElement\n }\n\n async scrollAction() {\n return this.appendBoards()\n }\n\n firstUpdated() {\n this.refreshGroups()\n }\n\n async updated(changed: PropertyValues<this>) {\n if (changed.has('type') || changed.has('group') || changed.has('inherited') || changed.has('search')) {\n this.refreshBoards()\n }\n }\n\n onClickSelect(board: any) {\n this.dispatchEvent(\n new CustomEvent('board-selected', {\n composed: true,\n bubbles: true,\n detail: {\n board\n }\n })\n )\n }\n\n async onCreateBoard(e: CustomEvent) {\n var { name, description, type, groupId, model, thumbnail } = e.detail\n\n await this.createBoard(name, description, type, groupId, model, thumbnail)\n this.refreshBoards()\n }\n\n async refreshGroups() {\n var groupListResponse = await client.query({\n query: FETCH_BOARD_GROUP_LIST_GQL,\n context: gqlContext()\n })\n\n if (!groupListResponse || !groupListResponse.data) return\n\n var groups = groupListResponse.data.groups.items\n this.groups = [...groups]\n\n this.group = groups.filter((group: { id: string }) => group.id == this.group).length > 0 ? this.group : ''\n }\n\n async refreshBoards() {\n var boards = await this.getBoards()\n this.boards = [...boards]\n\n var creationCard = this.renderRoot.querySelector('ox-board-creation-card')\n if (creationCard) {\n ;(creationCard as any).reset()\n }\n }\n\n async appendBoards() {\n var boards = await this.getBoards({ page: this._page + 1 })\n this.boards = [...this.boards, ...boards]\n }\n\n async getBoards({ page = 1, limit = this._infiniteScrollOptions.limit } = {}) {\n var filters = []\n var sortings = [] as any[]\n var pagination = {\n limit,\n page\n }\n\n if (this.group) {\n filters.push({\n name: 'groupId',\n operator: 'eq',\n value: this.group\n })\n }\n\n if (this.search) {\n const value = `%${this.search.trim()}%`\n\n filters.push({\n name: 'name',\n operator: 'search',\n value: this.search\n })\n\n filters.push({\n name: 'description',\n operator: 'search',\n value: this.search\n })\n }\n\n if (this.type) {\n filters.push({\n name: 'type',\n operator: 'eq',\n value: this.type\n })\n }\n\n var variables = {\n filters,\n sortings,\n pagination,\n inherited: this.inherited || InheritedValueType.Include\n }\n\n var boardListResponse = await client.query({\n query: FETCH_BOARD_LIST_GQL,\n variables\n })\n\n if (!boardListResponse || !boardListResponse.data) return []\n this._total = boardListResponse.data.boards.total\n this._page = page\n\n return boardListResponse.data.boards.items\n }\n\n async createBoard(\n name: string,\n description: string,\n type: string,\n groupId: string,\n modelTemplate: any,\n thumbnail: string\n ) {\n var model = JSON.stringify(\n modelTemplate || {\n width: 1200,\n height: 800,\n fillStyle: 'white'\n }\n )\n\n const response = await client.mutate({\n mutation: CREATE_BOARD_GQL,\n variables: {\n board: {\n name,\n description,\n type,\n groupId,\n model,\n thumbnail\n }\n },\n context: gqlContext()\n })\n\n return response.data\n }\n}\n"]}
|