calvin.erfmann/pangolin
1
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2026-02-01 07:39:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

♻️ use Queries

Browse Source
This commit is contained in:
Fred KISSIE
2025-12-04 00:42:59 +01:00
parent 1b09e5b9f9
commit c695f50122
2 changed files with 85 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files

206
src/components/EditInternalResourceDialog.tsx
View File

@@ -1,6 +1,6 @@
"use client";
import { useEffect, useState } from "react";
import { useEffect, useMemo, useState } from "react";
import { Button } from "@app/components/ui/button";
import { Input } from "@app/components/ui/input";
import {
@@ -45,7 +45,7 @@ import { ListClientsResponse } from "@server/routers/client/listClients";
import { Tag, TagInput } from "@app/components/tags/tag-input";
import { AxiosResponse } from "axios";
import { UserType } from "@server/types/UserTypes";
import { useQuery } from "@tanstack/react-query";
import { useQueries, useQuery } from "@tanstack/react-query";
import { orgQueries, resourceQueries } from "@app/lib/queries";
type InternalResourceData = {
@@ -157,42 +157,61 @@ export default function EditInternalResourceDialog({
type FormData = z.infer<typeof formSchema>;
const { data: rolesResponse = [] } = useQuery(orgQueries.roles({ orgId }));
const queries = useQueries({
queries: [
orgQueries.roles({ orgId }),
orgQueries.users({ orgId }),
orgQueries.clients({
orgId,
filters: {
filter: "machine"
}
}),
resourceQueries.resourceUsers({ resourceId: resource.id }),
resourceQueries.resourceRoles({ resourceId: resource.id }),
resourceQueries.resourceClients({ resourceId: resource.id })
]
});
const allRoles = rolesResponse
const [
rolesQuery,
usersQuery,
clientsQuery,
resourceUsersQuery,
resourceRolesQuery,
resourceClientsQuery
] = queries;
const allRoles = (rolesQuery.data ?? [])
.map((role) => ({
id: role.roleId.toString(),
text: role.name
}))
.filter((role) => role.text !== "Admin");
const { data: usersResponse = [] } = useQuery(orgQueries.users({ orgId }));
const { data: existingClients = [] } = useQuery(
resourceQueries.resourceUsers({ resourceId: resource.id })
);
const { data: clientsResponse = [] } = useQuery(
orgQueries.clients({
orgId,
filters: {
filter: "machine"
}
})
);
const allUsers = usersResponse.map((user) => ({
const allUsers = (usersQuery.data ?? []).map((user) => ({
id: user.id.toString(),
text: `${user.email || user.username}${user.type !== UserType.Internal ? ` (${user.idpName})` : ""}`
}));
const allClients = clientsResponse
const machineClients = (clientsQuery.data ?? [])
.filter((client) => !client.userId)
.map((client) => ({
id: client.clientId.toString(),
text: client.name
}));
const existingClients = (resourceClientsQuery.data ?? []).map(
(c: { clientId: number; name: string }) => ({
id: c.clientId.toString(),
text: c.name
})
);
const hasMachineClients =
allClients.length > 0 || existingClients.length > 0;
machineClients.length > 0 || existingClients.length > 0;
const loadingRolesUsers = queries.some((query) => query.isLoading);
const [activeRolesTagIndex, setActiveRolesTagIndex] = useState<
number | null
@@ -203,7 +222,6 @@ export default function EditInternalResourceDialog({
const [activeClientsTagIndex, setActiveClientsTagIndex] = useState<
number | null
>(null);
const [loadingRolesUsers, setLoadingRolesUsers] = useState(false);
const form = useForm<FormData>({
resolver: zodResolver(formSchema),
@@ -223,117 +241,6 @@ export default function EditInternalResourceDialog({
const mode = form.watch("mode");
// const fetchRolesAndUsers = async () => {
// setLoadingRolesUsers(true);
// try {
// const [
// // rolesResponse,
// resourceRolesResponse,
// usersResponse,
// resourceUsersResponse,
// clientsResponse
// ] = await Promise.all([
// // api.get<AxiosResponse<ListRolesResponse>>(
// // `/org/${orgId}/roles`
// // ),
// api.get<AxiosResponse<ListSiteResourceRolesResponse>>(
// `/site-resource/${resource.id}/roles`
// ),
// api.get<AxiosResponse<ListUsersResponse>>(
// `/org/${orgId}/users`
// ),
// api.get<AxiosResponse<ListSiteResourceUsersResponse>>(
// `/site-resource/${resource.id}/users`
// ),
// api.get<AxiosResponse<ListClientsResponse>>(
// `/org/${orgId}/clients?filter=machine&limit=1000`
// )
// ]);
// let resourceClientsResponse: AxiosResponse<
// AxiosResponse<ListSiteResourceClientsResponse>
// >;
// try {
// resourceClientsResponse = await api.get<
// AxiosResponse<ListSiteResourceClientsResponse>
// >(`/site-resource/${resource.id}/clients`);
// } catch {
// resourceClientsResponse = {
// data: {
// data: {
// clients: []
// }
// },
// status: 200,
// statusText: "OK",
// headers: {} as any,
// config: {} as any
// } as any;
// }
// // setAllRoles(
// // rolesResponse.data.data.roles
// // .map((role) => ({
// // id: role.roleId.toString(),
// // text: role.name
// // }))
// // .filter((role) => role.text !== "Admin")
// // );
// form.setValue(
// "roles",
// resourceRolesResponse.data.data.roles
// .map((i) => ({
// id: i.roleId.toString(),
// text: i.name
// }))
// .filter((role) => role.text !== "Admin")
// );
// form.setValue(
// "users",
// resourceUsersResponse.data.data.users.map((i) => ({
// id: i.userId.toString(),
// text: `${i.email || i.username}${i.type !== UserType.Internal ? ` (${i.idpName})` : ""}`
// }))
// );
// const machineClients = clientsResponse.data.data.clients
// .filter((client) => !client.userId)
// .map((client) => ({
// id: client.clientId.toString(),
// text: client.name
// }));
// setAllClients(machineClients);
// const existingClients =
// resourceClientsResponse.data.data.clients.map(
// (c: { clientId: number; name: string }) => ({
// id: c.clientId.toString(),
// text: c.name
// })
// );
// form.setValue("clients", existingClients);
// // Show clients tag input if there are machine clients OR existing client access
// setHasMachineClients(
// machineClients.length > 0 || existingClients.length > 0
// );
// } catch (error) {
// console.error("Error fetching roles, users, and clients:", error);
// } finally {
// setLoadingRolesUsers(false);
// }
// };
// useEffect(() => {
// if (open) {
// fetchRolesAndUsers();
// }
// }, [open, resource]);
const handleSubmit = async (data: FormData) => {
setIsSubmitting(true);
try {
@@ -399,6 +306,39 @@ export default function EditInternalResourceDialog({
}
};
// Set form values when data is loaded
useEffect(() => {
if (resourceRolesQuery.data) {
form.setValue(
"roles",
resourceRolesQuery.data
.map((i) => ({
id: i.roleId.toString(),
text: i.name
}))
.filter((role) => role.text !== "Admin")
);
}
}, [resourceRolesQuery.data, form]);
useEffect(() => {
if (resourceUsersQuery.data) {
form.setValue(
"users",
resourceUsersQuery.data.map((i) => ({
id: i.userId.toString(),
text: `${i.email || i.username}${i.type !== UserType.Internal ? ` (${i.idpName})` : ""}`
}))
);
}
}, [resourceUsersQuery.data, form]);
useEffect(() => {
if (clientsQuery.data) {
form.setValue("clients", existingClients);
}
}, [clientsQuery.data, existingClients, form]);
return (
<Credenza
open={open}
@@ -818,7 +758,7 @@ export default function EditInternalResourceDialog({
true
}
autocompleteOptions={
allClients
machineClients
}
allowDuplicates={
false

12
src/lib/queries.ts
View File

@@ -3,6 +3,7 @@ import type { ListClientsResponse } from "@server/routers/client";
import type { ListRolesResponse } from "@server/routers/role";
import type { ListSitesResponse } from "@server/routers/site";
import type {
ListSiteResourceClientsResponse,
ListSiteResourceRolesResponse,
ListSiteResourceUsersResponse
} from "@server/routers/siteResource";
@@ -160,5 +161,16 @@ export const resourceQueries = {
return res.data.data.roles;
}
}),
resourceClients: ({ resourceId }: { resourceId: number }) =>
queryOptions({
queryKey: ["RESOURCES", resourceId, "ROLES"] as const,
queryFn: async ({ signal, meta }) => {
const res = await meta!.api.get<
AxiosResponse<ListSiteResourceClientsResponse>
>(`/site-resource/${resourceId}/clients`, { signal });
return res.data.data.clients;
}
})
};