Elgato_dark/ToolJet
1
0
Fork 0
mirror of https://github.com/ToolJet/ToolJet synced 2026-05-06 06:48:21 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

Feature/make list item available for actions of list children (#2272)

Browse source
This commit is contained in:
Sherfin Shamsudeen 2022-02-17 13:10:20 +05:30 committed by GitHub
parent 8a15765c38
commit c4f179330b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 43 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
frontend/src/Editor/Box.jsx
View file

@ -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({

57
frontend/src/_helpers/appUtils.js
View file

@ -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);
}
}