Merge pull request #117 from Z-Teknologsektionen/feat-default-trigger…

…-buttons

feat: Setup default trigger buttons for dialogs in table

src/components/active/committees/committee-table-actions.tsx

@@ -1,15 +1,11 @@
-import { MoreHorizontal } from "lucide-react";
 import { useState, type FC } from "react";
 import UpsertCommitteeForm from "~/components/active/committees/upsert-committee-form";
+import DeleteTriggerButton from "~/components/buttons/delete-trigger-button";
+import EditTriggerButton from "~/components/buttons/edit-trigger-button";
 import DeleteDialog from "~/components/dialogs/delete-dialog";
 import { UpsertDialog } from "~/components/dialogs/upsert-dialog";
-import { Button } from "~/components/ui/button";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "~/components/ui/dropdown-menu";
+
+import { TooltipProvider } from "~/components/ui/tooltip";
 import {
   useDeleteCommitteeAsAuthed,
   useUpdateCommitteeAsAuthed,
@@ -26,14 +22,8 @@ export const CommitteeTableActions: FC<CommitteeType> = ({ id, ...values }) => {
   const { mutate: deleteMember } = useDeleteCommitteeAsAuthed({});
 
   return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button className="h-8 w-8 p-0" variant="ghost">
-          <span className="sr-only">Öppna meny</span>
-          <MoreHorizontal className="h-4 w-4" />
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent align="end">
+    <TooltipProvider>
+      <div className="flex justify-end">
         <UpsertDialog
           form={
             <UpsertCommitteeForm
@@ -62,21 +52,13 @@ export const CommitteeTableActions: FC<CommitteeType> = ({ id, ...values }) => {
           isOpen={isOpen}
           setIsOpen={setIsOpen}
           title="Uppdatera organ"
-          trigger={
-            <DropdownMenuItem onSelect={(e) => e.preventDefault()}>
-              Redigera
-            </DropdownMenuItem>
-          }
+          trigger={<EditTriggerButton />}
         />
         <DeleteDialog
           onSubmit={() => deleteMember({ id })}
-          trigger={
-            <DropdownMenuItem onSelect={(e) => e.preventDefault()}>
-              Radera
-            </DropdownMenuItem>
-          }
-        ></DeleteDialog>
-      </DropdownMenuContent>
-    </DropdownMenu>
+          trigger={<DeleteTriggerButton />}
+        />
+      </div>
+    </TooltipProvider>
   );
 };

src/components/active/documents/document-group-table-actions.tsx

@@ -1,15 +1,10 @@
-import { MoreHorizontal } from "lucide-react";
 import { useState, type FC } from "react";
 import { UpsertDocumentGroupForm } from "~/components/active/documents/upsert-document-group-form";
+import DeleteTriggerButton from "~/components/buttons/delete-trigger-button";
+import EditTriggerButton from "~/components/buttons/edit-trigger-button";
 import DeleteDialog from "~/components/dialogs/delete-dialog";
 import { UpsertDialog } from "~/components/dialogs/upsert-dialog";
-import { Button } from "~/components/ui/button";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "~/components/ui/dropdown-menu";
+import { TooltipProvider } from "~/components/ui/tooltip";
 import {
   useDeleteDocumentGroupAsAuthed,
   useUpdateDocumentGroupAsAuthed,
@@ -29,14 +24,8 @@ export const DocumentGroupTableActions: FC<{
   const { mutate: deleteDocumentGroup } = useDeleteDocumentGroupAsAuthed({});
 
   return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button className="h-8 w-8 p-0" variant="ghost">
-          <span className="sr-only">Öppna meny</span>
-          <MoreHorizontal className="h-4 w-4" />
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent align="end">
+    <TooltipProvider>
+      <div className="flex justify-end">
         <UpsertDialog
           form={
             <UpsertDocumentGroupForm
@@ -54,21 +43,13 @@ export const DocumentGroupTableActions: FC<{
           isOpen={isOpen}
           setIsOpen={setIsOpen}
           title="Uppdatera dokument"
-          trigger={
-            <DropdownMenuItem onSelect={(e) => e.preventDefault()}>
-              Redigera
-            </DropdownMenuItem>
-          }
+          trigger={<EditTriggerButton />}
         />
         <DeleteDialog
           onSubmit={() => deleteDocumentGroup({ id })}
-          trigger={
-            <DropdownMenuItem onSelect={(e) => e.preventDefault()}>
-              Radera
-            </DropdownMenuItem>
-          }
-        ></DeleteDialog>
-      </DropdownMenuContent>
-    </DropdownMenu>
+          trigger={<DeleteTriggerButton />}
+        />
+      </div>
+    </TooltipProvider>
   );
 };

src/components/active/documents/document-table-actions.tsx

@@ -1,15 +1,10 @@
-import { MoreHorizontal } from "lucide-react";
 import { useState, type FC } from "react";
 import { UpsertDocumentForm } from "~/components/active/documents/upsert-document-form";
+import DeleteTriggerButton from "~/components/buttons/delete-trigger-button";
+import EditTriggerButton from "~/components/buttons/edit-trigger-button";
 import DeleteDialog from "~/components/dialogs/delete-dialog";
 import { UpsertDialog } from "~/components/dialogs/upsert-dialog";
-import { Button } from "~/components/ui/button";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "~/components/ui/dropdown-menu";
+import { TooltipProvider } from "~/components/ui/tooltip";
 import {
   useDeleteDocumentAsAuthed,
   useUpdateDocumentAsAuthed,
@@ -26,14 +21,8 @@ export const DocumentTableActions: FC<DocumentType> = ({ id, ...values }) => {
   const { mutate: deleteDocument } = useDeleteDocumentAsAuthed({});
 
   return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button className="h-8 w-8 p-0" variant="ghost">
-          <span className="sr-only">Öppna meny</span>
-          <MoreHorizontal className="h-4 w-4" />
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent align="end">
+    <TooltipProvider>
+      <div className="flex justify-end">
         <UpsertDialog
           form={
             <UpsertDocumentForm
@@ -51,21 +40,13 @@ export const DocumentTableActions: FC<DocumentType> = ({ id, ...values }) => {
           isOpen={isOpen}
           setIsOpen={setIsOpen}
           title="Uppdatera dokument"
-          trigger={
-            <DropdownMenuItem onSelect={(e) => e.preventDefault()}>
-              Redigera
-            </DropdownMenuItem>
-          }
+          trigger={<EditTriggerButton />}
         />
         <DeleteDialog
           onSubmit={() => deleteDocument({ id })}
-          trigger={
-            <DropdownMenuItem onSelect={(e) => e.preventDefault()}>
-              Radera
-            </DropdownMenuItem>
-          }
-        ></DeleteDialog>
-      </DropdownMenuContent>
-    </DropdownMenu>
+          trigger={<DeleteTriggerButton />}
+        />
+      </div>
+    </TooltipProvider>
   );
 };

src/components/active/members/member-columns.tsx

@@ -7,7 +7,7 @@ import { type RouterOutputs } from "~/utils/api";
 import { MemberRolesActions } from "./member-roles-actions";
 import { CommitteeMemberTableActions } from "./member-table-actions";
 
-type CommitteeMemberType =
+export type CommitteeMemberType =
   RouterOutputs["member"]["getCommitteeMembersAsAuthed"][0];
 
 export const memberColumns: ColumnDef<CommitteeMemberType>[] = [

src/components/active/members/member-table-actions.tsx

@@ -1,31 +1,20 @@
-import { MoreHorizontal } from "lucide-react";
 import { useState, type FC } from "react";
 import { UpsertMemberForm } from "~/components/active/members/upsert-member-form";
+import DeleteTriggerButton from "~/components/buttons/delete-trigger-button";
+import EditTriggerButton from "~/components/buttons/edit-trigger-button";
 import DeleteDialog from "~/components/dialogs/delete-dialog";
 import { UpsertDialog } from "~/components/dialogs/upsert-dialog";
-import { Button } from "~/components/ui/button";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "~/components/ui/dropdown-menu";
+import { TooltipProvider } from "~/components/ui/tooltip";
 import {
   useDeleteMemberAsAuthed,
   useUpdateMemberAsAuthed,
 } from "~/hooks/mutations/useMutateMember";
+import type { CommitteeMemberType } from "./member-columns";
 
-export const CommitteeMemberTableActions: FC<{
-  committeeId: string;
-  email: string;
-  id: string;
-  image: string;
-  name: string;
-  nickName: string;
-  order: number;
-  phone: string;
-  role: string;
-}> = ({ id, ...values }) => {
+export const CommitteeMemberTableActions: FC<CommitteeMemberType> = ({
+  id,
+  ...values
+}) => {
   const [isOpen, setIsOpen] = useState(false);
 
   const { mutate: updateMember } = useUpdateMemberAsAuthed({
@@ -35,14 +24,8 @@ export const CommitteeMemberTableActions: FC<{
   const { mutate: deleteMember } = useDeleteMemberAsAuthed({});
 
   return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button className="h-8 w-8  p-0" variant="ghost">
-          <span className="sr-only">Öppna meny</span>
-          <MoreHorizontal className="h-4 w-4" />
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent align="end">
+    <TooltipProvider>
+      <div className="flex justify-end">
         <UpsertDialog
           form={
             <UpsertMemberForm
@@ -60,21 +43,13 @@ export const CommitteeMemberTableActions: FC<{
           isOpen={isOpen}
           setIsOpen={setIsOpen}
           title="Uppdatera aktiv"
-          trigger={
-            <DropdownMenuItem onSelect={(e) => e.preventDefault()}>
-              Redigera
-            </DropdownMenuItem>
-          }
+          trigger={<EditTriggerButton />}
         />
         <DeleteDialog
           onSubmit={() => deleteMember({ id })}
-          trigger={
-            <DropdownMenuItem onSelect={(e) => e.preventDefault()}>
-              Radera
-            </DropdownMenuItem>
-          }
-        ></DeleteDialog>
-      </DropdownMenuContent>
-    </DropdownMenu>
+          trigger={<DeleteTriggerButton />}
+        />
+      </div>
+    </TooltipProvider>
   );
 };

src/components/active/old-committees/old-committee-table-actions.tsx

@@ -2,9 +2,10 @@ import { useState, type FC } from "react";
 import toast from "react-hot-toast";
 import { UpsertDialog } from "~/components/dialogs/upsert-dialog";
 
-import { MdDelete, MdEdit } from "react-icons/md";
+import DeleteTriggerButton from "~/components/buttons/delete-trigger-button";
+import EditTriggerButton from "~/components/buttons/edit-trigger-button";
 import DeleteDialog from "~/components/dialogs/delete-dialog";
-import { Button } from "~/components/ui/button";
+import { TooltipProvider } from "~/components/ui/tooltip";
 import { api } from "~/utils/api";
 import type { OldCommitteeType } from "./old-committee-columns";
 import UpsertOldCommitteeForm from "./upsert-old-committee-form";
@@ -52,42 +53,32 @@ export const OldCommitteeTableActions: FC<OldCommitteeType> = ({
     });
 
   return (
-    <div className="flex justify-end">
-      <UpsertDialog
-        form={
-          <UpsertOldCommitteeForm
-            key={id}
-            defaultValues={values}
-            formType="update"
-            onSubmit={(updatedValues) =>
-              updateOldCommittee({
-                id: id,
-                ...updatedValues,
-              })
-            }
-          />
-        }
-        isOpen={isOpen}
-        setIsOpen={setIsOpen}
-        title="Uppdatera patetorgan"
-        trigger={
-          <Button className="mx-2 h-6" size={"sm"} variant="outline">
-            <MdEdit color="orange" size={15}>
-              Redigera
-            </MdEdit>
-          </Button>
-        }
-      />
-      <DeleteDialog
-        onSubmit={() => deleteOldCommittee({ id })}
-        trigger={
-          <Button className="h-6" size={"sm"} variant="outline">
-            <MdDelete className="mx-1" color="red" size={15}>
-              Radera
-            </MdDelete>
-          </Button>
-        }
-      ></DeleteDialog>
-    </div>
+    <TooltipProvider>
+      <div className="flex justify-end">
+        <UpsertDialog
+          form={
+            <UpsertOldCommitteeForm
+              key={id}
+              defaultValues={values}
+              formType="update"
+              onSubmit={(updatedValues) =>
+                updateOldCommittee({
+                  id: id,
+                  ...updatedValues,
+                })
+              }
+            />
+          }
+          isOpen={isOpen}
+          setIsOpen={setIsOpen}
+          title="Uppdatera patetorgan"
+          trigger={<EditTriggerButton />}
+        />
+        <DeleteDialog
+          onSubmit={() => deleteOldCommittee({ id })}
+          trigger={<DeleteTriggerButton />}
+        />
+      </div>
+    </TooltipProvider>
   );
 };