update render

dunfe · Oct 31, 2023 · 311d8bb · 311d8bb
1 parent 6962803
commit 311d8bb
Show file tree

Hide file tree

Showing 8 changed files with 383 additions and 129 deletions.
diff --git a/generators/react/generator.mjs b/generators/react/generator.mjs
@@ -17,6 +17,10 @@
  * limitations under the License.
  */
 import BaseApplicationGenerator from 'generator-jhipster/generators/base-application';
+import { stripMargin } from 'generator-jhipster/generators/base/support';
+import * as _ from 'lodash-es';
+import chalk from 'chalk';
+
 import {
   clientApplicationTemplatesBlock,
   clientRootTemplatesBlock,
@@ -83,7 +87,7 @@ export const files = {
   reactEntities: [
     {
       ...clientApplicationTemplatesBlock(),
-      templates: ['entities/reducers.ts', 'entities/menu.tsx', 'entities/routes.tsx'],
+      templates: ['entities/reducers.ts', 'entities/menu.tsx', 'entities/items.tsx', 'entities/routes.tsx'],
     },
   ],
   reactMain: [
@@ -327,4 +331,47 @@ export default class extends BaseApplicationGenerator {
       },
     });
   }
+
+  get [BaseApplicationGenerator.POST_WRITING_ENTITIES]() {
+    return this.asPostWritingEntitiesTaskGroup({
+      async postWriteEntitiesFiles({ application, entities }) {
+        for (const entity of entities.filter(entity => !entity.skipClient && !entity.builtIn)) {
+          if (!entity.embedded) {
+            this.addEntityToMenuItems(
+              entity.entityPage,
+              application.enableTranslation,
+              entity.entityTranslationKeyMenu,
+              entity.entityClassHumanized,
+            );
+          }
+        }
+      },
+    });
+  }
+
+  addEntityToMenuItems(
+    routerName,
+    enableTranslation,
+    entityTranslationKeyMenu = _.camelCase(routerName),
+    entityTranslationValue = _.startCase(routerName),
+  ) {
+    const errorMessage = `${chalk.yellow('Reference to ') + routerName} ${chalk.yellow('not added to menu.\n')}`;
+    const entityMenuPath = `${this.needleApi.clientReact.clientSrcDir}app/entities/items.tsx`;
+
+    const entityEntry = stripMargin(`
+      {
+        routerName: "${routerName}",
+        enableTranslation: "${enableTranslation}",
+        entityTranslationKeyMenu: "${entityTranslationKeyMenu}",
+        entityTranslationValue: "${entityTranslationValue}",
+      },
+    `);
+    const rewriteFileModel = this.needleApi.clientReact.generateFileModel(
+      entityMenuPath,
+      'jhipster-needle-add-entity-to-menu-items',
+      entityEntry,
+    );
+
+    this.needleApi.clientReact.addBlockContentToFile(rewriteFileModel, errorMessage);
+  }
 }
diff --git a/generators/react/templates/src/main/webapp/app/app.tsx.ejs b/generators/react/templates/src/main/webapp/app/app.tsx.ejs
@@ -21,19 +21,19 @@ import './app.scss';
 import 'app/config/dayjs';
 
 import React, { useEffect } from 'react';
-import { Layout } from 'antd';
+import { Layout, Card } from 'antd';
 import { BrowserRouter } from 'react-router-dom';
 import { ToastContainer, toast } from 'react-toastify';
 
 import { useAppDispatch, useAppSelector } from 'app/config/store';
 import { getSession } from 'app/shared/reducers/authentication';
 import { getProfile } from 'app/shared/reducers/application-profile';
 import Header from 'app/shared/layout/header/header';
+import Footer from 'app/shared/layout/footer/footer';
 import { hasAnyAuthority } from 'app/shared/auth/private-route';
 import ErrorBoundary from 'app/shared/error/error-boundary';
 import { AUTHORITIES } from 'app/config/constants';
 import AppRoutes from 'app/routes';
-import Sider from 'app/shared/layout/sider/sider';
 
 const baseHref = document.querySelector('base').getAttribute('href').replace(/\/$/, '');
 
