@dssp/project 0.0.8 → 0.0.10

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

@@ -1 +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"]}
+{"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;;QAkKY,gBAAW,GAAW,EAAE,CAAA;QACxB,gBAAW,GAAc,EAAE,CAAA;QAC3B,iBAAY,GAAW,CAAC,CAAA;IAuI3C,CAAC;IA/IC,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;;;4BAGO,CAAC,CAAA,MAAA,OAAO,CAAC,SAAS,0CAAE,QAAQ,CAAA;;sBAElC,CAAA,MAAA,OAAO,CAAC,SAAS,0CAAE,QAAQ,KAAI,6BAA6B;;;;4BAItD,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,OAAO,EAAE,IAAI,CAAC,WAAW;oBACvB,CAAC,CAAC;wBACE;4BACE,IAAI,EAAE,MAAM;4BACZ,QAAQ,EAAE,QAAQ;4BAClB,KAAK,EAAE,IAAI,IAAI,CAAC,WAAW,GAAG;yBAC/B;qBACF;oBACH,CAAC,CAAC,EAAE;aACP;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;;AAzSM,yBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAuJF;CACF,CAAA;AAQD;IAAC,KAAK,EAAE;;uDAAiC;AACzC;IAAC,KAAK,EAAE;;uDAAoC;AAC5C;IAAC,KAAK,EAAE;;wDAAiC;AApK9B,kBAAkB;IAD9B,aAAa,CAAC,sBAAsB,CAAC;GACzB,kBAAkB,CA2S9B;SA3SY,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          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($filters: [Filter!]) {\n          projects(filters: $filters) {\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        filters: this.projectName\n          ? [\n              {\n                name: 'name',\n                operator: 'search',\n                value: `%${this.projectName}%`\n              }\n            ]\n          : []\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"]}

package/dist-client/pages/resource/construction-detail-type-popup.d.ts

@@ -0,0 +1,2 @@
+import '@material/web/icon/icon.js';
+import '@operato/data-grist/ox-grist.js';

package/dist-client/pages/resource/construction-detail-type-popup.js

