public-offering
/
cal.pub0.org
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Allow deletion of a disabled event (#2737) 

* allows deletion of disabled event

* some visual fixes

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
pull/2728/head
Syed Ali Shahbaz 2022-05-11 19:44:08 +05:30 committed by GitHub
parent effb9d56d9
commit 01e88b3807
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 56 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

88
apps/web/pages/event-types/index.tsx
View File

@ -78,7 +78,10 @@ const Item = ({ type, group, readOnly }: any) => {
return ( return (
<Link href={"/event-types/" + type.id}> <Link href={"/event-types/" + type.id}>
<a <a
className="flex-grow truncate text-sm" className={classNames(
"flex-grow truncate text-sm ",
type.$disabled && "pointer-events-none cursor-not-allowed opacity-30"
)}
title={`${type.title} ${type.description ? `– ${type.description}` : ""}`}> title={`${type.title} ${type.description ? `– ${type.description}` : ""}`}>
<div> <div>
<span <span
@ -207,17 +210,19 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
{types.map((type, index) => ( {types.map((type, index) => (
<li <li
key={type.id} key={type.id}
className={classNames( className={classNames(type.$disabled && "select-none")}
type.$disabled && "pointer-events-none cursor-not-allowed select-none opacity-30"
)}
data-disabled={type.$disabled ? 1 : 0}> data-disabled={type.$disabled ? 1 : 0}>
<div <div
className={classNames( className={classNames(
"flex items-center justify-between hover:bg-neutral-50 ", "flex items-center justify-between hover:bg-neutral-50 ",
type.$disabled && "pointer-events-none" type.$disabled && "hover:bg-white"
)}> )}>
<div className="group flex w-full items-center justify-between px-4 py-4 hover:bg-neutral-50 sm:px-6"> <div
{types.length > 1 && ( className={classNames(
"group flex w-full items-center justify-between px-4 py-4 hover:bg-neutral-50 sm:px-6",
type.$disabled && "hover:bg-white"
)}>
{types.length > 1 && !type.$disabled && (
<> <>
<button <button
className="invisible absolute left-1/2 -mt-4 mb-4 -ml-4 hidden h-7 w-7 scale-0 rounded-full border bg-white p-1 text-gray-400 transition-all hover:border-transparent hover:text-black hover:shadow group-hover:visible group-hover:scale-100 sm:left-[19px] sm:ml-0 sm:block" className="invisible absolute left-1/2 -mt-4 mb-4 -ml-4 hidden h-7 w-7 scale-0 rounded-full border bg-white p-1 text-gray-400 transition-all hover:border-transparent hover:text-black hover:shadow group-hover:visible group-hover:scale-100 sm:left-[19px] sm:ml-0 sm:block"
@ -238,7 +243,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
{type.users?.length > 1 && ( {type.users?.length > 1 && (
<AvatarGroup <AvatarGroup
border="border-2 border-white" border="border-2 border-white"
className="relative top-1 right-3" className={classNames("relative top-1 right-3", type.$disabled && " opacity-30")}
size={8} size={8}
truncateAfter={4} truncateAfter={4}
items={type.users.map((organizer) => ({ items={type.users.map((organizer) => ({
@ -247,28 +252,38 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
}))} }))}
/> />
)} )}
<Tooltip content={t("preview")}> <div
<a className={classNames(
href={`${process.env.NEXT_PUBLIC_WEBSITE_URL}/${group.profile.slug}/${type.slug}`} "flex justify-between space-x-2 rtl:space-x-reverse ",
target="_blank" type.$disabled && "pointer-events-none cursor-not-allowed"
rel="noreferrer" )}>
className="btn-icon appearance-none"> <Tooltip content={t("preview")}>
<ExternalLinkIcon className="h-5 w-5 group-hover:text-black" /> <a
</a> href={`${process.env.NEXT_PUBLIC_WEBSITE_URL}/${group.profile.slug}/${type.slug}`}
</Tooltip> target="_blank"
rel="noreferrer"
className={classNames("btn-icon appearance-none", type.$disabled && " opacity-30")}>
<ExternalLinkIcon
className={classNames("h-5 w-5", !type.$disabled && "group-hover:text-black")}
/>
</a>
</Tooltip>
<Tooltip content={t("copy_link")}> <Tooltip content={t("copy_link")}>
<button <button
onClick={() => { onClick={() => {
showToast(t("link_copied"), "success"); showToast(t("link_copied"), "success");
navigator.clipboard.writeText( navigator.clipboard.writeText(
`${process.env.NEXT_PUBLIC_WEBSITE_URL}/${group.profile.slug}/${type.slug}` `${process.env.NEXT_PUBLIC_WEBSITE_URL}/${group.profile.slug}/${type.slug}`
); );
}} }}
className="btn-icon"> className={classNames("btn-icon", type.$disabled && " opacity-30")}>
<LinkIcon className="h-5 w-5 group-hover:text-black" /> <LinkIcon
</button> className={classNames("h-5 w-5", !type.$disabled && "group-hover:text-black")}
</Tooltip> />
</button>
</Tooltip>
</div>
<Dropdown> <Dropdown>
<DropdownMenuTrigger <DropdownMenuTrigger
className="h-10 w-10 cursor-pointer rounded-sm border border-transparent text-neutral-500 hover:border-gray-300 hover:text-neutral-900 focus:border-gray-300" className="h-10 w-10 cursor-pointer rounded-sm border border-transparent text-neutral-500 hover:border-gray-300 hover:text-neutral-900 focus:border-gray-300"
@ -282,7 +297,10 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
type="button" type="button"
size="sm" size="sm"
color="minimal" color="minimal"
className="w-full rounded-none" className={classNames(
"w-full rounded-none",
type.$disabled && " pointer-events-none cursor-not-allowed opacity-30"
)}
StartIcon={PencilIcon}> StartIcon={PencilIcon}>
{" "} {" "}
{t("edit")} {t("edit")}
@ -294,7 +312,10 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
type="button" type="button"
color="minimal" color="minimal"
size="sm" size="sm"
className="w-full rounded-none" className={classNames(
"w-full rounded-none",
type.$disabled && " pointer-events-none cursor-not-allowed opacity-30"
)}
data-testid={"event-type-duplicate-" + type.id} data-testid={"event-type-duplicate-" + type.id}
StartIcon={DuplicateIcon} StartIcon={DuplicateIcon}
onClick={() => openModal(group, type)}> onClick={() => openModal(group, type)}>
@ -304,7 +325,10 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
<DropdownMenuItem> <DropdownMenuItem>
<EmbedButton <EmbedButton
dark dark
className="w-full rounded-none" className={classNames(
"w-full rounded-none",
type.$disabled && " pointer-events-none cursor-not-allowed opacity-30"
)}
eventTypeId={type.id}></EmbedButton> eventTypeId={type.id}></EmbedButton>
</DropdownMenuItem> </DropdownMenuItem>
<DropdownMenuSeparator className="h-px bg-gray-200" /> <DropdownMenuSeparator className="h-px bg-gray-200" />