@@ -58,32 +58,28 @@ export const App = () => {
     <BrowserRouter basename={baseHref}>
       <Layout className="app-container">
         <ToastContainer position={toast.POSITION.TOP_LEFT} className="toastify-container" toastClassName="toastify-toast"/>
-        {isAdmin ? (
-          <>
-            <ErrorBoundary>
-              <Header />
-            </ErrorBoundary>
-          </>
-        ) : null}
-        <Layout id="app-view-container">
-          {isAuthenticated && isAdmin && (
-            <Sider
-              isAuthenticated={isAuthenticated}
-              isAdmin={isAdmin}
-              <%_ if (enableTranslation) { _%>
-                currentLocale={currentLocale}
-              <%_ } _%>
-              ribbonEnv={ribbonEnv}
-              isInProduction={isInProduction}
-              isOpenAPIEnabled={isOpenAPIEnabled}
-            />
-          )}
-          <Layout.Content style={isAdmin ? { padding: '25px 25px' } : null}>
-            <ErrorBoundary>
-              <AppRoutes/>
-            </ErrorBoundary>
+        <ErrorBoundary>
+          <Header
+            isAuthenticated={isAuthenticated}
+            isAdmin={isAdmin}
+          <%_ if (enableTranslation) { _%>
+                      currentLocale={currentLocale}
+          <%_ } _%>
+            ribbonEnv={ribbonEnv}
+            isInProduction={isInProduction}
+            isOpenAPIEnabled={isOpenAPIEnabled}
+          />
+        </ErrorBoundary>
+        <div id="app-view-container">
+          <Layout.Content>
+            <Card className="jh-card">
+              <ErrorBoundary>
+                <AppRoutes/>
+              </ErrorBoundary>
+            </Card>
           </Layout.Content>
-        </Layout>
+          <Footer />
+        </div>
       </Layout>
     </BrowserRouter>
   );

diff --git a/generators/react/templates/src/main/webapp/app/entities/items.tsx.ejs b/generators/react/templates/src/main/webapp/app/entities/items.tsx.ejs
@@ -0,0 +1,29 @@
+import React from "react";
+import { Translate } from "react-jhipster";
+import { Link } from "react-router-dom";
+
+interface IMenuItemObject {
+  routerName: string,
+  enableTranslation: string,
+  entityTranslationKeyMenu: string,
+  entityTranslationValue: string,
+}
+
+const entitiesMenuItems = () => {
+  const items: IMenuItemObject[] = [
+    // jhipster-needle-add-entity-to-menu-items - JHipster will add entities to the menu here
+  ];
+  const filtered = items.filter(item => item !== null && item !== undefined && Object.keys(item).length >= 0);
+  return filtered.map(item => {
+      return {
+        label: (
+          <Link to={`/${item.routerName}`}>
+            {item.enableTranslation ? <Translate contentKey={`global.menu.entities.${item.entityTranslationKeyMenu}`} /> : item.entityTranslationValue}
+          </Link>
+        ),
+        key: item.routerName,
+      }
+  });
+};
+
+export default entitiesMenuItems;
diff --git a/generators/react/templates/src/main/webapp/app/shared/layout/header/header.tsx.ejs b/generators/react/templates/src/main/webapp/app/shared/layout/header/header.tsx.ejs
@@ -17,21 +17,138 @@
  limitations under the License.
 -%>
 import './header.scss';
-
-import React from 'react';
+import { AppstoreOutlined, MailOutlined, SettingOutlined } from '@ant-design/icons';
+import type { MenuProps } from 'antd';
+import { Menu } from 'antd';
+import React, { useState, useEffect } from 'react';
+import { Translate<% if (enableTranslation) { %>, Storage<% } %> } from 'react-jhipster';
 import LoadingBar from 'react-redux-loading-bar';
