demf-custom-operator-details 3.0.0 → 3.0.2

package/README.md

@@ -1,343 +1,352 @@
-# 🎨 Vue 3 + Vite Microfrontend Template
+# Digital Enabler Custom Operator Details
 
-![REPO-TYPE](https://img.shields.io/badge/repo--type-template-blue?style=for-the-badge&logo=github)
+The Custom Operator Details microfrontend provides the detailed configuration interface for creating and editing custom operators. Includes code editor for JavaScript logic, input/output parameter definition, validation, and test execution capabilities.
 
-Professional template for creating Vue 3 + Vite microfrontends with Single-SPA architecture.
+Built with **Vue 3**, **Vuetify 3**, and **Vite**. Designed for **Single-SPA** integration.
+
+> 📌 **See also:**
+> - [Root Config integration guide](https://github.com/digital-enabler/root-config-microfrontend-vite-template)
+> - [Microfrontend template documentation](https://github.com/digital-enabler/vuejs3-microfrontend-vite-template)
 
 ---
 
-## 📦 Repository Contents
+## 📦 Installation
+
 
-This repository provides:
+### Via CDN
 
-### 🎨 **Microfrontend Template** (`/app`)
-Base Vue 3 + Vite + Vuetify 3 template for Single-SPA
+This project is available from the following CDN:
 
-### 🛠️ **MF Generator** (`/generator`)
-Automated tool to create new microfrontends from template
+```
+https://cdn.jsdelivr.net/npm/demf-custom-operator-details@latest/mf-app.js
+```
 
-### 🔄 **Migration Tool** (`/migration-tools`)
-Automated tool to migrate Vue CLI → Vite projects
+Add it to your root-config import map:
+
+```json
+{
+  "imports": {
+    "demf-custom-operator-details": "https://cdn.jsdelivr.net/npm/demf-custom-operator-details@latest/mf-app.js"
+  }
+}
+```
 
 ---
 
 ## 🚀 Quick Start
 
-### Option 1: Create New Microfrontend
+### Prerequisites
 
-```bash
-# 1. Navigate to generator folder
-cd generator
+Before you continue you need to have:
+
+- A Digital Enabler **root-config** application running
+- **Single-SPA** layout engine configured
+- A configuration file for the Custom Operator Details (see below)
+
+### Integration Steps
 
-# 2. Run the script
-# Windows
-create-mf.bat
+**1. Add to Import Map**
 
-# Linux/macOS
-./create-mf.sh
+In your root-config `importmap.json`:
 
-# Cross-platform (Node.js)
-node create-mf.js
+```json
+{
+  "imports": {
+    "demf-custom-operator-details": "https://cdn.jsdelivr.net/npm/demf-custom-operator-details@latest/mf-app.js"
+  }
+}
 ```
 
-📚 **Complete Documentation:**
-- [`generator/README.md`](./generator/README.md) - Complete guide
-- [`generator/QUICKSTART.md`](./generator/QUICKSTART.md) - Quick reference
+For local development:
+```json
+{
+  "imports": {
+    "demf-custom-operator-details": "http://localhost:9018/mf-app.js"
+  }
+}
+```
 
----
+**2. Register in Layout**
 
-### Option 2: Migrate Existing Vue CLI Project
+In your root-config layout HTML:
 
-```bash
-# 1. Navigate to migration-tools folder
-cd migration-tools
+```html
+<application 
+  name="demf-custom-operator-details" 
+  props="realm, palette, custom-operator-details-config">
+</application>
+```
 
-# 2. Run the script
-# Windows
-migrate-to-vite.bat
+**3. Create Configuration File**
 
-# Linux/macOS
-node migrate-to-vite.js
+Create a `custom-operator-details-config.json` file with these settings:
+
+```json
+{
+  "name": "custom-operator-details",
+  "mf": "demf-custom-operator-details",
+  "api": "https://[generic_api_location]/api"
+}
 ```
 
-⚡ **Automated migration in 5-10 minutes!**
+This JSON file must be:
+- Stored in a location accessible to the root-config
+- Included in the root-config's remote configuration
+- Passed as the `custom-operator-details-config` prop to the microfrontend
 
-📚 **Migration Documentation:**
-- [`migration-tools/README.md`](./migration-tools/README.md) - Complete guide
-- [`migration-tools/QUICKSTART.md`](./migration-tools/QUICKSTART.md) - Quick guide
-- [`migration-tools/CHANGELOG.md`](./migration-tools/CHANGELOG.md) - Version changelog
+> 📖 For details on configuration management, see:
+> - [Microfrontend Template Guide](https://github.com/digital-enabler/vuejs3-microfrontend-vite-template)
+> - [Root Config Documentation](https://github.com/digital-enabler/root-config-microfrontend-vite-template)
 
 ---
 
-## 📋 Prerequisites
+## ⚙️ Configuration
 
-- **Node.js** >= 22.0.0 < 23 || >= 24.8.0 < 25
-- **npm** (included with Node.js)
-- **Git** (to clone the repository)
+The Custom Operator Details microfrontend receives a configuration object via the `custom-operator-details-config` prop:
 
----
+```json
+{
+  "name": "custom-operator-details",
+  "mf": "demf-custom-operator-details",
+  "api": "https://your-api-endpoint.com/api"
+}
+```
 
-## 🎯 Template Features
+### Configuration Fields
 
-### Frontend Stack
-- ✅ **Vue 3** + Composition API
-- ✅ **Vuetify 3** - Material Design UI
-- ✅ **Vite** - Fast build + HMR
-- ✅ **Vue Router 4** - Routing
-- ✅ **Vuex 4** - State management
-- ✅ **Vue I18n 9** - Internationalization
+| Field | Type | Required | Description |
+|-------|------|----------|-------------|
+| `mf` | string | Yes | Microfrontend identifier (use "demf-custom-operator-details") |
+| `api` | string | Yes | Base URL for API calls |
 
-### Architecture
-- ✅ **Single-SPA** - Microfrontend orchestration
-- ✅ **SystemJS** - Module loading
-- ✅ **Dynamic Props** - Runtime configuration
-- ✅ **Dynamic Theme** - Customizable palette
+### Additional Props from Root-Config
 
-### Developer Experience
-- ✅ **ESLint** - Linting
-- ✅ **Prettier** - Formatting
-- ✅ **Hot Module Replacement** - Fast development
-- ✅ **TypeScript Support** - Optional
+The microfrontend also receives these props automatically from the root-config:
+
+- **`realm`**: Current tenant/realm identifier
+- **`palette`**: Dynamic theme colors (primary, secondary, etc.)
+
+These props are used to:
+- Apply consistent theming across the platform
+- Configure tenant-specific behavior
+- Adapt the Custom Operator Details appearance to the current application theme
 
 ---
 
-## 📁 Repository Structure
+## 🛠️ Development
 
-```
-vuejs3-microfrontend-vite-template/
-├── app/                        # 🎨 Microfrontend Template
-│   ├── public/
-│   ├── src/
-│   │   ├── App.vue
-│   │   ├── main.js
-│   │   ├── components/
-│   │   ├── locales/
-│   │   ├── plugins/
-│   │   ├── router/
-│   │   └── store/
-│   ├── package.json
-│   ├── vite.config.js
-│   └── ...
-│
-├── generator/                  # 🛠️ MF Creation Tool
-│   ├── create-mf.js           # Main script
-│   ├── create-mf.bat          # Windows wrapper
-│   ├── create-mf.ps1          # PowerShell
-│   ├── create-mf.sh           # Bash
-│   ├── README.md              # Complete documentation
-│   ├── QUICKSTART.md          # Quick guide
-│   └── CLEANUP-INSTRUCTIONS.md
-│
-├── migration-tools/            # 🔄 Migration Tool
-│   ├── migrate-to-vite.js     # Migration script
-│   ├── migrate-to-vite.bat    # Windows wrapper
-│   ├── migrate-to-vite.ps1    # PowerShell
-│   ├── README.md              # Complete guide
-│   ├── CHANGELOG.md           # Versions
-│   ├── QUICKSTART.md          # Quick guide
-│   └── CLEANUP-INSTRUCTIONS.md
-│
-├── .circleci/                  # CI/CD configuration
-├── .gitignore
-├── CHANGELOG.md                # Template changelog
-├── package.json                # Root package
-└── README.md                   # 📖 This file
-```
+### Prerequisites
 
----
+Before you continue you need to have:
 
-## ⚠️ Naming Conventions
+- [NPM](https://www.npmjs.com/) installed
+- [Node.js](https://nodejs.org/) (v22+ or v24.8+) installed
+- [Vue.js](https://v3.vuejs.org/) and [Vite](https://vitejs.dev/) knowledge
+- A [GitHub](https://github.com/) account
+- Visual Studio Code or IntelliJ IDEA as your development IDE
 
-### Digital Enabler Standard
+### Project Management
 
-New microfrontends follow the convention:
+#### Installation
 
-```
-demf-[functional-name]
+Open a **Terminal** window in the project folder and go inside the `app` folder, then launch:
+
+```bash
+npm install
 ```
 
-**Valid examples:**
-- ✅ `demf-auth` - Authentication
-- ✅ `demf-sidebar` - Sidebar
-- ✅ `demf-dashboard` - Dashboard
-- ✅ `demf-mashups-list` - Mashup list
+> **NOTE:** When install finishes, do not worry about warnings on versions and vulnerability problems reported. **DO NOT** launch `npm audit fix` or `npm audit fix --force` commands.
 
-**Rules:**
-- Only lowercase letters (a-z)
-- Numbers (0-9)
-- Hyphens (`-`) and underscores (`_`)
-- ❌ NO spaces
-- ❌ NO special characters
-- ❌ NO uppercase letters
+#### Development Server (with hot-reload)
 
----
+```bash
+npm run dev
+```
 
-## 🔗 Root-Config Integration
+This command:
+1. Generates Vuetify locales automatically (via `predev` script)
+2. Builds the microfrontend in watch mode
+3. Starts a preview server at `http://localhost:9018`
 
-After creating a microfrontend:
+The microfrontend will be available at: `http://localhost:9018/mf-app.js`
 
-### 1. Update Import Map
+#### Build for Production
 
-```json
-{
-  "imports": {
-    "demf-my-app": "http://localhost:9901/mf-app.js"
-  }
-}
+```bash
+npm run build
 ```
 
-### 2. Add to Layout
+This command:
+1. Generates Vuetify locales automatically (via `prebuild` script)
+2. Creates an optimized production build in the `dist/` folder
+3. Outputs a SystemJS bundle ready for deployment
 
-```html
-<application name="demf-my-app" props="realm, palette, mfConfig"></application>
-```
+#### Code Quality
 
-### 3. Configure Props
+```bash
+npm run lint        # Lint and fix files with ESLint
+npm run format      # Format code with Prettier
+```
 
-Standard props are:
-- **`realm`** - Application context
-- **`palette`** - Color theme
-- **`mfConfig`** - MF-specific configuration
+> **NOTE:** Alternatively to the commands indicated above you can use the Vue UI browser interface.
 
 ---
 
-## 🛠️ Development Commands
+## 🌐 Internationalization
 
-```bash
-# Install dependencies
-npm install
+The Custom Operator Details microfrontend supports multiple languages through **vue-i18n** with automatic **Vuetify locale integration**.
 
-# Development (watch + preview)
-npm run dev
+### How It Works
 
-# Production build
-npm run build
+- Locale files are stored in `src/locales/*.json` (e.g., `en.json`, `it.json`)
+- The script `scripts/generate-vuetify-locales.mjs` automatically scans these files
+- Matching Vuetify translations are imported and merged
+- The active language is read from `localStorage.getItem('lang')` (defaults to `en`)
 
-# Preview build
-npm run preview
+### Supported Languages
 
-# Lint
-npm run lint
+The Custom Operator Details includes translations for the languages defined in `src/locales/`:
+- English (`en`)
+- Italian (`it`)
+- [Add other languages as needed]
 
-# Format
-npm run format
-```
+### Adding a New Language
 
----
+1. Create a new file: `src/locales/<code>.json` (e.g., `es.json`)
+2. Add your translations following the existing structure
+3. Run `npm run dev` or `npm run build`
+4. The generator will automatically include Vuetify translations for that language
 
-## 📚 Detailed Documentation
+---
 
-### MF Generator
-- [`generator/README.md`](./generator/README.md) - Complete generator guide
-- [`generator/QUICKSTART.md`](./generator/QUICKSTART.md) - Quick start
-- [`generator/CLEANUP-INSTRUCTIONS.md`](./generator/CLEANUP-INSTRUCTIONS.md) - Cleanup instructions
+## 🎨 Features
 
-### Migration Tool
-- [`migration-tools/README.md`](./migration-tools/README.md) - Complete migration guide
-- [`migration-tools/QUICKSTART.md`](./migration-tools/QUICKSTART.md) - Quick migration
-- [`migration-tools/CHANGELOG.md`](./migration-tools/CHANGELOG.md) - Version changelog
-- [`migration-tools/CLEANUP-INSTRUCTIONS.md`](./migration-tools/CLEANUP-INSTRUCTIONS.md) - Cleanup instructions
+- **Dynamic theming**: Automatically adapts to the palette passed from root-config
+- **Multi-language support**: Full internationalization with vue-i18n
+- **Responsive design**: Works seamlessly on mobile, tablet, and desktop
+- **Material Design**: Built with Vuetify 3 components and Material Design Icons
+- **Consistent branding**: Shows uniform Custom Operator Details across all Digital Enabler services
+- **Platform information**: Displays version, copyright, and relevant links
 
 ---
 
-## 🔄 Versions
-
-### Template
-- **Current Version**: 3.0.0
-- **Vue**: 3.5.13
-- **Vuetify**: 3.10.5
-- **Vite**: 6.0.11
+## 📁 Project Structure
 
-### Tools
-- **Generator**: v1.0.0
-- **Migration Tool**: v1.0.0
+```
+demf-custom-operator-details/
+├── app/
+│   ├── src/
+│   │   ├── App.vue                    # Main component
+│   │   ├── main.js                    # Entry point
+│   │   ├── components/                # Custom Operator Details components
+│   │   ├── locales/
+│   │   │   ├── i18n.js               # i18n configuration
+│   │   │   ├── en.json               # English translations
+│   │   │   ├── it.json               # Italian translations
+│   │   │   └── vuetify-generated.js  # Auto-generated Vuetify locales
+│   │   ├── plugins/
+│   │   │   └── vuetify.js            # Vuetify configuration
+│   │   ├── router/
+│   │   └── store/
+│   ├── scripts/
+│   │   └── generate-vuetify-locales.mjs
+│   ├── public/
+│   ├── dist/                          # Build output
+│   ├── package.json
+│   ├── vite.config.js
+│   └── eslint.config.js
+├── docker/
+└── README.md
+```
 
 ---
 
-## 🐛 Troubleshooting
+## 🔍 Troubleshooting
 
-### MF Generator
+### Custom Operator Details not visible
 
-| Problem | Solution |
-|---------|----------|
-| Invalid MF name | Use only lowercase, numbers, `-` and `_` |
-| Directory already exists | Choose different name or delete directory |
-| Port in use | Use different port (1024-65535) |
+- Verify the import map includes `demf-custom-operator-details`
+- Check the layout HTML has the `<application>` tag with correct name
+- Ensure the bundle is accessible at the configured URL
+- Look for console errors in the browser developer tools
 
-### Migration Tool
+### Configuration not working
 
-| Problem | Solution |
-|---------|----------|
-| Not a Vue CLI project | Check for `vue.config.js` file |
-| Build failed | Read `MIGRATION-REPORT.md` |
-| Broken i18n imports | Check relative paths in `src/` |
+- Check that `custom-operator-details-config` prop is passed in the layout
+- Verify the configuration JSON structure matches the expected format
+- Ensure the root-config is loading the remote configuration correctly
+- Check console for warnings about missing configuration
 
----
-
-## 🤝 Contributing
+### Styling issues
 
-To contribute to this template:
+- Ensure the `palette` prop is being passed from root-config
+- Verify Material Design Icons fonts are loaded
+- Check that Vuetify theme configuration is correct
+- Clear browser cache and reload
 
-1. Fork the repository
-2. Create a branch for your feature (`git checkout -b feature/amazing-feature`)
-3. Commit your changes (`git commit -m 'Add amazing feature'`)
-4. Push to the branch (`git push origin feature/amazing-feature`)
-5. Open a Pull Request
+### API connection errors
 
----
+- Verify the `api` field in `custom-operator-details-config.json` is correct
+- Check network tab for failed API requests
+- Ensure CORS is properly configured on the backend
+- Verify the API endpoint is accessible from the browser
 
-## 📝 License
+### Development server not starting
 
-Questo progetto è proprietà di **Engineering Ingegneria Informatica S.p.A.**
+- Check that port 9018 is not already in use
+- Verify Node.js version is compatible (v22+ or v24.8+)
+- Try removing `node_modules` and running `npm install` again
+- Ensure all dependencies are correctly installed
 
 ---
 
-## 🔗 Risorse Utili
+## 📚 Tech Stack
 
-- [Single-SPA Documentation](https://single-spa.js.org/)
-- [Vue 3 Documentation](https://vuejs.org/)
-- [Vite Documentation](https://vitejs.dev/)
-- [Vuetify 3 Documentation](https://vuetifyjs.com/)
-- [Vue Router Documentation](https://router.vuejs.org/)
-- [Vuex Documentation](https://vuex.vuejs.org/)
-- [Vue I18n Documentation](https://vue-i18n.intlify.dev/)
+### Runtime Dependencies
 
----
+- **Vue 3** (^3.5.22) - Progressive JavaScript framework
+- **Vuetify 3** (^3.10.7) - Material Design component library
+- **Single-SPA Vue** (^3.0.1) - Single-SPA integration for Vue
+- **Vue Router** (^4.6.3) - Official router for Vue.js
+- **Vue i18n** (^9.14.5) - Internationalization plugin
+- **Vuex** (^4.1.0) - State management
+- **Axios** (^1.13.0) - HTTP client
+- **Material Design Icons** (^7.4.47) - Icon library
 
-## 📧 Support
+### Development Dependencies
 
-For issues or questions:
+- **Vite** (^7.1.12) - Next generation frontend tooling
+- **ESLint** (^9.38.0) - Code linting
+- **Prettier** (^3.6.2) - Code formatting
+- **Vite Plugin Vue DevTools** (^8.0.3) - Vue DevTools integration
+- **Concurrently** (^9.2.1) - Run multiple commands
 
-1. Check documentation in `generator/` and `migration-tools/` folders
-2. Review Troubleshooting sections
-3. Contact the **Digital Enabler Team**
+For complete dependencies, see [`package.json`](./app/package.json).
 
 ---
 
-**Digital Enabler Team**  
-*Engineering Ingegneria Informatica S.p.A.*
+## 📖 Related Documentation
 
----
+- [Digital Enabler Root Config Template](https://github.com/digital-enabler/root-config-microfrontend-vite-template)
+- [Digital Enabler Microfrontend Template](https://github.com/digital-enabler/vuejs3-microfrontend-vite-template)
+- [Single-SPA Documentation](https://single-spa.js.org/)
+- [Vue 3 Documentation](https://vuejs.org/)
+- [Vuetify 3 Documentation](https://vuetifyjs.com/)
+- [Vite Documentation](https://vitejs.dev/)
 
-## 🎯 Next Steps
+---
 
-### Want to create a new MF?
-```bash
-cd generator
-create-mf.bat  # Windows
-./create-mf.sh # Linux/macOS
-```
+## 📄 License
 
-### Want to migrate a Vue CLI project?
-```bash
-cd migration-tools
-migrate-to-vite.bat  # Windows
-node migrate-to-vite.js  # Linux/macOS
-```
+This project is part of Digital Enabler Ecosystem.
 
-### Want to use the template manually?
-Copy the `app/` folder and customize files manually.
+© 2025 Engineering Ingegneria Informatica S.p.A.
 
 ---
 
-*Last updated: January 2025*
+## 🆘 Support
+
+For support, questions, or issues:
+- Open an issue on [GitHub](https://github.com/digital-enabler/demf-custom-operator-details/issues)
+- Contact the Digital Enabler development team
+- Check the [Digital Enabler documentation](https://github.com/digital-enabler)