[Klaudsol-CMS-#XXX] Added more options on the settings page

backend/models/core/Setting.js

@@ -1,21 +1,44 @@
-import DB from '@klaudsol/commons/lib/DB';
+import DB from "@klaudsol/commons/lib/DB";
 
 class Resource {
-  static async get({ slug }) {
+  static async get() {
     const db = new DB();
-    const getSettingSQL = `SELECT * FROM \`settings\` WHERE \`key\` = :key`;
+    const sql = `SELECT * FROM \`settings\``;
+
+    const data = await db.executeStatement(sql);
+    const output = data.records.map(
+      ([
+        { longValue: id },
+        { stringValue: setting },
+        { stringValue: value },
+      ]) => ({
+        id,
+        setting,
+        value,
+      })
+    );
 
-    const resource = await db.executeStatement(getSettingSQL, [
-      { name: "key", value: { stringValue: slug } },
-    ]);
+    return output;
+  }
 
-    return resource.records.map(
-      ([{ longValue: id }, { stringValue: key }, { stringValue: value }]) => ({
+  static async getLogo() {
+    const db = new DB();
+    const sql = `SELECT * FROM settings WHERE setting = "main_logo"`;
+
+    const data = await db.executeStatement(sql);
+    const output = data.records.map(
+      ([
+        { longValue: id },
+        { stringValue: setting },
+        { stringValue: value },
+      ]) => ({
         id,
-        key,
+        setting,
         value,
       })
     );
+
+    return output;
   }
 
   static async create({ key, value }) {
@@ -57,32 +80,22 @@ class Resource {
     }
   }
 
-  static async update({ key, value }) {
+  static async update(entry) {
     const db = new DB();
 
-    const updateValuesBatchSQL = `UPDATE settings SET 
-    value = :value 
-    WHERE \`key\` = :key
+    const sql = `
+        UPDATE settings SET value = :value 
+        WHERE \`setting\` = :setting
     `;
 
-    const valueParams = [
-      { name: "key", value: { stringValue: key } },
-      { name: "value", value: { stringValue: value } },
-    ];
-    await db.executeStatement(updateValuesBatchSQL, valueParams);
-
-    const getSettingSQL = `SELECT * FROM \`settings\` WHERE \`key\` = :key`;
-    const updatedResource = await db.executeStatement(getSettingSQL, [
-      { name: "key", value: { stringValue: key } },
+    const valueParams = Object.keys(entry).map((e) => [
+      { name: "setting", value: { stringValue: e } },
+      { name: "value", value: { stringValue: entry[e] } },
     ]);
 
-    return updatedResource.records.map(
-      ([{ longValue: id }, { stringValue: key }, { stringValue: value }]) => ({
-        id,
-        key,
-        value,
-      })
-    );
+    await db.batchExecuteStatement(sql, valueParams);
+
+    return true;
   }
 
   static async delete({ slug }) {

components/elements/frontPage/LoginForm.js

@@ -67,8 +67,8 @@ const LoginForm = ({ className, logo }) => {
       <div className="img_login_logo">
         <Image
           placeholder="blur"
-          blurDataURL={logo?.link ?? '/logo-180x180.png'}
-          src={logo?.link ?? '/logo-180x180.png'}
+          blurDataURL={logo}
+          src={logo}
           alt="cms-logo"
           layout='fill'
           objectFit='contain'

components/elements/inner/AppSidebar.js

@@ -17,7 +17,7 @@ import { SET_COLLAPSE } from '@/lib/actions';
 import RootContext from '@/components/contexts/RootContext';
 import { useCapabilities } from '@/components/hooks';
 import { writeSettings, writeContentTypes, readUsers,  readGroups } from "@/lib/Constants";
-import { loadEntityTypes } from '@/components/reducers/actions';
+import { loadEntityTypes, loadSettings } from '@/components/reducers/actions';
 
 const AppSidebar = () => {
 
@@ -100,6 +100,16 @@ const AppSidebar = () => {
         await loadEntityTypes({rootState, rootDispatch});
       })();
     }, [rootState]);
+
+    useEffect(() => {
+      (async () => {
+          // We need the settings at rootState because it's used in multiple
+          // parts of the program. I decided to load the settings in the
+          // sidebar because this is the only 'common denominator' among all pages. 
+          // We need to have a layout component that covers all pages.
+          await loadSettings({ rootState, rootDispatch });
+      })()
+    }, [])
 
   return (
     <>

components/fields/FileField.js

@@ -6,6 +6,7 @@ import AppButtonSpinner from "@/components/klaudsolcms/AppButtonSpinner";
 import { FaTrash } from "react-icons/fa";
 import { useEffect } from "react";
 import {  SET_CHANGED } from "@/lib/actions" 
+import defaultImage from "@/public/default-image.svg";
 
 const FileField = (props) => {
   const { setFieldValue, setTouched, touched } = useFormikContext();
@@ -46,6 +47,12 @@ const FileField = (props) => {
     document.body.onfocus = checkIfUnfocused;
   };
 
+  const getImageSrc = () => {
+    if(value?.name === 'default') return "/logo-180x180.png";
+
+    return value?.link ?? staticLink ?? defaultImage;
+  }
+
   return (
     <div>
       <div className="field_base">
@@ -64,7 +71,7 @@ const FileField = (props) => {
             value={value?.name || ""}
             onClick={openUploadMenu}
           >
-            {value?.name}
+            {value?.name === 'default' ? 'Default Logo' : value.name}
           </span>
         )}
         {!props.hideUpload && <AppButtonLg
@@ -93,8 +100,8 @@ const FileField = (props) => {
       </div>
       {(value || staticLink) && (
         <Image
-          src={value?.link ?? staticLink}
-          alt={value?.name}
+          src={getImageSrc()}
+          alt={value?.name ?? 'Loading image...'}
           width={800}
           height={300}
           loading="lazy"

components/reducers/actions.js

@@ -4,7 +4,7 @@
 
 import { findContentTypeName } from "@/components/Util";
 import { slsFetch } from "@klaudsol/commons/lib/Client";
-import { SET_ENTITY_TYPES,SET_CURRENT_ENTITY_TYPE } from "@/lib/actions"
+import { SET_ENTITY_TYPES,SET_CURRENT_ENTITY_TYPE, SET_SETTINGS } from "@/lib/actions"
 
 export async function loadEntityTypes({
   rootState,
@@ -34,6 +34,24 @@ export async function loadEntityTypes({
   }
 }
 
+export async function loadSettings({ rootState, rootDispatch }) {
+  try {
+    const response  = await slsFetch("/api/settings");
+    const { data: dataRaw } = await response.json();
+
+    const data = dataRaw.reduce((acc, curr) => {
+      return { ...acc, [curr.setting]: curr.value };
+    }, {});
+
+    rootDispatch({
+      type: SET_SETTINGS,
+      payload: data
+    });
+  } catch (ex) {
+    console.error(ex.stack);
+  }
+}
+
 const hashEqualTo = ({ rootState, typeSlug, hash }) =>
   rootState.entityType[typeSlug]?.metadata?.hash === hash;
 

components/reducers/contentManagerReducer.js

@@ -11,7 +11,8 @@ import {
   ROWS_SET,
   PAGE_SETS_RENDERER,
   SET_FIRST_FETCH,
-  TOGGLE_VIEW
+  TOGGLE_VIEW,
+  SET_VIEW
 } from "@/lib/actions";
 
 export const initialState = {
@@ -103,5 +104,10 @@ export const contentManagerReducer = (state, action) => {
         ...state,
         view: state.view === 'list' ? 'icon' : 'list'
       };
+    case SET_VIEW:
+      return {
+        ...state,
+        view: action.payload
+      };
   }
 };

components/reducers/rootReducer.js

@@ -3,10 +3,16 @@ import {
   RESET_CLIENT_SESSION,
   SET_ENTITY_TYPES,
   SET_COLLAPSE,
-  SET_CURRENT_ENTITY_TYPE
+  SET_CURRENT_ENTITY_TYPE,
+  SET_SETTINGS
 } from '@/lib/actions';
 
 export const rootInitialState = {
+  settings: {
+    default_view: '',
+    cms_name: '',
+    main_logo: ''
+  },
   entityTypes: [],
   entityType: {},
   currentContentType:{}
@@ -56,6 +62,12 @@ export const rootReducer = (state, action) => {
           ...state,
           currentContentType: action.payload
         }
+
+      case SET_SETTINGS:
+        return {
+          ...state,
+          settings: action.payload
+        }
 
       default:
         return state; 

components/reducers/settingReducer.js

@@ -6,7 +6,11 @@ export const initialState = {
   isDeleting: false,
   isSaving: false,
   isChanged: false,
-  values: {},
+  values: {
+    default_view: '',
+    cms_name: '',
+    main_logo: {},
+  },
   errorMessage:''
 };
 
@@ -57,4 +61,4 @@ export const settingReducer = (state, action) => {
 
     default: return state
   }
-};
+};

lib/actions.js

@@ -4,6 +4,7 @@
 
 export const SET_CLIENT_SESSION = "SET_CLIENT_SESSION";
 export const RESET_CLIENT_SESSION = "RESET_CLIENT_SESSION";
+export const SET_SETTINGS = "SET_SETTINGS";
 export const SET_ENTITY_TYPES = "SET_ENTITY_TYPES";
 export const SET_COLLAPSE = "SET_COLLAPSE";
 export const LOADING = "LOADING";
@@ -35,4 +36,5 @@ export const SET_FORCE_CHANGE_PASSWORD= "SET_FORCE_CHANGE_PASSWORD";
 export const SET_ERROR =  'SET_ERROR';
 export const SET_ALL_VALIDATES = 'SET_ALL_VALIDATES';
 export const TOGGLE_VIEW = 'TOGGLE_VIEW';
+export const SET_VIEW = 'SET_VIEW';
 

pages/admin.js

@@ -1,5 +1,6 @@
 import BasicLayout from "@/components/layouts/BasicLayout";
 import CacheContext from "@/components/contexts/CacheContext";
+import RootContext from "@/components/contexts/RootContext";
 import { getSessionCache } from "@klaudsol/commons/lib/Session";
 
 import { useState, useEffect, useContext } from "react";
@@ -10,13 +11,16 @@ import { FcVoicePresentation } from "react-icons/fc";
 
 export default function Admin({cache}) {
   const { firstName = null, lastName = null } = cache ?? {};
+  const { state } = useContext(RootContext);
+  const cmsName = state.settings.cms_name
+
   return (
     <CacheContext.Provider value={cache}>
       <BasicLayout>
       <div>
           <div className="row px-0 mx-0">
             <div className="col-5 d-flex align-items-center d-flex align-items-center justify-content-center">
-              <h3 className="text_welcome"> Hello, {firstName}.<br></br>Welcome!</h3>
+              <h3 className="text_welcome"> Hello, {firstName}.<br></br>Welcome to {cmsName}!</h3>
             </div>
             <div className="col-7">
               <div className='bg_svg'>
@@ -31,4 +35,4 @@ export default function Admin({cache}) {
   );
 }
 
-export const getServerSideProps = getSessionCache();
+export const getServerSideProps = getSessionCache();

pages/admin/content-manager/[entity_type_slug]/[id].js

@@ -154,7 +154,7 @@ export default function Type({ cache }) {
             body: JSON.stringify(entry),
           });
 
-          const { message, presignedUrls } = await response.json();
+          const { presignedUrls } = await response.json();
 
           if (files.length > 0) await uploadFilesToUrl(files, presignedUrls);
 

pages/admin/content-manager/[entity_type_slug]/index.js

@@ -41,7 +41,8 @@ import {
   SET_FIRST_FETCH,
   SET_PAGE,
   PAGE_SETS_RENDERER,
-  TOGGLE_VIEW
+  TOGGLE_VIEW,
+  SET_VIEW
 } from "@/lib/actions";
 import AppContentPagination from "components/klaudsolcms/pagination/AppContentPagination";
 import { defaultPageRender, maximumNumberOfPage, EntryValues, writeContents} from "lib/Constants"
@@ -52,7 +53,7 @@ export default function ContentManager({ cache }) {
   const capabilities = cache?.capabilities;
   const { entity_type_slug } = router.query;
   const controllerRef = useRef();
-  const { state: {currentContentType} } = useContext(RootContext);
+  const { state: {settings, currentContentType} } = useContext(RootContext);
 
  const [state, dispatch] = useReducer(contentManagerReducer, initialState);
 
@@ -102,12 +103,15 @@ export default function ContentManager({ cache }) {
     })();
   }, [entity_type_slug, state.page, state.entry, state.setsRenderer]);
 
-
   useEffect(() => {
     dispatch({type: SET_PAGE,payload: defaultPageRender});
     dispatch({type: PAGE_SETS_RENDERER,payload: defaultPageRender});
   }, [entity_type_slug]);
 
+  useEffect(() => {
+    dispatch({ type: SET_VIEW, payload: settings.default_view });
+  }, [state.firstFetch])
+
   const handleView = () => {
     dispatch({ type: TOGGLE_VIEW })
   }