feat(scan users): added in the place to add the new scanner users in
This commit is contained in:
@@ -1,16 +1,258 @@
|
||||
import { useSuspenseQuery } from "@tanstack/react-query";
|
||||
import { createFileRoute } from "@tanstack/react-router";
|
||||
import { useMutation, useSuspenseQuery } from "@tanstack/react-query";
|
||||
import { createFileRoute, redirect } from "@tanstack/react-router";
|
||||
import { createColumnHelper } from "@tanstack/react-table";
|
||||
import axios from "axios";
|
||||
import { format } from "date-fns-tz";
|
||||
import { CircleFadingArrowUp, Trash } from "lucide-react";
|
||||
import { Suspense, useState } from "react";
|
||||
import { toast } from "sonner";
|
||||
import { Button } from "../../components/ui/button";
|
||||
import { Spinner } from "../../components/ui/spinner";
|
||||
import { authClient } from "../../lib/auth-client";
|
||||
import { getScanUsers } from "../../lib/queries/getScanUsers";
|
||||
import EditableCellInput from "../../lib/tableStuff/EditableCellInput";
|
||||
import LstTable from "../../lib/tableStuff/LstTable";
|
||||
import SearchableHeader from "../../lib/tableStuff/SearchableHeader";
|
||||
import SkellyTable from "../../lib/tableStuff/SkellyTable";
|
||||
import NewScanUser from "./-components/NewScanUser";
|
||||
|
||||
export const Route = createFileRoute("/admin/scanUsers")({
|
||||
beforeLoad: async ({ location }) => {
|
||||
const { data: session } = await authClient.getSession();
|
||||
const allowedRole = ["systemAdmin", "admin"];
|
||||
|
||||
if (!session?.user) {
|
||||
throw redirect({
|
||||
to: "/",
|
||||
search: {
|
||||
redirect: location.href,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
if (!allowedRole.includes(session.user.role as string)) {
|
||||
throw redirect({
|
||||
to: "/",
|
||||
});
|
||||
}
|
||||
|
||||
return { user: session.user };
|
||||
},
|
||||
component: RouteComponent,
|
||||
});
|
||||
|
||||
const ScanUserTable = () => {
|
||||
const { data } = useSuspenseQuery(getScanUsers());
|
||||
console.log(data);
|
||||
return <div>Hello "/admin/scanUsers"!</div>;
|
||||
const updateSettings = async (
|
||||
id: string,
|
||||
data: Record<string, string | number | boolean | null>,
|
||||
) => {
|
||||
//console.log(id, data);
|
||||
try {
|
||||
const res = await axios.patch(`/lst/api/mobile/auth/user/${id}`, data, {
|
||||
withCredentials: true,
|
||||
timeout: 15000,
|
||||
validateStatus: () => true,
|
||||
});
|
||||
toast.success(`User was just updated`);
|
||||
return res;
|
||||
} catch (err) {
|
||||
toast.error("Error in updating the user");
|
||||
return err;
|
||||
}
|
||||
};
|
||||
|
||||
const ScanUserTable = () => {
|
||||
const { data, refetch } = useSuspenseQuery(getScanUsers());
|
||||
const columnHelper = createColumnHelper<any>();
|
||||
|
||||
const updateSetting = useMutation({
|
||||
mutationFn: ({
|
||||
id,
|
||||
field,
|
||||
value,
|
||||
}: {
|
||||
id: string;
|
||||
field: string;
|
||||
value: string | number | boolean | null;
|
||||
}) => updateSettings(id, { [field]: value }),
|
||||
|
||||
onSuccess: () => {
|
||||
// refetch or update cache
|
||||
refetch();
|
||||
},
|
||||
});
|
||||
|
||||
const columns = [
|
||||
columnHelper.accessor("name", {
|
||||
header: ({ column }) => (
|
||||
<SearchableHeader column={column} title="Name" searchable={true} />
|
||||
),
|
||||
filterFn: "includesString",
|
||||
cell: (i) => i.getValue(),
|
||||
}),
|
||||
columnHelper.accessor("scannerId", {
|
||||
header: ({ column }) => (
|
||||
<SearchableHeader
|
||||
column={column}
|
||||
title="Scanner ID"
|
||||
searchable={false}
|
||||
/>
|
||||
),
|
||||
filterFn: "includesString",
|
||||
cell: (i) => i.getValue(),
|
||||
}),
|
||||
columnHelper.accessor("pinNumber", {
|
||||
header: ({ column }) => (
|
||||
<SearchableHeader column={column} title="Pin Number" />
|
||||
),
|
||||
|
||||
filterFn: "includesString",
|
||||
cell: ({ row, getValue }) => (
|
||||
<div className="flex flex-row gap-2">
|
||||
<div>
|
||||
<EditableCellInput
|
||||
value={getValue()}
|
||||
id={row.original.name}
|
||||
field="value"
|
||||
onSubmit={({ id, field, value }) => {
|
||||
updateSetting.mutate({ id, field, value });
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="">
|
||||
<Button
|
||||
type="button"
|
||||
onClick={async () => {
|
||||
const { data } = await axios.get("/lst/api/mobile/pin/new");
|
||||
updateSetting.mutate({
|
||||
id: row.original.id,
|
||||
field: "pinNumber",
|
||||
value: data.data[0].pin,
|
||||
});
|
||||
}}
|
||||
>
|
||||
New Pin
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
}),
|
||||
columnHelper.accessor("lastScan", {
|
||||
header: ({ column }) => (
|
||||
<SearchableHeader column={column} title="Last Scan" />
|
||||
),
|
||||
cell: (i) => <span>{format(i.getValue(), "M/d/yyyy HH:mm")}</span>,
|
||||
}),
|
||||
columnHelper.accessor("excludedCommand", {
|
||||
header: ({ column }) => (
|
||||
<SearchableHeader column={column} title="Command id's Not Allowed" />
|
||||
),
|
||||
cell: (i) => {
|
||||
const commands = i.getValue().join();
|
||||
return (
|
||||
<span>{commands === "" ? "All commands allowed" : commands}</span>
|
||||
);
|
||||
},
|
||||
}),
|
||||
columnHelper.accessor("deleteUser", {
|
||||
header: ({ column }) => (
|
||||
<SearchableHeader
|
||||
column={column}
|
||||
title="Delete User"
|
||||
searchable={false}
|
||||
/>
|
||||
),
|
||||
filterFn: "includesString",
|
||||
cell: (i) => {
|
||||
// biome-ignore lint: just removing the lint for now to get this going will maybe fix later
|
||||
const [activeToggle, setActiveToggle] = useState(false);
|
||||
|
||||
const onTrigger = async () => {
|
||||
setActiveToggle(true);
|
||||
|
||||
try {
|
||||
const res = await axios.delete(
|
||||
`/lst/api/mobile/auth/user/${i.row.original.id}`,
|
||||
|
||||
{
|
||||
withCredentials: true,
|
||||
timeout: 5000,
|
||||
validateStatus: () => true,
|
||||
},
|
||||
);
|
||||
|
||||
if (res.data.success) {
|
||||
toast.success(`${i.row.original.name} was deleted.`);
|
||||
refetch();
|
||||
setActiveToggle(false);
|
||||
}
|
||||
|
||||
if (!res.data.success) {
|
||||
toast.error(
|
||||
`${i.row.original.name} encountered an error when trying to delete: ${res.data.message}`,
|
||||
);
|
||||
refetch();
|
||||
setActiveToggle(false);
|
||||
}
|
||||
} catch (error) {
|
||||
setActiveToggle(false);
|
||||
console.error(error);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<Button
|
||||
variant="destructive"
|
||||
disabled={activeToggle}
|
||||
onClick={onTrigger}
|
||||
>
|
||||
{activeToggle ? (
|
||||
<span>
|
||||
<Spinner />
|
||||
</span>
|
||||
) : (
|
||||
<span>
|
||||
<Trash />
|
||||
</span>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
}),
|
||||
];
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="flex justify-end m-2">
|
||||
<Suspense
|
||||
fallback={
|
||||
<div>
|
||||
<p>Loading...</p>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<NewScanUser refetch={refetch} />
|
||||
</Suspense>
|
||||
</div>
|
||||
<div>
|
||||
<LstTable data={data} columns={columns} pageSize={50} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// const NewUserForm = ()=>{
|
||||
// const { data, refetch } = useSuspenseQuery(getScanUsers());
|
||||
// }
|
||||
function RouteComponent() {
|
||||
return <ScanUserTable />;
|
||||
//const { data: session } = useSession();
|
||||
return (
|
||||
<Suspense fallback={<SkellyTable />}>
|
||||
<ScanUserTable />
|
||||
</Suspense>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user