Skip to content
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

Feat/mkt 5594 delete function #267

Merged
merged 4 commits into from
Apr 25, 2024
Merged

Feat/mkt 5594 delete function #267

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
ba0a208
feat:delete functionality
Amitkanswal Apr 23, 2024
bc47192
Merge branch 'feat/MKT-5564-audience-list-wrapper' into staging
Amitkanswal Apr 23, 2024
0925c4c
feat:updated backward compatibility
Amitkanswal Apr 24, 2024
a448521
fix:rearrange import
Amitkanswal Apr 24, 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
54 changes: 31 additions & 23 deletions audience-app/plugin/src/audiencePlugin/AudienceComponent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
import React from "react";
import { cbModal } from "@contentstack/venus-components";
import AudienceModal from "./AudienceModal";
import { isPrePostTagsPresent } from "./lib";

import "./style.css";
import { IRteParam } from "@contentstack/app-sdk/dist/src/RTE/types";
Amitkanswal marked this conversation as resolved.
Show resolved Hide resolved

export const AudiencePreTag = (props) => {
const {
Expand All @@ -15,8 +17,6 @@ export const AudiencePreTag = (props) => {
invalidConfig
} = props;

console.error("props", props, attrs.audiences);

const handleMouseDown = (event) => {
if (event) event.preventDefault();
cbModal({
Expand Down Expand Up @@ -44,9 +44,9 @@ export const AudiencePreTag = (props) => {
<span
onMouseDown={handleMouseDown}
{...attributes}
className="audience-plugin"
className="audience-plugin audience-pre"
data-attrs={JSON.stringify(attrs)}
contentEditable={false}
contentEditable={true}
style={{ userSelect: "none", margin: "0 2px" }}
data-type="audience-pre"
>
Expand All @@ -58,14 +58,14 @@ export const AudiencePreTag = (props) => {

export const AudiencePostTag = (props) => {
const { attributes, attrs, children } = props;

return (
<span
{...attributes}
className="audience-plugin"
className="audience-plugin audience-post"
data-type="audience-post"
data-attrs={JSON.stringify(attrs)}
contentEditable={false}
contentEditable={true}
style={{ userSelect: "none", margin: "0 3px" }}
>
{"[AudienceEnd]"}
Expand All @@ -74,20 +74,28 @@ export const AudiencePostTag = (props) => {
);
};

export const AudienceWrapperComponent = (props) => {
const { attributes, attrs, children } = props;
console.log("AudienceWrapperComponent.props", props);

return (
<span
{...attributes}
className="audience-plugin"
data-type="audience-wrapper"
data-attrs={JSON.stringify(attrs)}
contentEditable={true}
style={{ userSelect: "none", margin: "0 3px" }}
>
{children}
</span>
);
export const AudienceWrapperComponent = (props: { attributes: any; attrs: any, children: any, element: any, rte: IRteParam }) => {
const { attributes, attrs, children, element, rte } = props;
const isWrapperTagsPresent = isPrePostTagsPresent(element.children);
const childNode = []

if (!isWrapperTagsPresent) {
element.children.forEach((node) => {
if (node.type === "audience-pre" || node.type === "audience-post") {
rte.removeNode(node);
}
childNode.push(node)
})
}

return isWrapperTagsPresent ? <span
{...attributes}
className="audience-plugin audience-wrapper"
data-type="audience-wrapper"
data-attrs={JSON.stringify(attrs)}
contentEditable={true}
style={{ userSelect: "none", margin: "0 3px" }}
>
{children}
</span> : <>{children}</>
};
100 changes: 53 additions & 47 deletions audience-app/plugin/src/audiencePlugin/AudienceModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,23 +19,19 @@ import {
} from "./icons";

import CheckboxTree from "react-checkbox-tree";
import EmptyStateComponent from "./UnconfiguredState";
import 'react-checkbox-tree/lib/react-checkbox-tree.css';
import "./modal.css";
import { log } from "console";

const AudienceModal = (props: any) => {
let { rte, savedSelection, audiences, attrs = {}, slatePath, invalidConfig } = props;
let { rte, savedSelection, audiences, attrs = {}, slatePath } = props;
const [checked, setChecked] = useState<any>(attrs.checked || []);
const [expanded, setExpanded] = useState<any>(attrs.expanded || []);
const [isConfigured, setIsConfigured] = useState(audiences ? true : false)
const config = rte.getConfig().then((config) => config).catch((err) => console.error(err));

useEffect(() => {
}, [checked, expanded]);
const handleAddRegion = (event) => {
event.preventDefault();
console.log("event...", event);

savedSelection = savedSelection || {
anchor: rte.selection.getEnd([]),
focus: rte.selection.getEnd([])
Expand Down Expand Up @@ -94,7 +90,6 @@ const AudienceModal = (props: any) => {
});

if (props.attrs) {

rte.setAttrs(audiencePre, {
at: slatePath,
});
Expand All @@ -106,13 +101,26 @@ const AudienceModal = (props: any) => {
at: endPath.path,
});
} else {
const selectedElements = rte.selection.get();
const [getNode, path] = rte.getNode(selectedElements);
const newNode = [{...audiencePre} ,getNode , {...audiencePost} ]
const newNode1 = audienceWrapper(newNode)
rte.removeNode(getNode);
rte.insertNode(newNode1, {at: path});

if (!config?.useNewAudienceSchema) {
rte.insertNode(audiencePost, { at: savedSelection.focus });
rte.insertNode(audiencePre, { at: savedSelection.anchor });
} else {
const selectedElements = rte.selection.get();
const [getNode, path] = rte.getNode(selectedElements);
const newNode = [{ ...audiencePre }, {
type: "fragment",
uid: v4()
.split("-")
.join(""),
attrs:{class:"fragment-inline"},
className:"fragment-inline",
children: [getNode],
}, { ...audiencePost }]

const newNode1 = audienceWrapper(newNode)
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can we have a better name than newNode1 ? @Amitkanswal

rte.removeNode(getNode);
rte.insertNode(newNode1, { at: path });
}
}

const savedSelectionPath = savedSelection.anchor.path;
Expand All @@ -124,6 +132,7 @@ const AudienceModal = (props: any) => {
],
offset: 0,
};

rte.selection.set(rte.selection.getEnd([]));
}

Expand All @@ -133,38 +142,36 @@ const AudienceModal = (props: any) => {
<div>
<ModalHeader title="Select Audience" closeModal={props.closeModal} />
<ModalBody>
<EmptyStateComponent isConfigured={isConfigured} invalidConfig={invalidConfig}>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why have we removed invalidConfig check ? @Amitkanswal

<div
style={{
height: "234px",
}}
>
<Field>
<CheckboxTree
iconsClass="fa5"
showNodeIcon={false}
nodes={audiences}
checked={checked}
expanded={expanded}
onCheck={(checked) => {
setChecked(checked);
}}
onExpand={(expanded) => {
setExpanded(expanded);
}}
// nativeCheckboxes={true}
checkModel="all"
icons={{
check: <CheckedIcon />,
uncheck: <UncheckedIcon />,
halfCheck: <SemiCheckedIcon />,
expandOpen: <ExpandOpenIcon />,
expandClose: <ExpandCloseIcon />,
}}
/>
</Field>
</div>
</EmptyStateComponent>
<div
style={{
height: "234px",
}}
>
<Field>
<CheckboxTree
iconsClass="fa5"
showNodeIcon={false}
nodes={audiences}
checked={checked}
expanded={expanded}
onCheck={(checked) => {
setChecked(checked);
}}
onExpand={(expanded) => {
setExpanded(expanded);
}}
// nativeCheckboxes={true}
checkModel="all"
icons={{
check: <CheckedIcon />,
uncheck: <UncheckedIcon />,
halfCheck: <SemiCheckedIcon />,
expandOpen: <ExpandOpenIcon />,
expandClose: <ExpandCloseIcon />,
}}
/>
</Field>
</div>
</ModalBody>

<ModalFooter>
Expand All @@ -173,7 +180,6 @@ const AudienceModal = (props: any) => {
Cancel
</Button>
<Button
disabled={!isConfigured}
key="addButton"
id="addRegionBtn"
icon="CheckedWhite"
Expand Down
8 changes: 8 additions & 0 deletions audience-app/plugin/src/audiencePlugin/lib/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import { ReactNode } from "react";

export const fieldExtractor = (group: any[] = [], group_title) => {
return group.map((field) => {
if (!field[group_title]) throw new Error("field is missing");
Expand All @@ -8,3 +10,9 @@ export const fieldExtractor = (group: any[] = [], group_title) => {
});
};


export const isPrePostTagsPresent = (nodeList: {type: string; uid: string; attrs: any; children: ReactNode[]}[]): boolean => {
const isPreTagPresent = nodeList.some(node => node.type === "audience-pre");
const isPostTagPresent = nodeList.some(node => node.type === "audience-post");
return isPreTagPresent && isPostTagPresent;
}
4 changes: 2 additions & 2 deletions audience-app/plugin/src/audiencePlugin/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
.audience-plugin {
.audience-pre, .audience-post {
color: #6c5ce7;
background-color: #efedfc;
padding: 0 2px;
}
}
Loading
Loading