Skip to content

Commit 203ea02

Browse files
raheeliftikhar5raheeliftikhar5
committed
fix theme not saving
1 parent 9261b94 commit 203ea02

File tree

4 files changed

+95
-78
lines changed

4 files changed

+95
-78
lines changed

‎client/packages/lowcoder/src/constants/routesURL.ts

+1
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ export const ORGANIZATION_SETTING = "/setting/organization";
1515
export const THEME_SETTING = "/setting/theme";
1616
export const PLUGINS_SETTING = "/setting/plugins";
1717
export const THEME_DETAIL = "/setting/theme/detail";
18+
export const THEME_DETAIL_URL = `${THEME_DETAIL}/:themeId`;
1819

1920
export const OAUTH_PROVIDER_SETTING = "/setting/oauth-provider";
2021
export const OAUTH_PROVIDER_DETAIL = "/setting/oauth-provider/detail";

‎client/packages/lowcoder/src/pages/setting/theme/detail/index.tsx

+76-54
Original file line numberDiff line numberDiff line change
@@ -87,50 +87,55 @@ type ThemeDetailPageProps = {
8787
themeList?: ThemeType[];
8888
orgId: string;
8989
location: Location & { state: LocationProp };
90+
match: any;
9091
};
9192

9293
type ThemeDetailPageState = {
93-
name: string;
94-
theme: ThemeDetail;
94+
name?: string;
95+
theme?: ThemeDetail;
9596
canLeave: boolean;
9697
compDsl?: JSONObject;
9798
};
9899

99100
class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailPageState> {
100-
themeDefault: ThemeDetail;
101+
themeDefault?: ThemeDetail;
101102
readonly id: string;
102-
readonly type: string;
103+
// readonly type: string;
103104
readonly inputRef: React.RefObject<InputRef>;
104105
footerRef = React.createRef<HTMLDivElement>();
105106

106107
constructor(props: ThemeDetailPageProps) {
107108
super(props);
108-
const { name, id, theme, type } = props.location.state || {};
109-
if (!name || !id || !theme || !type) {
110-
history.replace(BASE_URL);
111-
window.location.reload();
112-
}
113-
114-
if (theme.chart) {
115-
this.themeDefault = theme;
116-
} else {
117-
this.themeDefault = {
118-
...theme,
119-
chart: undefined,
120-
};
121-
}
109+
this.id = this.props.match.params.themeId;
122110

123-
this.id = id;
124-
this.type = type;
125111
this.state = {
126-
theme,
127-
name,
128112
canLeave: false,
129113
compDsl: undefined,
130114
};
131115
this.inputRef = React.createRef();
132116
}
133117

118+
findCurrentTheme() {
119+
const themeDetail = this.props.themeList?.find(item => item.id === this.id);
120+
this.setState({
121+
name: themeDetail?.name,
122+
theme: themeDetail?.theme,
123+
});
124+
this.themeDefault = themeDetail?.theme;
125+
}
126+
127+
componentDidMount() {
128+
if(this.props.themeList?.length) {
129+
this.findCurrentTheme();
130+
}
131+
}
132+
133+
componentDidUpdate(prevProps: ThemeDetailPageProps, prevState: ThemeDetailPageState) {
134+
if (prevProps.themeList?.length !== this.props.themeList?.length) {
135+
this.findCurrentTheme();
136+
}
137+
}
138+
134139
handleReset() {
135140
this.setState({ theme: this.themeDefault });
136141
}
@@ -164,6 +169,8 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
164169
}
165170

