@things-factory/board-ui 10.1.178 → 10.1.181

package/dist-client/graphql/attachment.d.ts

@@ -1,3 +1,4 @@
+import { type UploadProgress } from '@operato/graphql';
 export interface AttachmentResult {
     id: string;
     name: string;
@@ -12,8 +13,9 @@ export interface AttachmentResult {
  * file 은 Browser File 객체. 결과로 새 Attachment id / 메타데이터 반환.
  *
  * board-import wizard 가 사용 — 이후 importBoardAsync(attachmentId=result.id) 로 변환 시작.
+ * progress 를 주면 올라간 정도(0‒1)를 알려 준다 — 선택기가 그것을 보인다.
  */
-export declare function createAttachmentForImport(file: File): Promise<AttachmentResult>;
+export declare function createAttachmentForImport(file: File, progress?: UploadProgress): Promise<AttachmentResult>;
 /**
  * 기존 attachment 목록 조회 — wizard upload 스텝의 "기존 파일 선택" 탭에서 사용.
  * 도메인 스코프 내 attachment 만 반환되는 건 attachment-base resolver 가 보장.

package/dist-client/graphql/attachment.js

@@ -6,14 +6,15 @@
  * → attachmentId 획득 → importBoardAsync 로 전달하는 짧은 흐름만 필요.
  */
 import gql from 'graphql-tag';
-import { client } from '@operato/graphql';
+import { client, uploadContext } from '@operato/graphql';
 /**
  * 단일 파일을 Attachment 로 등록 — graphql-upload (Apollo client multipart) 사용.
  * file 은 Browser File 객체. 결과로 새 Attachment id / 메타데이터 반환.
  *
  * board-import wizard 가 사용 — 이후 importBoardAsync(attachmentId=result.id) 로 변환 시작.
+ * progress 를 주면 올라간 정도(0‒1)를 알려 준다 — 선택기가 그것을 보인다.
  */
-export async function createAttachmentForImport(file) {
+export async function createAttachmentForImport(file, progress) {
     const response = await client.mutate({
         mutation: gql `
       mutation CreateAttachmentForImport($attachment: NewAttachment!) {
@@ -36,9 +37,7 @@ export async function createAttachmentForImport(file) {
             }
         },
         // multipart 업로드는 Apollo upload-link 가 처리. fetchPolicy 강제 무관.
-        context: {
-            hasUpload: true
-        }
+        context: progress ? uploadContext(progress) : { hasUpload: true }
     });
     return response.data.createAttachment;
 }

package/dist-client/graphql/attachment.js.map

@@ -1 +1 @@
-{"version":3,"file":"attachment.js","sourceRoot":"","sources":["../../client/graphql/attachment.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,OAAO,GAAG,MAAM,aAAa,CAAA;AAE7B,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AAYzC;;;;;GAKG;AACH,MAAM,CAAC,KAAK,UAAU,yBAAyB,CAAC,IAAU;IACxD,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,MAAM,CAAC;QACnC,QAAQ,EAAE,GAAG,CAAA;;;;;;;;;;;KAWZ;QACD,SAAS,EAAE;YACT,UAAU,EAAE;gBACV,IAAI;gBACJ,QAAQ,EAAE,QAAQ;gBAClB,OAAO,EAAE,cAAc;gBACvB,WAAW,EAAE,4BAA4B;aAC1C;SACF;QACD,6DAA6D;QAC7D,OAAO,EAAE;YACP,SAAS,EAAE,IAAI;SAChB;KACF,CAAC,CAAA;IACF,OAAO,QAAQ,CAAC,IAAI,CAAC,gBAAgB,CAAA;AACvC,CAAC;AAED;;;;;;;GAOG;AACH,MAAM,CAAC,KAAK,UAAU,yBAAyB,CAAC,OAK/C;IACC,MAAM,OAAO,GAA6D,EAAE,CAAA;IAC5E,IAAI,OAAO,CAAC,MAAM,EAAE,CAAC;QACnB,OAAO,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,IAAI,OAAO,CAAC,MAAM,GAAG,EAAE,CAAC,CAAA;IAClF,CAAC;IACD,IAAI,OAAO,CAAC,cAAc,EAAE,CAAC;QAC3B,OAAO,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,OAAO,CAAC,cAAc,GAAG,EAAE,CAAC,CAAA;IAC7F,CAAC;IACD,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,KAAK,CAAC;QAClC,KAAK,EAAE,GAAG,CAAA;;;;;;;;;;;;;;;KAeT;QACD,SAAS,EAAE;YACT,OAAO;YACP,UAAU,EAAE,EAAE,IAAI,EAAE,OAAO,CAAC,IAAI,IAAI,CAAC,EAAE,KAAK,EAAE,OAAO,CAAC,KAAK,IAAI,EAAE,EAAE;YACnE,QAAQ,EAAE,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;SAC9C;QACD,WAAW,EAAE,UAAU;KACxB,CAAC,CAAA;IACF,OAAO,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAA;AAClC,CAAC","sourcesContent":["/**\n * Attachment GraphQL operations — board-import wizard 가 도면 파일 업로드 시 사용.\n *\n * 백엔드: @things-factory/attachment-base 의 createAttachment mutation.\n * 별도 ox-attachment-list 의 흐름과 독립 — wizard 는 단순 file input → createAttachment\n * → attachmentId 획득 → importBoardAsync 로 전달하는 짧은 흐름만 필요.\n */\nimport gql from 'graphql-tag'\n\nimport { client } from '@operato/graphql'\n\nexport interface AttachmentResult {\n  id: string\n  name: string\n  mimetype?: string\n  size?: number\n  path?: string\n  category?: string\n  createdAt?: string\n}\n\n/**\n * 단일 파일을 Attachment 로 등록 — graphql-upload (Apollo client multipart) 사용.\n * file 은 Browser File 객체. 결과로 새 Attachment id / 메타데이터 반환.\n *\n * board-import wizard 가 사용 — 이후 importBoardAsync(attachmentId=result.id) 로 변환 시작.\n */\nexport async function createAttachmentForImport(file: File): Promise<AttachmentResult> {\n  const response = await client.mutate({\n    mutation: gql`\n      mutation CreateAttachmentForImport($attachment: NewAttachment!) {\n        createAttachment(attachment: $attachment) {\n          id\n          name\n          mimetype\n          size\n          path\n          category\n        }\n      }\n    `,\n    variables: {\n      attachment: {\n        file,\n        category: 'import',\n        refType: 'board-import',\n        description: 'board-import wizard upload'\n      }\n    },\n    // multipart 업로드는 Apollo upload-link 가 처리. fetchPolicy 강제 무관.\n    context: {\n      hasUpload: true\n    }\n  })\n  return response.data.createAttachment\n}\n\n/**\n * 기존 attachment 목록 조회 — wizard upload 스텝의 \"기존 파일 선택\" 탭에서 사용.\n * 도메인 스코프 내 attachment 만 반환되는 건 attachment-base resolver 가 보장.\n *\n * @param search 파일명 부분 일치 (선택)\n * @param mimetypePrefix 'image' | 'application' 등 — wizard 는 이미지/dxf 만 보여주려고 사용\n * @param page / limit 페이지네이션 (기본 1, 50)\n */\nexport async function fetchAttachmentsForImport(options: {\n  search?: string\n  mimetypePrefix?: string\n  page?: number\n  limit?: number\n}): Promise<{ items: AttachmentResult[]; total: number }> {\n  const filters: Array<{ name: string; operator: string; value: string }> = []\n  if (options.search) {\n    filters.push({ name: 'name', operator: 'i_like', value: `%${options.search}%` })\n  }\n  if (options.mimetypePrefix) {\n    filters.push({ name: 'mimetype', operator: 'i_like', value: `${options.mimetypePrefix}%` })\n  }\n  const response = await client.query({\n    query: gql`\n      query AttachmentsForImport($filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!]) {\n        attachments(filters: $filters, pagination: $pagination, sortings: $sortings) {\n          items {\n            id\n            name\n            mimetype\n            size\n            path\n            category\n            createdAt\n          }\n          total\n        }\n      }\n    `,\n    variables: {\n      filters,\n      pagination: { page: options.page ?? 1, limit: options.limit ?? 50 },\n      sortings: [{ name: 'createdAt', desc: true }]\n    },\n    fetchPolicy: 'no-cache'\n  })\n  return response.data.attachments\n}\n"]}
+{"version":3,"file":"attachment.js","sourceRoot":"","sources":["../../client/graphql/attachment.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,OAAO,GAAG,MAAM,aAAa,CAAA;AAE7B,OAAO,EAAE,MAAM,EAAE,aAAa,EAAuB,MAAM,kBAAkB,CAAA;AAY7E;;;;;;GAMG;AACH,MAAM,CAAC,KAAK,UAAU,yBAAyB,CAAC,IAAU,EAAE,QAAyB;IACnF,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,MAAM,CAAC;QACnC,QAAQ,EAAE,GAAG,CAAA;;;;;;;;;;;KAWZ;QACD,SAAS,EAAE;YACT,UAAU,EAAE;gBACV,IAAI;gBACJ,QAAQ,EAAE,QAAQ;gBAClB,OAAO,EAAE,cAAc;gBACvB,WAAW,EAAE,4BAA4B;aAC1C;SACF;QACD,6DAA6D;QAC7D,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE;KAClE,CAAC,CAAA;IACF,OAAO,QAAQ,CAAC,IAAI,CAAC,gBAAgB,CAAA;AACvC,CAAC;AAED;;;;;;;GAOG;AACH,MAAM,CAAC,KAAK,UAAU,yBAAyB,CAAC,OAK/C;IACC,MAAM,OAAO,GAA6D,EAAE,CAAA;IAC5E,IAAI,OAAO,CAAC,MAAM,EAAE,CAAC;QACnB,OAAO,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,IAAI,OAAO,CAAC,MAAM,GAAG,EAAE,CAAC,CAAA;IAClF,CAAC;IACD,IAAI,OAAO,CAAC,cAAc,EAAE,CAAC;QAC3B,OAAO,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,OAAO,CAAC,cAAc,GAAG,EAAE,CAAC,CAAA;IAC7F,CAAC;IACD,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,KAAK,CAAC;QAClC,KAAK,EAAE,GAAG,CAAA;;;;;;;;;;;;;;;KAeT;QACD,SAAS,EAAE;YACT,OAAO;YACP,UAAU,EAAE,EAAE,IAAI,EAAE,OAAO,CAAC,IAAI,IAAI,CAAC,EAAE,KAAK,EAAE,OAAO,CAAC,KAAK,IAAI,EAAE,EAAE;YACnE,QAAQ,EAAE,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;SAC9C;QACD,WAAW,EAAE,UAAU;KACxB,CAAC,CAAA;IACF,OAAO,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAA;AAClC,CAAC","sourcesContent":["/**\n * Attachment GraphQL operations — board-import wizard 가 도면 파일 업로드 시 사용.\n *\n * 백엔드: @things-factory/attachment-base 의 createAttachment mutation.\n * 별도 ox-attachment-list 의 흐름과 독립 — wizard 는 단순 file input → createAttachment\n * → attachmentId 획득 → importBoardAsync 로 전달하는 짧은 흐름만 필요.\n */\nimport gql from 'graphql-tag'\n\nimport { client, uploadContext, type UploadProgress } from '@operato/graphql'\n\nexport interface AttachmentResult {\n  id: string\n  name: string\n  mimetype?: string\n  size?: number\n  path?: string\n  category?: string\n  createdAt?: string\n}\n\n/**\n * 단일 파일을 Attachment 로 등록 — graphql-upload (Apollo client multipart) 사용.\n * file 은 Browser File 객체. 결과로 새 Attachment id / 메타데이터 반환.\n *\n * board-import wizard 가 사용 — 이후 importBoardAsync(attachmentId=result.id) 로 변환 시작.\n * progress 를 주면 올라간 정도(0‒1)를 알려 준다 — 선택기가 그것을 보인다.\n */\nexport async function createAttachmentForImport(file: File, progress?: UploadProgress): Promise<AttachmentResult> {\n  const response = await client.mutate({\n    mutation: gql`\n      mutation CreateAttachmentForImport($attachment: NewAttachment!) {\n        createAttachment(attachment: $attachment) {\n          id\n          name\n          mimetype\n          size\n          path\n          category\n        }\n      }\n    `,\n    variables: {\n      attachment: {\n        file,\n        category: 'import',\n        refType: 'board-import',\n        description: 'board-import wizard upload'\n      }\n    },\n    // multipart 업로드는 Apollo upload-link 가 처리. fetchPolicy 강제 무관.\n    context: progress ? uploadContext(progress) : { hasUpload: true }\n  })\n  return response.data.createAttachment\n}\n\n/**\n * 기존 attachment 목록 조회 — wizard upload 스텝의 \"기존 파일 선택\" 탭에서 사용.\n * 도메인 스코프 내 attachment 만 반환되는 건 attachment-base resolver 가 보장.\n *\n * @param search 파일명 부분 일치 (선택)\n * @param mimetypePrefix 'image' | 'application' 등 — wizard 는 이미지/dxf 만 보여주려고 사용\n * @param page / limit 페이지네이션 (기본 1, 50)\n */\nexport async function fetchAttachmentsForImport(options: {\n  search?: string\n  mimetypePrefix?: string\n  page?: number\n  limit?: number\n}): Promise<{ items: AttachmentResult[]; total: number }> {\n  const filters: Array<{ name: string; operator: string; value: string }> = []\n  if (options.search) {\n    filters.push({ name: 'name', operator: 'i_like', value: `%${options.search}%` })\n  }\n  if (options.mimetypePrefix) {\n    filters.push({ name: 'mimetype', operator: 'i_like', value: `${options.mimetypePrefix}%` })\n  }\n  const response = await client.query({\n    query: gql`\n      query AttachmentsForImport($filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!]) {\n        attachments(filters: $filters, pagination: $pagination, sortings: $sortings) {\n          items {\n            id\n            name\n            mimetype\n            size\n            path\n            category\n            createdAt\n          }\n          total\n        }\n      }\n    `,\n    variables: {\n      filters,\n      pagination: { page: options.page ?? 1, limit: options.limit ?? 50 },\n      sortings: [{ name: 'createdAt', desc: true }]\n    },\n    fetchPolicy: 'no-cache'\n  })\n  return response.data.attachments\n}\n"]}

package/dist-client/pages/board-create-wizard-page.d.ts

@@ -7,6 +7,7 @@
  *   기존 파일 (existing) — 이미 업로드된 Attachment 에서 보드 생성.
  */
 import '@material/web/icon/icon.js';
+import '@operato/input/ox-input-file.js';
 import { type PropertyValues } from 'lit';
 import { PageView } from '@operato/shell';
 import '@operato/board/ox-board-preview.js';
@@ -21,6 +22,7 @@ export declare class BoardCreateWizardPage extends BoardCreateWizardPage_base {
     private _session?;
     /** 현재 업로드 진행 중 — UI lock + spinner. */
     private _uploading;
+    private _uploadProgress?;
     /** 업로드 에러 메시지 — UI 표시 + 사용자가 다시 시도 가능. */
     private _uploadError?;
     /** upload 스텝 안의 모드 — 새 파일 업로드 vs 기존 attachment 선택. */
@@ -97,8 +99,6 @@ export declare class BoardCreateWizardPage extends BoardCreateWizardPage_base {
      */
     private _refreshBrowse;
     private _selectExisting;
-    private _onFileChange;
-    private _onDrop;
     private _uploadFile;
     private _resetUpload;
     private _proceedToImport;

package/dist-client/pages/board-create-wizard-page.js

@@ -8,6 +8,7 @@ import { __decorate, __metadata } from "tslib";
  *   기존 파일 (existing) — 이미 업로드된 Attachment 에서 보드 생성.
  */
 import '@material/web/icon/icon.js';
+import '@operato/input/ox-input-file.js';
 import { css, html } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
 import { i18next, localize } from '@operato/i18n';
@@ -186,25 +187,12 @@ let BoardCreateWizardPage = class BoardCreateWizardPage extends localize(i18next
         transition: border-color 0.15s, background 0.15s;
       }
       .drop-zone:hover,
-      .drop-zone.dragover {
+      .drop-zone.candrop {
         border-color: var(--md-sys-color-primary, #2a64d8);
         background: var(--md-sys-color-primary-container, #eaf2ff);
       }
-      .drop-zone .icon {
-        font-size: 36px;
-        --md-icon-size: 36px;
-        opacity: 0.5;
-      }
-      .drop-zone .title {
-        font-size: 15px;
-        font-weight: 500;
-      }
-      .drop-zone .hint {
-        font-size: 12px;
-        color: var(--md-sys-color-on-secondary-container, #777);
-      }
-      input[type='file'] {
-        display: none;
+      .drop-zone {
+        --file-uploader-icon-size: 36px;
       }
 
       .uploaded {
@@ -1128,28 +1116,15 @@ let BoardCreateWizardPage = class BoardCreateWizardPage extends localize(i18next
     }
     _renderNewUpload() {
         return html `
-      <label
+      <ox-input-file
         class="drop-zone"
-        @dragover=${(e) => {
-            e.preventDefault();
-            e.currentTarget.classList.add('dragover');
-        }}
-        @dragleave=${(e) => {
-            ;
-            e.currentTarget.classList.remove('dragover');
-        }}
-        @drop=${this._onDrop}
-      >
-        <md-icon class="icon">upload</md-icon>
-        <div class="title">${this._uploading ? i18next.t('text.uploading') || 'Uploading...' : i18next.t('text.drop or click to upload') || 'Drop a drawing here or click to browse'}</div>
-        <div class="hint">${ACCEPT}</div>
-        <input
-          type="file"
-          accept=${ACCEPT}
-          ?disabled=${this._uploading}
-          @change=${this._onFileChange}
-        />
-      </label>
+        accept=${ACCEPT}
+        hide-filelist
+        .description=${i18next.t('text.drop or click to upload') || 'Drop a drawing here or click to browse'}
+        .progress=${this._uploadProgress}
+        ?disabled=${this._uploading && this._uploadProgress === undefined}
+        @change=${(e) => this._uploadFile(e.detail?.[0])}
+      ></ox-input-file>
     `;
     }
     _renderBrowseExisting() {
@@ -1359,26 +1334,14 @@ let BoardCreateWizardPage = class BoardCreateWizardPage extends localize(i18next
         this._attachment = item;
         this._uploadError = undefined;
     }
-    async _onFileChange(e) {
-        const input = e.target;
-        const file = input.files?.[0];
-        if (file)
-            await this._uploadFile(file);
-        // value 초기화 — 같은 파일 재선택 가능
-        input.value = '';
-    }
-    async _onDrop(e) {
-        e.preventDefault();
-        e.currentTarget.classList.remove('dragover');
-        const file = e.dataTransfer?.files?.[0];
-        if (file)
-            await this._uploadFile(file);
-    }
+    /* The picker (ox-input-file) has refused what the server would refuse; what it hands over goes up. */
     async _uploadFile(file) {
+        if (!file || this._uploading)
+            return;
         this._uploading = true;
         this._uploadError = undefined;
         try {
-            const result = await createAttachmentForImport(file);
+            const result = await createAttachmentForImport(file, fraction => (this._uploadProgress = fraction));
             this._attachment = result;
         }
         catch (err) {
@@ -1388,6 +1351,8 @@ let BoardCreateWizardPage = class BoardCreateWizardPage extends localize(i18next
         }
         finally {
             this._uploading = false;
+            this._uploadProgress = undefined;
+            this.renderRoot.querySelector('ox-input-file')?.reset();
         }
     }
     _resetUpload() {
@@ -2061,6 +2026,10 @@ __decorate([
     state(),
     __metadata("design:type", Object)
 ], BoardCreateWizardPage.prototype, "_uploading", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Number)
+], BoardCreateWizardPage.prototype, "_uploadProgress", void 0);
 __decorate([
     state(),
     __metadata("design:type", String)