@things-factory/worklist 6.1.48 → 6.1.53

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 (18) hide show
  1. package/client/bootstrap.ts +11 -1
  2. package/client/components/activity-instance-ribon.ts +207 -0
  3. package/client/pages/activity-instance/activity-instance-start-page.ts +12 -8
  4. package/dist-client/bootstrap.js +11 -2
  5. package/dist-client/bootstrap.js.map +1 -1
  6. package/dist-client/components/activity-instance-ribon.d.ts +13 -0
  7. package/dist-client/components/activity-instance-ribon.js +212 -0
  8. package/dist-client/components/activity-instance-ribon.js.map +1 -0
  9. package/dist-client/pages/activity-instance/activity-instance-start-page.d.ts +4 -3
  10. package/dist-client/pages/activity-instance/activity-instance-start-page.js +9 -4
  11. package/dist-client/pages/activity-instance/activity-instance-start-page.js.map +1 -1
  12. package/dist-client/tsconfig.tsbuildinfo +1 -1
  13. package/dist-server/tsconfig.tsbuildinfo +1 -1
  14. package/package.json +2 -2
  15. package/dist-server/middlewares/index.js +0 -8
  16. package/dist-server/middlewares/index.js.map +0 -1
  17. package/dist-server/migrations/index.js +0 -12
  18. package/dist-server/migrations/index.js.map +0 -1
package/client/bootstrap.ts CHANGED
@@ -5,7 +5,7 @@ import './templates/activity-instance-context-template.js'
5
5
 
6
6
  import { html } from 'lit-html'
7
7
  import { store } from '@operato/shell'
8
- import { openOverlay, TOOL_POSITION } from '@operato/layout'
8
+ import { appendViewpart, openOverlay, TOOL_POSITION, VIEWPART_POSITION } from '@operato/layout'
9
9
  import { APPEND_CONTEXT_TOOL } from '@things-factory/context-ui'
10
10
 
11
11
  import { registerEditor as registerGristEditor, registerRenderer as registerGristRenderer } from '@operato/data-grist'
@@ -17,6 +17,16 @@ import { GristEditorActivitySearchKeys } from './grist-editor/grist-editor-activ
17
17
  import { GristRendererActivitySearchKeys } from './grist-editor/grist-renderer-activity-search-key.js'
18
18
 