@@ -0,0 +1,197 @@
+import { __decorate, __metadata, __rest } from "tslib";
+import '@material/web/icon/icon.js';
+import '@operato/data-grist/ox-grist.js';
+import gql from 'graphql-tag';
+import { css, html, LitElement } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import { DataGrist } from '@operato/data-grist/ox-grist.js';
+import { client } from '@operato/graphql';
+import { ButtonContainerStyles } from '@operato/styles';
+import { notify } from '@operato/layout';
+let ConstructionDetailTypePopup = class ConstructionDetailTypePopup extends LitElement {
+    render() {
+        return html `
+      <ox-grist .mode=${'GRID'} .config=${this.gristConfig} .fetchHandler=${this.fetchHandler.bind(this)}></ox-grist>
+      <div class="button-container">
+        <button danger @click=${this._deleteConstructionDetailType.bind(this)}><md-icon>delete</md-icon>삭제</button>
+        <button @click=${this._updateConstructionDetailType.bind(this)}><md-icon>save</md-icon>저장</button>
+      </div>
+    `;
+    }
+    async firstUpdated() {
+        this.gristConfig = {
+            columns: [
+                { type: 'gutter', gutterName: 'row-selector', multiple: true },
+                {
+                    type: 'gutter',
+                    gutterName: 'button',
+                    fixed: true,
+                    icon: 'add',
+                    handlers: {
+                        click: 'record-copy'
+                    }
+                },
+                { type: 'gutter', gutterName: 'sequence' },
+                {
+                    type: 'gutter',
+                    gutterName: 'button',
+                    icon: 'arrow_upward',
+                    handlers: {
+                        click: 'move-up'
+                    }
+                },
+                {
+                    type: 'gutter',
+                    gutterName: 'button',
+                    icon: 'arrow_downward',
+                    handlers: {
+                        click: 'move-down'
+                    }
+                },
+                {
+                    type: 'number',
+                    name: 'sequence',
+                    hidden: true
+                },
+                {
+                    type: 'string',
+                    name: 'id',
+                    hidden: true
+                },
+                {
+                    type: 'string',
+                    name: 'name',
+                    header: '세부 공종 이름',
+                    record: {
+                        editable: true
+                    },
+                    width: 200
+                }
+            ],
+            rows: {
+                selectable: {
+                    multiple: true
+                }
+            },
+            pagination: {
+                infinite: true
+            },
+            sorters: [{ name: 'sequence' }]
+        };
+    }
+    async fetchHandler({ page, limit, sorters = [] }) {
+        const response = await client.query({
+            query: gql `
+        query ($filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!]) {
+          constructionDetailTypes(filters: $filters, pagination: $pagination, sortings: $sortings) {
+            items {
+              id
+              sequence
+              name
+            }
+          }
+        }
+      `,
+            variables: {
+                filters: {
+                    name: 'constructionTypeId',
+                    value: this.constructionType.id,
+                    operator: 'eq'
+                },
+                sortings: [{ name: 'sequence' }]
+            }
+        });
+        return {
+            total: response.data.constructionDetailTypes.total || 0,
+            records: response.data.constructionDetailTypes.items || []
+        };
+    }
+    async _deleteConstructionDetailType() {
+        if (confirm('삭제하시겠습니까?')) {
+            const ids = this.grist.selected.map(record => record.id);
+            if (ids && ids.length > 0) {
+                const response = await client.mutate({
+                    mutation: gql `
+            mutation ($ids: [String!]!) {
+              deleteConstructionDetailTypes(ids: $ids)
+            }
+          `,
+                    variables: {
+                        ids
+                    }
+                });
+                if (!response.errors) {
+                    this.grist.fetch();
+                    notify({ message: '삭제되었습니다.' });
+                }
+            }
+        }
+    }
+    async _updateConstructionDetailType() {
+        let patches = this.grist.dirtyData.records;
+        if (patches) {
+            patches = patches.map(patch => {
+                const _a = patch.__origin__, _b = _a === void 0 ? {} : _a, { __typename } = _b, patchField = __rest(_b, ["__typename"]), { __dirtyfields__ } = patch;
+                for (let key in __dirtyfields__) {
+                    patchField[key] = __dirtyfields__[key].after;
+                }
+                return patchField;
+            });
+            const response = await client.mutate({
+                mutation: gql `
+          mutation UpdateMultipleConstructionDetailType($constructionTypeId: String!, $patches: [ConstructionDetailTypePatch!]!) {
+            updateMultipleConstructionDetailType(constructionTypeId: $constructionTypeId, patches: $patches) {
+              id
+            }
+          }
+        `,
+                variables: {
+                    constructionTypeId: this.constructionType.id,
+                    patches
+                }
+            });
+            if (!response.errors) {
+                this.grist.fetch();
+                notify({ message: '저장되었습니다.' });
+                this.requestRefresh();
+            }
+            else {
+                notify({ message: '저장에 실패하였습니다.', level: 'error' });
+            }
+        }
+    }
+    requestRefresh() {
+        this.dispatchEvent(new CustomEvent('requestRefresh'));
+    }
+};
+ConstructionDetailTypePopup.styles = [
+    ButtonContainerStyles,
+    css `
+      :host {
+        display: flex;
+        flex-direction: column;
+
+        background-color: var(--md-sys-color-surface);
+      }
+
+      ox-grist {
+        flex: 1;
+      }
+    `
+];
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", Object)
+], ConstructionDetailTypePopup.prototype, "constructionType", void 0);
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", Object)
+], ConstructionDetailTypePopup.prototype, "gristConfig", void 0);
+__decorate([
+    query('ox-grist'),
+    __metadata("design:type", DataGrist)
+], ConstructionDetailTypePopup.prototype, "grist", void 0);
+ConstructionDetailTypePopup = __decorate([
+    customElement('construction-detail-type-popup')
+], ConstructionDetailTypePopup);
+//# sourceMappingURL=construction-detail-type-popup.js.map

