👔 Add alert dialog for connection and api-keys

panoratech · Apr 30, 2024 · 11f2133 · 11f2133
1 parent a4ecb04
commit 11f2133
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 38 deletions.
diff --git a/apps/client-ts/src/app/(Dashboard)/api-keys/page.tsx b/apps/client-ts/src/app/(Dashboard)/api-keys/page.tsx
@@ -144,44 +144,60 @@ export default function Page() {
             </Button>
             </DialogTrigger>
             <DialogContent>
-              <DialogHeader>
-                <DialogTitle>Add New Api Key</DialogTitle>
-                <DialogDescription>
-                  Never share this key, you must saved it it will be displayed once !
-                </DialogDescription>
-              </DialogHeader>
-
-              <Form {...form}>
-                <form onSubmit={form.handleSubmit(onSubmit)}>
-                <div className="grid gap-4 py-4">
-                  <div className="grid gap-2">
-                  <FormField
-                        control={form.control}
-                        name="apiKeyIdentifier"
-                        render={({ field }) => (
-                          <FormItem>
-                            <FormLabel>API Key Identifier</FormLabel>
-                            <FormControl>
-                              <Input 
-                              className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none  focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"                              
-                              placeholder="My Best Key For Finance Data" {...field}
-                              />
-                            </FormControl>
-                            <FormDescription>
-                              This is the API Key Identifier of system.
-                            </FormDescription>
-                            <FormMessage />
-                          </FormItem>
-                        )}
-                    />
+              {idProject==="" ? (
+                <>
+                <DialogHeader>
+                  <DialogTitle></DialogTitle>
+                </DialogHeader>
+                <h1>You have to create project in order to create API Key.</h1>
+                <DialogFooter>
+                  <Button variant='outline' type="reset" onClick={() => onCancel()}>Close</Button>
+                </DialogFooter>
+                </>
+              )
+              :
+              (
+                <>
+                <DialogHeader>
+                  <DialogTitle>Add New Api Key</DialogTitle>
+                  <DialogDescription>
+                    Never share this key, you must saved it it will be displayed once !
+                  </DialogDescription>
+                </DialogHeader>
+
+                <Form {...form}>
+                  <form onSubmit={form.handleSubmit(onSubmit)}>
+                  <div className="grid gap-4 py-4">
+                    <div className="grid gap-2">
+                    <FormField
+                          control={form.control}
+                          name="apiKeyIdentifier"
+                          render={({ field }) => (
+                            <FormItem>
+                              <FormLabel>API Key Identifier</FormLabel>
+                              <FormControl>
+                                <Input 
+                                className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none  focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"                              
+                                placeholder="My Best Key For Finance Data" {...field}
+                                />
+                              </FormControl>
+                              <FormDescription>
+                                This is the API Key Identifier of system.
+                              </FormDescription>
+                              <FormMessage />
+                            </FormItem>
+                          )}
+                      />
+                    </div>
                   </div>
-                </div>
-              <DialogFooter>
-                <Button variant='outline' type="reset" onClick={() => onCancel()}>Cancel</Button>
-                <Button type='submit'>Create</Button>
-              </DialogFooter>
-                </form>
-              </Form>
+                <DialogFooter>
+                  <Button variant='outline' type="reset" onClick={() => onCancel()}>Cancel</Button>
+                  <Button type='submit'>Create</Button>
+                </DialogFooter>
+                  </form>
+                </Form>
+                </>
+              )}
             </DialogContent>
           </Dialog>
         </div>

diff --git a/apps/client-ts/src/components/Connection/AddConnectionButton.tsx b/apps/client-ts/src/components/Connection/AddConnectionButton.tsx
@@ -169,6 +169,20 @@ const AddConnectionButton = ({
         </PopoverContent>
       </Popover> 
       <DialogContent>
+        {idProject==="" ? (
+          <>
+            <DialogHeader>
+              <DialogTitle></DialogTitle>
+            </DialogHeader>
+              <h1>You have to create project in order to create Connection.</h1>
+              <DialogFooter>
+                <Button variant='outline' type="reset" onClick={() => setShowNewLinkedUserDialog({open: false})}>Close</Button>
+              </DialogFooter>
+          </>
+        )
+      :
+      (
+        <>
         <DialogHeader>
           <DialogTitle>Share this magic link with your customers</DialogTitle>
           <DialogDescription>
@@ -244,6 +258,8 @@ const AddConnectionButton = ({
         </DialogFooter>
         </form>
         </Form>
+        </>
+      )}
       </DialogContent>
     </Dialog>    
   )

diff --git a/apps/client-ts/src/hooks/mutations/useProjectMutation.tsx b/apps/client-ts/src/hooks/mutations/useProjectMutation.tsx
@@ -47,7 +47,7 @@ const useProjectMutation = () => {
         },
         onSuccess: (data) => {
 
-            console.log(data)
+            // console.log(data)
             queryClient.setQueryData<IProDto[]>(['projects'], (oldQueryData = []) => {
                 return [...oldQueryData, data];
             });