From a292fa80e32fd228b02ed36ce4f6ff4cf0c71d61 Mon Sep 17 00:00:00 2001 From: gearnode Date: Thu, 20 Feb 2025 10:03:18 +0100 Subject: [PATCH] Update vendor list page style Signed-off-by: gearnode --- apps/console/src/pages/VendorListPage.tsx | 306 ++++++++---------- .../VendorListPagePaginationQuery.graphql.ts | 15 +- .../VendorListPageQuery.graphql.ts | 13 +- .../VendorListPage_vendors.graphql.ts | 12 +- 4 files changed, 173 insertions(+), 173 deletions(-) diff --git a/apps/console/src/pages/VendorListPage.tsx b/apps/console/src/pages/VendorListPage.tsx index 6d01b41c7..25f5b642e 100644 --- a/apps/console/src/pages/VendorListPage.tsx +++ b/apps/console/src/pages/VendorListPage.tsx @@ -10,7 +10,7 @@ import { import { useSearchParams } from "react-router"; import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"; import { Badge } from "@/components/ui/badge"; -import { CircleUser, Globe, Shield, Store } from "lucide-react"; +import { CircleUser, Globe, Shield, Store, ChevronRight, Trash2 } from "lucide-react"; import { Input } from "@/components/ui/input"; import { Button } from "@/components/ui/button"; import { Link } from "react-router"; @@ -52,6 +52,7 @@ const vendorListFragment = graphql` node { id name + description createdAt updatedAt } @@ -207,93 +208,139 @@ function VendorListContent({ }); return ( -
-
-

Vendors

-

- Keep track of your company's vendors and their compliance status. +

+
+

Vendors

+

+ Vendors are third-party services that your company uses. Add them to keep track of their risk and compliance status.

-
-
-
- - + - -
-

Add a vendor

-

- Search and add new vendors -

-
-
-
-
- { - const value = e.target.value; - setSearchTerm(value); - if (value.trim() === "") { - setFilteredVendors([]); - } else { - const results = fuse - .search(value) - .map((result) => result.item); - setFilteredVendors(results); - } - }} - /> - {searchTerm.trim() !== "" && filteredVendors.length > 0 && ( -
- {filteredVendors.map((vendor) => ( -
{ - createVendor({ - variables: { - connections: [vendorsConnection.vendors.__id], - input: { - organizationId: data.currentOrganization.id, - name: vendor.name, - description: "", - serviceStartAt: new Date().toISOString(), - serviceCriticality: "LOW", - riskTier: "GENERAL", - }, - }, - onCompleted(response) { - setSearchTerm(""); - setFilteredVendors([]); - toast({ - title: "Vendor added", - description: - "The vendor has been added successfully", - }); - }, - }); - }} - > -
- - {vendor.name} -
-
- ))} -
- )} - -
-
+
+
+ +

Add a vendor

