Info Panel¶
The info panel is a context-sensitive sidebar that displays detailed information about the currently selected element in a table view. It provides a quick overview without having to leave the current view.
How It Works¶
When clicking on a row in any table view (e.g., Inventory, Calibrations, Orders), the info panel slides in on the right side of the screen. It displays the most important properties of the selected record in a clear layout.
Keyboard Shortcut
The info panel can be toggled with the ++i++ key.
Displayed Information¶
Different data is shown depending on the module:
| Module | Displayed Fields |
|---|---|
| Inventory | Device type, serial number, location, calibration status, next calibration |
| Calibrations | Calibration date, result, assigned device, procedure, inspector |
| Orders | Customer, status, order number, delivery date, items |
| Loan Equipment | Device, borrower, loan period, status |
Info Panel Layout¶
The info panel is divided into several sections:
Header Section¶
- Title of the selected element (e.g., device name or order number)
- Status badge with color coding
- Quick actions (Edit, Delete) as icon buttons
Detail Section¶
- Tabular display of all relevant fields
- Links to related records (e.g., from a device to the last calibration)
History Section¶
- Recent changes to the record (change history)
- Timestamp and responsible user
Configuration¶
The width of the info panel can be adjusted via drag & drop. The chosen width is stored in the browser and restored on the next visit.
Tip
Double-clicking on a row takes you directly to the full detail view of the record. The info panel is particularly useful for a quick overview without losing the context of the list.
Permissions¶
The info panel only displays information for which the current user has the corresponding read permissions. Fields without read permission are automatically hidden.
// Example: Info panel is controlled via the Vuex store
const infobarStore = useInfobarStore()
infobarStore.open(selectedItem)
Technical Implementation¶
The info panel is implemented as a Vue 3 component in the Nuxt 4 frontend. Data is loaded via the Laravel API (v2) and reactively updated as soon as a different element is selected.