전송 이력 화면 진행중

- 페이지네이션 개발

src/main/front/src/components/SearchParameterDto.js

@@ -0,0 +1,40 @@
+function SearchParameterDto() {
+  this.page = 1
+  this.itemCountPerPage = 20
+  this.totalItemCount = 0
+  this.pageList = [1]
+  this.parameters = {}
+}
+
+SearchParameterDto.prototype.calculatePageList = function (currentPage, currentItemCountPerPage = 20, currentTotalItemCount) {
+  this.itemCountPerPage = currentItemCountPerPage
+  this.totalItemCount = currentTotalItemCount
+  if (this.totalItemCount > 0) {
+    let pageSize = Math.floor(this.totalItemCount / this.itemCountPerPage) + 1
+    this.page = currentPage >= 1 && currentPage <= pageSize ? currentPage : 1
+    let startPage = Math.floor((this.page - 1) / 10) * 10 + 1
+    let lastPage = Math.max(startPage + 10, pageSize)
+    let pageArray = []
+    for (let i = startPage; i <= lastPage; i++) {
+      pageArray.push(i)
+    }
+    this.pageList = pageArray
+  } else {
+    this.pageList = [1]
+    this.page = 1
+  }
+}
+
+SearchParameterDto.prototype.setParameter = function (key, value) {
+  this.parameters[key] = value
+}
+
+SearchParameterDto.prototype.getParameter = function (key) {
+  return this.parameters[key]
+}
+
+SearchParameterDto.prototype.clearParameter = function () {
+  this.parameters = {}
+}
+
+export default SearchParameterDto

src/main/front/src/views/MessageHistoryView.vue

@@ -2,22 +2,27 @@
 import '@/assets/main.css'
 import { useApiClient } from '@/main'
 import { onMounted, ref } from 'vue'
+import SearchParameterDto from '@/components/SearchParameterDto'
 
 const apiClient = useApiClient()
 
-async function getAgentMessageDtoList() {
+const dfxAgentMessageDtoList = ref([])
-  const response = await apiClient.post('/app-api/agent/getAgentMessageDtoList')
+const searchParameterDto = ref(new SearchParameterDto())
-  return response.data
-}
 
-let dfxAgentMessageDtoList = ref([])
+async function retrieveDataList(pageIndex) {
+  const totalCountResponse = await apiClient.post('/app-api/agent/getAgentMessageDtoListTotalCount', searchParameterDto.value)
+  const totalCount = totalCountResponse.data
+  searchParameterDto.value.calculatePageList(pageIndex, searchParameterDto.value.itemCountPerPage, totalCount)
+  const response = await apiClient.post('/app-api/agent/getAgentMessageDtoList', searchParameterDto.value)
+  dfxAgentMessageDtoList.value = response.data
+}
 
 function setDfaAgentInfoDto(dfxAgentMessageDto) {
   alert(dfxAgentMessageDto)
 }
 
 onMounted(async () => {
-  dfxAgentMessageDtoList.value = await getAgentMessageDtoList()
+  await retrieveDataList(1)
 })
 </script>
 