166171
configChange(params: configChangeParams) {
172+
if (!this.state.theme) return;
173+
167174
this.setState({
168175
theme: {
169176
...this.state.theme,
@@ -194,25 +201,25 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
194201
settingsKey: 'primary',
195202
name: trans('themeDetail.primary'),
196203
desc: trans('themeDetail.primaryDesc'),
197-
color: this.state.theme.primary,
204+
color: this.state.theme?.primary,
198205
},
199206
{
200207
settingsKey: 'canvas',
201208
name: trans('themeDetail.canvas'),
202209
desc: trans('themeDetail.canvasDesc'),
203-
color: this.state.theme.canvas,
210+
color: this.state.theme?.canvas,
204211
},
205212
{
206213
settingsKey: 'primarySurface',
207214
name: trans('themeDetail.primarySurface'),
208215
desc: trans('themeDetail.primarySurfaceDesc'),
209-
color: this.state.theme.primarySurface,
216+
color: this.state.theme?.primarySurface,
210217
},
211218
{
212219
settingsKey: 'border',
213220
name: trans('themeDetail.borderColor'),
214221
desc: trans('themeDetail.borderColorDesc'),
215-
color: this.state.theme.border || this.state.theme.borderColor,
222+
color: this.state.theme?.border || this.state.theme?.borderColor,
216223
}
217224
]
218225
},
@@ -224,13 +231,13 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
224231
settingsKey: 'textLight',
225232
name: trans('themeDetail.textLight'),
226233
desc: trans('themeDetail.textLightDesc'),
227-
color: this.state.theme.textLight,
234+
color: this.state.theme?.textLight,
228235
},
229236
{
230237
settingsKey: 'textDark',
231238
name: trans('themeDetail.textDark'),
232239
desc: trans('themeDetail.textDarkDesc'),
233-
color: this.state.theme.textDark,
240+
color: this.state.theme?.textDark,
234241
}
235242
]
236243
}
@@ -245,7 +252,7 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
245252
name: trans('themeDetail.fontFamily'),
246253
desc: trans('themeDetail.fontFamilyDesc'),
247254
type: "fontFamily",
248-
value: this.state.theme.fontFamily,
255+
value: this.state.theme?.fontFamily,
249256
}
250257
]
251258
},
@@ -260,21 +267,21 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
260267
name: trans('themeDetail.borderRadius'),
261268
desc: trans('themeDetail.borderRadiusDesc'),
262269
type: "radius",
263-
value: this.state.theme.radius || this.state.theme.borderRadius,
270+
value: this.state.theme?.radius || this.state.theme?.borderRadius,
264271
},
265272
{
266273
settingsKey: 'borderWidth',
267274
name: trans('themeDetail.borderWidth'),
268275
desc: trans('themeDetail.borderWidthDesc'),
269276
type: "borderWidth",
270-
value: this.state.theme.borderWidth,
277+
value: this.state.theme?.borderWidth,
271278
},
272279
{
273280
settingsKey: 'borderStyle',
274281
name: trans('themeDetail.borderStyle'),
275282
desc: trans('themeDetail.borderStyleDesc'),
276283
type: "borderStyle",
277-
value: this.state.theme.borderStyle,
284+
value: this.state.theme?.borderStyle,
278285
}
279286
]
280287
},
@@ -286,26 +293,39 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
286293
name: trans('themeDetail.margin'),
287294
desc: trans('themeDetail.marginDesc'),
288295
type: "margin",
289-
value: this.state.theme.margin,
296+
value: this.state.theme?.margin,
290297
},
291298
{
292299
settingsKey: 'padding',
293300
name: trans('themeDetail.padding'),
294301
desc: trans('themeDetail.paddingDesc'),
295302
type: "padding",
296-
value: this.state.theme.padding,
303+
value: this.state.theme?.padding,
297304
},
298305
{
299306
settingsKey: 'gridColumns',
300307
name: trans('themeDetail.gridColumns'),
301308
desc: trans('themeDetail.gridColumnsDesc'),
302309
type: "gridColumns",
303-
value: this.state.theme.gridColumns,
310+
value: this.state.theme?.gridColumns,
304311
}
305312
]
306313
},
307314
];
308315

