Skip to content

Add copy button for TD affordances (actions, properties, events) #181

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

Open
AyushPrakash414 wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Add copy button for TD affordances (actions, properties, events) #181

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d2879cf
Add copy button for TD affordances (actions, properties, events)
AyushPrakash414 Jan 9, 2026
6156d33
Refactor affordance copy logic and improve UX
AyushPrakash414 Jan 12, 2026
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
99 changes: 76 additions & 23 deletions src/components/TDViewer/components/Action.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
* SPDX-License-Identifier: EPL-2.0 OR W3C-20150513
********************************************************************************/
import React, { useContext, useState } from "react";
import { Trash2 } from "react-feather";
import { Trash2, Copy } from "react-feather";
import ediTDorContext from "../../../context/ediTDorContext";
import {
buildAttributeListObject,
Expand All @@ -22,17 +22,17 @@ import InfoIconWrapper from "../../base/InfoIconWrapper";
import { getFormsTooltipContent } from "../../../utils/TooltipMapper";
import Form from "./Form";
import AddFormElement from "../base/AddFormElement";
import { copyAffordance } from "../../../utils/copyAffordance";

const alreadyRenderedKeys = ["title", "forms", "description"];

const Action: React.FC<any> = (props) => {
const context = useContext(ediTDorContext);

const [isExpanded, setIsExpanded] = useState(false);

const addFormDialog = React.useRef();
const addFormDialog = React.useRef<any>();
const handleOpenAddFormDialog = () => {
addFormDialog.current.openModal();
addFormDialog.current?.openModal();
};

if (
Expand All @@ -54,35 +54,83 @@ const Action: React.FC<any> = (props) => {
props.action,
alreadyRenderedKeys
);
const attributes = Object.keys(attributeListObject).map((x) => {
return (
<li key={x}>
{x} : {JSON.stringify(attributeListObject[x])}
</li>
);
});

const attributes = Object.keys(attributeListObject).map((x) => (
<li key={x}>
{x} : {JSON.stringify(attributeListObject[x])}
</li>
));

const handleDeleteAction = () => {
context.removeOneOfAKindReducer("actions", props.actionName);
};


const handleCopyAction = () => {
try {
const { updatedTD, newName } = copyAffordance({
parsedTD: context.parsedTD,
section: "actions",
originalName: props.actionName,
affordance: action,
});

context.updateOfflineTD(JSON.stringify(updatedTD, null, 2));

setIsExpanded(true);

setTimeout(() => {
document
.getElementById(`action-${newName}`)
?.scrollIntoView({ behavior: "smooth", block: "center" });
}, 100);
} catch (e) {
console.error(e);
}
};

return (
<details
id={`action-${props.actionName}`}
className="mb-1"
open={isExpanded}
onToggle={() => setIsExpanded(!isExpanded)}
>
<summary
className={`flex cursor-pointer items-center rounded-t-lg pl-2 text-xl font-bold text-white ${isExpanded ? "bg-gray-500" : ""}`}
className={`flex cursor-pointer items-center rounded-t-lg pl-2 text-xl font-bold text-white ${
isExpanded ? "bg-gray-500" : ""
}`}
>
<h3 className="flex-grow px-2">{action.title ?? props.actionName}</h3>
<h3 className="flex-grow px-2">
{action.title ?? props.actionName}
</h3>

{isExpanded && (
<button
className="flex h-10 w-10 items-center justify-center self-stretch rounded-bl-md rounded-tr-md bg-gray-400 text-base"
onClick={handleDeleteAction}
>
<Trash2 size={16} color="white" />
</button>
<>
<button
className="flex h-10 w-10 items-center justify-center self-stretch bg-gray-400 text-base"
title="Copy action"
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
handleCopyAction();
}}
>
<Copy size={16} color="white" />
</button>

<button
className="flex h-10 w-10 items-center justify-center self-stretch rounded-bl-md rounded-tr-md bg-gray-400 text-base"
title="Delete action"
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
handleDeleteAction();
}}
>
<Trash2 size={16} color="white" />
</button>
</>
)}
</summary>

Expand All @@ -92,7 +140,10 @@ const Action: React.FC<any> = (props) => {
{action.description}
</div>
)}
<ul className="list-disc pl-6 text-base text-gray-300">{attributes}</ul>

<ul className="list-disc pl-6 text-base text-gray-300">
{attributes}
</ul>

