Styles, API calls, and more

src/DataTable/columns/ApplicationColumns.tsx

@@ -0,0 +1,117 @@
+import { MRT_ColumnDef } from "mantine-react-table";
+import { useMemo } from "react";
+
+export default function ApplicationColumns() {
+    const columns = useMemo<MRT_ColumnDef<any>[]>(
+		() => [
+			{
+				accessorFn: (row) => {
+					if (row.id) {
+						return `${row.id}`;
+					} else {
+						return "";
+					}
+				},
+				enableEditing: false,
+				id: "id",
+				header: "ID",
+				size: 50,
+				mantineCopyButtonProps: ({ cell, row }) => ({
+					className: "id",
+					id: `${cell.getValue()}-id`,
+				}),
+				Cell: ({ renderedCellValue, row }) => renderedCellValue,
+				Header: ({ column }) => column.columnDef.header,
+			},
+			{
+				accessorFn: (row) => {
+					if (row.name) {
+						return `${row.name}`;
+					} else {
+						return "";
+					}
+				},
+				id: "name",
+				header: "Name",
+				mantineCopyButtonProps: ({ cell, row }) => ({
+					className: "name",
+					id: `${cell.getValue()}-name`,
+				}),
+				Cell: ({ renderedCellValue, row }) => renderedCellValue,
+				Header: ({ column }) => column.columnDef.header,
+			},
+			{
+				accessorFn: (row) => {
+					if (row.url) {
+						return `${row.url}`;
+					} else {
+						return "";
+					}
+				},
+				id: "url",
+				header: "Url",
+				mantineCopyButtonProps: ({ cell, row }) => ({
+					className: "url",
+					id: `${cell.getValue()}-url`,
+				}),
+				Cell: ({ renderedCellValue, row }) => renderedCellValue,
+				Header: ({ column }) => column.columnDef.header,
+			},
+			{
+				accessorFn: (row) => {
+					if (row.icon) {
+						return `${row.icon}`;
+					} else {
+						return "";
+					}
+				},
+				id: "icon",
+				header: "Icon",
+				mantineCopyButtonProps: ({ cell, row }) => ({
+					className: "icon",
+					id: `${cell.getValue()}-icon`,
+				}),
+				Cell: ({ renderedCellValue, row }) => renderedCellValue,
+				Header: ({ column }) => column.columnDef.header,
+			},
+			{
+				accessorFn: (row) => {
+					if (row.urlbase) {
+						return `${row.urlbase}`;
+					} else {
+						return "";
+					}
+				},
+				id: "urlbase",
+				header: "Base Url",
+				mantineCopyButtonProps: ({ cell, row }) => ({
+					className: "urlbase",
+					id: `${cell.getValue()}-urlbase`,
+				}),
+				Cell: ({ renderedCellValue, row }) => renderedCellValue,
+				Header: ({ column }) => column.columnDef.header,
+			},
+			{
+				accessorFn: (row) => {
+					if (row.category) {
+						return `${row.category}`;
+					} else {
+						return "";
+					}
+				},
+				id: "category",
+				header: "Category",
+				mantineCopyButtonProps: ({ cell, row }) => ({
+					className: "category",
+					id: `${cell.getValue()}-category`,
+				}),
+				Cell: ({ renderedCellValue, row }) => renderedCellValue,
+				Header: ({ column }) => column.columnDef.header,
+			},
+		],
+		[],
+	);
+
+    return columns;
+}
+

src/DataTable/columns/BookmarkColumns.tsx

@@ -0,0 +1,87 @@
+import { MRT_ColumnDef } from "mantine-react-table";
+import { useMemo } from "react";
+
+export default function ApplicationColumns(groups: any, groupData: any) {
+    const columns = useMemo<MRT_ColumnDef<any>[]>(
+		() => [
+			{
+				accessorFn: (row) => {
+					if (row.id) {
+						return `${row.id}`;
+					} else {
+						return "";
+					}
+				},
+				enableEditing: false,
+				id: "id",
+				header: "ID",
+				size: 50,
+				mantineCopyButtonProps: ({ cell, row }) => ({
+					className: "id",
+					id: `${cell.getValue()}-id`,
+				}),
+				Cell: ({ renderedCellValue, row }) => renderedCellValue,
+				Header: ({ column }) => column.columnDef.header,
+			},
+			{
+				accessorFn: (row) => {
+					if (row.name) {
+						return `${row.name}`;
+					} else {
+						return "";
+					}
+				},
+				id: "name",
+				header: "Name",
+				mantineCopyButtonProps: ({ cell, row }) => ({
+					className: "name",
+					id: `${cell.getValue()}-name`,
+				}),
+				Cell: ({ renderedCellValue, row }) => renderedCellValue,
+				Header: ({ column }) => column.columnDef.header,
+			},
+			{
+				accessorFn: (row) => {
+					if (row.url) {
+						return `${row.url}`;
+					} else {
+						return "";
+					}
+				},
+				id: "url",
+				header: "Url",
+				mantineCopyButtonProps: ({ cell, row }) => ({
+					className: "url",
+					id: `${cell.getValue()}-url`,
+				}),
+				Cell: ({ renderedCellValue, row }) => renderedCellValue,
+				Header: ({ column }) => column.columnDef.header,
+			},
+			{
+				accessorFn: (row) => {
+					const index: number = row.category;
+					if (index !== null && index !== undefined) {
+						return `${index}`;
+					} else {
+						return "N/A";
+					}
+				},
+				id: "category",
+				header: "Category",
+				editVariant: "select",
+				mantineEditSelectProps: { data: groups },
+				mantineCopyButtonProps: ({ cell, row }) => ({
+					className: "category",
+					id: `${cell.getValue()}-category`,
+				}),
+				Cell: ({ renderedCellValue, row }) =>
+					groupData[row?.original.category].category_name,
+				Header: ({ column }) => column.columnDef.header,
+			},
+		],
+		[groups],
+	);
+
+    return columns;
+}
+