-import { Layout } from 'antd';
-import { Brand } from './header-components';
-
-const Header = () => {
-    /* jhipster-needle-add-element-to-menu - JHipster will add new menu items here */
-
-    return (
-        <Layout.Header>
-            <LoadingBar className="loading-bar" />
-            <Brand />
-        </Layout.Header>
-    );
+import entitiesMenuItems from 'app/entities/items';
+
+<%_ if (enableTranslation && enableI18nRTL) { _%>
+import { isRTL } from 'app/config/translation';
+<%_ } _%>
+import { Home, Brand } from './header-components';
+import { adminMenu, EntitiesMenu, accountMenu<%_ if (enableTranslation) { _%>, LocaleMenu<%_ } _%>} from '../menus';
+<%_ if (enableTranslation) { _%>
+import { useAppDispatch } from 'app/config/store';
+import { setLocale } from 'app/shared/reducers/locale';
+<%_ } _%>
+
+export interface IHeaderProps {
+  isAuthenticated: boolean;
+  isAdmin: boolean;
+  ribbonEnv: string;
+  isInProduction: boolean;
+  isOpenAPIEnabled: boolean;
+<%_ if (enableTranslation) { _%>
+  currentLocale: string;
+<%_ } _%>
+}
+
+
+const Header = (props: IHeaderProps) => {
+  const [menuOpen, setMenuOpen] = useState(false);
+  const [items, setItems] = useState<MenuProps['items']>([
+  {
+    label: (
+      <Brand />
+    ),
+    key: 'brand',
+  },
+  {
+    label: (
+      <Home />
+    ),
+    key: 'home',
+  },
+  <%_ if (enableTranslation) { _%>
+    {
+      label: (
+        <LocaleMenu currentLocale={props.currentLocale} />
+      ),
+      key: 'home',
+    },
+  <%_ } _%>
+]);
+<%_ if (enableI18nRTL) { _%>
+  useEffect(() => document.querySelector('html').setAttribute('dir', isRTL(Storage.session.get('locale')) ? 'rtl' : 'ltr'));
+<%_ } _%>
+
+<%_ if (enableTranslation) { _%>
+  const dispatch = useAppDispatch();
+
+  const handleLocaleChange = event => {
+    const langKey = event.target.value;
+    Storage.session.set('locale', langKey);
+    dispatch(setLocale(langKey));
+  <%_ if (enableI18nRTL) { _%>
+    document.querySelector('html').setAttribute('dir', isRTL(langKey) ? 'rtl' : 'ltr');
+  <%_ } _%>
+  }
+<%_ } _%>
+
+  const renderDevRibbon = () => props.isInProduction === false ? (
+    <div className="ribbon dev">
+      <a href="">
+<%_ if (enableTranslation) { _%>
+        <Translate contentKey={`global.ribbon.${props.ribbonEnv}`} />
+<%_ } else { _%>
+        Development
+<%_ } _%>
+      </a>
+    </div>
+  ) : null;
+
+  const toggleMenu = () => setMenuOpen(!menuOpen);
+
+  /* jhipster-needle-add-element-to-menu - JHipster will add new menu items here */
+
+  useEffect(() => {
+    if (props.isAuthenticated) {
+      const newItems = [
+        ...items,
+        {
+          label: 'Entities',
+          key: 'entities',
+          icon: <MailOutlined />,
+          children: entitiesMenuItems(),
+        },
+        {
+          label: 'Account',
+          key: 'account',
+          icon: <MailOutlined />,
+          children: accountMenu(props.isAuthenticated),
+        },
+      ];
+
+      setItems(newItems);
+    }
+  }, [props.isAuthenticated]);
+
+  useEffect(() => {
+    if (props.isAuthenticated && props.isAdmin) {
+      const newItems = [
+        ...items,
+        {
+          label: 'Admin',
+          key: 'admin',
+          icon: <MailOutlined />,
+          children: adminMenu(props.isOpenAPIEnabled),
+        },
+      ];
+
+      setItems(newItems);
+    }
+  }, [props.isAuthenticated, props.isAdmin, props.isOpenAPIEnabled]);
+
+  return (
+    <div id="app-header">
+      {renderDevRibbon()}
+      <LoadingBar className="loading-bar"/>
+      <Menu mode="horizontal" items={items} />
+    </div>
+  );
 };
 
 export default Header;