@dssp/project 0.0.28 → 0.0.30

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 (10) hide show
  1. package/client/pages/project/project-list.ts +30 -29
  2. package/client/pages/project/project-setting-list.ts +51 -45
  3. package/dist-client/pages/project/project-list.js +30 -29
  4. package/dist-client/pages/project/project-list.js.map +1 -1
  5. package/dist-client/pages/project/project-setting-list.js +51 -45
  6. package/dist-client/pages/project/project-setting-list.js.map +1 -1
  7. package/dist-client/route.d.ts +1 -1
  8. package/dist-client/tsconfig.tsbuildinfo +1 -1
  9. package/dist-server/tsconfig.tsbuildinfo +1 -1
  10. package/package.json +3 -3
package/client/pages/project/project-list.ts CHANGED
@@ -139,7 +139,7 @@ export class ProjectListPage extends ScopedElementsMixin(PageView) {
139
139
 
140
140
  width: 100%;
141
141
  height: 100%;
142
- background-color: #f7f7f7;
142
+ background-color: var(--md-sys-color-background, #f6f6f6);
143
143
 
144
144
  --grid-record-emphasized-background-color: red;
145
145
  --grid-record-emphasized-color: yellow;
@@ -147,24 +147,24 @@ export class ProjectListPage extends ScopedElementsMixin(PageView) {
147
147
 
148
148
  div[header] {
149
149
  display: flex;
150
- height: 100px;
151
150
  align-items: center;
152
151
  background-color: #2ea4df1a;
153
152
  border: 1px solid #2ea4df33;
154
- margin: 15px 23px;
155
- font-size: 18px;
156
- padding: 7px;
157
- border-radius: 5px;
153
+ margin: var(--spacing-large, 12px);
154
+ margin-bottom:var(--spacing-small, 5px);
155
+ padding: var(--spacing-medium, 8px) var(--spacing-large, 12px);
156
+ border-radius: var(--md-sys-shape-corner-small, 5px);
158
157
 
159
158
  md-filled-text-field[type='search'] {
160
- margin-left: 5px;
161
- margin-right: 26px;
162
-
163
159
  --md-filled-text-field-container-shape: 0px;
164
- --md-sys-color-primary: #006a6a;
160
+ --md-sys-color-primary: #2e79be;
165
161
  --md-sys-color-surface-container-highest: transparent;
166
162
  --md-filled-text-field-label-text-color: #999999;
167
- --md-filled-text-field-input-text-color: #4e5055;
163
+ }
164
+ strong{
165
+ flex:1;
166
+ padding-right:var(--spacing-medium, 8px);
167
+ text-align:right
168
168
  }
169
169
 
170
170
  md-elevated-button[add-project] {
@@ -182,13 +182,15 @@ export class ProjectListPage extends ScopedElementsMixin(PageView) {
182
182
  div[body] {
183
183
  div[project-container] {
184
184
  height: 140px;
185
- margin: 17px 23px;
186
- background-color: #ffffff;
185
+ margin: var(--spacing-large, 12px);
186
+ background-color: var(--md-sys-color-on-primary);
187
187
  border: 1px solid #cccccc80;
188
- border-radius: 5px;
188
+ border-radius: var(--md-sys-shape-corner-small, 5px);
189
+ overflow:hidden;
189
190
 
190
191
  & > a {
191
192
  display: flex;
193
+ gap:0 var(--spacing-large, 12px);
192
194
  width: 100%;
193
195
  height: 100%;
194
196
  text-decoration: none;
@@ -196,7 +198,7 @@ export class ProjectListPage extends ScopedElementsMixin(PageView) {
196
198
  }
197
199
 
198
200
  img[project-img] {
199
- width: 285px;
201
+ width: 240px;
200
202
  background-color: #cccccc80;
201
203
  }
202
204
  img[project-img][no-image] {
@@ -205,9 +207,9 @@ export class ProjectListPage extends ScopedElementsMixin(PageView) {
205
207
  }
206
208
 
207
209
  span[project-info] {
208
- flex: 0.45;
209
- padding: 6px 15px;
210
- font-size: 16px;
210
+ flex: 0.55;
211
+ padding: var(--spacing-small, 4px);
212
+ font-size: 14px;
211
213
 
212
214
  white-space: nowrap;
213
215
  overflow: hidden;
@@ -216,17 +218,17 @@ export class ProjectListPage extends ScopedElementsMixin(PageView) {
216
218
  div[name] {
217
219
  color: #2e79be;
218
220
  font-weight: bold;
219
- font-size: 19px;
220
- margin-bottom: 2px;
221
+ font-size: 18px;
222
+ margin: var(--spacing-small, 4px);
221
223
  }
222
224
  }
223
225
 
224
226
  span[project-state] {
225
- flex: 0.55;
226
- padding: 10px 20px;
227
+ flex: 0.45;
228
+ padding: var(--spacing-medium, 8px);
227
229
 
228
230
  & > div {
229
- margin-bottom: 3px;
231
+ margin: var(--spacing-tiny, 2px);
230
232
  }
231
233
 
232
234
  div[progress] {
@@ -236,21 +238,21 @@ export class ProjectListPage extends ScopedElementsMixin(PageView) {
236
238
  --md-linear-progress-track-height: 18px;
237
239
  --md-linear-progress-active-indicator-height: 18px;
238
240
  --md-linear-progress-track-shape: 5px;
239
- --md-sys-color-primary: #0595e51a;
240
- --md-sys-color-surface-container-highest: #0595e533;
241
+ --md-sys-color-primary: #0595e526;
242
+ --md-sys-color-surface-container-highest: #0595e52a;
241
243
  }
242
244
 
243
245
  span {
244
246
  position: absolute;
245
247
  top: 0;
246
- left: 12px;
248
+ left: var(--spacing-large, 12px);
247
249
  font-size: 12px;
248
250
  font-weight: bold;
249
251
  color: #2e79be;
250
252
 
251
253
  &:last-child {
252
254
  left: unset;
253
- right: 12px;
255
+ right: var(--spacing-large, 12px);
254
256
  }
255
257
  }
256
258
  }
@@ -273,11 +275,10 @@ export class ProjectListPage extends ScopedElementsMixin(PageView) {
273
275
  render() {
274
276
  return html`
275
277
  <div header>
276
- <label>프로젝트 이름</label>
277
278
  <md-filled-text-field
278
279
  name="projectName"
279
280
  type="search"
280
- label="프로젝트 이름"
281
+ label="프로젝트명"
281
282
  .value=${this.projectName}
282
283
  @input=${this._onInputChange}
283
284
  @keypress=${this._onKeypress}
package/client/pages/project/project-setting-list.ts CHANGED
@@ -26,7 +26,7 @@ export class ProjectSettingList extends ScopedElementsMixin(PageView) {
26
26
 
27
27
  width: 100%;
28
28
  height: 100%;
29
- background-color: #f7f7f7;
29
+ background-color: var(--md-sys-color-background, #fcf8f8);
30
30
 
31
31
  --grid-record-emphasized-background-color: red;
32
32
  --grid-record-emphasized-color: yellow;
@@ -34,63 +34,66 @@ export class ProjectSettingList extends ScopedElementsMixin(PageView) {
34
34
 
35
35
  div[management-header-container] {
36
36
  display: flex;
37
- margin: 15px 23px 0px 23px;
38
- gap: 13px;
37
+ margin: var(--spacing-large, 12px);
38
+ margin-bottom:0;
39
+ gap: var(--spacing-medium, 8px);
39
40
  overflow-x: auto;
40
41
 
41
42
  a {
42
- min-width: 140px;
43
+ flex:1;
43
44
  text-align: center;
44
- padding: 12px 15px;
45
- background-color: #fff;
46
- color: #586878;
45
+ padding: var(--spacing-medium, 8px);
46
+ background-color: var(--md-sys-color-on-primary);
47
+ color: var(--md-sys-color-tertiary);
47
48
  font-weight: 700;
48
- border-radius: 7px;
49
+ border-radius: var(--md-sys-shape-corner-small, 5px);
49
50
  display: flex;
50
51
  flex-direction: column;
51
52
  justify-content: center;
52
53
  align-items: center;
53
- gap: 5px;
54
+ gap: var(--spacing-small, 4px);
54
55
  border: solid 1px #0000004d;
55
56
  text-decoration: none;
56
57
  cursor: pointer;
57
58
 
58
59
  md-icon {
59
- font-size: 40px;
60
+ font-size: 35px;
60
61
  width: auto;
61
62
  height: auto;
62
63
  }
63
64
  div[label] {
64
- font-size: 15px;
65
+ font-size: 14px;
66
+ line-height:1.3;
65
67
  }
66
68
  }
67
69
 
68
70
  a[green] {
69
71
  background-color: #24be7b;
70
- color: #fff;
72
+ color: var(--md-sys-color-on-primary);
71
73
  }
72
74
  }
73
75
 
74
76
  div[header] {
75
77
  display: flex;
76
- height: 100px;
77
78
  align-items: center;
78
79
  background-color: #2ea4df1a;
79
80
  border: 1px solid #2ea4df33;
80
- margin: 15px 23px;
81
- font-size: 18px;
82
- padding: 7px;
83
- border-radius: 5px;
81
+ margin: var(--spacing-large, 12px);
82
+ margin-bottom:var(--spacing-small, 5px);
83
+ padding: var(--spacing-medium, 8px) var(--spacing-large, 12px);
84
+ border-radius: var(--md-sys-shape-corner-small, 5px);
84
85
 
85
86
  md-filled-text-field[type='search'] {
86
- margin-left: 5px;
87
- margin-right: 26px;
88
-
89
87
  --md-filled-text-field-container-shape: 0px;
90
88
  --md-filled-text-field-container-color: transparent;
91
89
  --md-filled-text-field-label-text-color: #999999;
92
90
  --md-filled-text-field-input-text-color: #4e5055;
93
91
  }
92
+ strong{
93
+ flex:1;
94
+ padding-right:var(--spacing-medium, 8px);
95
+ text-align:right
96
+ }
94
97
 
95
98
  md-elevated-button[add-project] {
96
99
  font-weight: bold;
@@ -116,15 +119,18 @@ export class ProjectSettingList extends ScopedElementsMixin(PageView) {
116
119
  div[project-container] {
117
120
  display: flex;
118
121
  flex-direction: row;
119
- min-height: 140px;
120
- margin: 17px 23px;
121
- background-color: #ffffff;
122
+ min-height: 130px;
123
+ margin: var(--spacing-large, 12px);
124
+ background-color: var(--md-sys-color-on-primary);
122
125
  border: 1px solid #cccccc80;
123
- border-radius: 5px;
126
+ border-radius: var(--md-sys-shape-corner-small, 5px);
124
127
  align-items: center;
128
+ gap: var(--spacing-medium, 8px);
129
+ overflow:hidden;
125
130
 
126
131
  img[project-img] {
127
- width: 285px;
132
+ width: 240px;
133
+ height: 130px;
128
134
  aspect-ratio: 2;
129
135
  background-color: #cccccc80;
130
136
  }
@@ -134,9 +140,9 @@ export class ProjectSettingList extends ScopedElementsMixin(PageView) {
134
140
  }
135
141
 
136
142
  span[project-info] {
137
- flex: 0.45;
138
- padding: 6px 15px;
139
- font-size: 16px;
143
+ flex: 0.5;
144
+ padding: var(--spacing-small, 4px);
145
+ font-size: 14px;
140
146
 
141
147
  white-space: nowrap;
142
148
  overflow: hidden;
@@ -145,48 +151,48 @@ export class ProjectSettingList extends ScopedElementsMixin(PageView) {
145
151
  div[name] {
146
152
  color: #2e79be;
147
153
  font-weight: bold;
148
- font-size: 19px;
149
- margin-bottom: 2px;
154
+ font-size: 18px;
150
155
  }
151
156
  }
152
157
 
153
158
  span[project-state] {
154
- flex: 0.55;
155
- padding: 10px 20px;
156
- min-width: 350px;
159
+ flex: 0.5;
160
+ padding: var(--spacing-medium, 8px);
161
+ min-width: 340px;
157
162
 
158
163
  & > div {
159
- margin-bottom: 13px;
164
+ margin-bottom: var(--spacing-small, 4px);
160
165
  }
161
166
 
162
167
  div[progress] {
163
168
  position: relative;
164
169
 
165
170
  md-linear-progress {
171
+ margin:var(--spacing-tiny, 2px) 0;
166
172
  --md-linear-progress-track-height: 18px;
167
173
  --md-linear-progress-active-indicator-height: 18px;
168
174
  --md-linear-progress-track-shape: 5px;
169
- --md-linear-progress-active-indicator-color: #0595e51a;
170
- --md-linear-progress-track-color: #0595e533;
175
+ --md-linear-progress-active-indicator-color: #0595e526;
176
+ --md-linear-progress-track-color: #0595e52a;
171
177
  }
172
178
 
173
179
  span {
174
180
  position: absolute;
175
181
  top: 0;
176
- left: 12px;
182
+ left: var(--spacing-large, 12px);
177
183
  font-size: 12px;
178
184
  font-weight: bold;
179
185
  color: #2e79be;
180
186
 
181
187
  &:last-child {
182
188
  left: unset;
183
- right: 12px;
189
+ right: var(--spacing-large, 12px);
184
190
  }
185
191
  }
186
192
  }
187
193
 
188
194
  div[filled] div {
189
- margin-right: 18px;
195
+ margin-right: var(--spacing-large, 12px);
190
196
  display: inline-block;
191
197
  }
192
198
 
@@ -199,11 +205,12 @@ export class ProjectSettingList extends ScopedElementsMixin(PageView) {
199
205
 
200
206
  md-outlined-button {
201
207
  min-height: 33px;
202
- padding: 0px 13px;
203
- margin-right: 2px;
204
- box-shadow: 1px 1px 1px #0000001a;
208
+ padding: 0 var(--spacing-large, 12px);
209
+ margin-right: var(--spacing-tiny, 2px);
210
+ box-shadow: 1px 1px 1px 1px #0000001a;
205
211
  --md-outlined-button-label-text-color: #586878;
206
212
  --md-outlined-button-label-text-weight: bold;
213
+ --md-sys-color-outline: rgba(51,51,51,.20);
207
214
  }
208
215
  }
209
216
  }
@@ -239,7 +246,7 @@ export class ProjectSettingList extends ScopedElementsMixin(PageView) {
239
246
  </a>
240
247
  <a href="inspection-drawing-type-management">
241
248
  <md-icon slot="leading-icon">stacks</md-icon>
242
- <div label>도면타입/검측부위 관리</div>
249
+ <div label>도면타입/검측부위<br/>관리</div>
243
250
  </a>
244
251
  <a href="checklist-type-management">
245
252
  <md-icon slot="leading-icon">rule</md-icon>
@@ -247,13 +254,12 @@ export class ProjectSettingList extends ScopedElementsMixin(PageView) {
247
254
  </a>
248
255
  <a href="checklist-template-list">
249
256
  <md-icon slot="leading-icon">fact_check</md-icon>
250
- <div label>체크리스트 템플릿 관리</div>
257
+ <div label>체크리스트 템플릿<br/>관리</div>
251
258
  </a>
252
259
  </div>
253
260
  </div>
254
261
 
255
262
  <div header>
256
- <label>프로젝트 이름</label>
257
263
  <md-filled-text-field
258
264
  name="projectName"
259
265
  type="search"
package/dist-client/pages/project/project-list.js CHANGED
@@ -44,11 +44,10 @@ let ProjectListPage = class ProjectListPage extends ScopedElementsMixin(PageView
44
44
  var _a;
45
45
  return html `
46
46
  <div header>
47
- <label>프로젝트 이름</label>
48
47
  <md-filled-text-field
49
48
  name="projectName"
50
49
  type="search"
51
- label="프로젝트 이름"
50
+ label="프로젝트명"
52
51
  .value=${this.projectName}
53
52
  @input=${this._onInputChange}
54
53
  @keypress=${this._onKeypress}
@@ -192,7 +191,7 @@ ProjectListPage.styles = [
192
191
 
193
192
  width: 100%;
194
193
  height: 100%;
195
- background-color: #f7f7f7;
194
+ background-color: var(--md-sys-color-background, #f6f6f6);
196
195
 
197
196
  --grid-record-emphasized-background-color: red;
198
197
  --grid-record-emphasized-color: yellow;
@@ -200,24 +199,24 @@ ProjectListPage.styles = [
200
199
 
201
200
  div[header] {
202
201
  display: flex;
203
- height: 100px;
204
202
  align-items: center;
205
203
  background-color: #2ea4df1a;
206
204
  border: 1px solid #2ea4df33;
207
- margin: 15px 23px;
208
- font-size: 18px;
209
- padding: 7px;
210
- border-radius: 5px;
205
+ margin: var(--spacing-large, 12px);
206
+ margin-bottom:var(--spacing-small, 5px);
207
+ padding: var(--spacing-medium, 8px) var(--spacing-large, 12px);
208
+ border-radius: var(--md-sys-shape-corner-small, 5px);
211
209
 
212
210
  md-filled-text-field[type='search'] {
213
- margin-left: 5px;
214
- margin-right: 26px;
215
-
216
211
  --md-filled-text-field-container-shape: 0px;
217
- --md-sys-color-primary: #006a6a;
212
+ --md-sys-color-primary: #2e79be;
218
213
  --md-sys-color-surface-container-highest: transparent;
219
214
  --md-filled-text-field-label-text-color: #999999;
220
- --md-filled-text-field-input-text-color: #4e5055;
215
+ }
216
+ strong{
217
+ flex:1;
218
+ padding-right:var(--spacing-medium, 8px);
219
+ text-align:right
221
220
  }
222
221
 
223
222
  md-elevated-button[add-project] {
@@ -235,13 +234,15 @@ ProjectListPage.styles = [
235
234
  div[body] {
236
235
  div[project-container] {
237
236
  height: 140px;
238
- margin: 17px 23px;
239
- background-color: #ffffff;
237
+ margin: var(--spacing-large, 12px);
238
+ background-color: var(--md-sys-color-on-primary);
240
239
  border: 1px solid #cccccc80;
241
- border-radius: 5px;
240
+ border-radius: var(--md-sys-shape-corner-small, 5px);
241
+ overflow:hidden;
242
242
 
243
243
  & > a {
244
244
  display: flex;
245
+ gap:0 var(--spacing-large, 12px);
245
246
  width: 100%;
246
247
  height: 100%;
247
248
  text-decoration: none;
@@ -249,7 +250,7 @@ ProjectListPage.styles = [
249
250
  }
250
251
 
251
252
  img[project-img] {
252
- width: 285px;
253
+ width: 240px;
253
254
  background-color: #cccccc80;
254
255
  }
255
256
  img[project-img][no-image] {
@@ -258,9 +259,9 @@ ProjectListPage.styles = [
258
259
  }
259
260
 
260
261
  span[project-info] {
261
- flex: 0.45;
262
- padding: 6px 15px;
263
- font-size: 16px;
262
+ flex: 0.55;
263
+ padding: var(--spacing-small, 4px);
264
+ font-size: 14px;
264
265
 
265
266
  white-space: nowrap;
266
267
  overflow: hidden;
@@ -269,17 +270,17 @@ ProjectListPage.styles = [
269
270
  div[name] {
270
271
  color: #2e79be;
271
272
  font-weight: bold;
272
- font-size: 19px;
273
- margin-bottom: 2px;
273
+ font-size: 18px;
274
+ margin: var(--spacing-small, 4px);
274
275
  }
275
276
  }
276
277
 
277
278
  span[project-state] {
278
- flex: 0.55;
279
- padding: 10px 20px;
279
+ flex: 0.45;
280
+ padding: var(--spacing-medium, 8px);
280
281
 
281
282
  & > div {
282
- margin-bottom: 3px;
283
+ margin: var(--spacing-tiny, 2px);
283
284
  }
284
285
 
285
286
  div[progress] {
@@ -289,21 +290,21 @@ ProjectListPage.styles = [
289
290
  --md-linear-progress-track-height: 18px;
290
291
  --md-linear-progress-active-indicator-height: 18px;
291
292
  --md-linear-progress-track-shape: 5px;
292
- --md-sys-color-primary: #0595e51a;
293
- --md-sys-color-surface-container-highest: #0595e533;
293
+ --md-sys-color-primary: #0595e526;
294
+ --md-sys-color-surface-container-highest: #0595e52a;
294
295
  }
295
296
 
296
297
  span {
297
298
  position: absolute;
298
299
  top: 0;
299
- left: 12px;
300
+ left: var(--spacing-large, 12px);
300
301
  font-size: 12px;
301
302
  font-weight: bold;
302
303
  color: #2e79be;
303
304
 
304
305
  &:last-child {
305
306
  left: unset;
306
- right: 12px;
307
+ right: var(--spacing-large, 12px);
307
308
  }
308
309
  }
309
310
  }
package/dist-client/pages/project/project-list.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"project-list.js","sourceRoot":"","sources":["../../../client/pages/project/project-list.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport { PageView } from '@operato/shell'\nimport { css, html } from 'lit'\nimport { customElement, state } from 'lit/decorators.js'\nimport { ScopedElementsMixin } from '@open-wc/scoped-elements'\nimport { client } from '@operato/graphql'\nimport gql from 'graphql-tag'\nimport { Attachment } from '@things-factory/attachment-base'\nimport type { FileUpload } from 'graphql-upload/GraphQLUpload.js'\n\nexport enum ProjectState {\n 'ONGOING' = '10',\n 'COMPLETED' = '20'\n}\nexport enum BuildingInspectionStatus {\n WAIT = 'WAIT',\n OVERALL_WAIT = 'OVERALL_WAIT',\n REQUEST = 'REQUEST',\n OVERALL_REQUEST = 'OVERALL_REQUEST',\n PASS = 'PASS',\n FAIL = 'FAIL'\n}\nexport const BUILDING_INSPECTION_STATUS = {\n [BuildingInspectionStatus.WAIT]: '검측 대기',\n [BuildingInspectionStatus.OVERALL_WAIT]: '검측 대기',\n [BuildingInspectionStatus.REQUEST]: '검측 요청',\n [BuildingInspectionStatus.OVERALL_REQUEST]: '검측 요청',\n [BuildingInspectionStatus.PASS]: '합격',\n [BuildingInspectionStatus.FAIL]: '불합격'\n}\n\nexport interface Project {\n id?: string\n name: string\n startDate?: string\n endDate?: string\n mainPhoto?: Attachment\n mainPhotoUpload?: FileUpload\n totalProgress?: number\n weeklyProgress?: number\n kpi?: number\n inspPassRate?: number\n robotProgressRate?: number\n structuralSafetyRate?: number\n scheduleTable?: Attachment\n buildingComplex: BuildingComplex\n}\nexport interface BuildingComplex {\n id?: string\n address?: string\n latitude?: number\n longitude?: number\n area?: number\n constructionCompany?: string\n clientCompany?: string\n designCompany?: string\n supervisoryCompany?: string\n drawing?: Attachment\n drawingUpload?: FileUpload\n constructionType?: string\n constructionCost?: number\n etc?: string\n householdCount?: number\n buildingCount?: number\n notice?: string\n planXScale?: number\n planYScale?: number\n overallConstructorEmails?: string[]\n taskConstructorEmails?: string[]\n overallSupervisoryEmails?: string[]\n taskSupervisoryEmails?: string[]\n buildings?: Building[]\n}\nexport interface Building {\n id?: string\n name: string | undefined\n floorCount: number | undefined\n drawing?: Attachment\n drawingUpload?: FileUpload\n buildingLevels?: BuildingLevel[]\n}\n\nexport interface BuildingLevel {\n id?: string\n floor?: number\n mainDrawing?: Attachment\n mainDrawingImage?: string\n mainDrawingThumbnail?: string\n mainDrawingUpload?: FileUpload\n elevationDrawing?: Attachment\n elevationDrawingThumbnail?: string\n elevationDrawingUpload?: FileUpload\n rebarDistributionDrawing?: Attachment\n rebarDistributionDrawingThumbnail?: string\n rebarDistributionDrawingUpload?: FileUpload\n building?: Building\n buildingInspections?: BuildingInspection[]\n}\n\nexport interface BuildingInspection {\n id?: string\n attatchments?: Attachment[]\n // buildingInspectionAttachments?: BuildingInspectionAttachment[]\n status?: BuildingInspectionStatus\n requestDate?: Date\n buildingLevel?: BuildingLevel\n checklist?: Checklist\n createdAt?: Date\n updatedAt?: Date\n deletedAt?: Date\n}\n\nexport interface Checklist {\n id: string\n name?: string\n documentNo?: string\n constructionType?: string\n constructionDetailType?: string\n location?: string\n constructionInspectorDate?: Date\n supervisorInspectorDate?: Date\n overallConstructorSignature?: string\n taskConstructorSignature?: string\n overallSupervisorySignature?: string\n taskSupervisorySignature?: string\n inspectionParts?: string[]\n // checklistItems?: ChecklistItem[]\n}\n\n@customElement('project-list')\nexport class ProjectListPage extends ScopedElementsMixin(PageView) {\n static styles = [\n css`\n :host {\n display: flex;\n flex-direction: column;\n overflow-y: auto;\n\n width: 100%;\n height: 100%;\n background-color: #f7f7f7;\n\n --grid-record-emphasized-background-color: red;\n --grid-record-emphasized-color: yellow;\n }\n\n div[header] {\n display: flex;\n height: 100px;\n align-items: center;\n background-color: #2ea4df1a;\n border: 1px solid #2ea4df33;\n margin: 15px 23px;\n font-size: 18px;\n padding: 7px;\n border-radius: 5px;\n\n md-filled-text-field[type='search'] {\n margin-left: 5px;\n margin-right: 26px;\n\n --md-filled-text-field-container-shape: 0px;\n --md-sys-color-primary: #006a6a;\n --md-sys-color-surface-container-highest: transparent;\n --md-filled-text-field-label-text-color: #999999;\n --md-filled-text-field-input-text-color: #4e5055;\n }\n\n md-elevated-button[add-project] {\n font-weight: bold;\n font-size: 16px;\n margin-left: 17px;\n padding: 13px 20px;\n\n --md-sys-color-surface-container-low: #24be7b;\n --md-sys-color-primary: #ffffff;\n --md-elevated-button-container-shape: 7px;\n }\n }\n\n div[body] {\n div[project-container] {\n height: 140px;\n margin: 17px 23px;\n background-color: #ffffff;\n border: 1px solid #cccccc80;\n border-radius: 5px;\n\n & > a {\n display: flex;\n width: 100%;\n height: 100%;\n text-decoration: none;\n color: #000;\n }\n\n img[project-img] {\n width: 285px;\n background-color: #cccccc80;\n }\n img[project-img][no-image] {\n object-fit: contain;\n opacity: 0.5;\n }\n\n span[project-info] {\n flex: 0.45;\n padding: 6px 15px;\n font-size: 16px;\n\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n\n div[name] {\n color: #2e79be;\n font-weight: bold;\n font-size: 19px;\n margin-bottom: 2px;\n }\n }\n\n span[project-state] {\n flex: 0.55;\n padding: 10px 20px;\n\n & > div {\n margin-bottom: 3px;\n }\n\n div[progress] {\n position: relative;\n\n md-linear-progress {\n --md-linear-progress-track-height: 18px;\n --md-linear-progress-active-indicator-height: 18px;\n --md-linear-progress-track-shape: 5px;\n --md-sys-color-primary: #0595e51a;\n --md-sys-color-surface-container-highest: #0595e533;\n }\n\n span {\n position: absolute;\n top: 0;\n left: 12px;\n font-size: 12px;\n font-weight: bold;\n color: #2e79be;\n\n &:last-child {\n left: unset;\n right: 12px;\n }\n }\n }\n }\n }\n }\n `\n ]\n\n get context() {\n return {\n title: '진행중 프로젝트'\n }\n }\n\n @state() private projectName: string = ''\n @state() private projectList: Project[] = []\n @state() private projectCount: number = 0\n\n render() {\n return html`\n <div header>\n <label>프로젝트 이름</label>\n <md-filled-text-field\n name=\"projectName\"\n type=\"search\"\n label=\"프로젝트 이름\"\n .value=${this.projectName}\n @input=${this._onInputChange}\n @keypress=${this._onKeypress}\n >\n <md-icon slot=\"leading-icon\">search</md-icon>\n </md-filled-text-field>\n\n <strong>총 ${this.projectCount}개</strong>\n </div>\n\n <div body>\n ${this.projectList?.map((project: Project) => {\n return html`\n <div project-container>\n <a href=${`project-detail/${project.id}`}>\n <img\n ?no-image=${!project.mainPhoto?.fullpath}\n project-img\n src=${project.mainPhoto?.fullpath || '/assets/images/no-image.png'}\n />\n\n <span project-info>\n <div name>${project.name}</div>\n <div content>${project.buildingComplex.address}</div>\n <div content>면적: ${project.buildingComplex?.area?.toLocaleString() || ''}㎡</div>\n <div content>착공~준공: ${project.startDate} ~ ${project.endDate}</div>\n <div content>발주처: <strong>${project.buildingComplex.clientCompany}</strong></div>\n </span>\n\n <span project-state>\n <div progress>\n <md-linear-progress buffer=\"100\" max=\"100\" value=${project.totalProgress || 0}> </md-linear-progress>\n <span>전체</span>\n <span>${project.totalProgress || 0}%</span>\n </div>\n <div progress>\n <md-linear-progress buffer=\"100\" max=\"100\" value=${project.weeklyProgress || 0}> </md-linear-progress>\n <span>주간</span>\n <span>${project.weeklyProgress || 0}%</span>\n </div>\n <div progress>\n <md-linear-progress buffer=\"100\" max=\"100\" value=${project.kpi || 0}> </md-linear-progress>\n <span>KPI</span>\n <span>${project.kpi || 0}%</span>\n </div>\n <div progress>\n <md-linear-progress buffer=\"100\" max=\"100\" value=${project.inspPassRate || 0}> </md-linear-progress>\n <span>Inspection Passing Rate</span>\n <span>${project.inspPassRate || 0}%</span>\n </div>\n <div progress>\n <md-linear-progress buffer=\"100\" max=\"100\" value=${project.robotProgressRate || 0}> </md-linear-progress>\n <span>Robot Progress</span>\n <span>${project.robotProgressRate || 0}%</span>\n </div>\n <div progress>\n <md-linear-progress buffer=\"100\" max=\"100\" value=${project.structuralSafetyRate || 0}> </md-linear-progress>\n <span>Structural safety</span>\n <span>${project.structuralSafetyRate || 0}%</span>\n </div>\n </span>\n </a>\n </div>\n `\n })}\n </div>\n `\n }\n\n async pageUpdated(changes: any, lifecycle: any) {\n if (this.active) {\n this.getProjectList()\n }\n }\n\n async getProjectList() {\n const response = await client.query({\n query: gql`\n query Projects($filters: [Filter!]) {\n projects(filters: $filters) {\n items {\n id\n name\n startDate\n endDate\n mainPhoto {\n fullpath\n }\n totalProgress\n weeklyProgress\n kpi\n inspPassRate\n robotProgressRate\n structuralSafetyRate\n buildingComplex {\n address\n area\n clientCompany\n }\n }\n total\n }\n }\n `,\n variables: {\n filters: [\n {\n name: 'name',\n operator: 'search',\n value: `%${this.projectName}%`\n },\n {\n name: 'state',\n operator: 'eq',\n value: ProjectState.ONGOING\n }\n ]\n }\n })\n\n this.projectList = response.data.projects?.items || []\n this.projectCount = response.data.projects?.total || 0\n }\n\n // Input 요소의 값이 변경될 때 호출되는 콜백 함수\n private _onInputChange(event: InputEvent) {\n const target = event.target as HTMLInputElement\n this[target.name] = target.value\n }\n\n // 검색창에서 엔터입력시 검색\n private _onKeypress(event: KeyboardEvent) {\n if (event.code === 'Enter') {\n this.getProjectList()\n }\n }\n}\n"]}
1
+ {"version":3,"file":"project-list.js","sourceRoot":"","sources":["../../../client/pages/project/project-list.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport { PageView } from '@operato/shell'\nimport { css, html } from 'lit'\nimport { customElement, state } from 'lit/decorators.js'\nimport { ScopedElementsMixin } from '@open-wc/scoped-elements'\nimport { client } from '@operato/graphql'\nimport gql from 'graphql-tag'\nimport { Attachment } from '@things-factory/attachment-base'\nimport type { FileUpload } from 'graphql-upload/GraphQLUpload.js'\n\nexport enum ProjectState {\n 'ONGOING' = '10',\n 'COMPLETED' = '20'\n}\nexport enum BuildingInspectionStatus {\n WAIT = 'WAIT',\n OVERALL_WAIT = 'OVERALL_WAIT',\n REQUEST = 'REQUEST',\n OVERALL_REQUEST = 'OVERALL_REQUEST',\n PASS = 'PASS',\n FAIL = 'FAIL'\n}\nexport const BUILDING_INSPECTION_STATUS = {\n [BuildingInspectionStatus.WAIT]: '검측 대기',\n [BuildingInspectionStatus.OVERALL_WAIT]: '검측 대기',\n [BuildingInspectionStatus.REQUEST]: '검측 요청',\n [BuildingInspectionStatus.OVERALL_REQUEST]: '검측 요청',\n [BuildingInspectionStatus.PASS]: '합격',\n [BuildingInspectionStatus.FAIL]: '불합격'\n}\n\nexport interface Project {\n id?: string\n name: string\n startDate?: string\n endDate?: string\n mainPhoto?: Attachment\n mainPhotoUpload?: FileUpload\n totalProgress?: number\n weeklyProgress?: number\n kpi?: number\n inspPassRate?: number\n robotProgressRate?: number\n structuralSafetyRate?: number\n scheduleTable?: Attachment\n buildingComplex: BuildingComplex\n}\nexport interface BuildingComplex {\n id?: string\n address?: string\n latitude?: number\n longitude?: number\n area?: number\n constructionCompany?: string\n clientCompany?: string\n designCompany?: string\n supervisoryCompany?: string\n drawing?: Attachment\n drawingUpload?: FileUpload\n constructionType?: string\n constructionCost?: number\n etc?: string\n householdCount?: number\n buildingCount?: number\n notice?: string\n planXScale?: number\n planYScale?: number\n overallConstructorEmails?: string[]\n taskConstructorEmails?: string[]\n overallSupervisoryEmails?: string[]\n taskSupervisoryEmails?: string[]\n buildings?: Building[]\n}\nexport interface Building {\n id?: string\n name: string | undefined\n floorCount: number | undefined\n drawing?: Attachment\n drawingUpload?: FileUpload\n buildingLevels?: BuildingLevel[]\n}\n\nexport interface BuildingLevel {\n id?: string\n floor?: number\n mainDrawing?: Attachment\n mainDrawingImage?: string\n mainDrawingThumbnail?: string\n mainDrawingUpload?: FileUpload\n elevationDrawing?: Attachment\n elevationDrawingThumbnail?: string\n elevationDrawingUpload?: FileUpload\n rebarDistributionDrawing?: Attachment\n rebarDistributionDrawingThumbnail?: string\n rebarDistributionDrawingUpload?: FileUpload\n building?: Building\n buildingInspections?: BuildingInspection[]\n}\n\nexport interface BuildingInspection {\n id?: string\n attatchments?: Attachment[]\n // buildingInspectionAttachments?: BuildingInspectionAttachment[]\n status?: BuildingInspectionStatus\n requestDate?: Date\n buildingLevel?: BuildingLevel\n checklist?: Checklist\n createdAt?: Date\n updatedAt?: Date\n deletedAt?: Date\n}\n\nexport interface Checklist {\n id: string\n name?: string\n documentNo?: string\n constructionType?: string\n constructionDetailType?: string\n location?: string\n constructionInspectorDate?: Date\n supervisorInspectorDate?: Date\n overallConstructorSignature?: string\n taskConstructorSignature?: string\n overallSupervisorySignature?: string\n taskSupervisorySignature?: string\n inspectionParts?: string[]\n // checklistItems?: ChecklistItem[]\n}\n\n@customElement('project-list')\nexport class ProjectListPage extends ScopedElementsMixin(PageView) {\n static styles = [\n css`\n :host {\n display: flex;\n flex-direction: column;\n overflow-y: auto;\n\n width: 100%;\n height: 100%;\n background-color: var(--md-sys-color-background, #f6f6f6);\n\n --grid-record-emphasized-background-color: red;\n --grid-record-emphasized-color: yellow;\n }\n\n div[header] {\n display: flex;\n align-items: center;\n background-color: #2ea4df1a;\n border: 1px solid #2ea4df33;\n margin: var(--spacing-large, 12px);\n margin-bottom:var(--spacing-small, 5px);\n padding: var(--spacing-medium, 8px) var(--spacing-large, 12px);\n border-radius: var(--md-sys-shape-corner-small, 5px);\n\n md-filled-text-field[type='search'] {\n --md-filled-text-field-container-shape: 0px;\n --md-sys-color-primary: #2e79be;\n --md-sys-color-surface-container-highest: transparent;\n --md-filled-text-field-label-text-color: #999999;\n }\n strong{\n flex:1;\n padding-right:var(--spacing-medium, 8px);\n text-align:right\n }\n\n md-elevated-button[add-project] {\n font-weight: bold;\n font-size: 16px;\n margin-left: 17px;\n padding: 13px 20px;\n\n --md-sys-color-surface-container-low: #24be7b;\n --md-sys-color-primary: #ffffff;\n --md-elevated-button-container-shape: 7px;\n }\n }\n\n div[body] {\n div[project-container] {\n height: 140px;\n margin: var(--spacing-large, 12px);\n background-color: var(--md-sys-color-on-primary);\n border: 1px solid #cccccc80;\n border-radius: var(--md-sys-shape-corner-small, 5px);\n overflow:hidden;\n\n & > a {\n display: flex;\n gap:0 var(--spacing-large, 12px);\n width: 100%;\n height: 100%;\n text-decoration: none;\n color: #000;\n }\n\n img[project-img] {\n width: 240px;\n background-color: #cccccc80;\n }\n img[project-img][no-image] {\n object-fit: contain;\n opacity: 0.5;\n }\n\n span[project-info] {\n flex: 0.55;\n padding: var(--spacing-small, 4px);\n font-size: 14px;\n\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n\n div[name] {\n color: #2e79be;\n font-weight: bold;\n font-size: 18px;\n margin: var(--spacing-small, 4px);\n }\n }\n\n span[project-state] {\n flex: 0.45;\n padding: var(--spacing-medium, 8px);\n\n & > div {\n margin: var(--spacing-tiny, 2px);\n }\n\n div[progress] {\n position: relative;\n\n md-linear-progress {\n --md-linear-progress-track-height: 18px;\n --md-linear-progress-active-indicator-height: 18px;\n --md-linear-progress-track-shape: 5px;\n --md-sys-color-primary: #0595e526;\n --md-sys-color-surface-container-highest: #0595e52a;\n }\n\n span {\n position: absolute;\n top: 0;\n left: var(--spacing-large, 12px);\n font-size: 12px;\n font-weight: bold;\n color: #2e79be;\n\n &:last-child {\n left: unset;\n right: var(--spacing-large, 12px);\n }\n }\n }\n }\n }\n }\n `\n ]\n\n get context() {\n return {\n title: '진행중 프로젝트'\n }\n }\n\n @state() private projectName: string = ''\n @state() private projectList: Project[] = []\n @state() private projectCount: number = 0\n\n render() {\n return html`\n <div header>\n <md-filled-text-field\n name=\"projectName\"\n type=\"search\"\n label=\"프로젝트명\"\n .value=${this.projectName}\n @input=${this._onInputChange}\n @keypress=${this._onKeypress}\n >\n <md-icon slot=\"leading-icon\">search</md-icon>\n </md-filled-text-field>\n\n <strong>총 ${this.projectCount}개</strong>\n </div>\n\n <div body>\n ${this.projectList?.map((project: Project) => {\n return html`\n <div project-container>\n <a href=${`project-detail/${project.id}`}>\n <img\n ?no-image=${!project.mainPhoto?.fullpath}\n project-img\n src=${project.mainPhoto?.fullpath || '/assets/images/no-image.png'}\n />\n\n <span project-info>\n <div name>${project.name}</div>\n <div content>${project.buildingComplex.address}</div>\n <div content>면적: ${project.buildingComplex?.area?.toLocaleString() || ''}㎡</div>\n <div content>착공~준공: ${project.startDate} ~ ${project.endDate}</div>\n <div content>발주처: <strong>${project.buildingComplex.clientCompany}</strong></div>\n </span>\n\n <span project-state>\n <div progress>\n <md-linear-progress buffer=\"100\" max=\"100\" value=${project.totalProgress || 0}> </md-linear-progress>\n <span>전체</span>\n <span>${project.totalProgress || 0}%</span>\n </div>\n <div progress>\n <md-linear-progress buffer=\"100\" max=\"100\" value=${project.weeklyProgress || 0}> </md-linear-progress>\n <span>주간</span>\n <span>${project.weeklyProgress || 0}%</span>\n </div>\n <div progress>\n <md-linear-progress buffer=\"100\" max=\"100\" value=${project.kpi || 0}> </md-linear-progress>\n <span>KPI</span>\n <span>${project.kpi || 0}%</span>\n </div>\n <div progress>\n <md-linear-progress buffer=\"100\" max=\"100\" value=${project.inspPassRate || 0}> </md-linear-progress>\n <span>Inspection Passing Rate</span>\n <span>${project.inspPassRate || 0}%</span>\n </div>\n <div progress>\n <md-linear-progress buffer=\"100\" max=\"100\" value=${project.robotProgressRate || 0}> </md-linear-progress>\n <span>Robot Progress</span>\n <span>${project.robotProgressRate || 0}%</span>\n </div>\n <div progress>\n <md-linear-progress buffer=\"100\" max=\"100\" value=${project.structuralSafetyRate || 0}> </md-linear-progress>\n <span>Structural safety</span>\n <span>${project.structuralSafetyRate || 0}%</span>\n </div>\n </span>\n </a>\n </div>\n `\n })}\n </div>\n `\n }\n\n async pageUpdated(changes: any, lifecycle: any) {\n if (this.active) {\n this.getProjectList()\n }\n }\n\n async getProjectList() {\n const response = await client.query({\n query: gql`\n query Projects($filters: [Filter!]) {\n projects(filters: $filters) {\n items {\n id\n name\n startDate\n endDate\n mainPhoto {\n fullpath\n }\n totalProgress\n weeklyProgress\n kpi\n inspPassRate\n robotProgressRate\n structuralSafetyRate\n buildingComplex {\n address\n area\n clientCompany\n }\n }\n total\n }\n }\n `,\n variables: {\n filters: [\n {\n name: 'name',\n operator: 'search',\n value: `%${this.projectName}%`\n },\n {\n name: 'state',\n operator: 'eq',\n value: ProjectState.ONGOING\n }\n ]\n }\n })\n\n this.projectList = response.data.projects?.items || []\n this.projectCount = response.data.projects?.total || 0\n }\n\n // Input 요소의 값이 변경될 때 호출되는 콜백 함수\n private _onInputChange(event: InputEvent) {\n const target = event.target as HTMLInputElement\n this[target.name] = target.value\n }\n\n // 검색창에서 엔터입력시 검색\n private _onKeypress(event: KeyboardEvent) {\n if (event.code === 'Enter') {\n this.getProjectList()\n }\n }\n}\n"]}