Skip to content

Advanced Properties changes as per the field type #125

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
May 28, 2024
Merged

Advanced Properties changes as per the field type #125

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
5806219
Mapping corrections on the fields
sayalijoshi27 May 24, 2024
d04ccfd
Merge branch 'dev' of https://github.com/contentstack/migration-v2-no…
sayalijoshi27 May 28, 2024
dde0d35
Merge branch 'dev' of https://github.com/contentstack/migration-v2-no…
sayalijoshi27 May 28, 2024
6d90a06
Advanced Properties changes as per the field type
sayalijoshi27 May 28, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 34 additions & 0 deletions ui/src/components/AdvancePropertise/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
@import '../../scss/variables';

.options-class {
display: flex;
flex-direction: column;
Expand All @@ -17,3 +19,35 @@
margin-top: 0;
margin-left: 30px;
}
.modal-data {
padding: 0.75rem;
.radio-field {
margin-bottom: 0.75rem;
}
.Radio {
width: calc(33.33333% - .66667rem);
padding: .5rem;
margin: 0 !important;
}
.info-style {
margin-top: .75rem;
margin-bottom: 1.5rem;
.Info__border {
border-left-color: #0469e3;
}
}
.options-class {
line-height: $line-height-reset;
}
.nl-note {
color: $color-font-base;
font-size: $size-font-large;
line-height: $line-height-default;
margin-left: 2.75rem;
margin-top: -.25rem !important;
}
.ToggleWrap {
margin-top: 0.5rem;
padding: 0 0.5rem
}
}
298 changes: 238 additions & 60 deletions ui/src/components/AdvancePropertise/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,20 @@
// Libraries
import { useState } from 'react';

import {
ModalBody,
ModalHeader,
FieldLabel,
TextInput,
ToggleSwitch,
Tooltip
Tooltip,
Radio,
Info
} from '@contentstack/venus-components';

// Styles
import './index.scss';

