Skip to content

Commit

Permalink
Merge branch 'm-cmp:main' into main
Browse files Browse the repository at this point in the history
  • Loading branch information
@hyun357123
hyun357123 authored Sep 30, 2024
2 parents e10869c + b4e827a commit 4e2bbd6
Show file tree
Hide file tree
Showing 2 changed files with 111 additions and 53 deletions.
24 changes: 16 additions & 8 deletions applicationFE/src/views/softwareCatalog/SoftwareCatalogList.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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">
Expand All @@ -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
Expand Down Expand Up @@ -243,8 +245,6 @@
item.isShow = false;
})
catalogList.value = response.data;
console.log("catalogList.value : ", catalogList.value)
} catch(error) {
console.log(error)
toast.error('데이터를 가져올 수 없습니다.')
Expand All @@ -253,7 +253,6 @@
const groupedData = (catalogRefData: any) => {
return catalogRefData.reduce((acc:any, item:any) => {
// item의 referenceType을 키로 사용
if (!acc[item.referenceType]) {
acc[item.referenceType] = [];
}
Expand Down Expand Up @@ -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>
Expand Down
140 changes: 95 additions & 45 deletions applicationFE/src/views/softwareCatalog/components/softwareCatalogForm.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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" />
Expand All @@ -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">
Expand All @@ -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>
Expand Down Expand Up @@ -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"
Expand All @@ -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>
Expand Down

0 comments on commit 4e2bbd6

Please sign in to comment.