npm - @dssp/project - Versions diffs - 0.0.7 → 0.0.8 - Mend

@dssp/project 0.0.7 → 0.0.8

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 (17) hide show

package/dist-client/pages/project/project-schedule-list.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"project-schedule-list.js","sourceRoot":"","sources":["../../../client/pages/project/project-schedule-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 { Project } from './project-list'\n\n@customElement('project-schedule-list')\nexport class ProjectScheduleListPage 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\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-schedule/${project.id}`}>\n <img project-img src=${project.mainPhoto?.fullpath \|\| ''} />\n\n <span project-info>\n <div name>${project.name}</div>\n <div content>${project.buildingComplex.address}</div>\n <div content>면적: ${project.buildingComplex.area}㎡</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}>\n </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}>\n </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}>\n </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}>\n </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 pageInitialized(lifecycle: any) {\n this.getProjectList()\n }\n\n async pageUpdated(changes: any, lifecycle: any) {}\n\n async getProjectList() {\n const response = await client.query({\n query: gql`\n query Projects($projectName: String!) {\n projects(projectName: $projectName) {\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 projectName: this.projectName \|\| ''\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-schedule-list.js","sourceRoot":"","sources":["../../../client/pages/project/project-schedule-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 { Project } from './project-list'\n\n@customElement('project-schedule-list')\nexport class ProjectScheduleListPage 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-schedule/${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}㎡</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 pageInitialized(lifecycle: any) {\n this.getProjectList()\n }\n\n async pageUpdated(changes: any, lifecycle: any) {}\n\n async getProjectList() {\n const response = await client.query({\n query: gql`\n query Projects($projectName: String!) {\n projects(projectName: $projectName) {\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 projectName: this.projectName \|\| ''\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"]}

package/dist-client/pages/project/project-setting-list.js CHANGED Viewed