export interface SchemaProps {
interface SchemaProps {
fieldtype: string;
value: any;
rowId: string;
Expand All @@ -23,10 +26,14 @@ export interface SchemaProps {
const AdvancePropertise = (props: SchemaProps) => {
const [toggleStates, setToggleStates] = useState({
validationRegex: props?.value?.ValidationRegex,
basic: props?.value?.Basic,
advanced: true || props?.value?.Advanced,
custom: props?.value?.Custom,
mandatory: props?.value?.Mandatory,
multiple: props?.value?.Multiple,
unique: props?.value?.Unique,
nonLocalizable: props?.value?.NonLocalizable
nonLocalizable: props?.value?.NonLocalizable,
embedObject: props?.value?.EmbedObject
});

const handleToggleChange = (field: string, value: boolean, checkBoxChanged: boolean) => {
Expand Down Expand Up @@ -55,65 +62,236 @@ const AdvancePropertise = (props: SchemaProps) => {
);
};

const handleRadioChange = (field: string, event: any, checkBoxChanged: boolean) => {
setToggleStates((prevStates) => ({
...prevStates,
[field]: event
}));

props?.updateFieldSettings(
props?.rowId,
{ [field?.charAt(0)?.toUpperCase() + field?.slice(1)]: event },
checkBoxChanged
);
};

return (
<>
<ModalHeader title={`${props?.fieldtype} propertise`} closeModal={props?.closeModal} />
<ModalHeader title={`${props?.fieldtype} propertise`} closeModal={props?.closeModal} className="text-capitalize" />
<ModalBody>
<FieldLabel htmlFor="someInput" version="v2">
Validation (Regex)
</FieldLabel>
<TextInput
className="validation-input"
type="text"
value={toggleStates?.validationRegex}
placeholder="Enter value"
version="v2"
onChange={(e: any) => handleOnChange('validationRegex', e, true)}
/>
<FieldLabel className="option-label" htmlFor="someInput" version="v2">
Options
</FieldLabel>
<div className="options-class">
<ToggleSwitch
label="Mandatory"
labelColor="primary"
labelPosition="right"
checked={toggleStates?.mandatory}
onChange={(e: any) => handleToggleChange('mandatory', e?.target?.checked, true)}
/>
<ToggleSwitch
label="Multiple"
labelColor="primary"
labelPosition="right"
checked={toggleStates?.multiple}
onChange={(e: any) => handleToggleChange('multiple', e?.target?.checked, true)}
/>
<ToggleSwitch
label="Unique"
labelColor="primary"
labelPosition="right"
checked={toggleStates?.unique}
onChange={(e: any) => handleToggleChange('unique', e?.target?.checked, true)}
/>
<Tooltip
content="Available only if there are multiple languages in your stack"
position="top"
disabled={props?.isLocalised}
>
<ToggleSwitch
id="disabled"
disabled={!props?.isLocalised}
label="Non-localizable"
labelColor="primary"
labelPosition="right"
checked={toggleStates?.nonLocalizable}
onChange={(e: any) => handleToggleChange('nonLocalizable', e?.target?.checked, true)}
/>
</Tooltip>
<p className="non-localizable-message">
If enabled, editing this field is restricted in localized entries. The field will use
the value of the master-language entry in all localized entries.
</p>
<div className='modal-data'>
{props?.fieldtype === 'HTML Rich text Editor' || props?.fieldtype === 'JSON Rich Text Editor' && (
<div>
<FieldLabel htmlFor="editorType" version="v2" className='radio-field'>Editor Type</FieldLabel>
<div
className="Radio-wrapper FormFields__selection-wrapper--inline"
>
<Radio
checked={toggleStates?.basic}
id="basic"
label="Basic"
name="option"
radioDisplayType="inline-flex"
onChange={(e: any) => handleRadioChange('basic', e?.target?.checked, e?.target?.checked)}

/>
<Radio
checked={toggleStates?.advanced}
id="advanced"
label="Advanced"
name="option"
radioDisplayType="inline-flex"
onChange={(e: any) => handleRadioChange('advanced', e?.target?.checked, e?.target?.checked)}
/>
<Radio
checked={toggleStates?.custom}
id="custom"
label="Custom"
name="option"
radioDisplayType="inline-flex"
onChange={(e: any) => handleRadioChange('custom', e?.target?.checked, e?.target?.checked)}
/>
</div>

<Info
content="Provides basic formatting tools as well as options to insert images, videos, tables, links, and custom class or ID."
className='info-style'
// type="default"
version="v2"
backgroundColor='#f5fdff'
// borderColor='#0469e3'
/>

<FieldLabel className="option-label" htmlFor="someInput" version="v2">
Options
</FieldLabel>
<div className="options-class">
<div className='ToggleWrap'>
<ToggleSwitch
label="Embed Object(s)"
labelColor="primary"
labelPosition="right"
checked={toggleStates?.embedObject}
onChange={(e: any) => handleToggleChange('embedObject', e?.target?.checked, true)}
/>
</div>
<div className='ToggleWrap'>
<ToggleSwitch
label="Mandatory"
labelColor="primary"
labelPosition="right"
checked={toggleStates?.mandatory}
onChange={(e: any) => handleToggleChange('mandatory', e?.target?.checked, true)}
/>
</div>

<div className='ToggleWrap'>
<ToggleSwitch
label="Multiple"
labelColor="primary"
labelPosition="right"
checked={toggleStates?.multiple}
onChange={(e: any) => handleToggleChange('multiple', e?.target?.checked, true)}
/>
</div>

<div className='ToggleWrap'>
<Tooltip
content="Available only if there are multiple languages in your stack"
position="top"
disabled={props?.isLocalised}
>
<ToggleSwitch
id="disabled"
disabled={!props?.isLocalised}
label="Non-localizable"
labelColor="primary"
labelPosition="right"
checked={toggleStates?.nonLocalizable}
onChange={(e: any) => handleToggleChange('nonLocalizable', e?.target?.checked, true)}
/>
</Tooltip>
</div>
<div className="nl-note">
If enabled, editing this field is restricted in localized entries. The field will use
the value of the master-language entry in all localized entries.
</div>
</div>
</div>
)}

{props?.fieldtype === 'text' || props?.fieldtype === 'Single Line Textbox' && (
<div>
<FieldLabel htmlFor="validation" version="v2">
Validation (Regex)
</FieldLabel>
<TextInput
className="validation-input"
type="text"
value={toggleStates?.validationRegex}
placeholder="Enter value"
version="v2"
onChange={(e: any) => handleOnChange('validationRegex', e, true)}
/>
<FieldLabel className="option-label" htmlFor="options" version="v2">
Options
</FieldLabel>
<div className="options-class">
<div className='ToggleWrap'>
<ToggleSwitch
label="Mandatory"
labelColor="primary"
labelPosition="right"
checked={toggleStates?.mandatory}
onChange={(e: any) => handleToggleChange('mandatory', e?.target?.checked, true)}
/>
</div>

<div className='ToggleWrap'>
<ToggleSwitch
label="Multiple"
labelColor="primary"
labelPosition="right"
checked={toggleStates?.multiple}
onChange={(e: any) => handleToggleChange('multiple', e?.target?.checked, true)}
/>
</div>

<div className='ToggleWrap'>
<ToggleSwitch
label="Unique"
labelColor="primary"
labelPosition="right"
checked={toggleStates?.unique}
onChange={(e: any) => handleToggleChange('unique', e?.target?.checked, true)}
/>
</div>

<div className='ToggleWrap'>
<Tooltip
content="Available only if there are multiple languages in your stack"
position="top"
disabled={props?.isLocalised}
>
<ToggleSwitch
id="disabled"
disabled={!props?.isLocalised}
label="Non-localizable"
labelColor="primary"
labelPosition="right"
checked={toggleStates?.nonLocalizable}
onChange={(e: any) => handleToggleChange('nonLocalizable', e?.target?.checked, true)}
/>
</Tooltip>
</div>
<p className="nl-note">
If enabled, editing this field is restricted in localized entries. The field will use
the value of the master-language entry in all localized entries.
</p>
</div>
</div>
)}

{props?.fieldtype === 'global_field' && (
<div>
<FieldLabel className="option-label" htmlFor="otherOptions" version="v2">
Other Options
</FieldLabel>
<div className="options-class">
<div className='ToggleWrap'>
<ToggleSwitch
label="Multiple"
labelColor="primary"
labelPosition="right"
checked={toggleStates?.multiple}
onChange={(e: any) => handleToggleChange('multiple', e?.target?.checked, true)}
/>
</div>

<div className='ToggleWrap'>
<Tooltip
content="Available only if there are multiple languages in your stack"
position="top"
disabled={props?.isLocalised}
>
<ToggleSwitch
id="disabled"
disabled={!props?.isLocalised}
label="Non-localizable"
labelColor="primary"
labelPosition="right"
checked={toggleStates?.nonLocalizable}
onChange={(e: any) => handleToggleChange('nonLocalizable', e?.target?.checked, true)}
/>
</Tooltip>
</div>
<div className="nl-note">
If enabled, editing this field is restricted in localized entries. The field will use
the value of the master-language entry in all localized entries.
</div>
</div>
</div>
)}
</div>
</ModalBody>
</>
Expand Down
Loading