@dssp/project 1.0.0-alpha.40 → 1.0.0-alpha.47
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/dist-client/pages/lib/chatbot-widget.d.ts +18 -8
- package/dist-client/pages/lib/chatbot-widget.js +249 -87
- package/dist-client/pages/lib/chatbot-widget.js.map +1 -1
- package/dist-client/pages/lib/select2-component.d.ts +1 -1
- package/dist-client/pages/lib/select2-component.js +35 -35
- package/dist-client/pages/lib/select2-component.js.map +1 -1
- package/dist-client/pages/project/project-detail.js.map +1 -1
- package/dist-client/pages/project/project-list.d.ts +34 -0
- package/dist-client/pages/project/project-list.js +35 -0
- package/dist-client/pages/project/project-list.js.map +1 -1
- package/dist-client/pages/project/project-update.js +168 -29
- package/dist-client/pages/project/project-update.js.map +1 -1
- package/dist-client/route.d.ts +1 -1
- package/dist-client/tsconfig.tsbuildinfo +1 -1
- package/dist-server/service/project/project-mutation.d.ts +2 -1
- package/dist-server/service/project/project-mutation.js +35 -1
- package/dist-server/service/project/project-mutation.js.map +1 -1
- package/dist-server/service/project/project-query.d.ts +1 -0
- package/dist-server/service/project/project-query.js +16 -0
- package/dist-server/service/project/project-query.js.map +1 -1
- package/dist-server/service/project/project-type.d.ts +6 -0
- package/dist-server/service/project/project-type.js +23 -1
- package/dist-server/service/project/project-type.js.map +1 -1
- package/dist-server/service/project/project.d.ts +2 -0
- package/dist-server/service/project/project.js +10 -0
- package/dist-server/service/project/project.js.map +1 -1
- package/dist-server/tsconfig.tsbuildinfo +1 -1
- package/package.json +4 -4
- package/translations/en.json +10 -9
- package/translations/ja.json +15 -1
- package/translations/ko.json +3 -0
- package/translations/ms.json +15 -1
- package/translations/zh.json +15 -1
|
@@ -18,6 +18,37 @@ let Select2Component = class Select2Component extends LitElement {
|
|
|
18
18
|
get selectedItems() {
|
|
19
19
|
return this.selectedValues.map(id => this.options.find(option => option.value === id)).filter(Boolean);
|
|
20
20
|
}
|
|
21
|
+
render() {
|
|
22
|
+
return html `
|
|
23
|
+
<div select-container>
|
|
24
|
+
<div tags @click="${this._toggleOptions}">${this.placeholder}</div>
|
|
25
|
+
${this.showOptions
|
|
26
|
+
? html `
|
|
27
|
+
<div options>
|
|
28
|
+
${this.options.map(option => html `
|
|
29
|
+
<div
|
|
30
|
+
option
|
|
31
|
+
?selected=${this.selectedValues.includes(option.value)}
|
|
32
|
+
@click=${() => this._handleSelect(option.value)}
|
|
33
|
+
>
|
|
34
|
+
${option.name}
|
|
35
|
+
</div>
|
|
36
|
+
`)}
|
|
37
|
+
</div>
|
|
38
|
+
`
|
|
39
|
+
: ''}
|
|
40
|
+
</div>
|
|
41
|
+
|
|
42
|
+
<div selected-tags>
|
|
43
|
+
${this.selectedItems.map((tag) => html `
|
|
44
|
+
<div tag @click=${() => this._handleRemove(tag.value)}>
|
|
45
|
+
${tag.name}
|
|
46
|
+
<span tag-close>×</span>
|
|
47
|
+
</div>
|
|
48
|
+
`)}
|
|
49
|
+
</div>
|
|
50
|
+
`;
|
|
51
|
+
}
|
|
21
52
|
connectedCallback() {
|
|
22
53
|
super.connectedCallback();
|
|
23
54
|
document.addEventListener('click', this._handleOutsideClick);
|
|
@@ -52,42 +83,11 @@ let Select2Component = class Select2Component extends LitElement {
|
|
|
52
83
|
composed: true
|
|
53
84
|
}));
|
|
54
85
|
}
|
|
55
|
-
render() {
|
|
56
|
-
return html `
|
|
57
|
-
<div select-container>
|
|
58
|
-
<div tags @click="${this._toggleOptions}">${this.placeholder}</div>
|
|
59
|
-
${this.showOptions
|
|
60
|
-
? html `
|
|
61
|
-
<div options>
|
|
62
|
-
${this.options.map(option => html `
|
|
63
|
-
<div
|
|
64
|
-
option
|
|
65
|
-
?selected=${this.selectedValues.includes(option.value)}
|
|
66
|
-
@click=${() => this._handleSelect(option.value)}
|
|
67
|
-
>
|
|
68
|
-
${option.name}
|
|
69
|
-
</div>
|
|
70
|
-
`)}
|
|
71
|
-
</div>
|
|
72
|
-
`
|
|
73
|
-
: ''}
|
|
74
|
-
</div>
|
|
75
|
-
|
|
76
|
-
<div selected-tags>
|
|
77
|
-
${this.selectedItems.map((tag) => html `
|
|
78
|
-
<div tag @click=${() => this._handleRemove(tag.value)}>
|
|
79
|
-
${tag.name}
|
|
80
|
-
<span tag-close>×</span>
|
|
81
|
-
</div>
|
|
82
|
-
`)}
|
|
83
|
-
</div>
|
|
84
|
-
`;
|
|
85
|
-
}
|
|
86
86
|
};
|
|
87
87
|
Select2Component.styles = css `
|
|
88
88
|
div[select-container] {
|
|
89
89
|
position: relative;
|
|
90
|
-
border: 1px solid rgba(51,51,51
|
|
90
|
+
border: 1px solid rgba(51, 51, 51, 0.2);
|
|
91
91
|
border-radius: 5px;
|
|
92
92
|
padding: var(--spacing-small, 4px) var(--spacing-medium, 8px);
|
|
93
93
|
font-size: 14px;
|
|
@@ -110,7 +110,7 @@ Select2Component.styles = css `
|
|
|
110
110
|
min-width: 50%;
|
|
111
111
|
border: 1px solid #ccc;
|
|
112
112
|
background-color: var(--md-sys-color-surface-tint);
|
|
113
|
-
color:var(--md-sys-color-on-primary);
|
|
113
|
+
color: var(--md-sys-color-on-primary);
|
|
114
114
|
max-height: 150px;
|
|
115
115
|
overflow-y: auto;
|
|
116
116
|
display: block;
|
|
@@ -120,7 +120,7 @@ Select2Component.styles = css `
|
|
|
120
120
|
div[option] {
|
|
121
121
|
padding: var(--spacing-small, 4px) var(--spacing-medium, 8px);
|
|
122
122
|
cursor: pointer;
|
|
123
|
-
border-bottom: 1px solid rgba(0,0,0
|
|
123
|
+
border-bottom: 1px solid rgba(0, 0, 0, 0.4);
|
|
124
124
|
}
|
|
125
125
|
div[option]:last-child {
|
|
126
126
|
border-bottom: none;
|
|
@@ -133,7 +133,7 @@ Select2Component.styles = css `
|
|
|
133
133
|
div[option][selected] {
|
|
134
134
|
background-color: var(--md-sys-color-tertiary-container);
|
|
135
135
|
font-weight: bold;
|
|
136
|
-
color:var(--md-sys-color-on-primary);
|
|
136
|
+
color: var(--md-sys-color-on-primary);
|
|
137
137
|
}
|
|
138
138
|
|
|
139
139
|
div[selected-tags] {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"select2-component.js","sourceRoot":"","sources":["../../../client/pages/lib/select2-component.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAG3D,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,UAAU;IAAzC;;QA4EuB,gBAAW,GAAW,EAAE,CAAA;QACzB,YAAO,GAA2C,EAAE,CAAA;QACpD,mBAAc,GAAa,EAAE,CAAA;QAE/C,gBAAW,GAAY,KAAK,CAAA;
|
|
1
|
+
{"version":3,"file":"select2-component.js","sourceRoot":"","sources":["../../../client/pages/lib/select2-component.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\n@customElement('select2-component')\nexport class Select2Component extends LitElement {\n static styles = css`\n div[select-container] {\n position: relative;\n border: 1px solid rgba(51, 51, 51, 0.2);\n border-radius: 5px;\n padding: var(--spacing-small, 4px) var(--spacing-medium, 8px);\n font-size: 14px;\n color: var(--md-sys-color-primary);\n }\n div[select-container]:focus {\n border: 1px solid #1f7fd9;\n }\n\n div[dropdown] {\n border: 1px solid #ccc;\n padding: var(--spacing-small, 4px);\n cursor: pointer;\n }\n\n div[options] {\n position: absolute;\n left: 0;\n top: 30px;\n min-width: 50%;\n border: 1px solid #ccc;\n background-color: var(--md-sys-color-surface-tint);\n color: var(--md-sys-color-on-primary);\n max-height: 150px;\n overflow-y: auto;\n display: block;\n z-index: 1;\n }\n\n div[option] {\n padding: var(--spacing-small, 4px) var(--spacing-medium, 8px);\n cursor: pointer;\n border-bottom: 1px solid rgba(0, 0, 0, 0.4);\n }\n div[option]:last-child {\n border-bottom: none;\n }\n\n div[option]:hover {\n background-color: var(--md-sys-color-tertiary-container);\n }\n\n div[option][selected] {\n background-color: var(--md-sys-color-tertiary-container);\n font-weight: bold;\n color: var(--md-sys-color-on-primary);\n }\n\n div[selected-tags] {\n display: flex;\n flex-wrap: wrap;\n gap: var(--spacing-small, 4px);\n margin-top: var(--spacing-small, 4px);\n }\n\n div[tag] {\n background-color: #2e79be;\n color: white;\n padding: var(--spacing-tiny, 2px) var(--spacing-medium, 8px);\n border-radius: 20px;\n font-size: 12px;\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n }\n\n span[tag-close] {\n margin-left: var(--spacing-small, 4px);\n }\n `\n\n @property({ type: String }) placeholder: string = ''\n @property({ type: Array }) options: Array<{ name: string; value: string }> = []\n @property({ type: Array }) selectedValues: string[] = []\n\n @state() showOptions: boolean = false\n\n get selectedItems() {\n return this.selectedValues.map(id => this.options.find(option => option.value === id)).filter(Boolean)\n }\n\n render() {\n return html`\n <div select-container>\n <div tags @click=\"${this._toggleOptions}\">${this.placeholder}</div>\n ${this.showOptions\n ? html`\n <div options>\n ${this.options.map(\n option => html`\n <div\n option\n ?selected=${this.selectedValues.includes(option.value)}\n @click=${() => this._handleSelect(option.value)}\n >\n ${option.name}\n </div>\n `\n )}\n </div>\n `\n : ''}\n </div>\n\n <div selected-tags>\n ${this.selectedItems.map(\n (tag: any) => html`\n <div tag @click=${() => this._handleRemove(tag.value)}>\n ${tag!.name}\n <span tag-close>×</span>\n </div>\n `\n )}\n </div>\n `\n }\n\n connectedCallback() {\n super.connectedCallback()\n document.addEventListener('click', this._handleOutsideClick)\n }\n\n disconnectedCallback() {\n super.disconnectedCallback()\n document.removeEventListener('click', this._handleOutsideClick)\n }\n\n private _handleOutsideClick = (event: MouseEvent) => {\n const path = event.composedPath()\n if (!path.includes(this)) {\n this.showOptions = false\n }\n }\n\n private _toggleOptions() {\n this.showOptions = !this.showOptions\n }\n\n private _handleSelect(optionValue: string) {\n if (this.selectedValues.includes(optionValue)) {\n // 이미 선택된 옵션을 선택한 경우 해제\n this.selectedValues = this.selectedValues.filter(value => value !== optionValue)\n } else {\n // 선택되지 않은 옵션 추가\n this.selectedValues = [...this.selectedValues, optionValue]\n }\n\n this.showOptions = false\n this._dispatchEvent(this.selectedValues)\n }\n\n private _handleRemove(tagValue: string) {\n this.selectedValues = this.selectedValues.filter(value => value !== tagValue)\n this._dispatchEvent(this.selectedValues)\n }\n\n private _dispatchEvent(selectedValues: string[]) {\n this.dispatchEvent(\n new CustomEvent('selection-changed', {\n detail: { selectedValues }, // ID 배열을 부모로 전달\n bubbles: true,\n composed: true\n })\n )\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"project-detail.js","sourceRoot":"","sources":["../../../client/pages/project/project-detail.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@material/web/button/elevated-button.js'\nimport '@material/web/textfield/outlined-text-field.js'\nimport '@material/web/button/outlined-button.js'\n\nimport { navigate, PageView } from '@operato/shell'\nimport { PageLifecycle } from '@operato/shell/dist/src/app/pages/page-view'\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 { ScrollbarStyles } from '@operato/styles'\n\nimport gql from 'graphql-tag'\nimport { BUILDING_INSPECTION_STATUS, BuildingInspection, BuildingInspectionStatus, Project, ProjectType } from './project-list'\nimport _getWeather from '../lib/waether'\nimport '@operato/chart/ox-progress-circle.js'\nimport { round } from 'lodash'\n\nexport interface InspectionSummary {\n wait: number\n request: number\n pass: number\n fail: number\n}\n\ninterface Weather {\n rain: number\n temperature: number\n humidity: number\n windDirection: string\n windSpeed: number\n}\n\n@customElement('project-detail')\nexport class ProjectDetail extends ScopedElementsMixin(PageView) {\n static styles = [\n ScrollbarStyles,\n css`\n :host {\n display: grid;\n grid-template-rows: 55px auto;\n color: #4e5055;\n\n width: 100%;\n background-color: var(--md-sys-color-background, #f6f6f6);\n overflow-y: auto;\n\n --grid-record-emphasized-background-color: red;\n --grid-record-emphasized-color: yellow;\n }\n\n md-outlined-button {\n --md-outlined-button-container-height: 30px;\n --md-outlined-button-trailing-space: var(--spacing-medium, 8px);\n --md-outlined-button-leading-space: var(--spacing-medium, 8px);\n --md-sys-color-outline: rgba(51, 51, 51, 0.2);\n }\n\n *[bold] {\n font-weight: bold;\n }\n\n div[header] {\n display: flex;\n margin: 0px var(--spacing-large, 12px);\n\n h2 {\n display: flex;\n gap: 7px;\n flex: 0.5;\n color: #3f71a0;\n font-size: 18px;\n\n md-icon[back] {\n background: linear-gradient(135deg, #3f71a0 0%, #5a8cc7 100%);\n color: white;\n padding: 8px;\n border-radius: 50%;\n cursor: pointer;\n box-shadow: 0 2px 8px rgba(63, 113, 160, 0.3);\n width: 14px;\n height: 14px;\n --md-icon-size: 20px;\n }\n\n md-icon[back]:hover {\n background: linear-gradient(135deg, #2e5c89 0%, #4a7bb0 100%);\n box-shadow: 0 4px 12px rgba(63, 113, 160, 0.4);\n }\n }\n\n div[button-container] {\n display: flex;\n align-items: center;\n justify-content: end;\n flex: 0.5;\n\n md-elevated-button {\n margin: 0 var(--spacing-small, 4px);\n\n --md-elevated-button-container-height: 32px;\n --md-elevated-button-label-text-size: 16px;\n --md-elevated-button-container-color: #0595e5;\n\n --md-elevated-button-label-text-color: var(--md-sys-color-on-primary);\n --md-elevated-button-hover-label-text-color: var(--md-sys-color-on-primary);\n --md-elevated-button-pressed-label-text-color: var(--md-sys-color-on-primary);\n --md-elevated-button-focus-label-text-color: var(--md-sys-color-on-primary);\n --md-elevated-button-icon-color: var(--md-sys-color-on-primary);\n --md-elevated-button-hover-icon-color: var(--md-sys-color-on-primary);\n --md-elevated-button-pressed-icon-color: var(--md-sys-color-on-primary);\n --md-elevated-button-focus-icon-color: var(--md-sys-color-on-primary);\n }\n }\n }\n\n div[body] {\n display: flex;\n margin: var(--spacing-large, 12px);\n margin-top: 0;\n gap: var(--spacing-medium, 8px);\n\n h3 {\n color: #2e79be;\n font-size: 16px;\n margin: 0px;\n\n a {\n text-decoration: none;\n color: #2e79be;\n }\n }\n\n & > div {\n display: flex;\n flex: 1;\n gap: var(--spacing-medium, 8px);\n flex-direction: column;\n\n & > div {\n display: flex;\n flex-direction: column;\n background-color: var(--md-sys-color-on-primary);\n border: 1px solid #cccccc80;\n gap: var(--spacing-medium, 8px);\n padding: var(--spacing-large, 12px);\n border-radius: 5px;\n }\n\n div[left-top] {\n div[content-1] {\n display: flex;\n align-items: center;\n gap: var(--spacing-medium, 8px);\n font-size: 14px;\n\n img {\n width: 42%;\n height: auto;\n aspect-ratio: 1920 / 1080;\n border: 1px solid #cccccc80;\n }\n img[no-image] {\n object-fit: contain;\n opacity: 0.5;\n }\n }\n div[content-2] {\n height: 65px;\n overflow-y: auto;\n font-size: 14px;\n }\n }\n\n div[left-bottom] {\n flex: 1;\n\n display: flex;\n flex-direction: column;\n\n [building-complex-img] {\n width: 100%;\n flex: 1;\n aspect-ratio: 2 / 1;\n }\n\n img {\n opacity: 0.5;\n }\n\n div[subject] {\n margin-bottom: var(--spacing-small, 4px);\n }\n\n div[building-container] {\n display: block;\n\n & > * {\n margin-right: var(--spacing-medium, 8px);\n margin-bottom: var(--spacing-medium, 8px);\n }\n md-outlined-button {\n --md-outlined-button-container-height: 30px;\n --md-outlined-button-trailing-space: var(--spacing-medium, 8px);\n --md-outlined-button-leading-space: var(--spacing-medium, 8px);\n --md-sys-color-outline: rgba(51, 51, 51, 0.2);\n }\n }\n }\n\n div[right-top] {\n div[state] {\n display: flex;\n flex-direction: column;\n gap: var(--spacing-large, 12px);\n\n div[progress-container] {\n display: flex;\n justify-content: space-around;\n gap: 8px;\n\n span[progress] {\n max-width: 165px;\n text-align: center;\n display: flex;\n justify-self: center;\n flex-direction: column;\n width: 100%;\n margin-inline: 12px;\n\n & > div {\n font-weight: bold;\n color: #2e79be;\n font-size: 16px;\n margin-top: 9px;\n }\n & > div[week] {\n color: #06b5af;\n }\n & > div[insp-pass-rate] {\n color: #1bb401;\n }\n & > div[robot-progress-rate] {\n color: #8957d8;\n }\n }\n }\n\n div[weather] {\n display: flex;\n flex-direction: column;\n gap: var(--spacing-small, 4px);\n margin-left: var(--spacing-medium, 8px);\n font-size: 14px;\n\n & > div {\n display: flex;\n justify-content: space-between;\n --md-icon-size: 18px;\n margin-right: var(--spacing-small, 4px);\n\n & > span {\n display: flex;\n align-items: center;\n gap: var(--spacing-tiny, 2px);\n }\n }\n }\n }\n div[inspection] {\n display: grid;\n grid-template-columns: 1.4fr 0.9fr 0.9fr 0.9fr 0.9fr;\n margin-top: 10px;\n background: #f6f6f6;\n border-radius: 7px;\n padding: var(--spacing-small, 4px) 0px;\n\n & > span {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n\n div[wait] {\n color: #4e5055;\n }\n div[request] {\n color: #2e79be;\n }\n div[pass] {\n color: #1bb401;\n }\n div[fail] {\n color: #ff4444;\n }\n }\n & > span[name] {\n flex-direction: row;\n text-align: right;\n gap: var(--spacing-medium, 8px);\n line-height: 1.3;\n\n md-icon {\n width: 40px;\n height: 40px;\n border-radius: 7px;\n color: #fff;\n background: #f16154;\n }\n }\n }\n div[kpi-container] {\n display: flex;\n gap: 8px;\n margin-bottom: 8px;\n align-items: center;\n\n div[kpi-header] {\n grid-column: 1 / -1;\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: var(--spacing-small, 4px);\n\n span[kpi-title] {\n font-weight: bold;\n font-size: 16px;\n color: #2e79be;\n }\n\n span[kpi-datetime] {\n font-size: 12px;\n color: #666;\n }\n }\n\n div[kpi-info-item] {\n display: flex;\n flex: 1;\n flex-direction: column;\n align-items: center;\n padding: 5px;\n background: #f6f6f6;\n border-radius: 4px;\n min-height: 50px;\n justify-content: center;\n margin-inline: 12px;\n border-radius: 7px;\n\n span[kpi-info-label] {\n font-size: 16px;\n color: #4e5055;\n margin-bottom: 2px;\n }\n\n span[kpi-info-value] {\n font-size: 18px;\n\n & > span[small] {\n font-size: 17px;\n }\n }\n\n &[weather] {\n background: none;\n align-items: flex-start;\n\n & > div {\n width: 100%;\n }\n }\n\n &[kpi] {\n flex-direction: row;\n justify-content: space-around;\n\n div[kpi-info-label] {\n display: flex;\n flex-direction: column;\n }\n\n ox-progress-circle {\n width: 45px;\n }\n }\n }\n }\n div[notice] {\n margin-top: var(--spacing-medium, 8px);\n\n div[name] {\n margin-left: 4px;\n }\n div[content] {\n background-color: #ebc8321a;\n border-radius: 10px;\n padding: var(--spacing-medium, 8px);\n font-size: 14px;\n margin-top: var(--spacing-small, 4px);\n }\n }\n }\n\n div[right-bottom] {\n flex: 1;\n\n display: flex;\n flex-direction: column;\n\n div[table-container] {\n flex: 1;\n\n overflow-y: auto;\n overflow-x: hidden;\n position: relative;\n }\n\n hr {\n position: sticky;\n margin: 0;\n top: 0px;\n border: 1px solid #3295f1;\n }\n\n table {\n width: 100%;\n border-collapse: collapse;\n table-layout: fixed;\n }\n\n thead {\n position: sticky;\n top: var(--spacing-tiny, 2px);\n background-color: #464651;\n color: var(--md-sys-color-on-primary);\n z-index: 1;\n }\n\n thead th {\n padding: var(--spacing-tiny, 2px) var(--spacing-small, 4px);\n font-size: 15px;\n text-wrap: pretty;\n }\n\n tbody td {\n border-bottom: 1px solid rgba(51, 51, 51, 0.2);\n padding: var(--spacing-small, 4px);\n text-align: center;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n font-size: 13px;\n }\n\n tbody td[status='FAIL'] {\n color: #e15757;\n }\n\n md-elevated-button {\n margin: 0 var(--spacing-small, 4px);\n\n --md-elevated-button-container-height: 32px;\n --md-elevated-button-label-text-size: 16px;\n --md-elevated-button-container-color: #0595e5;\n\n --md-elevated-button-label-text-color: var(--md-sys-color-on-primary);\n --md-elevated-button-hover-label-text-color: var(--md-sys-color-on-primary);\n --md-elevated-button-pressed-label-text-color: var(--md-sys-color-on-primary);\n --md-elevated-button-focus-label-text-color: var(--md-sys-color-on-primary);\n --md-elevated-button-icon-color: var(--md-sys-color-on-primary);\n --md-elevated-button-hover-icon-color: var(--md-sys-color-on-primary);\n --md-elevated-button-pressed-icon-color: var(--md-sys-color-on-primary);\n --md-elevated-button-focus-icon-color: var(--md-sys-color-on-primary);\n\n &[red] {\n --md-elevated-button-container-color: #e15757;\n }\n }\n }\n }\n }\n `\n ]\n\n get context() {\n return {\n title: '진행 중 프로젝트 상세 정보'\n }\n }\n\n private defaultProject = {\n name: '',\n buildingComplex: {\n address: '',\n area: 0,\n constructionCompany: '',\n clientCompany: '',\n supervisoryCompany: '',\n designCompany: '',\n constructionType: '',\n buildings: []\n }\n }\n\n @state() projectId: string = ''\n @state() project: Project = { ...this.defaultProject }\n @state() buildingInspections: BuildingInspection[] = []\n @state() inspectionSummary: InspectionSummary = {\n wait: 0,\n request: 0,\n pass: 0,\n fail: 0\n }\n @state() weather: Weather = {\n rain: 0,\n temperature: 0,\n humidity: 0,\n windDirection: '',\n windSpeed: 0\n }\n\n render() {\n let totalInspectionCount =\n this.inspectionSummary.pass + this.inspectionSummary.fail + this.inspectionSummary.request + this.inspectionSummary.wait\n\n return html`\n <div header>\n <h2>\n <md-icon slot=\"icon\" back @click=${() => history.back()}>arrow_back</md-icon>\n ${this.project.name}\n </h2>\n <div button-container>\n <md-elevated-button\n target=\"_blank\"\n href=${this.project.buildingComplex?.virtualTourLink || ''}\n ?disabled=${!this.project.buildingComplex?.virtualTourLink}\n >\n <md-icon slot=\"icon\">smart_toy</md-icon>Virtual Tour\n </md-elevated-button>\n <md-elevated-button href=${`project-update/${this.project.id}`}>\n <md-icon slot=\"icon\">assignment</md-icon>프로젝트 정보 수정\n </md-elevated-button>\n <md-elevated-button href=${`project-plan-management/${this.project.id}`}>\n <md-icon slot=\"icon\">description</md-icon>도면 관리\n </md-elevated-button>\n <md-elevated-button href=${`project-task/${this.project.id}`}>\n <md-icon slot=\"icon\">event_note</md-icon>공정표 관리\n </md-elevated-button>\n </div>\n </div>\n\n <div body>\n <div>\n <div left-top>\n <h3>기본 정보</h3>\n <div content-1>\n <img\n ?no-image=${!this.project.mainPhoto?.fullpath}\n src=${this.project.mainPhoto?.fullpath || '/assets/images/no-image.png'}\n />\n\n <div>\n <div row>\n <span>- 면적 : </span>\n <span>${this.project.buildingComplex?.area?.toLocaleString()} ㎡</span>\n </div>\n <div row>\n <span>- 착공~준공 : </span>\n <span bold>${this.project.startDate}~${this.project.endDate}</span>\n </div>\n <div row>\n <span>- 발주처 : </span>\n <span>${this.project.buildingComplex?.clientCompany}</span>\n </div>\n <div row>\n <span>- 건설사 : </span>\n <span>${this.project.buildingComplex?.constructionCompany}</span>\n </div>\n <div row>\n <span>- 감리사 : </span>\n <span>${this.project.buildingComplex?.supervisoryCompany}</span>\n </div>\n <div row>\n <span>- 설계사 : </span>\n <span>${this.project.buildingComplex?.designCompany}</span>\n </div>\n </div>\n </div>\n\n <div content-2>\n <div row>\n <span>- 건설구분 : </span>\n <span>${this.project.buildingComplex?.constructionType}</span>\n </div>\n <div row>\n <span>- 공사금액 : </span>\n <span>${this.project.buildingComplex?.constructionCost?.toLocaleString()} 원</span>\n </div>\n <div row>\n <span>- 세대수 : </span>\n <span>${this.project.buildingComplex?.householdCount?.toLocaleString()}</span>\n </div>\n <div row>\n <span>- 기타 : </span>\n <span>${this.project.buildingComplex?.etc}</span>\n </div>\n </div>\n </div>\n\n <div left-bottom>\n <h3>조감도(BIM도면)</h3>\n ${this.project.buildingComplex?.drawing?.fullpath\n ? html`<div building-complex-img></div>`\n : html`<img building-complex-img src=\"/assets/images/img-building-complex-default.jpg\" />`}\n <div>\n <div subject bold>개별 단지 상세정보 바로가기</div>\n <div building-container>\n ${this.project.buildingComplex?.buildings?.map(building => {\n return html`<md-outlined-button href=${`building-complex-detail/${this.project.id}?buildingId=${building.id}`}>\n ${building.name}\n </md-outlined-button>`\n })}\n </div>\n </div>\n </div>\n </div>\n\n <div>\n <div right-top>\n <h3>프로젝트 현황</h3>\n\n <div kpi-header>\n <span kpi-datetime\n >${new Date().toLocaleDateString('ko-KR')}\n ${new Date().toLocaleTimeString('ko-KR', { hour: '2-digit', minute: '2-digit', hour12: false })}</span\n >\n </div>\n <div state>\n <div kpi-container>\n <div kpi-info-item kpi>\n <ox-progress-circle\n .value=${this.project.kpi || 0}\n fontColor=\"transparent\"\n borderStyle=\"none\"\n innerCircleSize=\"30%\"\n circleColor=\"#E15757\"\n background=\"#f6f6f6\"\n size=\"120px\"\n ></ox-progress-circle>\n\n <div kpi-info-label>\n <span kpi-info-label>KPI 지수</span>\n <span kpi-info-value bold>${this.project.kpi || 0}%</span>\n </div>\n </div>\n <div kpi-info-item>\n <span kpi-info-label>검측 통과율</span>\n <span kpi-info-value>\n <span bold>${this.inspectionSummary.pass?.toLocaleString() || 0}</span>\n <span small> / ${totalInspectionCount?.toLocaleString() || 0}</span>\n </span>\n </div>\n <div kpi-info-item>\n <span kpi-info-label>작업 중 로봇</span>\n <span kpi-info-value>\n <span bold>${this.project.robotCount?.toLocaleString() || 0}</span>\n <span small> 대</span>\n </span>\n </div>\n <div kpi-info-item weather>\n <div>\n <span><md-icon slot=\"icon\">rainy</md-icon>강수확률</span>\n <span bold>${this.weather.rain}%</span>\n </div>\n <div>\n <span><md-icon slot=\"icon\">humidity_percentage</md-icon> 습도</span>\n <span bold>${this.weather.humidity}%</span>\n </div>\n <div>\n <span><md-icon slot=\"icon\">thermostat</md-icon> 온도</span>\n <span bold>${this.weather.temperature}°C</span>\n </div>\n\n <!--\n <div>\n <span><md-icon slot=\"icon\">arrows_output</md-icon> 풍향</span>\n <span bold>${this.weather.windDirection}</span>\n </div>\n <div>\n <span><md-icon slot=\"icon\">air</md-icon> 풍속</span>\n <span bold>${this.weather.windSpeed} m/s</span>\n </div>\n -->\n </div>\n </div>\n\n <div progress-container>\n <span progress>\n <ox-progress-circle\n .value=${this.project.totalProgress}\n titleText=\"전체\"\n suffix=\"%\"\n fontSize=\"27px\"\n fontColor=\"#4E5055\"\n borderStyle=\"none\"\n innerCircleSize=\"28%\"\n circleColor=\"#0595E5\"\n shadow=\"#00000026 4px 4px 4px\"\n background=\"#eaf5fd\"\n ></ox-progress-circle>\n <div>전체공정율(%)</div>\n </span>\n <span progress>\n <ox-progress-circle\n .value=${this.project.weeklyProgress}\n titleText=\"주간\"\n suffix=\"%\"\n fontSize=\"27px\"\n fontColor=\"#4E5055\"\n borderStyle=\"none\"\n innerCircleSize=\"28%\"\n circleColor=\"#06B5AF\"\n shadow=\"#00000026 4px 4px 4px\"\n background=\"#eaf7f7\"\n ></ox-progress-circle>\n <div week>주간공정율(%)</div>\n </span>\n\n <span progress>\n <ox-progress-circle\n .value=${this.project.inspPassRate}\n titleText=\"검측 통과\"\n suffix=\"%\"\n fontSize=\"27px\"\n fontColor=\"#4E5055\"\n borderStyle=\"none\"\n innerCircleSize=\"28%\"\n circleColor=\"#1BB401\"\n shadow=\"#00000026 4px 4px 4px\"\n background=\"#e8f7e5\"\n ></ox-progress-circle>\n <div insp-pass-rate>통과 비율(%)</div>\n </span>\n <span progress>\n <ox-progress-circle\n .value=${this.project.robotProgressRate}\n titleText=\"로봇작업\"\n suffix=\"%\"\n fontSize=\"27px\"\n fontColor=\"#4E5055\"\n borderStyle=\"none\"\n innerCircleSize=\"28%\"\n circleColor=\"#8957D8\"\n shadow=\"#00000026 4px 4px 4px\"\n background=\"#f3eefb\"\n ></ox-progress-circle>\n <div robot-progress-rate>진행률(%)</div>\n </span>\n </div>\n </div>\n <div inspection>\n <span name bold>\n <md-icon slot=\"icon\">list_alt_add</md-icon>\n 시공검측<br />현황\n </span>\n <span>\n <div>검측요청</div>\n <div bold>${this.inspectionSummary.request}</div>\n </span>\n <span>\n <div>검측대기</div>\n <div bold>${this.inspectionSummary.wait}</div>\n </span>\n <span>\n <div>합격</div>\n <div bold pass>${this.inspectionSummary.pass}</div>\n </span>\n <span>\n <div>불합격</div>\n <div bold fail>${this.inspectionSummary.fail}</div>\n </span>\n </div>\n <div notice>\n <div name bold>공지사항</div>\n <div content>${this.project.buildingComplex.notice}</div>\n </div>\n </div>\n\n <div right-bottom>\n <h3>검측 현황</h3>\n <div table-container>\n <hr />\n <table>\n <thead>\n <tr>\n <th width=\"3%\"></th>\n <th width=\"10%\">검측 위치</th>\n <th width=\"10%\">공종</th>\n <th width=\"22%\">내용</th>\n <th width=\"15%\">검측 요청일</th>\n <th width=\"10%\">검측 결과</th>\n </tr>\n </thead>\n <tbody>\n ${this.buildingInspections.map((inspection, idx) => {\n return html` <tr @click=${() => this._onClickInspection(inspection)}>\n <td>${idx + 1}</td>\n <td>${inspection?.buildingLevel?.building?.name} ${inspection?.buildingLevel?.floorDisplayName}층</td>\n <td bold>${inspection.checklist?.constructionType}</td>\n <td>${inspection.checklist?.inspectionParts?.join(', ') || ''}</td>\n <td>${this._formatDate(inspection.requestDate)}</td>\n <td bold status=${inspection.status || ''}>\n ${inspection.status && BUILDING_INSPECTION_STATUS[inspection.status]}\n </td>\n </tr>`\n })}\n </tbody>\n </table>\n </div>\n </div>\n </div>\n </div>\n `\n }\n\n async pageInitialized(lifecycle: PageLifecycle) {}\n\n async pageUpdated(changes: any, lifecycle: PageLifecycle) {\n if (this.active) {\n this.projectId = lifecycle.resourceId || ''\n await this.initProject(lifecycle.resourceId)\n }\n }\n\n async initProject(projectId: string = '') {\n const response = await client.query({\n query: gql`\n query Project($id: String!, $projectId: String!, $params: BuildingInspectionsOfProject!) {\n project(id: $id) {\n id\n name\n startDate\n endDate\n projectType\n mainPhoto {\n fullpath\n }\n totalProgress\n weeklyProgress\n kpi\n inspPassRate\n robotProgressRate\n structuralSafetyRate\n robotCount\n buildingComplex {\n id\n address\n latitude\n longitude\n area\n clientCompany\n constructionCompany\n supervisoryCompany\n designCompany\n drawing {\n id\n name\n fullpath\n }\n constructionType\n constructionCost\n etc\n notice\n householdCount\n buildingCount\n virtualTourLink\n buildings {\n id\n name\n floorCount\n }\n }\n }\n\n inspectionSummary: buildingInspectionSummaryOfProject(projectId: $projectId) {\n wait\n request\n pass\n fail\n }\n\n buildingInspectionsOfProject(params: $params) {\n items {\n id\n status\n requestDate\n buildingLevel {\n id\n floor\n floorDisplayName\n building {\n id\n name\n }\n }\n checklist {\n name\n constructionType\n constructionDetailType\n inspectionParts\n }\n }\n total\n }\n }\n `,\n variables: {\n id: projectId,\n projectId,\n params: {\n projectId,\n limit: 10\n }\n }\n })\n\n if (response.errors) return\n\n this.project = response.data?.project || {}\n this.inspectionSummary = response.data?.inspectionSummary || {}\n this.buildingInspections = response.data?.buildingInspectionsOfProject?.items || []\n\n const { latitude, longitude } = this.project?.buildingComplex\n if (latitude && longitude) {\n this.weather = await _getWeather(latitude, longitude)\n }\n }\n\n private _onClickInspection(buildingInspection: BuildingInspection) {\n console.log('buildingInspection :', buildingInspection)\n\n if (this.project.projectType === ProjectType.DSSP) {\n navigate(\n `building-inspection-grid-detail/${this.project.id}?buildingId=${buildingInspection?.buildingLevel?.building?.id}&levelId=${buildingInspection?.buildingLevel?.id}`\n )\n } else if (this.project.projectType === ProjectType.DCSP) {\n navigate(`building-inspection-detail-drawing/${buildingInspection.id}`)\n }\n }\n\n private _formatDate(date: Date | undefined) {\n return date\n ? new Intl.DateTimeFormat('en-CA', {\n timeZone: 'Asia/Seoul',\n year: 'numeric',\n month: '2-digit',\n day: '2-digit'\n }).format(new Date(date))\n : ''\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"project-detail.js","sourceRoot":"","sources":["../../../client/pages/project/project-detail.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@material/web/button/elevated-button.js'\nimport '@material/web/textfield/outlined-text-field.js'\nimport '@material/web/button/outlined-button.js'\n\nimport { navigate, PageView } from '@operato/shell'\nimport { PageLifecycle } from '@operato/shell/dist/src/app/pages/page-view'\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 { ScrollbarStyles } from '@operato/styles'\n\nimport gql from 'graphql-tag'\nimport { BUILDING_INSPECTION_STATUS, BuildingInspection, Project, ProjectType } from './project-list'\nimport _getWeather from '../lib/waether'\nimport '@operato/chart/ox-progress-circle.js'\n\nexport interface InspectionSummary {\n wait: number\n request: number\n pass: number\n fail: number\n}\n\ninterface Weather {\n rain: number\n temperature: number\n humidity: number\n windDirection: string\n windSpeed: number\n}\n\n@customElement('project-detail')\nexport class ProjectDetail extends ScopedElementsMixin(PageView) {\n static styles = [\n ScrollbarStyles,\n css`\n :host {\n display: grid;\n grid-template-rows: 55px auto;\n color: #4e5055;\n\n width: 100%;\n background-color: var(--md-sys-color-background, #f6f6f6);\n overflow-y: auto;\n\n --grid-record-emphasized-background-color: red;\n --grid-record-emphasized-color: yellow;\n }\n\n md-outlined-button {\n --md-outlined-button-container-height: 30px;\n --md-outlined-button-trailing-space: var(--spacing-medium, 8px);\n --md-outlined-button-leading-space: var(--spacing-medium, 8px);\n --md-sys-color-outline: rgba(51, 51, 51, 0.2);\n }\n\n *[bold] {\n font-weight: bold;\n }\n\n div[header] {\n display: flex;\n margin: 0px var(--spacing-large, 12px);\n\n h2 {\n display: flex;\n gap: 7px;\n flex: 0.5;\n color: #3f71a0;\n font-size: 18px;\n\n md-icon[back] {\n background: linear-gradient(135deg, #3f71a0 0%, #5a8cc7 100%);\n color: white;\n padding: 8px;\n border-radius: 50%;\n cursor: pointer;\n box-shadow: 0 2px 8px rgba(63, 113, 160, 0.3);\n width: 14px;\n height: 14px;\n --md-icon-size: 20px;\n }\n\n md-icon[back]:hover {\n background: linear-gradient(135deg, #2e5c89 0%, #4a7bb0 100%);\n box-shadow: 0 4px 12px rgba(63, 113, 160, 0.4);\n }\n }\n\n div[button-container] {\n display: flex;\n align-items: center;\n justify-content: end;\n flex: 0.5;\n\n md-elevated-button {\n margin: 0 var(--spacing-small, 4px);\n\n --md-elevated-button-container-height: 32px;\n --md-elevated-button-label-text-size: 16px;\n --md-elevated-button-container-color: #0595e5;\n\n --md-elevated-button-label-text-color: var(--md-sys-color-on-primary);\n --md-elevated-button-hover-label-text-color: var(--md-sys-color-on-primary);\n --md-elevated-button-pressed-label-text-color: var(--md-sys-color-on-primary);\n --md-elevated-button-focus-label-text-color: var(--md-sys-color-on-primary);\n --md-elevated-button-icon-color: var(--md-sys-color-on-primary);\n --md-elevated-button-hover-icon-color: var(--md-sys-color-on-primary);\n --md-elevated-button-pressed-icon-color: var(--md-sys-color-on-primary);\n --md-elevated-button-focus-icon-color: var(--md-sys-color-on-primary);\n }\n }\n }\n\n div[body] {\n display: flex;\n margin: var(--spacing-large, 12px);\n margin-top: 0;\n gap: var(--spacing-medium, 8px);\n\n h3 {\n color: #2e79be;\n font-size: 16px;\n margin: 0px;\n\n a {\n text-decoration: none;\n color: #2e79be;\n }\n }\n\n & > div {\n display: flex;\n flex: 1;\n gap: var(--spacing-medium, 8px);\n flex-direction: column;\n\n & > div {\n display: flex;\n flex-direction: column;\n background-color: var(--md-sys-color-on-primary);\n border: 1px solid #cccccc80;\n gap: var(--spacing-medium, 8px);\n padding: var(--spacing-large, 12px);\n border-radius: 5px;\n }\n\n div[left-top] {\n div[content-1] {\n display: flex;\n align-items: center;\n gap: var(--spacing-medium, 8px);\n font-size: 14px;\n\n img {\n width: 42%;\n height: auto;\n aspect-ratio: 1920 / 1080;\n border: 1px solid #cccccc80;\n }\n img[no-image] {\n object-fit: contain;\n opacity: 0.5;\n }\n }\n div[content-2] {\n height: 65px;\n overflow-y: auto;\n font-size: 14px;\n }\n }\n\n div[left-bottom] {\n flex: 1;\n\n display: flex;\n flex-direction: column;\n\n [building-complex-img] {\n width: 100%;\n flex: 1;\n aspect-ratio: 2 / 1;\n }\n\n img {\n opacity: 0.5;\n }\n\n div[subject] {\n margin-bottom: var(--spacing-small, 4px);\n }\n\n div[building-container] {\n display: block;\n\n & > * {\n margin-right: var(--spacing-medium, 8px);\n margin-bottom: var(--spacing-medium, 8px);\n }\n md-outlined-button {\n --md-outlined-button-container-height: 30px;\n --md-outlined-button-trailing-space: var(--spacing-medium, 8px);\n --md-outlined-button-leading-space: var(--spacing-medium, 8px);\n --md-sys-color-outline: rgba(51, 51, 51, 0.2);\n }\n }\n }\n\n div[right-top] {\n div[state] {\n display: flex;\n flex-direction: column;\n gap: var(--spacing-large, 12px);\n\n div[progress-container] {\n display: flex;\n justify-content: space-around;\n gap: 8px;\n\n span[progress] {\n max-width: 165px;\n text-align: center;\n display: flex;\n justify-self: center;\n flex-direction: column;\n width: 100%;\n margin-inline: 12px;\n\n & > div {\n font-weight: bold;\n color: #2e79be;\n font-size: 16px;\n margin-top: 9px;\n }\n & > div[week] {\n color: #06b5af;\n }\n & > div[insp-pass-rate] {\n color: #1bb401;\n }\n & > div[robot-progress-rate] {\n color: #8957d8;\n }\n }\n }\n\n div[weather] {\n display: flex;\n flex-direction: column;\n gap: var(--spacing-small, 4px);\n margin-left: var(--spacing-medium, 8px);\n font-size: 14px;\n\n & > div {\n display: flex;\n justify-content: space-between;\n --md-icon-size: 18px;\n margin-right: var(--spacing-small, 4px);\n\n & > span {\n display: flex;\n align-items: center;\n gap: var(--spacing-tiny, 2px);\n }\n }\n }\n }\n div[inspection] {\n display: grid;\n grid-template-columns: 1.4fr 0.9fr 0.9fr 0.9fr 0.9fr;\n margin-top: 10px;\n background: #f6f6f6;\n border-radius: 7px;\n padding: var(--spacing-small, 4px) 0px;\n\n & > span {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n\n div[wait] {\n color: #4e5055;\n }\n div[request] {\n color: #2e79be;\n }\n div[pass] {\n color: #1bb401;\n }\n div[fail] {\n color: #ff4444;\n }\n }\n & > span[name] {\n flex-direction: row;\n text-align: right;\n gap: var(--spacing-medium, 8px);\n line-height: 1.3;\n\n md-icon {\n width: 40px;\n height: 40px;\n border-radius: 7px;\n color: #fff;\n background: #f16154;\n }\n }\n }\n div[kpi-container] {\n display: flex;\n gap: 8px;\n margin-bottom: 8px;\n align-items: center;\n\n div[kpi-header] {\n grid-column: 1 / -1;\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: var(--spacing-small, 4px);\n\n span[kpi-title] {\n font-weight: bold;\n font-size: 16px;\n color: #2e79be;\n }\n\n span[kpi-datetime] {\n font-size: 12px;\n color: #666;\n }\n }\n\n div[kpi-info-item] {\n display: flex;\n flex: 1;\n flex-direction: column;\n align-items: center;\n padding: 5px;\n background: #f6f6f6;\n border-radius: 4px;\n min-height: 50px;\n justify-content: center;\n margin-inline: 12px;\n border-radius: 7px;\n\n span[kpi-info-label] {\n font-size: 16px;\n color: #4e5055;\n margin-bottom: 2px;\n }\n\n span[kpi-info-value] {\n font-size: 18px;\n\n & > span[small] {\n font-size: 17px;\n }\n }\n\n &[weather] {\n background: none;\n align-items: flex-start;\n\n & > div {\n width: 100%;\n }\n }\n\n &[kpi] {\n flex-direction: row;\n justify-content: space-around;\n\n div[kpi-info-label] {\n display: flex;\n flex-direction: column;\n }\n\n ox-progress-circle {\n width: 45px;\n }\n }\n }\n }\n div[notice] {\n margin-top: var(--spacing-medium, 8px);\n\n div[name] {\n margin-left: 4px;\n }\n div[content] {\n background-color: #ebc8321a;\n border-radius: 10px;\n padding: var(--spacing-medium, 8px);\n font-size: 14px;\n margin-top: var(--spacing-small, 4px);\n }\n }\n }\n\n div[right-bottom] {\n flex: 1;\n\n display: flex;\n flex-direction: column;\n\n div[table-container] {\n flex: 1;\n\n overflow-y: auto;\n overflow-x: hidden;\n position: relative;\n }\n\n hr {\n position: sticky;\n margin: 0;\n top: 0px;\n border: 1px solid #3295f1;\n }\n\n table {\n width: 100%;\n border-collapse: collapse;\n table-layout: fixed;\n }\n\n thead {\n position: sticky;\n top: var(--spacing-tiny, 2px);\n background-color: #464651;\n color: var(--md-sys-color-on-primary);\n z-index: 1;\n }\n\n thead th {\n padding: var(--spacing-tiny, 2px) var(--spacing-small, 4px);\n font-size: 15px;\n text-wrap: pretty;\n }\n\n tbody td {\n border-bottom: 1px solid rgba(51, 51, 51, 0.2);\n padding: var(--spacing-small, 4px);\n text-align: center;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n font-size: 13px;\n }\n\n tbody td[status='FAIL'] {\n color: #e15757;\n }\n\n md-elevated-button {\n margin: 0 var(--spacing-small, 4px);\n\n --md-elevated-button-container-height: 32px;\n --md-elevated-button-label-text-size: 16px;\n --md-elevated-button-container-color: #0595e5;\n\n --md-elevated-button-label-text-color: var(--md-sys-color-on-primary);\n --md-elevated-button-hover-label-text-color: var(--md-sys-color-on-primary);\n --md-elevated-button-pressed-label-text-color: var(--md-sys-color-on-primary);\n --md-elevated-button-focus-label-text-color: var(--md-sys-color-on-primary);\n --md-elevated-button-icon-color: var(--md-sys-color-on-primary);\n --md-elevated-button-hover-icon-color: var(--md-sys-color-on-primary);\n --md-elevated-button-pressed-icon-color: var(--md-sys-color-on-primary);\n --md-elevated-button-focus-icon-color: var(--md-sys-color-on-primary);\n\n &[red] {\n --md-elevated-button-container-color: #e15757;\n }\n }\n }\n }\n }\n `\n ]\n\n get context() {\n return {\n title: '진행 중 프로젝트 상세 정보'\n }\n }\n\n private defaultProject = {\n name: '',\n buildingComplex: {\n address: '',\n area: 0,\n constructionCompany: '',\n clientCompany: '',\n supervisoryCompany: '',\n designCompany: '',\n constructionType: '',\n buildings: []\n }\n }\n\n @state() projectId: string = ''\n @state() project: Project = { ...this.defaultProject }\n @state() buildingInspections: BuildingInspection[] = []\n @state() inspectionSummary: InspectionSummary = {\n wait: 0,\n request: 0,\n pass: 0,\n fail: 0\n }\n @state() weather: Weather = {\n rain: 0,\n temperature: 0,\n humidity: 0,\n windDirection: '',\n windSpeed: 0\n }\n\n render() {\n let totalInspectionCount =\n this.inspectionSummary.pass + this.inspectionSummary.fail + this.inspectionSummary.request + this.inspectionSummary.wait\n\n return html`\n <div header>\n <h2>\n <md-icon slot=\"icon\" back @click=${() => history.back()}>arrow_back</md-icon>\n ${this.project.name}\n </h2>\n <div button-container>\n <md-elevated-button\n target=\"_blank\"\n href=${this.project.buildingComplex?.virtualTourLink || ''}\n ?disabled=${!this.project.buildingComplex?.virtualTourLink}\n >\n <md-icon slot=\"icon\">smart_toy</md-icon>Virtual Tour\n </md-elevated-button>\n <md-elevated-button href=${`project-update/${this.project.id}`}>\n <md-icon slot=\"icon\">assignment</md-icon>프로젝트 정보 수정\n </md-elevated-button>\n <md-elevated-button href=${`project-plan-management/${this.project.id}`}>\n <md-icon slot=\"icon\">description</md-icon>도면 관리\n </md-elevated-button>\n <md-elevated-button href=${`project-task/${this.project.id}`}>\n <md-icon slot=\"icon\">event_note</md-icon>공정표 관리\n </md-elevated-button>\n </div>\n </div>\n\n <div body>\n <div>\n <div left-top>\n <h3>기본 정보</h3>\n <div content-1>\n <img\n ?no-image=${!this.project.mainPhoto?.fullpath}\n src=${this.project.mainPhoto?.fullpath || '/assets/images/no-image.png'}\n />\n\n <div>\n <div row>\n <span>- 면적 : </span>\n <span>${this.project.buildingComplex?.area?.toLocaleString()} ㎡</span>\n </div>\n <div row>\n <span>- 착공~준공 : </span>\n <span bold>${this.project.startDate}~${this.project.endDate}</span>\n </div>\n <div row>\n <span>- 발주처 : </span>\n <span>${this.project.buildingComplex?.clientCompany}</span>\n </div>\n <div row>\n <span>- 건설사 : </span>\n <span>${this.project.buildingComplex?.constructionCompany}</span>\n </div>\n <div row>\n <span>- 감리사 : </span>\n <span>${this.project.buildingComplex?.supervisoryCompany}</span>\n </div>\n <div row>\n <span>- 설계사 : </span>\n <span>${this.project.buildingComplex?.designCompany}</span>\n </div>\n </div>\n </div>\n\n <div content-2>\n <div row>\n <span>- 건설구분 : </span>\n <span>${this.project.buildingComplex?.constructionType}</span>\n </div>\n <div row>\n <span>- 공사금액 : </span>\n <span>${this.project.buildingComplex?.constructionCost?.toLocaleString()} 원</span>\n </div>\n <div row>\n <span>- 세대수 : </span>\n <span>${this.project.buildingComplex?.householdCount?.toLocaleString()}</span>\n </div>\n <div row>\n <span>- 기타 : </span>\n <span>${this.project.buildingComplex?.etc}</span>\n </div>\n </div>\n </div>\n\n <div left-bottom>\n <h3>조감도(BIM도면)</h3>\n ${this.project.buildingComplex?.drawing?.fullpath\n ? html`<div building-complex-img></div>`\n : html`<img building-complex-img src=\"/assets/images/img-building-complex-default.jpg\" />`}\n <div>\n <div subject bold>개별 단지 상세정보 바로가기</div>\n <div building-container>\n ${this.project.buildingComplex?.buildings?.map(building => {\n return html`<md-outlined-button href=${`building-complex-detail/${this.project.id}?buildingId=${building.id}`}>\n ${building.name}\n </md-outlined-button>`\n })}\n </div>\n </div>\n </div>\n </div>\n\n <div>\n <div right-top>\n <h3>프로젝트 현황</h3>\n\n <div kpi-header>\n <span kpi-datetime\n >${new Date().toLocaleDateString('ko-KR')}\n ${new Date().toLocaleTimeString('ko-KR', { hour: '2-digit', minute: '2-digit', hour12: false })}</span\n >\n </div>\n <div state>\n <div kpi-container>\n <div kpi-info-item kpi>\n <ox-progress-circle\n .value=${this.project.kpi || 0}\n fontColor=\"transparent\"\n borderStyle=\"none\"\n innerCircleSize=\"30%\"\n circleColor=\"#E15757\"\n background=\"#f6f6f6\"\n size=\"120px\"\n ></ox-progress-circle>\n\n <div kpi-info-label>\n <span kpi-info-label>KPI 지수</span>\n <span kpi-info-value bold>${this.project.kpi || 0}%</span>\n </div>\n </div>\n <div kpi-info-item>\n <span kpi-info-label>검측 통과율</span>\n <span kpi-info-value>\n <span bold>${this.inspectionSummary.pass?.toLocaleString() || 0}</span>\n <span small> / ${totalInspectionCount?.toLocaleString() || 0}</span>\n </span>\n </div>\n <div kpi-info-item>\n <span kpi-info-label>작업 중 로봇</span>\n <span kpi-info-value>\n <span bold>${this.project.robotCount?.toLocaleString() || 0}</span>\n <span small> 대</span>\n </span>\n </div>\n <div kpi-info-item weather>\n <div>\n <span><md-icon slot=\"icon\">rainy</md-icon>강수확률</span>\n <span bold>${this.weather.rain}%</span>\n </div>\n <div>\n <span><md-icon slot=\"icon\">humidity_percentage</md-icon> 습도</span>\n <span bold>${this.weather.humidity}%</span>\n </div>\n <div>\n <span><md-icon slot=\"icon\">thermostat</md-icon> 온도</span>\n <span bold>${this.weather.temperature}°C</span>\n </div>\n\n <!--\n <div>\n <span><md-icon slot=\"icon\">arrows_output</md-icon> 풍향</span>\n <span bold>${this.weather.windDirection}</span>\n </div>\n <div>\n <span><md-icon slot=\"icon\">air</md-icon> 풍속</span>\n <span bold>${this.weather.windSpeed} m/s</span>\n </div>\n -->\n </div>\n </div>\n\n <div progress-container>\n <span progress>\n <ox-progress-circle\n .value=${this.project.totalProgress}\n titleText=\"전체\"\n suffix=\"%\"\n fontSize=\"27px\"\n fontColor=\"#4E5055\"\n borderStyle=\"none\"\n innerCircleSize=\"28%\"\n circleColor=\"#0595E5\"\n shadow=\"#00000026 4px 4px 4px\"\n background=\"#eaf5fd\"\n ></ox-progress-circle>\n <div>전체공정율(%)</div>\n </span>\n <span progress>\n <ox-progress-circle\n .value=${this.project.weeklyProgress}\n titleText=\"주간\"\n suffix=\"%\"\n fontSize=\"27px\"\n fontColor=\"#4E5055\"\n borderStyle=\"none\"\n innerCircleSize=\"28%\"\n circleColor=\"#06B5AF\"\n shadow=\"#00000026 4px 4px 4px\"\n background=\"#eaf7f7\"\n ></ox-progress-circle>\n <div week>주간공정율(%)</div>\n </span>\n\n <span progress>\n <ox-progress-circle\n .value=${this.project.inspPassRate}\n titleText=\"검측 통과\"\n suffix=\"%\"\n fontSize=\"27px\"\n fontColor=\"#4E5055\"\n borderStyle=\"none\"\n innerCircleSize=\"28%\"\n circleColor=\"#1BB401\"\n shadow=\"#00000026 4px 4px 4px\"\n background=\"#e8f7e5\"\n ></ox-progress-circle>\n <div insp-pass-rate>통과 비율(%)</div>\n </span>\n <span progress>\n <ox-progress-circle\n .value=${this.project.robotProgressRate}\n titleText=\"로봇작업\"\n suffix=\"%\"\n fontSize=\"27px\"\n fontColor=\"#4E5055\"\n borderStyle=\"none\"\n innerCircleSize=\"28%\"\n circleColor=\"#8957D8\"\n shadow=\"#00000026 4px 4px 4px\"\n background=\"#f3eefb\"\n ></ox-progress-circle>\n <div robot-progress-rate>진행률(%)</div>\n </span>\n </div>\n </div>\n <div inspection>\n <span name bold>\n <md-icon slot=\"icon\">list_alt_add</md-icon>\n 시공검측<br />현황\n </span>\n <span>\n <div>검측요청</div>\n <div bold>${this.inspectionSummary.request}</div>\n </span>\n <span>\n <div>검측대기</div>\n <div bold>${this.inspectionSummary.wait}</div>\n </span>\n <span>\n <div>합격</div>\n <div bold pass>${this.inspectionSummary.pass}</div>\n </span>\n <span>\n <div>불합격</div>\n <div bold fail>${this.inspectionSummary.fail}</div>\n </span>\n </div>\n <div notice>\n <div name bold>공지사항</div>\n <div content>${this.project.buildingComplex.notice}</div>\n </div>\n </div>\n\n <div right-bottom>\n <h3>검측 현황</h3>\n <div table-container>\n <hr />\n <table>\n <thead>\n <tr>\n <th width=\"3%\"></th>\n <th width=\"10%\">검측 위치</th>\n <th width=\"10%\">공종</th>\n <th width=\"22%\">내용</th>\n <th width=\"15%\">검측 요청일</th>\n <th width=\"10%\">검측 결과</th>\n </tr>\n </thead>\n <tbody>\n ${this.buildingInspections.map((inspection, idx) => {\n return html` <tr @click=${() => this._onClickInspection(inspection)}>\n <td>${idx + 1}</td>\n <td>${inspection?.buildingLevel?.building?.name} ${inspection?.buildingLevel?.floorDisplayName}층</td>\n <td bold>${inspection.checklist?.constructionType}</td>\n <td>${inspection.checklist?.inspectionParts?.join(', ') || ''}</td>\n <td>${this._formatDate(inspection.requestDate)}</td>\n <td bold status=${inspection.status || ''}>\n ${inspection.status && BUILDING_INSPECTION_STATUS[inspection.status]}\n </td>\n </tr>`\n })}\n </tbody>\n </table>\n </div>\n </div>\n </div>\n </div>\n `\n }\n\n async pageInitialized(lifecycle: PageLifecycle) {}\n\n async pageUpdated(changes: any, lifecycle: PageLifecycle) {\n if (this.active) {\n this.projectId = lifecycle.resourceId || ''\n await this.initProject(lifecycle.resourceId)\n }\n }\n\n async initProject(projectId: string = '') {\n const response = await client.query({\n query: gql`\n query Project($id: String!, $projectId: String!, $params: BuildingInspectionsOfProject!) {\n project(id: $id) {\n id\n name\n startDate\n endDate\n projectType\n mainPhoto {\n fullpath\n }\n totalProgress\n weeklyProgress\n kpi\n inspPassRate\n robotProgressRate\n structuralSafetyRate\n robotCount\n buildingComplex {\n id\n address\n latitude\n longitude\n area\n clientCompany\n constructionCompany\n supervisoryCompany\n designCompany\n drawing {\n id\n name\n fullpath\n }\n constructionType\n constructionCost\n etc\n notice\n householdCount\n buildingCount\n virtualTourLink\n buildings {\n id\n name\n floorCount\n }\n }\n }\n\n inspectionSummary: buildingInspectionSummaryOfProject(projectId: $projectId) {\n wait\n request\n pass\n fail\n }\n\n buildingInspectionsOfProject(params: $params) {\n items {\n id\n status\n requestDate\n buildingLevel {\n id\n floor\n floorDisplayName\n building {\n id\n name\n }\n }\n checklist {\n name\n constructionType\n constructionDetailType\n inspectionParts\n }\n }\n total\n }\n }\n `,\n variables: {\n id: projectId,\n projectId,\n params: {\n projectId,\n limit: 10\n }\n }\n })\n\n if (response.errors) return\n\n this.project = response.data?.project || {}\n this.inspectionSummary = response.data?.inspectionSummary || {}\n this.buildingInspections = response.data?.buildingInspectionsOfProject?.items || []\n\n const { latitude, longitude } = this.project?.buildingComplex\n if (latitude && longitude) {\n this.weather = await _getWeather(latitude, longitude)\n }\n }\n\n private _onClickInspection(buildingInspection: BuildingInspection) {\n console.log('buildingInspection :', buildingInspection)\n\n if (this.project.projectType === ProjectType.DSSP) {\n navigate(\n `building-inspection-grid-detail/${this.project.id}?buildingId=${buildingInspection?.buildingLevel?.building?.id}&levelId=${buildingInspection?.buildingLevel?.id}`\n )\n } else if (this.project.projectType === ProjectType.DCSP) {\n navigate(`building-inspection-detail-drawing/${buildingInspection.id}`)\n }\n }\n\n private _formatDate(date: Date | undefined) {\n return date\n ? new Intl.DateTimeFormat('en-CA', {\n timeZone: 'Asia/Seoul',\n year: 'numeric',\n month: '2-digit',\n day: '2-digit'\n }).format(new Date(date))\n : ''\n }\n}\n"]}
|
|
@@ -23,6 +23,32 @@ export declare const BUILDING_INSPECTION_STATUS: {
|
|
|
23
23
|
PASS: string;
|
|
24
24
|
FAIL: string;
|
|
25
25
|
};
|
|
26
|
+
export declare enum SiteType {
|
|
27
|
+
APARTMENT_COMPLEX = "APARTMENT_COMPLEX",// 공동주택,
|
|
28
|
+
DETACHED_HOUSE = "DETACHED_HOUSE",// 단독주택
|
|
29
|
+
NEIGHBORHOOD_FACILITY = "NEIGHBORHOOD_FACILITY",// 근린생활시설
|
|
30
|
+
OFFICE = "OFFICE",// 업무시설
|
|
31
|
+
COMMERCIAL = "COMMERCIAL",// 상업시설
|
|
32
|
+
EDUCATION = "EDUCATION",// 교육·연구시설
|
|
33
|
+
MEDICAL = "MEDICAL",// 의료시설
|
|
34
|
+
CULTURAL = "CULTURAL",// 문화·집회시설
|
|
35
|
+
RELIGIOUS = "RELIGIOUS",// 종교시설
|
|
36
|
+
INDUSTRIAL = "INDUSTRIAL",// 산업시설
|
|
37
|
+
TRANSPORT = "TRANSPORT"
|
|
38
|
+
}
|
|
39
|
+
export declare const SITE_TYPE_DISPLAY: {
|
|
40
|
+
APARTMENT_COMPLEX: string;
|
|
41
|
+
DETACHED_HOUSE: string;
|
|
42
|
+
NEIGHBORHOOD_FACILITY: string;
|
|
43
|
+
OFFICE: string;
|
|
44
|
+
COMMERCIAL: string;
|
|
45
|
+
EDUCATION: string;
|
|
46
|
+
MEDICAL: string;
|
|
47
|
+
CULTURAL: string;
|
|
48
|
+
RELIGIOUS: string;
|
|
49
|
+
INDUSTRIAL: string;
|
|
50
|
+
TRANSPORT: string;
|
|
51
|
+
};
|
|
26
52
|
export declare enum ProjectType {
|
|
27
53
|
DSSP = "DSSP",
|
|
28
54
|
DCSP = "DCSP",
|
|
@@ -50,9 +76,12 @@ export interface Project {
|
|
|
50
76
|
export interface BuildingComplex {
|
|
51
77
|
id?: string;
|
|
52
78
|
address?: string;
|
|
79
|
+
siteType?: string;
|
|
53
80
|
latitude?: number;
|
|
54
81
|
longitude?: number;
|
|
55
82
|
area?: number;
|
|
83
|
+
coverageRatio?: number;
|
|
84
|
+
floorAreaRatio?: number;
|
|
56
85
|
constructionCompany?: string;
|
|
57
86
|
clientCompany?: string;
|
|
58
87
|
designCompany?: string;
|
|
@@ -61,6 +90,11 @@ export interface BuildingComplex {
|
|
|
61
90
|
drawingUpload?: FileUpload;
|
|
62
91
|
constructionType?: string;
|
|
63
92
|
constructionCost?: number;
|
|
93
|
+
structureType?: string;
|
|
94
|
+
workerCount?: number;
|
|
95
|
+
designChangeCount?: number;
|
|
96
|
+
plannedProgress?: number;
|
|
97
|
+
actualProgress?: number;
|
|
64
98
|
etc?: string;
|
|
65
99
|
householdCount?: number;
|
|
66
100
|
buildingCount?: number;
|
|
@@ -29,6 +29,33 @@ export const BUILDING_INSPECTION_STATUS = {
|
|
|
29
29
|
[BuildingInspectionStatus.PASS]: '합격',
|
|
30
30
|
[BuildingInspectionStatus.FAIL]: '불합격'
|
|
31
31
|
};
|
|
32
|
+
export var SiteType;
|
|
33
|
+
(function (SiteType) {
|
|
34
|
+
SiteType["APARTMENT_COMPLEX"] = "APARTMENT_COMPLEX";
|
|
35
|
+
SiteType["DETACHED_HOUSE"] = "DETACHED_HOUSE";
|
|
36
|
+
SiteType["NEIGHBORHOOD_FACILITY"] = "NEIGHBORHOOD_FACILITY";
|
|
37
|
+
SiteType["OFFICE"] = "OFFICE";
|
|
38
|
+
SiteType["COMMERCIAL"] = "COMMERCIAL";
|
|
39
|
+
SiteType["EDUCATION"] = "EDUCATION";
|
|
40
|
+
SiteType["MEDICAL"] = "MEDICAL";
|
|
41
|
+
SiteType["CULTURAL"] = "CULTURAL";
|
|
42
|
+
SiteType["RELIGIOUS"] = "RELIGIOUS";
|
|
43
|
+
SiteType["INDUSTRIAL"] = "INDUSTRIAL";
|
|
44
|
+
SiteType["TRANSPORT"] = "TRANSPORT"; // 교통시설
|
|
45
|
+
})(SiteType || (SiteType = {}));
|
|
46
|
+
export const SITE_TYPE_DISPLAY = {
|
|
47
|
+
[SiteType.APARTMENT_COMPLEX]: '공동주택',
|
|
48
|
+
[SiteType.DETACHED_HOUSE]: '단독주택',
|
|
49
|
+
[SiteType.NEIGHBORHOOD_FACILITY]: '근린생활시설',
|
|
50
|
+
[SiteType.OFFICE]: '업무시설',
|
|
51
|
+
[SiteType.COMMERCIAL]: '상업시설',
|
|
52
|
+
[SiteType.EDUCATION]: '교육·연구시설',
|
|
53
|
+
[SiteType.MEDICAL]: '의료시설',
|
|
54
|
+
[SiteType.CULTURAL]: '문화·집회시설',
|
|
55
|
+
[SiteType.RELIGIOUS]: '종교시설',
|
|
56
|
+
[SiteType.INDUSTRIAL]: '산업시설',
|
|
57
|
+
[SiteType.TRANSPORT]: '교통시설'
|
|
58
|
+
};
|
|
32
59
|
export var ProjectType;
|
|
33
60
|
(function (ProjectType) {
|
|
34
61
|
ProjectType["DSSP"] = "DSSP";
|
|
@@ -162,8 +189,16 @@ let ProjectListPage = class ProjectListPage extends ScopedElementsMixin(PageView
|
|
|
162
189
|
structuralSafetyRate
|
|
163
190
|
buildingComplex {
|
|
164
191
|
address
|
|
192
|
+
siteType
|
|
165
193
|
area
|
|
194
|
+
coverageRatio
|
|
195
|
+
floorAreaRatio
|
|
166
196
|
clientCompany
|
|
197
|
+
structureType
|
|
198
|
+
workerCount
|
|
199
|
+
designChangeCount
|
|
200
|
+
plannedProgress
|
|
201
|
+
actualProgress
|
|
167
202
|
}
|
|
168
203
|
}
|
|
169
204
|
total
|
|
@@ -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'\nimport './component/pagenation'\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 enum ProjectType {\n DSSP = 'DSSP',\n DCSP = 'DCSP',\n DKPI = 'DKPI'\n}\n\nexport interface Project {\n id?: string\n name: string\n documentNaming?: 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 robotCount?: number\n scheduleTable?: Attachment\n buildingComplex: BuildingComplex\n projectType?: ProjectType\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 virtualTourLink?: string\n buildings?: Building[]\n}\nexport interface Building {\n id?: string\n name: string | undefined\n floorCount: number | undefined\n hasBasement?: boolean\n basementFloorCount?: number\n drawing?: Attachment\n drawingUpload?: FileUpload\n buildingLevels?: BuildingLevel[]\n}\n\nexport interface BuildingLevel {\n id?: string\n floor?: number\n floorDisplayName?: string\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 etcDrawings?: Attachment[]\n etcDrawingsUpload?: 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 @state() private currentPage: number = 1\n\n private readonly pageLimit: number = 20\n\n get totalPages(): number {\n return Math.max(1, Math.ceil((this.projectCount || 0) / this.pageLimit))\n }\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 <pagenation-control\n .currentPage=${this.currentPage}\n .totalItems=${this.projectCount}\n .pageLimit=${this.pageLimit}\n @page-change=${(e: CustomEvent) => this._changePage(e.detail.page)}\n ></pagenation-control>\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!], $sortings: [Sorting!], $pagination: Pagination) {\n projects(filters: $filters, sortings: $sortings, pagination: $pagination) {\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 sortings: [{ name: 'createdAt', desc: true }],\n pagination: { page: this.currentPage, limit: this.pageLimit }\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 if (target.name === 'projectName') {\n this.currentPage = 1\n }\n }\n\n // 검색창에서 엔터입력시 검색\n private _onKeypress(event: KeyboardEvent) {\n if (event.code === 'Enter') {\n this.currentPage = 1\n this.getProjectList()\n }\n }\n\n private _changePage(page: number) {\n const nextPage = Math.min(Math.max(1, page), this.totalPages)\n if (nextPage !== this.currentPage) {\n this.currentPage = nextPage\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'\nimport './component/pagenation'\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}\nexport enum SiteType {\n APARTMENT_COMPLEX = 'APARTMENT_COMPLEX', // 공동주택,\n DETACHED_HOUSE = 'DETACHED_HOUSE', // 단독주택\n NEIGHBORHOOD_FACILITY = 'NEIGHBORHOOD_FACILITY', // 근린생활시설\n OFFICE = 'OFFICE', // 업무시설\n COMMERCIAL = 'COMMERCIAL', // 상업시설\n EDUCATION = 'EDUCATION', // 교육·연구시설\n MEDICAL = 'MEDICAL', // 의료시설\n CULTURAL = 'CULTURAL', // 문화·집회시설\n RELIGIOUS = 'RELIGIOUS', // 종교시설\n INDUSTRIAL = 'INDUSTRIAL', // 산업시설\n TRANSPORT = 'TRANSPORT' // 교통시설\n}\nexport const SITE_TYPE_DISPLAY = {\n [SiteType.APARTMENT_COMPLEX]: '공동주택',\n [SiteType.DETACHED_HOUSE]: '단독주택',\n [SiteType.NEIGHBORHOOD_FACILITY]: '근린생활시설',\n [SiteType.OFFICE]: '업무시설',\n [SiteType.COMMERCIAL]: '상업시설',\n [SiteType.EDUCATION]: '교육·연구시설',\n [SiteType.MEDICAL]: '의료시설',\n [SiteType.CULTURAL]: '문화·집회시설',\n [SiteType.RELIGIOUS]: '종교시설',\n [SiteType.INDUSTRIAL]: '산업시설',\n [SiteType.TRANSPORT]: '교통시설'\n}\n\nexport enum ProjectType {\n DSSP = 'DSSP',\n DCSP = 'DCSP',\n DKPI = 'DKPI'\n}\n\nexport interface Project {\n id?: string\n name: string\n documentNaming?: 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 robotCount?: number\n scheduleTable?: Attachment\n buildingComplex: BuildingComplex\n projectType?: ProjectType\n}\nexport interface BuildingComplex {\n id?: string\n address?: string\n siteType?: string\n latitude?: number\n longitude?: number\n area?: number\n coverageRatio?: number\n floorAreaRatio?: 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 structureType?: string\n workerCount?: number\n designChangeCount?: number\n plannedProgress?: number\n actualProgress?: 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 virtualTourLink?: string\n buildings?: Building[]\n}\nexport interface Building {\n id?: string\n name: string | undefined\n floorCount: number | undefined\n hasBasement?: boolean\n basementFloorCount?: number\n drawing?: Attachment\n drawingUpload?: FileUpload\n buildingLevels?: BuildingLevel[]\n}\n\nexport interface BuildingLevel {\n id?: string\n floor?: number\n floorDisplayName?: string\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 etcDrawings?: Attachment[]\n etcDrawingsUpload?: 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 @state() private currentPage: number = 1\n\n private readonly pageLimit: number = 20\n\n get totalPages(): number {\n return Math.max(1, Math.ceil((this.projectCount || 0) / this.pageLimit))\n }\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 <pagenation-control\n .currentPage=${this.currentPage}\n .totalItems=${this.projectCount}\n .pageLimit=${this.pageLimit}\n @page-change=${(e: CustomEvent) => this._changePage(e.detail.page)}\n ></pagenation-control>\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!], $sortings: [Sorting!], $pagination: Pagination) {\n projects(filters: $filters, sortings: $sortings, pagination: $pagination) {\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 siteType\n area\n coverageRatio\n floorAreaRatio\n clientCompany\n structureType\n workerCount\n designChangeCount\n plannedProgress\n actualProgress\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 sortings: [{ name: 'createdAt', desc: true }],\n pagination: { page: this.currentPage, limit: this.pageLimit }\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 if (target.name === 'projectName') {\n this.currentPage = 1\n }\n }\n\n // 검색창에서 엔터입력시 검색\n private _onKeypress(event: KeyboardEvent) {\n if (event.code === 'Enter') {\n this.currentPage = 1\n this.getProjectList()\n }\n }\n\n private _changePage(page: number) {\n const nextPage = Math.min(Math.max(1, page), this.totalPages)\n if (nextPage !== this.currentPage) {\n this.currentPage = nextPage\n this.getProjectList()\n }\n }\n}\n"]}
|