@dssp/supervision 1.0.0-alpha.21 → 1.0.0-alpha.23

package/dist-client/pages/checklist/inspection-tab-popup.js

@@ -0,0 +1,189 @@
+import { __decorate, __metadata } from "tslib";
+import '@material/web/icon/icon.js';
+import '@material/web/button/elevated-button.js';
+import { css, html, LitElement } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { ButtonContainerStyles, ScrollbarStyles } from '@operato/styles';
+import { BuildingInspectionStatus } from '../building-inspection/building-inspection-list';
+import './inspection-info-popup';
+let InspectionTabPopup = class InspectionTabPopup extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.selectedInspection = {};
+        this.project = {};
+        this.initialTab = 0;
+        this.activeTab = 0;
+    }
+    firstUpdated() {
+        this.activeTab = this.initialTab;
+    }
+    render() {
+        return html `
+      <div class="tab-container">
+        <div class="tab-header">
+          <button class="tab-button ${this.activeTab === 0 ? 'active' : ''}" @click=${() => this._setActiveTab(0)}>
+            <md-icon>assignment</md-icon>
+            체크리스트
+          </button>
+          <button class="tab-button ${this.activeTab === 1 ? 'active' : ''}" @click=${() => this._setActiveTab(1)}>
+            <md-icon>note_add</md-icon>
+            메모 & 첨부자료
+          </button>
+        </div>
+
+        <div class="tab-content">${this.activeTab === 0 ? this._renderChecklistTab() : this._renderInfoTab()}</div>
+      </div>
+    `;
+    }
+    // 체크리스트 랜더링
+    _renderChecklistTab() {
+        var _a;
+        return html `
+      <div class="checklist-tab">
+        <div class="checklist-content">
+          <checklist-view
+            .mode=${"EDITOR" /* ChecklistMode.EDITOR */}
+            .status=${this.selectedInspection.status}
+            .checklist=${this.selectedInspection.checklist || {}}
+            .buildingComplex=${((_a = this.project) === null || _a === void 0 ? void 0 : _a.buildingComplex) || {}}
+          ></checklist-view>
+        </div>
+
+        <div class="checklist-actions">
+          <md-elevated-button
+            ?disabled=${this.selectedInspection.status == BuildingInspectionStatus.PASS}
+            @click=${this._onModifyChecklist}
+          >
+            <md-icon slot="icon">assignment</md-icon>등록
+          </md-elevated-button>
+        </div>
+      </div>
+    `;
+    }
+    // 메모 & 첨부자료 랜더링
+    _renderInfoTab() {
+        return html `
+      <inspection-info-popup
+        .buildingInspectionId=${this.selectedInspection.id}
+        .status=${this.selectedInspection.status}
+        .mode=${"EDITOR" /* ChecklistMode.EDITOR */}
+        style="flex: 1; height: 100%;"
+      ></inspection-info-popup>
+    `;
+    }
+    // 탭 전환
+    _setActiveTab(index) {
+        this.activeTab = index;
+    }
+    // 체크리스트 수정 이벤트
+    _onModifyChecklist() {
+        this.dispatchEvent(new CustomEvent('modify-checklist', {
+            detail: {
+                checklist: this.selectedInspection.checklist
+            }
+        }));
+    }
+};
+InspectionTabPopup.styles = [
+    ButtonContainerStyles,
+    ScrollbarStyles,
+    css `
+      :host {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        min-height: 600px;
+      }
+
+      .tab-container {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+      }
+
+      .tab-header {
+        display: flex;
+        border-bottom: 1px solid #ddd;
+        background: #f5f5f5;
+      }
+
+      .tab-button {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        padding: 12px 24px;
+        border: none;
+        background: transparent;
+        cursor: pointer;
+        font-size: 14px;
+        color: #666;
+        transition: all 0.2s;
+        border-bottom: 3px solid transparent;
+        min-width: 150px;
+        justify-content: center;
+      }
+
+      .tab-button:hover {
+        background: #e8f4f8;
+        color: #0595e5;
+      }
+
+      .tab-button.active {
+        background: white;
+        color: #0595e5;
+        border-bottom-color: #0595e5;
+        font-weight: 600;
+      }
+
+      .tab-button md-icon {
+        font-size: 18px;
+      }
+
+      .tab-content {
+        flex: 1;
+        overflow: hidden;
+        display: flex;
+        flex-direction: column;
+      }
+
+      .checklist-tab {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+      }
+
+      .checklist-content {
+        flex: 1;
+        overflow-y: auto;
+        padding: 0;
+      }
+
+      .checklist-actions {
+        padding: 20px;
+        text-align: right;
+        border-top: 1px solid #eee;
+        background: white;
+      }
+    `
+];
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", Object)
+], InspectionTabPopup.prototype, "selectedInspection", void 0);
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", Object)
+], InspectionTabPopup.prototype, "project", void 0);
+__decorate([
+    property({ type: Number }),
+    __metadata("design:type", Number)
+], InspectionTabPopup.prototype, "initialTab", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Number)
+], InspectionTabPopup.prototype, "activeTab", void 0);
+InspectionTabPopup = __decorate([
+    customElement('inspection-tab-popup')
+], InspectionTabPopup);
+export { InspectionTabPopup };
+//# sourceMappingURL=inspection-tab-popup.js.map

