@dssp/project 0.0.24 → 0.0.26

package/client/pages/lib/select2-component.ts

@@ -0,0 +1,159 @@
+import { LitElement, html, css } from 'lit'
+import { customElement, property, state } from 'lit/decorators.js'
+
+@customElement('select2-component')
+export class Select2Component extends LitElement {
+  static styles = css`
+    div[select-container] {
+      position: relative;
+      width: 300px;
+      border: 1px solid #000;
+    }
+
+    div[dropdown] {
+      border: 1px solid #ccc;
+      padding: 5px;
+      cursor: pointer;
+    }
+
+    div[options] {
+      position: absolute;
+      width: 100%;
+      border: 1px solid #ccc;
+      background-color: white;
+      max-height: 150px;
+      overflow-y: auto;
+      display: block;
+      z-index: 1;
+    }
+
+    div[option] {
+      padding: 10px;
+      cursor: pointer;
+    }
+
+    div[option]:hover {
+      background-color: #f0f0f0;
+    }
+
+    div[option][selected] {
+      background-color: #d3f9d8;
+    }
+
+    div[selected-tags] {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 5px;
+      margin-top: 10px;
+    }
+
+    div[tag] {
+      background-color: #007bff;
+      color: white;
+      padding: 5px 10px;
+      border-radius: 20px;
+      display: inline-flex;
+      align-items: center;
+      cursor: pointer;
+    }
+
+    span[tag-close] {
+      margin-left: 8px;
+    }
+  `
+
+  @property({ type: String }) placeholder: string = ''
+  @property({ type: Array }) options: Array<{ name: string; value: string }> = []
+  @property({ type: Array }) selectedValues: string[] = []
+
+  @state() showOptions: boolean = false
+
+  get selectedItems() {
+    return this.selectedValues.map(id => this.options.find(option => option.value === id)).filter(Boolean)
+  }
+
+  connectedCallback() {
+    super.connectedCallback()
+    document.addEventListener('click', this._handleOutsideClick)
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback()
+    document.removeEventListener('click', this._handleOutsideClick)
+  }
+
+  private _handleOutsideClick = (event: MouseEvent) => {
+    const path = event.composedPath()
+    if (!path.includes(this)) {
+      this.showOptions = false
+    }
+  }
+
+  private _toggleOptions() {
+    this.showOptions = !this.showOptions
+  }
+
+  private _handleSelect(optionValue: string) {
+    if (this.selectedValues.includes(optionValue)) {
+      // 이미 선택된 옵션을 선택한 경우 해제
+      this.selectedValues = this.selectedValues.filter(value => value !== optionValue)
+    } else {
+      // 선택되지 않은 옵션 추가
+      this.selectedValues = [...this.selectedValues, optionValue]
+    }
+
+    this.showOptions = false
+    this._dispatchEvent(this.selectedValues)
+  }
+
+  private _handleRemove(tagValue: string) {
+    this.selectedValues = this.selectedValues.filter(value => value !== tagValue)
+    this._dispatchEvent(this.selectedValues)
+  }
+
+  private _dispatchEvent(selectedValues: string[]) {
+    this.dispatchEvent(
+      new CustomEvent('selection-changed', {
+        detail: { selectedValues }, // ID 배열을 부모로 전달
+        bubbles: true,
+        composed: true
+      })
+    )
+  }
+
+  render() {
+    return html`
+      <div select-container>
+        <div tags @click="${this._toggleOptions}">${this.placeholder}</div>
+        ${this.showOptions
+          ? html`
+              <div options>
+                ${this.options.map(
+                  option => html`
+                    <div
+                      option
+                      ?selected=${this.selectedValues.includes(option.value)}
+                      @click=${() => this._handleSelect(option.value)}
+                    >
+                      ${option.name}
+                    </div>
+                  `
+                )}
+              </div>
+            `
+          : ''}
+      </div>
+
+      <div selected-tags>
+        ${this.selectedItems.map(
+          (tag: any) => html`
+            <div tag @click=${() => this._handleRemove(tag.value)}>
+              ${tag!.name}
+              <span tag-close>&times;</span>
+            </div>
+          `
+        )}
+      </div>
+    `
+  }
+}

package/client/pages/project/project-list.ts

