feat(admin/theme): Complete theme api interfacing

i18n/en_US.yaml

@@ -982,7 +982,7 @@ ui:
     seo: SEO
     customize: Customize
     themes: Themes
-    css_and_html: CSS/HTML
+    css-html: CSS/HTML
     login: Login
   admin:
     admin_header:

ui/src/common/constants.ts

@@ -60,7 +60,7 @@ export const ADMIN_NAV_MENUS = [
         name: 'themes',
       },
       {
-        name: 'css_and_html',
+        name: 'css-html',
       },
     ],
   },

ui/src/common/interface.ts

@@ -346,6 +346,16 @@ export interface AdminSettingsSeo {
   robots: string;
 }
 
+export type themeConfig = {
+  navbar_style: string;
+  primary_color: string;
+  [k: string]: string | number;
+};
+export interface AdminSettingsTheme {
+  theme: string;
+  theme_config: Record<string, themeConfig>;
+}
+
 /**
  * @description interface for Activity
  */

ui/src/components/FollowingTags/index.tsx

@@ -35,7 +35,6 @@ const Index: FC = () => {
   if (!tryLoggedAndActivated().ok) {
     return null;
   }
-
   return isEdit ? (
     <Card className="mb-4">
       <Card.Header className="text-nowrap d-flex justify-content-between">
@@ -80,7 +79,9 @@ const Index: FC = () => {
           <>
             <div className="text-muted">{t('follow_tag_tip')}</div>
             <NavLink className="d-inline-block my-2" to="/tags">
-              <Button variant="outline-primary">{t('follow_a_tag')}</Button>
+              <Button size="sm" variant="outline-primary">
+                {t('follow_a_tag')}
+              </Button>
             </NavLink>
           </>
         )}

ui/src/pages/Admin/Themes/index.tsx

@@ -2,7 +2,7 @@ import { FC, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import type * as Type from '@/common/interface';
-import { getSeoSetting, putSeoSetting } from '@/services';
+import { getThemeSetting, putThemeSetting } from '@/services';
 import { SchemaForm, JSONSchema, initFormData, UISchema } from '@/components';
 import { useToast } from '@/hooks';
 import { handleFormError } from '@/utils';
@@ -21,6 +21,7 @@ const Index: FC = () => {
         description: t('themes.text'),
         enum: ['default'],
         enumNames: ['Default'],
+        default: 'default',
       },
       navbar_style: {
         type: 'string',
@@ -33,6 +34,7 @@ const Index: FC = () => {
         type: 'string',
         title: t('primary_color.label'),
         description: t('primary_color.text'),
+        default: '#ffffff',
       },
     },
   };
@@ -49,17 +51,22 @@ const Index: FC = () => {
       },
     },
   };
+  const [themeSetting, setThemeSetting] = useState<Type.AdminSettingsTheme>();
   const [formData, setFormData] = useState(initFormData(schema));
-
   const onSubmit = (evt) => {
     evt.preventDefault();
     evt.stopPropagation();
-
-    const reqParams: Type.AdminSettingsSeo = {
-      robots: formData.robots.value,
+    const themeName = formData.themes.value;
+    const reqParams: Type.AdminSettingsTheme = {
+      theme: themeName,
+      theme_config: {
+        [themeName]: {
+          navbar_style: formData.navbar_style.value,
+          primary_color: formData.primary_color.value,
+        },
+      },
     };
-
-    putSeoSetting(reqParams)
+    putThemeSetting(reqParams)
       .then(() => {
         Toast.onShow({
           msg: t('update', { keyPrefix: 'toast' }),
@@ -75,17 +82,32 @@ const Index: FC = () => {
   };
 
   useEffect(() => {
-    getSeoSetting().then((setting) => {
+    getThemeSetting().then((setting) => {
       if (setting) {
-        // const formMeta = { ...formData };
-        // formMeta.robots.value = setting.robots;
-        // setFormData(formMeta);
+        setThemeSetting(setting);
+        const themeName = setting.theme;
+        const themeConfig = setting.theme_config[themeName];
+        const formMeta = { ...formData };
+        formMeta.themes.value = themeName;
+        formMeta.navbar_style.value = themeConfig?.navbar_style;
+        formMeta.primary_color.value = themeConfig?.primary_color;
+        setFormData({ ...formMeta });
       }
     });
   }, []);
 
-  const handleOnChange = (data) => {
-    setFormData(data);
+  const handleOnChange = (cd) => {
+    console.log('cd: ', cd);
+    setFormData(cd);
+    const themeConfig = themeSetting?.theme_config[cd.themes.value];
+    if (themeConfig) {
+      themeConfig.navbar_style = cd.navbar_style.value;
+      themeConfig.primary_color = cd.primary_color.value;
+      setThemeSetting({
+        theme: themeSetting?.theme,
+        theme_config: themeSetting?.theme_config,
+      });
+    }
   };
 
   return (

ui/src/pages/Admin/index.tsx

@@ -16,6 +16,8 @@ const formPaths = [
   'branding',
   'legal',
   'write',
+  'themes',
+  'css-html',
 ];
 
 const Index: FC = () => {

ui/src/router/routes.ts

@@ -242,7 +242,7 @@ const routes: RouteNode[] = [
             page: 'pages/Admin/Themes',
           },
           {
-            path: 'css_and_html',
+            path: 'css-html',
             page: 'pages/Admin/CssAndHtml',
           },
           {

ui/src/services/admin/settings.ts

@@ -109,3 +109,13 @@ export const getSeoSetting = () => {
 export const putSeoSetting = (params: Type.AdminSettingsSeo) => {
   return request.put('/answer/admin/api/siteinfo/seo', params);
 };
+
+export const getThemeSetting = () => {
+  return request.get<Type.AdminSettingsTheme>(
+    '/answer/admin/api/siteinfo/theme',
+  );
+};
+
+export const putThemeSetting = (params: Type.AdminSettingsTheme) => {
+  return request.put('/answer/admin/api/siteinfo/theme', params);
+};