This form is designed to handle different message type.
My problem is lookup select component that fetches and displays the counterparty information based on a query condition for ex cpty_id and tp_platform these fields are causing issues.
I need to make changes in the form code to make sure that every input field within the same row has the same size but I am so unable to do so, Can someone help me in this regard ?
Please find the attached picture for more details.
<portal-form class="q-gutter-md" style="max-width: 1000px; border-radius: 10px; box-shadow: 1 0 10px rgba(0, 0, 0, 0.1); background-color: white; padding: 1px;">
<!-- Radio Select for Different Recall Message Types-->
<div style="font-weight: bold;">
<radio-select
field="recallType"
label="Message Type:"
:options="recallTypeOptions"
required
@update:value="updateStatus"
style="margin-bottom: 20px; font-size: 18px; color: #333;"
/>
</div>
<!-- Conditional rendering based on selected recall type -->
<template v-if="formData.recallType">
<!-- Mandatory Fields -->
<div style="margin-bottom: 20px; font-size: 18px; font-weight:bold; color: #333;">{{ i18n.translate('mandatoryFields') }}</div>
<div class="row" style="margin-bottom: 20px;">
<text-input field="trade_ref_no" required :max-length="16" class="col-6" style="border-radius: 5px; padding: 23px; border: 1px solid #ccc; box-sizing: border-box;"/>
<lookup-select field="cpty_id" result-field="userIdentifierOrganisationAddress" :query-condition="counterpartyQueryCondition" required class="col-6" style="border-radius: 5px; padding: 10px; border: 1px solid #ccc; box-sizing: border-box;"/>
</div>
<div class="row" style="margin-bottom: 20px;">
<text-input field="cusip_isin" required class="col-6" :max-length="12" style="border-radius: 5px; padding: 10px; border: 1px solid #ccc; box-sizing: border-box;"/>
<number-input field="qty" required min="0.000001" max="999999999.999999" fixed-fraction-digits="6" class="col-6" style="border-radius: 5px; padding: 10px; border: 1px solid #ccc; box-sizing: border-box;"/>
</div>
<div class="row" style="margin-bottom: 20px;">
<text-input v-if="showRejectionField" field="rejection_reason" exists :max-length="40" class="col-12" style="border-radius: 5px; padding: 10px; border: 1px solid #ccc; box-sizing: border-box;"/>
</div>
<!-- Added space -->
<div style="margin-bottom: 40px;"></div>
<!-- Nested Sections if all mandatory fields are filled -->
<template v-if="formData.trade_ref_no && formData.cpty_id && formData.cusip_isin && formData.qty">
<!-- Recall Party Details -->
<div style="margin-top: 30px; font-size: 18px; font-weight:bold; color: #333;">{{ i18n.translate('partyDetails') }}</div>
<div class="q-pl-md">
<div class="row" style="margin-bottom: 20px;">
<text-input field="cuid" upper-case :max-length="4" class="col-4" style="border-radius: 5px; padding: 10px; border: 1px solid #ccc; box-sizing: border-box;"/>
<text-input field="borrower_type" :max-length="20" class="col-4" style="border-radius: 5px; padding: 10px; border: 1px solid #ccc; box-sizing: border-box;"/>
<!-- New Reference Data Setup for TP Platform -->
<lookup-select field="tp_platform" result-field="tp_platform" :query-condition="tpPlatformQueryCondition" class="col-6" style="border-radius: 5px; padding: 10px; border: 1px solid #ccc; box-sizing: border-box;"/>
</div>
<div class="row" style="margin-bottom: 20px;">
<text-input field="client_lei" :max-length="20" class="col-6" style="border-radius: 5px; padding: 10px; border: 1px solid #ccc; box-sizing: border-box;"/>
<text-input field="cpty_lei" :max-length="20" class="col-6" style="border-radius: 5px; padding: 10px; border: 1px solid #ccc; box-sizing: border-box;"/>
</div>
</div>
<!-- Add space -->
<div style="margin-bottom: 40px;"></div>
<!-- Recall Trade Details -->
<div style="margin-top: 30px; font-size: 18px; font-weight:bold; color: #333;">{{ i18n.translate('tradeDetails') }}</div>
<div class="q-pl-md">
<div class="row" style="margin-bottom: 20px;">
<text-input field="ticker" :max-length="4" class="col-4" style="border-radius: 5px; padding: 10px; border: 1px solid #ccc; box-sizing: border-box;"/>
<number-input field="rate" min="0.000001" max="999.999999" fixed-fraction-digits="6" class="col-4" style="border-radius: 5px; padding: 10px; border: 1px solid #ccc; box-sizing: border-box;"/>
<number-input field="lot" min="0.000001" max="999999999.999999" fixed-fraction-digits="6" class="col-4" style="border-radius: 5px; padding: 10px; border: 1px solid #ccc; box-sizing: border-box;"/>
</div>
<div class="row" style="margin-bottom: 20px;">
<single-select field="dividend_rate" :options="dividend_rateOptions" class="col-4" style="border-radius: 5px; padding: 10px; border: 1px solid #ccc; box-sizing: border-box;"/>
<single-select field="collateral_type" :options="collateral_typeOptions" class="col-4" style="border-radius: 5px; padding: 10px; border: 1px solid #ccc; box-sizing: border-box;"/>
<single-select field="trade_pledge" :options="trade_or_pledgeOptions" class="col-4" style="border-radius: 5px; padding: 10px; border: 1px solid #ccc; box-sizing: border-box;"/>
</div>
<div class="row" style="margin-bottom: 20px;">
<text-input field="internal_trade_id" :max-length="16" class="col-6" style="border-radius: 5px; padding: 10px; border: 1px solid #ccc; box-sizing: border-box;"/>
<text-input field="trade_description" :max-length="40" class="col-6" style="border-radius: 5px; padding: 10px; border: 1px solid #ccc; box-sizing: border-box;"/>
</div>
</div>
<!-- Add space -->
<div style="margin-bottom: 40px;"></div>
<!-- Recall Dates Details -->
<div style="margin-top: 30px; font-size: 18px; font-weight:bold; color: #333;">{{ i18n.translate('datesDetails') }}</div>
<div class="q-pl-md">
<div class="row" style="margin-bottom: 20px;">
<date-input field="trade_date" class="col-4" style="border-radius: 5px; padding: 10px; border: 1px solid #ccc; box-sizing: border-box;"/>
<date-input field="recall_date" class="col-4" style="border-radius: 5px; padding: 10px; border: 1px solid #ccc; box-sizing: border-box;"/>
<date-input field="settlement_date" class="col-4" style="border-radius: 5px; padding: 10px; border: 1px solid #ccc; box-sizing: border-box;"/>
</div>
</div>
<!-- Add space -->
<div style="margin-bottom: 40px;"></div>[](https://i.sstatic.net/AJ6XOmd8.png)
<!-- Recall Additional Details -->
<div style="margin-top: 30px; font-size: 18px; font-weight:bold; color: #333;">{{ i18n.translate('additionalDetails') }}</div>
<div class="q-pl-md">
<div class="row" style="margin-bottom: 20px;">
<text-input field="open_text_field" :max-length="40" class="col-12" style="border-radius: 5px; padding: 8px; border: 2px solid #ccc; box-sizing: border-box;"/>
</div>
<div class="row" style="margin-bottom: 20px;">
<text-input v-if="showStatusField" field="status" readonly exists class="col-12" style="border-radius: 5px; padding: 10px; border: 1px solid #ccc; box-sizing: border-box;"/>
</div>
</div>
</template>
</template>
</portal-form>
script
export const config: FormV2 = {
onLoad(setup) {
setup.initMessageForm();
if (this.message?.formDataFieldData) {
setup.setInitialData(this.message.formDataFieldData);
}
this.filterCounterpartyOptions();
},
beforeSend(action) {
action.setParameter('payload', JSON.stringify(this.formData));
action.setParameter('recallKind', this.formData.recallKind);
action.setFieldUpdate(this.changes());
},
translations() {
return {
'mandatoryFields': { en: 'Mandatory Fields', de: 'Zahlungsdetails' },
'tradeDetails': { en: 'Trade Details', de: 'Zahlungsdetails' },
'finalDetails': { en: 'Final Details', de: 'Zahlungsdetails' },
'additionalDetails': { en: 'Additional Details', de: 'Zahlungsdetails' },
'datesDetails': { en: 'Dates', de: 'Zahlungsdetails' },
'partyDetails': { en: 'Parties', de: 'Zahlungsempfänger' }
};
},
computed: {
dividend_rateOptions() {
return ['C', 'NC', 'OT'];
},
collateral_typeOptions() {
return ['C', 'NC', 'OT'];
},
trade_or_pledgeOptions() {
return ['T', 'P'];
},
recallTypeOptions() {
return [
{ value: 'recall_initiate', label: 'Initiate' },
{ value: 'recall_accept', label: 'Accept' },
{ value: 'recall_reject', label: 'Reject' },
{ value: 'recall_cancel', label: 'Cancel' },
{ value: 'recall_close', label: 'Close' }
];
},
showStatusField() {
return this.formData.recallType !== 'recall_initiate';
},
showRejectionField() {
return this.formData.recallType === 'recall_reject';
},
counterpartyQueryCondition() {
const currentOrgKey = this.context.userOrganisation.key; // Replace with actual context key
return {
and: [
{ fieldKey: '$currentStep', terms: ['ACTIVE'] },
{ fieldKey: '$recordType', terms: ['recall_user_identifier'] }
]
};
},
tpPlatformQueryCondition() {
return {
and: [
{ fieldKey: '$currentStep', terms: ['ACTIVE'] },
{ fieldKey: '$recordType', terms: ['recall_tp'] }
]
};
}
},
methods: {
updateStatus(value) {
if (value === 'recall_initiate') {
this.formData.status = '';
this.formData.recallKind = 'Initiate';
} else if (value === 'recall_accept') {
this.formData.status = 'Accepted';
this.formData.recallKind = 'Accept';
} else if (value === 'recall_reject') {
this.formData.status = 'Rejected';
this.formData.recallKind = 'Reject';
} else if (value === 'recall_cancel') {
this.formData.status = 'Cancelled';
this.formData.recallKind = 'Cancel';
} else if (value === 'recall_close') {
this.formData.status = 'Closed';
this.formData.recallKind = 'Close';
}
},
filterCounterpartyOptions() {
const currentOrgKey = this.context.userOrganisation.key; // to be removed
// userIdentifierOrganisationAddress check
this.userIdentifierOrganisationAddress = this.userIdentifierOrganisationAddress.filter(
option => option.key !== currentOrgKey
);
}
},
data() {
return {
userIdentifierOrganisationAddress: [] // to be removed
}
};
I adjusted the class and style attributes to ensure that these fields are aligned correctly. but no luck