+
+ { + const value = e.target.value; + setSearchTerm(value); + if (value.trim() === "") { + setFilteredVendors([]); + } else { + const results = fuse + .search(value) + .map((result) => result.item); + setFilteredVendors(results); + } + }} + /> + + {searchTerm.trim() !== "" && filteredVendors.length > 0 && ( +
+ {filteredVendors.map((vendor) => ( + + ))} +
+ )} +
+
+ +
+ {vendors.map((vendor) => ( + +
+
+ + {vendor?.name?.[0]} + +
+

{vendor?.name}

+ {vendor?.description && ( + <> + • +

+ {vendor.description} +

+ + )} +
+
+
+ + Low Risk + + + +
+
+ + ))}
- -
- {vendors.map((vendor) => ( -
-
- -
- - {vendor?.name?.[0]} - -
-

- {vendor?.name} -

-

- Vendor since{" "} - {new Date(vendor?.createdAt).toLocaleDateString()} -

-
-
- -
- - Active - -
- - - -
- - Not assessed - - -
-
-
- ))} -
- -
+
+
-
+
+
+
+
+
+
+
+
{[1, 2, 3].map((i) => ( -
+
))}
diff --git a/apps/console/src/pages/__generated__/VendorListPagePaginationQuery.graphql.ts b/apps/console/src/pages/__generated__/VendorListPagePaginationQuery.graphql.ts index e3c638e66..11d655e5c 100644 --- a/apps/console/src/pages/__generated__/VendorListPagePaginationQuery.graphql.ts +++ b/apps/console/src/pages/__generated__/VendorListPagePaginationQuery.graphql.ts @@ -1,5 +1,5 @@ /** - * @generated SignedSource<<86f3151a87bc97ed9d37df57377f1cce>> + * @generated SignedSource<<035db05f931b88ee09b1bbdd2c39a7e7>> * @lightSyntaxTransform * @nogrep */ @@ -186,6 +186,13 @@ return { "name": "name", "storageKey": null }, + { + "alias": null, + "args": null, + "kind": "ScalarField", + "name": "description", + "storageKey": null + }, { "alias": null, "args": null, @@ -287,16 +294,16 @@ return { ] }, "params": { - "cacheID": "3ce437d0d8e4415db28f78cf8c9aac7c", + "cacheID": "61e9346ec50a3f4b1397fa2e6165ab3e", "id": null, "metadata": {}, "name": "VendorListPagePaginationQuery", "operationKind": "query", - "text": "query VendorListPagePaginationQuery(\n $after: CursorKey\n $before: CursorKey\n $first: Int\n $last: Int\n $id: ID!\n) {\n node(id: $id) {\n __typename\n ...VendorListPage_vendors\n id\n }\n}\n\nfragment VendorListPage_vendors on Organization {\n id\n vendors(first: $first, after: $after, last: $last, before: $before) {\n edges {\n node {\n id\n name\n createdAt\n updatedAt\n __typename\n }\n cursor\n }\n pageInfo {\n hasNextPage\n hasPreviousPage\n startCursor\n endCursor\n }\n }\n}\n" + "text": "query VendorListPagePaginationQuery(\n $after: CursorKey\n $before: CursorKey\n $first: Int\n $last: Int\n $id: ID!\n) {\n node(id: $id) {\n __typename\n ...VendorListPage_vendors\n id\n }\n}\n\nfragment VendorListPage_vendors on Organization {\n id\n vendors(first: $first, after: $after, last: $last, before: $before) {\n edges {\n node {\n id\n name\n description\n createdAt\n updatedAt\n __typename\n }\n cursor\n }\n pageInfo {\n hasNextPage\n hasPreviousPage\n startCursor\n endCursor\n }\n }\n}\n" } }; })(); -(node as any).hash = "e8f708324eb6ffe29b4f80d62179d324"; +(node as any).hash = "b5d797660f73e909467c3ab4e988001f"; export default node; diff --git a/apps/console/src/pages/__generated__/VendorListPageQuery.graphql.ts b/apps/console/src/pages/__generated__/VendorListPageQuery.graphql.ts index 89abed7a7..d93948fa5 100644 --- a/apps/console/src/pages/__generated__/VendorListPageQuery.graphql.ts +++ b/apps/console/src/pages/__generated__/VendorListPageQuery.graphql.ts @@ -1,5 +1,5 @@ /** - * @generated SignedSource<<229adb1cb5f4f80a57bb742ddae67448>> + * @generated SignedSource<<65ad922b0229a2d1840687c46d5cea29>> * @lightSyntaxTransform * @nogrep */ @@ -187,6 +187,13 @@ return { "name": "name", "storageKey": null }, + { + "alias": null, + "args": null, + "kind": "ScalarField", + "name": "description", + "storageKey": null + }, { "alias": null, "args": null, @@ -288,12 +295,12 @@ return { ] }, "params": { - "cacheID": "b910bb15ebb2e9b5aae2f20e0f5266db", + "cacheID": "8150b3303765174bbf41ebf4cd12534c", "id": null, "metadata": {}, "name": "VendorListPageQuery", "operationKind": "query", - "text": "query VendorListPageQuery(\n $first: Int\n $after: CursorKey\n $last: Int\n $before: CursorKey\n) {\n currentOrganization: node(id: \"AZSfP_xAcAC5IAAAAAAltA\") {\n __typename\n id\n ... on Organization {\n ...VendorListPage_vendors\n }\n }\n}\n\nfragment VendorListPage_vendors on Organization {\n id\n vendors(first: $first, after: $after, last: $last, before: $before) {\n edges {\n node {\n id\n name\n createdAt\n updatedAt\n __typename\n }\n cursor\n }\n pageInfo {\n hasNextPage\n hasPreviousPage\n startCursor\n endCursor\n }\n }\n}\n" + "text": "query VendorListPageQuery(\n $first: Int\n $after: CursorKey\n $last: Int\n $before: CursorKey\n) {\n currentOrganization: node(id: \"AZSfP_xAcAC5IAAAAAAltA\") {\n __typename\n id\n ... on Organization {\n ...VendorListPage_vendors\n }\n }\n}\n\nfragment VendorListPage_vendors on Organization {\n id\n vendors(first: $first, after: $after, last: $last, before: $before) {\n edges {\n node {\n id\n name\n description\n createdAt\n updatedAt\n __typename\n }\n cursor\n }\n pageInfo {\n hasNextPage\n hasPreviousPage\n startCursor\n endCursor\n }\n }\n}\n" } }; })(); diff --git a/apps/console/src/pages/__generated__/VendorListPage_vendors.graphql.ts b/apps/console/src/pages/__generated__/VendorListPage_vendors.graphql.ts index c10648760..b831837e5 100644 --- a/apps/console/src/pages/__generated__/VendorListPage_vendors.graphql.ts +++ b/apps/console/src/pages/__generated__/VendorListPage_vendors.graphql.ts @@ -1,5 +1,5 @@ /** - * @generated SignedSource<<9f827470f46558fd3946d0c714a4a713>> + * @generated SignedSource<> * @lightSyntaxTransform * @nogrep */ @@ -17,6 +17,7 @@ export type VendorListPage_vendors$data = { readonly edges: ReadonlyArray<{ readonly node: { readonly createdAt: any; + readonly description: string; readonly id: string; readonly name: string; readonly updatedAt: any; @@ -133,6 +134,13 @@ return { "name": "name", "storageKey": null }, + { + "alias": null, + "args": null, + "kind": "ScalarField", + "name": "description", + "storageKey": null + }, { "alias": null, "args": null, @@ -227,6 +235,6 @@ return { }; })(); -(node as any).hash = "e8f708324eb6ffe29b4f80d62179d324"; +(node as any).hash = "b5d797660f73e909467c3ab4e988001f"; export default node;