Sigurd/web 53 event pages edit or delete buttons

frontend/src/Components/EventEditButtons/EventEditButtons.module.scss

@@ -0,0 +1,46 @@
+.edit_icon {
+  color: white;
+  filter: brightness(1000%);
+  transition: all 200ms ease-in-out;
+}
+
+
+.edit_button {
+  pointer-events:all;
+  z-index: 10;
+  border-radius: 30%;
+  width: fit-content;
+  padding: 4px;
+  color: white;
+  cursor: pointer;
+  transition: all 200ms ease-in-out;
+  box-shadow: rgba(0, 0, 0, 0.24) 0 3px 8px;
+  text-decoration: none;
+}
+
+.edit_button:hover {
+  .edit_icon {
+    rotate: 15deg;
+  }
+  scale: 1.1;
+  filter: brightness(110%);
+}
+
+.default_edit {
+  @extend .edit_button;
+  background: #3498db;
+}
+
+.detail_edit {
+  @extend .edit_button;
+  background: teal;
+}                      
+
+.delete_edit {
+  @extend .edit_button;
+  background: crimson;
+  appearance: none;
+  border: none;
+}              
+
+

frontend/src/Components/EventEditButtons/EventEditButtons.stories.tsx

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { EventEditButtons } from './EventEditButtons';
+
+// Local component config.
+const meta: Meta<typeof EventEditButtons> = {
+  title: 'Components/Video',
+  component: EventEditButtons,
+  args: {
+    title: 'Approve',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof EventEditButtons>;
+
+//export const Basic: Story = {
+// args: {
+//  embedId: '88kgbMcDIQ4',
+//},
+//};

frontend/src/Components/EventEditButtons/EventEditButtons.tsx

@@ -0,0 +1,64 @@
+import { Icon } from '@iconify/react';
+import type { ReactNode } from 'react';
+import { deleteEvent } from '~/api';
+import { useAuthContext } from '~/context/AuthContext';
+import { reverse } from '~/named-urls';
+import { PERM } from '~/permissions';
+import { ROUTES } from '~/routes';
+import { hasPerm } from '~/utils';
+import { Link } from '../Link';
+import styles from './EventEditButtons.module.scss';
+
+type EventEditButtons = {
+  title?: ReactNode;
+  id?: string;
+  icon_size?: number;
+};
+
+/** Component for displaying a youtube video */
+export function EventEditButtons({ title = 'event', id, icon_size = 17 }: EventEditButtons) {
+  const { user } = useAuthContext();
+  const isStaff = user?.is_staff;
+  const canChangeEvent = hasPerm({ user: user, permission: PERM.SAMFUNDET_CHANGE_EVENT, obj: id });
+
+  const editUrl = reverse({ pattern: ROUTES.frontend.admin_events_edit, urlParams: { id: id } });
+  const detailUrl = reverse({
+    pattern: ROUTES.backend.admin__samfundet_event_change,
+    urlParams: { objectId: id },
+  });
+
+  return (
+    <>
+      {canChangeEvent && (
+        <Link className={styles.default_edit} url={editUrl}>
+          <Icon className={styles.edit_icon} icon="mdi:pencil" height={icon_size} />
+        </Link>
+      )}
+      {canChangeEvent && (
+        <button
+          className={styles.delete_edit}
+          onClick={() => {
+            const con = window.confirm(`Are you sure you want to delete ${title}`);
+            if (con && id) {
+              deleteEvent(id)
+                .then(() => {
+                  alert(`Deleted ${title}`);
+                })
+                .catch(() => {
+                  alert(`Failed to delete ${title}`);
+                });
+            }
+          }}
+          type="button"
+        >
+          <Icon className={styles.edit_icon} icon="mdi:trash-can-outline" height={icon_size} />
+        </button>
+      )}
+      {isStaff && canChangeEvent && (
+        <Link className={styles.detail_edit} url={detailUrl} target="backend">
+          <Icon className={styles.edit_icon} icon="vscode-icons:file-type-django" height={icon_size} />
+        </Link>
+      )}
+    </>
+  );
+}

frontend/src/Components/EventEditButtons/index.ts

@@ -0,0 +1 @@
+export { EventEditButtons } from './EventEditButtons';

frontend/src/Components/ImageCard/ImageCard.module.scss

@@ -16,9 +16,11 @@ $card-text-shadow: 1px 1px 8px rgba(0, 0, 0, 0.5);
 
 $card-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2);
 $card-box-shadow-hover: 0 3px 8px 0 rgba(0, 0, 0, 0.4);
+$inner-card-padding: 0.75rem;
 // TODO color variables
 
 .container {
+  position: relative;
   display: flex;
   flex-direction: column;
   align-items: stretch;
@@ -55,7 +57,7 @@ $card-box-shadow-hover: 0 3px 8px 0 rgba(0, 0, 0, 0.4);
   display: flex;
   justify-content: space-between;
   flex-direction: column;
-  padding: 0.75rem;
+  padding: $inner-card-padding;
 }
 
 .card_content {
@@ -150,6 +152,23 @@ $card-box-shadow-hover: 0 3px 8px 0 rgba(0, 0, 0, 0.4);
   float: right;
 }
 
+.edit_bar {
+  opacity: 0%;
+  position: absolute;
+  display: flex;
+  flex-direction: row;
+  justify-content: end;
+  gap: 10px;
+  padding-right: 13px;
+  align-items: end;
+  width: 100%;
+  height: 55%;
+  pointer-events: none;
+  margin-left: 20px;
+  transition: all 200ms ease-in-out;
+  z-index: 10;
+}
+
 // Styling to container and children when it is hovered.
 .container:hover {
   .edit_button {
@@ -173,6 +192,10 @@ $card-box-shadow-hover: 0 3px 8px 0 rgba(0, 0, 0, 0.4);
     opacity: 1;
     max-height: 3.5em;
   }
+  .edit_bar {
+    opacity: 100%;
+    margin-left: 0;
+  }
 }
 
 // Compact doesn't show description on hover
@@ -186,3 +209,11 @@ $card-box-shadow-hover: 0 3px 8px 0 rgba(0, 0, 0, 0.4);
     max-height: 0;
   }
 }
