Merge branch 'main' of https://github.com/hyun357123/mc-application-manager

Author: hyun123

applicationFE/src/views/softwareCatalog/SoftwareCatalogList.vue

@@ -11,7 +11,7 @@
                         </div>
                         <div class="col-auto ms-auto">
                             <div class="btn-list">
-                                <a class="btn btn-primary d-none d-sm-inline-block" data-bs-toggle="modal" data-bs-target="#modal-form">
+                                <a class="btn btn-primary d-none d-sm-inline-block" @click="onClickCreate" data-bs-toggle="modal" data-bs-target="#modal-form">
                                     <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-plus" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                         <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                                         <path d="M12 5l0 14"></path>
@@ -48,8 +48,8 @@
                                                         <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /><path d="M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /><path d="M19 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /></svg>
                                                     </a>
                                                     <div class="dropdown-menu dropdown-menu-end">
-                                                        <a class="dropdown-item" href="#">temp action - 1</a>
-                                                        <a class="dropdown-item" href="#">temp action - 2</a>
+                                                        <a class="dropdown-item" @click="onClickUpdate(catalog.catalogIdx)" data-bs-toggle="modal" data-bs-target="#modal-form">Update</a>
+                                                        <!-- <a class="dropdown-item" href="#">temp action - 2</a> -->
                                                     </div>
                                                 </div>
                                             </div>
@@ -190,7 +190,7 @@
                 </div>
             </div>
         </div>
-        <SoftwareCatalogForm @get-list="_getSoftwareCatalogList"/>
+        <SoftwareCatalogForm :mode="formMode" :catalog-idx="selectCatalogIdx" @get-list="_getSoftwareCatalogList"/>
     </div>
 </template>
 <script setup lang="ts">
@@ -216,6 +216,8 @@
 
     const dockerHubSearchList = ref([] as any)
     const artifactHubSearch = ref([] as any)
+    const selectCatalogIdx = ref(0 as number)
+    const formMode = ref('new')
 
     /**
     * @Title Life Cycle
@@ -243,8 +245,6 @@
                 item.isShow = false;
             })
             catalogList.value = response.data;
-
-            console.log("catalogList.value : ", catalogList.value)
         } catch(error) {
             console.log(error)
             toast.error('데이터를 가져올 수 없습니다.')
@@ -253,7 +253,6 @@
 
     const groupedData = (catalogRefData: any) => {
         return catalogRefData.reduce((acc:any, item:any) => {
-        // item의 referenceType을 키로 사용
         if (!acc[item.referenceType]) {
           acc[item.referenceType] = [];
         }
@@ -321,7 +320,16 @@
     const goToPage = (url:string) => {
         window.open(url)
     }
-  
+
+    const onClickUpdate = (idx:number) => {
+        formMode.value = "update";
+        selectCatalogIdx.value = idx;
+    }
+
+    const onClickCreate = () => {
+        formMode.value = "new"
+        selectCatalogIdx.value = 0;
+    }
  
   
 </script>

applicationFE/src/views/softwareCatalog/components/softwareCatalogForm.vue

@@ -6,7 +6,7 @@
                 <h5 class="modal-title">Create New Software catalog</h5>
                 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
             </div>
-            <div class="modal-body">
+            <div class="modal-body" style="max-height: calc(100vh - 200px);overflow-y: auto;">
                 <div class="mb-3">
                     <label class="form-label">Title</label>
                     <input type="text" class="form-control" id="sc-title" name="title" placeholder="Application name" v-model="catalogDto.catalogTitle" />
@@ -22,11 +22,11 @@
                 <div class="mb-3">
                     <label class="form-label">Category</label>
                     <select class="form-select" id="sc-category" v-model="catalogDto.catalogCategory">
-                        <option value="server" selected>SERVER</option>
-                        <option value="was">WAS</option>
-                        <option value="db">DB</option>
-                        <option value="util">UTIL</option>
-                        <option value="observability">OBSERVABILITY</option>
+                        <option value="SERVER" selected>SERVER</option>
+                        <option value="WAS">WAS</option>
+                        <option value="DB">DB</option>
+                        <option value="UTIL">UTIL</option>
+                        <option value="OBSERVABILITY">OBSERVABILITY</option>
                     </select>
                 </div>
                 <div class="mb-3">
@@ -38,11 +38,13 @@
                         <div class="mb-3">
                             <label class="form-label">Reference</label>
                             <select class="form-select" id="sc-reference-1" v-model="ref.referenceType">
-                                <option value="url" selected>URL</option>
-                                <option value="manifest">manifest</option>
-                                <option value="workflow">workflow</option>
-                                <option value="image">image</option>
-                                <option value="etc">etc</option>
+                                <option value="URL">URL</option>
+                                <option value="MANIFEST">MANIFEST</option>
+                                <option value="WORKFLOW">WORKFLOW</option>
+                                <option value="IMAGE">IMAGE</option>
+                                <option value="HOMEPAGE">HOMEPAGE</option>
+                                <option value="TAG">TAG</option>
+                                <option value="ETC">ETC</option>
                             </select>
                         </div>
                     </div>
@@ -96,51 +98,84 @@
 import type { Repository } from '../../type/type';
 import { ref } from 'vue';
 import { useToast } from 'vue-toastification';
-import { createCatalog} from '@/api/softwareCatalog';
-import { onMounted } from 'vue';
-import { computed } from 'vue';
-import { watch } from 'vue';
+import { createCatalog } from '@/api/softwareCatalog';
+import { onMounted, watch, computed } from 'vue';
+import axios from 'axios'
+
+/**
+ * @Title Props / Emit
+ */
+ interface Props {
+  mode: String
+  catalogIdx: Number
+}
 
 const toast = useToast()
 const catalogDto = ref({} as any);
 const refData = ref([] as any)
 const files = ref([] as any)
 