src/DataTable/columns/MessagesColumns.tsx

@@ -0,0 +1,66 @@
+import { MRT_ColumnDef } from "mantine-react-table";
+import { useMemo } from "react";
+
+export default function MessagesColumns() {
+    const columns = useMemo<MRT_ColumnDef<any>[]>(
+		() => [
+			{
+				accessorFn: (row) => {
+					if (row.id) {
+						return `${row.id}`;
+					} else {
+						return "";
+					}
+				},
+				enableEditing: false,
+				id: "id",
+				header: "ID",
+				size: 50,
+				mantineCopyButtonProps: ({ cell, row }) => ({
+					className: "id",
+					id: `${cell.getValue()}-id`,
+				}),
+				Cell: ({ renderedCellValue, row }) => renderedCellValue,
+				Header: ({ column }) => column.columnDef.header,
+			},
+			{
+				accessorFn: (row) => {
+					if (row.message) {
+						return `${row.message}`;
+					} else {
+						return "";
+					}
+				},
+				id: "message",
+				header: "Message",
+				mantineCopyButtonProps: ({ cell, row }) => ({
+					className: "message",
+					id: `${cell.getValue()}-message`,
+				}),
+				Cell: ({ renderedCellValue, row }) => renderedCellValue,
+				Header: ({ column }) => column.columnDef.header,
+			},
+			{
+				accessorFn: (row) => {
+					if (row.easteregg) {
+						return `${row.easteregg}`;
+					} else {
+						return "";
+					}
+				},
+				id: "easteregg",
+				header: "Easter Egg?",
+				mantineCopyButtonProps: ({ cell, row }) => ({
+					className: "easteregg",
+					id: `${cell.getValue()}-easteregg`,
+				}),
+				Cell: ({ renderedCellValue, row }) => renderedCellValue,
+				Header: ({ column }) => column.columnDef.header,
+			},
+		],
+		[],
+	);
+
+    return columns;
+}
+

src/DataTable/columns/PersonalizationColumns.tsx

@@ -0,0 +1,65 @@
+import { MRT_ColumnDef } from "mantine-react-table";
+import { useMemo } from "react";
+
+export default function PersonalizationColumns() {
+    const columns = useMemo<MRT_ColumnDef<any>[]>(
+        () => [
+            {
+                accessorFn: (row: any) => {
+                    if (row.firstname) {
+                        return `${row.firstname}`;
+                    } else {
+                        return "";
+                    }
+                },
+                id: "firstname",
+                header: "First Name",
+                size: 50,
+                mantineCopyButtonProps: ({ cell, row }) => ({
+                    className: "firstname",
+                    id: `${cell.getValue()}-firstname`,
+                }),
+                Cell: ({ renderedCellValue, row }) => renderedCellValue,
+                Header: ({ column }) => column.columnDef.header,
+            },
+            {
+                accessorFn: (row: any) => {
+                    if (row.lastname) {
+                        return `${row.lastname}`;
+                    } else {
+                        return "";
+                    }
+                },
+                id: "lastname",
+                header: "Last Name",
+                mantineCopyButtonProps: ({ cell, row }) => ({
+                    className: "lastname",
+                    id: `${cell.getValue()}-lastname`,
+                }),
+                Cell: ({ renderedCellValue, row }) => renderedCellValue,
+                Header: ({ column }) => column.columnDef.header,
+            },
+            {
+                accessorFn: (row: any) => {
+                    if (row.email) {
+                        return `${row.email}`;
+                    } else {
+                        return "";
+                    }
+                },
+                id: "email",
+                header: "Email",
+                mantineCopyButtonProps: ({ cell, row }) => ({
+                    className: "email",
+                    id: `${cell.getValue()}-email`,
+                }),
+                Cell: ({ renderedCellValue, row }) => renderedCellValue,
+                Header: ({ column }) => column.columnDef.header,
+            },
+        ],
+        [],
+    );
+
+    return columns;
+}
+