rohit/probo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Allow to create vendor when it not exist

Browse Source 
Signed-off-by: gearnode <bryan@frimin.fr>
This commit is contained in:
gearnode
2025-03-17 13:51:51 +01:00
parent e3fc8af1f0
commit cee4f364a0
2 changed files with 85 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

114
apps/console/src/pages/VendorListPage.tsx
View File

@@ -272,44 +272,84 @@ function VendorListContent({
}}
/>
{searchTerm.trim() !== "" && filteredVendors.length > 0 && (
<div
style={{ borderRadius: "0.3rem" }}
className="absolute top-full left-0 mt-1 w-[calc(100%-100px)] max-h-48 overflow-y-auto border bg-popover shadow-md z-10"
>
{filteredVendors.map((vendor: VendorItem) => (
<button
key={vendor.id}
className="w-full px-3 py-2 text-left hover:bg-accent"
onClick={() => {
createVendor({
variables: {
connections: [vendorsConnection.vendors.__id],
input: {
organizationId: data.organization.id,
name: vendor.name,
description: "",
serviceStartAt: new Date().toISOString(),
serviceCriticality: "LOW",
riskTier: "GENERAL",
},
},
onCompleted() {
setSearchTerm("");
setFilteredVendors([]);
toast({
title: "Vendor added",
description:
"The vendor has been added successfully",
});
},
});
}}
{searchTerm.trim() !== "" && (
<>
{filteredVendors.length > 0 ? (
<div
style={{ borderRadius: "0.3rem" }}
className="absolute top-full left-0 mt-1 w-[calc(100%-100px)] max-h-48 overflow-y-auto border bg-popover shadow-md z-10"
>
{vendor.name}
</button>
))}
</div>
{filteredVendors.map((vendor: VendorItem) => (
<button
key={vendor.id}
className="w-full px-3 py-2 text-left hover:bg-accent"
onClick={() => {
createVendor({
variables: {
connections: [vendorsConnection.vendors.__id],
input: {
organizationId: data.organization.id,
name: vendor.name,
description: "",
serviceStartAt: new Date().toISOString(),
serviceCriticality: "LOW",
riskTier: "GENERAL",
},
},
onCompleted() {
setSearchTerm("");
setFilteredVendors([]);
toast({
title: "Vendor added",
description:
"The vendor has been added successfully",
});
},
});
}}
>
{vendor.name}
</button>
))}
</div>
) : (
<div
style={{ borderRadius: "0.3rem" }}
className="absolute top-full left-0 mt-1 w-[calc(100%-100px)] border bg-popover shadow-md z-10"
>
<button
className="w-full px-3 py-2 text-left hover:bg-accent flex items-center gap-2"
onClick={() => {
createVendor({
variables: {
connections: [vendorsConnection.vendors.__id],
input: {
organizationId: data.organization.id,
name: searchTerm.trim(),
description: "",
serviceStartAt: new Date().toISOString(),
serviceCriticality: "LOW",
riskTier: "GENERAL",
},
},
onCompleted() {
setSearchTerm("");
setFilteredVendors([]);
toast({
title: "Vendor created",
description:
"The new vendor has been created successfully",
});
},
});
}}
>
<span className="font-medium">Create new vendor:</span>{" "}
{searchTerm}
</button>
</div>
)}
</>
)}
</div>
</div>

16
apps/console/src/pages/VendorOverviewPage.tsx
View File

@@ -127,7 +127,7 @@ function VendorOverviewPageContent({
});
const [commit] = useMutation(updateVendorMutation);
const [, loadQuery] = useQueryLoader<VendorOverviewPageQueryType>(
vendorOverviewPageQuery,
vendorOverviewPageQuery
);
const { toast } = useToast();
@@ -261,7 +261,7 @@ function VendorOverviewPageContent({
"rounded-full px-4 py-1 text-sm transition-colors",
formData.serviceCriticality === "LOW"
? "bg-green-100 text-green-900 ring-2 ring-green-600 ring-offset-2"
: "bg-gray-100 text-gray-900 hover:bg-gray-200",
: "bg-gray-100 text-gray-900 hover:bg-gray-200"
)}
>
Low
@@ -274,7 +274,7 @@ function VendorOverviewPageContent({
"rounded-full px-4 py-1 text-sm transition-colors",
formData.serviceCriticality === "MEDIUM"
? "bg-yellow-100 text-yellow-900 ring-2 ring-yellow-600 ring-offset-2"
: "bg-gray-100 text-gray-900 hover:bg-gray-200",
: "bg-gray-100 text-gray-900 hover:bg-gray-200"
)}
>
Medium
@@ -287,7 +287,7 @@ function VendorOverviewPageContent({
"rounded-full px-4 py-1 text-sm transition-colors",
formData.serviceCriticality === "HIGH"
? "bg-red-100 text-red-900 ring-2 ring-red-600 ring-offset-2"
: "bg-gray-100 text-gray-900 hover:bg-gray-200",
: "bg-gray-100 text-gray-900 hover:bg-gray-200"
)}
>
High
@@ -315,7 +315,7 @@ function VendorOverviewPageContent({
"rounded-full px-4 py-1 text-sm transition-colors",
formData.riskTier === "CRITICAL"
? "bg-red-100 text-red-900 ring-2 ring-red-600 ring-offset-2"
: "bg-gray-100 text-gray-900 hover:bg-gray-200",
: "bg-gray-100 text-gray-900 hover:bg-gray-200"
)}
>
Critical
@@ -328,7 +328,7 @@ function VendorOverviewPageContent({
"rounded-full px-4 py-1 text-sm transition-colors",
formData.riskTier === "SIGNIFICANT"
? "bg-yellow-100 text-yellow-900 ring-2 ring-yellow-600 ring-offset-2"
: "bg-gray-100 text-gray-900 hover:bg-gray-200",
: "bg-gray-100 text-gray-900 hover:bg-gray-200"
)}
>
Significant
@@ -339,7 +339,7 @@ function VendorOverviewPageContent({
"rounded-full px-4 py-1 text-sm transition-colors",
formData.riskTier === "GENERAL"
? "bg-green-100 text-green-900 ring-2 ring-green-600 ring-offset-2"
: "bg-gray-100 text-gray-900 hover:bg-gray-200",
: "bg-gray-100 text-gray-900 hover:bg-gray-200"
)}
>
General
@@ -420,7 +420,7 @@ function VendorOverviewPageFallback() {
export default function VendorOverviewPage() {
const { vendorId } = useParams();
const [queryRef, loadQuery] = useQueryLoader<VendorOverviewPageQueryType>(
vendorOverviewPageQuery,
vendorOverviewPageQuery
);
useEffect(() => {