@@ -4,6 +4,9 @@ import {
|
||||
PreloadedQuery,
|
||||
usePreloadedQuery,
|
||||
useQueryLoader,
|
||||
useMutation,
|
||||
loadQuery,
|
||||
useLazyLoadQuery,
|
||||
} from "react-relay";
|
||||
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
@@ -14,7 +17,7 @@ import { Link } from "react-router";
|
||||
import Fuse from "fuse.js";
|
||||
import type { VendorListPageQuery as VendorListPageQueryType } from "./__generated__/VendorListPageQuery.graphql";
|
||||
|
||||
const VendorListPageQuery = graphql`
|
||||
const vendorListPageQuery = graphql`
|
||||
query VendorListPageQuery {
|
||||
node(id: "AZSfP_xAcAC5IAAAAAAltA") {
|
||||
id
|
||||
@@ -34,6 +37,17 @@ const VendorListPageQuery = graphql`
|
||||
}
|
||||
`;
|
||||
|
||||
const createVendorMutation = graphql`
|
||||
mutation VendorListPageCreateVendorMutation($input: CreateVendorInput!) {
|
||||
createVendor(input: $input) {
|
||||
id
|
||||
name
|
||||
createdAt
|
||||
updatedAt
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
// TODO: Remove this once we have a real list of vendors
|
||||
const vendorsList = [
|
||||
{ id: '1', name: 'Amazon Web Services', createdAt: new Date().toISOString() },
|
||||
@@ -43,21 +57,23 @@ const vendorsList = [
|
||||
{ id: '5', name: 'Slack', createdAt: new Date().toISOString() },
|
||||
];
|
||||
|
||||
|
||||
function VendorListContent({
|
||||
queryRef,
|
||||
}: {
|
||||
queryRef: PreloadedQuery<VendorListPageQueryType>;
|
||||
}) {
|
||||
const data = usePreloadedQuery(VendorListPageQuery, queryRef);
|
||||
const vendors = data.node?.vendors?.edges?.map(edge => edge?.node) ?? [];
|
||||
const data = usePreloadedQuery(vendorListPageQuery, queryRef);
|
||||
const [searchTerm, setSearchTerm] = useState("");
|
||||
const [filteredVendors, setFilteredVendors] = useState<Array<typeof vendorsList[0]>>([]);
|
||||
const [createVendor] = useMutation(createVendorMutation);
|
||||
const [_, loadQuery] = useQueryLoader<VendorListPageQueryType>(vendorListPageQuery);
|
||||
const fuse = new Fuse<typeof vendorsList[0]>(vendorsList, {
|
||||
keys: ['name'],
|
||||
threshold: 0.3,
|
||||
});
|
||||
|
||||
const vendors = data.node.vendors?.edges.map(edge => edge.node) ?? [];
|
||||
|
||||
return (
|
||||
<div className="p-6 space-y-6">
|
||||
<div className="space-y-1">
|
||||
@@ -103,10 +119,19 @@ function VendorListContent({
|
||||
key={vendor?.id}
|
||||
className="px-3 py-2 hover:bg-gray-100 cursor-pointer"
|
||||
onClick={() => {
|
||||
// Handle vendor selection
|
||||
console.log('Selected vendor:', vendor);
|
||||
setSearchTerm("");
|
||||
setFilteredVendors([]);
|
||||
createVendor({
|
||||
variables: {
|
||||
input: {
|
||||
organizationId: data.node.id,
|
||||
name: vendor.name
|
||||
}
|
||||
},
|
||||
onCompleted(response: any) {
|
||||
setSearchTerm("");
|
||||
setFilteredVendors([]);
|
||||
loadQuery({}, {fetchPolicy: 'network-only'});
|
||||
},
|
||||
});
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
@@ -179,7 +204,7 @@ function VendorListFallback() {
|
||||
}
|
||||
|
||||
export default function VendorListPage() {
|
||||
const [queryRef, loadQuery] = useQueryLoader<VendorListPageQueryType>(VendorListPageQuery);
|
||||
const [queryRef, loadQuery] = useQueryLoader<VendorListPageQueryType>(vendorListPageQuery);
|
||||
|
||||
useEffect(() => {
|
||||
loadQuery({});
|
||||
|
||||
117
apps/console/src/pages/__generated__/VendorListPageCreateVendorMutation.graphql.ts
generated
Normal file
117
apps/console/src/pages/__generated__/VendorListPageCreateVendorMutation.graphql.ts
generated
Normal file
@@ -0,0 +1,117 @@
|
||||
/**
|
||||
* @generated SignedSource<<c905d68569a5158d7e5a0ee5eb600a2b>>
|
||||
* @lightSyntaxTransform
|
||||
* @nogrep
|
||||
*/
|
||||
|
||||
/* tslint:disable */
|
||||
/* eslint-disable */
|
||||
// @ts-nocheck
|
||||
|
||||
import { ConcreteRequest } from 'relay-runtime';
|
||||
export type CreateVendorInput = {
|
||||
name: string;
|
||||
organizationId: string;
|
||||
};
|
||||
export type VendorListPageCreateVendorMutation$variables = {
|
||||
input: CreateVendorInput;
|
||||
};
|
||||
export type VendorListPageCreateVendorMutation$data = {
|
||||
readonly createVendor: {
|
||||
readonly createdAt: any;
|
||||
readonly id: string;
|
||||
readonly name: string;
|
||||
readonly updatedAt: any;
|
||||
};
|
||||
};
|
||||
export type VendorListPageCreateVendorMutation = {
|
||||
response: VendorListPageCreateVendorMutation$data;
|
||||
variables: VendorListPageCreateVendorMutation$variables;
|
||||
};
|
||||
|
||||
const node: ConcreteRequest = (function(){
|
||||
var v0 = [
|
||||
{
|
||||
"defaultValue": null,
|
||||
"kind": "LocalArgument",
|
||||
"name": "input"
|
||||
}
|
||||
],
|
||||
v1 = [
|
||||
{
|
||||
"alias": null,
|
||||
"args": [
|
||||
{
|
||||
"kind": "Variable",
|
||||
"name": "input",
|
||||
"variableName": "input"
|
||||
}
|
||||
],
|
||||
"concreteType": "Vendor",
|
||||
"kind": "LinkedField",
|
||||
"name": "createVendor",
|
||||
"plural": false,
|
||||
"selections": [
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "id",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "name",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "createdAt",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "updatedAt",
|
||||
"storageKey": null
|
||||
}
|
||||
],
|
||||
"storageKey": null
|
||||
}
|
||||
];
|
||||
return {
|
||||
"fragment": {
|
||||
"argumentDefinitions": (v0/*: any*/),
|
||||
"kind": "Fragment",
|
||||
"metadata": null,
|
||||
"name": "VendorListPageCreateVendorMutation",
|
||||
"selections": (v1/*: any*/),
|
||||
"type": "Mutation",
|
||||
"abstractKey": null
|
||||
},
|
||||
"kind": "Request",
|
||||
"operation": {
|
||||
"argumentDefinitions": (v0/*: any*/),
|
||||
"kind": "Operation",
|
||||
"name": "VendorListPageCreateVendorMutation",
|
||||
"selections": (v1/*: any*/)
|
||||
},
|
||||
"params": {
|
||||
"cacheID": "11eabcf8c7c1fef7b2cb37bcadf52666",
|
||||
"id": null,
|
||||
"metadata": {},
|
||||
"name": "VendorListPageCreateVendorMutation",
|
||||
"operationKind": "mutation",
|
||||
"text": "mutation VendorListPageCreateVendorMutation(\n $input: CreateVendorInput!\n) {\n createVendor(input: $input) {\n id\n name\n createdAt\n updatedAt\n }\n}\n"
|
||||
}
|
||||
};
|
||||
})();
|
||||
|
||||
(node as any).hash = "aeb5751c0d301a9433e706d237a025cd";
|
||||
|
||||
export default node;
|
||||
Reference in New Issue
Block a user