Merge pull request #2076 from saithsab877/Add-media-options

Implement(Blueprint): Add `Media Options` Below Attributes

src/components/ModalsContainer/BlueprintModal/Body/Editor/MediaOptions/index.tsx

@@ -0,0 +1,113 @@
+import { FormControlLabel, Switch, SwitchProps } from '@mui/material'
+import { useState } from 'react'
+import styled from 'styled-components'
+import { Flex } from '~/components/common/Flex'
+import { colors } from '~/utils/colors'
+
+type MediaOptionKey = 'videoAudio' | 'image' | 'sourceLink'
+
+type MediaOptionsProps = {
+  setMediaOptions: (options: { videoAudio: boolean; image: boolean; sourceLink: boolean }) => void
+}
+
+const MediaOptions = ({ setMediaOptions }: MediaOptionsProps) => {
+  const [mediaOptions, setLocalMediaOptions] = useState({
+    videoAudio: false,
+    image: false,
+    sourceLink: false,
+  })
+
+  const handleToggle = (option: MediaOptionKey) => {
+    setLocalMediaOptions((prevOptions) => {
+      const newOptions = {
+        ...prevOptions,
+        [option]: !prevOptions[option],
+      }
+
+      setMediaOptions(newOptions)
+
+      return newOptions
+    })
+  }
+
+  return (
+    <StyledFlex direction="column">
+      <LineBar />
+
+      <StyledFormControlLabel
+        control={<CustomSwitch checked={mediaOptions.videoAudio} onChange={() => handleToggle('videoAudio')} />}
+        label={<StyledLabel active={mediaOptions.videoAudio}>Video / Audio</StyledLabel>}
+        labelPlacement="start"
+      />
+
+      <LineBar />
+
+      <StyledFormControlLabel
+        control={<CustomSwitch checked={mediaOptions.image} onChange={() => handleToggle('image')} />}
+        label={<StyledLabel active={mediaOptions.image}>Image</StyledLabel>}
+        labelPlacement="start"
+      />
+
+      <LineBar />
+
+      <StyledFormControlLabel
+        control={<CustomSwitch checked={mediaOptions.sourceLink} onChange={() => handleToggle('sourceLink')} />}
+        label={<StyledLabel active={mediaOptions.sourceLink}>Source Link</StyledLabel>}
+        labelPlacement="start"
+      />
+    </StyledFlex>
+  )
+}
+
+const StyledFlex = styled(Flex)`
+  direction: column;
+`
+
+const StyledFormControlLabel = styled(FormControlLabel)`
+  justify-content: space-between;
+  margin: 8px 0;
+`
+
+const StyledLabel = styled.span<{ active: boolean }>`
+  color: ${({ active }) => (active ? colors.white : colors.GRAY7)};
+  font-family: Barlow;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 18px;
+  letter-spacing: 0.01em;
+  text-align: left;
+`
+
+const CustomSwitch = styled((props: SwitchProps) => <Switch {...props} />)`
+  &.MuiSwitch-root {
+    width: 53px;
+    height: 38px;
+  }
+  & .MuiSwitch-switchBase {
+    margin-top: 3px;
+    &.Mui-checked {
+      color: ${colors.white};
+      & + .MuiSwitch-track {
+        background-color: ${colors.primaryBlueBorder};
+        opacity: 1;
+      }
+    }
+  }
+  & .MuiSwitch-thumb {
+    width: 13px;
+    height: 13px;
+  }
+  & .MuiSwitch-track {
+    border-radius: 10px;
+    background-color: ${colors.BG2};
+    opacity: 1;
+  }
+`
+
+const LineBar = styled.div`
+  border: 1px solid ${colors.BG2};
+  width: 100%;
+  opacity: 0.5;
+`
+
+export default MediaOptions

src/components/ModalsContainer/BlueprintModal/Body/Editor/index.tsx

@@ -17,6 +17,7 @@ import { getNodeSchemaTypes, getNodeType, Schema } from '~/network/fetchSourcesD
 import { useModal } from '~/stores/useModalStore'
 import { colors } from '~/utils'
 import { CreateCustomNodeAttribute } from './CustomAttributesStep'
+import MediaOptions from './MediaOptions'
 import { convertAttributes, parsedObjProps, parseJson } from './utils'
 
 const defaultValues = {
@@ -66,6 +67,7 @@ const handleSubmitForm = async (
   data: FieldValues,
   isUpdate = false,
   deletedAttributes: string[],
+  mediaOptions: { videoAudio: boolean; image: boolean; sourceLink: boolean },
 ): Promise<string | undefined> => {
   try {
     const { attributes, ...withoutAttributes } = data
@@ -75,11 +77,28 @@ const handleSubmitForm = async (
       ...deletedAttributes.reduce<{ [key: string]: string }>((acc, key) => ({ ...acc, [key]: 'delete' }), {}),
     }
 
-    const requestData = {
+    const requestData: {
+      attributes: { [key: string]: string }
+      media_url?: string
+      image_url?: string
+      source_link?: string
+    } = {
       ...withoutAttributes,
       attributes: updatedAttributes,
     }
 
+    if (mediaOptions.videoAudio) {
+      requestData.media_url = ''
+    }
+
+    if (mediaOptions.image) {
+      requestData.image_url = ''
+    }
+
+    if (mediaOptions.sourceLink) {
+      requestData.source_link = ''
+    }
+
     let res: { status: string; ref_id: string }
 
     if (isUpdate) {
@@ -173,6 +192,12 @@ export const Editor = ({
   const [parsedData, setParsedData] = useState<parsedObjProps[]>([])
   const [submitDisabled, setSubmitDisabled] = useState(true)
 
+  const [mediaOptions, setMediaOptions] = useState({
+    videoAudio: false,
+    image: false,
+    sourceLink: false,
+  })
+
   useEffect(
     () => () => {
       reset()
@@ -297,6 +322,7 @@ export const Editor = ({
         { ...data, ...(selectedSchema ? { ref_id: selectedSchema?.ref_id } : {}) },
         !!selectedSchema,
         deletedAttributes,
+        mediaOptions,
       )
 
       onSchemaCreate({ type: data.type, parent: parent || '', ref_id: selectedSchema?.ref_id || res || 'new' })
@@ -449,7 +475,7 @@ export const Editor = ({
               onDelete={handleDeleteAttribute}
               parent={selectedSchema ? selectedSchema.type : parent}
             />
-
+            <MediaOptions setMediaOptions={setMediaOptions} />
             <Flex direction="row" justify="space-between" mt={20}>
               {selectedSchema && (
                 <Flex direction="column">