316+
if (!this.themeDefault) {
317+
return (
318+
<Flex align="center" justify="center" vertical style={{
319+
height: '300px',
320+
width: '400px',
321+
margin: '0 auto',
322+
}}>
323+
<h4>Oops! Theme not found.</h4>
324+
<button onClick={() => history.push(THEME_SETTING)} style={{background: '#4965f2',border: '1px solid #4965f2', color: '#ffffff',borderRadius:'6px'}}>Back to Themes</button>
325+
</Flex>
326+
)
327+
}
328+
309329
return (
310330
<>
311331
<Prompt
@@ -363,7 +383,7 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
363383
</List.Item>
364384
)}
365385
{item.items.map((colorItem) => (
366-
<Tooltip title={colorItem.desc} placement="right">
386+
<Tooltip key={colorItem.settingsKey} title={colorItem.desc} placement="right">
367387
<List.Item key={colorItem.settingsKey}>
368388
<ThemeSettingsSelector
369389
themeSettingKey={colorItem.settingsKey}
@@ -381,7 +401,7 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
381401
)}
382402
/>
383403
<Divider type="vertical" style={{height: "610px"}}/>
384-
<PreviewApp style={{marginTop: '3px', height: "620px", width: "100%"}} theme={this.state.theme} dsl={dsl} />
404+
<PreviewApp style={{marginTop: '3px', height: "620px", width: "100%"}} theme={this.state.theme!} dsl={dsl} />
385405
</Flex>
386406
</Card>
387407
</ThemeSettingsView>
@@ -403,7 +423,7 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
403423
</List.Item>
404424
)}
405425
{item.items.map((layoutSettingsItem) => (
406-
<Tooltip title={layoutSettingsItem.desc} placement="right">
426+
<Tooltip key={layoutSettingsItem.settingsKey} title={layoutSettingsItem.desc} placement="right">
407427
<List.Item key={layoutSettingsItem.settingsKey}>
408428
{layoutSettingsItem.type == "fontFamily" &&
409429
<ThemeSettingsSelector
@@ -425,7 +445,7 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
425445
)}
426446
/>
427447
<Divider type="vertical" style={{height: "610px"}}/>
428-
<PreviewApp style={{marginTop: '3px', height: "620px", width: "100%"}} theme={this.state.theme} dsl={dsl} />
448+
<PreviewApp style={{marginTop: '3px', height: "620px", width: "100%"}} theme={this.state.theme!} dsl={dsl} />
429449
</Flex>
430450
</Card>
431451
</ThemeSettingsView>
@@ -447,7 +467,7 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
447467
</List.Item>
448468
)}
449469
{item.items.map((layoutSettingsItem) => (
450-
<Tooltip title={layoutSettingsItem.desc} placement="right">
470+
<Tooltip key={layoutSettingsItem.settingsKey} title={layoutSettingsItem.desc} placement="right">
451471
<List.Item key={layoutSettingsItem.settingsKey}>
452472
{layoutSettingsItem.type == "radius" &&
453473
<ThemeSettingsSelector
@@ -516,7 +536,7 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
516536
)}
517537
/>
518538
<Divider type="vertical" style={{height: "610px"}}/>
519-
<PreviewApp style={{marginTop: '3px', height: "620px", width: "100%"}} theme={this.state.theme} dsl={dsl} />
539+
<PreviewApp style={{marginTop: '3px', height: "620px", width: "100%"}} theme={this.state.theme!} dsl={dsl} />
520540
</Flex>
521541
</Card>
522542
</ThemeSettingsView>
@@ -534,18 +554,20 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
534554
styleKey: string,
535555
compStyle: Record<string, string>
536556
) => {
537-
this.setState({
538-
theme: {
539-
...this.state.theme,
540-
components: {
541-
...this.state.theme.components,
542-
[compName]: {
543-
...this.state.theme.components?.[compName],
544-
[styleKey]: compStyle,
557+
if (this.state.theme) {
558+
this.setState({
559+
theme: {
560+
...this.state.theme,
561+
components: {
562+
...this.state.theme.components,
563+
[compName]: {
564+
...this.state.theme.components?.[compName],
565+
[styleKey]: compStyle,
566+
}
545567
}
546-
}
547-
},
548-
});
568+
},
569+
});
570+
}
549571
}}
550572
/>
551573
</Card>
@@ -571,7 +593,7 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
571593
</List.Item>
572594
<List.Item style={{width : "260px", height: "370px", padding:"10px"}}>
573595
<CodeEditor
574-
value={this.state.theme.chart || ""}
596+
value={this.state.theme?.chart || ""}
575597
onChange={(value) => this.configChange({
576598
themeSettingKey: "chart",
577599
chart: value.doc.toString() ? value.doc.toString() : undefined,
@@ -585,7 +607,7 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
585607
</List>
586608
</ChartInput>
587609
<Divider type="vertical" style={{height: "370px"}}/>
588-
<PreviewApp style={{ height: "380px", width: "100%", margin: "0" }} theme={this.state.theme} dsl={chartDsl} />
610+
<PreviewApp style={{ height: "380px", width: "100%", margin: "0" }} theme={this.state.theme!} dsl={chartDsl} />
589611
</Flex>
590612
</Card>
591613
</ThemeSettingsView>

‎client/packages/lowcoder/src/pages/setting/theme/index.tsx

+14-2
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,25 @@
11
import { Route, Switch } from "react-router";
22
import ThemePage from "./themePage";
33
import ThemeDetailPage from "./detail";
4-
import { THEME_DETAIL, THEME_SETTING } from "constants/routesURL";
4+
import { THEME_DETAIL_URL, THEME_SETTING } from "constants/routesURL";
5+
import { useDispatch, useSelector } from "react-redux";
6+
import { getUser } from "@lowcoder-ee/redux/selectors/usersSelectors";
7+
import { useEffect } from "react";
8+
import { fetchCommonSettings } from "@lowcoder-ee/redux/reduxActions/commonSettingsActions";
59

610
export const ThemeHome = () => {
11+
const dispatch = useDispatch();
12+
const user = useSelector(getUser);
13+
const orgId = user.currentOrgId;
14+
15+
useEffect(() => {
16+
dispatch(fetchCommonSettings({ orgId }));
17+
}, []);
18+
719
return (
820
<Switch>
921
<Route path={THEME_SETTING} component={ThemePage} exact />
10-
<Route path={THEME_DETAIL} component={ThemeDetailPage} exact />
22+
<Route path={THEME_DETAIL_URL} component={ThemeDetailPage} exact />
1123
</Switch>
1224
);
1325
};

‎client/packages/lowcoder/src/pages/setting/theme/themePage.tsx

+4-22
Original file line numberDiff line numberDiff line change
@@ -43,17 +43,6 @@ class ThemePage extends React.Component<ThemeProps, ThemeState> {
4343
modalVisible: false,
4444
};
4545
}
46-
componentDidMount() {
47-
if (this.props.orgId) {
48-
this.props.fetchCommonSettings(this.props.orgId);
49-
}
50-
}
51-
52-
componentDidUpdate(prevProps: ThemeProps, prevState: ThemeState) {
53-
if (prevProps.orgId !== this.props.orgId) {
54-
this.props.fetchCommonSettings(this.props.orgId);
55-
}
56-
}
5746

5847
GoDetail(params: ThemeType, themeList: ThemeType[], type: string) {
5948
this.props.setCommonSettings({
@@ -62,10 +51,9 @@ class ThemePage extends React.Component<ThemeProps, ThemeState> {
6251
key: "themeList",
6352
value: themeList,
6453
},
65-
});
66-
history.push({
67-
pathname: THEME_DETAIL,
68-
state: { ...params, type },
54+
onSuccess: () => {
55+
history.push(`${THEME_DETAIL}/${params.id}`)
56+
},
6957
});
7058
}
7159

@@ -152,13 +140,7 @@ class ThemePage extends React.Component<ThemeProps, ThemeState> {
152140
this.copyTheme(info.themeId);
153141
break;
154142
case MENU_TYPE.EDIT:
155-
history.push({
156-
pathname: THEME_DETAIL,
157-
state: {
158-
...this.props.themeList?.find((theme) => theme.id === info.themeId),
159-
type: DETAIL_TYPE.EDIT,
160-
},
161-
});
143+
history.push(`${THEME_DETAIL}/${info.themeId}`)
162144
break;
163145
case MENU_TYPE.RENAME:
164146
this.setCommonSettings(

0 commit comments

Comments
 (0)