@@ -15,13 +15,17 @@ export enum ProjectState {
 }
 export enum BuildingInspectionStatus {
   WAIT = 'WAIT',
+  OVERALL_WAIT = 'OVERALL_WAIT',
   REQUEST = 'REQUEST',
+  OVERALL_REQUEST = 'OVERALL_REQUEST',
   PASS = 'PASS',
   FAIL = 'FAIL'
 }
 export const BUILDING_INSPECTION_STATUS = {
   [BuildingInspectionStatus.WAIT]: '검측 대기',
+  [BuildingInspectionStatus.OVERALL_WAIT]: '검측 대기',
   [BuildingInspectionStatus.REQUEST]: '검측 요청',
+  [BuildingInspectionStatus.OVERALL_REQUEST]: '검측 요청',
   [BuildingInspectionStatus.PASS]: '합격',
   [BuildingInspectionStatus.FAIL]: '불합격'
 }
@@ -61,6 +65,10 @@ export interface BuildingComplex {
   notice?: string
   planXScale?: number
   planYScale?: number
+  overallConstructorEmails?: string[]
+  taskConstructorEmails?: string[]
+  overallSupervisoryEmails?: string[]
+  taskSupervisoryEmails?: string[]
   buildings?: Building[]
 }
 export interface Building {

package/client/pages/project/project-update.ts

@@ -9,9 +9,9 @@ import { customElement, state } from 'lit/decorators.js'
 import { ScopedElementsMixin } from '@open-wc/scoped-elements'
 import { client } from '@operato/graphql'
 import { notify } from '@operato/layout'
-
 import gql from 'graphql-tag'
 import { Project } from './project-list'
+import '../lib/select2-component'
 
 @customElement('project-update')
 export class ProjectUpdate extends ScopedElementsMixin(PageView) {
@@ -258,6 +258,11 @@ export class ProjectUpdate extends ScopedElementsMixin(PageView) {
   }
   @state() projectId: string = ''
   @state() project: Project = { ...this.defaultProject }
+  @state() selectedValues: string[] = []
+  @state() overallConstructorList: Array<{ name: string; value: string }> = []
+  @state() taskConstructorList: Array<{ name: string; value: string }> = []
+  @state() taskSupervisoryList: Array<{ name: string; value: string }> = []
+  @state() overallSupervisoryList: Array<{ name: string; value: string }> = []
 
   render() {
     return html`
@@ -471,7 +476,56 @@ export class ProjectUpdate extends ScopedElementsMixin(PageView) {
               ></md-outlined-text-field>
             </span>
           </div>
+          <div row>
+            <span>총괄 시공 관리자 리스트</span>
+            <span>
+              <select2-component
+                placeholder="총괄 시공 관리자 리스트"
+                name="overallConstructorEmails"
+                .options=${this.overallConstructorList}
+                .selectedValues=${this.project?.buildingComplex?.overallConstructorEmails || []}
+                @selection-changed=${this._handleSelectionChange}
+              ></select2-component>
+            </span>
+          </div>
+          <div row>
+            <span>공종별 시공 관리자 리스트</span>
+            <span>
+              <select2-component
+                placeholder="공종별 시공 관리자 리스트"
+                name="taskConstructorEmails"
+                .options=${this.taskConstructorList}
+                .selectedValues=${this.project?.buildingComplex?.taskConstructorEmails || []}
+                @selection-changed=${this._handleSelectionChange}
+              ></select2-component>
+            </span>
+          </div>
+          <div row>
+            <span>총괄 감리 책임자 리스트</span>
+            <span>
+              <select2-component
+                placeholder="총괄 감리 책임자 리스트"
+                name="overallSupervisoryEmails"
+                .options=${this.overallSupervisoryList}
+                .selectedValues=${this.project?.buildingComplex?.overallSupervisoryEmails || []}
+                @selection-changed=${this._handleSelectionChange}
+              ></select2-component>
+            </span>
+          </div>
+          <div row>
+            <span>공종별 감리 책임자 리스트</span>
+            <span>
+              <select2-component
+                placeholder="공종별 감리 책임자 리스트"
+                name="taskSupervisoryEmails"
+                .options=${this.taskSupervisoryList}
+                .selectedValues=${this.project?.buildingComplex?.taskSupervisoryEmails || []}
+                @selection-changed=${this._handleSelectionChange}
+              ></select2-component
+            ></span>
+          </div>
         </div>
+
         <div detail-info>
           <div>
             <h3>건설구분 상세 정보</h3>
@@ -541,8 +595,8 @@ export class ProjectUpdate extends ScopedElementsMixin(PageView) {
             <div row separate-container>
               <div>
                 <span>전체 진행현황</span>
-                <span
-                  ><md-outlined-text-field
+                <span>
+                  <md-outlined-text-field
                     type="text"
                     numeric
                     project
@@ -555,8 +609,8 @@ export class ProjectUpdate extends ScopedElementsMixin(PageView) {
               </div>
               <div>
                 <span>검측/통과비율</span>
-                <span
-                  ><md-outlined-text-field
+                <span>
+                  <md-outlined-text-field
                     type="text"
                     numeric
                     project
@@ -571,8 +625,8 @@ export class ProjectUpdate extends ScopedElementsMixin(PageView) {
             <div row separate-container>
               <div>
                 <span>주간 진행현황</span>
-                <span
-                  ><md-outlined-text-field
+                <span>
+                  <md-outlined-text-field
                     type="text"
                     numeric
                     project
@@ -585,8 +639,8 @@ export class ProjectUpdate extends ScopedElementsMixin(PageView) {
               </div>
               <div>
                 <span>로봇작업진행율</span>
-                <span
-                  ><md-outlined-text-field
+                <span>
+                  <md-outlined-text-field
                     type="text"
                     numeric
                     project
@@ -662,7 +716,7 @@ export class ProjectUpdate extends ScopedElementsMixin(PageView) {
   async initProject(projectId: string = '') {
     const response = await client.query({
       query: gql`
-        query Project($id: String!) {
+        query Project($id: String!, $filters: [Filter!]) {
           project(id: $id) {
             id
             name
@@ -697,6 +751,10 @@ export class ProjectUpdate extends ScopedElementsMixin(PageView) {
               notice
               householdCount
               buildingCount
+              overallConstructorEmails
+              taskConstructorEmails
+              overallSupervisoryEmails
+              taskSupervisoryEmails
               buildings {
                 id
                 name
@@ -704,15 +762,52 @@ export class ProjectUpdate extends ScopedElementsMixin(PageView) {
               }
             }
           }
+
+          employees(filters: $filters) {
+            items {
+              id
+              name
+              jobResponsibility
+              active
+              user {
+                id
+                name
+                email
+              }
+            }
+          }
         }
       `,
       variables: {
-        id: projectId
+        id: projectId,
+        filters: [
+          {
+            name: 'active',
+            operator: 'eq',
+            value: true
+          },
+          {
+            name: 'userId',
+            operator: 'is_not_null',
+            value: ''
+          }
+        ]
       }
     })
 
     this.project = response.data?.project
-    console.log('init project : ', this.project)
+
+    const items = response.data?.employees?.items || []
+    this.overallConstructorList = this._filterUserByPermission(items, 'OVERALL_CONSTRUCTOR')
+    this.taskConstructorList = this._filterUserByPermission(items, 'TASK_CONSTRUCTOR')
+    this.overallSupervisoryList = this._filterUserByPermission(items, 'OVERALL_SUPERVISORY')
+    this.taskSupervisoryList = this._filterUserByPermission(items, 'TASK_SUPERVISORY')
+  }
+
+  private _filterUserByPermission(userList, permission: string) {
+    return userList
+      .filter(v => v.jobResponsibility == permission || v.jobResponsibility == 'ADMIN')
+      .map(v => ({ name: v.name, value: v.user.email }))
   }
 
   private async _saveProject() {
@@ -720,8 +815,6 @@ export class ProjectUpdate extends ScopedElementsMixin(PageView) {
     delete this.project.mainPhoto
     delete this.project.buildingComplex.drawing
 
-    console.log('this.project :', this.project)
-
     const response = await client.mutate({
       mutation: gql`
         mutation UpdateProject($project: ProjectPatch!) {
@@ -797,4 +890,11 @@ export class ProjectUpdate extends ScopedElementsMixin(PageView) {
       this.project.buildingComplex.drawingUpload = file
     }
   }
+
+  private _handleSelectionChange(e) {
+    const name = e.target.getAttribute('name')
+    const selectedValues = e.detail.selectedValues
+
+    this.project.buildingComplex[name] = selectedValues
+  }
 }

package/dist-client/pages/lib/select2-component.d.ts

@@ -0,0 +1,23 @@
+import { LitElement } from 'lit';
+export declare class Select2Component extends LitElement {
+    static styles: import("lit").CSSResult;
+    placeholder: string;
+    options: Array<{
+        name: string;
+        value: string;
+    }>;
+    selectedValues: string[];
+    showOptions: boolean;
+    get selectedItems(): ({
+        name: string;
+        value: string;
+    } | undefined)[];
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _handleOutsideClick;
+    private _toggleOptions;
+    private _handleSelect;
+    private _handleRemove;
+    private _dispatchEvent;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist-client/pages/lib/select2-component.js

@@ -0,0 +1,165 @@
+import { __decorate, __metadata } from "tslib";
+import { LitElement, html, css } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+let Select2Component = class Select2Component extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.placeholder = '';
+        this.options = [];
+        this.selectedValues = [];
+        this.showOptions = false;
+        this._handleOutsideClick = (event) => {
+            const path = event.composedPath();
+            if (!path.includes(this)) {
+                this.showOptions = false;
+            }
+        };
+    }
+    get selectedItems() {
+        return this.selectedValues.map(id => this.options.find(option => option.value === id)).filter(Boolean);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        document.addEventListener('click', this._handleOutsideClick);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        document.removeEventListener('click', this._handleOutsideClick);
+    }
+    _toggleOptions() {
+        this.showOptions = !this.showOptions;
+    }
+    _handleSelect(optionValue) {
+        if (this.selectedValues.includes(optionValue)) {
+            // 이미 선택된 옵션을 선택한 경우 해제
+            this.selectedValues = this.selectedValues.filter(value => value !== optionValue);
+        }
+        else {
+            // 선택되지 않은 옵션 추가
+            this.selectedValues = [...this.selectedValues, optionValue];
+        }
+        this.showOptions = false;
+        this._dispatchEvent(this.selectedValues);
+    }
+    _handleRemove(tagValue) {
+        this.selectedValues = this.selectedValues.filter(value => value !== tagValue);
+        this._dispatchEvent(this.selectedValues);
+    }
+    _dispatchEvent(selectedValues) {
+        this.dispatchEvent(new CustomEvent('selection-changed', {
+            detail: { selectedValues },
+            bubbles: true,
+            composed: true
+        }));
+    }
+    render() {
+        return html `
+      <div select-container>
+        <div tags @click="${this._toggleOptions}">${this.placeholder}</div>
+        ${this.showOptions
+            ? html `
+              <div options>
+                ${this.options.map(option => html `
+                    <div
+                      option
+                      ?selected=${this.selectedValues.includes(option.value)}
+                      @click=${() => this._handleSelect(option.value)}
+                    >
+                      ${option.name}
+                    </div>
+                  `)}
+              </div>
+            `
+            : ''}
+      </div>
+
+      <div selected-tags>
+        ${this.selectedItems.map((tag) => html `
+            <div tag @click=${() => this._handleRemove(tag.value)}>
+              ${tag.name}
+              <span tag-close>&times;</span>
+            </div>
+          `)}
+      </div>
+    `;
+    }
+};
+Select2Component.styles = css `
+    div[select-container] {
+      position: relative;
+      width: 300px;
+      border: 1px solid #000;
+    }
+
+    div[dropdown] {
+      border: 1px solid #ccc;
+      padding: 5px;
+      cursor: pointer;
+    }
+
+    div[options] {
+      position: absolute;
+      width: 100%;
+      border: 1px solid #ccc;
+      background-color: white;
+      max-height: 150px;
+      overflow-y: auto;
+      display: block;
+      z-index: 1;
+    }
+
+    div[option] {
+      padding: 10px;
+      cursor: pointer;
+    }
+
+    div[option]:hover {
+      background-color: #f0f0f0;
+    }
+
+    div[option][selected] {
+      background-color: #d3f9d8;
+    }
+
+    div[selected-tags] {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 5px;
+      margin-top: 10px;
+    }
+
+    div[tag] {
+      background-color: #007bff;
+      color: white;
+      padding: 5px 10px;
+      border-radius: 20px;
+      display: inline-flex;
+      align-items: center;
+      cursor: pointer;
+    }
+
+    span[tag-close] {
+      margin-left: 8px;
+    }
+  `;
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], Select2Component.prototype, "placeholder", void 0);
+__decorate([
+    property({ type: Array }),
+    __metadata("design:type", Array)
+], Select2Component.prototype, "options", void 0);
+__decorate([
+    property({ type: Array }),
+    __metadata("design:type", Array)
+], Select2Component.prototype, "selectedValues", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Boolean)
+], Select2Component.prototype, "showOptions", void 0);
+Select2Component = __decorate([
+    customElement('select2-component')
+], Select2Component);
+export { Select2Component };
+//# sourceMappingURL=select2-component.js.map

