@things-factory/meta-ui 8.0.0-beta.8 → 8.0.0

package/client/utils/service-util.js

@@ -0,0 +1,1327 @@
+import gql from 'graphql-tag'
+
+import { asyncReplace } from 'lit/directives/async-replace.js'
+
+import { store } from '@operato/shell'
+import { getCodeByName } from '@things-factory/code-base'
+import { EXPORT } from '@things-factory/export-base'
+import { gqlBuilder } from '@things-factory/utils'
+import { generateActivitySummary, startSubscribeActivitySummary } from '@things-factory/worklist'
+
+import { client } from '@operato/graphql'
+
+import { TermsUtil } from './terms-util'
+import { UiUtil } from './ui-util'
+import { ValueUtil } from './value-util'
+
+/**
+ * @license
+ * Copyright © HatioLab Inc. All rights reserved.
+ * @author Shortstop <shortstop@hatiolab.com>
+ * @description 서버 측 서비스 핸들링 유틸리티 함수 정의
+ */
+export class ServiceUtil {
+  /**
+   * @description 공통 코드 명으로 공통 코드 리스트 조회 후 리턴
+   *****************************************************
+   * @param {String, Array} codeSet 공통 코드 명 또는 표현될 Array
+   * @returns {Array} 코드 리스트
+   */
+  static async codeItems(codeSet) {
+    // CodeSet 이 Array 일때 (설정 값을 셀렉터로 변환)
+    if (Array.isArray(codeSet)) {
+      let codes = codeSet.map(codeValue => {
+        if (typeof codeValue === 'object') {
+          return { name: codeValue.value, description: codeValue.display }
+        } else {
+          return { name: codeValue, description: codeValue }
+        }
+      })
+
+      return codes
+    }
+
+    // codeSet이 문자이면 코드 조회
+    return await getCodeByName(codeSet)
+  }
+
+  /**
+   * @description code selector 에디터를 위한 공통 코드 조회
+   *****************************************************
+   * @param {String, Array} codeSet 공통 코드 명 또는 표현될 Array
+   * @returns {Array} 설정값 클리어를 위해 빈 값이 추가된 코드 리스트
+   */
+  static async getCodeSelectorData(codeSet) {
+    let codeItems = await ServiceUtil.codeItems(codeSet)
+    let codeSelectors = codeItems.map(c => {
+      return {
+        value: c.name,
+        display: c.description
+      }
+    })
+    codeSelectors.unshift({ value: '', display: '' })
+    return codeSelectors
+  }
+
+  /**
+   * 시나리오를 호출해 코드 정보를 가져온다.
+   *********************************
+   * @description 시나리오에서는 name, description 필드를 리턴해 줘야 한다.
+   * @param {String} scenarioName
+   * @param {Array} variables
+   */
+  static async getCodeByScenario(scenarioName, variables) {
+    let response = await ServiceUtil.callScenario(null, scenarioName, variables, false)
+    if (
+      response &&
+      response.data &&
+      response.data.runScenario &&
+      response.data.runScenario.result &&
+      response.data.runScenario.result.result
+    ) {
+      let codes = response.data.runScenario.result.result
+      codes.unshift({ value: '', display: '' })
+      return codes.map(x => {
+        return {
+          value: x.name,
+          display: x.description
+        }
+      })
+    } else {
+      return []
+    }
+  }
+
+  /**
+   * 엔티티 쿼리를 호출해 코드 정보를 가져온다.
+   ***********************************
+   * @description
+   * @param {Object} variables
+   */
+  static async getCodeByEntity({ queryName = undefined, codeField = 'name', dispField, filters = [], sorters = [] }) {
+    let dispFields = dispField.split(',')
+
+    let selectFields = `
+      ${codeField}
+      ${dispField ? dispFields.join('\n') : ''}
+    `
+
+    let result = await ServiceUtil.searchByPagination(queryName, filters, sorters, 0, 0, selectFields)
+    let codes = [{ value: '', display: '' }]
+
+    result.records.forEach(x => {
+      let disp = x[codeField]
+
+      if (dispField) {
+        let fields = dispField.split(',')
+        disp = x[fields[0]]
+
+        if (fields.length > 1) {
+          disp += `(${fields
+            .splice(1)
+            .map(field => {
+              return x[field]
+            })
+            .join(',')})`
+        }
+      }
+
+      codes.push({
+        value: x[codeField],
+        display: disp
+      })
+    })
+
+    return codes
+  }
+
+  /**
+   * @description 확장 속성 옵션 정보를 리턴
+   *************************************
+   * @param {String} entityName
+   * @return {Object}
+   */
+  static async getAttributeSetOptionFor(entityName) {
+    return {
+      objectified: true,
+      attributeSet: await ServiceUtil.getAttributeSetFor(entityName)
+    }
+  }
+
+  /**
+   * @description 확장 속성 메타 정보를 조회
+   *************************************
+   * @param {String} entityName
+   * @return {Object}
+   */
+  static async getAttributeSetFor(entityName) {
+    const response = await client.query({
+      query: gql`
+        query {
+          attributeSet: attributeSetByEntity(entity: "${entityName}") {
+            entity
+            description
+            items {
+              name
+              description
+              tag
+              type
+              active
+              hidden
+              options
+            }
+          }
+        }
+      `
+    })
+
+    return response.data?.attributeSet || {}
+  }
+
+  /**
+   * @description 현재 사용자의 권한에 맞는 메뉴 정보 요청
+   ***********************************************
+   * @returns {Array} 메뉴 바에 표시될 메뉴 리스트
+   */
+  static async myDynamicMenus() {
+    let menuItems = await ServiceUtil.searchMyDynamicMenus()
+    return menuItems != null ? ServiceUtil.arrangeMenuRoutes(menuItems) : null
+  }
+
+  /**
+   * @description 메뉴 틀에 맞게 재 배치
+   **************************************
+   * @param {Array} menuData 메뉴 정보에서 조회한 메뉴 리스트
+   * @returns {Object} 메뉴 바 틀에 맞게 재 배치된 메뉴 & 라우팅 정보
+   */
+  static arrangeMenuRoutes(resMenuData) {
+    let menuData = []
+
+    /**
+     * name : 메뉴 명 (DynamicMenu)
+     * category : 태그 명 (dynamic-menu)
+     * routing : 라우팅 (dynamic_menu)
+     * resourceUrl : 페이지 위치 (./pages/menu/dynamic-menu)
+     */
+    resMenuData.forEach(item => {
+      menuData.push(item)
+
+      if (item.children) {
+        item.children.sort(function (a, b) {
+          return a.rank - b.rank
+        })
+
+        item.children.forEach(subItem => {
+          if (subItem.hiddenFlag != true) {
+            subItem.parent = item
+            menuData.push(subItem)
+          }
+        })
+      }
+    })
+
+    // 1. 서버에서 조회한 메뉴 정보 중에 메인 메뉴를 추출
+    let mainMenus = menuData
+      .map(item => {
+        if (item.menuType == 'GROUP' || item.menuType == 'MENU') {
+          let pMenu = {
+            id: item.id,
+            parent: true,
+            name: TermsUtil.tMenu(item.name),
+            icon: item.iconPath,
+            type: item.menuType == 'GROUP' ? 'group' : '',
+            menus: []
+          }
+
+          if (item.routing) {
+            pMenu.path = item.routing
+          }
+
+          return pMenu
+        } else {
+          return { id: '0' }
+        }
+      })
+      .filter(i => i.id != '0')
+
+    // 2. 메인 메뉴 하위에 서브 메뉴를 추가
+    let routes = menuData
+      .map(item => {
+        if (item.menuType == 'SCREEN' || item.menuType == 'HIDDEN-PAGE') {
+          // 2.1 메뉴가 SCREEN 유형이라면 자신의 부모 메뉴를 찾아서
+          let parentMenu = mainMenus.find(main => main.id == item.parent.id)
+          if (parentMenu) {
+            let title = TermsUtil.tMenu(item.name)
+
+            // 2.2 좌측 메뉴에 표시되도록 부모 메뉴의 하위 메뉴로 추가하여 메뉴 트리 구성
+            if (item.menuType == 'SCREEN') {
+              parentMenu.menus.push({
+                id: item.id,
+                name: title,
+                path: item.routing,
+                icon: item.iconPath
+              })
+            }
+
+            // 2.3 애플리케이션 라우팅 정보를 모아 routes 정보로 사용
+            return {
+              id: item.id,
+              parent: false,
+              parent_id: parentMenu.id,
+              title: title,
+              tagname: item.category,
+              page: item.routing,
+              template: item.resourceUrl,
+              routing_type: item.routingType
+            }
+          } else {
+            return { id: '0' }
+          }
+        } else if (item.menuType == 'HOME') {
+          return {
+            id: item.id,
+            parent: true,
+            parent_id: null,
+            title: TermsUtil.tMenu(item.name),
+            tagname: item.category,
+            page: item.routing,
+            template: item.resourceUrl,
+            routing_type: item.routingType
+          }
+        } else {
+          return { id: '0' }
+        }
+      })
+      .filter(i => i != undefined && i.id != '0')
+
+    // 3. 메뉴 그룹 하위에 해당 하는 페이지 정렬
+    mainMenus
+      .filter(x => x.type == 'group' && x.menus && x.menus.length > 0)
+      .forEach(groupMenu => {
+        let groupIdx = mainMenus.findIndex(m => m.id == groupMenu.id) + 1
+        mainMenus.splice(groupIdx, 0, ...groupMenu.menus)
+      })
+
+    // 4. 업무, 결재 관련 메뉴 확인 및 badge 등록
+    let badgeCnt = 0
+    mainMenus.forEach(menu => {
+      if (menu.path == 'todo-list') {
+        // 내 업무함
+        badgeCnt++
+        menu.badge = () => asyncReplace(generateActivitySummary('numberOfToDos'))
+        menu.active = ({ path }) => /^activity\//.test(path)
+      } else if (menu.path == 'approval-pending-list') {
+        // 내 결재함
+        badgeCnt++
+        menu.badge = () => asyncReplace(generateActivitySummary('numberOfApprovalPendings'))
+        menu.active = ({ path }) => /^activity\//.test(path)
+      } else if (menu.path == 'draft-list') {
+        // 작성 중 업무
+        badgeCnt++
+        menu.badge = () => asyncReplace(generateActivitySummary('numberOfDrafts'))
+      }
+    })
+
+    if (badgeCnt > 0) {
+      startSubscribeActivitySummary()
+    }
+
+    // 5. 메뉴 데이터 리턴
+    return { menus: mainMenus, routes: routes }
+  }
+
+  /**
+   * @description 현재 사용자의 권한에 맞는 메뉴 정보 요청
+   ***********************************************
+   * @returns {Array} 메뉴 바에 표시될 메뉴 리스트
+   */
+  static async searchMyDynamicMenus() {
+    const response = await client.query({
+      query: gql`
+        query MyMenus($sortings: [Sorting!], $filters: [Filter!]) {
+          myMenus(sortings: $sortings, filters: $filters) {
+            items {
+              id
+              parent {
+                id
+                name
+              }
+              children(permittedOnly: true) {
+                id
+                name
+                description
+                menuType
+                category
+                routingType
+                routing
+                resourceUrl
+                iconPath
+                hiddenFlag
+                rank
+              }
+              name
+              description
+              menuType
+              category
+              routingType
+              routing
+              resourceUrl
+              iconPath
+            }
+            total
+          }
+        }
+      `,
+      variables: {
+        filters: [
+          {
+            name: 'hiddenFlag',
+            operator: 'noteq',
+            value: true
+          },
+          {
+            // name: 'menuType', operator: 'in', value: ['HOME', 'MENU', 'GROUP', 'SCREEN', 'HIDDEN-PAGE']
+            name: 'menuType',
+            operator: 'in',
+            value: ['HOME', 'MENU', 'GROUP']
+          }
+        ],
+        sortings: [{ name: 'rank' }]
+      }
+    })
+
+    return response.data?.myMenus.items || []
+  }
+
+  /**
+   * @description 응답이 처리된 후 Graphql Error 메시지 표시
+   ****************************************************
+   * @param {Object} response 응답
+   */
+  static async showGraphqlErrorResponse(response) {
+    if (response.errors && response.errors.length > 0) {
+      let error = response.errors[0]
+      let errContent = error.message
+      let errTitle = error.message
+
+      if (error.extensions) {
+        let errExt = error.extensions
+        errTitle = errExt.code
+      }
+
+      await UiUtil.showAlertPopup(errTitle, errContent, 'error', 'confirm')
+    }
+  }
+
+  /**
+   * @description Graphql 실행 시 Exception 표시
+   ********************************************
+   * @param {Object} exception graphql 에러
+   */
+  static async showGraphqlException(exception) {
+    if (exception) {
+      if (exception.networkError && exception.networkError.result) {
+        await ServiceUtil.showGraphqlErrorResponse(exception.networkError.result)
+      } else {
+        await UiUtil.showAlertPopup('Graphql Error', exception.message, 'error', 'confirm')
+      }
+    }
+  }
+
+  /**
+   * @description 그리드 데이터 내보내기
+   *********************************
+   * @param {Boolean} isElement 팝업으로 실행 중인지 여부
+   * @param {String} exportTitle 그리드 내보내기 용 타이틀
+   * @param {Grist} grist 그리드 오브젝트
+   * @returns {Object} { header: headerSetting, data: data } or Not
+   */
+  static async exportableData(isElement, exportTitle, grist) {
+    // 1. 헤더 설정
+    var headerSetting = grist._config.columns
+      .filter(
+        column =>
+          column.type !== 'gutter' && column.record !== undefined && column.imex !== undefined && column.hidden !== true
+      )
+      .map(column => {
+        return column.imex
+      })
+
+    // 2. 그리드에 표시된 데이터 추출
+    let records = grist.data.records
+    var data = records.map(item => {
+      return {
+        ...grist._config.columns
+          .filter(
+            column =>
+              column.type !== 'gutter' &&
+              column.record !== undefined &&
+              column.imex !== undefined &&
+              column.hidden !== true
+          )
+          .reduce((record, column) => {
+            record[column.imex.key] = column.imex.key.split('.').reduce((obj, key) => {
+              const val = obj && obj[key] !== 'undefined' ? obj[key] : undefined
+
+              if (column.type == 'select') {
+                return column?.record?.options?.find(option => option.value == val)?.display
+              } else if (column.type.includes('object')) {
+                return val?.name
+              }
+
+              return val
+            }, item)
+            return record
+          }, {})
+      }
+    })
+
+    // element로 호출된 경우 리턴 없이 바로 xlsx 내보내기
+    if (isElement) {
+      store.dispatch({
+        type: EXPORT,
+        exportable: {
+          extension: 'xlsx',
+          name: exportTitle,
+          data: { header: headerSetting, data: data }
+        }
+      })
+    } else {
+      return { header: headerSetting, data: data }
+    }
+  }
+
+  /**
+   * @description 서버 사이드를 거쳐 그리드 데이터 내보내기
+   ************************************************
+   * @param {String} exportFileName 그리드 내보내기 용 타이틀 (파일명)
+   * @param {String} exportQueryName 서버 사이드 GraphQL 쿼리명
+   * @param {Object} filterParam 필터용 파라미터
+   * @returns {Object} { header: headerSetting, data: data } or Not
+   */
+  static async exportableDataByServer(exportFileName, exportQueryName, filterParam) {
+    // 1. 내보내기 graphQL 요청
+    const response = await client.query({
+      query: gql`
+        query Query($filters: [Filter!]!) {
+          responses: ${exportQueryName}(filters: $filters)
+        }
+      `,
+      variables: {
+        filters: filterParam
+      }
+    })
+
+    // 2. 응답 처리
+    const data = response.data.responses
+    const bufferData = Buffer.from(data, 'base64')
+    const blob = new Blob([bufferData], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' })
+
+    const a = document.createElement('a')
+    a.href = window.URL.createObjectURL(blob)
+    a.download = `${exportFileName}.xlsx`
+    document.body.appendChild(a)
+    a.click()
+    a.remove()
+  }
+
+  /**
+   * @description 데이터 리스트 페이지네이션 조회
+   ****************************************
+   * @param {String} queryFunc 쿼리 함수
+   * @param {Array} filters 조회 조건
+   * @param {Array} sortings 소팅 조건
+   * @param {Number|undefined} page 현재 페이지
+   * @param {Number} limit 페이지 당 표시할 레코드 건수
+   * @param {String} selectFields 조회할 필드 리스트
+   * @returns {Array} 조회 결과 { records : [{...}], total : 100 }
+   */
+  static async searchByPagination(queryFunc, filters, sortings, page = 1, limit, selectFields) {
+    try {
+      const response = await client.query({
+        query: gql`
+          query ($filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!]) {
+            ${queryFunc}(filters: $filters, pagination: $pagination, sortings: $sortings) {
+              items {
+                ${selectFields}
+              }
+              total
+            }
+          }
+        `,
+        variables: { filters, sortings, pagination: { page, limit } }
+      })
+
+      if (!response.errors) {
+        return {
+          records: response.data[queryFunc].items,
+          total: response.data[queryFunc].total
+        }
+      } else {
+        ServiceUtil.showGraphqlErrorResponse(response)
+      }
+    } catch (e) {
+      ServiceUtil.showGraphqlException(e)
+    }
+
+    return null
+  }
+
+  /**
+   * @description 레코드의 id를 이용해 데이터 한 건 조회
+   **********************************************
+   * @param {String} queryFunc 조회할 query 함수명
+   * @param {String} id 레코드 ID
+   * @param {String} selectFields 조회할 필드 리스트
+   * @return {Object} 조회한 레코드
+   */
+  static async findOne(queryFunc, id, selectFields) {
+    try {
+      let response = await client.query({
+        query: gql`
+          query ($id: String!) {
+            ${queryFunc}(id: $id) {
+              ${selectFields}
+            }
+          }
+        `,
+        variables: { id: id }
+      })
+
+      if (!response.errors) {
+        return response.data[queryFunc] || {}
+      } else {
+        ServiceUtil.showGraphqlErrorResponse(response)
+      }
+    } catch (e) {
+      ServiceUtil.showGraphqlException(e)
+    }
+
+    return null
+  }
+
+  /**
+   * @description 필터 정보를 이용해 데이터 한 건 조회
+   *********************************************
+   * @param {String} queryFunc 조회할 query 함수명
+   * @param {String} selectFields 조회할 필드 리스트
+   * @param {Array} filters 필터
+   * @return {Object} 조회한 레코드
+   */
+  static async findByFilters(queryFunc, selectFields, filters) {
+    try {
+      const response = await client.query({
+        query: gql`
+          query ($filters: [Filter!]) {
+            ${queryFunc}(filters: $filters) {
+              ${selectFields}
+            }
+          }
+        `,
+        variables: { filters }
+      })
+
+      if (!response.errors) {
+        return response.data[queryFunc] || {}
+      } else {
+        ServiceUtil.showGraphqlErrorResponse(response)
+      }
+    } catch (e) {
+      ServiceUtil.showGraphqlException(e)
+    }
+
+    return null
+  }
+
+  /**
+   * @description 필터 정보를 이용해 데이터 한 건 조회
+   *********************************************
+   * @param {String} queryFunc 조회할 query 함수명
+   * @param {String} selectFields 조회할 필드 리스트
+   * @param {Array} filters 필터
+   * @return {Object} 조회한 레코드
+   */
+  static async searchByFilters(queryFunc, selectFields, filters) {
+    try {
+      const response = await client.query({
+        query: gql`
+          query ($filters: [Filter!], $sortings: [Sorting!]) {
+            ${queryFunc}(filters: $filters, sortings: $sortings) {
+              items {
+                ${selectFields}
+              }
+            }
+          }
+        `,
+        variables: { filters }
+      })
+
+      if (!response.errors) {
+        return response.data[queryFunc].items || []
+      } else {
+        ServiceUtil.showGraphqlErrorResponse(response)
+      }
+    } catch (e) {
+      ServiceUtil.showGraphqlException(e)
+    }
+
+    return null
+  }
+
+  /**
+   * @description 그리드에서 선택된 행의 ID 리턴
+   ****************************************
+   * @param {Object} grist 그리스트
+   * @param {Boolean} alertWhenEmpty 선택된 행이 없는 경우 팝업을 실행할 것인지 여부
+   * @returns {Array} 선택 ID 리스트
+   */
+  static getSelectedIdList(grist, alertWhenEmpty) {
+    const ids = grist.selected.map(record => record.id)
+
+    if (ValueUtil.isEmpty(ids) && alertWhenEmpty == true) {
+      UiUtil.showAlertPopup('text.nothing_selected', 'text.there_is_nothing_to_delete', 'info', 'confirm')
+    }
+
+    return ids
+  }
+
+  /**
+   * @description 그리스트의 선택된 레코드 삭제 처리
+   ******************************************
+   * @param {Object} grist 그리스트
+   * @param {Object} mutationFunc 삭제 처리할 함수 명
+   * @returns {Boolean} 삭제 성공 여부
+   */
+  static async deleteListByGristSelected(grist, mutationFunc) {
+    let ids = ServiceUtil.getSelectedIdList(grist, true)
+
+    if (ValueUtil.isNotEmpty(ids)) {
+      let result = await ServiceUtil.deleteListByIds(ids, mutationFunc)
+      if (result) {
+        grist.fetch()
+      }
+    }
+  }
+
+  /**
+   * @description ID 배열로 레코드 삭제 처리
+   **************************************
+   * @param {Array} ids 삭제할 레코드 ID 리스트
+   * @param {Object} mutationFunc 삭제 처리할 함수
+   * @returns {Boolean} 삭제 성공 여부
+   */
+  static async deleteListByIds(ids, mutationFunc) {
+    const answer = await UiUtil.showAlertPopup('button.delete', 'text.are_you_sure', 'question', 'delete', 'cancel')
+    if (answer.value) {
+      try {
+        const response = await client.query({
+          query: gql`
+            mutation {
+              ${mutationFunc}(${gqlBuilder.buildArgs({ ids })})
+            }`
+        })
+
+        if (!response.errors) {
+          UiUtil.showToast('info', TermsUtil.tText('success to delete'))
+          return true
+        } else {
+          ServiceUtil.showGraphqlErrorResponse(response)
+        }
+      } catch (e) {
+        ServiceUtil.showGraphqlException(e)
+      }
+    }
+
+    return false
+  }
+
+  /**
+   * @description 그리스트에서 변경, 추가된 여러 데이터를 한 꺼번에 업데이트
+   *************************************************************
+   * @param {Object} grist 그리스트
+   * @param {String} mutationFunc updateMultiple을 위한 서버 측 mutation 함수 명
+   * @returns {Boolean} 업데이트 성공 여부
+   */
+  static async updateMultipleData(grist, mutationFunc) {
+    let patches = ServiceUtil.patchesForUpdateMultiple(grist)
+
+    if (ValueUtil.isNotEmpty(patches)) {
+      let result = await ServiceUtil.updateMultiple(mutationFunc, patches)
+      if (result) {
+        grist.fetch()
+        return result
+      }
+    }
+
+    return false
+  }
+
+  /**
+   * @description 변경, 추가된 여러 데이터를 한 꺼번에 업데이트
+   ***************************************************
+   * @param {String} mutationFunc updateMultiple을 위한 서버 측 mutation 함수 명
+   * @param {Array} patches 변경, 추가된 여러 데이터
+   * @returns {Boolean} 업데이트 성공 여부
+   */
+  static async updateMultiple(mutationFunc, patches) {
+    try {
+      const response = await client.query({
+        query: gql`
+          mutation {
+            ${mutationFunc}(${gqlBuilder.buildArgs({ patches })}) {
+            id
+          }
+        }`,
+        context: {
+          hasUpload: true
+        }
+      })
+
+      if (!response.errors) {
+        UiUtil.showToast('info', TermsUtil.tText('success to save'))
+        return true
+      } else {
+        ServiceUtil.showGraphqlErrorResponse(response)
+      }
+    } catch (e) {
+      ServiceUtil.showGraphqlException(e)
+    }
+
+    return false
+  }
+
+  /**
+   * @description 그리스트에서 변경, 추가된 내용 추출
+   ********************************************
+   * @param {Object} grist 그리스트
+   * @param {Boolean} isObjectOrigin
+   * @returns {Array} 그리스트에서 변경, 추가된 데이터 리스트
+   */
+  static patchesForUpdateMultiple(grist, isObjectOrigin = false) {
+    // 그리드 변경 리스트
+    let cudRecords = grist.dirtyRecords
+    // 필수 입력 컬럼
+    let mandatoryColumns = {}
+
+    ;((grist.config || {}).columns || [])
+      .filter(x => (x.record || {}).mandatory === true)
+      .forEach(x => {
+        mandatoryColumns[x.name] = x.header
+      })
+
+    // 코드 인풋 타입
+    let codeInputColumns = ((grist.config || {}).columns || []).filter(x => x.type === 'code-input').map(x => x.name)
+
+    // 변경 없음
+    if (!cudRecords || cudRecords.length == 0) {
+      UiUtil.showAlertPopup('text.nothing_changed', 'text.NOTHING_CHANGED', 'info', 'confirm')
+      return
+    }
+
+    let patchList = []
+
+    // root records
+    for (let idx in cudRecords) {
+      let record = cudRecords[idx]
+      let patchData = record.id ? { id: record.id } : {}
+
+      // 필수 입력 값 체크
+      for (let key in mandatoryColumns) {
+        if (record[key] === undefined || record[key] == '') {
+          console.log(record)
+          UiUtil.showAlertPopup(
+            'text.check-mandatory',
+            TermsUtil.tText('check-mandatory-field', { x: mandatoryColumns[key] }),
+            'info',
+            'confirm'
+          )
+          return
+        }
+      }
+
+      // 레코드 정보에서 저장 가능 유형으로 변환
+      for (let key in record) {
+        if (
+          ![
+            'creator',
+            'updater',
+            'createdAt',
+            'updatedAt',
+            '__dirty__',
+            '__dirtyfields__',
+            '__origin__',
+            '__seq__',
+            '__selected__'
+          ].includes(key)
+        ) {
+          // code-input 타입은 오브젝트 값을 가지지만 id 만 가져가지 않는다. 예외 처리
+          if (
+            codeInputColumns.includes(key) == false &&
+            record[key] &&
+            typeof record[key] === 'object' &&
+            isObjectOrigin == false
+          ) {
+            patchData[key] = { id: record[key].id }
+          } else {
+            patchData[key] = record[key]
+          }
+        }
+      }
+
+      patchData.cuFlag = record.__dirty__
+      patchList.push(patchData)
+    }
+
+    return patchList
+  }
+
+  /**
+   * @description 한 건 레코드 업데이트
+   *********************************
+   * @param {String} mutationFunc 서버 측 업데이트 mutation 함수 명
+   * @param {String} id 변경할 레코드의 id
+   * @param {Object} patch 변경할 레코드
+   * @returns {Boolean} 업데이트 성공 여부
+   */
+  static async updateOne(mutationFunc, id, patch) {
+    try {
+      let gqlStr = gql`
+        mutation {
+          ${mutationFunc}(id: "${id}", ${gqlBuilder.buildArgs({ patch })}) {
+            id
+          }
+        }`
+
+      const response = await client.query({
+        query: gqlStr,
+        context: {
+          hasUpload: true
+        }
+      })
+
+      if (!response.errors) {
+        UiUtil.showToast('info', TermsUtil.tText('success to save'))
+        return true
+      } else {
+        ServiceUtil.showGraphqlErrorResponse(response)
+      }
+    } catch (e) {
+      ServiceUtil.showGraphqlException(e)
+    }
+
+    return false
+  }
+
+  /**
+   * @description Graphql 서비스 호출
+   ***********************************
+   * @param {Object} pageView 호출 페이지 뷰
+   * @param {Object} action 서비스 설정 정보
+   * @param {Object} filterParam 필터용 파라미터
+   * @param {Object} dataParams 파라미터
+   * @returns {Object} 서비스 호출 결과
+   */
+  static async callService(pageView, action, filterParam, dataParams) {
+    if (action.graphql_type == 'query') {
+      return await ServiceUtil.callQueryService(action, filterParam, dataParams)
+    } else if (action.graphql_type == 'export') {
+      return await ServiceUtil.exportableDataByServer(action.export_file_name, action.query_name, filterParam)
+    } else {
+      return await ServiceUtil.callMutationService(action, filterParam, dataParams)
+    }
+  }
+
+  /**
+   * @description Graphql Query 서비스 호출
+   ***************************************
+   * @param {Object} action 서비스 액션
+   * @param {Object} filterParam 필터용 파라미터
+   * @param {Object} dataParams 데이터 파라미터
+   * @returns {Object} 서비스 호출 결과
+   */
+  static async callQueryService(action, filterParam, dataParams) {
+    // 1. GraphQL 설정 추출
+    let queryType = action.query_type
+    let queryFunc = action.query_name
+    let selectFields = action.select
+    let filters = action.filters
+    let sorters = action.sorters
+
+    // 2. Filter 정보가 존재한다면 filterParam 정보로 부터 값 변수 치환
+    if (filters && filters.length > 0 && filterParam) {
+      let filterParamKeys = Object.keys(filterParam)
+
+      filters.forEach(filter => {
+        let value = filter.value
+        if (typeof value == 'string' && value.startsWith('$')) {
+          let valueField = value.replace('$', '')
+          if (filterParamKeys.includes(valueField)) {
+            filter.value = filterParam[valueField]
+          }
+        }
+      })
+    }
+
+    // 3. dataParams 정보가 존재한다면 데이터 dataParams 정보로 부터 값 변수 치환
+    if (filters && filters.length > 0 && dataParams) {
+      let dataParam = Array.isArray(dataParams) ? dataParams[0] : dataParams
+      let dataParamKeys = Object.keys(dataParam)
+
+      filters.forEach(filter => {
+        let value = filter.value
+        if (typeof value == 'string' && value.startsWith('$')) {
+          let valueField = value.replace('$', '')
+          if (dataParamKeys.includes(valueField)) {
+            filter.value = dataParam[valueField]
+          }
+        }
+      })
+    }
+
+    // 4. ID로 하나의 데이터만 조회
+    if (queryType == 'singleById') {
+      // ID값 추출
+      let idField = action.id_field
+      let idValue = filterParam[idField]
+      if (!idValue) {
+        idValue = Array.isArray(dataParams) ? dataParams[0][idField] : dataParams[idField]
+      }
+
+      if (!idValue) {
+        throw new Error('id_value_not_found')
+      }
+
+      // ID값이 있다면 ID 값으로 조회
+      return await ServiceUtil.findOne(queryFunc, idValue, selectFields)
+
+      // 5. filter 정보로 하나의 데이터만 조회
+    } else if (queryType == 'singleByFilters') {
+      return await ServiceUtil.findByFilters(queryFunc, selectFields, filters)
+
+      // 6. 화면이 grid이면서 페이지네이션을 사용하지 않는 경우
+    } else if (queryType == 'multi') {
+      return await ServiceUtil.searchByFilters(queryFunc, selectFields, filters)
+
+      // 7. 화면이 grid이면서 페이지네이션을 사용하는 경우
+    } else if (queryType == 'pagination') {
+      let page = 1
+      let limit = action.limit
+      return await ServiceUtil.searchByPagination(queryFunc, filters, sorters, page, limit, selectFields)
+    } else {
+      throw new Error('invalid queryType [' + queryType + ']')
+    }
+  }
+
+  /**
+   * @description Graphql Mutation 서비스 호출
+   ******************************************
+   * @param {Object} action 서비스 액션
+   * @param {Object} filterParam 필터용 파라미터
+   * @param {Object} dataParams 데이터 파라미터
+   * @returns {Object} 서비스 호출 결과
+   */
+  static async callMutationService(action, filterParam, dataParams) {
+    // 1. 필수 정보 체크
+    if (!action.mutation_name) {
+      throw new Error('mutation name not found!')
+    }
+
+    if (!action.mutation_type) {
+      throw new Error('mutation type not found!')
+    }
+
+    // 2. GraphQL 설정 추출
+    let data = action.data
+    let mutationParams = Array.isArray(dataParams) ? [] : {}
+
+    if (data) {
+      // 3. 파라미터 정보로 부터 변수 치환 처리
+      if (Array.isArray(mutationParams)) {
+        if (ValueUtil.isNotEmpty(dataParams)) {
+          dataParams.forEach(dp => {
+            let sourceData = JSON.parse(JSON.stringify(data))
+            let dataParam = ValueUtil.replaceVariableObject(sourceData, dp)
+            mutationParams.push(dataParam)
+          })
+        }
+      } else {
+        if (ValueUtil.isNotEmpty(dataParams)) {
+          mutationParams = ValueUtil.replaceVariableObject(data, dataParams)
+        }
+      }
+
+      // 4. 파라미터 정보가 없다면 필터 정보로 변수 처리
+      if (ValueUtil.isEmpty(mutationParams)) {
+        mutationParams = ValueUtil.replaceVariableObject(data, filterParam)
+      }
+    }
+
+    try {
+      // 5. ID 값 추출
+      let idValue = action.id_field
+        ? ValueUtil.isNotEmpty(filterParam)
+          ? filterParam[action.id_field]
+          : Array.isArray(dataParams)
+            ? dataParams[0][action.id_field]
+            : dataParams[action.id_field]
+        : null
+      // 6. Mutation 호출
+      let response = await ServiceUtil.callMutation(
+        action,
+        idValue,
+        ValueUtil.isEmpty(mutationParams) ? dataParams : mutationParams
+      )
+
+      if (!response.errors) {
+        UiUtil.showToast('info', TermsUtil.tText('success to process'))
+        return response
+      } else {
+        ServiceUtil.showGraphqlErrorResponse(response)
+      }
+    } catch (e) {
+      ServiceUtil.showGraphqlException(e)
+    }
+  }
+
+  /**
+   * @description Graphql Mutation 서비스 호출
+   ******************************************
+   * @param {Object} action 서비스 액션
+   * @param {String} idValue ID 값
+   * @param {Object} data 파라미터
+   * @returns {Object} 서비스 호출 결과
+   */
+  static async callMutation(action, idValue, data) {
+    // mutation Type 추출
+    let mutationType = action.mutation_type
+
+    // 1. 파라미터가 id 뿐인 경우
+    if (mutationType == 'id') {
+      return await ServiceUtil.callMutationById(action, idValue)
+
+      // 2. 파라미터가 id 배열인 경우
+    } else if (mutationType == 'ids') {
+      return await ServiceUtil.callMutationByIds(action, data)
+
+      // 3. 파라미터가 id, data인 경우
+    } else if (mutationType == 'id-data') {
+      return await ServiceUtil.callMutationByIdData(action, idValue, data)
+
+      // 4. 파라미터가 data인 경우
+    } else if (mutationType == 'data') {
+      return await ServiceUtil.callMutationByData(action, data)
+    }
+  }
+
+  /**
+   * @description Graphql Mutation 서비스 호출 - 파라미터는 ID
+   *******************************************************
+   * @param {Object} action 서비스 액션
+   * @param {Object} idValue ID 값
+   * @returns {Object} 서비스 호출 결과
+   */
+  static async callMutationById(action, idValue) {
+    // ID 값이 없으면 에러
+    if (!idValue) {
+      throw new Error('id_value_not_found')
+    }
+
+    let mutationName = action.mutation_name
+    let returnFields = action.return_fields
+
+    return await client.query({
+      query: gql`
+        mutation ($id: String!) {
+          ${mutationName}(id: $id) 
+          ${returnFields ? '{' + returnFields + '}' : ''}
+        }`,
+      variables: { id: idValue }
+    })
+  }
+
+  /**
+   * @description Graphql Mutation 서비스 호출 - 파라미터는 ID
+   *******************************************************
+   * @param {Object} action 서비스 액션
+   * @param {Array} dataList 데이터 배열
+   * @returns {Object} 서비스 호출 결과
+   */
+  static async callMutationByIds(action, dataList) {
+    let paramName = action.param_name
+
+    // 파라미터 이름이 없으면 에러
+    if (!paramName) {
+      throw new Error('param name not found')
+    }
+
+    let ids = dataList.map(d => {
+      return d[action.id_field]
+    })
+    let mutationName = action.mutation_name
+    let returnFields = action.return_fields
+
+    return await client.query({
+      query: gql`
+        mutation ($ids: [String!]!) {
+          ${mutationName}(${paramName}: $ids) 
+          ${returnFields ? '{' + returnFields + '}' : ''}
+        }`,
+      variables: { ids: ids }
+    })
+  }
+
+  /**
+   * @description Graphql Mutation 서비스 호출 - 파라미터는 ID, Data
+   *************************************************************
+   * @param {Object} action 서비스 액션
+   * @param {String} idValue ID 값
+   * @param {Object} data 파라미터
+   * @returns {Object} 서비스 호출 결과
+   */
+  static async callMutationByIdData(action, idValue, data) {
+    let paramName = action.param_name
+    let paramType = action.param_type
+
+    // 파라미터 타입이 없으면 에러
+    if (!paramType) {
+      throw new Error('param type not found')
+    }
+
+    // 파라미터 이름이 없으면 에러
+    if (!paramName) {
+      throw new Error('param name not found')
+    }
+
+    // ID 값이 있다면 ID 값으로 조회
+    if (!idValue) {
+      idValue = data[action.id_field]
+    }
+
+    if (!idValue) {
+      throw new Error('id_value_not_found')
+    }
+
+    let mutationName = action.mutation_name
+    let returnFields = action.return_fields
+
+    return await client.query({
+      query: gql`
+        mutation ($id: String!, $patch: ${paramType}!) {
+          ${mutationName}(id: $id, ${paramName}: $patch) 
+          ${returnFields ? '{' + returnFields + '}' : ''}
+        }`,
+      variables: { id: idValue, patch: data }
+    })
+  }
+
+  /**
+   * @description Graphql Mutation 서비스 호출 - 파라미터는 Data
+   ********************************************************
+   * @param {Object} action 서비스 액션
+   * @param {Object} data 파라미터
+   * @returns {Object} 서비스 호출 결과
+   */
+  static async callMutationByData(action, data) {
+    let paramType = action.param_type
+    let paramName = action.param_name
+
+    // 파라미터 타입이 없으면 에러
+    if (!paramType) {
+      throw new Error('param type not found')
+    }
+
+    // 파라미터 이름이 없으면 에러
+    if (!paramName) {
+      throw new Error('param name not found')
+    }
+
+    let mutationName = action.mutation_name
+    let returnFields = action.return_fields
+
+    return await client.query({
+      query: gql`
+        mutation ($patch: ${paramType}!) {
+          ${mutationName}(${paramName}: $patch) 
+          ${returnFields ? '{' + returnFields + '}' : ''}
+        }`,
+      variables: { patch: data }
+    })
+  }
+
+  /**
+   * @description 시나리오 서비스를 호출
+   **********************************
+   * @param {String} buttonName 시나리오 호출할 버튼 명, 버튼 명이 없다면 사용자에게 확인 과정을 생략한다.
+   * @param {String} scenarioName 호출할 시나리오 명
+   * @param {Object} variables 시나리오 호출 변수
+   * @param {Object} useMessage 컨펌, 완료 메시지 사용 여부
+   * @returns {Object | Boolean} 시나리오 호출 response or false
+   */
+  static async callScenario(buttonName, scenarioName, variables, useMessage = true) {
+    let confirm = true
+
+    if (buttonName && useMessage === true) {
+      const anwer = await UiUtil.showAlertPopup(
+        'button.' + buttonName,
+        'text.are_you_sure',
+        'question',
+        'confirm',
+        'cancel'
+      )
+      confirm = anwer.value
+    }
+
+    if (confirm) {
+      try {
+        const response = await client.query({
+          query: gql`
+            mutation ($scenarioName: String!, $variables: Object) {
+              runScenario(scenarioName: $scenarioName, variables: $variables) {
+                state
+                message
+                result
+                __typename
+              }
+            }
+          `,
+          variables: { scenarioName: scenarioName, variables: variables }
+        })
+
+        if (!response.errors) {
+          if (ServiceUtil.checkClientError(response)) {
+            if (useMessage === true) UiUtil.showToast('info', TermsUtil.tText('success to process'))
+            return response
+          }
+        } else {
+          ServiceUtil.showGraphqlErrorResponse(response)
+        }
+      } catch (e) {
+        ServiceUtil.showGraphqlException(e)
+      }
+    }
+
+    return false
+  }
+
+  /**
+   * @description 시나리오 서비스 리턴값에 에러가 포함되어 있는지 체크
+   *******************************************************
+   * @param {Object} response 시나리오 서비스 호출 리턴 값, 리턴 형태 error : {type : 'error', title : '에러 타이틀 (다국어 가능)', message : '에러 메시지 (다국어 가능)'}
+   * @returns {Boolean} 에러가 없으면 true 그렇지 않으면 false
+   */
+  static checkClientError(response) {
+    if (
+      response &&
+      response.data &&
+      response.data.runScenario &&
+      response.data.runScenario.result &&
+      response.data.runScenario.result.error
+    ) {
+      let scenarioError = response.data.runScenario.result.error
+      UiUtil.showAlertPopup(scenarioError.title, scenarioError.message, 'error', 'confirm')
+      return false
+    } else {
+      return true
+    }
+  }
+}