Elgato_dark/ToolJet
1
0
Fork 0
mirror of https://github.com/ToolJet/ToolJet synced 2026-05-24 01:18:23 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Add action that closes a specified modal (#584)

Browse source 
* Add action that closes a specified modal

* Use EventManager instead of EventSelector for close-modal action

* Return auto-resolving promises from modal show/close action in appUtils.js
This commit is contained in:
Sherfin Shamsudeen 2021-08-25 13:23:52 +05:30 committed by GitHub
parent 8622ab5f8c
commit a9b67245fb
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 70 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
frontend/src/Editor/ActionTypes.js
View file

@ -34,6 +34,13 @@ export const ActionTypes = [
{ name: 'modal', type: 'text', default: '' }
]
},
{
name: 'Close Modal',
id: 'close-modal',
options: [
{ name: 'modal', type: 'text', default: '' }
]
},
{
name: 'Copy to clipboard',
id: 'copy-to-clipboard',

20
frontend/src/Editor/Inspector/EventManager.jsx
View file

@ -188,6 +188,26 @@ export const EventManager = ({
</div>
)}
{event.actionId === 'close-modal' && (
<div className="row">
<div className="col-3 p-2">
Modal
</div>
<div className="col-9">
<SelectSearch
options={getModalOptions()}
value={event.model}
search={true}
onChange={(value) => {
handlerChanged(index, 'modal', value);
}}
filterOptions={fuzzySearch}
placeholder="Select.."
/>
</div>
</div>
)}
{event.actionId === 'copy-to-clipboard' && (
<div className="p-1">
<label className="form-label mt-1">Text</label>

16
frontend/src/Editor/Inspector/EventSelector.jsx
View file

@ -156,6 +156,22 @@ export const EventSelector = ({
</div>
)}
{definition.actionId === 'close-modal' && (
<div className="p-1">
<label className="form-label mt-1">Modal</label>
<SelectSearch
options={getModalOptions()}
value={definition.options.model}
search={true}
onChange={(value) => {
eventOptionUpdated(param, 'modal', value, extraData);
}}
filterOptions={fuzzySearch}
placeholder="Select.."
/>
</div>
)}
{definition.actionId === 'copy-to-clipboard' && (
<div className="p-1">
<label className="form-label mt-1">Text</label>

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

@ -94,6 +94,29 @@ async function copyToClipboard(text) {
}
};
function showModal(_ref, modalId, show) {
const modalMeta = _ref.state.appDefinition.components[modalId];
const newState = {
currentState: {
..._ref.state.currentState,
components: {
..._ref.state.currentState.components,
[modalMeta.component.name]: {
..._ref.state.currentState.components[modalMeta.component.name],
show: show
}
}
}
}
_ref.setState(newState)
return new Promise(function (resolve, reject) {
resolve();
})
}
function executeAction(_ref, event, mode) {
if (event) {
if (event.actionId === 'show-alert') {
@ -129,34 +152,11 @@ function executeAction(_ref, event, mode) {
})
}
if (event.actionId === 'run-query') {
const { queryId, queryName } = event;
return runQuery(_ref, queryId, queryName);
}
if (event.actionId === 'show-modal')
return showModal(_ref, event.modal, true)
if (event.actionId === 'show-modal') {
const modalId = event.modal;
const modalMeta = _ref.state.appDefinition.components[modalId];
const newState = {
currentState: {
..._ref.state.currentState,
components: {
..._ref.state.currentState.components,
[modalMeta.component.name]: {
..._ref.state.currentState.components[modalMeta.component.name],
show: true
}
}
}
}
_ref.setState(newState)
return new Promise(function (resolve, reject) {
resolve();
})
}
if (event.actionId === 'close-modal')
return showModal(_ref, event.modal, false)
if (event.actionId === 'copy-to-clipboard') {
const contentToCopy = resolveReferences(event.contentToCopy, _ref.state.currentState);