-const emit = defineEmits(['get-list'])
+const splitUrl = window.location.host.split(':');
+const baseUrl = window.location.protocol + '//' + splitUrl[0] + ':18084'
+// const baseUrl = "http://210.217.178.130:18084";
 
+const emit = defineEmits(['get-list'])
+const props = defineProps<Props>()
+const catalogIdx = computed(() => props.catalogIdx);
+watch(catalogIdx, async () => {
+  await setInit();
+});
 onMounted(async () => {
     await setInit()
 })
 
 const setInit = async () => {
-  console.log("setInit")
-  catalogDto.value = {
-    "catalogIdx": null,
-    "catalogTitle": "",
-    "catalogDescription": "",
-    "catalogSummary": "",
-    "catalogCategory": "",
-    "catalogRefData": []
-  }
-  refData.value = [];
-  refData.value.push(
-      {
-          "catalogRefIdx": null,
-          "catalogIdx": null,
-          "referncetIdx": null,
-          "referenceValue": "",
-          "referenceDescription": "",
-          "referenceType": "url"
+  console.log("setInit props.catalogIdx : ", props.catalogIdx)
+  console.log("porps.mode : ", props.mode)
+  if(props.mode == 'update') {
+    await _getSoftwareCatalogDetail()
+  } else {
+      catalogDto.value = {
+        "catalogIdx": null,
+        "catalogTitle": "",
+        "catalogDescription": "",
+        "catalogSummary": "",
+        "catalogCategory": "",
+        "catalogRefData": []
       }
-  )
+      refData.value = [];
+      refData.value.push(
+          {
+              "catalogRefIdx": null,
+              "catalogIdx": null,
+              "referncetIdx": 0,
+              "referenceValue": "",
+              "referenceDescription": "",
+              "referenceType": "url"
+          }
+      )
+  }
+}
+
+const _getSoftwareCatalogDetail = async () => {
+    try {
+            const response = await axios.get(baseUrl + '/catalog/software/' + props.catalogIdx);
+            console.log("response : ", response)
+
+            catalogDto.value = response.data
+            refData.value = response.data.catalogRefData;
+        } catch(error) {
+            console.log(error)
+            toast.error('데이터를 가져올 수 없습니다.')
+        }
 }
 
 const addRef = () => {
     console.log("addRef");
     refData.value.push({
         "catalogRefIdx": null,
         "catalogIdx": null,
-        "referncetIdx": null,
+        "referncetIdx": 0,
         "referenceValue": "",
         "referenceDescription": "",
         "referenceType": "url"
@@ -158,16 +193,31 @@ const handleFileChange = (event: any) => {
 }
 
 const createSoftwareCatalog = async () => {
-  const formData = new FormData();
-  formData.append('iconFile', files.value);
-  formData.append('catalogDto', catalogDto.value);
+    if(props.mode == 'new') {
+        const formData = new FormData();
+        formData.append('iconFile', files.value);
+      
+        catalogDto.value.catalogRefData = refData.value;
+        formData.append('catalogDto', new Blob([JSON.stringify(catalogDto.value)], {
+          type: 'application/json'
+        }));
+      
+        const response = await axios.post(baseUrl + '/catalog/software', formData, {
+          headers: {
+            'Content-Type': 'multipart/form-data'
+          }
+        });
+      
+        if(response.data) {
+          toast.success('등록되었습니다.')
+          emit('get-list')
+        } else {
+          toast.error('등록 할 수 없습니다.')
+        }
+    } else {
+        const response = await axios.put(baseUrl + '/catalog/software')
+    }
 
-  const { data } = await createCatalog(formData);
-  if (data)
-    toast.success('등록되었습니다.')
-  else
-    toast.error('등록 할 수 없습니다.')
-    emit('get-list')
 }
 
 </script>