diff --git a/src/components/ModalsContainer/BlueprintModal/Body/Editor/MediaOptions/index.tsx b/src/components/ModalsContainer/BlueprintModal/Body/Editor/MediaOptions/index.tsx new file mode 100644 index 000000000..1ba256168 --- /dev/null +++ b/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 ( + + + + handleToggle('videoAudio')} />} + label={Video / Audio} + labelPlacement="start" + /> + + + + handleToggle('image')} />} + label={Image} + labelPlacement="start" + /> + + + + handleToggle('sourceLink')} />} + label={Source Link} + labelPlacement="start" + /> + + ) +} + +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) => )` + &.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 diff --git a/src/components/ModalsContainer/BlueprintModal/Body/Editor/index.tsx b/src/components/ModalsContainer/BlueprintModal/Body/Editor/index.tsx index 2ba6c08a7..17c0a38ff 100644 --- a/src/components/ModalsContainer/BlueprintModal/Body/Editor/index.tsx +++ b/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 => { 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([]) 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} /> - + {selectedSchema && (