@things-factory/organization 7.0.0-alpha.0 → 7.0.0-alpha.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.
Files changed (36) hide show
  1. package/client/pages/department/department-list-page.ts +305 -193
  2. package/client/pages/department/department-tree-page.ts +153 -404
  3. package/client/route.ts +4 -4
  4. package/client/types/department.ts +0 -8
  5. package/dist-client/pages/department/department-list-page.d.ts +11 -19
  6. package/dist-client/pages/department/department-list-page.js +305 -179
  7. package/dist-client/pages/department/department-list-page.js.map +1 -1
  8. package/dist-client/pages/department/department-tree-page.d.ts +10 -12
  9. package/dist-client/pages/department/department-tree-page.js +142 -383
  10. package/dist-client/pages/department/department-tree-page.js.map +1 -1
  11. package/dist-client/route.d.ts +1 -1
  12. package/dist-client/route.js +3 -3
  13. package/dist-client/route.js.map +1 -1
  14. package/dist-client/tsconfig.tsbuildinfo +1 -1
  15. package/dist-client/types/department.d.ts +0 -6
  16. package/dist-client/types/department.js +0 -5
  17. package/dist-client/types/department.js.map +1 -1
  18. package/dist-server/service/department/department-history.js +4 -15
  19. package/dist-server/service/department/department-history.js.map +1 -1
  20. package/dist-server/service/department/department-query.js +15 -10
  21. package/dist-server/service/department/department-query.js.map +1 -1
  22. package/dist-server/service/department/department-type.js +0 -8
  23. package/dist-server/service/department/department-type.js.map +1 -1
  24. package/dist-server/service/department/department.js +1 -15
  25. package/dist-server/service/department/department.js.map +1 -1
  26. package/dist-server/tsconfig.tsbuildinfo +1 -1
  27. package/package.json +5 -5
  28. package/server/service/department/department-history.ts +7 -31
  29. package/server/service/department/department-query.ts +13 -10
  30. package/server/service/department/department-type.ts +1 -7
  31. package/server/service/department/department.ts +0 -15
  32. package/translations/en.json +3 -0
  33. package/translations/ja.json +3 -0
  34. package/translations/ko.json +3 -0
  35. package/translations/ms.json +3 -0
  36. package/translations/zh.json +3 -0
@@ -4,18 +4,17 @@ import '@operato/context/ox-context-page-toolbar.js';
4
4
  import { CommonHeaderStyles, ScrollbarStyles } from '@operato/styles';
5
5
  import { PageView, store } from '@operato/shell';
6
6
  import { css, html } from 'lit';
7
- import { customElement, property, query, state } from 'lit/decorators.js';
7
+ import { customElement, query, state } from 'lit/decorators.js';
8
8
  import { ScopedElementsMixin } from '@open-wc/scoped-elements';
9
9
  import { client } from '@operato/graphql';
10
10
  import { i18next, localize } from '@operato/i18n';
11
- import { isMobileDevice } from '@operato/utils';
12
- import { DataGrist } from '@operato/data-grist';
13
11
  import { connect } from 'pwa-helpers/connect-mixin';
14
12
  import gql from 'graphql-tag';
15
13
  import { DepartmentImporter } from './department-importer';
16
14
  import { Department } from '../../types/department';
15
+ import { DepartmentView } from '../../component/department-view';
17
16
  const departmentFragment = gql `
18
- fragment Department_department on Department {
17
+ fragment departmentFragment on Department {
19
18
  id
20
19
  controlNo
21
20
  name
@@ -29,7 +28,6 @@ const departmentFragment = gql `
29
28
  email
30
29
  }
31
30
  active
32
- state
33
31
  picture
34
32
 
