Add video widget model and option card

met-api/src/met_api/models/widget_video.py

@@ -0,0 +1,40 @@
+"""WidgetVideo model class.
+
+Manages the video widget
+"""
+from __future__ import annotations
+
+from sqlalchemy.sql.schema import ForeignKey
+
+from .base_model import BaseModel
+from .db import db
+
+
+class WidgetVideo(BaseModel):  # pylint: disable=too-few-public-methods, too-many-instance-attributes
+    """Definition of the Video entity."""
+
+    __tablename__ = 'widget_video'
+    id = db.Column(db.Integer, primary_key=True, autoincrement=True)
+    widget_id = db.Column(db.Integer, ForeignKey('widget.id', ondelete='CASCADE'), nullable=True)
+    engagement_id = db.Column(db.Integer, ForeignKey('engagement.id', ondelete='CASCADE'), nullable=True)
+    video_url = db.Column(db.String(), nullable=False)
+    description = db.Column(db.Text())
+
+    @classmethod
+    def get_video(cls, widget_id) -> list[WidgetVideo]:
+        """Get video."""
+        widget_video = db.session.query(WidgetVideo) \
+            .filter(WidgetVideo.widget_id == widget_id) \
+            .all()
+        return widget_video
+
+    @classmethod
+    def update_video(cls, widget_id, video_data: dict) -> WidgetVideo:
+        """Update video."""
+        query = WidgetVideo.query.filter_by(WidgetVideo.widget_id == widget_id)
+        widget_video: WidgetVideo = query.first()
+        if not widget_video:
+            return video_data
+        query.update(video_data)
+        db.session.commit()
+        return widget_video

met-web/src/components/engagement/form/EngagementWidgets/Video/Form.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export const Form = () => {
+    return <div>Form</div>;
+};

met-web/src/components/engagement/form/EngagementWidgets/Video/VideoContext.tsx

@@ -0,0 +1,24 @@
+import { Widget, WidgetType } from 'models/widget';
+import React, { createContext, useContext } from 'react';
+import { WidgetDrawerContext } from '../WidgetDrawerContext';
+import { useAppDispatch } from 'hooks';
+
+export interface VideoContextProps {
+    widget: Widget | null;
+}
+
+export type EngagementParams = {
+    engagementId: string;
+};
+
+export const VideoContext = createContext<VideoContextProps>({
+    widget: null,
+});
+
+export const VideoContextProvider = ({ children }: { children: JSX.Element | JSX.Element[] }) => {
+    const { widgets } = useContext(WidgetDrawerContext);
+    const dispatch = useAppDispatch();
+    const widget = widgets.find((widget) => widget.widget_type_id === WidgetType.Video) || null;
+
+    return <VideoContext.Provider value={{ widget }}>{children}</VideoContext.Provider>;
+};

met-web/src/components/engagement/form/EngagementWidgets/Video/VideoOptionCard.tsx

@@ -0,0 +1,93 @@
+import React, { useContext, useState } from 'react';
+import { MetPaper, MetBody, MetHeader4 } from 'components/common';
+import { Grid, CircularProgress } from '@mui/material';
+import { WidgetDrawerContext } from '../WidgetDrawerContext';
+import { WidgetType } from 'models/widget';
+import { Else, If, Then } from 'react-if';
+import { ActionContext } from '../../ActionContext';
+import { useAppDispatch } from 'hooks';
+import { openNotification } from 'services/notificationService/notificationSlice';
+import { optionCardStyle } from '../Phases/PhasesOptionCard';
+import { WidgetTabValues } from '../type';
+import LocationOnIcon from '@mui/icons-material/LocationOn';
+import { useCreateWidgetMutation } from 'apiManager/apiSlices/widgets';
+
+const MapOptionCard = () => {
+    const { widgets, loadWidgets, handleWidgetDrawerOpen, handleWidgetDrawerTabValueChange } =
+        useContext(WidgetDrawerContext);
+    const { savedEngagement } = useContext(ActionContext);
+    const dispatch = useAppDispatch();
+    const [createWidget] = useCreateWidgetMutation();
+    const [isCreatingWidget, setIsCreatingWidget] = useState(false);
+
+    const handleCreateWidget = async () => {
+        const alreadyExists = widgets.map((widget) => widget.widget_type_id).includes(WidgetType.Video);
+        if (alreadyExists) {
+            handleWidgetDrawerTabValueChange(WidgetTabValues.VIDEO_FORM);
+            return;
+        }
+
+        try {
+            setIsCreatingWidget(true);
+            await createWidget({
+                widget_type_id: WidgetType.Video,
+                engagement_id: savedEngagement.id,
+            });
+            await loadWidgets();
+            dispatch(
+                openNotification({
+                    severity: 'success',
+                    text: 'Video widget successfully created.',
+                }),
+            );
+            setIsCreatingWidget(false);
+            handleWidgetDrawerTabValueChange(WidgetTabValues.VIDEO_FORM);
+        } catch (error) {
+            setIsCreatingWidget(false);
+            dispatch(openNotification({ severity: 'error', text: 'Error occurred while creating map widget' }));
+            handleWidgetDrawerOpen(false);
+        }
+    };
+
+    return (
+        <MetPaper
+            data-testid={`widget-drawer-option/${WidgetType.Video}`}
+            elevation={1}
+            sx={optionCardStyle}
+            onClick={() => handleCreateWidget()}
+        >
+            <If condition={isCreatingWidget}>
+                <Then>
+                    <Grid container alignItems="center" justifyContent="center" direction="row" height="5.5em">
+                        <CircularProgress color="inherit" />
+                    </Grid>
+                </Then>
+                <Else>
+                    <Grid container alignItems="center" justifyContent="flex-start" direction="row" columnSpacing={1}>
+                        <Grid item sx={{ mr: 0.5 }}>
+                            <LocationOnIcon color="info" sx={{ p: 0.5, fontSize: '4em' }} />
+                        </Grid>
+                        <Grid
+                            container
+                            item
+                            alignItems="center"
+                            justifyContent="center"
+                            direction="row"
+                            rowSpacing={1}
+                            xs={8}
+                        >
+                            <Grid item xs={12}>
+                                <MetHeader4>Video</MetHeader4>
+                            </Grid>
+                            <Grid item xs={12}>
+                                <MetBody>Add a link to a hosted video and link preview</MetBody>
+                            </Grid>
+                        </Grid>
+                    </Grid>
+                </Else>
+            </If>
+        </MetPaper>
+    );
+};
+
+export default MapOptionCard;

met-web/src/components/engagement/form/EngagementWidgets/Video/index.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Form } from './Form';
+import { VideoContextProvider } from './VideoContext';
+
+export const VideoForm = () => {
+    return (
+        <VideoContextProvider>
+            <Form />
+        </VideoContextProvider>
+    );
+};
+
+export default VideoForm;

met-web/src/components/engagement/form/EngagementWidgets/type.tsx

@@ -6,4 +6,5 @@ export const WidgetTabValues = {
     PHASES_FORM: 'PHASES_FORM',
     EVENTS_FORM: 'EVENTS_FORM',
     MAP_FORM: 'MAP_FORM',
+    VIDEO_FORM: 'VIDEO_FORM',
 };

met-web/src/models/widget.tsx

@@ -19,4 +19,5 @@ export enum WidgetType {
     Subscribe = 4,
     Events = 5,
     Map = 6,
+    Video = 7,
 }