19
19
  export default function bootstrap() {
20
+ appendViewpart({
21
+ name: 'activity-info-overlay',
22
+ viewpart: {
23
+ show: false,
24
+ hovering: 'edge',
25
+ backdrop: true,
26
+ template: html``
27
+ },
28
+ position: VIEWPART_POSITION.ASIDEBAR
29
+ })
20
30
  ;[
21
31
  {
22
32
  template: html` <activity-approval-context-template></activity-approval-context-template> `,
package/client/components/activity-instance-ribon.ts ADDED
@@ -0,0 +1,207 @@
1
+ import '@material/mwc-button'
2
+ import '@operato/property-editor/ox-properties-dynamic-view.js'
3
+ import '../templates/activity-instance-context-template.js'
4
+
5
+ import { css, html, LitElement } from 'lit'
6
+ import { customElement, property, state } from 'lit/decorators.js'
7
+
8
+ import { i18next, localize } from '@operato/i18n'
9
+ import { toggleOverlay } from '@operato/layout'
10
+
11
+ @customElement('activity-instance-ribon')
12
+ export class ActivityInstanceRibon extends localize(i18next)(LitElement) {
13
+ static styles = [
14
+ css`
15
+ :host {
16
+ display: flex;
17
+ flex-direction: row;
18
+ padding: 0 var(--padding-default);
19
+
20
+ color: var(--theme-white-color);
21
+ }
22
+
23
+ div {
24
+ border-left: var(--border-dark-color);
25
+ padding: var(--padding-narrow) var(--padding-default);
26
+ }
27
+
28
+ :host([state='draft']) {
29
+ background-color: #4b8be1;
30
+ }
31
+
32
+ :host([state='issued']) {
33
+ background-color: #599b4d;
34
+ }
35
+
36
+ :host([state='pending-assignment']) {
37
+ background-color: #4b8be1;
38
+ }
39
+
40
+ :host([state='assigned']) {
41
+ background-color: #cb3a33;
42
+ }
43
+
44
+ :host([state='started']) {
45
+ background-color: #cb3a33;
46
+ }
47
+
48
+ :host([state='pending']) {
49
+ background-color: #cb3a33;
50
+ }
51
+
52
+ :host([state='ended']) {
53
+ background-color: #cb3a33;
54
+ }
55
+
56
+ :host([state='aborted']) {
57
+ background-color: #cb3a33;
58
+ }
59
+
60
+ mwc-icon {
61
+ padding: var(--padding-default) var(--padding-default) 0 0;
62
+ font-size: 24px;
63
+ }
64
+
65
+ [desc] {
66
+ font-size: var(--fontsize-small);
67
+ }
68
+
69
+ [assignee] {
70
+ text-align: center;
71
+ font-size: var(--fontsize-small);
72
+ line-height: 1.3;
73
+ }
74
+
75
+ [assignee] span {
76
+ display: block;
77
+ font-size: var(--fontsize-large);
78
+ font-weight: bold;
79
+ }
80
+
81
+ [flow] ul {
82
+ list-style: none;
83
+ margin: 0;
84
+ padding: 0;
85
+ display: flex;
86
+ }
87
+
88
+ [flow] li {
89
+ width: 85px;
90
+ text-align: center;
91
+ font-size: var(--fontsize-small);
92
+ }
93
+
94
+ [flow] span:before {
95
+ content: '';
96
+ height: 2px;
97
+ width: 70px;
98
+ display: block;
99
+ position: absolute;
100
+ margin-left: -70px;
101
+ margin-top: 6px;
102
+ background-color: rgba(0, 0, 0, 0.4);
103
+ }
104
+
105
+ [flow] span {
106
+ display: block;
107
+ width: 15px;
108
+ height: 15px;
109
+ margin: auto;
110
+ background-color: rgba(0, 0, 0, 0.4);
111
+ border-radius: 50%;
112
+ color: var(--theme-white-color);
113
+ line-height: 1.2;
114
+ }
115
+
116
+ [flow] [past] span {
117
+ background-color: rgba(255, 255, 255, 0.9);
118
+ color: var(--primary-text-color);
119
+ }
120
+
121
+ [flow] [now] span {
122
+ background-color: #84d600;
123
+ color: var(--theme-white-color);
124
+ }
125
+
126
+ [flow] [now] {
127
+ font-weight: bold;
128
+ }
129
+
130
+ [flow] [past] span:before,
131
+ [flow] [now] span:before {
132
+ background-color: rgba(255, 255, 255, 0.9);
133
+ }
134
+
135
+ [flow] li:first-child span:before {
136
+ display: none;
137
+ }
138
+ `
139
+ ]
140
+
141
+ @property({ type: Object }) activity: any = {}
142
+ @property({ type: Object }) activityInstance: any = {}
143
+ // @property({ type: Array }) activityThreads: any
144
+
145
+ // @state() picked: boolean = false
146
+
147
+ render() {
148
+ // const {
149
+ // id,
150
+ // name,
151
+ // description,
152
+ // input,
153
+ // state,
154
+ // threadsMin = 0,
155
+ // threadsMax = 0,
156
+ // activity
157
+ // } = this.activityInstance || {}
158
+ // const { model, thumbnail } = activity || {}
159
+
160
+ // const inputSpec = (model || [])
161
+ // .filter(item => item.inout === 'in' || item.inout === 'inout')
162
+ // .map(item => {
163
+ // return {
164
+ // ...item,
165
+ // label: item.name
166
+ // }
167
+ // })
168
+
169
+ // const pickable = !this.picked && this.activityThreads?.length < threadsMax
170
+
171
+ return html`
172
+ <mwc-icon
173
+ @click=${() => {
174
+ toggleOverlay('activity-info-overlay', {
175
+ template: html`<activity-instance-context-template
176
+ .activityInstance=${this.activityInstance}
177
+ ></activity-instance-context-template>`
178
+ })
179
+ }}
180
+ >description</mwc-icon
181
+ >
182
+
183
+ <div desc>assigned, submitted, rejected 스타일 작성해놨음</div>
184
+
185
+ <div assignee>
186
+ assignee
187
+ <span>홍길동</span>
188
+ </div>
189
+
190
+ <div flow>
191
+ <ul>
192
+ <li past><span>1</span>myself</li>
193
+ <li now><span>2</span>경리실장</li>
194
+ <li><span>3</span>사장님</li>
195
+ </ul>
196
+ </div>
197
+ `
198
+ }
199
+
200
+ updated(changes) {
201
+ if (changes.has('activityInstance')) {
202
+ const { state } = this.activityInstance
203
+
204
+ this.setAttribute('state', state)
205
+ }
206
+ }
207
+ }
package/client/pages/activity-instance/activity-instance-start-page.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  import '@operato/property-editor/ox-properties-dynamic-view.js'
2
2
  import '@operato/board/ox-board-viewer.js'
3
3
  import '@things-factory/organization'
4
+ import '../../components/activity-instance-ribon.js'
4
5
 
5
6
  import gql from 'graphql-tag'
6
7
  import { css, html } from 'lit'
@@ -24,9 +25,6 @@ export class ActivityInstanceStartPage extends connect(store)(localize(i18next)(
24
25
  :host {
25
26
  display: flex;
26
27
  flex-direction: column;
27
-
28
- width: 100%;
29
- padding: 5px;
30
28
  overflow: auto;
31
29
  }
32
30
 
@@ -74,7 +72,14 @@ export class ActivityInstanceStartPage extends connect(store)(localize(i18next)(
74
72
  }
75
73
 
76
74
  render() {
77
- return html` ${this.activityContent()}`
75
+ return html`
76
+ <activity-instance-ribon
77
+ .activity=${this.activity}
78
+ .activityInstance=${this.activityInstance}
79
+ ></activity-instance-ribon>
80
+
81
+ ${this.activityContent()}
82
+ `
78
83
  }
79
84
 
80
85
  activityContent() {
@@ -200,7 +205,7 @@ export class ActivityInstanceStartPage extends connect(store)(localize(i18next)(
200
205
  customElementContent() {
201
206
  const { uiSource: tagName, input, output } = this.activityInstance
202
207
 
203
- if(!this.customHtmlElement){
208
+ if (!this.customHtmlElement) {
204
209
  const element = document.createElement(tagName)
205
210
  element.id = 'custom-content'
206
211
  element.activityId = this.activityInstance.activity.id
@@ -213,7 +218,7 @@ export class ActivityInstanceStartPage extends connect(store)(localize(i18next)(
213
218
  element.addEventListener('change-output', (e: CustomEvent) => {
214
219
  this.activityInstance.output = e.detail
215
220
  })
216
-
221
+
217
222
  /* DEPRECATED 일반적으로 output만 수정될 가능성이 높기때문에, change 이벤트는 output을 수정하는 것으로 한다. */
218
223
  element.addEventListener('change', (e: CustomEvent) => {
219
224
  this.activityInstance.output = e.detail
@@ -222,7 +227,6 @@ export class ActivityInstanceStartPage extends connect(store)(localize(i18next)(
222
227
  this.customHtmlElement = element
223
228
  }
224
229
 
225
-
226
230
  return this.customHtmlElement
227
231
  }
228
232
 
@@ -254,7 +258,7 @@ export class ActivityInstanceStartPage extends connect(store)(localize(i18next)(
254
258
  if (this.active) {
255
259
  this.fetchActivityInstance(lifecycle.resourceId)
256
260
  } else {
257
- this.customHtmlElement = undefined;
261
+ this.customHtmlElement = undefined
258
262
  }
259
263
  }
260
264
 
package/dist-client/bootstrap.js CHANGED
@@ -4,7 +4,7 @@ import './templates/activity-thread-context-template.js';
4
4
  import './templates/activity-instance-context-template.js';
5
5
  import { html } from 'lit-html';
6
6
  import { store } from '@operato/shell';
7
- import { openOverlay, TOOL_POSITION } from '@operato/layout';
7
+ import { appendViewpart, openOverlay, TOOL_POSITION, VIEWPART_POSITION } from '@operato/layout';
8
8
  import { APPEND_CONTEXT_TOOL } from '@things-factory/context-ui';
9
9
  import { registerEditor as registerGristEditor, registerRenderer as registerGristRenderer } from '@operato/data-grist';
10
10
  import { OxGristEditorDuration } from '@operato/grist-editor/ox-grist-editor-duration.js';
@@ -14,7 +14,16 @@ import { OxGristRendererQuantifier } from '@operato/grist-editor/ox-grist-render
14
14
  import { GristEditorActivitySearchKeys } from './grist-editor/grist-editor-activity-search-key.js';
15
15
  import { GristRendererActivitySearchKeys } from './grist-editor/grist-renderer-activity-search-key.js';
16
16
  export default function bootstrap() {
17
- ;
17
+ appendViewpart({
18
+ name: 'activity-info-overlay',
19
+ viewpart: {
20
+ show: false,
21
+ hovering: 'edge',
22
+ backdrop: true,
23
+ template: html ``
24
+ },
25
+ position: VIEWPART_POSITION.ASIDEBAR
26
+ });
18
27
  [
19
28
  {
20
29
  template: html ` <activity-approval-context-template></activity-approval-context-template> `,
package/dist-client/bootstrap.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"bootstrap.js","sourceRoot":"","sources":["../client/bootstrap.ts"],"names":[],"mappings":"AAAA,OAAO,oBAAoB,CAAA;AAC3B,OAAO,mDAAmD,CAAA;AAC1D,OAAO,iDAAiD,CAAA;AACxD,OAAO,mDAAmD,CAAA;AAE1D,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAA;AAC/B,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AACtC,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC5D,OAAO,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAA;AAEhE,OAAO,EAAE,cAAc,IAAI,mBAAmB,EAAE,gBAAgB,IAAI,qBAAqB,EAAE,MAAM,qBAAqB,CAAA;AACtH,OAAO,EAAE,qBAAqB,EAAE,MAAM,mDAAmD,CAAA;AACzF,OAAO,EAAE,uBAAuB,EAAE,MAAM,qDAAqD,CAAA;AAC7F,OAAO,EAAE,uBAAuB,EAAE,MAAM,qDAAqD,CAAA;AAC7F,OAAO,EAAE,yBAAyB,EAAE,MAAM,uDAAuD,CAAA;AACjG,OAAO,EAAE,6BAA6B,EAAE,MAAM,oDAAoD,CAAA;AAClG,OAAO,EAAE,+BAA+B,EAAE,MAAM,sDAAsD,CAAA;AAEtG,MAAM,CAAC,OAAO,UAAU,SAAS;IAC/B,CAAC;IAAA;QACC;YACE,QAAQ,EAAE,IAAI,CAAA,6EAA6E;YAC3F,OAAO,EAAE,kBAAkB;SAC5B;QACD;YACE,QAAQ,EAAE,IAAI,CAAA,yEAAyE;YACvF,OAAO,EAAE,gBAAgB;SAC1B;QACD;YACE,QAAQ,EAAE,IAAI,CAAA,6EAA6E;YAC3F,OAAO,EAAE,kBAAkB;SAC5B;KACF,CAAC,OAAO,CAAC,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,EAAE;QAClC,KAAK,CAAC,QAAQ,CAAC;YACb,IAAI,EAAE,mBAAmB;YACzB,IAAI,EAAE;gBACJ,QAAQ,EAAE,aAAa,CAAC,KAAK;gBAC7B,QAAQ,EAAE,IAAI,CAAA;;qBAED,KAAK,EAAC,CAAC,EAAC,EAAE;oBACjB,WAAW,CAAC,yBAAyB,EAAE;wBACrC,QAAQ;qBACT,CAAC,CAAA;gBACJ,CAAC;;;SAGJ;gBACD,OAAO;aACR;SACF,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;IAEF,mBAAmB,CAAC,UAAU,EAAE,qBAAqB,CAAC,CAAA;IACtD,qBAAqB,CAAC,UAAU,EAAE,uBAAuB,CAAC,CAAA;IAC1D,mBAAmB,CAAC,YAAY,EAAE,uBAAuB,CAAC,CAAA;IAC1D,qBAAqB,CAAC,YAAY,EAAE,yBAAyB,CAAC,CAAA;IAE9D,mBAAmB,CAAC,sBAAsB,EAAE,6BAA6B,CAAC,CAAA;IAC1E,qBAAqB,CAAC,sBAAsB,EAAE,+BAA+B,CAAC,CAAA;AAChF,CAAC","sourcesContent":["import '@material/mwc-icon'\nimport './templates/activity-approval-context-template.js'\nimport './templates/activity-thread-context-template.js'\nimport './templates/activity-instance-context-template.js'\n\nimport { html } from 'lit-html'\nimport { store } from '@operato/shell'\nimport { openOverlay, TOOL_POSITION } from '@operato/layout'\nimport { APPEND_CONTEXT_TOOL } from '@things-factory/context-ui'\n\nimport { registerEditor as registerGristEditor, registerRenderer as registerGristRenderer } from '@operato/data-grist'\nimport { OxGristEditorDuration } from '@operato/grist-editor/ox-grist-editor-duration.js'\nimport { OxGristEditorQuantifier } from '@operato/grist-editor/ox-grist-editor-quantifier.js'\nimport { OxGristRendererDuration } from '@operato/grist-editor/ox-grist-renderer-duration.js'\nimport { OxGristRendererQuantifier } from '@operato/grist-editor/ox-grist-renderer-quantifier.js'\nimport { GristEditorActivitySearchKeys } from './grist-editor/grist-editor-activity-search-key.js'\nimport { GristRendererActivitySearchKeys } from './grist-editor/grist-renderer-activity-search-key.js'\n\nexport default function bootstrap() {\n ;[\n {\n template: html` <activity-approval-context-template></activity-approval-context-template> `,\n context: 'activityApproval'\n },\n {\n template: html` <activity-thread-context-template></activity-thread-context-template> `,\n context: 'activityThread'\n },\n {\n template: html` <activity-instance-context-template></activity-instance-context-template> `,\n context: 'activityInstance'\n }\n ].forEach(({ template, context }) => {\n store.dispatch({\n type: APPEND_CONTEXT_TOOL,\n tool: {\n position: TOOL_POSITION.FRONT,\n template: html`\n <mwc-icon\n @click=${async e => {\n openOverlay('context-toolbar-overlay', {\n template\n })\n }}\n >info</mwc-icon\n >\n `,\n context\n }\n })\n })\n\n registerGristEditor('duration', OxGristEditorDuration)\n registerGristRenderer('duration', OxGristRendererDuration)\n registerGristEditor('quantifier', OxGristEditorQuantifier)\n registerGristRenderer('quantifier', OxGristRendererQuantifier)\n\n registerGristEditor('activity-search-keys', GristEditorActivitySearchKeys)\n registerGristRenderer('activity-search-keys', GristRendererActivitySearchKeys)\n}\n"]}
1
+ {"version":3,"file":"bootstrap.js","sourceRoot":"","sources":["../client/bootstrap.ts"],"names":[],"mappings":"AAAA,OAAO,oBAAoB,CAAA;AAC3B,OAAO,mDAAmD,CAAA;AAC1D,OAAO,iDAAiD,CAAA;AACxD,OAAO,mDAAmD,CAAA;AAE1D,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAA;AAC/B,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AACtC,OAAO,EAAE,cAAc,EAAE,WAAW,EAAE,aAAa,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAA;AAC/F,OAAO,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAA;AAEhE,OAAO,EAAE,cAAc,IAAI,mBAAmB,EAAE,gBAAgB,IAAI,qBAAqB,EAAE,MAAM,qBAAqB,CAAA;AACtH,OAAO,EAAE,qBAAqB,EAAE,MAAM,mDAAmD,CAAA;AACzF,OAAO,EAAE,uBAAuB,EAAE,MAAM,qDAAqD,CAAA;AAC7F,OAAO,EAAE,uBAAuB,EAAE,MAAM,qDAAqD,CAAA;AAC7F,OAAO,EAAE,yBAAyB,EAAE,MAAM,uDAAuD,CAAA;AACjG,OAAO,EAAE,6BAA6B,EAAE,MAAM,oDAAoD,CAAA;AAClG,OAAO,EAAE,+BAA+B,EAAE,MAAM,sDAAsD,CAAA;AAEtG,MAAM,CAAC,OAAO,UAAU,SAAS;IAC/B,cAAc,CAAC;QACb,IAAI,EAAE,uBAAuB;QAC7B,QAAQ,EAAE;YACR,IAAI,EAAE,KAAK;YACX,QAAQ,EAAE,MAAM;YAChB,QAAQ,EAAE,IAAI;YACd,QAAQ,EAAE,IAAI,CAAA,EAAE;SACjB;QACD,QAAQ,EAAE,iBAAiB,CAAC,QAAQ;KACrC,CAAC,CACD;IAAA;QACC;YACE,QAAQ,EAAE,IAAI,CAAA,6EAA6E;YAC3F,OAAO,EAAE,kBAAkB;SAC5B;QACD;YACE,QAAQ,EAAE,IAAI,CAAA,yEAAyE;YACvF,OAAO,EAAE,gBAAgB;SAC1B;QACD;YACE,QAAQ,EAAE,IAAI,CAAA,6EAA6E;YAC3F,OAAO,EAAE,kBAAkB;SAC5B;KACF,CAAC,OAAO,CAAC,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,EAAE;QAClC,KAAK,CAAC,QAAQ,CAAC;YACb,IAAI,EAAE,mBAAmB;YACzB,IAAI,EAAE;gBACJ,QAAQ,EAAE,aAAa,CAAC,KAAK;gBAC7B,QAAQ,EAAE,IAAI,CAAA;;qBAED,KAAK,EAAC,CAAC,EAAC,EAAE;oBACjB,WAAW,CAAC,yBAAyB,EAAE;wBACrC,QAAQ;qBACT,CAAC,CAAA;gBACJ,CAAC;;;SAGJ;gBACD,OAAO;aACR;SACF,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;IAEF,mBAAmB,CAAC,UAAU,EAAE,qBAAqB,CAAC,CAAA;IACtD,qBAAqB,CAAC,UAAU,EAAE,uBAAuB,CAAC,CAAA;IAC1D,mBAAmB,CAAC,YAAY,EAAE,uBAAuB,CAAC,CAAA;IAC1D,qBAAqB,CAAC,YAAY,EAAE,yBAAyB,CAAC,CAAA;IAE9D,mBAAmB,CAAC,sBAAsB,EAAE,6BAA6B,CAAC,CAAA;IAC1E,qBAAqB,CAAC,sBAAsB,EAAE,+BAA+B,CAAC,CAAA;AAChF,CAAC","sourcesContent":["import '@material/mwc-icon'\nimport './templates/activity-approval-context-template.js'\nimport './templates/activity-thread-context-template.js'\nimport './templates/activity-instance-context-template.js'\n\nimport { html } from 'lit-html'\nimport { store } from '@operato/shell'\nimport { appendViewpart, openOverlay, TOOL_POSITION, VIEWPART_POSITION } from '@operato/layout'\nimport { APPEND_CONTEXT_TOOL } from '@things-factory/context-ui'\n\nimport { registerEditor as registerGristEditor, registerRenderer as registerGristRenderer } from '@operato/data-grist'\nimport { OxGristEditorDuration } from '@operato/grist-editor/ox-grist-editor-duration.js'\nimport { OxGristEditorQuantifier } from '@operato/grist-editor/ox-grist-editor-quantifier.js'\nimport { OxGristRendererDuration } from '@operato/grist-editor/ox-grist-renderer-duration.js'\nimport { OxGristRendererQuantifier } from '@operato/grist-editor/ox-grist-renderer-quantifier.js'\nimport { GristEditorActivitySearchKeys } from './grist-editor/grist-editor-activity-search-key.js'\nimport { GristRendererActivitySearchKeys } from './grist-editor/grist-renderer-activity-search-key.js'\n\nexport default function bootstrap() {\n appendViewpart({\n name: 'activity-info-overlay',\n viewpart: {\n show: false,\n hovering: 'edge',\n backdrop: true,\n template: html``\n },\n position: VIEWPART_POSITION.ASIDEBAR\n })\n ;[\n {\n template: html` <activity-approval-context-template></activity-approval-context-template> `,\n context: 'activityApproval'\n },\n {\n template: html` <activity-thread-context-template></activity-thread-context-template> `,\n context: 'activityThread'\n },\n {\n template: html` <activity-instance-context-template></activity-instance-context-template> `,\n context: 'activityInstance'\n }\n ].forEach(({ template, context }) => {\n store.dispatch({\n type: APPEND_CONTEXT_TOOL,\n tool: {\n position: TOOL_POSITION.FRONT,\n template: html`\n <mwc-icon\n @click=${async e => {\n openOverlay('context-toolbar-overlay', {\n template\n })\n }}\n >info</mwc-icon\n >\n `,\n context\n }\n })\n })\n\n registerGristEditor('duration', OxGristEditorDuration)\n registerGristRenderer('duration', OxGristRendererDuration)\n registerGristEditor('quantifier', OxGristEditorQuantifier)\n registerGristRenderer('quantifier', OxGristRendererQuantifier)\n\n registerGristEditor('activity-search-keys', GristEditorActivitySearchKeys)\n registerGristRenderer('activity-search-keys', GristRendererActivitySearchKeys)\n}\n"]}
package/dist-client/components/activity-instance-ribon.d.ts ADDED
@@ -0,0 +1,13 @@
1
+ import '@material/mwc-button';
2
+ import '@operato/property-editor/ox-properties-dynamic-view.js';
3
+ import '../templates/activity-instance-context-template.js';
4
+ import { LitElement } from 'lit';
5
+ declare const ActivityInstanceRibon_base: (new (...args: any[]) => LitElement) & typeof LitElement;
6
+ export declare class ActivityInstanceRibon extends ActivityInstanceRibon_base {
7
+ static styles: import("lit").CSSResult[];
8
+ activity: any;
9
+ activityInstance: any;
10
+ render(): import("lit-html").TemplateResult<1>;
11
+ updated(changes: any): void;
12
+ }
13
+ export {};
package/dist-client/components/activity-instance-ribon.js ADDED
@@ -0,0 +1,212 @@
1
+ import { __decorate, __metadata } from "tslib";
2
+ import '@material/mwc-button';
3
+ import '@operato/property-editor/ox-properties-dynamic-view.js';
4
+ import '../templates/activity-instance-context-template.js';
5
+ import { css, html, LitElement } from 'lit';
6
+ import { customElement, property } from 'lit/decorators.js';
7
+ import { i18next, localize } from '@operato/i18n';
8
+ import { toggleOverlay } from '@operato/layout';
9
+ let ActivityInstanceRibon = class ActivityInstanceRibon extends localize(i18next)(LitElement) {
10
+ constructor() {
11
+ super(...arguments);
12
+ this.activity = {};
13
+ this.activityInstance = {};
14
+ }
15
+ // @property({ type: Array }) activityThreads: any
16
+ // @state() picked: boolean = false
17
+ render() {
18
+ // const {
19
+ // id,
20
+ // name,
21
+ // description,
22
+ // input,
23
+ // state,
24
+ // threadsMin = 0,
25
+ // threadsMax = 0,
26
+ // activity
27
+ // } = this.activityInstance || {}
28
+ // const { model, thumbnail } = activity || {}
29
+ // const inputSpec = (model || [])
30
+ // .filter(item => item.inout === 'in' || item.inout === 'inout')
31
+ // .map(item => {
32
+ // return {
33
+ // ...item,
34
+ // label: item.name
35
+ // }
36
+ // })
37
+ // const pickable = !this.picked && this.activityThreads?.length < threadsMax
38
+ return html `
39
+ <mwc-icon
40
+ @click=${() => {
41
+ toggleOverlay('activity-info-overlay', {
42
+ template: html `<activity-instance-context-template
43
+ .activityInstance=${this.activityInstance}
44
+ ></activity-instance-context-template>`
45
+ });
46
+ }}
47
+ >description</mwc-icon
48
+ >
49
+
50
+ <div desc>assigned, submitted, rejected 스타일 작성해놨음</div>
51
+
52
+ <div assignee>
53
+ assignee
54
+ <span>홍길동</span>
55
+ </div>
56
+
57
+ <div flow>
58
+ <ul>
59
+ <li past><span>1</span>myself</li>
60
+ <li now><span>2</span>경리실장</li>
61
+ <li><span>3</span>사장님</li>
62
+ </ul>
63
+ </div>
64
+ `;
65
+ }
66
+ updated(changes) {
67
+ if (changes.has('activityInstance')) {
68
+ const { state } = this.activityInstance;
69
+ this.setAttribute('state', state);
70
+ }
71
+ }
72
+ };
73
+ ActivityInstanceRibon.styles = [
74
+ css `
75
+ :host {
76
+ display: flex;
77
+ flex-direction: row;
78
+ padding: 0 var(--padding-default);
79
+
80
+ color: var(--theme-white-color);
81
+ }
82
+
83
+ div {
84
+ border-left: var(--border-dark-color);
85
+ padding: var(--padding-narrow) var(--padding-default);
86
+ }
87
+
88
+ :host([state='draft']) {
89
+ background-color: #4b8be1;
90
+ }
91
+
92
+ :host([state='issued']) {
93
+ background-color: #599b4d;
94
+ }
95
+
96
+ :host([state='pending-assignment']) {
97
+ background-color: #4b8be1;
98
+ }
99
+
100
+ :host([state='assigned']) {
101
+ background-color: #cb3a33;
102
+ }
103
+
104
+ :host([state='started']) {
105
+ background-color: #cb3a33;
106
+ }
107
+
108
+ :host([state='pending']) {
109
+ background-color: #cb3a33;
110
+ }
111
+
112
+ :host([state='ended']) {
113
+ background-color: #cb3a33;
114
+ }
115
+
116
+ :host([state='aborted']) {
117
+ background-color: #cb3a33;
118
+ }
119
+
120
+ mwc-icon {
121
+ padding: var(--padding-default) var(--padding-default) 0 0;
122
+ font-size: 24px;
123
+ }
124
+
125
+ [desc] {
126
+ font-size: var(--fontsize-small);
127
+ }
128
+
129
+ [assignee] {
130
+ text-align: center;
131
+ font-size: var(--fontsize-small);
132
+ line-height: 1.3;
133
+ }
134
+
135
+ [assignee] span {
136
+ display: block;
137
+ font-size: var(--fontsize-large);
138
+ font-weight: bold;
139
+ }
140
+
141
+ [flow] ul {
142
+ list-style: none;
143
+ margin: 0;
144
+ padding: 0;
145
+ display: flex;
146
+ }
147
+
148
+ [flow] li {
149
+ width: 85px;
150
+ text-align: center;
151
+ font-size: var(--fontsize-small);
152
+ }
153
+
154
+ [flow] span:before {
155
+ content: '';
156
+ height: 2px;
157
+ width: 70px;
158
+ display: block;
159
+ position: absolute;
160
+ margin-left: -70px;
161
+ margin-top: 6px;
162
+ background-color: rgba(0, 0, 0, 0.4);
163
+ }
164
+
165
+ [flow] span {
166
+ display: block;
167
+ width: 15px;
168
+ height: 15px;
169
+ margin: auto;
170
+ background-color: rgba(0, 0, 0, 0.4);
171
+ border-radius: 50%;
172
+ color: var(--theme-white-color);
173
+ line-height: 1.2;
174
+ }
175
+
176
+ [flow] [past] span {
177
+ background-color: rgba(255, 255, 255, 0.9);
178
+ color: var(--primary-text-color);
179
+ }
180
+
181
+ [flow] [now] span {
182
+ background-color: #84d600;
183
+ color: var(--theme-white-color);
184
+ }
185
+
186
+ [flow] [now] {
187
+ font-weight: bold;
188
+ }
189
+
190
+ [flow] [past] span:before,
191
+ [flow] [now] span:before {
192
+ background-color: rgba(255, 255, 255, 0.9);
193
+ }
194
+
195
+ [flow] li:first-child span:before {
196
+ display: none;
197
+ }
198
+ `
199
+ ];
200
+ __decorate([
201
+ property({ type: Object }),
202
+ __metadata("design:type", Object)
203
+ ], ActivityInstanceRibon.prototype, "activity", void 0);
204
+ __decorate([
205
+ property({ type: Object }),
206
+ __metadata("design:type", Object)
207
+ ], ActivityInstanceRibon.prototype, "activityInstance", void 0);
208
+ ActivityInstanceRibon = __decorate([
209
+ customElement('activity-instance-ribon')
210
+ ], ActivityInstanceRibon);
211
+ export { ActivityInstanceRibon };
212
+ //# sourceMappingURL=activity-instance-ribon.js.map
package/dist-client/components/activity-instance-ribon.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"activity-instance-ribon.js","sourceRoot":"","sources":["../../client/components/activity-instance-ribon.ts"],"names":[],"mappings":";AAAA,OAAO,sBAAsB,CAAA;AAC7B,OAAO,wDAAwD,CAAA;AAC/D,OAAO,oDAAoD,CAAA;AAE3D,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAS,MAAM,mBAAmB,CAAA;AAElE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACjD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAGxC,IAAM,qBAAqB,GAA3B,MAAM,qBAAsB,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;IAAjE;;QAiIuB,aAAQ,GAAQ,EAAE,CAAA;QAClB,qBAAgB,GAAQ,EAAE,CAAA;IAiExD,CAAC;IAhEC,kDAAkD;IAElD,mCAAmC;IAEnC,MAAM;QACJ,UAAU;QACV,QAAQ;QACR,UAAU;QACV,iBAAiB;QACjB,WAAW;QACX,WAAW;QACX,oBAAoB;QACpB,oBAAoB;QACpB,aAAa;QACb,kCAAkC;QAClC,8CAA8C;QAE9C,kCAAkC;QAClC,mEAAmE;QACnE,mBAAmB;QACnB,eAAe;QACf,iBAAiB;QACjB,yBAAyB;QACzB,QAAQ;QACR,OAAO;QAEP,6EAA6E;QAE7E,OAAO,IAAI,CAAA;;iBAEE,GAAG,EAAE;YACZ,aAAa,CAAC,uBAAuB,EAAE;gBACrC,QAAQ,EAAE,IAAI,CAAA;kCACQ,IAAI,CAAC,gBAAgB;mDACJ;aACxC,CAAC,CAAA;QACJ,CAAC;;;;;;;;;;;;;;;;;;KAkBJ,CAAA;IACH,CAAC;IAED,OAAO,CAAC,OAAO;QACb,IAAI,OAAO,CAAC,GAAG,CAAC,kBAAkB,CAAC,EAAE;YACnC,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,gBAAgB,CAAA;YAEvC,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE,KAAK,CAAC,CAAA;SAClC;IACH,CAAC;;AAjMM,4BAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA4HF;CACF,CAAA;AAED;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;uDAAmB;AAC9C;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;+DAA2B;AAlI3C,qBAAqB;IADjC,aAAa,CAAC,yBAAyB,CAAC;GAC5B,qBAAqB,CAmMjC;SAnMY,qBAAqB","sourcesContent":["import '@material/mwc-button'\nimport '@operato/property-editor/ox-properties-dynamic-view.js'\nimport '../templates/activity-instance-context-template.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { toggleOverlay } from '@operato/layout'\n\n@customElement('activity-instance-ribon')\nexport class ActivityInstanceRibon extends localize(i18next)(LitElement) {\n static styles = [\n css`\n :host {\n display: flex;\n flex-direction: row;\n padding: 0 var(--padding-default);\n\n color: var(--theme-white-color);\n }\n\n div {\n border-left: var(--border-dark-color);\n padding: var(--padding-narrow) var(--padding-default);\n }\n\n :host([state='draft']) {\n background-color: #4b8be1;\n }\n\n :host([state='issued']) {\n background-color: #599b4d;\n }\n\n :host([state='pending-assignment']) {\n background-color: #4b8be1;\n }\n\n :host([state='assigned']) {\n background-color: #cb3a33;\n }\n\n :host([state='started']) {\n background-color: #cb3a33;\n }\n\n :host([state='pending']) {\n background-color: #cb3a33;\n }\n\n :host([state='ended']) {\n background-color: #cb3a33;\n }\n\n :host([state='aborted']) {\n background-color: #cb3a33;\n }\n\n mwc-icon {\n padding: var(--padding-default) var(--padding-default) 0 0;\n font-size: 24px;\n }\n\n [desc] {\n font-size: var(--fontsize-small);\n }\n\n [assignee] {\n text-align: center;\n font-size: var(--fontsize-small);\n line-height: 1.3;\n }\n\n [assignee] span {\n display: block;\n font-size: var(--fontsize-large);\n font-weight: bold;\n }\n\n [flow] ul {\n list-style: none;\n margin: 0;\n padding: 0;\n display: flex;\n }\n\n [flow] li {\n width: 85px;\n text-align: center;\n font-size: var(--fontsize-small);\n }\n\n [flow] span:before {\n content: '';\n height: 2px;\n width: 70px;\n display: block;\n position: absolute;\n margin-left: -70px;\n margin-top: 6px;\n background-color: rgba(0, 0, 0, 0.4);\n }\n\n [flow] span {\n display: block;\n width: 15px;\n height: 15px;\n margin: auto;\n background-color: rgba(0, 0, 0, 0.4);\n border-radius: 50%;\n color: var(--theme-white-color);\n line-height: 1.2;\n }\n\n [flow] [past] span {\n background-color: rgba(255, 255, 255, 0.9);\n color: var(--primary-text-color);\n }\n\n [flow] [now] span {\n background-color: #84d600;\n color: var(--theme-white-color);\n }\n\n [flow] [now] {\n font-weight: bold;\n }\n\n [flow] [past] span:before,\n [flow] [now] span:before {\n background-color: rgba(255, 255, 255, 0.9);\n }\n\n [flow] li:first-child span:before {\n display: none;\n }\n `\n ]\n\n @property({ type: Object }) activity: any = {}\n @property({ type: Object }) activityInstance: any = {}\n // @property({ type: Array }) activityThreads: any\n\n // @state() picked: boolean = false\n\n render() {\n // const {\n // id,\n // name,\n // description,\n // input,\n // state,\n // threadsMin = 0,\n // threadsMax = 0,\n // activity\n // } = this.activityInstance || {}\n // const { model, thumbnail } = activity || {}\n\n // const inputSpec = (model || [])\n // .filter(item => item.inout === 'in' || item.inout === 'inout')\n // .map(item => {\n // return {\n // ...item,\n // label: item.name\n // }\n // })\n\n // const pickable = !this.picked && this.activityThreads?.length < threadsMax\n\n return html`\n <mwc-icon\n @click=${() => {\n toggleOverlay('activity-info-overlay', {\n template: html`<activity-instance-context-template\n .activityInstance=${this.activityInstance}\n ></activity-instance-context-template>`\n })\n }}\n >description</mwc-icon\n >\n\n <div desc>assigned, submitted, rejected 스타일 작성해놨음</div>\n\n <div assignee>\n assignee\n <span>홍길동</span>\n </div>\n\n <div flow>\n <ul>\n <li past><span>1</span>myself</li>\n <li now><span>2</span>경리실장</li>\n <li><span>3</span>사장님</li>\n </ul>\n </div>\n `\n }\n\n updated(changes) {\n if (changes.has('activityInstance')) {\n const { state } = this.activityInstance\n\n this.setAttribute('state', state)\n }\n }\n}\n"]}
package/dist-client/pages/activity-instance/activity-instance-start-page.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  import '@operato/property-editor/ox-properties-dynamic-view.js';
2
2
  import '@operato/board/ox-board-viewer.js';
3
3
  import '@things-factory/organization';
4
+ import '../../components/activity-instance-ribon.js';
4
5
  import { PageView } from '@operato/shell';
5
6
  declare const ActivityInstanceStartPage_base: (new (...args: any[]) => {
6
7
  _storeUnsubscribe: import("redux").Unsubscribe;
@@ -34,11 +35,11 @@ export declare class ActivityInstanceStartPage extends ActivityInstanceStartPage
34
35
  };
35
36
  render(): import("lit-html").TemplateResult<1>;
36
37
  activityContent(): any;
37
- templateContent(): import("lit-html/directive").DirectiveResult<typeof import("lit-html/directives/unsafe-html.js").UnsafeHTMLDirective>;
38
+ templateContent(): import("lit-html/directive.js").DirectiveResult<typeof import("lit-html/directives/unsafe-html.js").UnsafeHTMLDirective>;
38
39
  getInputSpec(): any;
39
40
  getOutputSpec(): any;
40
- generatedContent(): import("lit-html/directive").DirectiveResult<typeof import("lit-html/directives/keyed").Keyed>;
41
- boardContent(): import("lit-html/directive").DirectiveResult<typeof import("lit-html/directives/keyed").Keyed>;
41
+ generatedContent(): import("lit-html/directive.js").DirectiveResult<typeof import("lit-html/directives/keyed.js").Keyed>;
42
+ boardContent(): import("lit-html/directive.js").DirectiveResult<typeof import("lit-html/directives/keyed.js").Keyed>;
42
43
  customElementContent(): any;
43
44
  getInOutFromBoard(): any[];
44
45
  updated(changes: any): void;
package/dist-client/pages/activity-instance/activity-instance-start-page.js CHANGED
@@ -2,6 +2,7 @@ import { __decorate, __metadata } from "tslib";
2
2
  import '@operato/property-editor/ox-properties-dynamic-view.js';
3
3
  import '@operato/board/ox-board-viewer.js';
4
4
  import '@things-factory/organization';
5
+ import '../../components/activity-instance-ribon.js';
5
6
  import gql from 'graphql-tag';
6
7
  import { css, html } from 'lit';
7
8
  import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
@@ -36,7 +37,14 @@ let ActivityInstanceStartPage = class ActivityInstanceStartPage extends connect(
36
37
  };
37
38
  }
38
39
  render() {
39
- return html ` ${this.activityContent()}`;
40
+ return html `
41
+ <activity-instance-ribon
42
+ .activity=${this.activity}
43
+ .activityInstance=${this.activityInstance}
44
+ ></activity-instance-ribon>
45
+
46
+ ${this.activityContent()}
47
+ `;
40
48
  }
41
49
  activityContent() {
42
50
  var _a;
@@ -425,9 +433,6 @@ ActivityInstanceStartPage.styles = [
425
433
  :host {
426
434
  display: flex;
427
435
  flex-direction: column;
428
-
429
- width: 100%;
430
- padding: 5px;
431
436
  overflow: auto;
432
437
  }
433
438