From c4f179330b2d9fb10feb57e79e8ea04f506e69e3 Mon Sep 17 00:00:00 2001 From: Sherfin Shamsudeen Date: Thu, 17 Feb 2022 13:10:20 +0530 Subject: [PATCH] Feature/make list item available for actions of list children (#2272) --- frontend/src/Editor/Box.jsx | 12 +++++-- frontend/src/_helpers/appUtils.js | 57 ++++++++++++++++++------------- 2 files changed, 43 insertions(+), 26 deletions(-) diff --git a/frontend/src/Editor/Box.jsx b/frontend/src/Editor/Box.jsx index b1725e8713..9401196a7e 100644 --- a/frontend/src/Editor/Box.jsx +++ b/frontend/src/Editor/Box.jsx @@ -38,7 +38,7 @@ import { renderTooltip } from '../_helpers/appUtils'; import OverlayTrigger from 'react-bootstrap/OverlayTrigger'; import '@/_styles/custom.scss'; import { resolveProperties, resolveStyles } from './component-properties-resolution'; -import { validateWidget } from '@/_helpers/utils'; +import { validateWidget, resolveReferences } from '@/_helpers/utils'; import ErrorBoundary from './ErrorBoundary'; const AllComponents = { @@ -123,10 +123,11 @@ export const Box = function Box({ resolvedStyles.visibility = resolvedStyles.visibility !== false ? true : false; let exposedVariables = {}; + let isListView = false; if (component.parent) { const parentComponent = allComponents[component.parent]; - const isListView = parentComponent?.component?.component === 'Listview'; + isListView = parentComponent?.component?.component === 'Listview'; if (isListView) { const itemsAtIndex = currentState?.components[parentId]?.data[extraProps.listviewItemIndex]; @@ -142,7 +143,12 @@ export const Box = function Box({ if (mode === 'edit' && eventName === 'onClick') { onComponentClick(id, component); } - onEvent(eventName, { ...options, component }); + const listItem = isListView + ? resolveReferences(allComponents[component.parent].component.definition.properties.data.value, currentState)[ + extraProps.listviewItemIndex + ] ?? {} + : {}; + onEvent(eventName, { ...options, customVariables: { listItem }, component }); }; const validate = (value) => validateWidget({ diff --git a/frontend/src/_helpers/appUtils.js b/frontend/src/_helpers/appUtils.js index c107f122ad..de694a3ebc 100644 --- a/frontend/src/_helpers/appUtils.js +++ b/frontend/src/_helpers/appUtils.js @@ -87,12 +87,12 @@ export function runTransformation(_ref, rawData, transformation, query) { return result; } -export async function executeActionsForEventId(_ref, eventId, component, mode) { +export async function executeActionsForEventId(_ref, eventId, component, mode, customVariables) { const events = component.definition.events || []; const filteredEvents = events.filter((event) => event.eventId === eventId); for (const event of filteredEvents) { - await executeAction(_ref, event, mode); // skipcq: JS-0032 + await executeAction(_ref, event, mode, customVariables); // skipcq: JS-0032 } } @@ -149,11 +149,12 @@ function showModal(_ref, modal, show) { return Promise.resolve(); } -function executeAction(_ref, event, mode) { +function executeAction(_ref, event, mode, customVariables) { + console.log('nopski', customVariables); if (event) { switch (event.actionId) { case 'show-alert': { - const message = resolveReferences(event.message, _ref.state.currentState); + const message = resolveReferences(event.message, _ref.state.currentState, undefined, customVariables); switch (event.alertType) { case 'success': case 'error': @@ -177,20 +178,22 @@ function executeAction(_ref, event, mode) { } case 'open-webpage': { - const url = resolveReferences(event.url, _ref.state.currentState); + const url = resolveReferences(event.url, _ref.state.currentState, undefined, customVariables); window.open(url, '_blank'); return Promise.resolve(); } case 'go-to-app': { - const slug = resolveReferences(event.slug, _ref.state.currentState); + const slug = resolveReferences(event.slug, _ref.state.currentState, undefined, customVariables); const queryParams = event.queryParams?.reduce( (result, queryParam) => ({ ...result, ...{ [resolveReferences(queryParam[0], _ref.state.currentState)]: resolveReferences( queryParam[1], - _ref.state.currentState + _ref.state.currentState, + undefined, + customVariables ), }, }), @@ -223,15 +226,20 @@ function executeAction(_ref, event, mode) { return showModal(_ref, event.modal, false); case 'copy-to-clipboard': { - const contentToCopy = resolveReferences(event.contentToCopy, _ref.state.currentState); + const contentToCopy = resolveReferences( + event.contentToCopy, + _ref.state.currentState, + undefined, + customVariables + ); copyToClipboard(contentToCopy); return Promise.resolve(); } case 'set-localstorage-value': { - const key = resolveReferences(event.key, _ref.state.currentState); - const value = resolveReferences(event.value, _ref.state.currentState); + const key = resolveReferences(event.key, _ref.state.currentState, undefined, customVariables); + const value = resolveReferences(event.value, _ref.state.currentState, undefined, customVariables); localStorage.setItem(key, value); return Promise.resolve(); @@ -239,8 +247,9 @@ function executeAction(_ref, event, mode) { case 'generate-file': { // const fileType = event.fileType; - const data = resolveReferences(event.data, _ref.state.currentState) ?? []; - const fileName = resolveReferences(event.fileName, _ref.state.currentState) ?? 'data.txt'; + const data = resolveReferences(event.data, _ref.state.currentState, undefined, customVariables) ?? []; + const fileName = + resolveReferences(event.fileName, _ref.state.currentState, undefined, customVariables) ?? 'data.txt'; const csv = generateCSV(data); generateFile(fileName, csv); @@ -253,8 +262,8 @@ function executeAction(_ref, event, mode) { } case 'set-custom-variable': { - const key = resolveReferences(event.key, _ref.state.currentState); - const value = resolveReferences(event.value, _ref.state.currentState); + const key = resolveReferences(event.key, _ref.state.currentState, undefined, customVariables); + const value = resolveReferences(event.value, _ref.state.currentState, undefined, customVariables); const customVariables = { ..._ref.state.currentState.variables }; customVariables[key] = value; @@ -267,7 +276,7 @@ function executeAction(_ref, event, mode) { } case 'unset-custom-variable': { - const key = resolveReferences(event.key, _ref.state.currentState); + const key = resolveReferences(event.key, _ref.state.currentState, undefined, customVariables); const customVariables = { ..._ref.state.currentState.variables }; delete customVariables[key]; @@ -286,6 +295,8 @@ export async function onEvent(_ref, eventName, options, mode = 'edit') { let _self = _ref; console.log('Event: ', eventName); + const { customVariables } = options; + if (eventName === 'onRowClicked') { const { component, data, rowId } = options; _self.setState( @@ -303,7 +314,7 @@ export async function onEvent(_ref, eventName, options, mode = 'edit') { }, }, () => { - executeActionsForEventId(_ref, 'onRowClicked', component, mode); + executeActionsForEventId(_ref, 'onRowClicked', component, mode, customVariables); } ); } @@ -324,7 +335,7 @@ export async function onEvent(_ref, eventName, options, mode = 'edit') { }, }, () => { - executeActionsForEventId(_ref, 'onCalendarEventSelect', component, mode); + executeActionsForEventId(_ref, 'onCalendarEventSelect', component, mode, customVariables); } ); } @@ -345,7 +356,7 @@ export async function onEvent(_ref, eventName, options, mode = 'edit') { }, }, () => { - executeActionsForEventId(_ref, 'onCalendarSlotSelect', component, mode); + executeActionsForEventId(_ref, 'onCalendarSlotSelect', component, mode, customVariables); } ); } @@ -371,7 +382,7 @@ export async function onEvent(_ref, eventName, options, mode = 'edit') { for (const event of action.events) { if (event.actionId) { // the event param uses a hacky workaround for using same format used by event manager ( multiple handlers ) - await executeAction(_self, { ...event, ...event.options }, mode); + await executeAction(_self, { ...event, ...event.options }, mode, customVariables); } } } else { @@ -402,7 +413,7 @@ export async function onEvent(_ref, eventName, options, mode = 'edit') { for (const event of column.events) { if (event.actionId) { // the event param uses a hacky workaround for using same format used by event manager ( multiple handlers ) - await executeAction(_self, { ...event, ...event.options }, mode); + await executeAction(_self, { ...event, ...event.options }, mode, customVariables); } } } else { @@ -439,17 +450,17 @@ export async function onEvent(_ref, eventName, options, mode = 'edit') { ].includes(eventName) ) { const { component } = options; - executeActionsForEventId(_ref, eventName, component, mode); + executeActionsForEventId(_ref, eventName, component, mode, customVariables); } if (eventName === 'onBulkUpdate') { onComponentOptionChanged(_self, options.component, 'isSavingChanges', true); - await executeActionsForEventId(_self, eventName, options.component, mode); + await executeActionsForEventId(_self, eventName, options.component, mode, customVariables); onComponentOptionChanged(_self, options.component, 'isSavingChanges', false); } if (['onDataQuerySuccess', 'onDataQueryFailure'].includes(eventName)) { - await executeActionsForEventId(_self, eventName, options, mode); + await executeActionsForEventId(_self, eventName, options, mode, customVariables); } }