Merge pull request #49 from Inist-CNRS/admin-panel

Admin panel

.gitignore

@@ -3,6 +3,9 @@ tdm-be/dist/*
 tdm-fe/dist/*
 tdm-fe/node_modules/
 tdm-fe/.stylelintcache
+tdm-admin/dist/*
+tdm-admin/node_modules/
+tdm-admin/.stylelintcache
 .gitlab-ci.yml
 helm/*
 tdm-be/environment-recette.ts

Dockerfile

@@ -1,5 +1,5 @@
 # Stage 1 - Building Stage: Build the front-end application
-FROM node:18.19-bullseye-slim AS react-build
+FROM node:18.19-bullseye-slim AS front-end-build
 
 # Switch to the main working directory
 WORKDIR /app
@@ -18,6 +18,26 @@ RUN VITE_TDM_FACTORY_HOST="" npm run build
 
 #######################################################
 
+# Stage 1 - Building Stage: Build the back-office application
+FROM node:18.19-bullseye-slim AS back-office-build
+
+# Switch to the main working directory
+WORKDIR /app
+
+# Copy both package.json and package-lock.json files
+COPY tdm-admin/package*.json /app/
+
+# Install dependency
+RUN npm ci
+
+# Copy the front-end source code into the build container
+COPY tdm-admin /app/
+
+# Build the React app
+RUN VITE_TDM_FACTORY_HOST="" npm run build
+
+#######################################################
+
 # Stage 1 - Building Stage: Build back-end application
 FROM node:18.19-bullseye-slim AS express-build
 
@@ -63,7 +83,10 @@ COPY --chown=daemon:daemon --from=express-build /app/config/production.json /app
 COPY --chown=daemon:daemon --from=express-build /app/src /app/src
 
 # Copy front-end files from the build container
-COPY --chown=daemon:daemon --from=react-build /app/dist /app/public/
+COPY --chown=daemon:daemon --from=front-end-build /app/dist /app/public/
+
+# Copy front-end files from the build container
+COPY --chown=daemon:daemon --from=back-office-build /app/dist /app/public/admin/
 
 # Create the required folder
 RUN mkdir /app/public/downloads

Makefile

@@ -3,6 +3,8 @@ install:
 	npm install && \
 	cd ../tdm-fe && \
 	npm install && \
+	cd ../tdm-admin && \
+	npm install && \
 	cd ..
 
 
@@ -12,10 +14,3 @@ run-dev:
 run-docker:
 	docker build --tag 'tdm-factory:latest' .
 	docker run -p 3000:3000 'tdm-factory:latest'
-
-update-front-api:
-	cd tdm-be && \
-	npm run swagger-autogen && \
-	cd ../tdm-fe && \
-	npm run generate-api && \
-	cd ..

docker-compose.dev.yml

@@ -27,6 +27,20 @@ services:
     networks:
       - tdm-factory-network
 
+  tdm-factory-admin:
+    container_name: tdm-factory-dev-admin
+    image: node:18.19-bullseye-slim
+    environment:
+      NODE_ENV: development
+    ports:
+      - "5174:5174"
+    volumes:
+      - ./tdm-admin:/app
+    working_dir: /app
+    command: npm run dev
+    networks:
+      - tdm-factory-network
+
   tdm-factory-maildev:
     container_name: tdm-factory-dev-maildev
     image: maildev/maildev

tdm-admin/.eslintrc.json

@@ -0,0 +1,31 @@
+{
+    "parser": "@typescript-eslint/parser",
+    "parserOptions": {
+        "project": "tsconfig.eslint.json",
+        "sourceType": "module"
+    },
+    "settings": {
+        "react": {
+            "version": "detect"
+        },
+        "import/resolver": {
+            "typescript": {
+                "project": "tsconfig.eslint.json"
+            }
+        }
+    },
+    "root": true,
+    "env": {
+        "node": true,
+        "jest": true,
+        "browser": true
+    },
+    "plugins": [
+        "@tanstack/query"
+    ],
+    "extends": [
+        "@draconides/eslint-config-ts",
+        "@draconides/eslint-config-react",
+        "plugin:@tanstack/eslint-plugin-query/recommended"
+    ]
+}

tdm-admin/.gitignore

@@ -0,0 +1,37 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+.stylelintcache

tdm-admin/.stylelintrc

@@ -0,0 +1,19 @@
+{
+    "extends": [
+        "stylelint-config-standard-scss",
+        "stylelint-config-twbs-bootstrap"
+    ],
+    "rules": {
+        "declaration-no-important": null,
+        "scss/dollar-variable-default": [
+            true,
+            {
+                "ignore": "local"
+            }
+        ],
+        "selector-max-class": null,
+        "selector-max-type": null,
+        "selector-no-qualifying-type": null,
+        "selector-max-id": 3
+    }
+}

tdm-admin/README.md

@@ -0,0 +1,65 @@
+# TDM Backoffice React.js Application
+
+This project is a React.js application built to provide TDM backoffice.
+
+## Getting Started
+
+To get started with this project, follow these steps:
+
+### Prerequisites
+
+Make sure you have the following installed on your machine:
+
+- Node.js (v18 or higher)
+- npm (Node Package Manager)
+
+### Installation
+
+1. Clone the repository:
+
+   ```bash
+   git clone https://github.com/Inist-CNRS/tdm-factory.git
+   ```
+
+2. Navigate to the project directory:
+
+   ```bash
+   cd tdm-factory/tdm-admin
+   ```
+
+3. Install dependencies:
+
+   ```bash
+   npm install
+   ```
+
+### Running the Application
+
+To start the development server:
+
+```bash
+npm run dev
+```
+
+The application will run on `http://localhost:3000` by default. Open this URL in your browser to view it.
+
+## Folder Structure
+
+The project structure is organized as follows:
+
+- `src/`: Contains the source code of the React application.
+  - `index.tsx`: entry point
+  - `app/`: 
+    - `components/`: Reusable UI components.
+    - `page/`: Individual application page
+    - `services/`: Application network tools
+    - `util/`: Tools, types and utils
+    - `App.scss`: Global CSS of the application.
+    - `App.tsx`: Main elements where application is assembled.
+
+## Available Scripts
+
+In the project directory, you can run the following scripts:
+
+- `npm run dev`: Runs the app in development mode.
+- `npm run build`: Builds the app for production to the `.next` folder.

tdm-admin/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <title>IA Factory - Administration</title>
+</head>
+<body>
+<div id="root"></div>
+<script type="module" src="/src/index.tsx"></script>
+</body>
+</html>