commonscomputer/cal.diy
4
0
Fork 0
Code Issues Pull Requests Actions 2.2k Packages Projects Releases Wiki Activity

fix: add team member dialog ui updated (#5675)

Browse Source 
* fix: add team member dialog ui updated
fixed team url

Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>

* fix: type errors and role value bug

Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>

* chore: remove logs

Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>

* chore: change option to admin

Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>

Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>
Co-authored-by: sean-brydon <55134778+sean-brydon@users.noreply.github.com>
This commit is contained in:
Udit Takkar
2022-11-25 12:59:25 +00:00
committed by GitHub
co-authored by sean-brydon
parent 93a14b190e
commit eda1d5f393
6 changed files with 42 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/features/ee/teams/components/AddNewTeamMembers.tsx
+1 -1
View File
@@ -77,7 +77,7 @@ const AddNewTeamMembersForm = ({ defaultValues, teamId }: { defaultValues: FormV
inviteMemberMutation.mutate({
teamId,
language: i18n.language,
role: values.role.value,
role: values.role,
usernameOrEmail: values.emailOrUsername,
sendEmailInvitation: values.sendInviteEmail,
});
packages/features/ee/teams/components/CreateANewTeamForm.tsx
+4 -2
View File
@@ -1,7 +1,6 @@
import { useRouter } from "next/router";
import { Controller, useForm } from "react-hook-form";
import { WEBAPP_URL } from "@calcom/lib/constants";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import slugify from "@calcom/lib/slugify";
import { trpc } from "@calcom/trpc/react";
@@ -78,7 +77,10 @@ export const CreateANewTeamForm = () => {
className="mt-2"
name="slug"
label={t("team_url")}
addOnLeading={`${WEBAPP_URL}/team/`}
addOnLeading={`${process.env.NEXT_PUBLIC_WEBSITE_URL?.replace("https://", "")?.replace(
"http://",
""
)}/`}
value={value}
onChange={(e) => {
newTeamFormMethods.setValue("slug", slugify(e?.target.value), {
packages/features/ee/teams/components/MemberInvitationModal.tsx
+25 -24
View File
@@ -12,8 +12,9 @@ import {
DialogContent,
DialogFooter,
Form,
Select,
TextField,
Label,
ToggleGroup,
} from "@calcom/ui";
import { PendingMember } from "../lib/types";
@@ -32,7 +33,7 @@ type MembershipRoleOption = {
export interface NewMemberForm {
emailOrUsername: string;
role: MembershipRoleOption;
role: MembershipRole;
sendInviteEmail: boolean;
}
@@ -69,7 +70,7 @@ export default function MemberInvitationModal(props: MemberInvitationModalProps)
title={t("invite_new_member")}
description={
IS_TEAM_BILLING_ENABLED ? (
<span className=" text-sm leading-tight text-gray-500">
<span className="text-sm leading-tight text-gray-500">
<Trans i18nKey="invite_new_member_description">
Note: This will <span className="font-medium text-gray-900">cost an extra seat ($15/m)</span>{" "}
on your subscription.
@@ -80,7 +81,7 @@ export default function MemberInvitationModal(props: MemberInvitationModalProps)
)
}>
<Form form={newMemberFormMethods} handleSubmit={(values) => props.onSubmit(values)}>
<div className="space-y-4">
<div className="mt-6 space-y-6">
<Controller
name="emailOrUsername"
control={newMemberFormMethods.control}
@@ -105,21 +106,21 @@ export default function MemberInvitationModal(props: MemberInvitationModalProps)
<Controller
name="role"
control={newMemberFormMethods.control}
defaultValue={options[0]}
defaultValue={options[0].value}
render={({ field: { onChange } }) => (
<div>
<label
className="mb-1 block text-sm font-medium tracking-wide text-gray-700"
htmlFor="role">
<Label className="font-medium text-gray-900" htmlFor="role">
{t("role")}
</label>
<Select
defaultValue={options[0]}
options={options.filter((option) => option.value !== "OWNER")}
</Label>
<ToggleGroup
isFullWidth={true}
id="role"
name="role"
className="mt-1 block w-full rounded-sm border-gray-300 text-sm"
onChange={onChange}
onValueChange={onChange}
defaultValue={options[0].value}
options={[
{ value: "ADMIN", label: t("admin") },
{ value: "MEMBER", label: t("member") },
]}
/>
</div>
)}
@@ -127,21 +128,21 @@ export default function MemberInvitationModal(props: MemberInvitationModalProps)
<Controller
name="sendInviteEmail"
control={newMemberFormMethods.control}
defaultValue={false}
defaultValue={true}
render={() => (
<div className="relative flex items-start">
<CheckboxField
description={t("send_invite_email")}
onChange={(e) => newMemberFormMethods.setValue("sendInviteEmail", e.target.checked)}
/>
</div>
<CheckboxField
className="mr-0"
defaultChecked={true}
description={t("send_invite_email")}
onChange={(e) => newMemberFormMethods.setValue("sendInviteEmail", e.target.checked)}
/>
)}
/>
</div>
<DialogFooter>
<Button
type="button"
color="secondary"
color="minimal"
onClick={() => {
props.onExit();
newMemberFormMethods.reset();
@@ -153,7 +154,7 @@ export default function MemberInvitationModal(props: MemberInvitationModalProps)
color="primary"
className="ltr:ml-2 rtl:mr-2"
data-testid="invite-new-member-button">
{t("invite")}
{t("invite_new_member")}
</Button>
</DialogFooter>
</Form>
packages/features/ee/teams/pages/team-members-view.tsx
+1 -1
View File
@@ -108,7 +108,7 @@ const MembersView = () => {
inviteMemberMutation.mutate({
teamId,
language: i18n.language,
role: values.role.value,
role: values.role,
usernameOrEmail: values.emailOrUsername,
sendEmailInvitation: values.sendInviteEmail,
});
packages/ui/components/form/checkbox/Checkbox.tsx
+3 -1
View File
@@ -8,6 +8,7 @@ type Props = InputHTMLAttributes<HTMLInputElement> & {
descriptionAsLabel?: boolean;
informationIconText?: string;
error?: boolean;
className?: string;
};
const CheckboxField = forwardRef<HTMLInputElement, Props>(
@@ -53,7 +54,8 @@ const CheckboxField = forwardRef<HTMLInputElement, Props>(
!error && disabled
? "bg-gray-300 checked:bg-gray-300"
: "checked:bg-gray-800 hover:bg-gray-100",
error && "border-red-800 checked:bg-red-800 hover:bg-red-400"
error && "border-red-800 checked:bg-red-800 hover:bg-red-400",
rest.className
)}
/>
</div>
packages/ui/v2/core/form/ToggleGroup.tsx
+8 -3
View File
@@ -7,9 +7,10 @@ export const ToggleGroupItem = () => <div>hi</div>;
interface ToggleGroupProps extends Omit<RadixToggleGroup.ToggleGroupSingleProps, "type"> {
options: { value: string; label: string }[];
isFullWidth?: boolean;
}
export const ToggleGroup = ({ options, onValueChange, ...props }: ToggleGroupProps) => {
export const ToggleGroup = ({ options, onValueChange, isFullWidth, ...props }: ToggleGroupProps) => {
const [value, setValue] = useState<string | undefined>(props.defaultValue);
const [activeToggleElement, setActiveToggleElement] = useState<null | HTMLButtonElement>(null);
@@ -25,7 +26,8 @@ export const ToggleGroup = ({ options, onValueChange, ...props }: ToggleGroupPro
onValueChange={setValue}
className={classNames(
"dark:border-darkgray-200 relative inline-flex rounded-md border border-gray-200 p-1",
props.className
props.className,
isFullWidth && "w-full"
)}>
{/* Active toggle. It's a separate element so we can animate it nicely. */}
<span
@@ -37,7 +39,10 @@ export const ToggleGroup = ({ options, onValueChange, ...props }: ToggleGroupPro
<RadixToggleGroup.Item
key={option.value}
value={option.value}
className="relative rounded-[4px] px-3 py-1 text-sm dark:text-neutral-200 [&[aria-checked='false']]:hover:font-medium"
className={classNames(
"relative rounded-[4px] px-3 py-1 text-sm dark:text-neutral-200 [&[aria-checked='false']]:hover:font-medium",
isFullWidth && "w-full"
)}
ref={(node) => {
if (node && value === option.value) {
setActiveToggleElement(node);