@dssp/supervision 1.0.0-alpha.24 → 1.0.0-alpha.26

package/dist-client/pages/building-inspection/component/inspection-document/name-list-upload-popup.js

@@ -0,0 +1,327 @@
+import { __decorate, __metadata } from "tslib";
+import '@material/web/icon/icon.js';
+import '@material/web/button/elevated-button.js';
+import '@material/web/button/outlined-button.js';
+import gql from 'graphql-tag';
+import { client } from '@operato/graphql';
+import { css, html, LitElement } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { ButtonContainerStyles, ScrollbarStyles } from '@operato/styles';
+import { notify } from '@operato/layout';
+let NameListUploadPopup = class NameListUploadPopup extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.checklistId = '';
+        this.selectedFile = null;
+    }
+    render() {
+        return html `
+      <div body>
+        <div
+          upload-area
+          @click=${this._selectFile}
+          @drop=${this._handleDrop}
+          @dragover=${this._handleDragOver}
+          @dragleave=${this._handleDragLeave}
+        >
+          ${!this.selectedFile
+            ? html `
+                <div upload-icon>
+                  <md-icon>cloud_upload</md-icon>
+                </div>
+                <div upload-text>
+                  <h3>실명부 파일 업로드</h3>
+                  <p>파일을 클릭하거나 드래그하여 업로드하세요</p>
+                </div>
+              `
+            : html `
+                <div file-preview>
+                  <div file-icon>
+                    <md-icon>description</md-icon>
+                  </div>
+                  <div file-info>
+                    <span>${this.selectedFile.name}</span>
+                    <small>${this._formatFileSize(this.selectedFile.size)}</small>
+                  </div>
+                  <div remove-button @click=${this._removeFile}>
+                    <md-icon>close</md-icon>
+                  </div>
+                </div>
+              `}
+        </div>
+
+        <input type="file" id="file-input" accept=".pdf,.doc,.docx,.jpg,.jpeg,.png" @change=${this._handleFileSelect} />
+      </div>
+
+      <div button-container>
+        <md-outlined-button @click=${this._close}>닫기</md-outlined-button>
+      </div>
+    `;
+    }
+    _selectFile() {
+        var _a;
+        if (this.selectedFile)
+            return;
+        const input = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#file-input');
+        input === null || input === void 0 ? void 0 : input.click();
+    }
+    _handleFileSelect(e) {
+        var _a;
+        const input = e.target;
+        const file = (_a = input.files) === null || _a === void 0 ? void 0 : _a[0];
+        if (file) {
+            this.selectedFile = file;
+        }
+    }
+    _handleDrop(e) {
+        var _a, _b;
+        e.preventDefault();
+        e.stopPropagation();
+        this._removeDragOverClass();
+        const file = (_b = (_a = e.dataTransfer) === null || _a === void 0 ? void 0 : _a.files) === null || _b === void 0 ? void 0 : _b[0];
+        if (file) {
+            this.selectedFile = file;
+        }
+    }
+    _handleDragOver(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        this._addDragOverClass();
+    }
+    _handleDragLeave(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        this._removeDragOverClass();
+    }
+    _addDragOverClass() {
+        var _a;
+        const uploadArea = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('[upload-area]');
+        uploadArea === null || uploadArea === void 0 ? void 0 : uploadArea.classList.add('drag-over');
+    }
+    _removeDragOverClass() {
+        var _a;
+        const uploadArea = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('[upload-area]');
+        uploadArea === null || uploadArea === void 0 ? void 0 : uploadArea.classList.remove('drag-over');
+    }
+    _removeFile(e) {
+        var _a;
+        e.stopPropagation();
+        this.selectedFile = null;
+        // 파일 input 초기화
+        const input = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#file-input');
+        if (input)
+            input.value = '';
+    }
+    async _uploadFile() {
+        var _a;
+        if (!this.selectedFile)
+            return;
+        try {
+            const response = await client.mutate({
+                mutation: gql `
+          mutation CreateAttachments($attachments: [NewAttachment!]!) {
+            createAttachments(attachments: $attachments) {
+              id
+              name
+              fullpath
+              creator {
+                id
+                name
+                email
+              }
+              createdAt
+            }
+          }
+        `,
+                variables: {
+                    attachments: [
+                        {
+                            file: this.selectedFile,
+                            refBy: this.checklistId,
+                            refType: 'Checklist_NameList'
+                        }
+                    ]
+                },
+                context: {
+                    hasUpload: true
+                }
+            });
+            if (response.errors) {
+                throw new Error(((_a = response.errors[0]) === null || _a === void 0 ? void 0 : _a.message) || '업로드에 실패했습니다.');
+            }
+            const uploadedAttachment = response.data.createAttachments[0];
+            // 부모 컴포넌트에 업로드 완료 이벤트 전달
+            this.dispatchEvent(new CustomEvent('name-list-uploaded', {
+                detail: { attachment: uploadedAttachment },
+                bubbles: true
+            }));
+            notify({ message: '실명부가 성공적으로 업로드되었습니다.', level: 'info' });
+            this._close();
+        }
+        catch (error) {
+            console.error('업로드 오류:', error);
+        }
+    }
+    _formatFileSize(bytes) {
+        if (bytes === 0)
+            return '0 Bytes';
+        const k = 1024;
+        const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+        const i = Math.floor(Math.log(bytes) / Math.log(k));
+        return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+    }
+    _close() {
+        this.dispatchEvent(new CustomEvent('popup-close', { bubbles: true }));
+        history.back();
+    }
+};
+NameListUploadPopup.styles = [
+    ButtonContainerStyles,
+    ScrollbarStyles,
+    css `
+      :host {
+        display: flex;
+        flex-direction: column;
+        background-color: #fff;
+        width: 100%;
+        overflow-y: auto;
+      }
+
+      div[body] {
+        flex: 1;
+        padding: 20px;
+        display: flex;
+        flex-direction: column;
+        gap: 20px;
+      }
+
+      div[upload-area] {
+        border: 2px dashed #ddd;
+        border-radius: 8px;
+        padding: 40px 20px;
+        text-align: center;
+        background-color: #fafafa;
+        transition: all 0.2s ease;
+        cursor: pointer;
+      }
+
+      div[upload-area]:hover {
+        border-color: #2196f3;
+        background-color: #f5f9ff;
+      }
+
+      div[upload-area].drag-over {
+        border-color: #2196f3;
+        background-color: #e3f2fd;
+      }
+
+      div[upload-icon] {
+        margin-bottom: 16px;
+      }
+
+      div[upload-icon] md-icon {
+        --md-icon-size: 48px;
+        color: #999;
+      }
+
+      div[upload-text] {
+        color: #666;
+        margin-bottom: 16px;
+      }
+
+      div[upload-text] h3 {
+        margin: 0 0 8px 0;
+        color: #333;
+        font-size: 16px;
+      }
+
+      div[upload-text] p {
+        margin: 0;
+        font-size: 14px;
+        color: #666;
+      }
+
+      div[file-preview] {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        padding: 12px;
+        background-color: #f7f7f7;
+        border-radius: 6px;
+        border: 1px solid #ddd;
+      }
+
+      div[file-preview] div[file-icon] {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 40px;
+        height: 40px;
+        border-radius: 8px;
+        background-color: #e3f2fd;
+      }
+
+      div[file-preview] div[file-icon] md-icon {
+        --md-icon-size: 24px;
+        color: #2196f3;
+      }
+
+      div[file-preview] div[file-info] {
+        flex: 1;
+      }
+
+      div[file-preview] div[file-info] span {
+        display: block;
+        font-size: 14px;
+        font-weight: 500;
+        color: #333;
+      }
+
+      div[file-preview] div[file-info] small {
+        font-size: 12px;
+        color: #666;
+      }
+
+      div[remove-button] {
+        cursor: pointer;
+        padding: 4px;
+        border-radius: 4px;
+        transition: background-color 0.2s;
+      }
+
+      div[remove-button]:hover {
+        background-color: rgba(244, 67, 54, 0.1);
+      }
+
+      div[remove-button] md-icon {
+        --md-icon-size: 20px;
+        color: #f44336;
+      }
+
+      div[button-container] {
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        gap: 10px;
+        padding: 20px;
+        border-top: 1px solid #eee;
+      }
+
+      input[type='file'] {
+        display: none;
+      }
+    `
+];
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], NameListUploadPopup.prototype, "checklistId", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], NameListUploadPopup.prototype, "selectedFile", void 0);
+NameListUploadPopup = __decorate([
+    customElement('name-list-upload-popup')
+], NameListUploadPopup);
+export { NameListUploadPopup };
+//# sourceMappingURL=name-list-upload-popup.js.map