<div className="flex items-center justify-start pb-2 pt-2">
<InfoIconWrapper
Expand All @@ -105,19 +156,21 @@ const Action: React.FC<any> = (props) => {
</div>

<AddFormElement onClick={handleOpenAddFormDialog} />

<AddFormDialog
type={"action"}
type="action"
interaction={action}
interactionName={props.actionName}
ref={addFormDialog}
/>

{forms.map((form, i) => (
<Form
key={`${i}-${form.href}`}
form={form}
propName={props.actionName}
interactionType={"action"}
></Form>
interactionType="action"
/>
))}
</div>
</details>
Expand Down
102 changes: 78 additions & 24 deletions src/components/TDViewer/components/Event.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,8 @@
*
* SPDX-License-Identifier: EPL-2.0 OR W3C-20150513
********************************************************************************/
import React, { useContext, useState } from "react";
import { Trash2 } from "react-feather";
import React, { useContext, useState, useRef } from "react";
import { Trash2, Copy } from "react-feather";
import ediTDorContext from "../../../context/ediTDorContext";
import {
buildAttributeListObject,
Expand All @@ -22,17 +22,17 @@ import InfoIconWrapper from "../../base/InfoIconWrapper";
import { getFormsTooltipContent } from "../../../utils/TooltipMapper";
import Form from "./Form";
import AddFormElement from "../base/AddFormElement";
import { copyAffordance } from "../../../utils/copyAffordance";

const alreadyRenderedKeys = ["title", "forms", "description"];

const Event: React.FC<any> = (props) => {
const context = useContext(ediTDorContext);

const [isExpanded, setIsExpanded] = useState(false);

const addFormDialog = React.useRef();
const addFormDialog = useRef<{ openModal: () => void }>(null);
const handleOpenAddFormDialog = () => {
addFormDialog.current.openModal();
addFormDialog.current?.openModal();
};

if (
Expand All @@ -48,40 +48,90 @@ const Event: React.FC<any> = (props) => {

const event = props.event;
const forms = separateForms(props.event.forms);

const attributeListObject = buildAttributeListObject(
{ name: props.eventName },
props.event,
alreadyRenderedKeys
);
const attributes = Object.keys(attributeListObject).map((x) => {
return (
<li key={x}>
{x} : {JSON.stringify(attributeListObject[x])}
</li>
);
});

const attributes = Object.keys(attributeListObject).map((x) => (
<li key={x}>
{x} : {JSON.stringify(attributeListObject[x])}
</li>
));

const handleDeleteEventClicked = () => {
context.removeOneOfAKindReducer("events", props.eventName);
};

const handleCopyEvent = () => {
try {
const { updatedTD, newName } = copyAffordance({
parsedTD: context.parsedTD,
section: "events",
originalName: props.eventName,
affordance: event,
});

context.updateOfflineTD(JSON.stringify(updatedTD, null, 2));

setIsExpanded(true);

setTimeout(() => {
document
.getElementById(`event-${newName}`)
?.scrollIntoView({ behavior: "smooth", block: "center" });
}, 100);
} catch (e) {
console.error(e);
}
};

return (
<details
id={`event-${props.eventName}`}
className="mb-1"
open={isExpanded}
onToggle={() => setIsExpanded(!isExpanded)}
>
<summary
className={`flex cursor-pointer items-center rounded-t-lg pl-2 text-xl font-bold text-white ${isExpanded ? "bg-gray-500" : ""}`}
className={`flex cursor-pointer items-center rounded-t-lg pl-2 text-xl font-bold text-white ${
isExpanded ? "bg-gray-500" : ""
}`}
>
<div className="flex-grow px-2">{event.title ?? props.eventName}</div>
<div className="flex-grow px-2">
{event.title ?? props.eventName}
</div>

{isExpanded && (
<button
className="flex h-10 w-10 items-center justify-center self-stretch rounded-bl-md rounded-tr-md bg-gray-400 text-base"
onClick={handleDeleteEventClicked}
>
<Trash2 size={16} color="white" />
</button>
<>
{/* COPY BUTTON */}
<button
className="flex h-10 w-10 items-center justify-center self-stretch bg-gray-400 text-base"
title="Copy event"
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
handleCopyEvent();
}}
>
<Copy size={16} color="white" />
</button>

{/* DELETE BUTTON */}
<button
className="flex h-10 w-10 items-center justify-center self-stretch rounded-bl-md rounded-tr-md bg-gray-400 text-base"
title="Delete event"
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
handleDeleteEventClicked();
}}
>
<Trash2 size={16} color="white" />
</button>
</>
)}
</summary>

Expand All @@ -91,7 +141,10 @@ const Event: React.FC<any> = (props) => {
{event.description}
</div>
)}
<ul className="list-disc pl-6 text-base text-gray-300">{attributes}</ul>

<ul className="list-disc pl-6 text-base text-gray-300">
{attributes}
</ul>

<div className="flex items-center justify-start pb-2 pt-2">
<InfoIconWrapper
Expand All @@ -105,18 +158,19 @@ const Event: React.FC<any> = (props) => {

<AddFormElement onClick={handleOpenAddFormDialog} />
<AddFormDialog
type={"event"}
type="event"
interaction={event}
interactionName={props.eventName}
ref={addFormDialog}
/>

{forms.map((form, i) => (
<Form
key={`${i}-${form.href}`}
form={form}
propName={props.eventName}
interactionType={"event"}
></Form>
interactionType="event"
/>
))}
</div>
</details>
Expand Down
Loading
Loading