package/dist-client/pages/resource/construction-detail-type-popup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"construction-detail-type-popup.js","sourceRoot":"","sources":["../../../client/pages/resource/construction-detail-type-popup.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@operato/data-grist/ox-grist.js'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { DataGrist } from '@operato/data-grist/ox-grist.js'\nimport { client } from '@operato/graphql'\nimport { ButtonContainerStyles } from '@operato/styles'\nimport { FetchOption } from '@operato/data-grist'\nimport { notify } from '@operato/layout'\n\n@customElement('construction-detail-type-popup')\nclass ConstructionDetailTypePopup extends LitElement {\n  static styles = [\n    ButtonContainerStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n\n        background-color: var(--md-sys-color-surface);\n      }\n\n      ox-grist {\n        flex: 1;\n      }\n    `\n  ]\n\n  @property({ type: Object }) constructionType: any\n  @property({ type: Object }) gristConfig: any\n\n  @query('ox-grist') grist!: DataGrist\n\n  render() {\n    return html`\n      <ox-grist .mode=${'GRID'} .config=${this.gristConfig} .fetchHandler=${this.fetchHandler.bind(this)}></ox-grist>\n      <div class=\"button-container\">\n        <button danger @click=${this._deleteConstructionDetailType.bind(this)}><md-icon>delete</md-icon>삭제</button>\n        <button @click=${this._updateConstructionDetailType.bind(this)}><md-icon>save</md-icon>저장</button>\n      </div>\n    `\n  }\n\n  async firstUpdated() {\n    this.gristConfig = {\n      columns: [\n        { type: 'gutter', gutterName: 'row-selector', multiple: true },\n        {\n          type: 'gutter',\n          gutterName: 'button',\n          fixed: true,\n          icon: 'add',\n          handlers: {\n            click: 'record-copy'\n          }\n        },\n        { type: 'gutter', gutterName: 'sequence' },\n        {\n          type: 'gutter',\n          gutterName: 'button',\n          icon: 'arrow_upward',\n          handlers: {\n            click: 'move-up'\n          }\n        },\n        {\n          type: 'gutter',\n          gutterName: 'button',\n          icon: 'arrow_downward',\n          handlers: {\n            click: 'move-down'\n          }\n        },\n        {\n          type: 'number',\n          name: 'sequence',\n          hidden: true\n        },\n        {\n          type: 'string',\n          name: 'id',\n          hidden: true\n        },\n        {\n          type: 'string',\n          name: 'name',\n          header: '세부 공종 이름',\n          record: {\n            editable: true\n          },\n          width: 200\n        }\n      ],\n      rows: {\n        selectable: {\n          multiple: true\n        }\n      },\n      pagination: {\n        infinite: true\n      },\n      sorters: [{ name: 'sequence' }]\n    }\n  }\n\n  async fetchHandler({ page, limit, sorters = [] }: FetchOption) {\n    const response = await client.query({\n      query: gql`\n        query ($filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!]) {\n          constructionDetailTypes(filters: $filters, pagination: $pagination, sortings: $sortings) {\n            items {\n              id\n              sequence\n              name\n            }\n          }\n        }\n      `,\n      variables: {\n        filters: {\n          name: 'constructionTypeId',\n          value: this.constructionType.id,\n          operator: 'eq'\n        },\n        sortings: [{ name: 'sequence' }]\n      }\n    })\n\n    return {\n      total: response.data.constructionDetailTypes.total || 0,\n      records: response.data.constructionDetailTypes.items || []\n    }\n  }\n\n  private async _deleteConstructionDetailType() {\n    if (confirm('삭제하시겠습니까?')) {\n      const ids = this.grist.selected.map(record => record.id)\n      if (ids && ids.length > 0) {\n        const response = await client.mutate({\n          mutation: gql`\n            mutation ($ids: [String!]!) {\n              deleteConstructionDetailTypes(ids: $ids)\n            }\n          `,\n          variables: {\n            ids\n          }\n        })\n\n        if (!response.errors) {\n          this.grist.fetch()\n          notify({ message: '삭제되었습니다.' })\n        }\n      }\n    }\n  }\n\n  async _updateConstructionDetailType() {\n    let patches = this.grist.dirtyData.records\n    if (patches) {\n      patches = patches.map(patch => {\n        const { __origin__: { __typename, ...patchField } = {}, __dirtyfields__ } = patch\n\n        for (let key in __dirtyfields__) {\n          patchField[key] = __dirtyfields__[key].after\n        }\n\n        return patchField\n      })\n\n      const response = await client.mutate({\n        mutation: gql`\n          mutation UpdateMultipleConstructionDetailType($constructionTypeId: String!, $patches: [ConstructionDetailTypePatch!]!) {\n            updateMultipleConstructionDetailType(constructionTypeId: $constructionTypeId, patches: $patches) {\n              id\n            }\n          }\n        `,\n        variables: {\n          constructionTypeId: this.constructionType.id,\n          patches\n        }\n      })\n\n      if (!response.errors) {\n        this.grist.fetch()\n        notify({ message: '저장되었습니다.' })\n        this.requestRefresh()\n      } else {\n        notify({ message: '저장에 실패하였습니다.', level: 'error' })\n      }\n    }\n  }\n\n  requestRefresh() {\n    this.dispatchEvent(new CustomEvent('requestRefresh'))\n  }\n}\n"]}

