Issue Displaying Vendor Admins in Selected Vendors Tab

kabir.slashash · December 31, 2024, 5:30am

I am facing an issue in my Wappler project where the admins of a vendor are not displaying under the "Selected Vendors" tab after selecting a vendor from the "Available Vendors" list. By default, when the page loads, the admins are displayed correctly under the "Selected Vendors" tab, but as soon as I interact with the selection, the admins disappear.

My Environment:

Wappler Version: 6.8.0
Operating System: Windows 11
Node.js Version: 22.9.0
App Connect Version: 2.0.19

Current Code Snippet:

Here’s the section of my code that handles the selection and display of vendors and their admins:

<!-- Wappler include head-page="layouts/main" is="dmx-app" id="manage" appConnect="local" bootstrap5="cdn" components="{dmxTagify:{},dmxValidator:{},dmxFormatter:{},dmxSockets:{},dmxFormRepeat:{},dmxBootstrap5Modal:{}}" -->
<meta name="ac:route" content="/rfp/manage/:rfp_id">

<dmx-value id="varActiveTab" dmx-bind:value="'info'"></dmx-value>
<dmx-serverconnect id="scRfp" url="/api/rfp/get" dmx-param:rfp_id="query.rfp_id" dmx-on:success="scMasterData.load({vendor_type: scRfp.data.rfp.vendor_type})"></dmx-serverconnect>
<dmx-serverconnect id="scMasterData" url="/api/common/master-data" dmx-param:data="'dimensions,vendors,users,rfp_dimensions'" noload="true" dmx-param:entity_id="scRfp.data.rfp.company_id" dmx-param:rfp_id="query.rfp_id" dmx-on:success="run({condition:{outputType:'boolean',if:`varActiveTab.value==\'select_vendors\'`,then:{steps:{run:{outputType:'text',action:`scVendorAdmins.load({vendor_ids: scMasterData.data.vendors.values(\'id\')})`}}}}})"></dmx-serverconnect>
<dmx-serverconnect id="scQuestions" url="/api/rfp/question-profiles/list" noload="true" dmx-param:dimension_id="formDimensions.tagDimensions.values" dmx-on:success="varActiveTab.setValue('questions')" dmx-param:rfp_id="query.rfp_id"></dmx-serverconnect>
<dmx-serverconnect id="scRfpInvitation" url="/api/rfp/manage/invitation/list" dmx-param:rfp_id="query.rfp_id" noload="true" dmx-on:success="run({condition:{outputType:'boolean',if:`varActiveTab.value==\'questions\'`,then:{steps:[{wait:{delay:100}},{run:{outputType:'text',action:`scVendorAdmins.load({vendor_ids: scMasterData.data.vendors.values('id')});varActiveTab.setValue(\'select_vendors\')`}}]},else:{steps:{run:{outputType:'text',action:`varActiveTab.setValue(\'invitation_vendors\')`}}}}})"></dmx-serverconnect>
<dmx-serverconnect id="scVendorAdmins" url="/api/vendors/admins" noload="true"></dmx-serverconnect>
<dmx-array id="arrInvSelVendors" dmx-bind:items="scRfpInvitation.data.list.values('id')"></dmx-array>

   <!-- Select Vendors Tab -->
            <div dmx-show="varActiveTab.value=='select_vendors'">
                <div class="row gy-4">
                    <!-- Left Section: Vendor List -->
                    <div class="col-md-6">
                        <div class="card shadow-sm border-0">
                            <div class="bg-primary-subtle card-header d-flex justify-content-between align-items-center">
                                <h4 class="mb-0">Available Vendors</h4>
                                <button id="btnSelectAll" class="btn btn-outline-primary btn-sm d-flex align-items-center" dmx-on:click="run([{run:{outputType:'text',action:`arrInvSelVendors.empty()`}},{wait:{delay:100}},{repeat:{name:'r_all_vendors',output:true,outputType:'array',repeat:`scMasterData.data.vendors`,outputFields:[],exec:{steps:{run:{outputType:'text',action:`arrInvSelVendors.addUniq(id)`}}}}}])">
                                    <i class="fa-regular fa-check-double me-2"></i> Select All
                                </button>
                            </div>
                            <div class="card-body">
                                <!-- Search Bar -->
                                <div class="input-group mb-3">
                                    <span class="input-group-text"><i class="fa-regular fa-search"></i></span>
                                    <input type="text" id="txtAvalibleSearchTerm" class="form-control" placeholder="Search vendors...">
                                </div>
                                <!-- Conditional Message for No Vendors -->
                                <div class="text-center text-muted" dmx-show="scMasterData.data.vendors.count()==0||!scMasterData.data.vendors||(txtAvalibleSearchTerm.value &amp;&amp; scMasterData.data.vendors.filter(`entity_name.lowercase().contains(txtAvalibleSearchTerm.value.trim().lowercase())`).count() &lt;= 0)">
                                    <i class="fa-regular fa-face-frown fa-2x mb-2"></i>
                                    <p>No vendors available.</p>
                                </div>
                                <ul id="repeatVendorList" class="list-group list-group-flush overflow-y-auto" style="height: 60vh;" is="dmx-repeat" dmx-bind:repeat="scMasterData.data.vendors.filter(`entity_name.lowercase().contains(txtAvalibleSearchTerm.value.trim().lowercase())`)" dmx-show="scMasterData.data.vendors.count()&gt;0">
                                    <dmx-value id="varParentId" dmx-bind:value="id"></dmx-value>
                                    <li role="button" dmx-bind:id="id" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center" dmx-on:click="arrInvSelVendors.addUniq(id)">
                                        <div class="d-flex flex-column">
                                            <span>{{entity_name}}</span>
                                            <div class="d-flex mt-2 gap-1" is="dmx-repeat" id="repeatVendorAdmins" dmx-bind:repeat="scVendorAdmins.data.list.where(`entity_id`, varParentId.value, '==')">
                                                <span class="badge bg-dark" dmx-bind:title="full_name">
                                                    {{full_name}}
                                                </span>
                                            </div>
                                        </div>
                                        <i dmx-show="arrInvSelVendors.items.contains(id)" class="fa-circle-check fa-lg fa-regular text-success"></i>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <!-- Right Section: Selected Vendors -->
                    <div class="col-md-6">
                        <div class="card shadow-sm border-0">
                            <div class="bg-success-subtle card-header d-flex justify-content-between align-items-center">
                                <h4 class="mb-0">Selected Vendors</h4>
                                <button id="btnRemoveAll" class="btn btn-outline-danger btn-sm d-flex align-items-center" dmx-on:click="arrInvSelVendors.empty()">
                                    <i class="fa-regular fa-trash-alt me-2"></i> Remove All
                                </button>
                            </div>
                            <div class="card-body">
                                <!-- Search Bar -->
                                <div class="input-group mb-3">
                                    <span class="input-group-text"><i class="fa-regular fa-search"></i></span>
                                    <input type="text" id="txtSelectedSearchTerm" class="form-control" placeholder="Search selected vendors...">
                                </div>
                                <!-- Conditional Message for No Selected Vendors -->
                                <div class="text-center text-muted" dmx-show="arrInvSelVendors.items.count() == 0 || arrInvSelVendors.items.filter(`$value && scMasterData.data.vendors.where('id', $value, '==')[0].entity_name.lowercase().contains(txtSelectedSearchTerm.value.trim().lowercase())`).count() == 0">
                                    <i class="fa-regular fa-circle-question fa-2x mb-2"></i>
                                    <p>No vendors selected.</p>
                                </div>
                                <ul id="repeatSelVendorsList" class="list-group list-group-flush overflow-y-auto" style="height: 60vh;" is="dmx-repeat" dmx-bind:repeat="arrInvSelVendors.items.filter(`$value &amp;&amp; scMasterData.data.vendors.where('id', $value, '==')[0].entity_name.lowercase().contains(txtSelectedSearchTerm.value.trim().lowercase())`)" dmx-show="arrInvSelVendors.items.count()&gt;0">
                                    <dmx-value id="varSelParentId" dmx-bind:value="$value"></dmx-value>
                                    <li class="list-group-item d-flex justify-content-between align-items-center">
                                        <div class="d-flex flex-column">
                                            <span>{{scMasterData.data.vendors.where('id', $value, '==')[0].entity_name}}</span>
                                            <div class="d-flex mt-2 gap-1" is="dmx-repeat" id="repeatSelVendorAdmins" dmx-bind:repeat="scVendorAdmins.data.list.where(`entity_id`, varSelParentId.value, '==')">
                                                <span class="badge bg-dark" dmx-bind:title="full_name">
                                                    {{full_name}}
                                                </span>
                                            </div>
                                        </div>
                                        <button class="btn btn-sm btn-outline-danger d-flex align-items-center" dmx-on:click="arrInvSelVendors.remove($value)">
                                            <i class="fa-regular fa-trash-can"></i>
                                        </button>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="d-flex w-100 justify-content-center gap-3 mt-4">
                    <button class="btn btn-outline-primary" dmx-on:click="varActiveTab.setValue('questions')" dmx-bind:disabled="state.executing"><i class="fa-regular fa-chevron-left ms-2"></i> Back</button>
                    <button class="btn btn-outline-primary d-flex align-items-center" dmx-show="arrInvSelVendors.count==0" dmx-bind:disabled="state.executing" dmx-on:click="browser1.goto('/rfp/all',true)">
                        Skip <i class="fa fa-forward ms-2"></i>
                    </button>
                    <button class="btn btn-outline-primary" dmx-show="scContents.data.access.rfp_manage.edit && arrInvSelVendors.count&gt;0" dmx-bind:disabled="scRfpInvitation.state.executing" dmx-on:click="scRfpInvitation.load({vendor_ids: arrInvSelVendors.items, rfp_id: query.rfp_id})">Save &amp; Next<i class="fa-regular fa-chevron-right ms-2"></i><span class="spinner-border spinner-border-sm ms-2" dmx-show="scRfpInvitation.state.executing" role="status"></span></button>
                </div>
            </div>

