[#1624] Grid, TreeGrid > 고정 텍스트에 대한 옵션 추가 (#1625)

############################# Co-authored-by: jiyoung.oh <jiyoung.oh@ex-em.com>
ex-em · Mar 4, 2024 · d8711c2 · d8711c2
1 parent dc8ebc1
commit d8711c2
Show file tree

Hide file tree

Showing 7 changed files with 59 additions and 13 deletions.
diff --git a/docs/views/grid/api/grid.md b/docs/views/grid/api/grid.md
@@ -61,6 +61,11 @@
 |  |  | descending | 내림차순 정렬 | Boolean |
 |  |  | filter | 필터 기능 | Boolean |
 |  |  | hide | 컬럼 숨김 | Boolean |
+|  | columnMenuText | {} | 그리드 헤더 클릭시 보여지는 컨텍스트 메뉴 각 아이템의 텍스트를 설정한다. |  |
+|  |  | ascending | Default: 'Ascending' | String |
+|  |  | descending | Default: 'Descending' | String |
+|  |  | filter | Default: 'Filter' | String |
+|  |  | hide | Default: 'Hide' | String |
 |  | page | {} | 페이지 설정 |  |
 |  |  | use | 페이지 사용 여부 | Boolean |
 |  |  | isInfinite | Infinite Scroll 사용 여부 | Boolean |
@@ -77,6 +82,11 @@
 |  | useGridSetting | {} | 그리드 옵션 설정  | |
 |  |  | use | 그리드 옵션 설정 사용 여부 | Boolean |
 |  |  | customContextMenu | 그리드옵션 클릭시 보여지는 컨텍스트 메뉴를 설정한다. |  |
+|  |  | columnMenuText | 컬럼 설정 메뉴의 텍스트를 설정한다.(Default: 'Column List') | String |
+|  |  | searchText | 컬럼 설정창 검색 영역의 placeholder 텍스트를 설정한다. (Default: 'Search') | String |
+|  |  | emptyText | 컬럼 설정창에 데이터가 없는 경우 표시되는 텍스트를 설정한다. (Default: 'No records') | String |
+|  |  | okBtnText | 컬럼 설정 완료 버튼의 텍스트를 설정한다. (Default: 'OK') | String |
+|  | emptyText | 'No records' | 데이터가 없는 경우 표시되는 텍스트를 설정한다. | String |
 
 ### Columns
 | 이름 | 타입 | 설명 | 종류 | 필수 |

diff --git a/docs/views/treeGrid/api/treeGrid.md b/docs/views/treeGrid/api/treeGrid.md
@@ -83,10 +83,17 @@
 |  | useGridSetting | {} | 그리드 옵션 설정  | |
 |  |  | use | 그리드 옵션 설정 사용 여부 | Boolean |
 |  |  | customContextMenu | 그리드옵션 클릭시 보여지는 컨텍스트 메뉴를 설정한다. |  |
+|  |  | columnMenuText | 컬럼 설정 메뉴의 텍스트를 설정한다.(Default: 'Column List') | String |
+|  |  | searchText | 컬럼 설정창 검색 영역의 placeholder 텍스트를 설정한다. (Default: 'Search') | String |
+|  |  | emptyText | 컬럼 설정창에 데이터가 없는 경우 표시되는 텍스트를 설정한다. (Default: 'No records') | String |
+|  |  | okBtnText | 컬럼 설정 완료 버튼의 텍스트를 설정한다. (Default: 'OK') | String |
+|  | columnMenuText | {} | 그리드 헤더 클릭시 보여지는 컨텍스트 메뉴 각 아이템의 텍스트를 설정한다. |  |
+|  |  | hide | Default: 'Hide' | String |
 |  | expandIcon       | 'tree-expand-icon' | expand 상태인 노드의 아이콘                      | `ev-icon`                |
 |  | collapseIcon     | 'tree-expand-icon' | collapse 상태인 노드의 아이콘                    | `ev-icon`                |
 |  | parentIcon       | 'tree-parent-icon' | 자식 노드가 있는 노드의 아이콘                       | `ev-icon`, 'none'        |
 |  | childIcon        | 'tree-child-icon'  | 자식 노드가 없는 노드의 아이콘                       | `ev-icon`, 'none'        |
+|  | emptyText | 'No records' | 데이터가 없는 경우 표시되는 텍스트를 설정한다. | String |
 
 ### Columns
 | 이름              | 타입      | 설명                                                 | 종류                                               | 필수 |

diff --git a/src/components/grid/Grid.vue b/src/components/grid/Grid.vue
@@ -497,7 +497,7 @@
               </tr>
             </template>
             <tr v-if="!viewStore.length">
-              <td class="is-empty">No records</td>
+              <td class="is-empty">{{ emptyText }}</td>
             </tr>
           </tbody>
         </table>
@@ -567,6 +567,7 @@
     :columns="$props.columns"
     :hidden-column="hiddenColumn"
     :position="columnSettingPosition"
+    :text-info="columnSettingTextInfo"
     @apply-column="onApplyColumn"
   />
 </template>
@@ -694,6 +695,7 @@ export default {
     const stripeStyle = computed(() => (props.option.style?.stripe || false));
     const borderStyle = computed(() => (props.option.style?.border || ''));
     const highlightIdx = computed(() => (props.option.style?.highlight ?? -1));
+    const emptyText = computed(() => (props.option.emptyText ?? 'No records'));
     const rowMinHeight = props.option.rowMinHeight || 35;
     const filteringItemsWidth = ref(0);
     const elementInfo = reactive({
@@ -726,6 +728,12 @@ export default {
         left: 0,
         columnListMenuWidth: 0,
       },
+      columnSettingTextInfo: {
+        columnList: props.option?.useGridSetting?.columnMenuText ?? 'Column List',
+        search: props.option?.useGridSetting?.searchText ?? 'Search',
+        empty: props.option?.useGridSetting?.emptyText ?? 'No records',
+        ok: props.option?.useGridSetting?.okBtnText ?? 'OK',
+      },
     });
     const stores = reactive({
       viewStore: [],
@@ -802,6 +810,7 @@ export default {
       contextMenuItems: [],
       columnMenu: null,
       columnMenuItems: [],
+      columnMenuTextInfo: props.option.columnMenuText || {},
       hiddenColumnMenuItem: props.option.hiddenColumnMenuItem || {},
       customContextMenu: props.option.customContextMenu || [],
       gridSettingMenu: null,
@@ -1366,6 +1375,7 @@ export default {
       useGridSetting,
       toolbarRef,
       stores,
+      emptyText,
       ...toRefs(elementInfo),
       ...toRefs(stores),
       ...toRefs(filterInfo),

diff --git a/src/components/grid/GridColumnSetting.vue b/src/components/grid/GridColumnSetting.vue
@@ -8,11 +8,11 @@
         :style="columnSettingStyle"
       >
         <div class="ev-grid-column-setting__header">
-          <p class="header-title"> Column List </p>
+          <p class="header-title"> {{ textInfo.columnList }} </p>
           <ev-text-field
             v-model="searchVm"
             type="search"
-            placeholder="Search"
+            :placeholder="textInfo.search"
             @input="onSearchColumn"
           />
         </div>
@@ -31,7 +31,7 @@
             </ev-checkbox-group>
           </template>
           <template v-else>
-            <p class="is-empty"> No records </p>
+            <p class="is-empty"> {{ textInfo.empty }} </p>
           </template>
         </div>
         <div class="ev-grid-column-setting__footer">
@@ -40,7 +40,7 @@
             :disabled="isDisabled"
             @click="onApplyColumn"
           >
-            OK
+            {{ textInfo.ok }}
           </ev-button>
         </div>
       </section>
@@ -89,6 +89,15 @@ export default {
       type: Boolean,
       default: false,
     },
+    textInfo: {
+      type: Object,
+      default: () => ({
+        columnList: 'Column List',
+        search: 'Search',
+        empty: 'No records',
+        ok: 'OK',
+      }),
+    },
   },
   emits: {
     'update:isShow': [Boolean],

diff --git a/src/components/grid/uses.js b/src/components/grid/uses.js
@@ -1021,21 +1021,21 @@ export const contextMenuEvent = (params) => {
       && column.filterable === undefined ? true : column.filterable;
       const columnMenuItems = [
         {
-          text: 'Ascending',
+          text: contextInfo.columnMenuTextInfo?.ascending ?? 'Ascending',
           iconClass: 'ev-icon-allow2-up',
           disabled: !sortable,
           hidden: contextInfo.hiddenColumnMenuItem?.ascending,
           click: () => onSort(column, 'asc'),
         },
         {
-          text: 'Descending',
+          text: contextInfo.columnMenuTextInfo?.descending ?? 'Descending',
           iconClass: 'ev-icon-allow2-down',
           disabled: !sortable,
           hidden: contextInfo.hiddenColumnMenuItem?.descending,
           click: () => onSort(column, 'desc'),
         },
         {
-          text: 'Filter',
+          text: contextInfo.columnMenuTextInfo?.filter ?? 'Filter',
           iconClass: 'ev-icon-filter-list',
           click: () => {
             const docWidth = document.documentElement.clientWidth;
@@ -1057,7 +1057,7 @@ export const contextMenuEvent = (params) => {
           hidden: contextInfo.hiddenColumnMenuItem?.filter,
         },
         {
-          text: 'Hide',
+          text: contextInfo.columnMenuTextInfo?.hide ?? 'Hide',
           iconClass: 'ev-icon-visibility-off',
           disabled: !useGridSetting.value || stores.orderedColumns.length === 1,
           hidden: contextInfo.hiddenColumnMenuItem?.hide,
@@ -1078,7 +1078,7 @@ export const contextMenuEvent = (params) => {
    */
   const onGridSettingContextMenu = (e) => {
     const columnListMenu = {
-      text: 'Column List',
+      text: columnSettingInfo.columnSettingTextInfo?.columnList ?? 'Column List',
       isShowMenu: true,
       click: () => {
         columnSettingInfo.isShowColumnSetting = true;

diff --git a/src/components/treeGrid/TreeGrid.vue b/src/components/treeGrid/TreeGrid.vue
@@ -178,7 +178,7 @@
               </template>
             </tree-grid-node>
             <tr v-if="!viewStore.length">
-              <td class="is-empty">No records</td>
+              <td class="is-empty">{{ emptyText }}</td>
             </tr>
           </tbody>
         </table>
@@ -241,6 +241,7 @@
     :columns="$props.columns"
     :hidden-column="hiddenColumn"
     :position="columnSettingPosition"
+    :text-info="columnSettingTextInfo"
     @apply-column="onApplyColumn"
   />
 </template>
@@ -339,6 +340,7 @@ export default {
     const toolbarRef = ref(null);
     const useGridSetting = computed(() => (props.option?.useGridSetting?.use || false));
     const useSummary = computed(() => (props.option?.useSummary || false));
+    const emptyText = computed(() => (props.option.emptyText ?? 'No records'));
     const elementInfo = reactive({
       body: null,
       header: null,
@@ -360,6 +362,12 @@ export default {
         left: 0,
         columnListMenuWidth: 0,
       },
+      columnSettingTextInfo: {
+        columnList: props.option?.useGridSetting?.columnMenuText ?? 'Column List',
+        search: props.option?.useGridSetting?.searchText ?? 'Search',
+        empty: props.option?.useGridSetting?.emptyText ?? 'No records',
+        ok: props.option?.useGridSetting?.okBtnText ?? 'OK',
+      },
     });
     const stores = reactive({
       treeStore: [],
@@ -432,6 +440,7 @@ export default {
       contextMenuItems: [],
       columnMenu: null,
       columnMenuItems: [],
+      columnMenuTextInfo: props.option.columnMenuText || {},
       customContextMenu: props.option.customContextMenu || [],
       gridSettingMenu: null,
       gridSettingContextMenuItems: [],
@@ -886,6 +895,7 @@ export default {
       useGridSetting,
       toolbarRef,
       stores,
+      emptyText,
       ...toRefs(styleInfo),
       ...toRefs(elementInfo),
       ...toRefs(stores),

diff --git a/src/components/treeGrid/uses.js b/src/components/treeGrid/uses.js
@@ -610,7 +610,7 @@ export const contextMenuEvent = (params) => {
     if (event.target.className.includes('column-name--click')) {
       contextInfo.columnMenuItems = [
         {
-          text: 'Hide',
+          text: contextInfo.columnMenuTextInfo?.hide ?? 'Hide',
           iconClass: 'ev-icon-visibility-off',
           disabled: !useGridSetting.value || stores.orderedColumns.length === 1,
           click: () => setColumnHidden(column.field),
@@ -648,7 +648,7 @@ export const contextMenuEvent = (params) => {
    */
   const onGridSettingContextMenu = (e) => {
     const columnListMenu = {
-      text: 'Column List',
+      text: columnSettingInfo.columnSettingTextInfo?.columnList ?? 'Column List',
       isShowMenu: true,
       click: () => {
         columnSettingInfo.isShowColumnSetting = true;