Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

MOSIP:36498- UI Development: Server Side Filter #865

Merged
merged 1 commit into from
Oct 25, 2024
Merged

MOSIP:36498- UI Development: Server Side Filter #865

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 7 additions & 6 deletions pmp-reactjs-ui/src/pages/admin/partners/PartnersList.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import {
handleServiceErrors,
getStatusCode,
handleMouseClickForDropdown,
getPartnerTypeDescription,
} from "../../../utils/AppUtils";
import LoadingIcon from "../../common/LoadingIcon";
import ErrorMessage from "../../common/ErrorMessage";
Expand Down Expand Up @@ -241,7 +242,7 @@ function PartnersList() {
<div className="flex-col justify-center ml-3 h-full">
{!isFilterApplied && partnersData.length === 0 ? (
<div className="bg-[#FCFCFC] w-full mt-3 rounded-lg shadow-lg items-center">
<div className="py-1 pt-4 text-sm font-semibold text-[#6F6E6E]">
<div className="py-2 pt-4 text-sm font-semibold text-[#6F6E6E]">
<div className="flex w-full px-2">
<div className="flex w-full pl-[2%] pt-1 items-center justify-start font-semibold text-dark-blue text-base">
{t("partnerList.listOfPartnerTitle")}
Expand Down Expand Up @@ -289,7 +290,7 @@ function PartnersList() {
{tableHeaders.map((header, index) => {
return (
<th key={index} className="py-4 text-sm font-semibold text-[#6F6E6E] w-[15%]">
<div className="mx-2 flex gap-x-0 items-center">
<div className={`mx-2 flex gap-x-0 items-center ${isLoginLanguageRTL ? "text-right" : "text-left"}`}>
{t(header.headerNameKey)}
{header.id !== "action" && (
<SortingIcon
Expand All @@ -312,15 +313,15 @@ function PartnersList() {
<tr id={"partner_list_item" + (index + 1)} key={index}
className={`border-t border-[#E5EBFA] cursor-pointer text-[0.8rem] text-[#191919] font-semibold break-words ${partner.isActive === false ? "text-[#969696]" : "text-[#191919]"}`}>
<td onClick={() => viewPartnerDetails(partner)} className="px-2 break-all">{partner.partnerId}</td>
<td onClick={() => viewPartnerDetails(partner)} className="px-2 break-all">{partner.partnerType}</td>
<td onClick={() => viewPartnerDetails(partner)} className="px-2 break-all">{getPartnerTypeDescription(partner.partnerType, t)}</td>
<td onClick={() => viewPartnerDetails(partner)} className="px-2 break-all">{partner.orgName}</td>
<td onClick={() => viewPartnerDetails(partner)} className="px-2 break-all">{partner.policyGroupName ? partner.policyGroupName : "-"}</td>
<td onClick={() => viewPartnerDetails(partner)} className="px-2 break-all">{partner.emailAddress}</td>
<td onClick={() => viewPartnerDetails(partner)} className={`px-3 break-all ${partner.certificateUploadStatus === 'not_uploaded' && "text-[#BE1818]"}`}>
<td onClick={() => viewPartnerDetails(partner)} className={`px-3 whitespace-nowrap ${partner.certificateUploadStatus === 'not_uploaded' && "text-[#BE1818]"}`}>
{getStatusCode(partner.certificateUploadStatus, t)}
</td>
<td onClick={() => viewPartnerDetails(partner)} className="break-all">
<div className={`${partner.isActive ? 'bg-[#D1FADF] text-[#155E3E]' : 'bg-[#EAECF0] text-[#525252]'} flex w-fit py-1.5 px-2 m-3 text-xs font-semibold rounded-md`}>
<td onClick={() => viewPartnerDetails(partner)}>
<div className={`${partner.isActive ? 'bg-[#D1FADF] text-[#155E3E]' : 'bg-[#EAECF0] text-[#525252]'} flex w-fit py-1.5 px-2 mx-2 my-3 text-xs font-semibold rounded-md`}>
{partner.isActive ? t('statusCodes.activated') : t('statusCodes.deactivated')}
</div>
</td>
Expand Down
18 changes: 12 additions & 6 deletions pmp-reactjs-ui/src/pages/admin/partners/PartnersListFilter.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ function PartnerListFilter({ onApplyFilter, setErrorCode, setErrorMsg }) {
const [status, setStatus] = useState([]);
const [certUploadStatus, setCertUploadStatus] = useState([]);
const isLoginLanguageRTL = isLangRTL(getUserProfile().langCode);
const [isFilterActive, setIsFilterActive] = useState(false);
const [certUploadStatusDropdownData, setCertUploadStatusDropdownData] = useState([
{ certificateUploadStatus: 'uploaded' },
{ certificateUploadStatus: 'not_uploaded' }
Expand Down Expand Up @@ -86,18 +87,23 @@ function PartnerListFilter({ onApplyFilter, setErrorCode, setErrorMsg }) {


const onFilterChangeEvent = (fieldName, selectedFilter) => {
setIsFilterActive(true);
setFilters((prevFilters) => ({
...prevFilters,
[fieldName]: selectedFilter
}));
};

const areFiltersEmpty = () => {
return Object.values(filters).every(value => value === "");
return !isFilterActive && Object.values(filters).every(value => value === "");
};

const styles = {
dropdownButton: "min-w-72",
dropdownButton: "min-w-64",
};

const styleSet = {
inputField: "min-w-64 w-auto",
};

return (
Expand All @@ -107,7 +113,7 @@ function PartnerListFilter({ onApplyFilter, setErrorCode, setErrorMsg }) {
onTextChange={onFilterChangeEvent}
fieldNameKey="partnerList.partnerId"
placeHolderKey="partnerList.searchPartnerId"
styleSet={styles}
styleSet={styleSet}
id="partner_id_filter"
/>
<DropdownComponent
Expand All @@ -125,23 +131,23 @@ function PartnerListFilter({ onApplyFilter, setErrorCode, setErrorMsg }) {
onTextChange={onFilterChangeEvent}
fieldNameKey="partnerList.organisation"
placeHolderKey="partnerList.searchOrganisation"
styleSet={styles}
styleSet={styleSet}
id="partner_organisation_filter"
/>
<TextInputComponent
fieldName="policyGroupName"
onTextChange={onFilterChangeEvent}
fieldNameKey="partnerList.policyGroup"
placeHolderKey="partnerList.searchPolicyGroup"
styleSet={styles}
styleSet={styleSet}
id="policy_group_filter"
/>
<TextInputComponent
fieldName="emailAddress"
onTextChange={onFilterChangeEvent}
fieldNameKey="partnerList.email"
placeHolderKey="partnerList.searchEmailAddress"
styleSet={styles}
styleSet={styleSet}
id="email_address_filter"
/>
<DropdownComponent
Expand Down
2 changes: 1 addition & 1 deletion pmp-reactjs-ui/src/pages/common/fields/TextInputComponent.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ function TextInputComponent({ fieldName, fieldNameKey, placeHolderKey, onTextCha
value={inputValue}
onChange={handleInputChange}
placeholder={t(placeHolderKey)}
className={`w-full min-w-72 px-2 py-2 border border-[#707070] rounded-[4px] text-[15px]
className={`w-full px-2 py-2 h-[2.3rem] border border-[#707070] rounded-[4px] text-[15px]
${styleSet && styleSet.inputField ? styleSet.inputField : ''} focus:outline-none `}
/>
</div>
Expand Down
Loading