APIInterface Detail UI SyncAsync 기능 추가.
This commit is contained in:
daekuk
@@ -101,16 +101,31 @@
|
||||
standardMessageItems: [],
|
||||
inboundResponseStandardMessageItems: [],
|
||||
fromResponseAdapter: '',
|
||||
toResponseAdapter: '',
|
||||
inboundResponseHttpMethod: '',
|
||||
inboundResponseRestPath: '',
|
||||
syncAsyncType: 'sync'
|
||||
outboundResponseHttpMethod: '',
|
||||
outboundResponseRestPath: '',
|
||||
syncAsyncType: 'sync',
|
||||
wordType: '1',
|
||||
requestType:'S'
|
||||
},
|
||||
|
||||
// 컴퓨티드 프로퍼티
|
||||
get showInboundResponse() {
|
||||
return this.apiInterface.syncAsyncType === 'asyncSync';
|
||||
},
|
||||
|
||||
// 컴퓨티드 프로퍼티
|
||||
get showOutboundResponse() {
|
||||
return this.apiInterface.syncAsyncType === 'syncAsync';
|
||||
},
|
||||
}));
|
||||
|
||||
// 요청/응답 disable 처리.
|
||||
Alpine.store('formState', {
|
||||
isReqResDisabled: false
|
||||
});
|
||||
});
|
||||
|
||||
// Alpine 컴포넌트 접근을 위한 유틸리티 함수
|
||||
@@ -136,6 +151,7 @@
|
||||
new makeOptions("ADPTRBZWKGROUPNAME","ADPTRBZWKGROUPDESC").setObj($("select[name=fromAdapter]")).setFormat(codeName3OptionFormat).setNoValueInclude(true).setAttr('std','ADPTRMSGPTRNCD').setData(json.fromList).rendering();
|
||||
new makeOptions("ADPTRBZWKGROUPNAME","ADPTRBZWKGROUPDESC").setObj($("select[name=fromResponseAdapter]")).setFormat(codeName3OptionFormat).setNoValueInclude(true).setData(json.toList).rendering();
|
||||
new makeOptions("ADPTRBZWKGROUPNAME","ADPTRBZWKGROUPDESC").setObj($("select[name=toAdapter]")).setFormat(codeName3OptionFormat).setNoValueInclude(true).setData(json.toList).rendering();
|
||||
new makeOptions("ADPTRBZWKGROUPNAME","ADPTRBZWKGROUPDESC").setObj($("select[name=toResponseAdapter]")).setFormat(codeName3OptionFormat).setNoValueInclude(true).setData(json.fromList).rendering();
|
||||
//if(key == "") setSearchable(selectName); // 콤보에 searchable 설정
|
||||
|
||||
if (typeof callback === 'function') {
|
||||
@@ -196,27 +212,33 @@
|
||||
|
||||
// 어댑터 설정 정보 객체에 인바운드 응답 관련 설정 추가
|
||||
const adapterConfig = {
|
||||
inbound: {
|
||||
ioType: 'inbound',
|
||||
methodSelectId: '#inboundHttpMethod',
|
||||
restPathInputId: '#inboundRestPath',
|
||||
adapterUrlId: '#fromAdapterUrl',
|
||||
},
|
||||
outbound: {
|
||||
ioType: 'outbound',
|
||||
methodSelectId: '#outboundHttpMethod',
|
||||
restPathInputId: '#outboundRestPath',
|
||||
adapterUrlId: '#toAdapterUrl',
|
||||
standardOptionsId: '#standardOutboundOptions',
|
||||
commonFieldId: '#commonFieldPart'
|
||||
},
|
||||
inboundResponse: {
|
||||
methodSelectId: '#inboundResponseHttpMethod',
|
||||
restPathInputId: '#inboundResponseRestPath',
|
||||
adapterUrlId: '#fromResponseAdapterUrl',
|
||||
standardOptionsId: '#inboundResponseRestPart',
|
||||
commonFieldId: '#inboundResponseCommonFieldPart'
|
||||
}
|
||||
inbound: {
|
||||
ioType: 'inbound',
|
||||
methodSelectId: '#inboundHttpMethod',
|
||||
restPathInputId: '#inboundRestPath',
|
||||
adapterUrlId: '#fromAdapterUrl',
|
||||
},
|
||||
outbound: {
|
||||
ioType: 'outbound',
|
||||
methodSelectId: '#outboundHttpMethod',
|
||||
restPathInputId: '#outboundRestPath',
|
||||
adapterUrlId: '#toAdapterUrl',
|
||||
standardOptionsId: '#standardOutboundOptions',
|
||||
commonFieldId: '#commonFieldPart'
|
||||
},
|
||||
inboundResponse: {
|
||||
methodSelectId: '#inboundResponseHttpMethod',
|
||||
restPathInputId: '#inboundResponseRestPath',
|
||||
adapterUrlId: '#fromResponseAdapterUrl',
|
||||
standardOptionsId: '#inboundResponseRestPart',
|
||||
commonFieldId: '#inboundResponseCommonFieldPart'
|
||||
},
|
||||
outboundResponse: {
|
||||
methodSelectId: '#outboundResponseHttpMethod',
|
||||
restPathInputId: '#outboundResponseRestPath',
|
||||
adapterUrlId: '#toResponseAdapterUrl',
|
||||
standardOptionsId: '#outboundResponseRestPart'
|
||||
}
|
||||
};
|
||||
|
||||
// 어댑터 선택 변경 시 호출되는 함수 수정
|
||||
@@ -373,9 +395,13 @@
|
||||
$("select[name=authType]" ).val(data["authType"]);
|
||||
}
|
||||
$("select[name=fromResponseAdapter]" ).val(data["fromResponseAdapter"]);//fromResponseAdapter
|
||||
|
||||
$("select[name=toResponseAdapter]" ).val(data["toResponseAdapter"]);//toResponseAdapter
|
||||
|
||||
$('#inboundHttpMethod').val(data.inboundHttpMethod);
|
||||
$('#outboundHttpMethod').val(data.outboundHttpMethod);
|
||||
$('#inboundResponseHttpMethod').val(data.inboundResponseHttpMethod);
|
||||
$('#outboundResponseHttpMethod').val(data.outboundResponseHttpMethod);
|
||||
$('#svcLogLvelNo').val(data.svcLogLvelNo);
|
||||
|
||||
if(data['inboundRequestLayout']!=null && data['outboundRequestLayout']!=null){
|
||||
@@ -420,6 +446,12 @@
|
||||
const inOutType = data['eaiSvcName'].slice(-1);
|
||||
$('#inOutType').val(inOutType);
|
||||
|
||||
$("input[name=btnRadioReqRes][value='" + sendRecvType + "']").prop("checked", true);
|
||||
Alpine.store('formState').isReqResDisabled = true;
|
||||
$("input[name=btnRadioInOut][value='" + inOutType + "']").prop("checked", true);
|
||||
$("input[name=btnRadioInOut]").prop("disabled", true);
|
||||
|
||||
|
||||
$('#eaiBzwkDstcd').attr("readonly", "readonly");
|
||||
$('#eaiSvcName').attr("readonly", "readonly");
|
||||
$('#sendRecvType').attr("readonly", "readonly");
|
||||
@@ -439,6 +471,7 @@
|
||||
$('#cloneOrgInterfaceIdDesc').text(eaiSvcName);
|
||||
|
||||
$("#fromResponseAdapter").change();
|
||||
$("#toResponseAdapter").change();
|
||||
},
|
||||
error:function(e){
|
||||
alert(e.responseText);
|
||||
@@ -1057,6 +1090,14 @@
|
||||
}
|
||||
});
|
||||
|
||||
$("#toResponseAdapter").change(function() {
|
||||
const alpineData = getApiInterface();
|
||||
if (alpineData.syncAsyncType === 'syncAsync') {
|
||||
const adapterGroupName = $(this).val();
|
||||
adapterSelectChange('outboundResponse', adapterGroupName);
|
||||
}
|
||||
});
|
||||
|
||||
$('#outboundRestPath').on('input', function() {
|
||||
checkTagVariableUrl();
|
||||
});
|
||||
@@ -1283,10 +1324,10 @@
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control" id="eaiSvcName" name="eaiSvcName" required>
|
||||
<span class="input-group-text" id="sendRecvTypeSpan" style="padding: 0; border: none;">
|
||||
<input type="text" id="sendRecvType" name="sendRecvType" class="ignore form-control" readonly="readonly" style="width: 40px; text-align: center; border-radius: 0; margin-left: -1px;" value="S">
|
||||
<input type="text" id="sendRecvType" name="sendRecvType" class="ignore form-control" readonly="readonly" style="width: 40px; text-align: center; border-radius: 0; margin-left: -1px;" :value="apiInterface.requestType">
|
||||
</span>
|
||||
<span class="input-group-text" id="inOutTypeSpan" style="padding: 0; border: none;">
|
||||
<input type="text" id="inOutType" name="inOutType" class="ignore form-control" readonly="readonly" style="width: 40px; text-align: center; border-radius: 0; margin-left: -1px;" value="1">
|
||||
<input type="text" id="inOutType" name="inOutType" class="ignore form-control" readonly="readonly" style="width: 40px; text-align: center; border-radius: 0; margin-left: -1px;" :value="apiInterface.wordType">
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1303,47 +1344,81 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
<div class="col-md-12">
|
||||
<!-- 기존 인터페이스 타입 영역을 Alpine 컴포넌트로 감싸기 -->
|
||||
<fieldset class="groupbox-border">
|
||||
<legend class="groupbox-border">INTERFACE TYPE</legend>
|
||||
<div class="row">
|
||||
<div class="form-group col-md-3">
|
||||
<label for="eaiBzwkDstcd"><span class="material-icons-outlined">sync</span> Sync/Async 타입</label><br>
|
||||
<div class="btn-group" id="btnGroupSyncAsync" role="group">
|
||||
<input type="radio"
|
||||
class="btn-check"
|
||||
name="btnRadioSyncAsync"
|
||||
id="btnTypeSync"
|
||||
value="sync"
|
||||
x-model="apiInterface.syncAsyncType">
|
||||
<label class="btn btn-outline-primary" for="btnTypeSync">
|
||||
<i class="bi bi-arrow-left-right"></i> Sync
|
||||
</label>
|
||||
<div class="btn-group" id="btnGroupSyncAsync" role="group">
|
||||
<input type="radio"
|
||||
class="btn-check"
|
||||
name="btnRadioSyncAsync"
|
||||
id="btnTypeSync"
|
||||
value="sync"
|
||||
x-model="apiInterface.syncAsyncType">
|
||||
<label class="btn btn-outline-primary" for="btnTypeSync">
|
||||
<i class="bi bi-arrow-repeat"></i> Sync
|
||||
</label>
|
||||
|
||||
<input type="radio"
|
||||
class="btn-check"
|
||||
name="btnRadioSyncAsync"
|
||||
id="btnTypeAsync"
|
||||
value="async"
|
||||
x-model="apiInterface.syncAsyncType">
|
||||
<label class="btn btn-outline-primary" for="btnTypeAsync">
|
||||
<i class="bi bi-arrow-left-right"></i> Async
|
||||
</label>
|
||||
|
||||
<input type="radio"
|
||||
class="btn-check"
|
||||
name="btnRadioSyncAsync"
|
||||
id="btnTypeAsyncSync"
|
||||
value="asyncSync"
|
||||
x-model="apiInterface.syncAsyncType">
|
||||
<label class="btn btn-outline-primary" for="btnTypeAsyncSync">
|
||||
<i class="bi bi-arrow-return-left"></i> A > S
|
||||
</label>
|
||||
|
||||
<input type="radio"
|
||||
class="btn-check"
|
||||
name="btnRadioSyncAsync"
|
||||
id="btnTypeSyncAsync"
|
||||
value="syncAsync"
|
||||
x-model="apiInterface.syncAsyncType">
|
||||
<label class="btn btn-outline-primary" for="btnTypeSyncAsync">
|
||||
<i class="bi bi-share-fill"></i> S > A
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group col-md-3">
|
||||
<label for="eaiBzwkDstcd">요청/응답 구분</label><br>
|
||||
<div class="btn-group" role="group" aria-label="Basic radio toggle button group">
|
||||
<input type="radio" class="btn-check" name="btnRadioReqRes" id="btnTypeRequest" x-model="apiInterface.requestType"
|
||||
value="S" :disabled="apiInterface.syncAsyncType !== 'async' || $store.formState.isReqResDisabled" checked>
|
||||
<label class="btn btn-outline-primary" for="btnTypeRequest"><i class="bi bi-arrow-bar-right"></i> 요청</label>
|
||||
|
||||
<input type="radio"
|
||||
class="btn-check"
|
||||
name="btnRadioSyncAsync"
|
||||
id="btnTypeAsync"
|
||||
value="async"
|
||||
x-model="apiInterface.syncAsyncType">
|
||||
<label class="btn btn-outline-primary" for="btnTypeAsync">
|
||||
<i class="bi bi-arrow-repeat"></i> Async
|
||||
</label>
|
||||
<input type="radio" class="btn-check" name="btnRadioReqRes" id="btnTypeResponse" x-model="apiInterface.requestType"
|
||||
value="R" :disabled="apiInterface.syncAsyncType !== 'async' || $store.formState.isReqResDisabled">
|
||||
<label class="btn btn-outline-primary" for="btnTypeResponse"><i class="bi bi-arrow-bar-left"></i> 응답</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group col-md-3">
|
||||
<label for="eaiBzwkDstcd">당/타발 구분</label><br>
|
||||
<div class="btn-group" role="group" aria-label="Basic radio toggle button group">
|
||||
<input type="radio" class="btn-check" name="btnRadioInOut" id="btnTypeInword" value="1" x-model="apiInterface.wordType" checked>
|
||||
<label class="btn btn-outline-primary" for="btnTypeInword"><i class="bi bi-arrow-right-circle"></i> 당발</label>
|
||||
|
||||
<input type="radio"
|
||||
class="btn-check"
|
||||
name="btnRadioSyncAsync"
|
||||
id="btnTypeAsyncSync"
|
||||
value="asyncSync"
|
||||
x-model="apiInterface.syncAsyncType">
|
||||
<label class="btn btn-outline-primary" for="btnTypeAsyncSync">
|
||||
<i class="bi bi-arrow-return-left"></i> A > S
|
||||
</label>
|
||||
</div>
|
||||
<input type="radio" class="btn-check" name="btnRadioInOut" id="btnTypeOutword" value="2" x-model="apiInterface.wordType">
|
||||
<label class="btn btn-outline-primary" for="btnTypeOutword"><i class="bi bi-arrow-left-circle"></i> 타발</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="col-md-7">
|
||||
<div class="col-md-10">
|
||||
<fieldset class="groupbox-border">
|
||||
<legend class="groupbox-border">TRANSACTION OPTIONS</legend>
|
||||
<div class="row">
|
||||
@@ -1408,21 +1483,37 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row"
|
||||
x-show="showInboundResponse">
|
||||
<div class="row">
|
||||
<div class="form-group col-md-6">
|
||||
<label for="fromResponseAdapter">
|
||||
<span class="material-icons">keyboard_return</span>
|
||||
INBOUND (ASYNC) 응답 어댑터
|
||||
</label>
|
||||
<select id="fromResponseAdapter"
|
||||
class="form-select"
|
||||
name="fromResponseAdapter"
|
||||
required
|
||||
:disabled="!showInboundResponse">
|
||||
</select>
|
||||
<small id="fromResponseAdapterUrl" class="form-text text-muted"></small>
|
||||
</div>
|
||||
<div x-show="showInboundResponse">
|
||||
<label for="fromResponseAdapter">
|
||||
<span class="material-icons">keyboard_return</span>
|
||||
INBOUND (ASYNC) 응답 어댑터
|
||||
</label>
|
||||
<select id="fromResponseAdapter"
|
||||
class="form-select"
|
||||
name="fromResponseAdapter"
|
||||
required
|
||||
:disabled="!showInboundResponse">
|
||||
</select>
|
||||
<small id="fromResponseAdapterUrl" class="form-text text-muted"></small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group col-md-6">
|
||||
<div x-show="showOutboundResponse">
|
||||
<label for="toResponseAdapter">
|
||||
<span class="material-icons">keyboard_return</span>
|
||||
OUTBOUND (ASYNC) 응답 어댑터
|
||||
</label>
|
||||
<select id="toResponseAdapter"
|
||||
class="form-select"
|
||||
name="toResponseAdapter"
|
||||
required
|
||||
:disabled="!showOutboundResponse">
|
||||
</select>
|
||||
<small id="toResponseAdapterUrl" class="form-text text-muted"></small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
@@ -1528,34 +1619,34 @@
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<fieldset class="groupbox-border">
|
||||
<legend class="groupbox-border">OUTBOUND ROUTING</legend>
|
||||
<div id="outboundRoutingContent">
|
||||
<div class="row" id="standardOutboundOptions">
|
||||
<div class="form-group col-md-4">
|
||||
<label for="outboundHttpMethod">
|
||||
<span class="material-icons">http</span>
|
||||
송신 메소드
|
||||
</label>
|
||||
<select id="outboundHttpMethod" class="form-select" name="outboundHttpMethod" disabled>
|
||||
<option value="get">GET</option>
|
||||
<option value="post">POST</option>
|
||||
<option value="put">PUT</option>
|
||||
<option value="patch">PATCH</option>
|
||||
<option value="delete">DELETE</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group col-md-8">
|
||||
<label for="outboundRestPath">
|
||||
<span class="material-icons">link</span>
|
||||
<span class="badge badge-warning" id="tagVariableUrl" style="display: none">가변</span>
|
||||
송신 REST PATH(URL)
|
||||
</label>
|
||||
<input type="text" class="form-control" id="outboundRestPath"
|
||||
name="outboundRestPath" disabled>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<fieldset class="groupbox-border">
|
||||
<legend class="groupbox-border">OUTBOUND ROUTING</legend>
|
||||
<div id="outboundRoutingContent">
|
||||
<div class="row" id="standardOutboundOptions">
|
||||
<div class="form-group col-md-4">
|
||||
<label for="outboundHttpMethod">
|
||||
<span class="material-icons">http</span>
|
||||
송신 메소드
|
||||
</label>
|
||||
<select id="outboundHttpMethod" class="form-select" name="outboundHttpMethod" disabled>
|
||||
<option value="get">GET</option>
|
||||
<option value="post">POST</option>
|
||||
<option value="put">PUT</option>
|
||||
<option value="patch">PATCH</option>
|
||||
<option value="delete">DELETE</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group col-md-8">
|
||||
<label for="outboundRestPath">
|
||||
<span class="material-icons">link</span>
|
||||
<span class="badge badge-warning" id="tagVariableUrl" style="display: none">가변</span>
|
||||
송신 REST PATH(URL)
|
||||
</label>
|
||||
<input type="text" class="form-control" id="outboundRestPath"
|
||||
name="outboundRestPath" disabled>
|
||||
</div>
|
||||
</div>
|
||||
<div id="commonFieldPart" class="row" style="display:none">
|
||||
<div class="form-group col-md-12">
|
||||
<label for="standardMessageItemsButton">
|
||||
@@ -1569,10 +1660,48 @@
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="outboundResponseMethodPathRow"
|
||||
x-show="showOutboundResponse">
|
||||
<div id="outboundResponseRestPart" class="row">
|
||||
<div class="form-group col-md-4">
|
||||
<label for="outboundResponseHttpMethod">
|
||||
<span class="material-icons">http</span>
|
||||
응답 수신 메소드
|
||||
</label>
|
||||
<select id="outboundResponseHttpMethod" class="form-select" name="outboundResponseHttpMethod" disabled>
|
||||
<option value="get">GET</option>
|
||||
<option value="post">POST</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group col-md-8">
|
||||
<label for="outboundResponseRestPath">
|
||||
<span class="material-icons">link</span>
|
||||
응답 수신 REST PATH(URL)
|
||||
</label>
|
||||
<input type="text" class="form-control" id="outboundResponseRestPath" name="outboundResponseRestPath" disabled>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="outboundResponseCommonFieldPart" class="row" style="display:none">
|
||||
<div class="form-group col-md-12">
|
||||
<label for="standardMessageItemsButton">
|
||||
<span class="material-icons-outlined">view_list</span>
|
||||
표준전문 공통부 값
|
||||
</label>
|
||||
<div class="d-grid gap-2">
|
||||
<button type="button" id="standardMessageItemsButton" class="btn btn-primary"
|
||||
data-bs-toggle="modal" data-bs-target="#stdCommonValueModal">
|
||||
수정
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
<div class="collapse" id="collapseTransform">
|
||||
<div class="row">
|
||||
|
||||
Reference in New Issue
Block a user