Add company name and logo to documents
Signed-off-by: Sacha Al Himdani <sacha@getprobo.com>
This commit is contained in:
Sacha Al Himdani
@@ -4,6 +4,9 @@ import {
|
||||
Badge,
|
||||
Button,
|
||||
Card,
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogFooter,
|
||||
DropdownItem,
|
||||
Field,
|
||||
FileButton,
|
||||
@@ -13,6 +16,7 @@ import {
|
||||
Spinner,
|
||||
Textarea,
|
||||
useConfirm,
|
||||
useDialogRef,
|
||||
useToast,
|
||||
} from "@probo/ui";
|
||||
import { useTranslate } from "@probo/i18n";
|
||||
@@ -58,6 +62,7 @@ const organizationFragment = graphql`
|
||||
id
|
||||
name
|
||||
logoUrl
|
||||
horizontalLogoUrl
|
||||
description
|
||||
websiteUrl
|
||||
email
|
||||
@@ -107,6 +112,7 @@ const updateOrganizationMutation = graphql`
|
||||
id
|
||||
name
|
||||
logoUrl
|
||||
horizontalLogoUrl
|
||||
description
|
||||
websiteUrl
|
||||
email
|
||||
@@ -116,6 +122,17 @@ const updateOrganizationMutation = graphql`
|
||||
}
|
||||
`;
|
||||
|
||||
const deleteHorizontalLogoMutation = graphql`
|
||||
mutation SettingsPage_DeleteHorizontalLogoMutation($input: DeleteOrganizationHorizontalLogoInput!) {
|
||||
deleteOrganizationHorizontalLogo(input: $input) {
|
||||
organization {
|
||||
id
|
||||
horizontalLogoUrl
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export default function SettingsPage({ queryRef }: Props) {
|
||||
const { __ } = useTranslate();
|
||||
const navigate = useNavigate();
|
||||
@@ -129,6 +146,13 @@ export default function SettingsPage({ queryRef }: Props) {
|
||||
organizationKey
|
||||
);
|
||||
const [updateOrganization] = useMutation(updateOrganizationMutation);
|
||||
const [deleteHorizontalLogo, isDeletingHorizontalLogo] = useMutationWithToasts(
|
||||
deleteHorizontalLogoMutation,
|
||||
{
|
||||
successMessage: __("Horizontal logo deleted successfully"),
|
||||
errorMessage: __("Failed to delete horizontal logo"),
|
||||
}
|
||||
);
|
||||
const [deleteOrganization, isDeleting] = useDeleteOrganizationMutation();
|
||||
const users = organization.users.edges.map((edge) => edge.node);
|
||||
|
||||
@@ -167,10 +191,10 @@ export default function SettingsPage({ queryRef }: Props) {
|
||||
headquarterAddress: data.headquarterAddress || null,
|
||||
},
|
||||
},
|
||||
onError(error) {
|
||||
onError() {
|
||||
toast({
|
||||
title: __("Failed to update organization"),
|
||||
description: error.message || __("Please try again."),
|
||||
title: __("Error"),
|
||||
description: __("Failed to update organization."),
|
||||
variant: "error",
|
||||
});
|
||||
},
|
||||
@@ -201,13 +225,67 @@ export default function SettingsPage({ queryRef }: Props) {
|
||||
uploadables: {
|
||||
"input.logo": file,
|
||||
},
|
||||
onError(error) {
|
||||
onError() {
|
||||
toast({
|
||||
title: __("Failed to update organization logo"),
|
||||
description: error.message || __("Please try again."),
|
||||
title: __("Error"),
|
||||
description: __("Failed to update logo"),
|
||||
variant: "error",
|
||||
});
|
||||
},
|
||||
onCompleted() {
|
||||
toast({
|
||||
title: __("Success"),
|
||||
description: __("Your organization logo has been updated successfully."),
|
||||
variant: "success",
|
||||
});
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const updateHorizontalLogo: ChangeEventHandler<HTMLInputElement> = (e) => {
|
||||
const file = e.target.files?.[0];
|
||||
if (!file) {
|
||||
return;
|
||||
}
|
||||
updateOrganization({
|
||||
variables: {
|
||||
input: {
|
||||
organizationId: organization.id,
|
||||
horizontalLogoFile: null,
|
||||
},
|
||||
},
|
||||
uploadables: {
|
||||
"input.horizontalLogoFile": file,
|
||||
},
|
||||
onError() {
|
||||
toast({
|
||||
title: __("Error"),
|
||||
description: __("Failed to update horizontal logo."),
|
||||
variant: "error",
|
||||
});
|
||||
},
|
||||
onCompleted() {
|
||||
toast({
|
||||
title: __("Success"),
|
||||
description: __("Your organization horizontal logo has been updated successfully."),
|
||||
variant: "success",
|
||||
});
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const deleteDialogRef = useDialogRef();
|
||||
|
||||
const handleDeleteHorizontalLogo = () => {
|
||||
deleteHorizontalLogo({
|
||||
variables: {
|
||||
input: {
|
||||
organizationId: organization.id,
|
||||
},
|
||||
},
|
||||
onSuccess: () => {
|
||||
deleteDialogRef.current?.close();
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
@@ -252,11 +330,72 @@ export default function SettingsPage({ queryRef }: Props) {
|
||||
onChange={updateOrganizationLogo}
|
||||
variant="secondary"
|
||||
className="ml-auto"
|
||||
accept="image/png,image/jpeg,image/jpg"
|
||||
>
|
||||
{__("Change logo")}
|
||||
</FileButton>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<Label>{__("Horizontal logo")}</Label>
|
||||
<p className="text-sm text-txt-tertiary mb-2">
|
||||
{__("Upload a horizontal version of your logo for use in documents")}
|
||||
</p>
|
||||
<div className="flex items-center gap-4">
|
||||
{organization.horizontalLogoUrl && (
|
||||
<div className="border border-border-solid rounded-md p-4 bg-surface-secondary">
|
||||
<img
|
||||
src={organization.horizontalLogoUrl}
|
||||
alt={__("Horizontal logo")}
|
||||
className="h-12 max-w-xs object-contain"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<FileButton
|
||||
disabled={formState.isSubmitting}
|
||||
onChange={updateHorizontalLogo}
|
||||
variant="secondary"
|
||||
accept="image/png,image/jpeg,image/jpg"
|
||||
>
|
||||
{organization.horizontalLogoUrl ? __("Change horizontal logo") : __("Upload horizontal logo")}
|
||||
</FileButton>
|
||||
{organization.horizontalLogoUrl && (
|
||||
<Dialog
|
||||
ref={deleteDialogRef}
|
||||
trigger={
|
||||
<Button
|
||||
variant="quaternary"
|
||||
icon={IconTrashCan}
|
||||
aria-label={__("Delete horizontal logo")}
|
||||
className="text-red-600 hover:text-red-700"
|
||||
/>
|
||||
}
|
||||
title={__("Delete Horizontal Logo")}
|
||||
className="max-w-md"
|
||||
>
|
||||
<DialogContent padded>
|
||||
<p className="text-txt-secondary">
|
||||
{__("Are you sure you want to delete the horizontal logo?")}
|
||||
</p>
|
||||
<p className="text-txt-secondary mt-2">
|
||||
{__("This action cannot be undone.")}
|
||||
</p>
|
||||
</DialogContent>
|
||||
|
||||
<DialogFooter>
|
||||
<Button
|
||||
variant="danger"
|
||||
onClick={handleDeleteHorizontalLogo}
|
||||
disabled={isDeletingHorizontalLogo}
|
||||
icon={isDeletingHorizontalLogo ? Spinner : IconTrashCan}
|
||||
>
|
||||
{isDeletingHorizontalLogo ? __("Deleting...") : __("Delete")}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</Dialog>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<Field
|
||||
{...register("name")}
|
||||
readOnly={formState.isSubmitting}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
/**
|
||||
* @generated SignedSource<<daff4e27d1bdd110777f99826abd4e17>>
|
||||
* @generated SignedSource<<122f3da12674107565d07159872492db>>
|
||||
* @lightSyntaxTransform
|
||||
* @nogrep
|
||||
*/
|
||||
@@ -40,6 +40,7 @@ export type SettingsPageFragment$data = {
|
||||
readonly description: string | null | undefined;
|
||||
readonly email: string | null | undefined;
|
||||
readonly headquarterAddress: string | null | undefined;
|
||||
readonly horizontalLogoUrl: string | null | undefined;
|
||||
readonly id: string;
|
||||
readonly logoUrl: string | null | undefined;
|
||||
readonly name: string;
|
||||
@@ -119,6 +120,13 @@ return {
|
||||
"name": "logoUrl",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "horizontalLogoUrl",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
@@ -302,6 +310,6 @@ return {
|
||||
};
|
||||
})();
|
||||
|
||||
(node as any).hash = "1f76d60a35b4b5116821419432ec4aed";
|
||||
(node as any).hash = "6cea6f88fb0d7b2ae7ef9053b9979898";
|
||||
|
||||
export default node;
|
||||
|
||||
113
apps/console/src/pages/organizations/__generated__/SettingsPage_DeleteHorizontalLogoMutation.graphql.ts
generated
Normal file
113
apps/console/src/pages/organizations/__generated__/SettingsPage_DeleteHorizontalLogoMutation.graphql.ts
generated
Normal file
@@ -0,0 +1,113 @@
|
||||
/**
|
||||
* @generated SignedSource<<4ed3d530d746d8b84b2dba8752e57abc>>
|
||||
* @lightSyntaxTransform
|
||||
* @nogrep
|
||||
*/
|
||||
|
||||
/* tslint:disable */
|
||||
/* eslint-disable */
|
||||
// @ts-nocheck
|
||||
|
||||
import { ConcreteRequest } from 'relay-runtime';
|
||||
export type DeleteOrganizationHorizontalLogoInput = {
|
||||
organizationId: string;
|
||||
};
|
||||
export type SettingsPage_DeleteHorizontalLogoMutation$variables = {
|
||||
input: DeleteOrganizationHorizontalLogoInput;
|
||||
};
|
||||
export type SettingsPage_DeleteHorizontalLogoMutation$data = {
|
||||
readonly deleteOrganizationHorizontalLogo: {
|
||||
readonly organization: {
|
||||
readonly horizontalLogoUrl: string | null | undefined;
|
||||
readonly id: string;
|
||||
};
|
||||
};
|
||||
};
|
||||
export type SettingsPage_DeleteHorizontalLogoMutation = {
|
||||
response: SettingsPage_DeleteHorizontalLogoMutation$data;
|
||||
variables: SettingsPage_DeleteHorizontalLogoMutation$variables;
|
||||
};
|
||||
|
||||
const node: ConcreteRequest = (function(){
|
||||
var v0 = [
|
||||
{
|
||||
"defaultValue": null,
|
||||
"kind": "LocalArgument",
|
||||
"name": "input"
|
||||
}
|
||||
],
|
||||
v1 = [
|
||||
{
|
||||
"alias": null,
|
||||
"args": [
|
||||
{
|
||||
"kind": "Variable",
|
||||
"name": "input",
|
||||
"variableName": "input"
|
||||
}
|
||||
],
|
||||
"concreteType": "DeleteOrganizationHorizontalLogoPayload",
|
||||
"kind": "LinkedField",
|
||||
"name": "deleteOrganizationHorizontalLogo",
|
||||
"plural": false,
|
||||
"selections": [
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"concreteType": "Organization",
|
||||
"kind": "LinkedField",
|
||||
"name": "organization",
|
||||
"plural": false,
|
||||
"selections": [
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "id",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "horizontalLogoUrl",
|
||||
"storageKey": null
|
||||
}
|
||||
],
|
||||
"storageKey": null
|
||||
}
|
||||
],
|
||||
"storageKey": null
|
||||
}
|
||||
];
|
||||
return {
|
||||
"fragment": {
|
||||
"argumentDefinitions": (v0/*: any*/),
|
||||
"kind": "Fragment",
|
||||
"metadata": null,
|
||||
"name": "SettingsPage_DeleteHorizontalLogoMutation",
|
||||
"selections": (v1/*: any*/),
|
||||
"type": "Mutation",
|
||||
"abstractKey": null
|
||||
},
|
||||
"kind": "Request",
|
||||
"operation": {
|
||||
"argumentDefinitions": (v0/*: any*/),
|
||||
"kind": "Operation",
|
||||
"name": "SettingsPage_DeleteHorizontalLogoMutation",
|
||||
"selections": (v1/*: any*/)
|
||||
},
|
||||
"params": {
|
||||
"cacheID": "e631480d50c9347050fdc62075a2e3a3",
|
||||
"id": null,
|
||||
"metadata": {},
|
||||
"name": "SettingsPage_DeleteHorizontalLogoMutation",
|
||||
"operationKind": "mutation",
|
||||
"text": "mutation SettingsPage_DeleteHorizontalLogoMutation(\n $input: DeleteOrganizationHorizontalLogoInput!\n) {\n deleteOrganizationHorizontalLogo(input: $input) {\n organization {\n id\n horizontalLogoUrl\n }\n }\n}\n"
|
||||
}
|
||||
};
|
||||
})();
|
||||
|
||||
(node as any).hash = "751c3ff44c59511451095ffc66446c2f";
|
||||
|
||||
export default node;
|
||||
@@ -1,5 +1,5 @@
|
||||
/**
|
||||
* @generated SignedSource<<892a78db951d547b53d595d219b94e75>>
|
||||
* @generated SignedSource<<ce571f7246b6f7500a132f28c8081f84>>
|
||||
* @lightSyntaxTransform
|
||||
* @nogrep
|
||||
*/
|
||||
@@ -13,6 +13,7 @@ export type UpdateOrganizationInput = {
|
||||
description?: string | null | undefined;
|
||||
email?: string | null | undefined;
|
||||
headquarterAddress?: string | null | undefined;
|
||||
horizontalLogoFile?: any | null | undefined;
|
||||
logo?: any | null | undefined;
|
||||
name?: string | null | undefined;
|
||||
organizationId: string;
|
||||
@@ -27,6 +28,7 @@ export type SettingsPage_UpdateMutation$data = {
|
||||
readonly description: string | null | undefined;
|
||||
readonly email: string | null | undefined;
|
||||
readonly headquarterAddress: string | null | undefined;
|
||||
readonly horizontalLogoUrl: string | null | undefined;
|
||||
readonly id: string;
|
||||
readonly logoUrl: string | null | undefined;
|
||||
readonly name: string;
|
||||
@@ -91,6 +93,13 @@ v1 = [
|
||||
"name": "logoUrl",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "horizontalLogoUrl",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
@@ -144,16 +153,16 @@ return {
|
||||
"selections": (v1/*: any*/)
|
||||
},
|
||||
"params": {
|
||||
"cacheID": "3526d270f311db33e0563abc99c96978",
|
||||
"cacheID": "097a6e519249d6f2b3c2a95963f85a6c",
|
||||
"id": null,
|
||||
"metadata": {},
|
||||
"name": "SettingsPage_UpdateMutation",
|
||||
"operationKind": "mutation",
|
||||
"text": "mutation SettingsPage_UpdateMutation(\n $input: UpdateOrganizationInput!\n) {\n updateOrganization(input: $input) {\n organization {\n id\n name\n logoUrl\n description\n websiteUrl\n email\n headquarterAddress\n }\n }\n}\n"
|
||||
"text": "mutation SettingsPage_UpdateMutation(\n $input: UpdateOrganizationInput!\n) {\n updateOrganization(input: $input) {\n organization {\n id\n name\n logoUrl\n horizontalLogoUrl\n description\n websiteUrl\n email\n headquarterAddress\n }\n }\n}\n"
|
||||
}
|
||||
};
|
||||
})();
|
||||
|
||||
(node as any).hash = "54949158defa7f1bb8e1e578db7cd7be";
|
||||
(node as any).hash = "c676129018636d84dbca9d8c98962af7";
|
||||
|
||||
export default node;
|
||||
|
||||
Reference in New Issue
Block a user