From d489a94aa4f0068c69dc42992b43365bdc54cf3d Mon Sep 17 00:00:00 2001 From: Oliver Walters Date: Sat, 19 Oct 2024 02:35:55 +0000 Subject: [PATCH] Skeleton for front-end panel --- frontend/README.md | 63 +++++++++++------------------- frontend/src/OrderHistoryPanel.tsx | 33 ++++++++++++++++ frontend/tsconfig.app.tsbuildinfo | 1 + frontend/tsconfig.node.tsbuildinfo | 1 + frontend/vite.config.ts | 17 +++++++- order_history/__init__.py | 48 ----------------------- order_history/core.py | 33 ++++++++++++++++ 7 files changed, 107 insertions(+), 89 deletions(-) create mode 100644 frontend/src/OrderHistoryPanel.tsx create mode 100644 frontend/tsconfig.app.tsbuildinfo create mode 100644 frontend/tsconfig.node.tsbuildinfo diff --git a/frontend/README.md b/frontend/README.md index 74872fd..0b8d165 100644 --- a/frontend/README.md +++ b/frontend/README.md @@ -1,50 +1,33 @@ -# React + TypeScript + Vite +# InvenTree Order History - Frontend Code -This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. +This directory contains the frontend code for the InvenTree Order History plugin. -Currently, two official plugins are available: +## Development -- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh -- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh +This project uses [Vite](https://vitejs.dev/) as the build tool. We followed [this guide](https://vitejs.dev/guide/#scaffolding-your-first-vite-project) to scaffold the project. -## Expanding the ESLint configuration +### Building -If you are developing a production application, we recommend updating the configuration to enable type aware lint rules: +*Note: Assumed you are already in the `frontend` directory.* -- Configure the top-level `parserOptions` property like this: +To compile the frontend code, run: -```js -export default tseslint.config({ - languageOptions: { - // other options... - parserOptions: { - project: ['./tsconfig.node.json', './tsconfig.app.json'], - tsconfigRootDir: import.meta.dirname, - }, - }, -}) +```bash +npm run build --emptyOutDir ``` -- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked` -- Optionally add `...tseslint.configs.stylisticTypeChecked` -- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config: - -```js -// eslint.config.js -import react from 'eslint-plugin-react' - -export default tseslint.config({ - // Set the react version - settings: { react: { version: '18.3' } }, - plugins: { - // Add the react plugin - react, - }, - rules: { - // other rules... - // Enable its recommended rules - ...react.configs.recommended.rules, - ...react.configs['jsx-runtime'].rules, - }, -}) +This will compile the frontend into the `../order_history/static` directory (ready for distribution). + +Note: The target directory is intentionally outside of the frontend directory, so that the compiled files are correctly bundled into the python package install. + +### Testing + +To test the frontend code, run: + +```bash +npm run dev ``` + +This will start a development server (usually on `localhost:5173`) which will automatically reload when changes are made to the source code. + +The development server provides some "dummy" harness data to test the frontend code. diff --git a/frontend/src/OrderHistoryPanel.tsx b/frontend/src/OrderHistoryPanel.tsx new file mode 100644 index 0000000..f79a78a --- /dev/null +++ b/frontend/src/OrderHistoryPanel.tsx @@ -0,0 +1,33 @@ +import { MantineProvider, Stack, Text } from '@mantine/core'; +import { StrictMode } from 'react'; +import { createRoot } from 'react-dom/client'; + + +function OrderHistoryPanel(context: any) { + return ( + + Hello world + {context.instance?.pk && pk: {context.instance.pk}} + + ) +} + + +/** + * Render the OrderHistoryPanel component + * + * @param target - The target HTML element to render the panel into + * @param context - The context object to pass to the panel + */ +export function renderPanel(target: HTMLElement, context: any) { + + + createRoot(target).render( + + + + + + ) + +} \ No newline at end of file diff --git a/frontend/tsconfig.app.tsbuildinfo b/frontend/tsconfig.app.tsbuildinfo new file mode 100644 index 0000000..e2b67f7 --- /dev/null +++ b/frontend/tsconfig.app.tsbuildinfo @@ -0,0 +1 @@ +{"root":["./src/App.tsx","./src/OrderHistoryPanel.tsx","./src/main.tsx","./src/vite-env.d.ts"],"version":"5.6.3"} \ No newline at end of file diff --git a/frontend/tsconfig.node.tsbuildinfo b/frontend/tsconfig.node.tsbuildinfo new file mode 100644 index 0000000..75ea001 --- /dev/null +++ b/frontend/tsconfig.node.tsbuildinfo @@ -0,0 +1 @@ +{"root":["./vite.config.ts"],"version":"5.6.3"} \ No newline at end of file diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts index 5a33944..bb94472 100644 --- a/frontend/vite.config.ts +++ b/frontend/vite.config.ts @@ -4,4 +4,19 @@ import react from '@vitejs/plugin-react' // https://vitejs.dev/config/ export default defineConfig({ plugins: [react()], -}) + build: { + cssCodeSplit: false, + manifest: false, + rollupOptions: { + preserveEntrySignatures: "exports-only", + input: [ + './src/OrderHistoryPanel.tsx', + ], + output: { + dir: '../order_history/static', + entryFileNames: '[name].js', + assetFileNames: 'assets/[name].[ext]', + }, + } + } +}) \ No newline at end of file diff --git a/order_history/__init__.py b/order_history/__init__.py index 941927f..e69de29 100644 --- a/order_history/__init__.py +++ b/order_history/__init__.py @@ -1,48 +0,0 @@ -"""Order history plugin for InvenTree.""" - - -import logging - -from django.urls import path - -from plugin import InvenTreePlugin -from plugin.mixins import SettingsMixin, UrlsMixin, UserInterfaceMixin - -from .version import PLUGIN_VERSION - - -class OrderHistoryPlugin(SettingsMixin, UrlsMixin, UserInterfaceMixin, InvenTreePlugin): - """Order history plugin for InvenTree.""" - - AUTHOR = "Oliver Walters" - DESCRIPTION = "Order history plugin for InvenTree" - VERSION = PLUGIN_VERSION - - MIN_VERSION = '0.17.0' - - NAME = "Order History" - SLUG = "order_history" - TITLE = "Order History Plugin" - - # Javascript file which renders custom plugin settings - ADMIN_SOURCE = "OrderHistorySettings.js" - - SETTINGS = { - # TODO: Fill out settings - } - - def __init__(self): - """Initializes the OrderHistoryPlugin object.""" - super().__init__() - - self.logger = logging.getLogger('inventree') - - def initialize(self): - """Initialize the OrderHistoryPlugin object.""" - pass - - def get_urls(self): - """Return a list of URL patterns for the OrderHistory plugin.""" - return [ - # TODO: Fill out URL patterns - ] diff --git a/order_history/core.py b/order_history/core.py index e69de29..bc9264d 100644 --- a/order_history/core.py +++ b/order_history/core.py @@ -0,0 +1,33 @@ +"""Order history plugin for InvenTree.""" + +import logging + +from plugin import InvenTreePlugin +from plugin.mixins import SettingsMixin, UrlsMixin, UserInterfaceMixin + +from .version import PLUGIN_VERSION + + +class OrderHistoryPlugin(SettingsMixin, UrlsMixin, UserInterfaceMixin, InvenTreePlugin): + """Order history plugin for InvenTree.""" + + AUTHOR = "Oliver Walters" + DESCRIPTION = "Order history plugin for InvenTree" + VERSION = PLUGIN_VERSION + + MIN_VERSION = '0.17.0' + + NAME = "Order History" + SLUG = "order_history" + TITLE = "Order History Plugin" + + SETTINGS = { + # TODO: Fill out settings + } + + def get_ui_panels(self, request, context=None, **kwargs): + """Return a list of UI panels to be rendered in the InvenTree user interface.""" + + print("get_ui_panels:", context) + + return [] \ No newline at end of file