@dssp/supervision 1.0.0-alpha.7 → 1.0.0-alpha.74

package/dist-client/pages/project-checklist/project-checklist-management.js

@@ -0,0 +1,910 @@
+import { __decorate, __metadata } from "tslib";
+import '@material/web/icon/icon.js';
+import '@material/web/button/elevated-button.js';
+import '@material/web/button/filled-button.js';
+import '@material/web/select/filled-select.js';
+import '@material/web/select/select-option.js';
+import '@material/web/textfield/filled-text-field.js';
+import '@operato/data-grist';
+import '../checklist/checklist-view';
+import { CommonGristStyles, ScrollbarStyles, ButtonContainerStyles } from '@operato/styles';
+import { PageView } from '@operato/shell';
+import { css, html } from 'lit';
+import { customElement, query, state } from 'lit/decorators.js';
+import { DataGrist } from '@operato/data-grist';
+import { client } from '@operato/graphql';
+import { notify, openPopup } from '@operato/layout';
+import gql from 'graphql-tag';
+import { BuildingInspectionStatus } from '../building-inspection/building-inspection-list';
+let ProjectChecklistManagement = class ProjectChecklistManagement extends PageView {
+    constructor() {
+        super(...arguments);
+        this.projectId = '';
+        this.constructionTypes = [];
+        this.allDetailTypes = [];
+        this.selectedConstructionType = {};
+        this.selectedConstructionDetailType = {};
+        this.checklistName = '';
+        this.templateItems = [];
+        this.isEditMode = false;
+        this.selectedChecklistId = null;
+    }
+    get context() {
+        return {
+            title: '체크리스트 관리'
+        };
+    }
+    render() {
+        var _a, _b, _c;
+        return html `
+      <div header>
+        <h2>
+          <md-icon slot="icon" back @click=${() => history.back()}>arrow_back</md-icon>
+          체크리스트 관리
+        </h2>
+        <div button-container>
+          <md-elevated-button href=${`project-detail/${this.projectId}`}>
+            <md-icon slot="icon">home</md-icon>프로젝트 홈
+          </md-elevated-button>
+        </div>
+      </div>
+
+      <div body>
+        <div left>
+          <div section-header>${this.isEditMode ? '체크리스트 수정' : '체크리스트 등록'}</div>
+
+          <div form-area>
+            <label>공종</label>
+            <md-filled-select constructionType @change=${this._onSelectConstructionType}>
+              <md-select-option ?selected=${!((_a = this.selectedConstructionType) === null || _a === void 0 ? void 0 : _a.id)} value="">
+                <div slot="headline">선택</div>
+              </md-select-option>
+              ${(_b = this.constructionTypes) === null || _b === void 0 ? void 0 : _b.map(ct => {
+            var _a;
+            const selected = ct.id === ((_a = this.selectedConstructionType) === null || _a === void 0 ? void 0 : _a.id);
+            return html `<md-select-option ?selected=${selected} .value=${ct.id}>
+                  <div slot="headline">${ct.name}</div>
+                </md-select-option>`;
+        })}
+            </md-filled-select>
+
+            <label>세부공종</label>
+            <md-filled-select constructionDetailType @change=${this._onSelectConstructionDetailType}>
+              ${(((_c = this.selectedConstructionType) === null || _c === void 0 ? void 0 : _c.constructionDetailTypes) || []).map(cdt => {
+            var _a;
+            const selected = cdt.id === ((_a = this.selectedConstructionDetailType) === null || _a === void 0 ? void 0 : _a.id);
+            return html `<md-select-option ?selected=${selected} .value=${cdt.id}>
+                  <div slot="headline">${cdt.name}</div>
+                </md-select-option>`;
+        })}
+            </md-filled-select>
+
+            <label>이름</label>
+            <md-filled-text-field
+              .value=${this.checklistName}
+              @input=${e => {
+            this.checklistName = e.target.value;
+        }}
+            ></md-filled-text-field>
+          </div>
+
+          <ox-grist left .mode=${'GRID'} .config=${this.leftGristConfig}></ox-grist>
+
+          <div button-container>
+            <md-elevated-button save @click=${this._save}>
+              <md-icon slot="icon">${this.isEditMode ? 'save' : 'add'}</md-icon>
+              ${this.isEditMode ? '수정' : '등록'}
+            </md-elevated-button>
+            <md-elevated-button delete @click=${this._delete}> <md-icon slot="icon">delete</md-icon>삭제 </md-elevated-button>
+          </div>
+        </div>
+
+        <div right>
+          <div section-header>체크리스트 목록</div>
+
+          <ox-grist
+            right
+            .mode=${'GRID'}
+            .config=${this.rightGristConfig}
+            .fetchHandler=${this._fetchChecklists.bind(this)}
+          ></ox-grist>
+        </div>
+      </div>
+    `;
+    }
+    async pageUpdated(changes, lifecycle) {
+        if (this.active) {
+            this.projectId = lifecycle.resourceId || '';
+            await this._init();
+        }
+    }
+    async pageInitialized(lifecycle) {
+        this.projectId = lifecycle.resourceId || '';
+        await this._init();
+    }
+    async _init() {
+        await this._fetchConstructionTypes();
+        this._buildLeftGristConfig();
+        this._buildRightGristConfig();
+    }
+    async _fetchConstructionTypes() {
+        var _a, _b;
+        const response = await client.query({
+            query: gql `
+        query {
+          constructionTypes {
+            items {
+              id
+              name
+              projectType
+              constructionDetailTypes {
+                id
+                name
+                sequence
+              }
+            }
+          }
+        }
+      `
+        });
+        const items = (((_b = (_a = response.data) === null || _a === void 0 ? void 0 : _a.constructionTypes) === null || _b === void 0 ? void 0 : _b.items) || []).filter((ct) => ct.projectType === 'DCSP' || !ct.projectType);
+        this.constructionTypes = items;
+        this.allDetailTypes = items.flatMap(ct => (ct.constructionDetailTypes || []).map(dt => (Object.assign(Object.assign({}, dt), { constructionTypeId: ct.id }))));
+        // 초기에는 선택하지 않음 (사용자가 직접 선택)
+        this.selectedConstructionType = {};
+        this.selectedConstructionDetailType = {};
+    }
+    _buildLeftGristConfig() {
+        this.leftGristConfig = {
+            columns: [
+                { type: 'gutter', gutterName: 'row-selector', multiple: true },
+                {
+                    type: 'gutter',
+                    gutterName: 'button',
+                    icon: 'arrow_upward',
+                    handlers: { click: 'move-up' }
+                },
+                {
+                    type: 'gutter',
+                    gutterName: 'button',
+                    icon: 'arrow_downward',
+                    handlers: { click: 'move-down' }
+                },
+                {
+                    type: 'string',
+                    name: 'mainType',
+                    header: '구분',
+                    record: { editable: true },
+                    width: 100
+                },
+                {
+                    type: 'text-select',
+                    name: 'name',
+                    header: '검사항목',
+                    record: {
+                        editable: true,
+                        options: (value, column, record) => {
+                            if (!record)
+                                return [];
+                            const items = [
+                                record.originalName,
+                                record.recommendation1,
+                                record.recommendation2,
+                                record.recommendation3,
+                                record.recommendation4,
+                                record.recommendation5
+                            ].filter(Boolean);
+                            return [...new Set(items)].map(r => ({ display: r, value: r }));
+                        }
+                    },
+                    width: 250
+                },
+                {
+                    type: 'string',
+                    name: 'inspctionCriteria',
+                    header: '검사 기준',
+                    record: { editable: true },
+                    width: 200
+                },
+                { type: 'string', name: 'originalName', hidden: true },
+                { type: 'string', name: 'recommendation1', hidden: true },
+                { type: 'string', name: 'recommendation2', hidden: true },
+                { type: 'string', name: 'recommendation3', hidden: true },
+                { type: 'string', name: 'recommendation4', hidden: true },
+                { type: 'string', name: 'recommendation5', hidden: true }
+            ],
+            rows: {
+                selectable: { multiple: true }
+            },
+            pagination: { infinite: true }
+        };
+    }
+    _buildRightGristConfig() {
+        this.rightGristConfig = {
+            columns: [
+                { type: 'gutter', gutterName: 'row-selector', multiple: false },
+                { type: 'gutter', gutterName: 'sequence' },
+                {
+                    type: 'gutter',
+                    gutterName: 'button',
+                    fixed: true,
+                    icon: 'preview',
+                    handlers: {
+                        click: async (columns, data, column, record, rowIndex) => {
+                            if (!record.id)
+                                return;
+                            await this._openPreview(record);
+                        }
+                    }
+                },
+                {
+                    type: 'string',
+                    name: 'constructionTypeName',
+                    header: '공종',
+                    width: 120
+                },
+                {
+                    type: 'string',
+                    name: 'constructionDetailTypeName',
+                    header: '세부공종',
+                    width: 120
+                },
+                {
+                    type: 'string',
+                    name: 'name',
+                    header: '체크리스트명',
+                    width: 180
+                }
+            ],
+            rows: {
+                selectable: { multiple: false },
+                appendable: false,
+                handlers: {
+                    click: this._handleRightGristRowClick.bind(this)
+                }
+            },
+            pagination: { infinite: true }
+        };
+    }
+    async _fetchChecklists() {
+        var _a, _b, _c, _d;
+        if (!this.projectId)
+            return { total: 0, records: [] };
+        const response = await client.query({
+            query: gql `
+        query ($filters: [Filter!], $sortings: [Sorting!]) {
+          projectChecklists(filters: $filters, sortings: $sortings) {
+            items {
+              id
+              projectId
+              constructionTypeId
+              constructionDetailTypeId
+              name
+              updatedAt
+            }
+            total
+          }
+        }
+      `,
+            variables: {
+                filters: [{ name: 'projectId', value: this.projectId, operator: 'eq' }],
+                sortings: [{ name: 'updatedAt', desc: true }]
+            }
+        });
+        const items = ((_b = (_a = response.data) === null || _a === void 0 ? void 0 : _a.projectChecklists) === null || _b === void 0 ? void 0 : _b.items) || [];
+        // 공종/세부공종 이름을 클라이언트에서 매핑
+        const records = items.map(item => {
+            var _a, _b;
+            return (Object.assign(Object.assign({}, item), { constructionTypeName: ((_a = this.constructionTypes.find(ct => ct.id === item.constructionTypeId)) === null || _a === void 0 ? void 0 : _a.name) || '', constructionDetailTypeName: ((_b = this.allDetailTypes.find(dt => dt.id === item.constructionDetailTypeId)) === null || _b === void 0 ? void 0 : _b.name) || '' }));
+        });
+        return {
+            total: ((_d = (_c = response.data) === null || _c === void 0 ? void 0 : _c.projectChecklists) === null || _d === void 0 ? void 0 : _d.total) || 0,
+            records
+        };
+    }
+    async _onSelectConstructionType(e) {
+        var _a, _b;
+        const ctId = e.target.value;
+        const ct = this.constructionTypes.find(c => c.id === ctId) || {};
+        this.selectedConstructionType = ct;
+        this.selectedConstructionDetailType = Object.assign({}, (((_a = ct.constructionDetailTypes) === null || _a === void 0 ? void 0 : _a[0]) || {}));
+        // re-render 완료 후 세부공종 select UI 동기화
+        await this.updateComplete;
+        await ((_b = this.htmlSelectConstructionDetailType) === null || _b === void 0 ? void 0 : _b.selectIndex(0));
+        if (!this.isEditMode) {
+            await this._loadTemplateItems();
+        }
+    }
+    async _onSelectConstructionDetailType(e) {
+        var _a, _b;
+        const cdtId = e.target.value;
+        this.selectedConstructionDetailType = Object.assign({}, (((_b = (_a = this.selectedConstructionType) === null || _a === void 0 ? void 0 : _a.constructionDetailTypes) === null || _b === void 0 ? void 0 : _b.find(d => d.id === cdtId)) || {}));
+        if (!this.isEditMode) {
+            await this._loadTemplateItems();
+        }
+    }
+    async _loadTemplateItems() {
+        var _a, _b, _c, _d, _e, _f;
+        const ctId = (_a = this.selectedConstructionType) === null || _a === void 0 ? void 0 : _a.id;
+        const cdtId = (_b = this.selectedConstructionDetailType) === null || _b === void 0 ? void 0 : _b.id;
+        if (!ctId || !cdtId) {
+            this.templateItems = [];
+            this.leftGrist.data = { records: [] };
+            return;
+        }
+        // upsert로 템플릿 찾기/생성
+        const upsertRes = await client.mutate({
+            mutation: gql `
+        mutation ($ctId: String!, $cdtId: String!) {
+          upsertConstructionChecklistTemplate(constructionTypeId: $ctId, constructionDetailTypeId: $cdtId) {
+            id
+          }
+        }
+      `,
+            variables: { ctId, cdtId }
+        });
+        const templateId = (_d = (_c = upsertRes.data) === null || _c === void 0 ? void 0 : _c.upsertConstructionChecklistTemplate) === null || _d === void 0 ? void 0 : _d.id;
+        if (!templateId)
+            return;
+        const response = await client.query({
+            query: gql `
+        query ($filters: [Filter!], $sortings: [Sorting!]) {
+          constructionChecklistTemplateItems(filters: $filters, sortings: $sortings) {
+            items {
+              id
+              sequence
+              mainType
+              name
+              inspctionCriteria
+              recommendation1
+              recommendation2
+              recommendation3
+              recommendation4
+              recommendation5
+            }
+          }
+        }
+      `,
+            variables: {
+                filters: [{ name: 'constructionChecklistTemplateId', value: templateId, operator: 'eq' }],
+                sortings: [{ name: 'sequence' }]
+            }
+        });
+        const items = ((_f = (_e = response.data) === null || _e === void 0 ? void 0 : _e.constructionChecklistTemplateItems) === null || _f === void 0 ? void 0 : _f.items) || [];
+        this.templateItems = items;
+        // 왼쪽 그리드에 데이터 셋팅 (recommendation 포함)
+        this.leftGrist.data = {
+            records: items.map(item => ({
+                mainType: item.mainType || '',
+                name: item.name || '',
+                inspctionCriteria: item.inspctionCriteria || '',
+                originalName: item.name || '',
+                recommendation1: item.recommendation1 || '',
+                recommendation2: item.recommendation2 || '',
+                recommendation3: item.recommendation3 || '',
+                recommendation4: item.recommendation4 || '',
+                recommendation5: item.recommendation5 || ''
+            }))
+        };
+    }
+    async _handleRightGristRowClick(columns, data, column, record, rowIndex, field) {
+        // 클릭 시 해당 로우 선택/해제 토글
+        field === null || field === void 0 ? void 0 : field.dispatchEvent(new CustomEvent('select-record-change', {
+            bubbles: true,
+            composed: true,
+            detail: record['__selected__'] ? { removed: [record] } : { added: [record] }
+        }));
+        // 토글 반영 후 처리
+        setTimeout(async () => {
+            var _a, _b, _c, _d;
+            const selected = (_b = (_a = this.rightGrist) === null || _a === void 0 ? void 0 : _a.selected) === null || _b === void 0 ? void 0 : _b[0];
+            if (!selected || !selected.id) {
+                // 선택 해제 → 등록 모드 + 왼쪽 초기화
+                await this._resetLeftForm();
+                return;
+            }
+            // 선택 → 수정 모드
+            this.isEditMode = true;
+            this.selectedChecklistId = selected.id;
+            this.checklistName = selected.name || '';
+            // 공종/세부공종 세팅
+            const ct = this.constructionTypes.find(c => c.id === selected.constructionTypeId) || {};
+            this.selectedConstructionType = ct;
+            this.selectedConstructionDetailType = Object.assign({}, (((_c = ct.constructionDetailTypes) === null || _c === void 0 ? void 0 : _c.find(d => d.id === selected.constructionDetailTypeId)) || {}));
+            // 공종 변경으로 세부공종 options가 re-render 된 후 select UI 동기화
+            await this.updateComplete;
+            const cdtIndex = (ct.constructionDetailTypes || []).findIndex(d => d.id === selected.constructionDetailTypeId);
+            if (cdtIndex >= 0) {
+                await ((_d = this.htmlSelectConstructionDetailType) === null || _d === void 0 ? void 0 : _d.selectIndex(cdtIndex));
+            }
+            // 공종+세부공종의 템플릿 아이템 로드 (추천 options용)
+            await this._loadTemplateItemsForEdit(selected.constructionTypeId, selected.constructionDetailTypeId);
+            // 저장된 아이템 로드 (FieldResolver 활용)
+            const items = await this._fetchChecklistItems(selected.id);
+            // templateItems에서 같은 mainType의 recommendation을 매칭
+            this.leftGrist.data = {
+                records: items.map(item => {
+                    const tmpl = this.templateItems.find(t => t.mainType === item.mainType) || {};
+                    return {
+                        mainType: item.mainType || '',
+                        name: item.name || '',
+                        inspctionCriteria: item.inspctionCriteria || '',
+                        originalName: tmpl.name || item.name || '',
+                        recommendation1: tmpl.recommendation1 || '',
+                        recommendation2: tmpl.recommendation2 || '',
+                        recommendation3: tmpl.recommendation3 || '',
+                        recommendation4: tmpl.recommendation4 || '',
+                        recommendation5: tmpl.recommendation5 || ''
+                    };
+                })
+            };
+        }, 100);
+    }
+    async _loadTemplateItemsForEdit(ctId, cdtId) {
+        var _a, _b, _c, _d;
+        if (!ctId || !cdtId) {
+            this.templateItems = [];
+            return;
+        }
+        const upsertRes = await client.mutate({
+            mutation: gql `
+        mutation ($ctId: String!, $cdtId: String!) {
+          upsertConstructionChecklistTemplate(constructionTypeId: $ctId, constructionDetailTypeId: $cdtId) {
+            id
+          }
+        }
+      `,
+            variables: { ctId, cdtId }
+        });
+        const templateId = (_b = (_a = upsertRes.data) === null || _a === void 0 ? void 0 : _a.upsertConstructionChecklistTemplate) === null || _b === void 0 ? void 0 : _b.id;
+        if (!templateId)
+            return;
+        const response = await client.query({
+            query: gql `
+        query ($filters: [Filter!], $sortings: [Sorting!]) {
+          constructionChecklistTemplateItems(filters: $filters, sortings: $sortings) {
+            items {
+              id
+              sequence
+              mainType
+              name
+              inspctionCriteria
+              recommendation1
+              recommendation2
+              recommendation3
+              recommendation4
+              recommendation5
+            }
+          }
+        }
+      `,
+            variables: {
+                filters: [{ name: 'constructionChecklistTemplateId', value: templateId, operator: 'eq' }],
+                sortings: [{ name: 'sequence' }]
+            }
+        });
+        this.templateItems = ((_d = (_c = response.data) === null || _c === void 0 ? void 0 : _c.constructionChecklistTemplateItems) === null || _d === void 0 ? void 0 : _d.items) || [];
+    }
+    async _save() {
+        var _a, _b, _c, _d;
+        const ctId = (_a = this.selectedConstructionType) === null || _a === void 0 ? void 0 : _a.id;
+        const cdtId = (_b = this.selectedConstructionDetailType) === null || _b === void 0 ? void 0 : _b.id;
+        const name = (_c = this.checklistName) === null || _c === void 0 ? void 0 : _c.trim();
+        if (!ctId || !cdtId) {
+            notify({ message: '공종과 세부공종을 선택해주세요.', level: 'warn' });
+            return;
+        }
+        if (!name) {
+            notify({ message: '이름을 입력해주세요.', level: 'warn' });
+            return;
+        }
+        // 그리드에서 아이템 추출
+        const records = ((_d = this.leftGrist.dirtyData) === null || _d === void 0 ? void 0 : _d.records) || [];
+        const items = records.map((row, idx) => ({
+            mainType: row.mainType || null,
+            name: row.name || '',
+            inspctionCriteria: row.inspctionCriteria || null,
+            sequence: idx
+        }));
+        try {
+            if (this.isEditMode && this.selectedChecklistId) {
+                // 수정
+                const response = await client.mutate({
+                    mutation: gql `
+            mutation ($id: String!, $name: String!, $items: [ProjectChecklistItemInput!]!) {
+              updateProjectChecklist(id: $id, name: $name, items: $items) {
+                id
+              }
+            }
+          `,
+                    variables: {
+                        id: this.selectedChecklistId,
+                        name,
+                        items
+                    }
+                });
+                if (!response.errors) {
+                    notify({ message: '수정되었습니다.' });
+                    this.rightGrist.fetch();
+                }
+                else {
+                    notify({ message: '수정에 실패하였습니다.', level: 'error' });
+                }
+            }
+            else {
+                // 등록
+                const response = await client.mutate({
+                    mutation: gql `
+            mutation (
+              $projectId: String!
+              $constructionTypeId: String!
+              $constructionDetailTypeId: String!
+              $name: String!
+              $items: [ProjectChecklistItemInput!]!
+            ) {
+              createProjectChecklist(
+                projectId: $projectId
+                constructionTypeId: $constructionTypeId
+                constructionDetailTypeId: $constructionDetailTypeId
+                name: $name
+                items: $items
+              ) {
+                id
+              }
+            }
+          `,
+                    variables: {
+                        projectId: this.projectId,
+                        constructionTypeId: ctId,
+                        constructionDetailTypeId: cdtId,
+                        name,
+                        items
+                    }
+                });
+                if (!response.errors) {
+                    notify({ message: '등록되었습니다.' });
+                    // 오른쪽 그리드 새로고침 + 왼쪽 초기화
+                    await this.rightGrist.fetch();
+                    this._resetLeftForm();
+                }
+                else {
+                    notify({ message: '등록에 실패하였습니다.', level: 'error' });
+                }
+            }
+        }
+        catch (e) {
+            notify({ message: '저장 중 오류가 발생하였습니다.', level: 'error' });
+        }
+    }
+    async _resetLeftForm() {
+        var _a, _b;
+        this.isEditMode = false;
+        this.selectedChecklistId = null;
+        this.checklistName = '';
+        this.selectedConstructionType = {};
+        this.selectedConstructionDetailType = {};
+        this.templateItems = [];
+        this.leftGrist.data = { records: [] };
+        await this.updateComplete;
+        // md-filled-select 내부 상태 초기화
+        (_a = this.htmlSelectConstructionType) === null || _a === void 0 ? void 0 : _a.reset();
+        (_b = this.htmlSelectConstructionDetailType) === null || _b === void 0 ? void 0 : _b.reset();
+    }
+    async _delete() {
+        var _a, _b;
+        const selectedItems = ((_a = this.leftGrist) === null || _a === void 0 ? void 0 : _a.selected) || [];
+        if (selectedItems.length > 0) {
+            // 왼쪽 그리드에서 선택된 row 삭제 (클라이언트 측)
+            if (confirm('선택된 검사항목을 삭제하시겠습니까?')) {
+                const records = ((_b = this.leftGrist.dirtyData) === null || _b === void 0 ? void 0 : _b.records) || [];
+                const selectedIndices = new Set(selectedItems.map((_, i) => {
+                    return records.indexOf(selectedItems[i]);
+                }));
+                const remaining = records.filter((_, i) => !selectedIndices.has(i));
+                this.leftGrist.data = { records: remaining };
+            }
+        }
+        else if (this.isEditMode && this.selectedChecklistId) {
+            // 체크리스트 자체 삭제
+            if (confirm('이 체크리스트를 삭제하시겠습니까?')) {
+                const response = await client.mutate({
+                    mutation: gql `
+            mutation ($ids: [String!]!) {
+              deleteProjectChecklists(ids: $ids)
+            }
+          `,
+                    variables: { ids: [this.selectedChecklistId] }
+                });
+                if (!response.errors) {
+                    notify({ message: '삭제되었습니다.' });
+                    this.isEditMode = false;
+                    this.selectedChecklistId = null;
+                    this.checklistName = '';
+                    this.leftGrist.data = { records: [] };
+                    this.rightGrist.fetch();
+                }
+            }
+        }
+        else {
+            notify({ message: '삭제할 항목을 선택해주세요.', level: 'warn' });
+        }
+    }
+    async _fetchChecklistItems(checklistId) {
+        var _a, _b, _c, _d;
+        const response = await client.query({
+            query: gql `
+        query ($filters: [Filter!]) {
+          projectChecklists(filters: $filters) {
+            items {
+              projectChecklistItems {
+                id
+                mainType
+                name
+                inspctionCriteria
+                sequence
+              }
+            }
+          }
+        }
+      `,
+            variables: {
+                filters: [{ name: 'id', value: checklistId, operator: 'eq' }]
+            }
+        });
+        return ((_d = (_c = (_b = (_a = response.data) === null || _a === void 0 ? void 0 : _a.projectChecklists) === null || _b === void 0 ? void 0 : _b.items) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.projectChecklistItems) || [];
+    }
+    async _openPreview(record) {
+        var _a, _b;
+        const items = await this._fetchChecklistItems(record.id);
+        const ctName = ((_a = this.constructionTypes.find(ct => ct.id === record.constructionTypeId)) === null || _a === void 0 ? void 0 : _a.name) || '';
+        const cdtName = ((_b = this.allDetailTypes.find(dt => dt.id === record.constructionDetailTypeId)) === null || _b === void 0 ? void 0 : _b.name) || '';
+        const checklist = {
+            name: record.name,
+            constructionType: ctName,
+            constructionDetailType: cdtName,
+            location: '',
+            documentNo: '',
+            inspectionParts: [],
+            buildingInspection: {
+                status: BuildingInspectionStatus.WAIT
+            },
+            checklistItems: items.map(item => (Object.assign(Object.assign({}, item), { detailType: '' })))
+        };
+        openPopup(html `
+        <div style="overflow-y: auto;">
+          <checklist-view .mode=${"VIEWER" /* ChecklistMode.VIEWER */} .checklist=${checklist}></checklist-view>
+        </div>
+      `, {
+            backdrop: true,
+            size: 'large',
+            title: `체크리스트 미리보기 - ${record.name}`
+        });
+    }
+};
+ProjectChecklistManagement.styles = [
+    ScrollbarStyles,
+    CommonGristStyles,
+    ButtonContainerStyles,
+    css `
+      :host {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        height: 100%;
+        background-color: var(--md-sys-color-surface);
+      }
+
+      div[header] {
+        display: flex;
+        align-items: center;
+        padding: 0px 12px;
+
+        h2 {
+          display: flex;
+          gap: 7px;
+          flex: 1;
+          margin-bottom: 8px;
+          color: #3f71a0;
+          font-size: 18px;
+
+          md-icon[back] {
+            background: linear-gradient(135deg, #3f71a0 0%, #5a8cc7 100%);
+            color: white;
+            padding: 8px;
+            border-radius: 50%;
+            cursor: pointer;
+            box-shadow: 0 2px 8px rgba(63, 113, 160, 0.3);
+            width: 14px;
+            height: 14px;
+            --md-icon-size: 20px;
+          }
+
+          md-icon[back]:hover {
+            background: linear-gradient(135deg, #2e5c89 0%, #4a7bb0 100%);
+            box-shadow: 0 4px 12px rgba(63, 113, 160, 0.4);
+          }
+        }
+
+        div[button-container] {
+          display: flex;
+          align-items: center;
+          justify-content: end;
+          flex: 1;
+          padding-top: 8px;
+
+          md-elevated-button {
+            margin: 0 4px;
+            --md-elevated-button-container-height: 32px;
+            --md-elevated-button-label-text-size: 16px;
+            --md-elevated-button-container-color: #0595e5;
+            --md-elevated-button-label-text-color: var(--md-sys-color-on-primary);
+            --md-elevated-button-hover-label-text-color: var(--md-sys-color-on-primary);
+            --md-elevated-button-pressed-label-text-color: var(--md-sys-color-on-primary);
+            --md-elevated-button-focus-label-text-color: var(--md-sys-color-on-primary);
+            --md-elevated-button-icon-color: var(--md-sys-color-on-primary);
+            --md-elevated-button-hover-icon-color: var(--md-sys-color-on-primary);
+            --md-elevated-button-pressed-icon-color: var(--md-sys-color-on-primary);
+            --md-elevated-button-focus-icon-color: var(--md-sys-color-on-primary);
+          }
+        }
+      }
+
+      div[body] {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 15px;
+        flex: 1;
+        padding: 15px;
+        overflow: hidden;
+      }
+
+      div[left],
+      div[right] {
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+        border: 1px solid #ddd;
+        border-radius: 8px;
+        padding: 15px;
+      }
+
+      div[section-header] {
+        font-size: 16px;
+        font-weight: 600;
+        margin-bottom: 10px;
+        color: #0595e5;
+        display: flex;
+        align-items: center;
+        gap: 6px;
+      }
+
+      div[form-area] {
+        display: grid;
+        grid-template-columns: 80px 1fr;
+        gap: 10px;
+        margin-bottom: 10px;
+
+        label {
+          display: flex;
+          align-items: center;
+          justify-content: flex-end;
+          font-size: 14px;
+        }
+      }
+
+      md-filled-select {
+        width: 100%;
+        --md-filled-select-text-field-container-color: transparent;
+        --md-filled-select-text-field-active-indicator-color: #999;
+        --md-filled-select-text-field-input-text-size: 14px;
+      }
+
+      md-filled-text-field {
+        width: 100%;
+        --md-filled-text-field-container-color: transparent;
+        --md-filled-text-field-active-indicator-color: #999;
+        --md-filled-text-field-input-text-size: 14px;
+      }
+
+      ox-grist {
+        flex: 1;
+        overflow-y: auto;
+      }
+
+      div[button-container] {
+        display: flex;
+        justify-content: flex-end;
+        gap: 8px;
+        margin-top: 10px;
+      }
+
+      md-elevated-button[save] {
+        --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;
+      }
+
+      md-elevated-button[delete] {
+        --md-elevated-button-container-color: #e53935;
+        --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;
+      }
+    `
+];
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], ProjectChecklistManagement.prototype, "projectId", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Array)
+], ProjectChecklistManagement.prototype, "constructionTypes", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Array)
+], ProjectChecklistManagement.prototype, "allDetailTypes", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], ProjectChecklistManagement.prototype, "selectedConstructionType", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], ProjectChecklistManagement.prototype, "selectedConstructionDetailType", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], ProjectChecklistManagement.prototype, "checklistName", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Array)
+], ProjectChecklistManagement.prototype, "templateItems", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], ProjectChecklistManagement.prototype, "leftGristConfig", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], ProjectChecklistManagement.prototype, "rightGristConfig", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Boolean)
+], ProjectChecklistManagement.prototype, "isEditMode", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], ProjectChecklistManagement.prototype, "selectedChecklistId", void 0);
+__decorate([
+    query('ox-grist[left]'),
+    __metadata("design:type", DataGrist)
+], ProjectChecklistManagement.prototype, "leftGrist", void 0);
+__decorate([
+    query('ox-grist[right]'),
+    __metadata("design:type", DataGrist)
+], ProjectChecklistManagement.prototype, "rightGrist", void 0);
+__decorate([
+    query('md-filled-select[constructionType]'),
+    __metadata("design:type", Object)
+], ProjectChecklistManagement.prototype, "htmlSelectConstructionType", void 0);
+__decorate([
+    query('md-filled-select[constructionDetailType]'),
+    __metadata("design:type", Object)
+], ProjectChecklistManagement.prototype, "htmlSelectConstructionDetailType", void 0);
+ProjectChecklistManagement = __decorate([
+    customElement('project-checklist-management')
+], ProjectChecklistManagement);
+export { ProjectChecklistManagement };
+//# sourceMappingURL=project-checklist-management.js.map