ide-assi 0.354.0 → 0.356.0

package/dist/components/ideDiff.js

@@ -351,12 +351,13 @@ export class IdeDiff extends HTMLElement {
 		// 먼저 데코레이션 효과를 계산하여 가져옵니다.
 		const { asisEffect, tobeEffect } = this.#applyDiffDecorations(src1, src2);
 
+		console.log(asisEffect, tobeEffect);
 		// asis 에디터의 텍스트 변경 및 데코레이션 효과를 단일 트랜잭션으로 디스패치합니다.
 		this.#asisEditorView.dispatch({
 			changes: { from: 0, to: this.#asisEditorView.state.doc.length, insert: src1 },
 			effects: [
 				this.#languageCompartment.reconfigure(langExtension),
-				//asisEffect // 계산된 데코레이션 효과를 포함
+				asisEffect // 계산된 데코레이션 효과를 포함
 			]
 		});
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ide-assi",
   "type": "module",
-  "version": "0.354.0",
+  "version": "0.356.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {

package/src/components/ideAssi.js

@@ -124,7 +124,7 @@ export class IdeAssi extends HTMLElement
 
 		//setTimeout(() => {
 		const src1 = `
-		import React, { useRef, useEffect } from "react";
+import React, { useRef, useEffect } from "react";
 import { api, ai } from "ide-assi";
 import ninegrid from "ninegrid2";
 
@@ -162,6 +162,9 @@ const DocManager = () => {
   };
 
   const handleClassicSearch = () => {
+    if (!gridRef.current) return;
+    gridRef.current.classList.add("loading");
+
     const form2Element = ninegrid.querySelector(".form2", tabRef.current);
     const params = form2Element ? form2Element.getData() : {};
     selectList(params);
@@ -293,7 +296,7 @@ export default DocManager;
 		`;
 
 		const src2 = `
-		import React, { useRef, useEffect } from 'react';
+import React, { useRef, useEffect } from "react";
 import { api, ai } from "ide-assi";
 import ninegrid from "ninegrid2";
 
@@ -301,72 +304,73 @@ const DocManager = () => {
   const tabRef = useRef(null);
   const gridRef = useRef(null);
 
-  const toCamelCase = (s) => {
-    return s.toLowerCase().replace(/_([a-z])/g, (g) => g[1].toUpperCase());
+  const selectList = async (params) => {
+    if (!gridRef.current) return;
+    gridRef.current.classList.add("loading");
+    api.post(\`/api/tmpl-a/doc-manager/selectList\`, params).then((res) => {
+      gridRef.current.data.source = res.list;
+    });
   };
 
-  const tableDefinitions = JSON.parse(\`{"list":[{"columns":[{"COLUMN_NAME":"doc_id","COLUMN_ID":1,"COLUMN_COMMENT":"문서ID"},{"COLUMN_NAME":"doc_nm","COLUMN_ID":2,"COLUMN_COMMENT":"문서명"},{"COLUMN_NAME":"amt","COLUMN_ID":3,"COLUMN_COMMENT":"매출액"},{"COLUMN_NAME":"insert_user","COLUMN_ID":4,"COLUMN_COMMENT":"최초등록자"},{"COLUMN_NAME":"insert_dt","COLUMN_ID":5,"COLUMN_COMMENT":"최초등록일"},{"COLUMN_NAME":"update_user","COLUMN_ID":6,"COLUMN_COMMENT":"최종수정자"},{"COLUMN_NAME":"update_dt","COLUMN_ID":7,"COLUMN_COMMENT":"최종수정일"}],"table":"t_doc"},{"columns":[{"COLUMN_NAME":"file_id","COLUMN_ID":1,"COLUMN_COMMENT":""},{"COLUMN_NAME":"doc_id","COLUMN_ID":2,"COLUMN_COMMENT":""},{"COLUMN_NAME":"download_cnt","COLUMN_ID":3,"COLUMN_COMMENT":""},{"COLUMN_NAME":"file_nm","COLUMN_ID":4,"COLUMN_COMMENT":""},{"COLUMN_NAME":"file_size","COLUMN_ID":5,"COLUMN_COMMENT":""},{"COLUMN_NAME":"file_contents","COLUMN_ID":6,"COLUMN_COMMENT":""},{"COLUMN_NAME":"insert_user","COLUMN_ID":7,"COLUMN_COMMENT":""},{"COLUMN_NAME":"insert_dt","COLUMN_ID":8,"COLUMN_COMMENT":""}],"table":"t_doc_file"},{"columns":[{"COLUMN_NAME":"file_id","COLUMN_ID":1,"COLUMN_COMMENT":""},{"COLUMN_NAME":"page","COLUMN_ID":2,"COLUMN_COMMENT":""},{"COLUMN_NAME":"text","COLUMN_ID":3,"COLUMN_COMMENT":""},{"COLUMN_NAME":"image","COLUMN_ID":4,"COLUMN_COMMENT":""},{"COLUMN_NAME":"vector_text","COLUMN_ID":5,"COLUMN_COMMENT":""},{"COLUMN_NAME":"vector_image","COLUMN_ID":6,"COLUMN_COMMENT":""}],"table":"t_doc_file_page"}]}\`);
-  const mainTableColumns = tableDefinitions.list[0].columns;
+  const handleNaturalLanguageSearch = async () => {
+    const searchTextElement = ninegrid.querySelector("#searchText", tabRef.current);
+    const searchText = searchTextElement ? searchTextElement.value : "";
 
-  const selectList = async (formData = {}) => {
     if (!gridRef.current) return;
-
     gridRef.current.classList.add("loading");
-    /**
-    const form1Data = ninegrid.querySelector(".form1", tabRef.current).getData();
-    const form2Data = ninegrid.querySelector(".form2", tabRef.current).getData();
-    const formData = { ...form1Data, ...form2Data };
 
-    const formData1 = {
-      "_whereClause": await getWhere(),
+    let params = {};
+    if (searchText) {
+      params = {
+        _whereClause: await ai.generateWhereCause(
+          "tmpla/DocManagerMapper.xml",
+          "selectList",
+          searchText,
+          import.meta.env.VITE_GEMINI_API_KEY
+        ),
+      };
     }
-    console.log(formData1);
-        */
-
-    console.log(formData);
-
-    api.post(\`/api/tmpl-a/doc-manager/selectList\`, formData).then((res) => {
-      gridRef.current.data.source = res.list;
-    });
+    selectList(params);
   };
 
-  const getWhere = async () => {
-   return await ai.generateWhereCause("tmpla/DocManagerMapper.xml", "selectList", ninegrid.querySelector("#searchText", tabRef.current).value, import.meta.env.VITE_GEMINI_API_KEY);
+  const handleClassicSearch = () => {
+    if (!gridRef.current) return;
+    gridRef.current.classList.add("loading");
+
+    const form2Element = ninegrid.querySelector(".form2", tabRef.current);
+    const params = form2Element ? form2Element.getData() : {};
+    selectList(params);
   };
 
   useEffect(() => {
-    selectList();
+    selectList({});
 
-    const searchTextInput = ninegrid.querySelector("#searchText", tabRef.current);
+    const searchTextElement = ninegrid.querySelector("#searchText", tabRef.current);
     const searchButton = ninegrid.querySelector(".search", tabRef.current);
 
-    const handleSearchTextKeydown = (e) => {
-      if (e.key === 'Enter' && !e.isComposing) {
-
-        //getWhere();
-        getWhere().then(res => {
-          selectList({"_whereClause":res});
-        });
+    const handleKeyDown = (e) => {
+      if (e.key === "Enter" && !e.isComposing) {
+        handleNaturalLanguageSearch();
       }
     };
 
-    const handleSearchButtonClick = () => {
-      selectList(ninegrid.querySelector(".form2", tabRef.current).getData());
+    const handleClick = () => {
+      handleClassicSearch();
     };
 
-    if (searchTextInput) {
-      searchTextInput.addEventListener('keydown', handleSearchTextKeydown);
+    if (searchTextElement) {
+      searchTextElement.addEventListener("keydown", handleKeyDown);
     }
     if (searchButton) {
-      searchButton.addEventListener('click', handleSearchButtonClick);
+      searchButton.addEventListener("click", handleClick);
     }
 
     return () => {
-      if (searchTextInput) {
-        searchTextInput.removeEventListener('keydown', handleSearchTextKeydown);
+      if (searchTextElement) {
+        searchTextElement.removeEventListener("keydown", handleKeyDown);
       }
       if (searchButton) {
-        searchButton.removeEventListener('click', handleSearchButtonClick);
+        searchButton.removeEventListener("click", handleClick);
       }
     };
   }, []);
@@ -378,19 +382,21 @@ const DocManager = () => {
         <nx-tab theme="theme-3" ref={tabRef}>
           <nx-tab-page caption="자연어 검색">
             <nx-form className="form1">
-              <input type="text" id="searchText" name="searchText"
-                     placeholder="자연어 검색어를 입력하세요 (ex: 작성자가 홍길동인 데이타를 찾아줘)"/>
+              <input
+                type="text"
+                id="searchText"
+                name="searchText"
+                placeholder="자연어 검색어를 입력하세요 (ex: 작성자가 홍길동인 데이타를 찾아줘)"
+              />
             </nx-form>
           </nx-tab-page>
           <nx-tab-page caption="클래식 검색">
             <nx-form className="form2">
-              <label>문서ID: <input type="text" name="docId"/></label>
-              <label>문서명: <input type="text" name="docNm"/></label>
-              <label>매출액: <input type="number" name="amt"/></label>
-              <label>최초등록자: <input type="text" name="insertUser"/></label>
-              <label>최초등록일: <input type="text" name="insertDt"/></label>
-              <label>최종수정자: <input type="text" name="updateUser"/></label>
-              <label>최종수정일: <input type="text" name="updateDt"/></label>
+              <label>문서명: <input type="text" name="docNm" /></label>
+              <label>매출액:
+                <input type="number" name="minAmt" placeholder="최소" /> ~
+                <input type="number" name="maxAmt" placeholder="최대" />
+              </label>
             </nx-form>
             <button className="search">검색</button>
           </nx-tab-page>
@@ -398,37 +404,56 @@ const DocManager = () => {
 
         <div className="grid-wrapper">
           <nine-grid
-             ref={gridRef}
-             caption="문서관리"
-             select-type="row"
-             show-title-bar="true"
-             show-menu-icon="true"
-             show-status-bar="true"
-             enable-fixed-col="true"
-             row-resizable="false"
-             col-movable="true"
-           >
+            ref={gridRef}
+            caption="매출 문서 관리"
+            select-type="row"
+            show-title-bar="true"
+            show-menu-icon="true"
+            show-status-bar="true"
+            enable-fixed-col="true"
+            row-resizable="false"
+            col-movable="true"
+          >
             <table>
               <colgroup>
-                <col width="50" fixed="left" background-color="gray"/>
-                {mainTableColumns.map((col) => (
-                  <col key={col.COLUMN_ID} width="150"/>
-                ))}
+                <col width="50" fixed="left" background-color="gray" />
+                <col width="100" />
+                <col width="120" />
+                <col width="100" />
+                <col width="200" />
+                <col width="100" />
+                <col width="150" />
+                <col width="150" />
               </colgroup>
               <thead>
                 <tr>
                   <th>No.</th>
-                  {mainTableColumns.map((col) => (
-                    <th key={col.COLUMN_ID}>{col.COLUMN_COMMENT || col.COLUMN_NAME}</th>
-                  ))}
+                  <th>문서ID</th>
+                  <th>매출액</th>
+                  <th>최종수정자</th>
+                  <th>문서명</th>
+                  <th>최초등록자</th>
+                  <th>최초등록일</th>
+                  <th>최종수정일</th>
                 </tr>
               </thead>
               <tbody>
                 <tr>
-                  <th><ng-row-indicator/></th>
-                  {mainTableColumns.map((col) => (
-                    <td key={col.COLUMN_ID} data-bind={toCamelCase(col.COLUMN_NAME)}></td>
-                  ))}
+                  <th><ng-row-indicator /></th>
+                  <td data-bind="docId" text-align="center"></td>
+                  <td
+                    data-bind="amt"
+                    data-expr="data.amt.toLocaleString()"
+                    text-align="right"
+                    show-icon="true"
+                    icon-type="sphere"
+                    icon-color="data.amt >= 2000 ? 'red' : 'gray'"
+                  ></td>
+                  <td data-bind="updateUser" text-align="center"></td>
+                  <td data-bind="docNm" text-align="left"></td>
+                  <td data-bind="insertUser" text-align="center"></td>
+                  <td data-bind="insertDt" text-align="center"></td>
+                  <td data-bind="updateDt" text-align="center"></td>
                 </tr>
               </tbody>
             </table>
@@ -442,9 +467,9 @@ const DocManager = () => {
 export default DocManager;
 		`;
 
-		//this.shadowRoot.querySelector("ide-diff-popup").popup(src1, src2);
+		this.shadowRoot.querySelector("ide-diff-popup").popup(src1, src2);
 
-		//return;
+		return;
 
 		const apply = {
 			mybatis: this.shadowRoot.querySelector("#mybatis").checked,

package/src/components/ideDiff.js

@@ -351,12 +351,13 @@ export class IdeDiff extends HTMLElement {
 		// 먼저 데코레이션 효과를 계산하여 가져옵니다.
 		const { asisEffect, tobeEffect } = this.#applyDiffDecorations(src1, src2);
 
+		console.log(asisEffect, tobeEffect);
 		// asis 에디터의 텍스트 변경 및 데코레이션 효과를 단일 트랜잭션으로 디스패치합니다.
 		this.#asisEditorView.dispatch({
 			changes: { from: 0, to: this.#asisEditorView.state.doc.length, insert: src1 },
 			effects: [
 				this.#languageCompartment.reconfigure(langExtension),
-				//asisEffect // 계산된 데코레이션 효과를 포함
+				asisEffect // 계산된 데코레이션 효과를 포함
 			]
 		});