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

v2 api for global settings

Browse source
This commit is contained in:
arpitnath 2023-08-15 03:36:40 +05:30
parent 461863d0a2
commit c1a42e7012
6 changed files with 74 additions and 74 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

49
frontend/src/Editor/EditorFunc.jsx
View file

@ -78,31 +78,6 @@ function setWindowTitle(name) {
const decimalToHex = (alpha) => (alpha === 0 ? '00' : Math.round(255 * alpha).toString(16));
const defaultDefinition = (darkMode) => {
const defaultPageId = uuid();
return {
showViewerNavigation: true,
homePageId: defaultPageId,
pages: {
[defaultPageId]: {
components: {},
handle: 'home',
name: 'Home',
index: 0,
},
},
globalSettings: {
hideHeader: false,
appInMaintenance: false,
canvasMaxWidth: 1292,
canvasMaxWidthType: 'px',
canvasMaxHeight: 2400,
canvasBackgroundColor: darkMode ? '#2f3c4c' : '#edeff5',
backgroundFxQuery: '',
},
};
};
const EditorComponent = (props) => {
const { socket } = createWebsocketConnection(props?.params?.id);
const mounted = useMounted();
@ -569,7 +544,6 @@ const EditorComponent = (props) => {
};
const computeCanvasBackgroundColor = () => {
//!Global settings needs to be out
const { canvasBackgroundColor } = appDefinition?.globalSettings ?? '#edeff5';
if (['#2f3c4c', '#edeff5'].includes(canvasBackgroundColor)) {
return props.darkMode ? '#2f3c4c' : '#edeff5';
@ -604,19 +578,20 @@ const EditorComponent = (props) => {
const handleEditorMarginLeftChange = (value) => setEditorMarginLeft(value);
const globalSettingsChanged = (key, value) => {
const globalSettingsChanged = (globalOptions) => {
const copyOfAppDefinition = JSON.parse(JSON.stringify(appDefinition));
const newAppDefinition = _.cloneDeep(copyOfAppDefinition);
if (value?.[1]?.a == undefined) newAppDefinition.globalSettings[key] = value;
else {
const hexCode = `${value?.[0]}${decimalToHex(value?.[1]?.a)}`;
newAppDefinition.globalSettings[key] = hexCode;
for (const [key, value] of Object.entries(globalOptions)) {
if (value?.[1]?.a == undefined) newAppDefinition.globalSettings[key] = value;
else {
const hexCode = `${value?.[0]}${decimalToHex(value?.[1]?.a)}`;
newAppDefinition.globalSettings[key] = hexCode;
}
}
updateEditorState({
isSaving: true,
// appDefinition,
});
appDefinitionChanged(newAppDefinition, {
@ -776,11 +751,11 @@ const EditorComponent = (props) => {
// !--------
const setAppDefinitionFromVersion = (version, shouldWeEditVersion = true) => {
if (version?.id !== props.editingVersion?.id) {
appDefinitionChanged(defaults(version.definition, defaultDefinition(props.darkMode)), {
skipAutoSave: true,
skipYmapUpdate: true,
versionChanged: true,
});
// appDefinitionChanged(defaults(version.definition, defaultDefinition(props.darkMode)), {
// skipAutoSave: true,
// skipYmapUpdate: true,
// versionChanged: true,
// });
if (version?.id === currentVersionId) {
updateEditorState({
canUndo: false,

59
frontend/src/Editor/Header/GlobalSettings.jsx
View file

@ -49,12 +49,6 @@ export const GlobalSettings = ({
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [currentState.components]);
React.useEffect(() => {
backgroundFxQuery &&
globalSettingsChanged('canvasBackgroundColor', resolveReferences(backgroundFxQuery, realState));
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [JSON.stringify(resolveReferences(backgroundFxQuery, realState))]);
const popoverContent = (
<div id="global-settings-popover" className={cx({ 'theme-dark': darkMode, disabled: isVersionReleased })}>
<div bsPrefix="global-settings-popover">
@ -73,7 +67,7 @@ export const GlobalSettings = ({
className="form-check-input"
type="checkbox"
checked={hideHeader}
onChange={(e) => globalSettingsChanged('hideHeader', e.target.checked)}
onChange={(e) => globalSettingsChanged({ hideHeader: e.target.checked })}
/>
</div>
</div>
@ -104,7 +98,7 @@ export const GlobalSettings = ({
placeholder={'0'}
onChange={(e) => {
const width = e.target.value;
if (!Number.isNaN(width) && width >= 0) globalSettingsChanged('canvasMaxWidth', width);
if (!Number.isNaN(width) && width >= 0) globalSettingsChanged({ canvasMaxWidth: width });
}}
value={canvasMaxWidth}
/>
@ -114,12 +108,17 @@ export const GlobalSettings = ({
aria-label="Select canvas width type"
onChange={(event) => {
const newCanvasMaxWidthType = event.currentTarget.value;
globalSettingsChanged('canvasMaxWidthType', newCanvasMaxWidthType);
const options = {
canvasMaxWidthType: newCanvasMaxWidthType,
};
if (newCanvasMaxWidthType === '%') {
globalSettingsChanged('canvasMaxWidth', 100);
options.canvasMaxWidth = 100;
} else if (newCanvasMaxWidthType === 'px') {
globalSettingsChanged('canvasMaxWidth', 1292);
options.canvasMaxWidth = 1292;
}
globalSettingsChanged(options);
}}
>
<option value="%" selected={canvasMaxWidthType === '%'}>
@ -132,27 +131,7 @@ export const GlobalSettings = ({
</div>
</div>
</div>
{/* <div className="d-flex mb-3">
<span className="w-full m-auto" data-cy={`label-max-canvas-height`}>
{t('leftSidebar.Settings.maxHeightOfCanvas', 'Max height of canvas')}
</span>
<div className="position-relative">
<div className="input-with-icon">
<input
data-cy="maximum-canvas-height-input-field"
type="text"
className={`form-control form-control-sm maximum-canvas-height-input-field`}
placeholder={'0'}
onChange={(e) => {
const height = e.target.value;
if (!Number.isNaN(height) && height <= 2400) globalSettingsChanged('canvasMaxHeight', height);
}}
value={canvasMaxHeight}
/>
<span className="input-group-text">px</span>
</div>
</div>
</div> */}
<div className="d-flex align-items-center">
<span className="w-full" data-cy={`label-bg-canvas`}>
{t('leftSidebar.Settings.backgroundColorOfCanvas', 'Background color of canvas')}
@ -167,8 +146,12 @@ export const GlobalSettings = ({
onFocus={() => setShowPicker(true)}
color={canvasBackgroundColor}
onChangeComplete={(color) => {
globalSettingsChanged('canvasBackgroundColor', [color.hex, color.rgb]);
globalSettingsChanged('backgroundFxQuery', color.hex);
const options = {
canvasBackgroundColor: [color.hex, color.rgb],
backgroundFxQuery: color.hex,
};
globalSettingsChanged(options);
}}
/>
</div>
@ -208,8 +191,12 @@ export const GlobalSettings = ({
className="canvas-hinter-wrap"
lineNumbers={false}
onChange={(color) => {
globalSettingsChanged('canvasBackgroundColor', resolveReferences(color, realState));
globalSettingsChanged('backgroundFxQuery', color);
const options = {
canvasBackgroundColor: resolveReferences(color, realState),
backgroundFxQuery: color,
};
globalSettingsChanged(options);
}}
/>
)}

6
frontend/src/_services/appVersion.service.js
View file

@ -68,7 +68,11 @@ function autoSaveApp(appId, versionId, diff, type, pageId, operation, isUserSwit
let body = {};
if (!type || (type === 'pages' && operation === 'create') || operation === 'delete') {
if (type === 'pages' && (operation === 'create' || operation === 'delete')) {
body = {
...diff,
};
} else if (!type || type === 'global_settings') {
body = {
...diff,
};

7
frontend/src/_stores/utils.js
View file

@ -53,6 +53,7 @@ const updateFor = (appDiff, currentPageId, opts) => {
const componentUpdates = ['componentAdded', 'componentDefinitionChanged', 'componentDeleted', 'containerChanges'];
const pageUpdates = ['pageDefinitionChanged', 'pageSortingChanged', 'deletePageRequest', 'addNewPage'];
const appUpdates = ['homePageChanged'];
const globalSettings = ['globalSettings'];
const options = _.keys(opts);
@ -66,6 +67,12 @@ const updateFor = (appDiff, currentPageId, opts) => {
type: null,
operation: 'update',
};
} else if (_.intersection(options, globalSettings).length > 0) {
return {
updateDiff: appDiff,
type: 'global_settings',
operation: 'update',
};
}
};

23
server/src/controllers/apps.controller.v2.ts
View file

@ -116,6 +116,29 @@ export class AppsControllerV2 {
return await this.appsService.updateAppVersion(version, appVersionUpdateDto);
}
@UseGuards(JwtAuthGuard)
@UseInterceptors(ValidAppInterceptor)
@Put(':id/versions/:versionId/global_settings')
async updateGlobalSettings(
@User() user,
@Param('id') id,
@Param('versionId') versionId,
@Body() appVersionUpdateDto: AppVersionUpdateDto
) {
const version = await this.appsService.findVersion(versionId);
const app = version.app;
if (app.id !== id) {
throw new BadRequestException();
}
const ability = await this.appsAbilityFactory.appsActions(user, id);
if (!ability.can('updateVersions', app)) {
throw new ForbiddenException('You do not have permissions to perform this action');
}
return await this.appsService.updateAppVersion(version, appVersionUpdateDto);
}
//components api
@UseGuards(JwtAuthGuard)

4
server/src/services/apps.service.ts
View file

@ -675,6 +675,10 @@ export class AppsService {
editableParams['homePageId'] = body.homePageId;
}
if (body?.globalSettings) {
editableParams['globalSettings'] = body.globalSettings;
}
return await this.appVersionsRepository.update(version.id, editableParams);
}