oddbit · DennisAlund · Sep 5, 2024 · Sep 3, 2024 · Sep 3, 2024 · Sep 3, 2024
diff --git a/hosting/src/app/(protected)/content/article/[documentId]/page.tsx b/hosting/src/app/(protected)/content/article/[documentId]/page.tsx
@@ -1,4 +1,6 @@
 "use client";
+import {Button} from "@/components/Button";
+import {Input} from "@/components/Form";
 import Loader from "@/components/common/Loader";
 import Notification from "@/components/common/Notification";
 import PageHeader from "@/components/common/PageHeader";
@@ -18,8 +20,12 @@ export default function DocumentDetailsPage() {
   const {documentId} = useParams<{documentId: string}>() ?? {};
   const {data: document, error: documentError} = useTanamDocument(documentId);
   const {update, error: writeError} = useCrudTanamDocument();
+
+  const [title, setTitle] = useState<string>("");
   const [readonlyMode] = useState<boolean>(false);
+  const [updateTitleShown, setUpdateTitleShown] = useState<boolean>(false);
   const [notification, setNotification] = useState<UserNotification | null>(null);
+
   if (!!document?.documentType && document?.documentType !== "article") {
     router.push(`/content/${document?.documentType}/${document?.id}`);
     return <Loader />;
@@ -29,6 +35,30 @@ export default function DocumentDetailsPage() {
     setNotification(documentError || writeError);
   }, [documentError, writeError]);
 
+  useEffect(() => {
+    if (updateTitleShown) return;
+
+    onDocumentTitleChange(title);
+  }, [updateTitleShown]);
+
+  useEffect(() => {
+    if (document) {
+      setTitle(document.data.title as string);
+    }
+
+    return () => setTitle("");
+  }, [document]);
+
+  async function onDocumentTitleChange(title: string) {
+    console.log("[onDocumentTitleChange]", title);
+    if (!document) {
+      return;
+    }
+
+    document.data.title = title;
+    await update(document);
+  }
+
   async function onDocumentContentChange(content: string) {
     console.log("[onDocumentContentChange]", content);
     if (!document) {
@@ -41,13 +71,41 @@ export default function DocumentDetailsPage() {
 
   return (
     <>
-      <Suspense fallback={<Loader />}>
-        {document ? <PageHeader pageName={document.data.title as string} /> : <Loader />}
-      </Suspense>
       {notification && (
         <Notification type={notification.type} title={notification.title} message={notification.message} />
       )}
 
+      <Suspense fallback={<Loader />}>
+        {document ? (
+          <>
+            <div className="relative w-full flex flex-row gap-3">
+              {!updateTitleShown && <PageHeader pageName={document.data.title as string} />}
+
+              {updateTitleShown && (
+                <Input
+                  key="titleArticle"
+                  type="text"
+                  placeholder="Title"
+                  disabled={readonlyMode}
+                  value={title || ""}
+                  onChange={(e) => setTitle(e.target.value)}
+                />
+              )}
+
+              <Button
+                title={updateTitleShown ? "Save Changes" : "Edit Title"}
+                onClick={() => setUpdateTitleShown(!updateTitleShown)}
+                style="rounded"
+              >
+                <span className="i-ic-outline-edit mr-2" />
+              </Button>
+            </div>
+          </>
+        ) : (
+          <Loader />
+        )}
+      </Suspense>
+
       <TiptapEditor
         key={"article-content"}
         value={document?.data.content as string}

diff --git a/hosting/src/app/(protected)/content/article/page.tsx b/hosting/src/app/(protected)/content/article/page.tsx
@@ -3,9 +3,9 @@ import {Button} from "@/components/Button";
 import Loader from "@/components/common/Loader";
 import Notification from "@/components/common/Notification";
 import PageHeader from "@/components/common/PageHeader";
-import Dialog from "@/components/Dialog";
 import {DocumentTypeGenericList} from "@/components/DocumentType/DocumentTypeGenericList";
 import FilePicker from "@/components/FilePicker";
+import {Modal} from "@/components/Modal";
 import {useAuthentication} from "@/hooks/useAuthentication";
 import {ProcessingState, useGenkitArticle} from "@/hooks/useGenkitArticle";
 import {useCrudTanamDocument, useTanamDocuments} from "@/hooks/useTanamDocuments";
@@ -40,6 +40,12 @@ export default function DocumentTypeDocumentsPage() {
     setNotification(docsError || crudError);
   }, [docsError, crudError]);
 
+  function resetAudioInput() {
+    setAudio("");
+    setIsDialogOpen(false);
+    setIsRecording(false);
+  }
+
   async function addNewArticle() {
     if (!documentType) return;
     const id = await create(documentType.id);
@@ -61,6 +67,33 @@ export default function DocumentTypeDocumentsPage() {
     if (articleId) router.push(`article/${articleId}`);
   }
 
+  /**
+   * Modal actions for saving or canceling audio input.
+   * @constant
+   * @type {JSX.Element}
+   */
+  const modalActionAudioInput = (
+    <div className="flex flex-col sm:flex-row justify-end gap-3">
+      {/* Start button to close the audio input modal */}
+      <button
+        className="flex justify-center rounded border border-stroke px-6 py-2 font-medium text-black hover:shadow-1 dark:border-strokedark dark:text-white sm:w-full sm:text-sm"
+        onClick={resetAudioInput}
+      >
+        Close
+      </button>
+      {/* End button to close the audio input modal */}
+
+      {/* Start button to save changes audio input */}
+      <button
+        className="flex justify-center rounded bg-primary px-6 py-2 font-medium text-gray hover:bg-opacity-90 sm:w-full sm:text-sm"
+        onClick={submitAudio}
+      >
+        Save
+      </button>
+      {/* End button to save changes audio input */}
+    </div>
+  );
+
   return (
     <>
       <Suspense fallback={<Loader />}>
@@ -86,22 +119,20 @@ export default function DocumentTypeDocumentsPage() {
                   tabIndex={-1}
                 >
                   <div className="py-1" role="none">
-                    <a
-                      href="#"
-                      className="block px-4 py-2 text-sm text-gray-700 hover:bg-black hover:bg-opacity-5"
+                    <button
+                      className="block px-4 py-2 text-sm text-gray-700 hover:bg-black hover:bg-opacity-5 w-full text-left"
                       onClick={addNewArticle}
                     >
                       <span className="i-ic-create mr-2" />
                       {`Add New ${documentType.titleSingular.translated}`}
-                    </a>
-                    <a
-                      href="#"
-                      className="block px-4 py-2 text-sm text-gray-700 hover:bg-black hover:bg-opacity-5"
+                    </button>
+                    <button
+                      className="block px-4 py-2 text-sm text-gray-700 hover:bg-black hover:bg-opacity-5 w-full text-left"
                       onClick={() => setIsDialogOpen(true)}
                     >
                       <span className="i-ic-mic mr-2" />
                       {`Record new ${documentType.titleSingular.translated}`}
-                    </a>
+                    </button>
                   </div>
                 </div>
               </span>
@@ -122,10 +153,11 @@ export default function DocumentTypeDocumentsPage() {
             <DocumentTypeGenericList isLoading={isLoading} documents={documents} documentType={documentType} />
 
             {isDialogOpen && (
-              <Dialog
+              <Modal
                 isOpen={isDialogOpen}
-                onSubmit={submitAudio}
-                onClose={() => setIsDialogOpen(false)}
+                disableOverlayClose={true}
+                onClose={resetAudioInput}
+                actions={modalActionAudioInput}
                 title={"Tell your story"}
               >
                 {status === ProcessingState.Ready ? (
@@ -149,7 +181,7 @@ export default function DocumentTypeDocumentsPage() {
                     {status === ProcessingState.Finalizing && <p>Finalizing...</p>}
                   </div>
                 )}
-              </Dialog>
+              </Modal>
             )}
           </>
         ) : (

diff --git a/hosting/src/components/Button.tsx b/hosting/src/components/Button.tsx
@@ -3,7 +3,7 @@ import React, {useState} from "react";
 interface ButtonProps {
   title: string;
   onClick: () => Promise<void> | void;
-  style?: "normal" | "rounded" | "outline" | "icon";
+  style?: "normal" | "rounded" | "outline" | "outline-rounded" | "icon" | "icon-rounded";
   color?: "primary" | "meta-3" | "black";
   children?: React.ReactNode;
 }
@@ -20,7 +20,7 @@ export function Button({title, onClick, style = "rounded", color = "primary", ch
     }
   };
 
-  const styles = [
+  let styles = [
     "inline-flex",
     "items-center",
     "justify-center",
@@ -53,18 +53,26 @@ export function Button({title, onClick, style = "rounded", color = "primary", ch
       styles.push("rounded-md");
       break;
     case "outline":
+      styles = styles.filter((style) => style !== "text-white");
       styles.push(`border`, `border-${color}`, `text-${color}`, `bg-transparent`);
       break;
+    case "outline-rounded":
+      styles = styles.filter((style) => style !== "text-white");
+      styles.push(`border`, `border-${color}`, `text-${color}`, `bg-transparent`, "rounded-md");
+      break;
     case "icon":
       break;
+    case "icon-rounded":
+      styles.push("rounded-md");
+      break;
     default:
       break;
   }
 
   return (
     <button onClick={handleClick} className={styles.join(" ")} disabled={isLoading}>
       {children}
-      {style !== "icon" && <span>{title}</span>}
+      {style !== "icon" && style !== "icon-rounded" && <span>{title}</span>}
     </button>
   );
 }
diff --git a/hosting/src/components/Dialog.tsx b/hosting/src/components/Dialog.tsx