@@ -25,13 +30,30 @@ onMounted(async () => {
   <main class="dfx-main container w-100">
     <div class="row">
       <div class="col-12 pt-2 border-bottom">
-        <h3 class="h3">Dashboard</h3>
+        <h3 class="h3">송수신 메시지 목록</h3>
       </div>
     </div>
     <div class="row">
       <article class="col-12 pt-3">
-        <h5 class="h5">송수신 메시지 목록</h5>
+        <div class="row">
-        <table class="table table-striped table-bordered align-middle">
+          <div class="col-1">
+            <label for="search-process-status" class="form-label">Status</label>
+          </div>
+          <div class="col-9">
+            <select class="form-select form-select-sm" name="search-process-status" aria-label="Status">
+              <option value="">전체</option>
+              <option value="PROCESS_RECEIVE">수신</option>
+              <option value="PROCESS_DONE">완료</option>
+              <option value="PROCESS_FAIL">오류</option>
+            </select>
+          </div>
+          <div class="col-2">
+            <button class="btn btn-sm btn-success">조회</button>
+          </div>
+        </div>
+        <div class="row">
+          <div class="col-12">
+            <table class="table table-striped table-bordered align-middle fs-7">
               <thead>
                 <tr>
                   <th scope="col" class="text-center">Message UUID</th>
@@ -46,23 +68,45 @@ onMounted(async () => {
               </thead>
               <tbody class="table-group-divider">
                 <tr v-if="dfxAgentMessageDtoList.length > 0" v-for="dfxAgentMessageDto in dfxAgentMessageDtoList" :key="`${dfxAgentMessageDto.senderAgentId}-${dfxAgentMessageDto.messageUuid}`">
-              <td scope="row">{{ dfxAgentMessageDto.messageUuid }}</td>
+                  <td scope="row" class="text-start">{{ dfxAgentMessageDto.messageUuid }}</td>
                   <td class="text-center">{{ dfxAgentMessageDto.senderAgentId }}({{ dfxAgentMessageDto.senderPostmanId }})</td>
-              <td class="text-center">{{ dfxAgentMessageDto.recipientAgentId }}({{ dfxAgentMessageDto.receipientDropboxId }})</td>
+                  <td class="text-center">{{ dfxAgentMessageDto.recipientAgentId }}({{ dfxAgentMessageDto.recipientDropboxId }})</td>
                   <td class="text-center">{{ dfxAgentMessageDto.senderTimeString }}</td>
                   <td class="text-center">{{ dfxAgentMessageDto.recipientTimeString }}</td>
                   <td class="text-center">{{ dfxAgentMessageDto.processStatusCode }}</td>
-              <td class="text-right">{{ dfxAgentMessageDto.messageDateCount }}</td>
+                  <td class="text-end">{{ dfxAgentMessageDto.messageDataCount }}</td>
-              <td class="text-center"><button type="button" class="btn btn-primary btn-sm" @click.prevent="setDfaAgentInfoDto(dfxAgentInfoDto)">Data View</button></td>
+                  <td class="text-center"><button type="button" class="btn btn-primary btn-sm" @click.prevent="setDfaAgentInfoDto(dfxAgentMessageDto.data)">Data View</button></td>
                 </tr>
                 <tr v-else>
                   <td scope="row" class="text-center" colspan="8">no datas.</td>
                 </tr>
               </tbody>
             </table>
+          </div>
+        </div>
+        <nav aria-label="Page navigation">
+          <ul class="pagination">
+            <li class="page-item">
+              <a class="page-link">Previous</a>
+            </li>
+            <li class="page-item" v-for="pageNo in searchParameterDto.pageList" :class="pageNo == searchParameterDto.page ? 'active' : ''" :aria-current="pageNo == searchParameterDto.page ? 'page' : ''">
+              <a class="page-link" href="#">{{ pageNo }}</a>
+            </li>
+            <li class="page-item">
+              <a class="page-link" href="#">Next</a>
+            </li>
+          </ul>
+        </nav>
       </article>
     </div>
   </main>
 </template>
 
-<style></style>
+<style>
+.fs-7 {
+  font-size: 0.75rem !important;
+} /* 예: 12px */
+.fs-8 {
+  font-size: 0.625rem !important;
+} /* 예: 10px */
+</style>

src/main/java/com/bsmlab/dfx/dfxconsole/app/agent/DfxAgentInfoController.java

@@ -47,6 +47,12 @@ public class DfxAgentInfoController {
         }
     }
 
+    @PostMapping("/app-api/agent/getAgentMessageDtoListTotalCount")
+    public ResponseEntity<Integer> getAgentMessageDtoListTotalCount() {
+        int totalCount = dfxAgentMessageHistoryService.selectDfxAgentMessageDtoListTotalCount();
+        return ResponseEntity.ok().body(totalCount);
+    }
+
     @PostMapping("/app-api/agent/getAgentMessageDtoList")
     public ResponseEntity<List<DfxAgentMessageDto>> getAgentMessageDtoList() {
         List<DfxAgentMessageDto> dfxAgentMessageDtoList = dfxAgentMessageHistoryService.selectDfxAgentMessageDtoList();

src/main/java/com/bsmlab/dfx/dfxconsole/app/agent/service/DfxAgentMessageHistoryMapper.java

@@ -7,6 +7,7 @@ import java.util.List;
 @Mapper
 public interface DfxAgentMessageHistoryMapper {
     List<DfxAgentMessageDto> selectDfxAgentMessageList();
+    int selectDfxAgentMessageListTotalCount();
     DfxAgentMessageDto selectDfxAgentMessageBySenderAgentIdAndMessageUuid(DfxAgentMessageDto dfxAgentMessageDto);
     void insertDfxAgentMessage(DfxAgentMessageDto dfxAgentMessageDto);
     List<DfxAgentMessageHistoryDto> selectDfxAgentMessageHistoryList();

src/main/java/com/bsmlab/dfx/dfxconsole/app/agent/service/DfxAgentMessageHistoryService.java

@@ -23,6 +23,11 @@ public class DfxAgentMessageHistoryService {
         return dfxAgentMessageDtoList;
     }
 
+    public int selectDfxAgentMessageDtoListTotalCount() {
+        int totalCount = dfxAgentMessageHistoryMapper.selectDfxAgentMessageListTotalCount();
+        return totalCount;
+    }
+
     public List<Map<String, Object>> selectDfxAgentMessageData(DfxAgentMessageDto inputDfxAgentMessageDto) throws JsonProcessingException {
         DfxAgentMessageDto dfxAgentMessageDto = dfxAgentMessageHistoryMapper.selectDfxAgentMessageBySenderAgentIdAndMessageUuid(inputDfxAgentMessageDto);
         ObjectMapper objectMapper = new ObjectMapper();

src/main/resources/application.yml

@@ -66,7 +66,7 @@ logging:
     jdbc:
       audit: OFF
       resultset: OFF
-      resultsettable: INFO  #SQL 결과 데이터 Table을 로그로 남긴다.
+      resultsettable: OFF  #SQL 결과 데이터 Table을 로그로 남긴다.
       sqlonly: OFF     #SQL만 로그로 남긴다.
       sqltiming: DEBUG    #SQL과 소요시간을 표기한다.
       connection : OFF  # 커넥션 확인가능

src/main/resources/mapper/app/dfx-agent-message-history.xml

@@ -24,8 +24,20 @@
             JOIN TB_DFX_AGENT_INFO B ON (A.SENDER_AGENT_ID = B.AGENT_ID)
             JOIN TB_DFX_AGENT_INFO C ON (A.RECIPIENT_AGENT_ID = C.AGENT_ID)
         WHERE 1 = 1
-            AND A.SENDER_AGENT_ID = #{senderAgentId}
+        ]]>
-            AND A.MESSAGE_UUID = #{messageUuid}
+    </select>
+
+    <select id="selectDfxAgentMessageListTotalCount" resultType="int">
+        <![CDATA[
+        SELECT COUNT(*)
+        FROM (
+            SELECT SENDER_AGENT_ID, SENDER_POSTMAN_ID, SENDER_TS, RECIPIENT_AGENT_ID, RECIPIENT_DROPBOX_ID, RECIPIENT_TS, MESSAGE_UUID, MESSAGE_TYPE_CODE, CONSOLE_RECEIVE_TS, PROCESS_STATUS_CODE, MESSAGE_DATA, MESSAGE_DATA_COUNT, PROCESS_ACK_TS
+            FROM TB_DFX_AGENT_MESSAGE
+            WHERE 1 = 1
+            ) A
+            JOIN TB_DFX_AGENT_INFO B ON (A.SENDER_AGENT_ID = B.AGENT_ID)
+            JOIN TB_DFX_AGENT_INFO C ON (A.RECIPIENT_AGENT_ID = C.AGENT_ID)
+        WHERE 1 = 1
         ]]>
     </select>