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

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

@@ -0,0 +1,683 @@
+import { __decorate, __metadata } from "tslib";
+import '@material/web/icon/icon.js';
+import '@material/web/button/elevated-button.js';
+import '@material/web/textfield/outlined-text-field.js';
+import '@operato/input/ox-input-file.js';
+import gql from 'graphql-tag';
+import { client } from '@operato/graphql';
+import { css, html, LitElement } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { ButtonContainerStyles, ScrollbarStyles } from '@operato/styles';
+import { notify } from '@operato/layout';
+import { store, User, connect } from '@operato/shell';
+import { OxPrompt } from '@operato/popup/ox-prompt.js';
+import { openPopup } from '@operato/layout';
+import './file-preview-popup';
+import { BuildingInspectionStatus } from '../building-inspection/building-inspection-list';
+let InspectionInfoPopup = class InspectionInfoPopup extends connect(store)(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.buildingInspectionId = '';
+        this.status = BuildingInspectionStatus.WAIT;
+        this.mode = "VIEWER" /* ChecklistMode.VIEWER */;
+        this.memo = '';
+        this.attachments = [];
+        this.user = {};
+        this.isCapturing = false;
+        this.stream = null;
+    }
+    render() {
+        const canEdit = this.status !== BuildingInspectionStatus.PASS && this.mode === "EDITOR" /* ChecklistMode.EDITOR */;
+        const isCameraSupported = navigator.mediaDevices && 'mediaDevices' in navigator;
+        return html `
+      <div class="section">
+        <h3 class="section-title">검측 메모</h3>
+        <div class="memo-container">
+          <textarea
+            class="memo-textarea"
+            .value=${this.memo}
+            ?disabled=${!canEdit}
+            @input=${this._onMemoChange}
+            placeholder="검측과 관련된 메모를 입력하세요..."
+          ></textarea>
+          ${canEdit
+            ? html `
+                <div style="display: flex; justify-content: flex-end;">
+                  <md-elevated-button @click=${this._saveMemo}> <md-icon slot="icon">save</md-icon>메모 저장 </md-elevated-button>
+                </div>
+              `
+            : ''}
+        </div>
+      </div>
+
+      <div class="section file-section">
+        <h3 class="section-title">첨부 자료</h3>
+
+        ${canEdit
+            ? html `
+              <div class="upload-controls">
+                ${isCameraSupported
+                ? html `
+                      <button class="camera-button" @click=${this._toggleCamera} ?disabled=${this.isCapturing}>
+                        <md-icon>camera_alt</md-icon>
+                        ${this.isCapturing ? '촬영 중지' : '사진 촬영'}
+                      </button>
+                    `
+                : ''}
+
+                <ox-input-file accept="image/*,application/pdf,*/*" multiple="true" hide-filelist @change=${this._onFileSelect}>
+                  <button class="file-button" slot="trigger">
+                    <md-icon>attach_file</md-icon>
+                    파일 선택
+                  </button>
+                </ox-input-file>
+              </div>
+
+              <div class="video-container ${this.isCapturing ? '' : 'hidden'}">
+                <video id="video" autoplay playsinline></video>
+                <div class="camera-controls">
+                  <md-elevated-button @click=${this._capturePhoto}>
+                    <md-icon slot="icon">camera</md-icon>촬영
+                  </md-elevated-button>
+                  <md-elevated-button @click=${this._stopCamera}> <md-icon slot="icon">close</md-icon>취소 </md-elevated-button>
+                </div>
+              </div>
+            `
+            : ''}
+
+        <div class="attachment-list">
+          ${this.attachments.length === 0
+            ? html ` <div class="empty-state" style="grid-column: 1 / -1;">첨부된 파일이 없습니다.</div> `
+            : this.attachments.map(attachment => html `
+                  <div class="attachment-item" @click=${() => this._previewFile(attachment.fullpath)}>
+                    <div class="attachment-preview">
+                      ${this._isImageFile(attachment.name)
+                ? html `<img
+                            src="${attachment.fullpath}"
+                            alt="${attachment.name}"
+                            loading="lazy"
+                            @error=${(e) => this._onImageError(e, attachment.name)}
+                          />`
+                : html `<md-icon>${this._getFileIcon(attachment.name)}</md-icon>`}
+                    </div>
+                    <div class="attachment-info">
+                      <div class="attachment-name" title="${attachment.name}">${attachment.name}</div>
+                      <div class="creator-info">${attachment.creator.name} • ${this._formatDate(attachment.createdAt)}</div>
+                    </div>
+                    <div class="attachment-actions" @click=${(e) => e.stopPropagation()}>
+                      <a href="${attachment.fullpath}" download="${attachment.name}" title="다운로드">
+                        <md-icon>download</md-icon>
+                      </a>
+                      ${attachment.creator.email === this.user.email && canEdit
+                ? html ` <a href="javascript:void(0)" title="삭제">
+                            <md-icon @click=${() => this._deleteAttachment(attachment.id)} title="삭제">delete</md-icon>
+                          </a>`
+                : ''}
+                    </div>
+                  </div>
+                `)}
+        </div>
+      </div>
+    `;
+    }
+    async firstUpdated() {
+        var _a;
+        this.user = (_a = store.getState().auth) === null || _a === void 0 ? void 0 : _a.user;
+        await this._loadInspectionInfo();
+    }
+    async _loadInspectionInfo() {
+        var _a;
+        const response = await client.query({
+            query: gql `
+        query BuildingInspection($id: String!) {
+          buildingInspection(id: $id) {
+            id
+            memo
+            attachments {
+              id
+              name
+              fullpath
+              creator {
+                id
+                name
+                email
+              }
+              createdAt
+            }
+          }
+        }
+      `,
+            variables: {
+                id: this.buildingInspectionId
+            }
+        });
+        if ((_a = response.data) === null || _a === void 0 ? void 0 : _a.buildingInspection) {
+            this.memo = response.data.buildingInspection.memo || '';
+            this.attachments = response.data.buildingInspection.attachments || [];
+        }
+    }
+    _onMemoChange(e) {
+        const target = e.target;
+        this.memo = target.value;
+    }
+    async _saveMemo() {
+        const response = await client.mutate({
+            mutation: gql `
+        mutation UpdateBuildingInspection($patch: UpdateBuildingInspection!) {
+          updateBuildingInspection(patch: $patch) {
+            id
+            memo
+          }
+        }
+      `,
+            variables: {
+                patch: {
+                    id: this.buildingInspectionId,
+                    memo: this.memo
+                }
+            }
+        });
+        if (!response.errors) {
+            notify({ message: '메모가 저장되었습니다.', level: 'info' });
+            this._requestRefresh();
+        }
+        else {
+            notify({ message: '메모 저장에 실패했습니다.', level: 'error' });
+        }
+    }
+    async _toggleCamera() {
+        if (this.isCapturing) {
+            this._stopCamera();
+        }
+        else {
+            await this._startCamera();
+        }
+    }
+    async _startCamera() {
+        try {
+            this.stream = await navigator.mediaDevices.getUserMedia({
+                video: { facingMode: 'environment' }, // 후면 카메라 우선
+                audio: false
+            });
+            this.isCapturing = true;
+            await this.updateComplete;
+            if (this.video) {
+                this.video.srcObject = this.stream;
+            }
+        }
+        catch (error) {
+            notify({ message: '카메라에 접근할 수 없습니다.', level: 'error' });
+            console.error('Camera access error:', error);
+        }
+    }
+    _stopCamera() {
+        if (this.stream) {
+            this.stream.getTracks().forEach(track => track.stop());
+            this.stream = null;
+        }
+        this.isCapturing = false;
+    }
+    async _capturePhoto() {
+        if (!this.video || !this.stream)
+            return;
+        const canvas = document.createElement('canvas');
+        const context = canvas.getContext('2d');
+        canvas.width = this.video.videoWidth;
+        canvas.height = this.video.videoHeight;
+        context.drawImage(this.video, 0, 0);
+        canvas.toBlob(async (blob) => {
+            if (blob) {
+                const now = new Date();
+                const koreaTime = new Date(now.getTime() + 9 * 60 * 60 * 1000); // UTC + 9시간
+                const timestamp = koreaTime.toISOString().slice(0, 19).replace('T', '_').replace(/:/g, '-');
+                const file = new File([blob], `photo-${timestamp}.jpg`, { type: 'image/jpeg' });
+                await this._uploadFiles([file]); // 단일 파일도 배열로 감싸서 전송
+            }
+        }, 'image/jpeg', 0.8);
+        this._stopCamera();
+    }
+    async _onFileSelect(e) {
+        const files = e.detail;
+        await this._uploadFiles(files);
+    }
+    async _uploadFiles(files) {
+        if (files.length === 0)
+            return;
+        try {
+            const response = await client.mutate({
+                mutation: gql `
+          mutation ($attachments: [NewAttachment!]!) {
+            createAttachments(attachments: $attachments) {
+              id
+              name
+              fullpath
+              creator {
+                id
+                name
+                email
+              }
+              createdAt
+            }
+          }
+        `,
+                variables: {
+                    attachments: files.map(file => ({
+                        file,
+                        refBy: this.buildingInspectionId,
+                        refType: 'BuildingInspection'
+                    }))
+                },
+                context: {
+                    hasUpload: true
+                }
+            });
+            if (!response.errors) {
+                const uploadedFiles = response.data.createAttachments;
+                this.attachments = [...this.attachments, ...uploadedFiles];
+                if (files.length === 1) {
+                    notify({ message: '파일이 업로드되었습니다.', level: 'info' });
+                }
+                else {
+                    notify({ message: `${files.length}개 파일이 모두 업로드되었습니다.`, level: 'info' });
+                }
+                this._requestRefresh();
+            }
+            else {
+                notify({ message: '파일 업로드에 실패했습니다.', level: 'error' });
+            }
+        }
+        catch (error) {
+            notify({ message: '파일 업로드 중 오류가 발생했습니다.', level: 'error' });
+        }
+    }
+    async _deleteAttachment(attachmentId) {
+        var _a, _b;
+        if (await OxPrompt.open({
+            title: '첨부 자료 삭제',
+            text: '첨부 자료를 삭제하시겠습니까?',
+            confirmButton: { text: '삭제' },
+            cancelButton: { text: '취소' }
+        })) {
+            const response = await client.mutate({
+                mutation: gql `
+          mutation DeleteAttachment($deleteAttachmentId: String!) {
+            deleteAttachment(id: $deleteAttachmentId)
+          }
+        `,
+                variables: {
+                    deleteAttachmentId: attachmentId
+                }
+            });
+            if (!response.errors) {
+                this.attachments = this.attachments.filter(attachment => attachment.id !== attachmentId);
+                notify({ message: '첨부 자료를 삭제하였습니다.', level: 'info' });
+                this._requestRefresh();
+            }
+            else {
+                notify({ message: ((_b = (_a = response.errors) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.message) || '첨부 자료 삭제에 실패하였습니다.', level: 'error' });
+            }
+        }
+    }
+    _previewFile(filepath) {
+        openPopup(html `<file-preview-popup .filepath=${filepath}></file-preview-popup>`, {
+            backdrop: true,
+            size: 'large',
+            title: '미리보기'
+        });
+    }
+    _isImageFile(filename) {
+        var _a;
+        const ext = (_a = filename.split('.').pop()) === null || _a === void 0 ? void 0 : _a.toLowerCase();
+        return ['jpg', 'jpeg', 'png', 'gif', 'webp'].includes(ext || '');
+    }
+    _onImageError(e, filename) {
+        const img = e.target;
+        const parent = img.parentElement;
+        if (parent) {
+            parent.innerHTML = `<md-icon>${this._getFileIcon(filename)}</md-icon>`;
+        }
+    }
+    _getFileIcon(filename) {
+        var _a;
+        const ext = (_a = filename.split('.').pop()) === null || _a === void 0 ? void 0 : _a.toLowerCase();
+        if (['jpg', 'jpeg', 'png', 'gif', 'webp'].includes(ext || '')) {
+            return 'image';
+        }
+        else if (ext === 'pdf') {
+            return 'picture_as_pdf';
+        }
+        else {
+            return 'description';
+        }
+    }
+    _formatDate(date) {
+        const _date = new Date(date);
+        return _date.toLocaleDateString('ko-KR', {
+            year: 'numeric',
+            month: '2-digit',
+            day: '2-digit',
+            hour: '2-digit',
+            minute: '2-digit'
+        });
+    }
+    _requestRefresh() {
+        this.dispatchEvent(new CustomEvent('requestRefresh', {
+            detail: { buildingInspectionId: this.buildingInspectionId }
+        }));
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this._stopCamera();
+    }
+};
+InspectionInfoPopup.styles = [
+    ButtonContainerStyles,
+    ScrollbarStyles,
+    css `
+      :host {
+        display: flex;
+        flex-direction: column;
+        padding: 15px 20px;
+        background-color: var(--md-sys-color-surface);
+        height: 100%;
+        gap: 16px;
+        overflow-y: auto;
+      }
+
+      .section {
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+      }
+
+      .section-title {
+        color: rgb(5, 149, 229);
+        font-size: 17px;
+        font-weight: 700;
+        margin: 0;
+      }
+
+      .memo-container {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+      }
+
+      .memo-textarea {
+        min-height: 120px;
+        border: 1px solid #ccc;
+        border-radius: 8px;
+        padding: 12px;
+        font-family: inherit;
+        font-size: 14px;
+        resize: vertical;
+      }
+
+      .file-section {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+      }
+
+      .upload-controls {
+        display: flex;
+        gap: 8px;
+        flex-wrap: wrap;
+
+        ox-input-file {
+          flex: 1;
+        }
+      }
+
+      .camera-button,
+      .file-button {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        padding: 8px 16px;
+        border: 1px solid #ccc;
+        border-radius: 8px;
+        background: #fff;
+        cursor: pointer;
+        transition: background 0.2s;
+      }
+
+      .camera-button:hover,
+      .file-button:hover {
+        background: #f5f5f5;
+        color: #000;
+      }
+
+      .camera-button:disabled,
+      .file-button:disabled {
+        opacity: 0.6;
+        cursor: not-allowed;
+      }
+
+      .attachment-list {
+        flex: 1;
+        overflow-y: auto;
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        gap: 12px;
+        max-height: 400px;
+        border: 1px solid #eee;
+        border-radius: 8px;
+        padding: 12px;
+      }
+
+      .attachment-item {
+        display: flex;
+        flex-direction: column;
+        padding: 8px;
+        border: 1px solid #ddd;
+        border-radius: 8px;
+        background: #fafafa;
+        transition: all 0.2s;
+        cursor: pointer;
+        position: relative;
+      }
+
+      .attachment-item:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+      }
+
+      .attachment-item:hover .attachment-actions {
+        opacity: 1;
+      }
+
+      .attachment-preview {
+        width: 100%;
+        height: 150px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 6px;
+        background: #f8f9fa;
+        margin-bottom: 8px;
+        overflow: hidden;
+      }
+
+      .attachment-preview img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        border-radius: 6px;
+      }
+
+      .attachment-preview md-icon {
+        font-size: 48px;
+        color: #666;
+      }
+
+      .attachment-info {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+        flex: 1;
+      }
+
+      .attachment-name {
+        font-size: 13px;
+        font-weight: 500;
+        line-height: 1.2;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+      }
+
+      .attachment-actions {
+        position: absolute;
+        top: 4px;
+        right: 4px;
+        display: flex;
+        gap: 4px;
+        opacity: 0.7;
+        transition: opacity 0.2s;
+        background: rgba(255, 255, 255, 0.9);
+        border-radius: 4px;
+        padding: 2px;
+        backdrop-filter: blur(2px);
+      }
+
+      .attachment-actions a,
+      .attachment-actions md-icon {
+        cursor: pointer;
+        padding: 4px;
+        border-radius: 4px;
+        transition: background 0.2s;
+        color: #666;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        text-decoration: none;
+      }
+
+      .attachment-actions a:hover,
+      .attachment-actions md-icon:hover {
+        background: rgba(0, 0, 0, 0.1);
+        color: #000;
+      }
+
+      .creator-info {
+        font-size: 12px;
+        color: #666;
+        margin-top: 4px;
+      }
+
+      .empty-state {
+        text-align: center;
+        color: #666;
+        font-style: italic;
+        padding: 20px;
+      }
+
+      #cameraInput {
+        display: none;
+      }
+
+      .video-container {
+        position: relative;
+        margin-bottom: 12px;
+      }
+
+      #video {
+        width: 100%;
+        max-width: 400px;
+        height: auto;
+        border: 1px solid #ccc;
+        border-radius: 8px;
+      }
+
+      .camera-controls {
+        display: flex;
+        gap: 8px;
+        margin-top: 8px;
+        justify-content: center;
+      }
+
+      .hidden {
+        display: none;
+      }
+
+      /* 반응형 디자인 */
+      @media (max-width: 768px) {
+        .attachment-list {
+          grid-template-columns: repeat(2, 1fr);
+          gap: 8px;
+          padding: 8px;
+        }
+
+        .attachment-preview {
+          height: 100px;
+        }
+
+        .attachment-name {
+          font-size: 12px;
+        }
+
+        .creator-info {
+          font-size: 11px;
+        }
+      }
+
+      @media (max-width: 480px) {
+        .attachment-list {
+          grid-template-columns: 1fr;
+        }
+      }
+    `
+];
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], InspectionInfoPopup.prototype, "buildingInspectionId", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], InspectionInfoPopup.prototype, "status", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], InspectionInfoPopup.prototype, "mode", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], InspectionInfoPopup.prototype, "memo", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Array)
+], InspectionInfoPopup.prototype, "attachments", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", User)
+], InspectionInfoPopup.prototype, "user", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Boolean)
+], InspectionInfoPopup.prototype, "isCapturing", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], InspectionInfoPopup.prototype, "stream", void 0);
+__decorate([
+    query('#video'),
+    __metadata("design:type", HTMLVideoElement)
+], InspectionInfoPopup.prototype, "video", void 0);
+__decorate([
+    query('#cameraInput'),
+    __metadata("design:type", HTMLInputElement)
+], InspectionInfoPopup.prototype, "cameraInput", void 0);
+__decorate([
+    query('ox-input-file'),
+    __metadata("design:type", Object)
+], InspectionInfoPopup.prototype, "fileInput", void 0);
+InspectionInfoPopup = __decorate([
+    customElement('inspection-info-popup')
+], InspectionInfoPopup);
+export { InspectionInfoPopup };
+//# sourceMappingURL=inspection-info-popup.js.map