V1->V2 connect calendar (#3961)
* V1->V2 connect calendar * Fix imports * Fix types * Implementing v1 NoCalendarConnectedAlert changes on v2 component Co-authored-by: Peer Richelsen <peeroke@gmail.com> Co-authored-by: Alan <alannnc@gmail.com>pull/4218/head^2
parent
008706e5ac
commit
91bc6ae820
|
@ -32,6 +32,7 @@ import EventTypeDescription from "@components/eventtype/EventTypeDescription";
|
|||
import SkeletonLoader from "@components/eventtype/SkeletonLoader";
|
||||
import Avatar from "@components/ui/Avatar";
|
||||
import AvatarGroup from "@components/ui/AvatarGroup";
|
||||
import NoCalendarConnectedAlert from "@components/ui/NoCalendarConnectedAlert";
|
||||
|
||||
import { TRPCClientError } from "@trpc/react";
|
||||
|
||||
|
@ -551,6 +552,7 @@ const WithQuery = withQuery(["viewer.eventTypes"]);
|
|||
|
||||
const EventTypesPage = () => {
|
||||
const { t } = useLocale();
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Head>
|
||||
|
@ -581,6 +583,9 @@ const EventTypesPage = () => {
|
|||
className="mb-4"
|
||||
/>
|
||||
)}
|
||||
|
||||
<NoCalendarConnectedAlert />
|
||||
|
||||
{data.eventTypeGroups.map((group, index) => (
|
||||
<Fragment key={group.profile.slug}>
|
||||
{/* hide list heading when there is only one (current user) */}
|
||||
|
|
|
@ -2,6 +2,7 @@ import classNames from "classnames";
|
|||
import React, { useEffect, useState } from "react";
|
||||
|
||||
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
||||
import { DestinationCalendar } from "@calcom/prisma/client";
|
||||
import { trpc } from "@calcom/trpc/react";
|
||||
import Select from "@calcom/ui/v2/core/form/Select";
|
||||
|
||||
|
@ -10,6 +11,7 @@ interface Props {
|
|||
isLoading?: boolean;
|
||||
hidePlaceholder?: boolean;
|
||||
/** The external Id of the connected calendar */
|
||||
destinationCalendar?: DestinationCalendar | null;
|
||||
value: string | undefined;
|
||||
maxWidth?: number;
|
||||
}
|
||||
|
@ -20,6 +22,7 @@ const DestinationCalendarSelector = ({
|
|||
value,
|
||||
hidePlaceholder,
|
||||
maxWidth,
|
||||
destinationCalendar,
|
||||
}: Props): JSX.Element | null => {
|
||||
const { t } = useLocale();
|
||||
const query = trpc.useQuery(["viewer.connectedCalendars"]);
|
||||
|
@ -73,7 +76,15 @@ const DestinationCalendarSelector = ({
|
|||
<div className="relative" title={`${t("select_destination_calendar")}: ${selectedOption?.label || ""}`}>
|
||||
<Select
|
||||
name="primarySelectedCalendar"
|
||||
placeholder={!hidePlaceholder ? `${t("select_destination_calendar")}:` : undefined}
|
||||
placeholder={
|
||||
!hidePlaceholder ? (
|
||||
`${t("select_destination_calendar")}`
|
||||
) : (
|
||||
<span>
|
||||
{t("default_calendar_selected")} ({destinationCalendar?.externalId})
|
||||
</span>
|
||||
)
|
||||
}
|
||||
options={options}
|
||||
styles={{
|
||||
placeholder: (styles) => ({ ...styles, ...content(hidePlaceholder) }),
|
||||
|
|
Loading…
Reference in New Issue