Skeleton for front-end panel

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.

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 (
+        <Stack gap="xs">
+            <Text>Hello world</Text>
+            {context.instance?.pk && <Text>pk: {context.instance.pk}</Text>}
+        </Stack>
+    )
+}
+
+
+/**
+ * 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(
+        <StrictMode>
+        <MantineProvider>
+            <OrderHistoryPanel context={context}/>
+        </MantineProvider>
+    </StrictMode>
+    )
+
+}

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"}

frontend/tsconfig.node.tsbuildinfo

@@ -0,0 +1 @@
+{"root":["./vite.config.ts"],"version":"5.6.3"}

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]',
+      },
+      }
+  }
+})

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
-        ]

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 []