netgescon-day0/docs/90-UI-interfaccia-unica/90-01-content/01-layout-base.md

197 lines
5.2 KiB
Markdown

# 📋 LAYOUT BASE OBBLIGATORIO
## Template fondamentale per tutti i moduli NetGescon
---
## 🗂️ **STRUTTURA BLADE MASTER**
### **File**: `resources/views/admin/{modulo}/index.blade.php`
```blade
@extends('admin.layouts.netgescon')
@section('title', 'Nome Modulo')
@section('content')
<div class="content-wrapper">
<!-- HEADER BREADCRUMB -->
<div class="content-header">
<div class="container-fluid">
<div class="row mb-2">
<div class="col-sm-6">
<h1 class="m-0">Nome Modulo</h1>
</div>
<div class="col-sm-6">
<ol class="breadcrumb float-sm-right">
<li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Home</a></li>
<li class="breadcrumb-item active">Nome Modulo</li>
</ol>
</div>
</div>
</div>
</div>
<!-- SUB-MENU TABS PATTERN -->
<div class="content-header">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="card card-primary card-tabs">
<div class="card-header p-0 pt-1">
<ul class="nav nav-tabs" id="custom-tabs-one-tab" role="tablist">
<!-- TAB ITEMS - PATTERN REPLICABILE -->
@yield('menu-tabs')
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- STATISTICHE CARDS PATTERN -->
<section class="content">
<div class="container-fluid">
<!-- STATS ROW - PATTERN REPLICABILE -->
@yield('stats-cards')
<!-- MAIN CONTENT AREA -->
@yield('main-content')
</div>
</section>
</div>
@endsection
<!-- STYLES PATTERN -->
@push('styles')
@yield('module-styles')
@endpush
<!-- SCRIPTS PATTERN -->
@push('scripts')
@yield('module-scripts')
@endpush
```
---
## 🔧 **ELEMENTI OBBLIGATORI**
### ✅ **1. Extends Layout**
```blade
@extends('admin.layouts.netgescon')
```
**Utilizza sempre il layout NetGescon principale**
### ✅ **2. Title Section**
```blade
@section('title', 'Nome Modulo')
```
**Imposta title per tab browser e header**
### ✅ **3. Content Wrapper**
```blade
<div class="content-wrapper">
```
**Container principale AdminLTE**
### ✅ **4. Breadcrumb Navigation**
```blade
<ol class="breadcrumb float-sm-right">
<li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Home</a></li>
<li class="breadcrumb-item active">Nome Modulo</li>
</ol>
```
**Navigazione contestuale obbligatoria**
### ✅ **5. Menu Tabs Container**
```blade
<div class="card card-primary card-tabs">
<div class="card-header p-0 pt-1">
<ul class="nav nav-tabs" id="custom-tabs-one-tab" role="tablist">
@yield('menu-tabs')
</ul>
</div>
</div>
```
**Container per menu navigazione**
### ✅ **6. Content Sections**
```blade
@yield('stats-cards') <!-- Statistiche -->
@yield('main-content') <!-- Contenuto principale -->
```
**Aree contenuto standardizzate**
---
## 🎯 **VARIABILI DA SOSTITUIRE**
### **Per ogni nuovo modulo sostituisci**:
- `{modulo}` → nome modulo (es: `fornitori`, `gestioni`)
- `Nome Modulo` → nome visualizzato (es: `Fornitori`, `Gestioni`)
- `admin.{modulo}` → route base (es: `admin.fornitori`)
### **Esempio Completo per Modulo Fornitori**:
```blade
@extends('admin.layouts.netgescon')
@section('title', 'Fornitori')
@section('content')
<div class="content-wrapper">
<div class="content-header">
<div class="container-fluid">
<div class="row mb-2">
<div class="col-sm-6">
<h1 class="m-0">Gestione Fornitori</h1>
</div>
<div class="col-sm-6">
<ol class="breadcrumb float-sm-right">
<li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Home</a></li>
<li class="breadcrumb-item active">Fornitori</li>
</ol>
</div>
</div>
</div>
</div>
<!-- resto del template -->
```
---
## 📂 **FILE STRUCTURE MODULO**
### **Organizzazione cartelle obbligatoria**:
```
resources/views/admin/{modulo}/
├── index.blade.php # Lista principale (usa questo layout)
├── show.blade.php # Dettaglio singolo item
├── create.blade.php # Form creazione
├── edit.blade.php # Form modifica
└── _form.blade.php # Form partial condiviso
```
### **Controller corrispondente**:
```
app/Http/Controllers/Admin/
└── {Modulo}Controller.php
```
### **Routes nel file**:
```
routes/admin.php
```
---
## ⚡ **NEXT STEPS**
### **Dopo aver creato il layout base**:
1. **Implementa menu tabs** → Vedi `02-pattern-menu.md`
2. **Aggiungi cards statistiche** → Vedi `03-cards-statistiche.md`
3. **Crea controller** → Vedi `04-controller-standard.md`
4. **Applica CSS/JS** → Vedi `05-css-javascript.md`
5. **Testa implementazione** → Vedi `06-checklist-implementazione.md`
**📖 Prossimo file: `02-pattern-menu.md`**