+
+.badges {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+

frontend/src/Components/ImageCard/ImageCard.tsx

@@ -3,6 +3,7 @@ import { t } from 'i18next';
 import type { ReactNode } from 'react';
 import { useEffect, useState } from 'react';
 import { Skeleton } from '~/Components';
+import { EventEditButtons } from '~/Components';
 import { KEY } from '~/i18n/constants';
 import { type Children, EventTicketType } from '~/types';
 import { backgroundImageFromUrl } from '~/utils';
@@ -16,6 +17,7 @@ type ImageCardProps = {
   title?: ReactNode;
   subtitle?: ReactNode;
   description?: ReactNode;
+  id?: string;
   date?: string | Date;
   url?: string;
   imageUrl?: string;
@@ -33,6 +35,7 @@ export function ImageCard({
   subtitle = <Skeleton width={'4em'} />,
   description = <Skeleton width={'100%'} />,
   date,
+  id,
   url = '#',
   imageUrl,
   compact,
@@ -48,6 +51,8 @@ export function ImageCard({
   const [displayTicketType, setTicketType] = useState('');
   const [showTicket, setShowTicket] = useState(false);
 
+  const icon_size = compact ? 14 : 17;
+
   useEffect(() => {
     if (ticket_type === EventTicketType.FREE || ticket_type === EventTicketType.REGISTRATION) {
       setTicketType(t(KEY.common_ticket_type_free));
@@ -68,9 +73,10 @@ export function ImageCard({
 
   return (
     <div className={containerStyle}>
+      <div className={styles.edit_bar}>{id && <EventEditButtons title={title} id={id} icon_size={icon_size} />}</div>
       <Link url={url} className={classNames(cardStyle, styles.image)} style={backgroundImageFromUrl(imageUrl)}>
         <div className={styles.card_inner}>
-          <div>
+          <div className={styles.badges}>
             <Badge className={styles.event_host} text={host} />
             {showTicket && <Badge text={displayTicketType} className={styles.ticket_type} />}
           </div>

frontend/src/Components/index.ts

@@ -89,6 +89,7 @@ export { ToolTip } from './ToolTip';
 export { UkaOutlet } from './UkaOutlet';
 export { UserFeedback } from './UserFeedback';
 export { Video } from './Video';
+export { EventEditButtons } from './EventEditButtons';
 // Props
 export type { ButtonProps } from './Button';
 export type { CheckboxProps } from './Checkbox';

frontend/src/Pages/EventPage/EventPage.module.scss

@@ -2,6 +2,14 @@
 
 @use 'src/constants' as *;
 
+.admin_panel {
+  display: flex;
+  flex-direction: row;
+  gap: 20px;
+  margin: 15px 0 10px 0;
+  color: white;
+}
+
 .container {
   width: 100%;
   height: 100%;
@@ -74,4 +82,4 @@
   padding: 0 0.15rem 0 0.25rem;
   border: 1px solid $black;
   border-radius: 2rem;
-}
+}

frontend/src/Pages/EventPage/EventPage.tsx

@@ -2,21 +2,27 @@ import { useQuery } from '@tanstack/react-query';
 import { useTranslation } from 'react-i18next';
 import { useParams } from 'react-router';
 import { ExpandableHeader, ExternalHostBox, H1, Image, Page } from '~/Components';
+import { EventEditButtons } from '~/Components';
 import { BuyEventTicket } from '~/Components/BuyEventTicket/BuyEventTicket';
 import { SamfMarkdown } from '~/Components/SamfMarkdown';
 import { getEvent } from '~/api';
 import { BACKEND_DOMAIN } from '~/constants';
+import { useAuthContext } from '~/context/AuthContext';
 import { useTitle } from '~/hooks';
 import { KEY } from '~/i18n/constants';
+import { PERM } from '~/permissions';
 import { eventKeys } from '~/queryKeys';
 import { dbT } from '~/utils';
+import { hasPerm } from '~/utils';
 import styles from './EventPage.module.scss';
 import { EventInformation } from './components/EventInformation/EventInformation';
 import { EventTable } from './components/EventTable';
 
 export function EventPage() {
   const { t } = useTranslation();
   const { id } = useParams();
+  const { user } = useAuthContext();
+  const canChangeEvent = hasPerm({ user: user, permission: PERM.SAMFUNDET_CHANGE_EVENT, obj: id });
 
   const { data: event, isLoading } = useQuery({
     queryKey: id ? eventKeys.detail(Number(id)) : ['events', 'no-id'],
@@ -31,6 +37,12 @@ export function EventPage() {
         {event && <Image src={BACKEND_DOMAIN + event.image_url} className={styles.event_image} />}
       </div>
 
+      {canChangeEvent && (
+        <div className={styles.admin_panel}>
+          <EventEditButtons title={dbT(event, 'title')} id={id} icon_size={20} />
+        </div>
+      )}
+
       <H1 className={styles.text_title}>{dbT(event, 'title')}</H1>
       <div className={styles.content_row}>
         {event && <EventInformation event={event} />}

frontend/src/Pages/EventsPage/components/EventsList/EventsList.tsx

@@ -83,6 +83,7 @@ export function EventsList({ events }: EventsListProps) {
             subtitle={time_display}
             description={dbT(event, 'description_short') ?? ''}
             compact={true}
+            id={event.id.toString()}
             url={reverse({ pattern: ROUTES.frontend.event, urlParams: { id: event.id } })}
             ticket_type={event.ticket_type}
             host={event.host}

frontend/src/Pages/HomePage/components/EventCarousel/EventCarousel.tsx

@@ -1,13 +1,11 @@
-import { Carousel, IconButton, ImageCard } from '~/Components';
-import { BuyEventTicket } from '~/Components/BuyEventTicket/BuyEventTicket';
+import { Carousel, ImageCard } from '~/Components';
+// import { BuyEventTicket } from '~/Components/BuyEventTicket/BuyEventTicket';
 import { BACKEND_DOMAIN } from '~/constants';
 import { useAuthContext } from '~/context/AuthContext';
 import type { EventDto, HomePageElementDto } from '~/dto';
 import { reverse } from '~/named-urls';
-import { PERM } from '~/permissions';
 import { ROUTES } from '~/routes';
-import { COLORS } from '~/types';
-import { dbT, hasPerm } from '~/utils';
+import { dbT } from '~/utils';
 import styles from './EventCarousel.module.scss';
 
 type EventCarouselProps = {
@@ -37,18 +35,13 @@ export function EventCarousel({ element, skeletonCount = 0 }: EventCarouselProps
     <Carousel className={wrapperClass} header={element.title_nb} spacing={spacing}>
       {element.events.map((event: EventDto) => {
         const url = reverse({ pattern: ROUTES.frontend.event, urlParams: { id: event.id } });
-        const editUrl = reverse({ pattern: ROUTES.frontend.admin_events_edit, urlParams: { id: event.id } });
-        const detailurl = reverse({
-          pattern: ROUTES.backend.admin__samfundet_event_change,
-          urlParams: { objectId: event.id },
-        });
-        const canChangeEvent = hasPerm({ user: user, permission: PERM.SAMFUNDET_CHANGE_EVENT, obj: event.id });
         const event_title = dbT(event, 'title') ?? '';
         const event_short_dsc = dbT(event, 'description_short') ?? '';
 
         return (
           <ImageCard
             className={styles.image_card}
+            id={event.id.toString()}
             key={event.id}
             title={event_title}
             subtitle={event.location}
@@ -58,25 +51,8 @@ export function EventCarousel({ element, skeletonCount = 0 }: EventCarouselProps
             url={url}
             ticket_type={event.ticket_type}
             host={event.host}
-          >
-            {event.billig && <BuyEventTicket event={event} ticketSaleState={event.billig} />}
-
-            <div className={styles.button_bar}>
-              {canChangeEvent && (
-                <IconButton icon="mdi:pencil" url={editUrl} title="Edit" color={COLORS.blue} border="solid white 1px" />
-              )}
-              {isStaff && canChangeEvent && (
-                <IconButton
-                  icon="vscode-icons:file-type-django"
-                  title="Backend details"
-                  target="backend"
-                  color={COLORS.white}
-                  border="solid #444 1px"
-                  url={detailurl}
-                />
-              )}
-            </div>
-          </ImageCard>
+            // {event.billig && <BuyEventTicket event={event} ticketSaleState={event.billig} />}
+          />
         );
       })}
     </Carousel>