Issue:

On page load, the admins are displayed correctly under the "Selected Vendors" tab.
After selecting a vendor from the "Available Vendors" list, the admins do not appear under the "Selected Vendors" tab as expected.
If I reload the scMasterData API, then the admins are displayed correctly. However, if I create a new vendor and then reload the scMasterData API, the new vendors appear in the "Available Vendors" section, but their admins are not displayed.
also most recent selected or created is showing correct in both side but older one admins get removed or hidden

Expected Output:

When I select a vendor from the "Available Vendors" list, the associated admins should dynamically appear in the "Selected Vendors" tab. The behavior should mirror the default behavior seen on page load.

Steps Taken:

I’ve verified that the scVendorAdmins server action is correctly returning data for the admins.
I suspect the issue lies in how the arrInvSelVendors array and the scVendorAdmins server action are being handled or bound together.
Tried adding manual reloading or refreshing steps in the logic but still no luck.
also if i remove filter or where conditon from admins repeat then works fine but it show admins of all vendors

Can anyone help me ?

Thank you in advance!

kabir.slashash · January 2, 2025, 9:18am

no one know ?

ben · January 2, 2025, 9:45am

I am not sure about this, but it is worth exploring. There are three lines with [0] as part of the argument. This means that only the first result will be taken into consideration. Is that what is required?