package/dist-client/pages/checklist/inspection-tab-popup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"inspection-tab-popup.js","sourceRoot":"","sources":["../../../client/pages/checklist/inspection-tab-popup.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@material/web/button/elevated-button.js'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { ButtonContainerStyles, ScrollbarStyles } from '@operato/styles'\nimport { BuildingInspectionStatus } from '../building-inspection/building-inspection-list'\nimport { ChecklistMode } from './checklist-view'\nimport './inspection-info-popup'\n\n@customElement('inspection-tab-popup')\nexport class InspectionTabPopup extends LitElement {\n  static styles = [\n    ButtonContainerStyles,\n    ScrollbarStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        height: 100%;\n        min-height: 600px;\n      }\n\n      .tab-container {\n        display: flex;\n        flex-direction: column;\n        height: 100%;\n      }\n\n      .tab-header {\n        display: flex;\n        border-bottom: 1px solid #ddd;\n        background: #f5f5f5;\n      }\n\n      .tab-button {\n        display: flex;\n        align-items: center;\n        gap: 8px;\n        padding: 12px 24px;\n        border: none;\n        background: transparent;\n        cursor: pointer;\n        font-size: 14px;\n        color: #666;\n        transition: all 0.2s;\n        border-bottom: 3px solid transparent;\n        min-width: 150px;\n        justify-content: center;\n      }\n\n      .tab-button:hover {\n        background: #e8f4f8;\n        color: #0595e5;\n      }\n\n      .tab-button.active {\n        background: white;\n        color: #0595e5;\n        border-bottom-color: #0595e5;\n        font-weight: 600;\n      }\n\n      .tab-button md-icon {\n        font-size: 18px;\n      }\n\n      .tab-content {\n        flex: 1;\n        overflow: hidden;\n        display: flex;\n        flex-direction: column;\n      }\n\n      .checklist-tab {\n        display: flex;\n        flex-direction: column;\n        height: 100%;\n      }\n\n      .checklist-content {\n        flex: 1;\n        overflow-y: auto;\n        padding: 0;\n      }\n\n      .checklist-actions {\n        padding: 20px;\n        text-align: right;\n        border-top: 1px solid #eee;\n        background: white;\n      }\n    `\n  ]\n\n  @property({ type: Object }) selectedInspection: any = {}\n  @property({ type: Object }) project: any = {}\n  @property({ type: Number }) initialTab: number = 0\n\n  @state() activeTab: number = 0\n\n  firstUpdated() {\n    this.activeTab = this.initialTab\n  }\n\n  render() {\n    return html`\n      <div class=\"tab-container\">\n        <div class=\"tab-header\">\n          <button class=\"tab-button ${this.activeTab === 0 ? 'active' : ''}\" @click=${() => this._setActiveTab(0)}>\n            <md-icon>assignment</md-icon>\n            체크리스트\n          </button>\n          <button class=\"tab-button ${this.activeTab === 1 ? 'active' : ''}\" @click=${() => this._setActiveTab(1)}>\n            <md-icon>note_add</md-icon>\n            메모 & 첨부자료\n          </button>\n        </div>\n\n        <div class=\"tab-content\">${this.activeTab === 0 ? this._renderChecklistTab() : this._renderInfoTab()}</div>\n      </div>\n    `\n  }\n\n  // 체크리스트 랜더링\n  private _renderChecklistTab() {\n    return html`\n      <div class=\"checklist-tab\">\n        <div class=\"checklist-content\">\n          <checklist-view\n            .mode=${ChecklistMode.EDITOR}\n            .status=${this.selectedInspection.status}\n            .checklist=${this.selectedInspection.checklist || {}}\n            .buildingComplex=${this.project?.buildingComplex || {}}\n          ></checklist-view>\n        </div>\n\n        <div class=\"checklist-actions\">\n          <md-elevated-button\n            ?disabled=${this.selectedInspection.status == BuildingInspectionStatus.PASS}\n            @click=${this._onModifyChecklist}\n          >\n            <md-icon slot=\"icon\">assignment</md-icon>등록\n          </md-elevated-button>\n        </div>\n      </div>\n    `\n  }\n\n  // 메모 & 첨부자료 랜더링\n  private _renderInfoTab() {\n    return html`\n      <inspection-info-popup\n        .buildingInspectionId=${this.selectedInspection.id}\n        .status=${this.selectedInspection.status}\n        .mode=${ChecklistMode.EDITOR}\n        style=\"flex: 1; height: 100%;\"\n      ></inspection-info-popup>\n    `\n  }\n\n  // 탭 전환\n  private _setActiveTab(index: number) {\n    this.activeTab = index\n  }\n\n  // 체크리스트 수정 이벤트\n  private _onModifyChecklist() {\n    this.dispatchEvent(\n      new CustomEvent('modify-checklist', {\n        detail: {\n          checklist: this.selectedInspection.checklist\n        }\n      })\n    )\n  }\n}\n"]}

package/dist-client/route.d.ts

@@ -1 +1 @@
-export default function route(page: string): "checklist-type-management" | "building-inspection-list" | "checklist-template-list" | "building-inspection-detail-drawing" | "building-inspection-detail-checklist" | "building-inspection-detail-camera" | "building-inspection-grid-detail" | undefined;
+export default function route(page: string): "checklist-template-list" | "checklist-type-management" | "building-inspection-list" | "building-inspection-detail-drawing" | "building-inspection-detail-checklist" | "building-inspection-detail-camera" | "building-inspection-grid-detail" | undefined;