External/CoreControl
1
0
Fork 0
mirror of https://github.com/crocofied/CoreControl.git synced 2025-12-17 15:36:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

Loading on Sites & Site load

Browse Source
This commit is contained in:
headlesdev 2025-05-19 15:05:35 +02:00
parent 62d8c1c1b2
commit 59a32e0407
4 changed files with 57 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
app/dashboard/sites/SitesPage.tsx
View File

@ -6,6 +6,7 @@ import Sites from "@/components/cards/Sites";
import Pagination from "@/components/Pagination";
import useSites from "@/hooks/useSites";
import SearchAndLayout from "@/components/SearchAndLayout";
import Loading from "@/components/Loading";
interface SitesPageProps {
username: string;
@ -22,7 +23,8 @@ export default function SitesPage({ username, name }: SitesPageProps) {
setSearch,
handlePageChange,
setItemPerPage,
loadSites
loadSites,
loading
} = useSites();
return (
<Sidebar
@ -56,37 +58,46 @@ export default function SitesPage({ username, name }: SitesPageProps) {
setItemPerPage={setItemPerPage}
/>
{sites.length > 0 ? (
<div className={
itemPerPage === 5
? "flex flex-col gap-4 pt-4"
: "grid grid-cols-1 md:grid-cols-2 gap-4 pt-4"
}>
{sites.map((site: any) => (
<Sites
key={site.id}
id={site.id}
name={site.name}
description={site.description}
networks={site.networks}
/>
))}
{loading ? (
<div className="flex justify-center items-center h-48 mt-4">
<Loading />
</div>
) : (
<div className="flex justify-center items-center h-48 bg-base-200 rounded-lg mt-4">
<div className="text-center">
<h3 className="text-lg font-bold">No Sites Found</h3>
<p className="text-sm opacity-70">No sites match your current search criteria</p>
</div>
</div>
<>
{sites.length > 0 ? (
<div className={
itemPerPage === 5
? "flex flex-col gap-4 pt-4"
: "grid grid-cols-1 md:grid-cols-2 gap-4 pt-4"
}>
{sites.map((site: any) => (
<Sites
key={site.id}
id={site.id}
name={site.name}
description={site.description}
networks={site.networks}
/>
))}
</div>
) : (
<div className="flex justify-center items-center h-48 bg-base-200 rounded-lg mt-4">
<div className="text-center">
<h3 className="text-lg font-bold">No Sites Found</h3>
<p className="text-sm opacity-70">No sites match your current search criteria</p>
</div>
</div>
)}
<Pagination
currentPage={currentPage}
totalItems={total}
itemsPerPage={itemPerPage}
onPageChange={handlePageChange}
/>
</>
)}
<Pagination
currentPage={currentPage}
totalItems={total}
itemsPerPage={itemPerPage}
onPageChange={handlePageChange}
/>
</main>
</Sidebar>
)

9
app/dashboard/sites/[siteId]/SitePage.tsx
View File

@ -2,6 +2,7 @@
import Sidebar from "@/components/Sidebar"
import useSite from "@/hooks/useSite"
import { useEffect, useState } from "react"
import Loading from "@/components/Loading"
import { EditModeToggle } from "@/components/EditModeToggle"
import AddNetwork from "@/components/dialogues/AddNetwork"
import { Plus, Pencil, Trash, Info, Building2, Network as NetworkIcon, Globe, Cpu } from "lucide-react"
@ -17,7 +18,7 @@ interface SitesPageProps {
}
export default function SitesPage({ username, name, siteId }: SitesPageProps) {
const { site, loadSite, setSiteId } = useSite()
const { site, loadSite, setSiteId, loading } = useSite()
const [isEditMode, setIsEditMode] = useState(false)
useEffect(() => {
@ -29,6 +30,11 @@ export default function SitesPage({ username, name, siteId }: SitesPageProps) {
return (
<Sidebar username={username} fullName={name} breadcrumbPath={["/", "Dashboard", "Resources", "Sites", site.name]}>
<main className="w-full">
{loading ? (
<div className="flex justify-center items-center h-64 w-full">
<Loading />
</div>
) : (
<div className="flex flex-col gap-4 w-full">
<div className="card bg-base-100 shadow-xl rounded-xl overflow-hidden border border-base-200 w-full">
<div className="card-body p-6">
@ -153,6 +159,7 @@ export default function SitesPage({ username, name, siteId }: SitesPageProps) {
<EditSite site={site} onSiteEdited={loadSite} />
<DeleteSite siteId={site.id} />
</div>
)}
</main>
</Sidebar>
)

4
hooks/useSite.ts
View File

@ -10,13 +10,16 @@ const useSite = () => {
networks: []
});
const [siteId, setSiteId] = useState("");
const [loading, setLoading] = useState(false);
const loadSite = useCallback(() => {
if (!siteId) return;
setLoading(true);
axios.get('/api/sites/get', {
params: { siteId }
}).then((response) => {
setSite(response.data.site);
setLoading(false);
});
}, [siteId]);
@ -58,6 +61,7 @@ const useSite = () => {
setSiteId,
editSite,
deleteSite,
loading
};
};

6
hooks/useSites.ts
View File

@ -11,13 +11,16 @@ const useSites = () => {
const [itemPerPage, setItemPerPage] = useState(defaultLayout);
const [total, setTotal] = useState(0);
const [search, setSearch] = useState("");
const [loading, setLoading] = useState(false);
const loadSites = useCallback(() => {
setLoading(true);
axios.get('/api/sites/get_all', {
params: { currentPage, itemPerPage, search }
}).then((response) => {
setSites(response.data.sites);
setTotal(response.data.total);
setLoading(false);
});
}, [currentPage, itemPerPage, search]);
@ -41,7 +44,8 @@ const useSites = () => {
setSearch,
handlePageChange,
setItemPerPage,
loadSites
loadSites,
loading
};
};