@dssp/supervision 1.0.0-alpha.97 → 1.0.0

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

@@ -1,683 +0,0 @@
-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