Save org (#64)

* refactor some apis and improve Create and Edit actions * finalize save org settings
mahmoudmoravej · Mar 8, 2024 · fe613e0 · fe613e0
1 parent bf9daec
commit fe613e0
Show file tree

Hide file tree

Showing 3 changed files with 83 additions and 8 deletions.
diff --git a/app/@types/graphql/schema.ts b/app/@types/graphql/schema.ts
@@ -158,6 +158,11 @@ export type AiEngineType = {
   title: Scalars['String']['output'];
 };
 
+export type AiEngineUpdate = {
+  id: Scalars['Int']['input'];
+  settings: Scalars['String']['input'];
+};
+
 /** Autogenerated input type of AnalyzeActivity */
 export type AnalyzeActivityInput = {
   /** A unique identifier for the client performing the mutation. */
@@ -647,6 +652,7 @@ export type OrganizationBasicInfo = {
 };
 
 export type OrganizationUpdate = {
+  aiEngines?: InputMaybe<Array<AiEngineUpdate>>;
   githubOrgs?: InputMaybe<Scalars['String']['input']>;
   githubToken?: InputMaybe<Scalars['String']['input']>;
   name: Scalars['String']['input'];

diff --git a/app/components/OrganizationForm.tsx b/app/components/OrganizationForm.tsx
@@ -7,12 +7,21 @@ import {
   Card,
   List,
   ListItem,
+  CardBody,
+  Textarea,
 } from "@material-tailwind/react";
 
 import { OrganizationUpdate } from "@app-types/graphql";
 import { ChangeEventHandler } from "react";
 
-export type OrganizationFormData = OrganizationUpdate & { isPersonal: boolean };
+export type OrganizationFormData = Omit<OrganizationUpdate, "aiEngines"> & {
+  isPersonal: boolean;
+} & {
+  aiEngines:
+    | { id: number; title: string; settings: string }[]
+    | null
+    | undefined;
+};
 
 export interface OrganizationFormProps<T extends OrganizationFormData> {
   id?: string;
@@ -47,7 +56,7 @@ export function OrganizationForm<T extends OrganizationFormData>({
   return (
     <div className="flex">
       <div className="w-1/2">
-        <Form className="mb-2 mt-8 w-80 max-w-screen-lg sm:w-96">
+        <Form className="mb-2 mt-8 w-80 max-w-screen-lg sm:w-auto">
           <div className="mb-1 flex flex-col gap-6">
             {!organization.isPersonal && (
               <>
@@ -150,7 +159,6 @@ export function OrganizationForm<T extends OrganizationFormData>({
                 />
               </>
             )}
-
             <Card>
               <List>
                 <ListItem className="p-0">
@@ -175,13 +183,59 @@ export function OrganizationForm<T extends OrganizationFormData>({
                 </ListItem>
               </List>
             </Card>
+            {!organization.useSystemAiEngine && (
+              <>
+                <Typography variant="h6" color="blue-gray" className="-mb-3">
+                  My AI Engines Settings
+                </Typography>
+
+                {organization?.aiEngines?.map(({ id, title, settings }) => (
+                  <div key={id}>
+                    <Card>
+                      <CardBody>
+                        <Typography color="blue-gray" variant="h6">
+                          {title}
+                        </Typography>
+                        <Textarea
+                          size="lg"
+                          className=" h-48 !border-t-blue-gray-200 focus:!border-t-gray-900"
+                          resize={true}
+                          rows={15}
+                          labelProps={{
+                            className: "before:content-none after:content-none",
+                          }}
+                          value={formatJson(settings)}
+                          onChange={({ target }) => {
+                            updateData({
+                              ...organization,
+                              aiEngines: [
+                                { id, title, settings: target.value },
+                              ],
+                            });
+                          }}
+                        />
+                      </CardBody>
+                    </Card>
+                  </div>
+                ))}
+              </>
+            )}
           </div>
 
           <Button className="mt-6" fullWidth onClick={onSubmit}>
             Save
           </Button>
         </Form>
       </div>
+      <div className="mt-6  w-96"></div>
     </div>
   );
 }
+
+function formatJson(json: string) {
+  try {
+    return JSON.stringify(JSON.parse(json), null, 2);
+  } catch {
+    return json;
+  }
+}
diff --git a/app/routes/_dashboard.organizations.$id.edit/route.tsx b/app/routes/_dashboard.organizations.$id.edit/route.tsx
@@ -13,7 +13,7 @@ import {
   OrganizationForm,
   OrganizationFormData,
 } from "~/components/OrganizationForm";
-import { getPureObject } from "~/utils";
+import { getPureObject, noNull } from "~/utils";
 
 type OrganizationEditFormData =
   | (OrganizationFormData & { id?: number | null })
@@ -87,14 +87,29 @@ function getEditData(
     return null;
   }
 
-  const { owner, ...orgData } = data?.organization;
+  const { owner, aiEngines: detailedAiEngines, ...orgData } = data.organization;
 
-  return getPureObject({ ...orgData, ownerEmail: owner?.email });
+  const aiEngines = detailedAiEngines?.nodes
+    ?.filter(noNull)
+    .map(({ id, settings, type: { title } }) => ({
+      id: id,
+      title,
+      settings: settings ?? "",
+    }));
+
+  return getPureObject({ ...orgData, aiEngines, ownerEmail: owner?.email });
 }
 
 function getSubmitData(
   data: Exclude<OrganizationEditFormData, null | undefined>,
 ): OrganizationUpdate {
-  const { id: _, isPersonal: __, ...input } = data;
-  return input;
+  const { id: _, isPersonal: __, aiEngines, ...input } = data;
+
+  return {
+    ...input,
+    aiEngines: aiEngines?.map(({ id, settings }) => ({
+      id,
+      settings,
+    })),
+  };
 }