feat: update Docker exec command and enhance Nuxt configuration

- Changed the `exec` command in the Makefile to use `docker exec` instead of `docker run`.
- Added environment variable handling for `SESAME_ALLOWED_HOSTS` in `nuxt.config.ts`.
- Included logging for `SESAME_APP_API_URL` and `SESAME_ALLOWED_HOSTS` in `nuxt.config.ts`.
- Updated Nuxt configuration to set compatibility date and added Monaco Editor configuration.
- Added Monaco Editor as a dependency in `package.json`.
- Refactored styles in `quasar-jsonform` components to use a new `types.ts` file for style definitions.
- Updated `table.vue` to integrate Monaco Editor for displaying JSON data.
- Created a new lifecycle table component with improved data handling and pagination.

Author: tacxou

Makefile

@@ -51,10 +51,7 @@ install:
 		$(IMGNAME) yarn install
 
 exec:
-	docker run -it --rm \
-		-e NODE_ENV=development \
-		-v $(CURDIR):/data \
-		$(IMGNAME) bash
+	docker exec -it $(APPNAME) bash
 
 generate-ssl-cert: ## Générer les certificats HTTPS auto-signés
 	@echo "Génération des certificats HTTPS auto-signés..."

nuxt.config.ts

@@ -4,9 +4,17 @@ import pugPlugin from 'vite-plugin-pug'
 import openapiTS from 'openapi-typescript'
 import { defineNuxtConfig } from 'nuxt/config'
 import { parse } from 'yaml'
-import consola from 'consola'
+import * as consola from 'consola'
 
 const SESAME_APP_API_URL = process.env.SESAME_APP_API_URL || 'http://localhost:4002'