package/dist-client/pages/lib/select2-component.js.map

@@ -0,0 +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      width: 300px;\n      border: 1px solid #000;\n    }\n\n    div[dropdown] {\n      border: 1px solid #ccc;\n      padding: 5px;\n      cursor: pointer;\n    }\n\n    div[options] {\n      position: absolute;\n      width: 100%;\n      border: 1px solid #ccc;\n      background-color: white;\n      max-height: 150px;\n      overflow-y: auto;\n      display: block;\n      z-index: 1;\n    }\n\n    div[option] {\n      padding: 10px;\n      cursor: pointer;\n    }\n\n    div[option]:hover {\n      background-color: #f0f0f0;\n    }\n\n    div[option][selected] {\n      background-color: #d3f9d8;\n    }\n\n    div[selected-tags] {\n      display: flex;\n      flex-wrap: wrap;\n      gap: 5px;\n      margin-top: 10px;\n    }\n\n    div[tag] {\n      background-color: #007bff;\n      color: white;\n      padding: 5px 10px;\n      border-radius: 20px;\n      display: inline-flex;\n      align-items: center;\n      cursor: pointer;\n    }\n\n    span[tag-close] {\n      margin-left: 8px;\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  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  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>&times;</span>\n            </div>\n          `\n        )}\n      </div>\n    `\n  }\n}\n"]}

