110 lines
3.7 KiB
JavaScript
110 lines
3.7 KiB
JavaScript
import React, { useState, createContext, useEffect, useContext } from "react";
|
|
import { useForm } from "react-hook-form";
|
|
import { zodResolver } from "@hookform/resolvers/zod";
|
|
// ------Components-------
|
|
import Breadcrumb from "../../components/common/Breadcrumb";
|
|
import TenantsList from "../../components/Tenanat/TenantsList";
|
|
import { useNavigate } from "react-router-dom";
|
|
import { useDebounce } from "../../utils/appUtils";
|
|
import { useFab } from "../../Context/FabContext";
|
|
|
|
//---------- Schema and defaultValues----
|
|
import {
|
|
defaultFilterValues,
|
|
filterSchema,
|
|
} from "../../components/Tenanat/TenantSchema";
|
|
import TenantFilterPanel from "../../components/Tenanat/TenantFilterPanel";
|
|
|
|
// This is context that wrapping all components tenant releated , but must pass inside 'TenantContext.Provider'
|
|
export const TenantContext = createContext();
|
|
export const useTenantContext = () => {
|
|
const context = useContext(TenantContext);
|
|
if (!context) {
|
|
throw new Error("useTenantContext must be used within an TenantProvider");
|
|
}
|
|
return context;
|
|
};
|
|
|
|
const TenantPage = () => {
|
|
const [searchText, setSearchText] = useState("");
|
|
const [isRefetching,setRefetching] = useState(false)
|
|
const [refetchFn, setRefetchFn] = useState(null);
|
|
const [filters, setFilter] = useState();
|
|
const debouncedSearch = useDebounce(searchText, 500);
|
|
const contextValue = {
|
|
};
|
|
const navigate = useNavigate();
|
|
|
|
const { setOffcanvasContent, setShowTrigger } = useFab();
|
|
|
|
// This Hook allow us to right-side bar for filter Tenants
|
|
|
|
const methods = useForm({
|
|
resolver: zodResolver(filterSchema),
|
|
defaultValues: defaultFilterValues,
|
|
});
|
|
|
|
const { reset } = methods;
|
|
useEffect(() => {
|
|
setShowTrigger(true);
|
|
setOffcanvasContent("Tenant Filters", <TenantFilterPanel onApply={setFilter}
|
|
/>);
|
|
return () => {
|
|
setShowTrigger(false);
|
|
setOffcanvasContent("", null);
|
|
};
|
|
}, []);
|
|
|
|
return (
|
|
<TenantContext.Provider value={contextValue}>
|
|
<div className="container-fluid">
|
|
<Breadcrumb
|
|
data={[
|
|
{ label: "Home", link: "/dashboard" },
|
|
{ label: "Tenant", link: null },
|
|
]}
|
|
/>
|
|
|
|
<div className="card d-flex p-2">
|
|
<div className="row align-items-center">
|
|
<div className="col-6 col-md-6 col-lg-3 mb-md-0">
|
|
<input
|
|
type="search"
|
|
value={searchText}
|
|
onChange={(e)=>setSearchText(e.target.value)}
|
|
className="form-control form-control-sm"
|
|
placeholder="Search Tenant"
|
|
/>
|
|
</div>
|
|
|
|
<div className="col-6 col-md-6 col-lg-9 text-end cursor-pointer">
|
|
<span className="text-tiny text-muted p-1 border-0 bg-none lead mx-3 " disabled={isRefetching} onClick={() => refetchFn && refetchFn()}>
|
|
Refresh <i className={`bx bx-refresh ms-1 ${isRefetching ? "bx-spin":""}`}></i>
|
|
</span>
|
|
|
|
<button
|
|
type="button"
|
|
data-bs-toggle="tooltip"
|
|
data-bs-offset="0,8"
|
|
data-bs-placement="top"
|
|
data-bs-custom-class="tooltip"
|
|
title="Add New Tenant"
|
|
className="p-1 bg-primary rounded-circle"
|
|
onClick={() => navigate("/tenants/new-tenant")}
|
|
>
|
|
<i className="bx bx-plus fs-4 text-white"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<TenantsList filters={filters} searchText={debouncedSearch} setIsRefetching={setRefetching}
|
|
setRefetchFn={setRefetchFn}
|
|
/>
|
|
</div>
|
|
</TenantContext.Provider>
|
|
);
|
|
};
|
|
|
|
export default TenantPage;
|