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

Feature: Show component variables on sidebar

Browse source
This commit is contained in:
navaneeth 2021-04-10 12:53:51 +05:30
parent 32a22fb556
commit 65aea71e37
2 changed files with 80 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
frontend/src/Editor/Components/components.js
View file

@ -20,6 +20,7 @@ export const componentTypes = [
backgroundColor: { type: 'color'},
textColor: { type: 'color'}
},
exposedVariables: {},
definition: {
properties: {
'text': { value: 'Button' },
@ -61,6 +62,9 @@ export const componentTypes = [
styles: {
textColor: { type: 'color'}
},
exposedVariables: {
'selectedRow': {},
},
definition: {
properties: {
'title': { value: 'Table' },
@ -102,6 +106,7 @@ export const componentTypes = [
styles: {
},
exposedVariables: {},
definition: {
properties: {
'placeholder': { value: 'Placeholder text' }
@ -132,6 +137,7 @@ export const componentTypes = [
styles: {
},
exposedVariables: {},
definition: {
properties: {
'placeholder': { value: 'Placeholder text' }
@ -163,6 +169,7 @@ export const componentTypes = [
styles: {
textColor: { type: 'color'}
},
exposedVariables: {},
definition: {
properties: {
'text': { value: 'Text goes here !' },
@ -195,6 +202,7 @@ export const componentTypes = [
styles: {
},
exposedVariables: {},
definition: {
properties: {
'source': { value: 'https://www.svgrepo.com/show/34217/image.svg' },
@ -224,6 +232,7 @@ export const componentTypes = [
styles: {
},
exposedVariables: {},
definition: {
properties: {
'label': { value: 'Select' },
@ -255,6 +264,7 @@ export const componentTypes = [
styles: {
},
exposedVariables: {},
definition: {
properties: {
'label': { value: 'https://www.svgrepo.com/show/46775/drop-down-list.svg' },

87
frontend/src/Editor/Editor.jsx
View file

@ -177,6 +177,33 @@ class Editor extends React.Component {
})
}
renderComponentVariables = (id, component) => {
const componentType = component.component.component;
const componentMeta = componentTypes.find(comp => componentType === comp.component);
const exposedVariables = Object.keys(componentMeta.exposedVariables);
return (
<div className="mb-2">
table1 <small className="text-muted"> {exposedVariables.length} keys</small>
<div className="p-2 bg-light w-100">
{exposedVariables.map((variable) =>
<div className="row">
<div className="col">
<small role="button col-auto">{variable}</small>
</div>
<div className="col-auto">
<CopyToClipboard className="query-copy-button" text={`{{components.${component.component.name}.${variable}}}`}
onCopy={() => toast.success('Reference copied to clipboard', { hideProgressBar: true, position: "bottom-center", })}>
<img src="https://www.svgrepo.com/show/86790/copy.svg" width="8" height="8" role="button"></img>
</CopyToClipboard>
</div>
</div>
)}
</div>
</div>
)
}
render() {
const {
currentSidebarTab,
@ -365,27 +392,53 @@ class Editor extends React.Component {
</div>
</div>
<div className="left-sidebar">
<div className="accordion" id="accordion-example">
<div className="accordion-item">
</div>
<div className="accordion-item">
<h2 className="accordion-header" id="heading-2">
<button className="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-2" aria-expanded="false">
Globals
</button>
</h2>
<div id="collapse-2" className="accordion" data-bs-parent="#accordion-example">
<div className="accordion-body pt-0">
<ReactJson
collapsed={true}
enableClipboard={false}
name={null}
src={global_context} />
</div>
<div className="variables-container p-3">
<div className="col-md-12">
<h5 className="text-muted">Globals</h5>
<div className="mb-2">
currentUser <small className="text-muted"> 2 keys</small>
<div className="p-2 bg-light w-100">
<div className="row">
<div className="col">
<small role="button col-auto">name</small>
</div>
<div className="col-auto">
<CopyToClipboard className="query-copy-button" text={`{{globals.current_user.name}}`}
onCopy={() => toast.success('Reference copied to clipboard', { hideProgressBar: true, position: "bottom-center", })}>
<img src="https://www.svgrepo.com/show/86790/copy.svg" width="8" height="8" role="button"></img>
</CopyToClipboard>
</div>
</div>
<div className="row">
<div className="col">
<small role="button col-auto">email</small>
</div>
<div className="col-auto">
<CopyToClipboard className="query-copy-button" text={`{{globals.current_user.email}}`}
onCopy={() => toast.success('Reference copied to clipboard', { hideProgressBar: true, position: "bottom-center", })}>
<img src="https://www.svgrepo.com/show/86790/copy.svg" width="8" height="8" role="button"></img>
</CopyToClipboard>
</div>
</div>
</div>
</div>
</div>
<hr/>
<div className="col-md-9">
<h5 className="text-muted">Components</h5>
</div>
{appDefinition.components &&
<>
{Object.keys(appDefinition.components).map((key =>
this.renderComponentVariables(key, appDefinition.components[key])
))}
</>
}
</div>
<div className="datasources-container w-100">
<div className="row m-2 datasources-header ">
<div className="col-md-9">