Add update organziation

Signed-off-by: gearnode <bryan@frimin.fr>
2025-03-13 11:15:13 +01:00
parent 843a3242e1
commit ab739d9bda
16 changed files with 544 additions and 93 deletions
--- a/apps/console/src/components/NavUser.tsx
+++ b/apps/console/src/components/NavUser.tsx
@@ -1,21 +1,13 @@
 "use client";

-import {
-  BadgeCheck,
-  Bell,
-  ChevronsUpDown,
-  CreditCard,
-  LogOut,
-  Sparkles,
-} from "lucide-react";
+import { ChevronsUpDown, LogOut } from "lucide-react";
 import { graphql, useFragment } from "react-relay";
-import { useNavigate, useParams } from "react-router";
+import { useParams } from "react-router";

 import { Avatar, AvatarFallback } from "@/components/ui/avatar";
 import {
  DropdownMenu,
  DropdownMenuContent,
-  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
--- a/apps/console/src/components/generated/OrganizationSwitcher_organizations.graphql.ts
+++ b/apps/console/src/components/generated/OrganizationSwitcher_organizations.graphql.ts
@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<e71f99685baea9efcb9f603d577f7412>>
+ * @generated SignedSource<<075aa1caf8416e0cce7536d0da9b5ca9>>
 * @lightSyntaxTransform
 * @nogrep
 */
@@ -16,7 +16,7 @@ export type OrganizationSwitcher_organizations$data = {
    readonly edges: ReadonlyArray<{
      readonly node: {
        readonly id: string;
-        readonly logoUrl: string;
+        readonly logoUrl: string | null | undefined;
        readonly name: string;
      };
    }>;
--- a/apps/console/src/components/ui/command.tsx
+++ b/apps/console/src/components/ui/command.tsx
@@ -6,6 +6,11 @@ import { Search } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { Dialog, DialogContent } from "@/components/ui/dialog";

+// Add the missing type definition
+type CommandDialogProps = DialogProps & {
+  children?: React.ReactNode;
+};
+
 const Command = React.forwardRef<
  React.ElementRef<typeof CommandPrimitive>,
  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
@@ -21,8 +26,6 @@ const Command = React.forwardRef<
 ));
 Command.displayName = CommandPrimitive.displayName;

