Add create vendor action

Signed-off-by: gearnode <bryan@frimin.fr>
This commit is contained in:
gearnode
2025-02-12 11:29:00 -08:00
parent 06dcbb805d
commit 84736a21b4
6 changed files with 401 additions and 11 deletions

View File

@@ -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({});

View 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;