package/dist-client/pages/project/project-list.d.ts

@@ -8,13 +8,17 @@ export declare enum ProjectState {
 }
 export declare enum BuildingInspectionStatus {
     WAIT = "WAIT",
+    OVERALL_WAIT = "OVERALL_WAIT",
     REQUEST = "REQUEST",
+    OVERALL_REQUEST = "OVERALL_REQUEST",
     PASS = "PASS",
     FAIL = "FAIL"
 }
 export declare const BUILDING_INSPECTION_STATUS: {
     WAIT: string;
+    OVERALL_WAIT: string;
     REQUEST: string;
+    OVERALL_REQUEST: string;
     PASS: string;
     FAIL: string;
 };
@@ -53,6 +57,10 @@ export interface BuildingComplex {
     notice?: string;
     planXScale?: number;
     planYScale?: number;
+    overallConstructorEmails?: string[];
+    taskConstructorEmails?: string[];
+    overallSupervisoryEmails?: string[];
+    taskSupervisoryEmails?: string[];
     buildings?: Building[];
 }
 export interface Building {

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

@@ -14,13 +14,17 @@ export var ProjectState;
 export var BuildingInspectionStatus;
 (function (BuildingInspectionStatus) {
     BuildingInspectionStatus["WAIT"] = "WAIT";
+    BuildingInspectionStatus["OVERALL_WAIT"] = "OVERALL_WAIT";
     BuildingInspectionStatus["REQUEST"] = "REQUEST";
+    BuildingInspectionStatus["OVERALL_REQUEST"] = "OVERALL_REQUEST";
     BuildingInspectionStatus["PASS"] = "PASS";
     BuildingInspectionStatus["FAIL"] = "FAIL";
 })(BuildingInspectionStatus || (BuildingInspectionStatus = {}));
 export const BUILDING_INSPECTION_STATUS = {
     [BuildingInspectionStatus.WAIT]: '검측 대기',
+    [BuildingInspectionStatus.OVERALL_WAIT]: '검측 대기',
     [BuildingInspectionStatus.REQUEST]: '검측 요청',
+    [BuildingInspectionStatus.OVERALL_REQUEST]: '검측 요청',
     [BuildingInspectionStatus.PASS]: '합격',
     [BuildingInspectionStatus.FAIL]: '불합격'
 };