-interface CommandDialogProps extends DialogProps {}
-
 const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
  return (
    <Dialog {...props}>
@@ -39,7 +42,7 @@ const CommandInput = React.forwardRef<
  React.ElementRef<typeof CommandPrimitive.Input>,
  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
 >(({ className, ...props }, ref) => (
-  <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
+  <div className="flex items-center border-b px-3" data-cmdk-input-wrapper="">
    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
    <CommandPrimitive.Input
      ref={ref}
--- a/apps/console/src/pages/SettingsPage.tsx
+++ b/apps/console/src/pages/SettingsPage.tsx
@@ -1,4 +1,4 @@
-import { Mail, Building2, Upload, MoreVertical } from "lucide-react";
+import { Building2, Upload, MoreVertical } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import {
  Card,
@@ -15,15 +15,28 @@ import {
  DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { Helmet } from "react-helmet-async";
-import { Suspense, useEffect } from "react";
+import { Suspense, useEffect, useState, useRef } from "react";
 import {
  graphql,
  PreloadedQuery,
  usePreloadedQuery,
  useQueryLoader,
+  useMutation,
 } from "react-relay";
 import { useParams } from "react-router";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { useToast } from "@/hooks/use-toast";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
 import type { SettingsPageQuery as SettingsPageQueryType } from "./__generated__/SettingsPageQuery.graphql";
+import type { SettingsPageUpdateOrganizationMutation as SettingsPageUpdateOrganizationMutationType } from "./__generated__/SettingsPageUpdateOrganizationMutation.graphql";

 const settingsPageQuery = graphql`
  query SettingsPageQuery($organizationID: ID!) {
@@ -37,6 +50,20 @@ const settingsPageQuery = graphql`
  }
 `;

+const updateOrganizationMutation = graphql`
+  mutation SettingsPageUpdateOrganizationMutation(
+    $input: UpdateOrganizationInput!
+  ) {
+    updateOrganization(input: $input) {
+      organization {
+        id
+        name
+        logoUrl
+      }
+    }
+  }
+`;
+
 interface Member {
  id: string;
  fullName: string;
@@ -52,6 +79,88 @@ function SettingsPageContent({
  const data = usePreloadedQuery(settingsPageQuery, queryRef);
  const organization = data.organization;
  const members: Member[] = [];
+  const { toast } = useToast();
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const [isEditNameOpen, setIsEditNameOpen] = useState(false);
+  const [organizationName, setOrganizationName] = useState(
+    organization.name || ""
+  );
+  const [isUploading, setIsUploading] = useState(false);
+
+  const [updateOrganization] =
+    useMutation<SettingsPageUpdateOrganizationMutationType>(
+      updateOrganizationMutation
+    );
+
+  const handleUpdateName = () => {
+    updateOrganization({
+      variables: {
+        input: {
+          organizationId: organization.id,
+          name: organizationName,
+        },
+      },
+      onCompleted: () => {
+        toast({
+          title: "Organization updated",
+          description: "Organization name has been updated successfully.",
+          variant: "default",
+        });
+        setIsEditNameOpen(false);
+      },
+      onError: (error) => {
+        toast({
+          title: "Error updating organization",
+          description: error.message,
+          variant: "destructive",
+        });
+      },
+    });
+  };
+
+  const handleLogoUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+
+    // Create a FileReader to read the file as a data URL
+    const reader = new FileReader();
+    reader.onloadend = () => {
+      setIsUploading(true);
+
+      updateOrganization({
+        variables: {
+          input: {
+            organizationId: organization.id,
+            logo: null,
+          },
+        },
+        uploadables: {
+          "input.logo": file,
+        },
+        onCompleted: () => {
+          setIsUploading(false);
+          toast({
+            title: "Logo updated",
+            description: "Organization logo has been updated successfully.",
+            variant: "default",
+          });
+          if (fileInputRef.current) {
+            fileInputRef.current.value = "";
+          }
+        },
+        onError: (error) => {
+          setIsUploading(false);
+          toast({
+            title: "Error updating logo",
+            description: error.message,
+            variant: "destructive",
+          });
+        },
+      });
+    };
+    reader.readAsDataURL(file);
+  };

  return (
    <>
@@ -65,32 +174,10 @@ function SettingsPageContent({

        <Card>
          <CardHeader>
-            <CardTitle>User & Organisation information</CardTitle>
-            <CardDescription>
-              Publish your trust page to the web
-            </CardDescription>
+            <CardTitle>Organization information</CardTitle>
+            <CardDescription>Manage your organization details</CardDescription>
          </CardHeader>
          <CardContent className="space-y-6">
-            <div className="space-y-2">
-              <label className="text-sm font-medium">Account email</label>
-              <div className="flex items-center justify-between rounded-lg border p-3 shadow-xs">
-                <div className="flex items-center gap-2">
-                  <Mail className="h-5 w-5 text-muted-foreground" />
-                  <span className="text-muted-foreground">
-                    This is your email to connect to Probo
-                  </span>
-                </div>
-                <div className="flex items-center gap-2">
-                  <span className="text-sm text-green-600">
-                    john.doe@example.com
-                  </span>
-                  <Button variant="outline" size="sm">
-                    Edit
-                  </Button>
-                </div>
-              </div>
-            </div>
-
            <div className="space-y-2">
              <label className="text-sm font-medium">Organization logo</label>
              <div className="flex items-center justify-between rounded-lg border p-3 shadow-xs">
@@ -110,7 +197,23 @@ function SettingsPageContent({
                    Upload a logo to be displayed at the top of your trust page
                  </span>
                </div>
-                <Button variant="outline">Change image</Button>
+                <div className="flex items-center gap-2">
+                  <input
+                    type="file"
+                    ref={fileInputRef}
+                    onChange={handleLogoUpload}
+                    accept="image/*"
+                    className="hidden"
+                    id="logo-upload"
+                  />
+                  <Button
+                    variant="outline"
+                    onClick={() => fileInputRef.current?.click()}
+                    disabled={isUploading}
+                  >
+                    {isUploading ? "Uploading..." : "Change image"}
+                  </Button>
+                </div>
              </div>
            </div>

@@ -125,16 +228,19 @@ function SettingsPageContent({
                </div>
                <div className="flex items-center gap-2">
                  <span className="text-sm">{organization.name}</span>
-                  <Button variant="outline" size="sm">
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => {
+                      setOrganizationName(organization.name || "");
+                      setIsEditNameOpen(true);
+                    }}
+                  >
                    Edit
                  </Button>
                </div>
              </div>
            </div>
-
-            <Button variant="destructive" className="mt-6">
-              Delete Organization
-            </Button>
          </CardContent>
        </Card>

@@ -193,6 +299,34 @@ function SettingsPageContent({
          </CardContent>
        </Card>
      </div>
+
+      <Dialog open={isEditNameOpen} onOpenChange={setIsEditNameOpen}>
+        <DialogContent className="sm:max-w-md">
+          <DialogHeader>
+            <DialogTitle>Edit Organization Name</DialogTitle>
+            <DialogDescription>
+              Update the name of your organization.
+            </DialogDescription>
+          </DialogHeader>
+          <div className="space-y-4 py-4">
+            <div className="space-y-2">
+              <Label htmlFor="organization-name">Organization Name</Label>
+              <Input
+                id="organization-name"
+                value={organizationName}
+                onChange={(e) => setOrganizationName(e.target.value)}
+                placeholder="Enter organization name"
+              />
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setIsEditNameOpen(false)}>
+              Cancel
+            </Button>
+            <Button onClick={handleUpdateName}>Save Changes</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
    </>
  );
 }
--- a/apps/console/src/pages/generated/CreateOrganizationPageCreateOrganizationMutation.graphql.ts
+++ b/apps/console/src/pages/generated/CreateOrganizationPageCreateOrganizationMutation.graphql.ts
@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<75687d4b60d4ae79658fffb99ea6f52b>>
+ * @generated SignedSource<<a147a01f27db2e92570cd66f6b9c1df9>>
 * @lightSyntaxTransform
 * @nogrep
 */
@@ -21,7 +21,7 @@ export type CreateOrganizationPageCreateOrganizationMutation$data = {
    readonly organizationEdge: {
      readonly node: {
        readonly id: string;
-        readonly logoUrl: string;
+        readonly logoUrl: string | null | undefined;
        readonly name: string;
      };
    };
--- a/apps/console/src/pages/generated/OrganizationSelectionPageQuery.graphql.ts
+++ b/apps/console/src/pages/generated/OrganizationSelectionPageQuery.graphql.ts
@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<59c4e8be77fdb5ebcc76c2a611f38052>>
+ * @generated SignedSource<<d50c4986386f83d9755379cd44eb7c2c>>
 * @lightSyntaxTransform
 * @nogrep
 */
@@ -17,7 +17,7 @@ export type OrganizationSelectionPageQuery$data = {
      readonly edges: ReadonlyArray<{
        readonly node: {
          readonly id: string;
-          readonly logoUrl: string;
+          readonly logoUrl: string | null | undefined;
          readonly name: string;
        };
      }>;
--- a/apps/console/src/pages/generated/SettingsPageQuery.graphql.ts
+++ b/apps/console/src/pages/generated/SettingsPageQuery.graphql.ts
@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<9a5ce377f093c4bbbb2375aacc373fb0>>
+ * @generated SignedSource<<eb02c3812f7904bcf7d937d1c29d9905>>
 * @lightSyntaxTransform
 * @nogrep
 */
@@ -15,7 +15,7 @@ export type SettingsPageQuery$variables = {
 export type SettingsPageQuery$data = {
  readonly organization: {
    readonly id: string;
-    readonly logoUrl?: string;
+    readonly logoUrl?: string | null | undefined;
    readonly name?: string;
  };
 };
--- a/apps/console/src/pages/generated/SettingsPageUpdateOrganizationMutation.graphql.ts
+++ b/apps/console/src/pages/generated/SettingsPageUpdateOrganizationMutation.graphql.ts
@@ -0,0 +1,123 @@
+/**
+ * @generated SignedSource<<76018198697d82d6f630558618c6aaff>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+
+/* tslint:disable */
+/* eslint-disable */
+// @ts-nocheck
+
+import { ConcreteRequest } from 'relay-runtime';
+export type UpdateOrganizationInput = {
+  logo?: any | null | undefined;
+  name?: string | null | undefined;
+  organizationId: string;
+};
+export type SettingsPageUpdateOrganizationMutation$variables = {
+  input: UpdateOrganizationInput;
+};
+export type SettingsPageUpdateOrganizationMutation$data = {
+  readonly updateOrganization: {
+    readonly organization: {
+      readonly id: string;
+      readonly logoUrl: string | null | undefined;
+      readonly name: string;
+    };
+  };
+};
+export type SettingsPageUpdateOrganizationMutation = {
+  response: SettingsPageUpdateOrganizationMutation$data;
+  variables: SettingsPageUpdateOrganizationMutation$variables;
+};
+
+const node: ConcreteRequest = (function(){
+var v0 = [
+  {
+    "defaultValue": null,
+    "kind": "LocalArgument",
+    "name": "input"
+  }
+],
+v1 = [
+  {
+    "alias": null,
+    "args": [
+      {
+        "kind": "Variable",
+        "name": "input",
+        "variableName": "input"
+      }
+    ],
+    "concreteType": "UpdateOrganizationPayload",
+    "kind": "LinkedField",
+    "name": "updateOrganization",
+    "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": "name",
+            "storageKey": null
+          },
+          {
+            "alias": null,
+            "args": null,
+            "kind": "ScalarField",
+            "name": "logoUrl",
+            "storageKey": null
+          }
+        ],
+        "storageKey": null
+      }
+    ],
+    "storageKey": null
+  }
+];
+return {
+  "fragment": {
+    "argumentDefinitions": (v0/*: any*/),
+    "kind": "Fragment",
+    "metadata": null,
+    "name": "SettingsPageUpdateOrganizationMutation",
+    "selections": (v1/*: any*/),
+    "type": "Mutation",
+    "abstractKey": null
+  },
+  "kind": "Request",
+  "operation": {
+    "argumentDefinitions": (v0/*: any*/),
+    "kind": "Operation",
+    "name": "SettingsPageUpdateOrganizationMutation",
+    "selections": (v1/*: any*/)
+  },
+  "params": {
+    "cacheID": "2bf2a6e054aed9bd337372682342a30f",
+    "id": null,
+    "metadata": {},
+    "name": "SettingsPageUpdateOrganizationMutation",
+    "operationKind": "mutation",
+    "text": "mutation SettingsPageUpdateOrganizationMutation(\n  $input: UpdateOrganizationInput!\n) {\n  updateOrganization(input: $input) {\n    organization {\n      id\n      name\n      logoUrl\n    }\n  }\n}\n"
+  }
+};
+})();
+
+(node as any).hash = "737ec44a08ac05e9f78827811cc0ca0e";
+
+export default node;