directus-extension-translation/README.md

A powerful Directus extension module for managing translations with Excel-like inline editing, instant search, and multi-language support. Features include server-side pagination, batch saving, and a modern UI optimized for translation workflows.

# Directus Translation Manager Extension

A powerful and modern translation management module for Directus CMS with Excel-like inline editing capabilities.

## 🚀 Features

### ✨ Core Features
- **Excel-like Inline Editing**: Double-click any cell to edit directly in the table
- **Real-time Search**: Search translation keys with instant filtering
- **Multi-language Support**: Manage translations for multiple languages simultaneously
- **Server-side Pagination**: Efficient handling of large translation datasets
- **Batch Save**: Collect multiple changes and save them all at once
- **Modern UI**: Clean, professional interface following Directus design patterns

### 🎯 Advanced Features
- **Dynamic Language Loading**: Automatically loads available languages from your Directus instance
- **Alphabetical Sorting**: Translation keys are automatically sorted A-Z
- **Visual Change Indicators**: Modified cells are highlighted for easy identification
- **Responsive Design**: Works seamlessly on desktop and mobile devices
- **Keyboard Navigation**: Full keyboard support for efficient editing

## 📦 Installation

```bash
npm install directus-extension-translation
```

## 🔧 Setup

1. **Install the extension** in your Directus project
2. **Build the extension**:
   ```bash
   pnpm run build
   ```
3. **Restart your Directus instance** to load the new extension
4. **Access the module** via the navigation menu in your Directus admin panel

## 🎮 Usage

### Basic Translation Management
1. Navigate to "Translation Manager" in your Directus admin panel
2. Select the languages you want to work with using the checkboxes
3. Use the search box to filter translation keys
4. Double-click any cell to edit translations inline
5. Click "Save All Changes" to commit your modifications

### Search and Filter
- **Search Box**: Type to filter translation keys in real-time
- **Language Selection**: Check/uncheck languages to show/hide columns
- **Pagination**: Navigate through large datasets efficiently

### Inline Editing
- **Double-click**: Activate inline editing for any cell
- **Enter**: Save changes and move to next cell
- **Escape**: Cancel editing without saving
- **Tab**: Navigate between cells

## 🛠️ Technical Details

### API Integration
- **Endpoint**: `/translations` for data retrieval and updates
- **Search**: Real-time filtering via API parameters
- **Pagination**: Server-side pagination with 50 items per page
- **Authentication**: Inherits Directus session management

### Architecture
- **Framework**: Vue.js 3 with Composition API
- **Styling**: SCSS with Directus design system variables
- **Build**: Directus Extension SDK
- **TypeScript**: Full type safety and IntelliSense support

## 📋 Requirements

- Directus 10.10.0 or higher
- Node.js 18+ 
- Modern web browser with ES6+ support

## 🔄 Development

```bash
# Install dependencies
pnpm install

# Development mode with hot reload
pnpm run dev

# Build for production
pnpm run build

# Validate extension
pnpm run validate
```

## 🎨 Customization

The extension uses Directus design tokens and can be customized via CSS variables:

```scss
// Custom styling example
.translation-manager {
  --theme--primary: #your-color;
  --theme--background: #your-bg;
}
```

## 🤝 Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Submit a pull request

## 📄 License

MIT License - see LICENSE file for details

## 🆘 Support

For issues and feature requests, please create an issue in the repository.

---

**Built with ❤️ for the Directus community**