Hi Team ,
We have a Portal called p1 problem summary
can someone please help me with the coding , based on selected company active p1 and closed P1 is not filtering
also when select any problem below fields also should populated
below the coding
<div class="filter-section mb-3" style="margin-top:35px;">
<div class="row">
<div class="col-md-6 position-relative">
<input type="text" class="form-control" ng-model="searchProblemNumber"
placeholder="Search for P1 Problem Ticket" style="font-size: 18px;"
ng-change="updateSearch()" />
<i class="fa" ng-class="{'fa-search': !searchProblemNumber, 'fa-times': searchProblemNumber}"
style="position: absolute; right: 20px; top: 50%; transform: translateY(-50%); cursor: pointer; font-size: 18px;"
ng-click="clearSearch()"></i>
<div ng-if="noResultsFound" class="error-message">
<i class="fa fa-exclamation-circle"></i> No matching P1 problem found.
</div>
</div>
<div class="col-md-6">
<div class="dropdown">
<button class="btn btn-light dropdown-toggle" type="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false" style="width: 100%; text-align: left; font-size: 18px;">
Filter by Impacted Companies
</button>
<div class="dropdown-menu" style="width: 100%; max-height: 300px; overflow-y: auto;">
<label class="dropdown-item">
<input type="checkbox" ng-model="selectAllCompanies" ng-change="toggleAllCompanies()"> All Companies
</label>
<div ng-repeat="company in data.companies">
<label class="dropdown-item">
<input type="checkbox" ng-model="selectedCompanies[company.sys_id]" ng-change="filterProblems()">
{{ company.name }} <span ng-if="selectedCompanies[company.sys_id]" style="color: green;">✔</span>
</label>
</div>
</div>
</div>
</div>
</div>
</div>
<div style="margin-top:30px;">
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link" style="font-size: 18px;"
ng-class="{'active-tab': activeTab === 'active', 'inactive-tab': activeTab !== 'active', 'highlight': activeTab === 'active'}"
ng-click="setActiveTab('active')">
Active P1 Problems
</a>
</li>
<li class="nav-item">
<a class="nav-link" style="font-size: 18px;"
ng-class="{'active-tab': activeTab === 'completed', 'inactive-tab': activeTab !== 'completed', 'highlight': activeTab === 'completed'}"
ng-click="setActiveTab('completed')">
Completed P1 Problems
</a>
</li>
</ul>
<div class="tab-content mt-3" style="margin-top:10px;">
<div id="active" class="tab-pane" ng-class="{ 'show active': activeTab === 'active' }">
<ul class="list-group">
<li ng-repeat="problem in displayedProblems" class="list-group-item">
<div class="d-flex justify-content-between align-items-center">
<span style="font-size: 18px;">
<i class="fa fa-calendar" aria-hidden="true"></i>
<strong>Opened on: </strong>
<strong>{{ problem.opened_at | date: 'medium' }}</strong>
</span>
<p style="font-size: 18px; line-height: 1.6;">
<strong>
<a href="problem.do?sys_id={{ problem.sys_id }}" style="color: black;" target="_blank"><span><u>{{ problem.number }}</u></span></a>
</strong> - {{ problem.short_description }} -
<strong>
<a href="incident.do?sys_id={{ problem.first_reported_incident_sys_id }}" style="color: black;" target="_blank"><u>{{ problem.first_reported_incident }}</u></a>
</strong>
</p>
</div>
<button ng-click="toggleDetails(problem)" class="btn btn-link" style="font-size: 18px; padding: 0;">
{{ problem.showDetails ? 'Hide Details' : 'Show Details' }}
</button>
<div ng-if="problem.showDetails" class="details mt-2" style="font-size: 18px; line-height: 1.8;">
<div class="container">
<div class="row">
<div class="col-md-4" style="padding: 15px;">
<div class="panel panel-primary" style="height: 300px; overflow-x: auto; overflow-y: auto;">
<div class="panel-heading" style="font-size: 16px;">
<h4 class="problemDetailsTitles">Problem Target Completion Dates</h4>
</div>
<div class="panel-body problemDetailsPanelBody" style="font-size: 14px;">
<strong>RCA Target Completion Date:</strong><br> {{ problem.response_breach_time }}<br>
<strong>Resolution Target Completion Date:</strong><br> {{ problem.resolution_breach_time }}
</div>
</div>
</div>
<div class="col-md-3" style="padding: 15px;">
<div class="panel panel-success" style="height: 300px; overflow-y: auto;">
<div class="panel-heading" style="font-size: 16px;">
<h4 class="problemDetailsTitles">Outage Owner</h4>
</div>
<div class="panel-body problemDetailsPanelBody" style="font-size: 14px; display: flex; justify-content: flex-start; align-items: flex-start;">
<span>{{problem.outage_owner || "N/A"}}</span>
</div>
</div>
</div>
<div class="col-md-3" style="padding: 15px;">
<div class="panel panel-info" style="height: 300px; overflow-y: auto;">
<div class="panel-heading" style="font-size: 16px;">
<h4 class="problemDetailsTitles">Caused by Change</h4>
</div>
<div class="panel-body problemDetailsPanelBody" style="font-size: 14px; display: flex; justify-content: flex-start; align-items: flex-start;">
<span>{{problem.caused_by_change || "N/A"}}</span>
</div>
</div>
</div>
<div class="col-md-3" style="padding: 15px;">
<div class="panel panel-warning" style="height: 300px; overflow-y: auto;">
<div class="panel-heading" style="font-size: 16px;">
<h4 class="problemDetailsTitles">Cause Notes</h4>
</div>
<div class="panel-body problemDetailsPanelBody" style="font-size: 14px; display: flex; justify-content: flex-start; align-items: flex-start;">
<span>{{problem.cause_notes || "Currently Unknown"}}</span>
</div>
</div>
</div>
<div class="col-md-3" style="padding: 15px;">
<div class="panel panel-danger" style="height: 300px; overflow-y: auto;">
<div class="panel-heading" style="font-size: 16px;">
<h4 class="problemDetailsTitles problemDetailsRCATitle">Fix Notes</h4>
</div>
<div class="panel-body problemDetailsPanelBody" style="font-size: 14px; display: flex; justify-content: flex-start; align-items: flex-start;">
<span>{{problem.fix_notes || "Currently Unknown"}}</span>
</div>
</div>
</div>
</div>
</div>
<div class="impacted-cis" style="margin: 0; padding: 0; display: block;">
<button ng-repeat="ci in problem.impacted_cis"
ng-class="{'btn-success': selectedCompanies === 'all' || selectedCompanies[ci.companySysID], 'btn-secondary': selectedCompanies !== 'all' && !selectedCompanies[ci.companySysID]}"
class="btn btn-sm mr-2 mb-1" style="padding: 6px 12px; margin: 5px 10px; font-size: 16px;">
{{ ci.companyName }}
</button>
looking this to fix it
