Adding Chips in Document.
This commit is contained in:
parent
eeb886ec36
commit
cbb52087c3
81
src/components/Documents/DocumentFilterChips.jsx
Normal file
81
src/components/Documents/DocumentFilterChips.jsx
Normal file
@ -0,0 +1,81 @@
|
||||
import React, { useMemo } from "react";
|
||||
import moment from "moment";
|
||||
|
||||
const DocumentFilterChips = ({ filters, filterData, removeFilterChip }) => {
|
||||
const filterChips = useMemo(() => {
|
||||
const chips = [];
|
||||
|
||||
const buildGroup = (ids, list, label, key) => {
|
||||
if (!ids?.length) return;
|
||||
const items = ids.map((id) => ({
|
||||
id,
|
||||
name: list.find((item) => item.id === id)?.name || id,
|
||||
}));
|
||||
chips.push({ key, label, items });
|
||||
};
|
||||
|
||||
// Build chips from document filters
|
||||
buildGroup(filters.uploadedByIds, filterData.data.uploadedBy || [], "Uploaded By", "uploadedByIds");
|
||||
buildGroup(filters.documentCategoryIds, filterData.data.documentCategory || [], "Category", "documentCategoryIds");
|
||||
buildGroup(filters.documentTypeIds, filterData.data.documentType || [], "Type", "documentTypeIds");
|
||||
buildGroup(filters.documentTagIds, filterData.data.documentTag || [], "Tags", "documentTagIds");
|
||||
|
||||
if (filters.statusIds?.length) {
|
||||
const items = filters.statusIds.map((status) => ({
|
||||
id: status,
|
||||
name:
|
||||
status === true
|
||||
? "Verified"
|
||||
: status === false
|
||||
? "Rejected"
|
||||
: "Pending",
|
||||
}));
|
||||
chips.push({ key: "statusIds", label: "Status", items });
|
||||
}
|
||||
|
||||
if (filters.startDate || filters.endDate) {
|
||||
const start = filters.startDate ? moment(filters.startDate).format("DD-MM-YYYY") : "";
|
||||
const end = filters.endDate ? moment(filters.endDate).format("DD-MM-YYYY") : "";
|
||||
chips.push({
|
||||
key: "dateRange",
|
||||
label: "Date Range",
|
||||
items: [{ id: "dateRange", name: `${start} - ${end}` }],
|
||||
});
|
||||
}
|
||||
|
||||
return chips;
|
||||
}, [filters, filterData]);
|
||||
|
||||
if (!filterChips.length) return null;
|
||||
|
||||
console.log("Kartik", filterData.uploadedBy)
|
||||
|
||||
return (
|
||||
<div className="row my-2">
|
||||
<div className="col-12">
|
||||
<div className="d-flex flex-wrap align-items-start gap-1">
|
||||
{filterChips.map((chip) => (
|
||||
<div key={chip.key} className="d-flex align-items-center flex-wrap px-2 py-1" style={{ fontSize: "0.9rem" }}>
|
||||
<span className="fw-semibold me-2">{chip.label}:</span>
|
||||
<div className="d-flex flex-wrap align-items-center gap-1">
|
||||
{chip.items.map((item) => (
|
||||
<span key={item.id} className="d-flex align-items-center bg-light rounded px-2 py-1 text-xs">
|
||||
<span>{item.name}</span>
|
||||
<button
|
||||
type="button"
|
||||
className="btn-close btn-close-white btn-sm ms-2"
|
||||
style={{ filter: "invert(1) grayscale(1)", opacity: 0.7, fontSize: "0.6rem" }}
|
||||
onClick={() => removeFilterChip(chip.key, item.id)}
|
||||
/>
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default DocumentFilterChips;
|
||||
@ -1,4 +1,4 @@
|
||||
import React, { useState } from "react";
|
||||
import React, { useEffect, useState,useMemo } from "react";
|
||||
import { useDocumentFilterEntities } from "../../hooks/useDocument";
|
||||
import { FormProvider, useForm } from "react-hook-form";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
@ -9,16 +9,33 @@ import {
|
||||
import { DateRangePicker1 } from "../common/DateRangePicker";
|
||||
import SelectMultiple from "../common/SelectMultiple";
|
||||
import moment from "moment";
|
||||
import { useParams } from "react-router-dom";
|
||||
|
||||
const DocumentFilterPanel = ({ entityTypeId, onApply }) => {
|
||||
const DocumentFilterPanel = ({ entityTypeId, onApply,setFilterdata }) => {
|
||||
const [resetKey, setResetKey] = useState(0);
|
||||
const { status } = useParams();
|
||||
|
||||
const { data, isError, isLoading, error } =
|
||||
useDocumentFilterEntities(entityTypeId);
|
||||
|
||||
//changes
|
||||
|
||||
const dynamicDocumentFilterDefaultValues = useMemo(() => {
|
||||
return {
|
||||
...DocumentFilterDefaultValues,
|
||||
uploadedByIds: DocumentFilterDefaultValues.uploadedByIds || [],
|
||||
documentCategoryIds: DocumentFilterDefaultValues.documentCategoryIds || [],
|
||||
documentTypeIds: DocumentFilterDefaultValues.documentTypeIds || [],
|
||||
documentTagIds: DocumentFilterDefaultValues.documentTagIds || [],
|
||||
startDate: DocumentFilterDefaultValues.startDate,
|
||||
endDate: DocumentFilterDefaultValues.endDate,
|
||||
};
|
||||
|
||||
}, [status]);
|
||||
|
||||
const methods = useForm({
|
||||
resolver: zodResolver(DocumentFilterSchema),
|
||||
defaultValues: DocumentFilterDefaultValues,
|
||||
defaultValues: dynamicDocumentFilterDefaultValues,
|
||||
});
|
||||
|
||||
const { handleSubmit, reset, setValue, watch } = methods;
|
||||
@ -32,6 +49,14 @@ const DocumentFilterPanel = ({ entityTypeId, onApply }) => {
|
||||
document.querySelector(".offcanvas.show .btn-close")?.click();
|
||||
};
|
||||
|
||||
//changes
|
||||
useEffect(() => {
|
||||
if (data && setFilterdata) {
|
||||
setFilterdata(data);
|
||||
}
|
||||
}, [data, setFilterdata]);
|
||||
console.log("Veer",data)
|
||||
|
||||
const onSubmit = (values) => {
|
||||
onApply({
|
||||
...values,
|
||||
@ -63,6 +88,8 @@ const DocumentFilterPanel = ({ entityTypeId, onApply }) => {
|
||||
documentTag = [],
|
||||
} = data?.data || {};
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<FormProvider {...methods}>
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
|
||||
@ -17,6 +17,7 @@ import ViewDocument from "./ViewDocument";
|
||||
import DocumentViewerModal from "./DocumentViewerModal";
|
||||
import { useHasUserPermission } from "../../hooks/useHasUserPermission";
|
||||
import { useProfile } from "../../hooks/useProfile";
|
||||
import DocumentFilterChips from "./DocumentFilterChips";
|
||||
|
||||
// Context
|
||||
export const DocumentContext = createContext();
|
||||
@ -51,12 +52,13 @@ const Documents = ({ Document_Entity, Entity }) => {
|
||||
const [isSelf, setIsSelf] = useState(false);
|
||||
const [searchText, setSearchText] = useState("");
|
||||
const [isActive, setIsActive] = useState(true);
|
||||
const [filters, setFilter] = useState();
|
||||
const [filters, setFilter] = useState(DocumentFilterDefaultValues);
|
||||
const [isRefetching, setIsRefetching] = useState(false);
|
||||
const [refetchFn, setRefetchFn] = useState(null);
|
||||
const [DocumentEntity, setDocumentEntity] = useState(Document_Entity);
|
||||
const { employeeId } = useParams();
|
||||
const [OpenDocument, setOpenDocument] = useState(false);
|
||||
const [filterData, setFilterdata] = useState(DocumentFilterDefaultValues);
|
||||
const [ManageDoc, setManageDoc] = useState({
|
||||
document: null,
|
||||
isOpen: false,
|
||||
@ -92,7 +94,7 @@ const Documents = ({ Document_Entity, Entity }) => {
|
||||
setShowTrigger(true);
|
||||
setOffcanvasContent(
|
||||
"Document Filters",
|
||||
<DocumentFilterPanel entityTypeId={DocumentEntity} onApply={setFilter} />
|
||||
<DocumentFilterPanel entityTypeId={DocumentEntity} onApply={setFilter} setFilterdata={setFilterdata} />
|
||||
);
|
||||
|
||||
return () => {
|
||||
@ -100,7 +102,7 @@ const Documents = ({ Document_Entity, Entity }) => {
|
||||
setOffcanvasContent("", null);
|
||||
};
|
||||
}, []);
|
||||
|
||||
console.log("Testing",filterData)
|
||||
const contextValues = {
|
||||
ManageDoc,
|
||||
setManageDoc,
|
||||
@ -115,10 +117,23 @@ const Documents = ({ Document_Entity, Entity }) => {
|
||||
setDocumentEntity(Document_Entity);
|
||||
}
|
||||
}, [Document_Entity]);
|
||||
|
||||
|
||||
const removeFilterChip = (key, id) => {
|
||||
const updatedFilters = { ...filters };
|
||||
if (Array.isArray(updatedFilters[key])) {
|
||||
updatedFilters[key] = updatedFilters[key].filter((v) => v !== id);
|
||||
} else {
|
||||
updatedFilters[key] = null;
|
||||
}
|
||||
setFilter(updatedFilters);
|
||||
};
|
||||
|
||||
return (
|
||||
<DocumentContext.Provider value={contextValues}>
|
||||
<div className="mt-2">
|
||||
<div className="card page-min-h d-flex p-2">
|
||||
<DocumentFilterChips filters={filters} filterData={filterData} removeFilterChip={removeFilterChip} />
|
||||
<div className="row align-items-center">
|
||||
{/* Search */}
|
||||
<div className="d-flex col-8 col-md-8 col-lg-4 mb-md-0 align-items-center">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user