package/dist-client/pages/building-inspection/component/inspection-document/name-list-upload-popup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"name-list-upload-popup.js","sourceRoot":"","sources":["../../../../../client/pages/building-inspection/component/inspection-document/name-list-upload-popup.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@material/web/button/elevated-button.js'\nimport '@material/web/button/outlined-button.js'\nimport gql from 'graphql-tag'\nimport { client } from '@operato/graphql'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { ButtonContainerStyles, ScrollbarStyles } from '@operato/styles'\nimport { notify } from '@operato/layout'\n\n@customElement('name-list-upload-popup')\nexport class NameListUploadPopup extends LitElement {\n  static styles = [\n    ButtonContainerStyles,\n    ScrollbarStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        background-color: #fff;\n        width: 100%;\n        overflow-y: auto;\n      }\n\n      div[body] {\n        flex: 1;\n        padding: 20px;\n        display: flex;\n        flex-direction: column;\n        gap: 20px;\n      }\n\n      div[upload-area] {\n        border: 2px dashed #ddd;\n        border-radius: 8px;\n        padding: 40px 20px;\n        text-align: center;\n        background-color: #fafafa;\n        transition: all 0.2s ease;\n        cursor: pointer;\n      }\n\n      div[upload-area]:hover {\n        border-color: #2196f3;\n        background-color: #f5f9ff;\n      }\n\n      div[upload-area].drag-over {\n        border-color: #2196f3;\n        background-color: #e3f2fd;\n      }\n\n      div[upload-icon] {\n        margin-bottom: 16px;\n      }\n\n      div[upload-icon] md-icon {\n        --md-icon-size: 48px;\n        color: #999;\n      }\n\n      div[upload-text] {\n        color: #666;\n        margin-bottom: 16px;\n      }\n\n      div[upload-text] h3 {\n        margin: 0 0 8px 0;\n        color: #333;\n        font-size: 16px;\n      }\n\n      div[upload-text] p {\n        margin: 0;\n        font-size: 14px;\n        color: #666;\n      }\n\n      div[file-preview] {\n        display: flex;\n        align-items: center;\n        gap: 12px;\n        padding: 12px;\n        background-color: #f7f7f7;\n        border-radius: 6px;\n        border: 1px solid #ddd;\n      }\n\n      div[file-preview] div[file-icon] {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        width: 40px;\n        height: 40px;\n        border-radius: 8px;\n        background-color: #e3f2fd;\n      }\n\n      div[file-preview] div[file-icon] md-icon {\n        --md-icon-size: 24px;\n        color: #2196f3;\n      }\n\n      div[file-preview] div[file-info] {\n        flex: 1;\n      }\n\n      div[file-preview] div[file-info] span {\n        display: block;\n        font-size: 14px;\n        font-weight: 500;\n        color: #333;\n      }\n\n      div[file-preview] div[file-info] small {\n        font-size: 12px;\n        color: #666;\n      }\n\n      div[remove-button] {\n        cursor: pointer;\n        padding: 4px;\n        border-radius: 4px;\n        transition: background-color 0.2s;\n      }\n\n      div[remove-button]:hover {\n        background-color: rgba(244, 67, 54, 0.1);\n      }\n\n      div[remove-button] md-icon {\n        --md-icon-size: 20px;\n        color: #f44336;\n      }\n\n      div[button-container] {\n        display: flex;\n        align-items: center;\n        justify-content: flex-end;\n        gap: 10px;\n        padding: 20px;\n        border-top: 1px solid #eee;\n      }\n\n      input[type='file'] {\n        display: none;\n      }\n    `\n  ]\n\n  @property({ type: String }) checklistId: string = ''\n  @state() selectedFile: File | null = null\n\n  render() {\n    return html`\n      <div body>\n        <div\n          upload-area\n          @click=${this._selectFile}\n          @drop=${this._handleDrop}\n          @dragover=${this._handleDragOver}\n          @dragleave=${this._handleDragLeave}\n        >\n          ${!this.selectedFile\n            ? html`\n                <div upload-icon>\n                  <md-icon>cloud_upload</md-icon>\n                </div>\n                <div upload-text>\n                  <h3>실명부 파일 업로드</h3>\n                  <p>파일을 클릭하거나 드래그하여 업로드하세요</p>\n                </div>\n              `\n            : html`\n                <div file-preview>\n                  <div file-icon>\n                    <md-icon>description</md-icon>\n                  </div>\n                  <div file-info>\n                    <span>${this.selectedFile.name}</span>\n                    <small>${this._formatFileSize(this.selectedFile.size)}</small>\n                  </div>\n                  <div remove-button @click=${this._removeFile}>\n                    <md-icon>close</md-icon>\n                  </div>\n                </div>\n              `}\n        </div>\n\n        <input type=\"file\" id=\"file-input\" accept=\".pdf,.doc,.docx,.jpg,.jpeg,.png\" @change=${this._handleFileSelect} />\n      </div>\n\n      <div button-container>\n        <md-outlined-button @click=${this._close}>닫기</md-outlined-button>\n      </div>\n    `\n  }\n\n  private _selectFile() {\n    if (this.selectedFile) return\n    const input = this.shadowRoot?.querySelector('#file-input') as HTMLInputElement\n    input?.click()\n  }\n\n  private _handleFileSelect(e: Event) {\n    const input = e.target as HTMLInputElement\n    const file = input.files?.[0]\n    if (file) {\n      this.selectedFile = file\n    }\n  }\n\n  private _handleDrop(e: DragEvent) {\n    e.preventDefault()\n    e.stopPropagation()\n    this._removeDragOverClass()\n\n    const file = e.dataTransfer?.files?.[0]\n    if (file) {\n      this.selectedFile = file\n    }\n  }\n\n  private _handleDragOver(e: DragEvent) {\n    e.preventDefault()\n    e.stopPropagation()\n    this._addDragOverClass()\n  }\n\n  private _handleDragLeave(e: DragEvent) {\n    e.preventDefault()\n    e.stopPropagation()\n    this._removeDragOverClass()\n  }\n\n  private _addDragOverClass() {\n    const uploadArea = this.shadowRoot?.querySelector('[upload-area]')\n    uploadArea?.classList.add('drag-over')\n  }\n\n  private _removeDragOverClass() {\n    const uploadArea = this.shadowRoot?.querySelector('[upload-area]')\n    uploadArea?.classList.remove('drag-over')\n  }\n\n  private _removeFile(e: Event) {\n    e.stopPropagation()\n    this.selectedFile = null\n\n    // 파일 input 초기화\n    const input = this.shadowRoot?.querySelector('#file-input') as HTMLInputElement\n    if (input) input.value = ''\n  }\n\n  private async _uploadFile() {\n    if (!this.selectedFile) return\n\n    try {\n      const response = await client.mutate({\n        mutation: gql`\n          mutation CreateAttachments($attachments: [NewAttachment!]!) {\n            createAttachments(attachments: $attachments) {\n              id\n              name\n              fullpath\n              creator {\n                id\n                name\n                email\n              }\n              createdAt\n            }\n          }\n        `,\n        variables: {\n          attachments: [\n            {\n              file: this.selectedFile,\n              refBy: this.checklistId,\n              refType: 'Checklist_NameList'\n            }\n          ]\n        },\n        context: {\n          hasUpload: true\n        }\n      })\n\n      if (response.errors) {\n        throw new Error(response.errors[0]?.message || '업로드에 실패했습니다.')\n      }\n\n      const uploadedAttachment = response.data.createAttachments[0]\n\n      // 부모 컴포넌트에 업로드 완료 이벤트 전달\n      this.dispatchEvent(\n        new CustomEvent('name-list-uploaded', {\n          detail: { attachment: uploadedAttachment },\n          bubbles: true\n        })\n      )\n\n      notify({ message: '실명부가 성공적으로 업로드되었습니다.', level: 'info' })\n      this._close()\n    } catch (error) {\n      console.error('업로드 오류:', error)\n    }\n  }\n\n  private _formatFileSize(bytes: number): string {\n    if (bytes === 0) return '0 Bytes'\n\n    const k = 1024\n    const sizes = ['Bytes', 'KB', 'MB', 'GB']\n    const i = Math.floor(Math.log(bytes) / Math.log(k))\n\n    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]\n  }\n\n  private _close() {\n    this.dispatchEvent(new CustomEvent('popup-close', { bubbles: true }))\n    history.back()\n  }\n}\n"]}

package/dist-client/pages/building-inspection/component/inspection-document/photo-album-popup.d.ts

@@ -0,0 +1,27 @@
+import '@material/web/button/elevated-button.js';
+import '@material/web/icon/icon.js';
+import '@material/web/tabs/tabs.js';
+import '@material/web/tabs/primary-tab.js';
+import { LitElement } from 'lit';
+import '../image-preview-popup';
+export declare enum PhotoTab {
+    CONSTRUCTOR = "constructor",
+    SUPERVISOR = "supervisor"
+}
+export declare class PhotoAlbumPopup extends LitElement {
+    static styles: import("lit").CSSResult[];
+    checklistId: string;
+    activeTab: PhotoTab;
+    constructorFiles: any[];
+    supervisorFiles: any[];
+    render(): import("lit-html").TemplateResult<1>;
+    firstUpdated(): Promise<void>;
+    private _loadPhotos;
+    private _isImageFile;
+    private _getFileExtension;
+    private _setActiveTab;
+    private _openFilePreview;
+    private _onImageError;
+    private _formatDate;
+    private _close;
+}