+const SESAME_ALLOWED_HOSTS = process.env.SESAME_ALLOWED_HOSTS ? process.env.SESAME_ALLOWED_HOSTS.split(',') : []
+
+if (SESAME_ALLOWED_HOSTS.length === 0 && !/localhost/.test(SESAME_APP_API_URL) && process.env.NODE_ENV === 'development') {
+  SESAME_ALLOWED_HOSTS.push(new URL(SESAME_APP_API_URL).hostname)
+}
+
+consola.info(`[Nuxt] SESAME_APP_API_URL: ${SESAME_APP_API_URL}`)
+consola.info(`[Nuxt] SESAME_ALLOWED_HOSTS: ${SESAME_ALLOWED_HOSTS}`)
 
 let SESAME_APP_DARK_MODE: 'auto' | boolean = false
 if (process.env.SESAME_APP_DARK_MODE) {
@@ -32,6 +40,7 @@ if (/yes|1|on|true/i.test(`${process.env.SESAME_HTTPS_ENABLED}`)) {
 
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
+  compatibilityDate: '2024-04-03',
   ssr: false,
   telemetry: false,
   pages: true,
@@ -66,6 +75,7 @@ export default defineNuxtConfig({
     '@vueuse/nuxt',
     'dayjs-nuxt',
     '@nuxt/devtools',
+    'nuxt-monaco-editor',
   ],
   auth: {
     globalMiddleware: true,
@@ -154,7 +164,18 @@ export default defineNuxtConfig({
       animations: 'all',
     },
   },
+  monacoEditor: {
+    locale: 'fr',
+    removeSourceMaps: false,
+    componentName: {
+      codeEditor: 'MonacoEditor',
+      diffEditor: 'MonacoDiffEditor',
+    },
+  },
   vite: {
+    server: {
+      allowedHosts: ['localhost', ...SESAME_ALLOWED_HOSTS],
+    },
     define: {
       'process.env.DEBUG': process.env.NODE_ENV === 'development',
     },

package.json

@@ -31,6 +31,7 @@
     "fast-password-entropy": "^1.1.1",
     "hibp": "^14.1.2",
     "moment": "^2.30.1",
+    "monaco-editor": "^0.52.2",
     "openapi-fetch": "^0.8.2",
     "pinia": "^2.1.7",
     "qs": "^6.14.0",
@@ -55,6 +56,7 @@
     "memfs": "^4.8.2",
     "nuxt": "^3.16.0",
     "nuxt-quasar-ui": "^2.0.7",
+    "nuxt-monaco-editor": "^1.3.2",
     "openapi-typescript": "^6.7.4",
     "prettier": "^3.2.4",
     "typescript": "^5.3.3",
@@ -66,4 +68,4 @@
   "resolutions": {
     "string-width": "^1.0.2 || 2 || 3 || 4"
   }
-}
+}

src/components/quasar-jsonform/styles/defaultStyles.ts

@@ -1,4 +1,4 @@
-import { Styles } from './style';
+import type { Styles } from './types';
 
 export const defaultStyles: Styles = {
   control: {

src/components/quasar-jsonform/styles/index.ts

@@ -1,3 +1,4 @@
+export * from './types';
 export * from './defaultStyles';
 export * from './style';
 export * from './utils';

src/components/quasar-jsonform/styles/style.ts

@@ -1,6 +1,7 @@
-import { UISchemaElement } from '@jsonforms/core';
+import type { UISchemaElement } from '@jsonforms/core';
 import { inject } from 'vue';
 import merge from 'lodash/merge';
+import type { Styles } from './types';
 import { defaultStyles } from './defaultStyles';
 
 const createEmptyStyles = (): Styles => ({
@@ -14,64 +15,6 @@ const createEmptyStyles = (): Styles => ({
   categorization: {},
 });
 
-export interface Styles {
-  control: {
-    root?: string;
-    input?: string;
-  };
-  verticalLayout: {
-    root?: string;
-    item?: string;
-  };
-  horizontalLayout: {
-    root?: string;
-    item?: string;
-  };
-  group: {
-    root?: string;
-    label?: string;
-    item?: string;
-    bare?: string;
-    alignLeft?: string;
-  };
-  arrayList: {
-    root?: string;
-    toolbar?: string;
-    validationIcon?: string;
-    container?: string;
-    addButton?: string;
-    label?: string;
-    noData?: string;
-    item?: string;
-    itemContainer?: string;
-    itemHeader?: string;
-    itemLabel?: string;
-    itemContent?: string;
-    itemMoveUp?: string;
-    itemMoveDown?: string;
-    itemDelete?: string;
-  };
-  listWithDetail: {
-    root?: string;
-    toolbar?: string;
-    addButton?: string;
-    label?: string;
-    noData?: string;
-    item?: string;
-    itemLabel?: string;
-    itemContent?: string;
-    itemMoveUp?: string;
-    itemMoveDown?: string;
-    itemDelete?: string;
-  };
-  label: {
-    root?: string;
-  };
-  categorization: {
-    root?: string;
-  };
-}
-
 export const useStyles = (element?: UISchemaElement): Styles => {
   const userStyles = inject('styles', defaultStyles);
   if (!element?.options?.styles) {
@@ -87,4 +30,4 @@ export const useStyles = (element?: UISchemaElement): Styles => {
     merge(styles, element.options.styles);
   }
   return styles;
-};
+};

src/components/quasar-jsonform/styles/types.ts

@@ -0,0 +1,57 @@
+export interface Styles {
+  control: {
+    root?: string;
+    input?: string;
+  };
+  verticalLayout: {
+    root?: string;
+    item?: string;
+  };
+  horizontalLayout: {
+    root?: string;
+    item?: string;
+  };
+  group: {
+    root?: string;
+    label?: string;
+    item?: string;
+    bare?: string;
+    alignLeft?: string;
+  };
+  arrayList: {
+    root?: string;
+    toolbar?: string;
+    validationIcon?: string;
+    container?: string;
+    addButton?: string;
+    label?: string;
+    noData?: string;
+    item?: string;
+    itemContainer?: string;
+    itemHeader?: string;
+    itemLabel?: string;
+    itemContent?: string;
+    itemMoveUp?: string;
+    itemMoveDown?: string;
+    itemDelete?: string;
+  };
+  listWithDetail: {
+    root?: string;
+    toolbar?: string;
+    addButton?: string;
+    label?: string;
+    noData?: string;
+    item?: string;
+    itemLabel?: string;
+    itemContent?: string;
+    itemMoveUp?: string;
+    itemMoveDown?: string;
+    itemDelete?: string;
+  };
+  label: {
+    root?: string;
+  };
+  categorization: {
+    root?: string;
+  };
+}

src/components/quasar-jsonform/styles/utils.ts

@@ -1,4 +1,4 @@
-import { Styles } from './style';
+import type { Styles } from './types';
 import cloneDeep from 'lodash/cloneDeep';
 import mergeWith from 'lodash/mergeWith';