35
33
  updater {
@@ -55,10 +53,17 @@ let DepartmentTreePage = class DepartmentTreePage extends connect(store)(localiz
55
53
  title: i18next.t('button.add'),
56
54
  action: this.create.bind(this)
57
55
  },
56
+ this.selected
57
+ ? {
58
+ icon: 'save',
59
+ title: i18next.t('button.save'),
60
+ action: this.save.bind(this)
61
+ }
62
+ : null,
58
63
  {
59
- icon: 'save',
60
- title: i18next.t('button.save'),
61
- action: this.save.bind(this)
64
+ icon: 'refresh',
65
+ title: i18next.t('button.reset'),
66
+ action: this.reset.bind(this)
62
67
  },
63
68
  {
64
69
  icon: 'delete',
@@ -77,67 +82,100 @@ let DepartmentTreePage = class DepartmentTreePage extends connect(store)(localiz
77
82
  };
78
83
  }
79
84
  render() {
80
- const mode = isMobileDevice() ? 'CARD' : 'GRID';
81
85
  return html `
82
- <ox-grist .mode=${mode} .config=${this.gristConfig} .fetchHandler=${this.fetchHandler.bind(this)}>
83
- <div slot="headroom" class="header">
84
- <div class="title">
85
- <mwc-icon>summarize</mwc-icon>
86
- ${i18next.t('title.department list')}
87
- </div>
86
+ <div class="header">
87
+ <div class="title">
88
+ <mwc-icon>summarize</mwc-icon>
89
+ ${i18next.t('title.department list')}
90
+ </div>
88
91
 
89
- <div class="filters">
90
- <ox-filters-form class="filter" autofocus without-search></ox-filters-form>
91
- </div>
92
+ <ox-context-page-toolbar class="actions" .context=${this.context}></ox-context-page-toolbar>
93
+ </div>
92
94
 
93
- <ox-context-page-toolbar class="actions" .context=${this.context}></ox-context-page-toolbar>
94
- </div>
95
- </ox-grist>
95
+ <ox-tree-vertical .data=${this.root} .selected=${this.selected} @select=${this.onSelect.bind(this)} label-property="name"></ox-tree-vertical>
96
+
97
+ <department-view .department=${this.selected}></department-view>
96
98
  `;
97
99
  }
98
- async fetchHandler({ page = 1, limit = 100, sortings = [], filters = [] }) {
99
- const response = await client.query({
100
- query: gql `
101
- query ($filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!]) {
102
- responses: departmentRoot {
103
- ...Department_department
104
- children(filters: $filters, pagination: $pagination, sortings: $sortings) {
105
- ...Department_department
106
- children(filters: $filters, pagination: $pagination, sortings: $sortings) {
107
- ...Department_department
108
- children(filters: $filters, pagination: $pagination, sortings: $sortings) {
109
- ...Department_department
110
- children(filters: $filters, pagination: $pagination, sortings: $sortings) {
111
- ...Department_department
112
- children(filters: $filters, pagination: $pagination, sortings: $sortings) {
113
- ...Department_department
114
- children(filters: $filters, pagination: $pagination, sortings: $sortings) {
115
- ...Department_department
116
- children(filters: $filters, pagination: $pagination, sortings: $sortings) {
117
- ...Department_department
118
- }
119
- }
120
- }
121
- }
122
- }
123
- }
124
- }
100
+ onSelect(e) {
101
+ this.selected = e.detail;
102
+ this.updateContext();
103
+ }
104
+ reset() {
105
+ this.departmentView.department = {};
106
+ }
107
+ async create() {
108
+ const { id: parentId } = this.selected || {};
109
+ const { controlNo, name, description, picture, active, manager } = this.departmentView.department;
110
+ var department = {
111
+ controlNo,
112
+ name,
113
+ description,
114
+ manager,
115
+ active
116
+ };
117
+ if (picture instanceof File) {
118
+ department.picture = picture;
119
+ }
120
+ if (parentId) {
121
+ department.parent = { id: parentId };
122
+ }
123
+ const response = await client.mutate({
124
+ mutation: gql `
125
+ mutation ($department: NewDepartment!) {
126
+ createDepartment(department: $department) {
127
+ ...departmentFragment
125
128
  }
126
129
  }
127
130
 
128
131
  ${departmentFragment}
129
132
  `,
130
133
  variables: {
131
- filters,
132
- pagination: { page, limit },
133
- sortings
134
+ department
135
+ },
136
+ context: {
137
+ hasUpload: true
134
138
  }
135
139
  });
136
- const root = response.data.responses;
137
- return {
138
- total: 1,
139
- records: [root]
140
+ this.selected = response.data.createDepartment;
141
+ this.updateContext();
142
+ await this.fetch();
143
+ }
144
+ async save() {
145
+ const { id, controlNo, name, description, picture, active, manager } = this.departmentView.department;
146
+ if (!id) {
147
+ alert('Please select department first.');
148
+ }
149
+ var patch = {
150
+ controlNo,
151
+ name,
152
+ description,
153
+ active,
154
+ manager
140
155
  };
156
+ if (picture instanceof File) {
157
+ patch.picture = picture;
158
+ }
159
+ const response = await client.mutate({
160
+ mutation: gql `
161
+ mutation ($id: String!, $patch: DepartmentPatch!) {
162
+ updateDepartment(id: $id, patch: $patch) {
163
+ ...departmentFragment
164
+ }
165
+ }
166
+
167
+ ${departmentFragment}
168
+ `,
169
+ variables: {
170
+ id,
171
+ patch
172
+ },
173
+ context: {
174
+ hasUpload: true
175
+ }
176
+ });
177
+ this.selected = response.data.updateDepartment;
178
+ this.fetch();
141
179
  }
142
180
  async delete() {
143
181
  var _a;
@@ -162,355 +200,80 @@ let DepartmentTreePage = class DepartmentTreePage extends connect(store)(localiz
162
200
  });
163
201
  this.selected = {};
164
202
  this.updateContext();
165
- await this.grist.fetch();
203
+ await this.fetch();
166
204
  }
167
205
  }
168
206
  async pageInitialized(lifecycle) {
169
- this.gristConfig = {
170
- pagination: { pages: [50, 100, 200] },
171
- list: {
172
- thumbnail: 'profile',
173
- fields: ['controlNo', 'name'],
174
- details: ['email', 'manager', 'updatedAt']
175
- },
176
- columns: [
177
- {
178
- type: 'gutter',
179
- gutterName: 'dirty',
180
- fixed: true
181
- },
182
- {
183
- type: 'tree',
184
- name: 'name',
185
- label: true,
186
- header: i18next.t('label.name'),
187
- record: {
188
- editable: false,
189
- options: {
190
- selectable: true
191
- }
192
- },
193
- filter: 'search',
194
- sortable: true,
195
- width: 200,
196
- fixed: true
197
- },
198
- { name: 'id', hidden: true },
199
- {
200
- type: 'string',
201
- name: 'controlNo',
202
- header: i18next.t('label.control-no'),
203
- record: {
204
- editable: true
205
- },
206
- filter: 'search',
207
- sortable: true,
208
- width: 110
209
- },
210
- {
211
- type: 'string',
212
- name: 'description',
213
- header: i18next.t('label.description'),
214
- record: {
215
- editable: true
216
- },
217
- filter: 'search',
218
- sortable: true,
219
- width: 110
220
- },
221
- {
222
- type: 'string',
223
- name: 'state',
224
- header: i18next.t('label.state'),
225
- record: {
226
- editable: true
227
- },
228
- sortable: true,
229
- width: 110
230
- },
231
- {
232
- type: 'resource-object',
233
- name: 'manager',
234
- header: i18next.t('label.manager'),
235
- record: {
236
- editable: true,
237
- options: {
238
- title: i18next.t('title.employee list'),
239
- queryName: 'employees',
240
- pagination: { pages: [50, 100, 200] },
241
- basicArgs: {
242
- filters: [
243
- {
244
- name: 'active',
245
- operator: 'eq',
246
- value: true
247
- }
248
- ]
249
- },
250
- list: { fields: ['controlNo', 'name', 'email'] },
251
- columns: [
252
- { name: 'id', hidden: true },
253
- {
254
- name: 'controlNo',
255
- width: 120,
256
- header: { renderer: () => i18next.t('field.control-no') },
257
- filter: 'search',
258
- sortable: true
259
- },
260
- {
261
- name: 'name',
262
- width: 120,
263
- header: { renderer: () => i18next.t('field.name') },
264
- filter: 'search',
265
- sortable: true
266
- },
267
- {
268
- name: 'email',
269
- width: 150,
270
- header: { renderer: () => i18next.t('label.email') },
271
- filter: 'search',
272
- sortable: true
273
- }
274
- ],
275
- valueField: 'id',
276
- nameField: 'name',
277
- descriptionField: 'controlNo'
278
- }
279
- },
280
- sortable: true,
281
- width: 120
282
- },
283
- {
284
- type: 'checkbox',
285
- name: 'active',
286
- label: true,
287
- header: i18next.t('field.active'),
288
- width: 70,
289
- record: {
290
- align: 'center',
291
- editable: true
292
- },
293
- filter: true,
294
- sortable: true
295
- },
296
- {
297
- type: 'resource-object',
298
- name: 'updater',
299
- header: i18next.t('field.updater'),
300
- width: 90,
301
- sortable: false
302
- },
303
- {
304
- type: 'datetime',
305
- name: 'updatedAt',
306
- header: i18next.t('field.updated_at'),
307
- width: 180,
308
- sortable: true
309
- },
310
- {
311
- type: 'image',
312
- name: 'picture',
313
- record: {
314
- renderer: function (value, column, record, rowIndex, field) {
315
- return html `<ox-pfp-view
316
- style="height:90%; width: unset; aspect-ratio: 1 / 1;"
317
- .profile=${record.picture}
318
- .name=${record.name}
319
- ></ox-pfp-view>`;
320
- }
321
- },
322
- hidden: true
323
- }
324
- ],
325
- rows: {
326
- appendable: false,
327
- selectable: {
328
- multiple: true
329
- }
330
- },
331
- sorters: [
332
- {
333
- name: 'controlNo'
334
- }
335
- ],
336
- tree: {
337
- childrenProperty: 'children',
338
- expanded: () => true
339
- }
340
- };
207
+ this.fetch();
341
208
  }
342
209
  async pageUpdated(changes, lifecycle) {
343
210
  if (this.active) {
344
211
  // do something here when this page just became as active
345
212
  }
346
213
  }
347
- async create() {
348
- // const { id: parentId } = this.selected || {}
349
- // const { controlNo, name, description, state, picture, active, manager } = this.grist.department
350
- // var department = {
351
- // controlNo,
352
- // name,
353
- // description,
354
- // state,
355
- // manager,
356
- // active
357
- // } as any
358
- // if (picture instanceof File) {
359
- // department.picture = picture
360
- // }
361
- // if (parentId) {
362
- // department.parent = { id: parentId }
363
- // }
364
- // const response = await client.mutate({
365
- // mutation: gql`
366
- // mutation ($department: NewDepartment!) {
367
- // createDepartment(department: $department) {
368
- // ...Department_department
369
- // }
370
- // }
371
- // ${departmentFragment}
372
- // `,
373
- // variables: {
374
- // department
375
- // },
376
- // context: {
377
- // hasUpload: true
378
- // }
379
- // })
380
- // this.selected = response.data.createDepartment
381
- // this.updateContext()
382
- await this.grist.fetch();
383
- }
384
- // async _deleteDataSet() {
385
- // if (confirm(i18next.t('text.sure_to_x', { x: i18next.t('text.delete') }))) {
386
- // const ids = this.grist.selected.map(record => record.id)
387
- // if (ids && ids.length > 0) {
388
- // const response = await client.mutate({
389
- // mutation: gql`
390
- // mutation ($ids: [String!]!) {
391
- // deleteDataSets(ids: $ids)
392
- // }
393
- // `,
394
- // variables: {
395
- // ids
396
- // }
397
- // })
398
- // if (!response.errors) {
399
- // this.grist.fetch()
400
- // notify({
401
- // message: i18next.t('text.info_x_successfully', { x: i18next.t('text.delete') })
402
- // })
403
- // }
404
- // }
405
- // }
406
- // }
407
- // async _copyDataSet() {
408
- // var selected = this.grist.selected
409
- // if (selected.length == 0) return
410
- // if (!confirm(i18next.t('text.sure_to_x', { x: i18next.t('text.copy') }))) return
411
- // var response = await client.mutate({
412
- // mutation: gql`
413
- // mutation ($ids: [String!]!) {
414
- // copyDataSets(ids: $ids) {
415
- // id
416
- // }
417
- // }
418
- // `,
419
- // variables: {
420
- // ids: selected.map(r => r.id)
421
- // }
422
- // })
423
- // if (!response.errors) {
424
- // this.grist.fetch()
425
- // }
426
- // }
427
- // async save() {
428
- // const { id, controlNo, name, description, state, picture, active, manager } = this.departmentView.department
429
- // if (!id) {
430
- // alert('Please select department first.')
431
- // }
432
- // var patch = {
433
- // controlNo,
434
- // name,
435
- // description,
436
- // state,
437
- // active,
438
- // manager
439
- // } as any
440
- // if (picture instanceof File) {
441
- // patch.picture = picture
442
- // }
443
- // const response = await client.mutate({
444
- // mutation: gql`
445
- // mutation ($id: String!, $patch: DepartmentPatch!) {
446
- // updateDepartment(id: $id, patch: $patch) {
447
- // ...Department_department
448
- // }
449
- // }
450
- // ${departmentFragment}
451
- // `,
452
- // variables: {
453
- // id,
454
- // patch
455
- // },
456
- // context: {
457
- // hasUpload: true
458
- // }
459
- // })
460
- // this.selected = response.data.updateDepartment
461
- // this.fetch()
462
- // }
463
- async save() {
464
- let patches = this.grist.dirtyRecords;
465
- if (patches && patches.length) {
466
- patches = patches.map(patch => {
467
- let patchField = patch.id ? { id: patch.id } : {};
468
- const dirtyFields = patch.__dirtyfields__;
469
- for (let key in dirtyFields) {
470
- patchField[key] = dirtyFields[key].after;
214
+ async fetch() {
215
+ const response = await client.query({
216
+ query: gql `
217
+ query {
218
+ responses: departmentRoots {
219
+ total
220
+ items {
221
+ ...departmentFragment
222
+ children {
223
+ ...departmentFragment
224
+ children {
225
+ ...departmentFragment
226
+ children {
227
+ ...departmentFragment
228
+ children {
229
+ ...departmentFragment
230
+ children {
231
+ ...departmentFragment
232
+ children {
233
+ ...departmentFragment
234
+ children {
235
+ ...departmentFragment
236
+ }
237
+ }
238
+ }
239
+ }
240
+ }
471
241
  }
472
- patchField.cuFlag = patch.__dirty__;
473
- return patchField;
474
- });
475
- const response = await client.mutate({
476
- mutation: gql `
477
- mutation ($patches: [DepartmentPatch!]!) {
478
- updateMultipleDepartment(patches: $patches) {
479
- name
242
+ }
480
243
  }
481
244
  }
482
- `,
483
- variables: {
484
- patches
485
- },
486
- context: {
487
- hasUpload: true
488
- }
489
- });
490
- if (!response.errors) {
491
- this.grist.fetch();
492
- }
493
245
  }
246
+
247
+ ${departmentFragment}
248
+ `
249
+ });
250
+ const { items: records, total } = response.data.responses;
251
+ this.root = records[0];
494
252
  }
495
253
  async exportHandler() { }
496
254
  async importHandler(records) { }
497
255
  };
498
256
  DepartmentTreePage.styles = [
499
- ScrollbarStyles,
500
257
  CommonHeaderStyles,
258
+ ScrollbarStyles,
501
259
  css `
502
260
  :host {
503
261
  display: flex;
262
+ flex-direction: column;
504
263
 
505
264
  width: 100%;
265
+ overflow: auto;
266
+ }
506
267
 
507
- --grid-record-emphasized-background-color: #8b0000;
508
- --grid-record-emphasized-color: #ff6b6b;
268
+ ox-tree-vertical {
269
+ flex: 1;
509
270
  }
510
271
 
511
- ox-grist {
512
- overflow-y: auto;
272
+ department-view {
513
273
  flex: 1;
274
+
275
+ max-width: 500px;
276
+ align-self: center;
514
277
  }
515
278
  `
516
279
  ];
@@ -523,13 +286,9 @@ __decorate([
523
286
  __metadata("design:type", Department)
524
287
  ], DepartmentTreePage.prototype, "selected", void 0);
525
288
  __decorate([
526
- query('ox-grist'),
527
- __metadata("design:type", DataGrist)
528
- ], DepartmentTreePage.prototype, "grist", void 0);
529
- __decorate([
530
- property({ type: Object }),
531
- __metadata("design:type", Object)
532
- ], DepartmentTreePage.prototype, "gristConfig", void 0);
289
+ query('department-view'),
290
+ __metadata("design:type", DepartmentView)
291
+ ], DepartmentTreePage.prototype, "departmentView", void 0);
533
292
  DepartmentTreePage = __decorate([
534
293
  customElement('department-tree-page')
535
294
  ], DepartmentTreePage);