Using isLoading on buttons where needed and using new input components

src/renderer/react/routes/projects/$projectId/collections/$collectionId/create.tsx

@@ -8,7 +8,7 @@ import { NotificationIntent } from '@elek-io/ui';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { createFileRoute, useRouter } from '@tanstack/react-router';
 import { Check } from 'lucide-react';
-import { ReactElement } from 'react';
+import { ReactElement, useState } from 'react';
 import { ControllerRenderProps, SubmitHandler, useForm } from 'react-hook-form';
 import { Button } from '../../../../../components/ui/button';
 import {
@@ -33,6 +33,7 @@ export const Route = createFileRoute(
 function ProjectCollectionEntryCreate() {
   const router = useRouter();
   const context = Route.useRouteContext();
+  const [isCreatingEntry, setIsCreatingEntry] = useState(false);
   const addNotification = context.store((state) => state.addNotification);
 
   const createEntryForm = useForm<CreateEntryProps>({
@@ -61,10 +62,11 @@ function ProjectCollectionEntryCreate() {
   });
 
   const onCreateEntry: SubmitHandler<CreateEntryProps> = async (data) => {
-    console.log('Creating Entry:', data);
+    setIsCreatingEntry(true);
 
     try {
       const entry = await context.core.entries.create(data);
+      setIsCreatingEntry(false);
       addNotification({
         intent: NotificationIntent.SUCCESS,
         title: 'Created new Entry for this Collection',
@@ -80,6 +82,7 @@ function ProjectCollectionEntryCreate() {
         },
       });
     } catch (error) {
+      setIsCreatingEntry(false);
       console.error(error);
       addNotification({
         intent: NotificationIntent.DANGER,
@@ -216,7 +219,10 @@ function ProjectCollectionEntryCreate() {
   function Actions(): ReactElement {
     return (
       <>
-        <Button onClick={createEntryForm.handleSubmit(onCreateEntry)}>
+        <Button
+          isLoading={isCreatingEntry}
+          onClick={createEntryForm.handleSubmit(onCreateEntry)}
+        >
           <Check className="h-4 w-4 mr-2"></Check>
           Create{' '}
           {context.translate(

src/renderer/react/routes/projects/$projectId/collections/$collectionId/update.tsx

@@ -1,15 +1,26 @@
-import { Collection, supportedIconSchema } from '@elek-io/shared';
+import { Button } from '@/renderer/react/components/ui/button';
 import {
-  Button,
-  FormInput,
-  FormSelect,
-  FormTextarea,
-  NotificationIntent,
-  Page,
-  formatTimestamp,
-} from '@elek-io/ui';
-import { CheckIcon, TrashIcon } from '@heroicons/react/20/solid';
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/renderer/react/components/ui/dialog';
+import { Form } from '@/renderer/react/components/ui/form';
+import { Page } from '@/renderer/react/components/ui/page';
+import { formatTimestamp } from '@/util';
+import {
+  DeleteCollectionProps,
+  UpdateCollectionProps,
+  updateCollectionSchema,
+} from '@elek-io/shared';
+import { NotificationIntent } from '@elek-io/ui';
+import { zodResolver } from '@hookform/resolvers/zod';
 import { createFileRoute, useRouter } from '@tanstack/react-router';
+import { Check, Trash } from 'lucide-react';
 import { ReactElement, useState } from 'react';
 import { SubmitHandler, useForm } from 'react-hook-form';
 
@@ -24,13 +35,18 @@ function ProjectCollectionUpdate() {
   const context = Route.useRouteContext();
   const addNotification = context.store((state) => state.addNotification);
   const [isUpdatingCollection, setIsUpdatingCollection] = useState(false);
-  const {
-    register,
-    handleSubmit,
-    watch,
-    control,
-    formState: { errors, isDirty },
-  } = useForm<Collection>({ defaultValues: context.currentCollection });
+  const updateCollectionForm = useForm<UpdateCollectionProps>({
+    resolver: async (data, context, options) => {
+      // you can debug your validation schema here
+      console.log('formData', data);
+      console.log(
+        'validation result',
+        await zodResolver(updateCollectionSchema)(data, context, options)
+      );
+      return zodResolver(updateCollectionSchema)(data, context, options);
+    },
+    defaultValues: context.currentCollection,
+  });
 
   function Title(): string {
     return `Configure ${context.translate(
@@ -64,29 +80,24 @@ function ProjectCollectionUpdate() {
     return (
       <>
         <Button
-          intent="primary"
-          prependIcon={CheckIcon}
-          state={
-            isUpdatingCollection
-              ? 'loading'
-              : isDirty === false
-              ? 'disabled'
-              : undefined
-          }
-          onClick={handleSubmit(onUpdate)}
+          isLoading={isUpdatingCollection}
+          onClick={updateCollectionForm.handleSubmit(onUpdate)}
         >
+          <Check className="w-4 h-4 mr-2"></Check>
           Save changes
         </Button>
       </>
     );
   }
 
-  const onUpdate: SubmitHandler<Collection> = async (collection) => {
+  const onUpdate: SubmitHandler<UpdateCollectionProps> = async (collection) => {
+    setIsUpdatingCollection(true);
     try {
       await context.core.collections.update({
         ...collection,
         projectId: context.currentProject.id,
       });
+      setIsUpdatingCollection(false);
       router.navigate({
         to: '/projects/$projectId/collections/$collectionId',
         params: {
@@ -95,6 +106,7 @@ function ProjectCollectionUpdate() {
         },
       });
     } catch (error) {
+      setIsUpdatingCollection(false);
       console.error(error);
       addNotification({
         intent: NotificationIntent.DANGER,
@@ -104,7 +116,7 @@ function ProjectCollectionUpdate() {
     }
   };
 
-  const onDelete: SubmitHandler<Collection> = async (collection) => {
+  const onDelete: SubmitHandler<DeleteCollectionProps> = async (collection) => {
     try {
       await context.core.collections.delete({
         projectId: context.currentProject.id,
@@ -137,78 +149,47 @@ function ProjectCollectionUpdate() {
       actions={<Actions></Actions>}
       description={<Description></Description>}
     >
-      {/* {JSON.stringify(watch())}
-      <hr /> */}
-      <form className="divide-y divide-gray-200 lg:col-span-9">
-        <section className="px-4 py-6 sm:p-6 lg:pb-8 flex-grow space-y-4">
-          <div className="grid grid-cols-12 gap-6">
-            <div className="col-span-12 sm:col-span-3">
-              <FormSelect
-                name={`icon`}
-                options={supportedIconSchema.options.map((option) => {
-                  return {
-                    name: option,
-                    value: option,
-                    disabled: false,
-                  };
-                })}
-                label="Icon"
-                description="The icon of this Collection"
-                control={control}
-                errors={errors}
-              ></FormSelect>
-            </div>
-            <div className="col-span-12 sm:col-span-9">
-              <FormInput
-                name={`name.singular.${context.currentUser.locale.id}`}
-                type="text"
-                label="Name"
-                placeholder="Blogposts"
-                description="Give your new Collection a name"
-                register={register}
-                errors={errors}
-                required
-              ></FormInput>
-            </div>
-          </div>
-          <div>
-            <FormTextarea
-              name={`description.${context.currentUser.locale.id}`}
-              rows={3}
-              label="Description"
-              placeholder="Posts that are displayed inside the blog"
-              description="Give your new Collection a description"
-              register={register}
-              errors={errors}
-            ></FormTextarea>
-          </div>
-        </section>
-        <section className="px-4 py-6 sm:p-6 lg:pb-8">
-          <h2 className="text-lg font-medium leading-6 text-gray-900 mb-6">
-            Danger Zone
-          </h2>
-          <div className="flex justify-between items-center">
-            <div>
-              <p className="text-sm font-medium leading-6 text-gray-900">
-                Delete this Project
-              </p>
-              <p className="text-sm text-gray-500">
-                Once you delete a Project, there is no going back. Please be
-                certain.
-              </p>
-            </div>
-            <div>
-              <Button
-                intent="danger"
-                prependIcon={TrashIcon}
-                onClick={handleSubmit(onDelete)}
-              >
+      <Form {...updateCollectionForm}>
+        <form onSubmit={updateCollectionForm.handleSubmit(onUpdate)}>
+          <h1>Update Collection here</h1>
+          <Dialog>
+            <DialogTrigger asChild>
+              <Button variant="destructive">
+                <Trash className="w-4 h-4 mr-2"></Trash>
                 Delete Collection
               </Button>
-            </div>
-          </div>
-        </section>
-      </form>
+            </DialogTrigger>
+            <DialogContent>
+              <DialogHeader>
+                <DialogTitle>Are you absolutely sure?</DialogTitle>
+                <DialogDescription>
+                  This action cannot be undone if your Project is not replicated
+                  somewhere else than this device.
+                </DialogDescription>
+              </DialogHeader>
+              <DialogFooter>
+                <DialogClose asChild>
+                  <Button type="button" variant="secondary">
+                    No, I've changed my mind
+                  </Button>
+                </DialogClose>
+                <Button
+                  variant="destructive"
+                  onClick={() =>
+                    onDelete({
+                      projectId: context.currentProject.id,
+                      id: context.currentCollection.id,
+                    })
+                  }
+                >
+                  <Trash className="w-4 h-4 mr-2"></Trash>
+                  Yes, delete this Collection
+                </Button>
+              </DialogFooter>
+            </DialogContent>
+          </Dialog>
+        </form>
+      </Form>
     </Page>
   );
 }

src/renderer/react/routes/projects/$projectId/collections/create.tsx

@@ -70,6 +70,7 @@ function ProjectCollectionCreate() {
   const router = useRouter();
   const context = Route.useRouteContext();
   const addNotification = context.store((state) => state.addNotification);
+  const [isCreatingCollection, setIsCreatingCollection] = useState(false);
   const [isAddValueDefinitionSheetOpen, setIsAddValueDefinitionSheetOpen] =
     useState(false);
   const [selectedInputType, setSelectedInputType] =
@@ -191,7 +192,10 @@ function ProjectCollectionCreate() {
   function Actions(): ReactElement {
     return (
       <>
-        <Button onClick={createCollectionForm.handleSubmit(onCreate)}>
+        <Button
+          isLoading={isCreatingCollection}
+          onClick={createCollectionForm.handleSubmit(onCreate)}
+        >
           <Check className="w-4 h-4 mr-2"></Check>
           Create Collection
         </Button>
@@ -202,10 +206,12 @@ function ProjectCollectionCreate() {
   const onCreate: SubmitHandler<CreateCollectionProps> = async (
     createCollectionProps
   ) => {
+    setIsCreatingCollection(true);
     try {
       const collection = await context.core.collections.create(
         createCollectionProps
       );
+      setIsCreatingCollection(false);
       addNotification({
         intent: NotificationIntent.SUCCESS,
         title: 'Created new collection',
@@ -219,6 +225,7 @@ function ProjectCollectionCreate() {
         },
       });
     } catch (error) {
+      setIsCreatingCollection(false);
       console.error(error);
       addNotification({
         intent: NotificationIntent.DANGER,

src/renderer/react/routes/projects/$projectId/settings/general.tsx

@@ -22,7 +22,11 @@ import { Input } from '@/renderer/react/components/ui/input';
 import { Page } from '@/renderer/react/components/ui/page';
 import { PageSection } from '@/renderer/react/components/ui/page-section';
 import { Textarea } from '@/renderer/react/components/ui/textarea';
-import { Project, projectSchema } from '@elek-io/shared';
+import {
+  DeleteProjectProps,
+  UpdateProjectProps,
+  updateProjectSchema,
+} from '@elek-io/shared';
 import { NotificationIntent } from '@elek-io/ui';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { createFileRoute, useRouter } from '@tanstack/react-router';
@@ -39,14 +43,14 @@ function ProjectSettingsPage() {
   const context = Route.useRouteContext();
   const addNotification = context.store((state) => state.addNotification);
   const [isUpdatingProject, setIsUpdatingProject] = useState(false);
-  const projectForm = useForm<Project>({
+  const projectForm = useForm<UpdateProjectProps>({
     resolver: async (data, context, options) => {
       // you can debug your validation schema here
       console.log(
         'ProjectForm validation result',
-        await zodResolver(projectSchema)(data, context, options)
+        await zodResolver(updateProjectSchema)(data, context, options)
       );
-      return zodResolver(projectSchema)(data, context, options);
+      return zodResolver(updateProjectSchema)(data, context, options);
     },
     defaultValues: context.currentProject,
   });
@@ -74,7 +78,7 @@ function ProjectSettingsPage() {
     );
   }
 
-  const onUpdate: SubmitHandler<Project> = async (project) => {
+  const onUpdate: SubmitHandler<UpdateProjectProps> = async (project) => {
     try {
       setIsUpdatingProject(true);
       await context.core.projects.update(project);
@@ -96,7 +100,7 @@ function ProjectSettingsPage() {
     }
   };
 
-  const onDelete: SubmitHandler<Project> = async (project) => {
+  const onDelete: SubmitHandler<DeleteProjectProps> = async (project) => {
     try {
       await context.core.projects.delete({ id: project.id });
       addNotification({