1st occurrence:

<div class="text-center text-muted" dmx-show="arrInvSelVendors.items.count() == 0 || arrInvSelVendors.items.filter(`$value && scMasterData.data.vendors.where('id', $value, '==')[0].entity_name.lowercase().contains(txtSelectedSearchTerm.value.trim().lowercase())`).count() == 0">

2nd:

<ul id="repeatSelVendorsList" class="list-group list-group-flush overflow-y-auto" style="height: 60vh;" is="dmx-repeat" dmx-bind:repeat="arrInvSelVendors.items.filter(`$value &amp;&amp; scMasterData.data.vendors.where('id', $value, '==')[0].entity_name.lowercase().contains(txtSelectedSearchTerm.value.trim().lowercase())`)" dmx-show="arrInvSelVendors.items.count()&gt;0">

3rd:

<span>{{scMasterData.data.vendors.where('id', $value, '==')[0].entity_name}}</span>

kabir.slashash · January 2, 2025, 11:58am

This is different from what I mentioned earlier. Here, I am retrieving the entity name from scMasterData by applying a filter on the id stored in arrInvSelVendors. The IDs are saved in arrInvSelVendors, and the first two operations are search-related, while the third one is for displaying the selected entity_name.

<span>{{scMasterData.data.vendors.where('id', $value, '==')[0].entity_name}}</span>

It works fine without any issues, as you can see from the above image.

<span>{{scMasterData.data.vendors.where('id', $value, '==')[0].entity_name}}</span>

Below above line, I have another repeat component, repeatSelVendorAdmins,

<div class="d-flex mt-2 gap-1" is="dmx-repeat" id="repeatSelVendorAdmins" dmx-bind:repeat="scVendorAdmins.data.list.where(`entity_id`, varSelParentId.value, '==')"><span class="badge bg-dark" dmx-bind:title="full_name">{{full_name}}</span></div>

where I am displaying vendor admins. These admins are fetched using scVendorAdmins. Although the data is fetched successfully, it is not being displayed.

If I remove the .where() condition from:

<div class="d-flex mt-2 gap-1" is="dmx-repeat" id="repeatSelVendorAdmins" dmx-bind:repeat="scVendorAdmins.data.list.where(`entity_id`, varSelParentId.value, '==')">

then it works fine. However, if I include the .where() condition, it stops working.

ben · January 2, 2025, 12:19pm

It looks like the types do not match. If entity_id is a number and varSelParentId.value is a string, the comparison might not work.

kabir.slashash · January 3, 2025, 4:54am

as you can see above both are string