@@ -247,45 +371,47 @@ export const CreateOrEditOutOfOfficeEntryModal = ({
setSearchText(e.target.value)}
- value={searchText}
+ onChange={(e) => setSearchRedirectMember(e.target.value)}
+ value={searchRedirectMember}
/>
- {memberListOptions.map((member) => (
-
- ))}
-
+ {redirectToMemberListOptions
+ .filter((member) => member.value !== getValues("forUserId"))
+ .map((member) => (
+
+ ))}
+
@@ -309,7 +435,7 @@ export const CreateOrEditOutOfOfficeEntryModal = ({
form="create-or-edit-ooo-form"
color="primary"
type="submit"
- disabled={isSubmitting}
+ disabled={isSubmitting || isReasonListPending}
data-testid="create-or-edit-entry-ooo-redirect">
{currentlyEditingOutOfOfficeEntry ? t("save") : t("create")}
diff --git a/packages/features/settings/outOfOffice/OutOfOfficeEntriesList.tsx b/packages/features/settings/outOfOffice/OutOfOfficeEntriesList.tsx
index 5ffb15d826..0dd5016b41 100644
--- a/packages/features/settings/outOfOffice/OutOfOfficeEntriesList.tsx
+++ b/packages/features/settings/outOfOffice/OutOfOfficeEntriesList.tsx
@@ -1,88 +1,144 @@
"use client";
+import { keepPreviousData } from "@tanstack/react-query";
+import { getCoreRowModel, useReactTable, type ColumnDef } from "@tanstack/react-table";
import { Trans } from "next-i18next";
-import { useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { useFormState } from "react-hook-form";
import dayjs from "@calcom/dayjs";
+import { DataTable, DataTableToolbar } from "@calcom/features/data-table";
+import { getUserAvatarUrl } from "@calcom/lib/getAvatarUrl";
+import { useCompatSearchParams } from "@calcom/lib/hooks/useCompatSearchParams";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { trpc } from "@calcom/trpc/react";
-import {
- Button,
- EmptyScreen,
- Icon,
- showToast,
- SkeletonText,
- TableBody,
- TableCell,
- TableNew,
- TableRow,
- Tooltip,
-} from "@calcom/ui";
+import { Avatar, Button, EmptyScreen, Icon, showToast, SkeletonText, Tooltip } from "@calcom/ui";
import CreateNewOutOfOfficeEntryButton from "./CreateNewOutOfOfficeEntryButton";
import { CreateOrEditOutOfOfficeEntryModal } from "./CreateOrEditOutOfOfficeModal";
import type { BookingRedirectForm } from "./CreateOrEditOutOfOfficeModal";
+import { OutOfOfficeTab } from "./OutOfOfficeToggleGroup";
+
+interface OutOfOfficeEntry {
+ id: number;
+ uuid: string;
+ start: Date;
+ end: Date;
+ toUserId: number | null;
+ toUser: {
+ username: string;
+ name: string;
+ } | null;
+ reason: {
+ id: number;
+ emoji: string;
+ reason: string;
+ userId: number;
+ } | null;
+ notes: string | null;
+ user: { id: number; avatarUrl: string; username: string; email: string; name: string } | null;
+}
export const OutOfOfficeEntriesList = () => {
const { t } = useLocale();
- const utils = trpc.useUtils();
- const { data, isPending } = trpc.viewer.outOfOfficeEntriesList.useQuery();
- const deleteOutOfOfficeEntryMutation = trpc.viewer.outOfOfficeEntryDelete.useMutation({
- onSuccess: () => {
- showToast(t("success_deleted_entry_out_of_office"), "success");
- utils.viewer.outOfOfficeEntriesList.invalidate();
- useFormState;
- },
- onError: () => {
- showToast(`An error occurred`, "error");
- },
- });
-
+ const tableContainerRef = useRef
(null);
+ const [searchTerm, setSearchTerm] = useState("");
+ const [deletedEntry, setDeletedEntry] = useState(0);
const [currentlyEditingOutOfOfficeEntry, setCurrentlyEditingOutOfOfficeEntry] =
useState(null);
const [openModal, setOpenModal] = useState(false);
-
const editOutOfOfficeEntry = (entry: BookingRedirectForm) => {
setCurrentlyEditingOutOfOfficeEntry(entry);
setOpenModal(true);
};
- if (data === null || data?.length === 0 || (data === undefined && !isPending))
- return (
- }
- customIcon={
-
-
-
-
-
+ const searchParams = useCompatSearchParams();
+ const selectedTab = searchParams?.get("type") ?? OutOfOfficeTab.MINE;
+
+ const { data, isPending, fetchNextPage, isFetching, refetch } =
+ trpc.viewer.outOfOfficeEntriesList.useInfiniteQuery(
+ {
+ limit: 10,
+ fetchTeamMembersEntries: selectedTab === OutOfOfficeTab.TEAM,
+ searchTerm: selectedTab === OutOfOfficeTab.TEAM ? searchTerm : undefined,
+ },
+ {
+ getNextPageParam: (lastPage) => lastPage.nextCursor,
+ placeholderData: keepPreviousData,
+ }
+ );
+
+ useEffect(() => {
+ refetch();
+ if (selectedTab === OutOfOfficeTab.MINE) {
+ setSearchTerm("");
+ }
+ }, [deletedEntry, selectedTab, refetch]);
+
+ const totalDBRowCount = data?.pages?.[0]?.meta?.totalRowCount ?? 0;
+ const flatData = useMemo(
+ () =>
+ isPending || isFetching ? new Array(5).fill(null) : data?.pages?.flatMap((page) => page.rows) ?? [],
+ [data, selectedTab, isPending, isFetching, searchTerm]
+ ) as OutOfOfficeEntry[];
+ const totalFetched = flatData.length;
+
+ const memoColumns = useMemo(() => {
+ const columns: ColumnDef
[] = [];
+ if (selectedTab === OutOfOfficeTab.TEAM) {
+ columns.push({
+ id: "member",
+ header: `Member`,
+ size: 300,
+ cell: ({ row }) => {
+ if (!row.original || !row.original.user || isPending || isFetching) {
+ return ;
+ }
+ const { avatarUrl, username, email, name } = row.original.user;
+ const memberName =
+ name ||
+ (() => {
+ const emailName = email.split("@")[0];
+ return emailName.charAt(0).toUpperCase() + emailName.slice(1);
+ })();
+ return (
+
- }
- />
- );
- return (
-
-
-
- {data?.map((item) => (
-
-
+ );
+ },
+ });
+ }
+ columns.push({
+ id: "outOfOffice",
+ header: `${t("out_of_office")} (${totalDBRowCount})`,
+ size: selectedTab === OutOfOfficeTab.TEAM ? 370 : 660,
+ cell: ({ row }) => {
+ const item = row.original;
+ return (
+ <>
+ {row.original && !isPending && !isFetching ? (
+
{item?.reason?.emoji || "🏝️"}
@@ -117,81 +173,186 @@ export const OutOfOfficeEntriesList = () => {
)}
+
+ ) : (
+
+ )}
+
+ );
+ },
+ });
+ columns.push({
+ id: "actions",
+ size: 90,
+ cell: ({ row }) => {
+ const item = row.original;
+ return (
+ <>
+ {row.original && !isPending && !isFetching ? (
+
+
+
+
+
+
+ ) : (
+
+ )}
+
+ );
+ },
+ });
+ return columns;
+ }, [selectedTab, isPending, isFetching]);
-
-
-
-
-
+ const fetchMoreOnBottomReached = useCallback(
+ (containerRefElement?: HTMLDivElement | null) => {
+ if (containerRefElement) {
+ const { scrollHeight, scrollTop, clientHeight } = containerRefElement;
+ if (scrollHeight - scrollTop - clientHeight < 100 && !isFetching && totalFetched < totalDBRowCount) {
+ fetchNextPage();
+ }
+ if (isFetching) {
+ containerRefElement.classList.add("cursor-wait");
+ } else {
+ containerRefElement.classList.remove("cursor-wait");
+ }
+ }
+ },
+ [fetchNextPage, isFetching, totalFetched, totalDBRowCount]
+ );
+
+ const table = useReactTable({
+ data: flatData,
+ columns: memoColumns,
+ enableRowSelection: false,
+ debugTable: true,
+ manualPagination: true,
+ getCoreRowModel: getCoreRowModel(),
+ });
+
+ useEffect(() => {
+ fetchMoreOnBottomReached(tableContainerRef.current);
+ }, [fetchMoreOnBottomReached]);
+
+ const deleteOutOfOfficeEntryMutation = trpc.viewer.outOfOfficeEntryDelete.useMutation({
+ onSuccess: () => {
+ showToast(t("success_deleted_entry_out_of_office"), "success");
+ setDeletedEntry((previousValue) => previousValue + 1);
+ useFormState;
+ },
+ onError: () => {
+ showToast(`An error occurred`, "error");
+ },
+ });
+
+ return (
+ <>
+ {data === null ||
+ (data?.pages?.length !== 0 && data?.pages[0].meta.totalRowCount === 0 && searchTerm === "") ||
+ (data === undefined && !isPending) ? (
+
}
+ customIcon={
+
+
+
-
-
- ))}
- {isPending && (
- <>
- {new Array(2).fill(0).map((_, index) => (
-
-
-
-
-
- ))}
-
- )}
-
- {!isPending && (data === undefined || data.length === 0) && (
-
-
- {t("no_redirects_found")}
-
-
- )}
-
-
- {openModal && (
-
{
- setOpenModal(false);
- setCurrentlyEditingOutOfOfficeEntry(null);
- }}
- currentlyEditingOutOfOfficeEntry={currentlyEditingOutOfOfficeEntry}
+
+
+ }
/>
+ ) : (
+
+ fetchMoreOnBottomReached(e.target as HTMLDivElement)}>
+ {selectedTab === OutOfOfficeTab.TEAM && (
+
+ setSearchTerm(value)} />
+
+ )}
+
+ {openModal && (
+ {
+ setOpenModal(false);
+ setCurrentlyEditingOutOfOfficeEntry(null);
+ }}
+ currentlyEditingOutOfOfficeEntry={currentlyEditingOutOfOfficeEntry}
+ />
+ )}
+
)}
-
{headline}
diff --git a/packages/ui/components/form/date-range-picker/DateRangePicker.tsx b/packages/ui/components/form/date-range-picker/DateRangePicker.tsx
index b933fd38c6..2140697e8e 100644
--- a/packages/ui/components/form/date-range-picker/DateRangePicker.tsx
+++ b/packages/ui/components/form/date-range-picker/DateRangePicker.tsx
@@ -85,7 +85,9 @@ export function DatePickerWithRange({
+ sideOffset={4}
+ side="bottom"
+ avoidCollisions={false}>
{calendar}