@things-factory/worklist 6.1.52 → 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.
- package/client/bootstrap.ts +11 -1
- package/client/components/activity-instance-ribon.ts +207 -0
- package/client/pages/activity-instance/activity-instance-start-page.ts +12 -108
- package/dist-client/bootstrap.js +11 -2
- package/dist-client/bootstrap.js.map +1 -1
- package/dist-client/components/activity-instance-ribon.d.ts +13 -0
- package/dist-client/components/activity-instance-ribon.js +212 -0
- package/dist-client/components/activity-instance-ribon.js.map +1 -0
- package/dist-client/pages/activity-instance/activity-instance-start-page.d.ts +4 -3
- package/dist-client/pages/activity-instance/activity-instance-start-page.js +8 -103
- package/dist-client/pages/activity-instance/activity-instance-start-page.js.map +1 -1
- package/dist-client/tsconfig.tsbuildinfo +1 -1
- package/package.json +2 -2
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> `,
|
|
@@ -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
|
+
}
|
|
@@ -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'
|
|
@@ -35,88 +36,6 @@ export class ActivityInstanceStartPage extends connect(store)(localize(i18next)(
|
|
|
35
36
|
#custom-content {
|
|
36
37
|
flex: 1;
|
|
37
38
|
}
|
|
38
|
-
[worklist-summary]{
|
|
39
|
-
display:flex;
|
|
40
|
-
padding:0 var(--padding-default);
|
|
41
|
-
color:var(--theme-white-color)
|
|
42
|
-
}
|
|
43
|
-
[worklist-summary] div{
|
|
44
|
-
border-left:var(--border-dark-color);
|
|
45
|
-
padding:var(--padding-narrow) var(--padding-default)
|
|
46
|
-
}
|
|
47
|
-
[assigned]{
|
|
48
|
-
background-color:#599B4D;
|
|
49
|
-
}
|
|
50
|
-
[submitted]{
|
|
51
|
-
background-color:#4B8BE1;
|
|
52
|
-
}
|
|
53
|
-
[rejected]{
|
|
54
|
-
background-color:#CB3A33;
|
|
55
|
-
}
|
|
56
|
-
[worklist-summary] mwc-icon{
|
|
57
|
-
padding:var(--padding-default) var(--padding-default) 0 0;
|
|
58
|
-
font-size: 24px;
|
|
59
|
-
}
|
|
60
|
-
[worklist-summary] [desc]{
|
|
61
|
-
font-size:var(--fontsize-small)
|
|
62
|
-
}
|
|
63
|
-
[worklist-summary] [assignee]{
|
|
64
|
-
text-align:center;
|
|
65
|
-
font-size:var(--fontsize-small);
|
|
66
|
-
line-height:1.3;
|
|
67
|
-
}
|
|
68
|
-
[assignee] span{
|
|
69
|
-
display:block;
|
|
70
|
-
font-size:var(--fontsize-large);
|
|
71
|
-
font-weight:bold
|
|
72
|
-
}
|
|
73
|
-
[flow] ul{
|
|
74
|
-
list-style:none;
|
|
75
|
-
margin:0;padding:0;
|
|
76
|
-
display:flex;
|
|
77
|
-
}
|
|
78
|
-
[flow] li{
|
|
79
|
-
width:85px;
|
|
80
|
-
text-align:center;
|
|
81
|
-
font-size:var(--fontsize-small);
|
|
82
|
-
}
|
|
83
|
-
[flow] span:before{
|
|
84
|
-
content: "";
|
|
85
|
-
height: 2px;
|
|
86
|
-
width: 70px;
|
|
87
|
-
display: block;
|
|
88
|
-
position: absolute;
|
|
89
|
-
margin-left: -70px;
|
|
90
|
-
margin-top: 6px;
|
|
91
|
-
background-color: rgba(0, 0, 0,.4);
|
|
92
|
-
}
|
|
93
|
-
[flow] span{
|
|
94
|
-
display:block;
|
|
95
|
-
width: 15px;
|
|
96
|
-
height: 15px;
|
|
97
|
-
margin:auto;
|
|
98
|
-
background-color: rgba(0, 0, 0,.4);
|
|
99
|
-
border-radius: 50%;
|
|
100
|
-
color:var(--theme-white-color);
|
|
101
|
-
line-height:1.2
|
|
102
|
-
}
|
|
103
|
-
[flow] [past] span{
|
|
104
|
-
background-color: rgba(255, 255, 255,.9);
|
|
105
|
-
color:var(--primary-text-color)
|
|
106
|
-
}
|
|
107
|
-
[flow] [now] span{
|
|
108
|
-
background-color: #84D600;
|
|
109
|
-
color:var(--theme-white-color);
|
|
110
|
-
}
|
|
111
|
-
[flow] [now]{
|
|
112
|
-
font-weight:bold
|
|
113
|
-
}
|
|
114
|
-
[flow] [past] span:before,[flow] [now] span:before{
|
|
115
|
-
background-color: rgba(255, 255, 255,.9);
|
|
116
|
-
}
|
|
117
|
-
[flow] li:first-child span:before{
|
|
118
|
-
display:none
|
|
119
|
-
}
|
|
120
39
|
`
|
|
121
40
|
]
|
|
122
41
|
|
|
@@ -153,28 +72,14 @@ export class ActivityInstanceStartPage extends connect(store)(localize(i18next)(
|
|
|
153
72
|
}
|
|
154
73
|
|
|
155
74
|
render() {
|
|
156
|
-
return html`
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
<div assignee>
|
|
165
|
-
assignee
|
|
166
|
-
<span>홍길동</span>
|
|
167
|
-
</div>
|
|
168
|
-
|
|
169
|
-
<div flow>
|
|
170
|
-
<ul>
|
|
171
|
-
<li past><span>1</span>myself</li>
|
|
172
|
-
<li now><span>2</span>경리실장</li>
|
|
173
|
-
<li><span>3</span>사장님</li>
|
|
174
|
-
</ul>
|
|
175
|
-
</div>
|
|
176
|
-
</div>
|
|
177
|
-
${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
|
+
`
|
|
178
83
|
}
|
|
179
84
|
|
|
180
85
|
activityContent() {
|
|
@@ -300,7 +205,7 @@ export class ActivityInstanceStartPage extends connect(store)(localize(i18next)(
|
|
|
300
205
|
customElementContent() {
|
|
301
206
|
const { uiSource: tagName, input, output } = this.activityInstance
|
|
302
207
|
|
|
303
|
-
if(!this.customHtmlElement){
|
|
208
|
+
if (!this.customHtmlElement) {
|
|
304
209
|
const element = document.createElement(tagName)
|
|
305
210
|
element.id = 'custom-content'
|
|
306
211
|
element.activityId = this.activityInstance.activity.id
|
|
@@ -313,7 +218,7 @@ export class ActivityInstanceStartPage extends connect(store)(localize(i18next)(
|
|
|
313
218
|
element.addEventListener('change-output', (e: CustomEvent) => {
|
|
314
219
|
this.activityInstance.output = e.detail
|
|
315
220
|
})
|
|
316
|
-
|
|
221
|
+
|
|
317
222
|
/* DEPRECATED 일반적으로 output만 수정될 가능성이 높기때문에, change 이벤트는 output을 수정하는 것으로 한다. */
|
|
318
223
|
element.addEventListener('change', (e: CustomEvent) => {
|
|
319
224
|
this.activityInstance.output = e.detail
|
|
@@ -322,7 +227,6 @@ export class ActivityInstanceStartPage extends connect(store)(localize(i18next)(
|
|
|
322
227
|
this.customHtmlElement = element
|
|
323
228
|
}
|
|
324
229
|
|
|
325
|
-
|
|
326
230
|
return this.customHtmlElement
|
|
327
231
|
}
|
|
328
232
|
|
|
@@ -354,7 +258,7 @@ export class ActivityInstanceStartPage extends connect(store)(localize(i18next)(
|
|
|
354
258
|
if (this.active) {
|
|
355
259
|
this.fetchActivityInstance(lifecycle.resourceId)
|
|
356
260
|
} else {
|
|
357
|
-
this.customHtmlElement = undefined
|
|
261
|
+
this.customHtmlElement = undefined
|
|
358
262
|
}
|
|
359
263
|
}
|
|
360
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> `,
|
|
@@ -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;
|
|
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"]}
|
|
@@ -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 {};
|
|
@@ -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
|
|
@@ -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"]}
|