@@ -46,7 +46,7 @@ let ProjectSettingList = class ProjectSettingList extends ScopedElementsMixin(Pa
       <div body>
         ${(_a = this.projectList) === null || _a === void 0 ? void 0 : _a.map((project) => {
-            var _a;
+            var _a, _b;
             const filledText = html `<strong filled>등록완료</strong>`;
             const nonFilledText = html `<strong not-filled>미등록</strong>`;
             const projectFilledState = project.buildingComplex.address ? filledText : nonFilledText;
@@ -54,7 +54,11 @@ let ProjectSettingList = class ProjectSettingList extends ScopedElementsMixin(Pa
             const taskFilledState = false ? filledText : nonFilledText;
             return html `
             <div project-container>
-              <img project-img src=${((_a = project.mainPhoto) === null || _a === void 0 ? void 0 : _a.fullpath) || ''} />
+              <img
+                ?no-image=${!((_a = project.mainPhoto) === null || _a === void 0 ? void 0 : _a.fullpath)}
+                project-img
+                src=${((_b = project.mainPhoto) === null || _b === void 0 ? void 0 : _b.fullpath) || '/assets/images/no-image.png'}
+              />
               <span project-info>
                 <div name>${project.name}</div>
@@ -213,6 +217,10 @@ ProjectSettingList.styles = [
             aspect-ratio: 2;
             background-color: #cccccc80;
           }
+          img[project-img][no-image] {
+            object-fit: contain;
+            opacity: 0.5;
+          }
           span[project-info] {
             flex: 0.45;

package/dist-client/pages/project/project-setting-list.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"project-setting-list.js","sourceRoot":"","sources":["../../../client/pages/project/project-setting-list.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AACnC,OAAO,yCAAyC,CAAA;AAChD,OAAO,yCAAyC,CAAA;AAChD,OAAO,2CAA2C,CAAA;AAClD,OAAO,8CAA8C,CAAA;AAErD,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AACzC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AACxD,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAA;AAC9D,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AACzC,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAE3C,OAAO,GAAG,MAAM,aAAa,CAAA;AAC7B,OAAO,8BAA8B,CAAA;AAI9B,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,mBAAmB,CAAC,QAAQ,CAAC;IAA9D;;QA8JY,gBAAW,GAAW,EAAE,CAAA;QACxB,gBAAW,GAAc,EAAE,CAAA;QAC3B,iBAAY,GAAW,CAAC,CAAA;IA2H3C,CAAC;IAnIC,IAAI,OAAO;QACT,OAAO;YACL,KAAK,EAAE,IAAI;SACZ,CAAA;IACH,CAAC;IAMD,MAAM;;QACJ,OAAO,IAAI,CAAA;;;;;;;mBAOI,IAAI,CAAC,WAAW;mBAChB,IAAI,CAAC,cAAc;sBAChB,IAAI,CAAC,WAAW;;;;;oBAKlB,IAAI,CAAC,YAAY;iDACY,IAAI,CAAC,uBAAuB;;;;UAInE,MAAA,IAAI,CAAC,WAAW,0CAAE,GAAG,CAAC,CAAC,OAAgB,EAAE,EAAE;;YAC3C,MAAM,UAAU,GAAG,IAAI,CAAA,8BAA8B,CAAA;YACrD,MAAM,aAAa,GAAG,IAAI,CAAA,iCAAiC,CAAA;YAE3D,MAAM,kBAAkB,GAAG,OAAO,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,aAAa,CAAA;YACvF,MAAM,sBAAsB,GAAG,IAAI,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,aAAa,CAAA;YAChE,MAAM,eAAe,GAAG,KAAK,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,aAAa,CAAA;YAE1D,OAAO,IAAI,CAAA;;qCAEgB,CAAA,MAAA,OAAO,CAAC,SAAS,0CAAE,QAAQ,KAAI,EAAE;;;4BAG1C,OAAO,CAAC,IAAI;+BACT,OAAO,CAAC,eAAe,CAAC,OAAO;mCAC3B,OAAO,CAAC,eAAe,CAAC,IAAI;sCACzB,OAAO,CAAC,SAAS,IAAI,OAAO,CAAC,OAAO;4CAC9B,OAAO,CAAC,eAAe,CAAC,aAAa;;;;;qEAKZ,OAAO,CAAC,aAAa,IAAI,CAAC;0BACrE,OAAO,CAAC,aAAa,IAAI,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK;0BAC3C,OAAO,CAAC,aAAa,IAAI,CAAC;;;iCAGnB,kBAAkB;iCAClB,sBAAsB;6BAC1B,eAAe;;;6DAGiB,OAAO,CAAC,EAAE;sEACD,OAAO,CAAC,EAAE;sEACV,OAAO,CAAC,EAAE;;;;WAIrE,CAAA;QACH,CAAC,CAAC;;KAEL,CAAA;IACH,CAAC;IAED,KAAK,CAAC,eAAe,CAAC,SAAc;QAClC,IAAI,CAAC,cAAc,EAAE,CAAA;IACvB,CAAC;IAED,KAAK,CAAC,cAAc;;QAClB,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,KAAK,CAAC;YAClC,KAAK,EAAE,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;OAqBT;YACD,SAAS,EAAE;gBACT,WAAW,EAAE,IAAI,CAAC,WAAW,IAAI,EAAE;aACpC;SACF,CAAC,CAAA;QAEF,IAAI,CAAC,WAAW,GAAG,CAAA,MAAA,QAAQ,CAAC,IAAI,CAAC,QAAQ,0CAAE,KAAK,KAAI,EAAE,CAAA;QACtD,IAAI,CAAC,YAAY,GAAG,CAAA,MAAA,QAAQ,CAAC,IAAI,CAAC,QAAQ,0CAAE,KAAK,KAAI,CAAC,CAAA;IACxD,CAAC;IAEO,uBAAuB;QAC7B,SAAS,CAAC,IAAI,CAAA,oCAAoC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,0BAA0B,EAAE;YAC1G,QAAQ,EAAE,IAAI;YACd,IAAI,EAAE,OAAO;YACb,KAAK,EAAE,YAAY;SACpB,CAAC,CAAA;IACJ,CAAC;IAED,gCAAgC;IACxB,cAAc,CAAC,KAAiB;QACtC,MAAM,MAAM,GAAG,KAAK,CAAC,MAA0B,CAAA;QAC/C,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,MAAM,CAAC,KAAK,CAAA;IAClC,CAAC;IAED,iBAAiB;IACT,WAAW,CAAC,KAAoB;QACtC,IAAI,KAAK,CAAC,IAAI,KAAK,OAAO,EAAE;YAC1B,IAAI,CAAC,cAAc,EAAE,CAAA;SACtB;IACH,CAAC;;AAzRM,yBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAmJF;CACF,CAAA;AAQD;IAAC,KAAK,EAAE;;uDAAiC;AACzC;IAAC,KAAK,EAAE;;uDAAoC;AAC5C;IAAC,KAAK,EAAE;;wDAAiC;AAhK9B,kBAAkB;IAD9B,aAAa,CAAC,sBAAsB,CAAC;GACzB,kBAAkB,CA2R9B;SA3RY,kBAAkB","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@material/web/button/elevated-button.js'\nimport '@material/web/button/outlined-button.js'\nimport '@material/web/progress/linear-progress.js'\nimport '@material/web/textfield/filled-text-field.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 { openPopup } from '@operato/layout'\n\nimport gql from 'graphql-tag'\nimport './popup/popup-project-create'\nimport { Project } from './project-list'\n\n@customElement('project-setting-list')\nexport class ProjectSettingList 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-filled-text-field-container-color: 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-elevated-button-container-color: #24be7b;\n --md-elevated-button-label-text-color: #ffffff;\n --md-elevated-button-hover-label-text-color: #fff;\n --md-elevated-button-pressed-label-text-color: #fff;\n --md-elevated-button-focus-label-text-color: #fff;\n --md-elevated-button-icon-color: #fff;\n --md-elevated-button-hover-icon-color: #fff;\n --md-elevated-button-pressed-icon-color: #fff;\n --md-elevated-button-focus-icon-color: #fff;\n\n --md-elevated-button-container-shape: 7px;\n }\n }\n\n div[body] {\n div[project-container] {\n display: flex;\n flex-direction: row;\n min-height: 140px;\n margin: 17px 23px;\n background-color: #ffffff;\n border: 1px solid #cccccc80;\n border-radius: 5px;\n align-items: center;\n\n img[project-img] {\n width: 285px;\n aspect-ratio: 2;\n background-color: #cccccc80;\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 min-width: 350px;\n\n & > div {\n margin-bottom: 13px;\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-linear-progress-active-indicator-color: #0595e51a;\n --md-linear-progress-track-color: #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 div[filled] div {\n margin-right: 18px;\n display: inline-block;\n }\n\n strong[filled] {\n color: #1bb401;\n }\n strong[not-filled] {\n color: #ff4444;\n }\n\n md-outlined-button {\n min-height: 33px;\n padding: 0px 13px;\n margin-right: 2px;\n box-shadow: 1px 1px 1px #0000001a;\n --md-outlined-button-label-text-color: #586878;\n --md-outlined-button-label-text-weight: bold;\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 <md-elevated-button add-project @click=${this._openCreateProjectPopup}>+ 신규 프로젝트 추가</md-elevated-button>\n </div>\n\n <div body>\n ${this.projectList?.map((project: Project) => {\n const filledText = html`<strong filled>등록완료</strong>`\n const nonFilledText = html`<strong not-filled>미등록</strong>`\n\n const projectFilledState = project.buildingComplex.address ? filledText : nonFilledText\n const supervisoryFilledState = true ? filledText : nonFilledText\n const taskFilledState = false ? filledText : nonFilledText\n\n return html`\n <div project-container>\n <img project-img src=${project.mainPhoto?.fullpath \|\| ''} />\n\n <span project-info>\n <div name>${project.name}</div>\n <div content>${project.buildingComplex.address}</div>\n <div content>면적: ${project.buildingComplex.area}㎡</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>${project.totalProgress == 100 ? '완료' : '진행중'}</span>\n <span>${project.totalProgress \|\| 0}%</span>\n </div>\n <div filled>\n <div>프로젝트 정보 ${projectFilledState}</div>\n <div>시공감리 자료 ${supervisoryFilledState}</div>\n <div>공정표 ${taskFilledState}</div>\n </div>\n <div>\n <md-outlined-button href=\"project-update/${project.id}\">프로젝트 정보 수정</md-outlined-button>\n <md-outlined-button href=\"project-plan-management/${project.id}\">도면 관리</md-outlined-button>\n <md-outlined-button href=\"project-task-management/${project.id}\">공정표 관리</md-outlined-button>\n </div>\n </span>\n </div>\n `\n })}\n </div>\n `\n }\n\n async pageInitialized(lifecycle: any) {\n this.getProjectList()\n }\n\n async getProjectList() {\n const response = await client.query({\n query: gql`\n query Projects($projectName: String!) {\n projects(projectName: $projectName) {\n items {\n id\n name\n mainPhoto {\n fullpath\n }\n startDate\n endDate\n totalProgress\n buildingComplex {\n address\n area\n clientCompany\n }\n }\n total\n }\n }\n `,\n variables: {\n projectName: this.projectName \|\| ''\n }\n })\n\n this.projectList = response.data.projects?.items \|\| []\n this.projectCount = response.data.projects?.total \|\| 0\n }\n\n private _openCreateProjectPopup() {\n openPopup(html`<popup-project-create .refreshFn=${this.getProjectList.bind(this)}></popup-project-create>`, {\n backdrop: true,\n size: 'small',\n title: '신규 프로젝트 생성'\n })\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-setting-list.js","sourceRoot":"","sources":["../../../client/pages/project/project-setting-list.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@material/web/button/elevated-button.js'\nimport '@material/web/button/outlined-button.js'\nimport '@material/web/progress/linear-progress.js'\nimport '@material/web/textfield/filled-text-field.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 { openPopup } from '@operato/layout'\n\nimport gql from 'graphql-tag'\nimport './popup/popup-project-create'\nimport { Project } from './project-list'\n\n@customElement('project-setting-list')\nexport class ProjectSettingList 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-filled-text-field-container-color: 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-elevated-button-container-color: #24be7b;\n --md-elevated-button-label-text-color: #ffffff;\n --md-elevated-button-hover-label-text-color: #fff;\n --md-elevated-button-pressed-label-text-color: #fff;\n --md-elevated-button-focus-label-text-color: #fff;\n --md-elevated-button-icon-color: #fff;\n --md-elevated-button-hover-icon-color: #fff;\n --md-elevated-button-pressed-icon-color: #fff;\n --md-elevated-button-focus-icon-color: #fff;\n\n --md-elevated-button-container-shape: 7px;\n }\n }\n\n div[body] {\n div[project-container] {\n display: flex;\n flex-direction: row;\n min-height: 140px;\n margin: 17px 23px;\n background-color: #ffffff;\n border: 1px solid #cccccc80;\n border-radius: 5px;\n align-items: center;\n\n img[project-img] {\n width: 285px;\n aspect-ratio: 2;\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 min-width: 350px;\n\n & > div {\n margin-bottom: 13px;\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-linear-progress-active-indicator-color: #0595e51a;\n --md-linear-progress-track-color: #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 div[filled] div {\n margin-right: 18px;\n display: inline-block;\n }\n\n strong[filled] {\n color: #1bb401;\n }\n strong[not-filled] {\n color: #ff4444;\n }\n\n md-outlined-button {\n min-height: 33px;\n padding: 0px 13px;\n margin-right: 2px;\n box-shadow: 1px 1px 1px #0000001a;\n --md-outlined-button-label-text-color: #586878;\n --md-outlined-button-label-text-weight: bold;\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 <md-elevated-button add-project @click=${this._openCreateProjectPopup}>+ 신규 프로젝트 추가</md-elevated-button>\n </div>\n\n <div body>\n ${this.projectList?.map((project: Project) => {\n const filledText = html`<strong filled>등록완료</strong>`\n const nonFilledText = html`<strong not-filled>미등록</strong>`\n\n const projectFilledState = project.buildingComplex.address ? filledText : nonFilledText\n const supervisoryFilledState = true ? filledText : nonFilledText\n const taskFilledState = false ? filledText : nonFilledText\n\n return html`\n <div project-container>\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}㎡</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>${project.totalProgress == 100 ? '완료' : '진행중'}</span>\n <span>${project.totalProgress \|\| 0}%</span>\n </div>\n <div filled>\n <div>프로젝트 정보 ${projectFilledState}</div>\n <div>시공감리 자료 ${supervisoryFilledState}</div>\n <div>공정표 ${taskFilledState}</div>\n </div>\n <div>\n <md-outlined-button href=\"project-update/${project.id}\">프로젝트 정보 수정</md-outlined-button>\n <md-outlined-button href=\"project-plan-management/${project.id}\">도면 관리</md-outlined-button>\n <md-outlined-button href=\"project-task-management/${project.id}\">공정표 관리</md-outlined-button>\n </div>\n </span>\n </div>\n `\n })}\n </div>\n `\n }\n\n async pageInitialized(lifecycle: any) {\n this.getProjectList()\n }\n\n async getProjectList() {\n const response = await client.query({\n query: gql`\n query Projects($projectName: String!) {\n projects(projectName: $projectName) {\n items {\n id\n name\n mainPhoto {\n fullpath\n }\n startDate\n endDate\n totalProgress\n buildingComplex {\n address\n area\n clientCompany\n }\n }\n total\n }\n }\n `,\n variables: {\n projectName: this.projectName \|\| ''\n }\n })\n\n this.projectList = response.data.projects?.items \|\| []\n this.projectCount = response.data.projects?.total \|\| 0\n }\n\n private _openCreateProjectPopup() {\n openPopup(html`<popup-project-create .refreshFn=${this.getProjectList.bind(this)}></popup-project-create>`, {\n backdrop: true,\n size: 'small',\n title: '신규 프로젝트 생성'\n })\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"]}