package/dist-client/pages/resource/construction-type-management.d.ts

@@ -1,12 +1,24 @@
 import '@operato/data-grist';
 import '@operato/context/ox-context-page-toolbar.js';
 import { PageView } from '@operato/shell';
+import './construction-detail-type-popup';
 export declare class ConstructionTypeManagement extends PageView {
     static styles: import("lit").CSSResult[];
     gristConfig: any;
     private grist;
     get context(): {
         title: string;
+        actions: {
+            icon: string;
+            emphasis: {
+                raised: boolean;
+                outlined: boolean;
+                dense: boolean;
+                danger: boolean;
+            };
+            title: string;
+            action: () => Promise<void>;
+        }[];
     };
     render(): import("lit-html").TemplateResult<1>;
     pageInitialized(lifecycle: any): Promise<void>;

package/dist-client/pages/resource/construction-type-management.js

@@ -1,31 +1,28 @@
 import { __decorate, __metadata } from "tslib";
 import '@operato/data-grist';
 import '@operato/context/ox-context-page-toolbar.js';
-import { CommonGristStyles, ScrollbarStyles } from '@operato/styles';
+import { CommonGristStyles, CommonButtonStyles, ScrollbarStyles } from '@operato/styles';
 import { PageView } from '@operato/shell';
 import { css, html } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
 import { DataGrist } from '@operato/data-grist';
 import { client } from '@operato/graphql';
-import { notify } from '@operato/layout';
+import { notify, openPopup } from '@operato/layout';
 import gql from 'graphql-tag';
+import './construction-detail-type-popup';
 let ConstructionTypeManagement = class ConstructionTypeManagement extends PageView {
     get context() {
         return {
-            title: '공종 관리'
+            title: '공종 관리',
+            actions: [
+                Object.assign({ title: '저장', action: this._updateConstructionTypes.bind(this) }, CommonButtonStyles.save),
+                Object.assign({ title: '삭제', action: this._deleteConstructionTypes.bind(this) }, CommonButtonStyles.delete)
+            ]
         };
     }
     render() {
         return html `
       <ox-grist .mode=${'GRID'} .config=${this.gristConfig} .fetchHandler=${this.fetchHandler.bind(this)}> </ox-grist>
-      <div button-container>
-        <md-elevated-button @click=${this._updateConstructionTypes.bind(this)}>
-          <md-icon slot="icon">save</md-icon>저장</md-elevated-button
-        >
-        <md-elevated-button red @click=${this._deleteConstructionTypes.bind(this)}>
-          <md-icon slot="icon">delete</md-icon>삭제</md-elevated-button
-        >
-      </div>
     `;
     }
     async pageInitialized(lifecycle) {
@@ -33,6 +30,28 @@ let ConstructionTypeManagement = class ConstructionTypeManagement extends PageVi
             columns: [
                 { type: 'gutter', gutterName: 'sequence' },
                 { type: 'gutter', gutterName: 'row-selector', multiple: true },
+                {
+                    type: 'gutter',
+                    gutterName: 'button',
+                    fixed: true,
+                    icon: 'reorder',
+                    handlers: {
+                        click: (columns, data, column, record, rowIndex) => {
+                            if (!record.id)
+                                return;
+                            openPopup(html `
+                  <construction-detail-type-popup
+                    .constructionType=${record}
+                    @requestRefresh="${() => this.grist.fetch()}"
+                  ></construction-detail-type-popup>
+                `, {
+                                backdrop: true,
+                                size: 'large',
+                                title: '세부 공종'
+                            });
+                        }
+                    }
+                },
                 {
                     type: 'string',
                     name: 'name',
@@ -131,7 +150,6 @@ let ConstructionTypeManagement = class ConstructionTypeManagement extends PageVi
     }
     async _deleteConstructionTypes() {
         if (confirm('삭제하시겠습니까?')) {
-            const a = this.grist;
             const ids = this.grist.selected.map(record => record.id);
             if (ids && ids.length > 0) {
                 const response = await client.mutate({
@@ -165,32 +183,6 @@ ConstructionTypeManagement.styles = [
         --grid-record-emphasized-background-color: red;
         --grid-record-emphasized-color: yellow;
       }
-
-      md-elevated-button {
-        margin: 0px 3px;
-
-        --md-elevated-button-container-height: 35px;
-        --md-elevated-button-label-text-size: 16px;
-        --md-elevated-button-container-color: #0595e5;
-
-        --md-elevated-button-label-text-color: #fff;
-        --md-elevated-button-hover-label-text-color: #fff;
-        --md-elevated-button-pressed-label-text-color: #fff;
-        --md-elevated-button-focus-label-text-color: #fff;
-        --md-elevated-button-icon-color: #fff;
-        --md-elevated-button-hover-icon-color: #fff;
-        --md-elevated-button-pressed-icon-color: #fff;
-        --md-elevated-button-focus-icon-color: #fff;
-
-        &[red] {
-          --md-elevated-button-container-color: #e15757;
-        }
-      }
-
-      div[button-container] {
-        padding: 0 5px 10px 0;
-        text-align: right;
-      }
     `
 ];
 __decorate([

package/dist-client/pages/resource/construction-type-management.js.map

@@ -1 +1 @@
-{"version":3,"file":"construction-type-management.js","sourceRoot":"","sources":["../../../client/pages/resource/construction-type-management.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/data-grist'\nimport '@operato/context/ox-context-page-toolbar.js'\n\nimport { CommonGristStyles, ScrollbarStyles } from '@operato/styles'\nimport { PageView } from '@operato/shell'\nimport { css, html } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport { DataGrist } from '@operato/data-grist'\nimport { client } from '@operato/graphql'\nimport { notify } from '@operato/layout'\nimport gql from 'graphql-tag'\n\n@customElement('construction-type-management')\nexport class ConstructionTypeManagement extends PageView {\n  static styles = [\n    ScrollbarStyles,\n    CommonGristStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n\n        width: 100%;\n\n        --grid-record-emphasized-background-color: red;\n        --grid-record-emphasized-color: yellow;\n      }\n\n      md-elevated-button {\n        margin: 0px 3px;\n\n        --md-elevated-button-container-height: 35px;\n        --md-elevated-button-label-text-size: 16px;\n        --md-elevated-button-container-color: #0595e5;\n\n        --md-elevated-button-label-text-color: #fff;\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        &[red] {\n          --md-elevated-button-container-color: #e15757;\n        }\n      }\n\n      div[button-container] {\n        padding: 0 5px 10px 0;\n        text-align: right;\n      }\n    `\n  ]\n\n  @property({ type: Object }) gristConfig: any\n  @query('ox-grist') private grist!: DataGrist\n\n  get context() {\n    return {\n      title: '공종 관리'\n    }\n  }\n\n  render() {\n    return html`\n      <ox-grist .mode=${'GRID'} .config=${this.gristConfig} .fetchHandler=${this.fetchHandler.bind(this)}> </ox-grist>\n      <div button-container>\n        <md-elevated-button @click=${this._updateConstructionTypes.bind(this)}>\n          <md-icon slot=\"icon\">save</md-icon>저장</md-elevated-button\n        >\n        <md-elevated-button red @click=${this._deleteConstructionTypes.bind(this)}>\n          <md-icon slot=\"icon\">delete</md-icon>삭제</md-elevated-button\n        >\n      </div>\n    `\n  }\n\n  async pageInitialized(lifecycle: any) {\n    this.gristConfig = {\n      columns: [\n        { type: 'gutter', gutterName: 'sequence' },\n        { type: 'gutter', gutterName: 'row-selector', multiple: true },\n        {\n          type: 'string',\n          name: 'name',\n          header: '이름',\n          record: {\n            editable: true\n          },\n          width: 150\n        },\n        {\n          type: 'string',\n          name: 'description',\n          header: '설명',\n          record: {\n            editable: true\n          },\n          width: 200\n        },\n        {\n          type: 'datetime',\n          name: 'createdAt',\n          header: '생성 시간',\n          width: 200\n        },\n        {\n          type: 'datetime',\n          name: 'updatedAt',\n          header: '수정 시간',\n          width: 200\n        }\n      ],\n      rows: {\n        selectable: {\n          multiple: true\n        }\n      },\n      pagination: { infinite: true }\n    }\n  }\n\n  async fetchHandler() {\n    const response = await client.query({\n      query: gql`\n        query ConstructionTypes {\n          constructionTypes {\n            items {\n              id\n              name\n              description\n              createdAt\n              updatedAt\n            }\n            total\n          }\n        }\n      `\n    })\n\n    if (response.errors) return {}\n\n    return {\n      total: response.data.constructionTypes.total || 0,\n      records: response.data.constructionTypes.items || []\n    }\n  }\n\n  async _updateConstructionTypes() {\n    let patches = this.grist.dirtyRecords\n    if (patches && patches.length) {\n      patches = patches.map(patch => {\n        let patchField: any = patch.id ? { id: patch.id } : {}\n        const dirtyFields = patch.__dirtyfields__\n        for (let key in dirtyFields) {\n          patchField[key] = dirtyFields[key].after\n        }\n        patchField.cuFlag = patch.__dirty__\n\n        return patchField\n      })\n\n      const response = await client.mutate({\n        mutation: gql`\n          mutation UpdateMultipleConstructionType($patches: [ConstructionTypePatch!]!) {\n            updateMultipleConstructionType(patches: $patches) {\n              id\n            }\n          }\n        `,\n        variables: {\n          patches\n        }\n      })\n\n      if (!response.errors) {\n        this.grist.fetch()\n        notify({ message: '저장되었습니다.' })\n      } else {\n        notify({ message: '저장에 실패하였습니다.', level: 'error' })\n      }\n    }\n  }\n\n  async _deleteConstructionTypes() {\n    if (confirm('삭제하시겠습니까?')) {\n      const a = this.grist\n\n      const ids = this.grist.selected.map(record => record.id)\n      if (ids && ids.length > 0) {\n        const response = await client.mutate({\n          mutation: gql`\n            mutation DeleteConstructionTypes($ids: [String!]!) {\n              deleteConstructionTypes(ids: $ids)\n            }\n          `,\n          variables: {\n            ids\n          }\n        })\n\n        if (!response.errors) {\n          this.grist.fetch()\n          notify({ message: '삭제되었습니다.' })\n        }\n      }\n    }\n  }\n}\n"]}
+{"version":3,"file":"construction-type-management.js","sourceRoot":"","sources":["../../../client/pages/resource/construction-type-management.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/data-grist'\nimport '@operato/context/ox-context-page-toolbar.js'\n\nimport { CommonGristStyles, CommonButtonStyles, ScrollbarStyles } from '@operato/styles'\nimport { PageView } from '@operato/shell'\nimport { css, html } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport { DataGrist } from '@operato/data-grist'\nimport { client } from '@operato/graphql'\nimport { notify, openPopup } from '@operato/layout'\nimport gql from 'graphql-tag'\nimport './construction-detail-type-popup'\n\n@customElement('construction-type-management')\nexport class ConstructionTypeManagement extends PageView {\n  static styles = [\n    ScrollbarStyles,\n    CommonGristStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n\n        width: 100%;\n\n        --grid-record-emphasized-background-color: red;\n        --grid-record-emphasized-color: yellow;\n      }\n    `\n  ]\n\n  @property({ type: Object }) gristConfig: any\n  @query('ox-grist') private grist!: DataGrist\n\n  get context() {\n    return {\n      title: '공종 관리',\n      actions: [\n        {\n          title: '저장',\n          action: this._updateConstructionTypes.bind(this),\n          ...CommonButtonStyles.save\n        },\n        {\n          title: '삭제',\n          action: this._deleteConstructionTypes.bind(this),\n          ...CommonButtonStyles.delete\n        }\n      ]\n    }\n  }\n\n  render() {\n    return html`\n      <ox-grist .mode=${'GRID'} .config=${this.gristConfig} .fetchHandler=${this.fetchHandler.bind(this)}> </ox-grist>\n    `\n  }\n\n  async pageInitialized(lifecycle: any) {\n    this.gristConfig = {\n      columns: [\n        { type: 'gutter', gutterName: 'sequence' },\n        { type: 'gutter', gutterName: 'row-selector', multiple: true },\n        {\n          type: 'gutter',\n          gutterName: 'button',\n          fixed: true,\n          icon: 'reorder',\n          handlers: {\n            click: (columns, data, column, record, rowIndex) => {\n              if (!record.id) return\n              openPopup(\n                html`\n                  <construction-detail-type-popup\n                    .constructionType=${record}\n                    @requestRefresh=\"${() => this.grist.fetch()}\"\n                  ></construction-detail-type-popup>\n                `,\n                {\n                  backdrop: true,\n                  size: 'large',\n                  title: '세부 공종'\n                }\n              )\n            }\n          }\n        },\n        {\n          type: 'string',\n          name: 'name',\n          header: '이름',\n          record: {\n            editable: true\n          },\n          width: 150\n        },\n        {\n          type: 'string',\n          name: 'description',\n          header: '설명',\n          record: {\n            editable: true\n          },\n          width: 200\n        },\n        {\n          type: 'datetime',\n          name: 'createdAt',\n          header: '생성 시간',\n          width: 200\n        },\n        {\n          type: 'datetime',\n          name: 'updatedAt',\n          header: '수정 시간',\n          width: 200\n        }\n      ],\n      rows: {\n        selectable: {\n          multiple: true\n        }\n      },\n      pagination: { infinite: true }\n    }\n  }\n\n  async fetchHandler() {\n    const response = await client.query({\n      query: gql`\n        query ConstructionTypes {\n          constructionTypes {\n            items {\n              id\n              name\n              description\n              createdAt\n              updatedAt\n            }\n            total\n          }\n        }\n      `\n    })\n\n    if (response.errors) return {}\n\n    return {\n      total: response.data.constructionTypes.total || 0,\n      records: response.data.constructionTypes.items || []\n    }\n  }\n\n  async _updateConstructionTypes() {\n    let patches = this.grist.dirtyRecords\n    if (patches && patches.length) {\n      patches = patches.map(patch => {\n        let patchField: any = patch.id ? { id: patch.id } : {}\n        const dirtyFields = patch.__dirtyfields__\n        for (let key in dirtyFields) {\n          patchField[key] = dirtyFields[key].after\n        }\n        patchField.cuFlag = patch.__dirty__\n\n        return patchField\n      })\n\n      const response = await client.mutate({\n        mutation: gql`\n          mutation UpdateMultipleConstructionType($patches: [ConstructionTypePatch!]!) {\n            updateMultipleConstructionType(patches: $patches) {\n              id\n            }\n          }\n        `,\n        variables: {\n          patches\n        }\n      })\n\n      if (!response.errors) {\n        this.grist.fetch()\n        notify({ message: '저장되었습니다.' })\n      } else {\n        notify({ message: '저장에 실패하였습니다.', level: 'error' })\n      }\n    }\n  }\n\n  async _deleteConstructionTypes() {\n    if (confirm('삭제하시겠습니까?')) {\n      const ids = this.grist.selected.map(record => record.id)\n      if (ids && ids.length > 0) {\n        const response = await client.mutate({\n          mutation: gql`\n            mutation DeleteConstructionTypes($ids: [String!]!) {\n              deleteConstructionTypes(ids: $ids)\n            }\n          `,\n          variables: {\n            ids\n          }\n        })\n\n        if (!response.errors) {\n          this.grist.fetch()\n          notify({ message: '삭제되었습니다.' })\n        }\n      }\n    }\n  }\n}\n"]}

package/dist-client/pages/resource/inspection-drawing-type-management.d.ts

@@ -0,0 +1,34 @@
+import '@operato/data-grist';
+import '@operato/context/ox-context-page-toolbar.js';
+import { PageView } from '@operato/shell';
+import './inspection-part-popup';
+export declare class InspectionDrawingTypeManagement extends PageView {
+    static styles: import("lit").CSSResult[];
+    gristConfig: any;
+    private grist;
+    get context(): {
+        title: string;
+        actions: {
+            icon: string;
+            emphasis: {
+                raised: boolean;
+                outlined: boolean;
+                dense: boolean;
+                danger: boolean;
+            };
+            title: string;
+            action: () => Promise<void>;
+        }[];
+    };
+    render(): import("lit-html").TemplateResult<1>;
+    pageInitialized(lifecycle: any): Promise<void>;
+    fetchHandler(): Promise<{
+        total?: undefined;
+        records?: undefined;
+    } | {
+        total: any;
+        records: any;
+    }>;
+    _updateInspectionDrawingTypes(): Promise<void>;
+    _deleteInspectionDrawingTypes(): Promise<void>;
+}