MessageHistory 상세 작업중

src/main/front/src/components/MessageDataView.vue

@@ -0,0 +1,102 @@
+<script setup>
+import { defineProps, ref, onMounted, onBeforeUnmount } from 'vue'
+import * as bootstrap from 'bootstrap'
+
+const props = defineProps({
+  modalId: String,
+  dto: Object,
+})
+
+const modalEl = ref(null)
+let bsModal = null
+let dataList = []
+let columnList = []
+
+onMounted(() => {
+  if (modalEl.value) {
+    // 인스턴스가 있으면 재사용, 없으면 생성
+    bsModal = bootstrap.Modal.getOrCreateInstance(modalEl.value, {
+      backdrop: 'static', // 바깥 클릭으로 닫히지 않게
+      keyboard: false, // ESC로 닫히지 않게 (원하시면 true 로)
+    })
+  }
+})
+
+onBeforeUnmount(() => {
+  if (bsModal) {
+    bsModal.hide()
+    dataList = []
+    columnList = []
+    // Bootstrap v5에서는 dispose 지원
+    if (typeof bsModal.dispose === 'function') {
+      bsModal.dispose()
+    }
+    bsModal = null
+  }
+})
+
+function open() {
+  if (bsModal) {
+    if (props.dto.messageData) {
+      dataList = JSON.parse(props.dto.messageData)
+      columnList = Object.keys(dataList[0])
+    }
+    bsModal.show()
+    console.log(props.dto)
+  }
+}
+
+function close() {
+  if (bsModal) {
+    bsModal.hide()
+    dataList = []
+    columnList = []
+  }
+}
+
+defineExpose({
+  open,
+  close,
+})
+</script>
+
+<template>
+  <!-- Modal -->
+  <div class="modal fade" :id="props.modalId" ref="modalEl" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" :aria-labelledby="props.modalId + 'Label'" aria-hidden="true">
+    <div class="modal-dialog modal-xl">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h1 class="modal-title fs-5" :id="props.modalId + 'Label'">{{ props.dto.senderAgentId }} <i class="bi bi-arrow-right"></i> {{ props.dto.recipientAgentId }}</h1>
+          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        </div>
+        <div class="modal-body">
+          <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" v-if="columnList.length > 0" v-for="columnName in columnList">{{ columnName }}</th>
+                    <th scope="col" class="text-center" v-else>no datas.</th>
+                  </tr>
+                </thead>
+                <tbody class="table-group-divider">
+                  <tr v-if="dataList.length > 0" v-for="dataMap in dataList">
+                    <td class="text-center" v-for="columnName in columnList">{{ dataMap[columnName] }}</td>
+                  </tr>
+                  <tr v-else>
+                    <td scope="row" class="text-center">no datas.</td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style></style>

src/main/front/src/components/apiClient.js

@@ -0,0 +1,9 @@
+import axios from 'axios'
+
+const apiClient = axios.create({ headers: { 'Content-Type': 'application/json' } })
+
+export function useApiClient() {
+  return apiClient
+}
+
+export default apiClient

src/main/front/src/main.js

@@ -2,21 +2,12 @@ import 'bootstrap/dist/css/bootstrap.min.css'
 import 'bootstrap'
 import 'bootstrap-icons/font/bootstrap-icons.css'
 import './assets/app.css'
-import axios from 'axios'
 import { createApp, getCurrentInstance } from 'vue'
 import App from './App.vue'
 import router from './router'
-
-const apiClient = axios.create({ header: { 'Content-Type': 'application/json' } })
+import apiClient from './components/apiClient'
 
 const app = createApp(App)
 app.config.globalProperties.$apiClient = apiClient
 app.use(router)
 app.mount('#app')
-
-function useApiClient() {
-  const { proxy } = getCurrentInstance()
-  return proxy.$apiClient
-}
-
-export { useApiClient }

src/main/front/src/views/AgentManageView.vue

@@ -1,6 +1,6 @@
 <script setup>
 import '@/assets/main.css'
-import { useApiClient } from '@/main'
+import { useApiClient } from '@/components/apiClient'
 import { onMounted, ref } from 'vue'
 
 const apiClient = useApiClient()

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

@@ -1,13 +1,17 @@
 <script setup>
 import '@/assets/main.css'
-import { useApiClient } from '@/main'
-import { onMounted, ref } from 'vue'
+import { useApiClient } from '@/components/apiClient'
+import { nextTick, onMounted, ref } from 'vue'
 import SearchParameterDto from '@/components/SearchParameterDto'
 import Pagination from '@/components/Pagination.vue'
+import MessageDataView from '@/components/MessageDataView.vue'
 
 const apiClient = useApiClient()
 
 const dfxAgentMessageDtoList = ref([])
+const messageData = ref({})
+const messageDataView = ref(null)
+const messageDataViewId = 'messageDataListModal'
 const searchParameterDto = ref(new SearchParameterDto())
 
 async function retrieveDataList(pageIndex) {
@@ -18,8 +22,11 @@ async function retrieveDataList(pageIndex) {
   dfxAgentMessageDtoList.value = response.data
 }
 
-function setDfaAgentInfoDto(dfxAgentMessageDto) {
-  alert(dfxAgentMessageDto)
+function openDataView(dfxAgentMessageDto) {
+  messageData.value = dfxAgentMessageDto
+  nextTick(() => {
+    messageDataView.value.open()
+  })
 }
 
 onMounted(async () => {
@@ -76,7 +83,7 @@ onMounted(async () => {
                   <td class="text-center">{{ dfxAgentMessageDto.recipientTimeString }}</td>
                   <td class="text-center">{{ dfxAgentMessageDto.processStatusCode }}</td>
                   <td class="text-end">{{ dfxAgentMessageDto.messageDataCount }}</td>
-                  <td class="text-center"><button type="button" class="btn btn-primary btn-sm" @click.prevent="setDfaAgentInfoDto(dfxAgentMessageDto.data)">Data View</button></td>
+                  <td class="text-center"><button type="button" class="btn btn-primary btn-sm" @click.prevent="openDataView(dfxAgentMessageDto)">Data View</button></td>
                 </tr>
                 <tr v-else>
                   <td scope="row" class="text-center" colspan="8">no datas.</td>
@@ -89,6 +96,7 @@ onMounted(async () => {
       </article>
     </div>
   </main>
+  <message-data-view :modal-id="messageDataViewId" :dto="messageData" ref="messageDataView"></message-data-view>
 </template>
 
 <style>