# Template Padrão para Implementar Sistema de Layout em Todos os Index.php

## Como implementar o sistema de layout em qualquer página?

### Passo 1: Estrutura básica do index.php

```php
<?php 
require ('../include/autenticacao.php');

// Definir variáveis ANTES de incluir inicio.php
$grupotitulo = 'Seu Grupo';
$rotinatitulo = 'Sua Rotina';
$usuario = $_SESSION['UsuarioID'];
$rotina_layout = 'sua_rotina_unica'; // Use um identificador único!

// JSON padrão da estrutura de colunas
$layout_padrao_json = json_encode([
    'columns' => [
        0 => ['id' => 'id', 'title' => 'Id', 'visible' => true],
        1 => ['id' => 'nome', 'title' => 'Nome', 'visible' => true],
        // Adicione mais colunas conforme necessário
    ],
    'order' => [0, 1] // Ordem padrão das colunas
]);

include ('../include/inicio.php');

// Buscar layout personalizado do usuário
$query_layout = "SELECT * FROM public.sis005_layout WHERE usuario = $usuario AND rotina = '$rotina_layout'";
$result_layout = pg_query($bdcon, $query_layout);
$layout = pg_fetch_assoc($result_layout);

if (!$layout) {
    // Se não existir, usar o layout padrão
    $layout = [
        'colunasorder' => $layout_padrao_json,
        'usuario' => $usuario,
        'rotina' => $rotina_layout
    ];
}

// Decodificar JSON
$colunas_order_json = json_decode($layout['colunasorder'], true);
$order = $colunas_order_json['order'];
$colunas = $colunas_order_json['columns'];

// Consultar dados (seu select.php)
include ('select.php');

// Passar variáveis PHP para JavaScript (OBRIGATÓRIO!)
?>
<script>
  window.rotinaLayout = '<?= $rotina_layout ?>';
  window.usuarioAtual = <?= $usuario ?>;
  window.colunasStructure = <?= json_encode($colunas) ?>;
  window.orderStructure = <?= json_encode($order) ?>;
</script>

<?php include ('../include/lista.php'); ?>

<!-- Sua tabela e conteúdo aqui -->
<table class="table table-bordered table-striped mb-0" id="datatable-tabletools">
    <thead>
        <tr>
            <th class='no-export'></th>
            <?php
                // Gerar cabeçalho dinâmico
                foreach ($order as $index) {
                    $coluna = $colunas[$index];
                    if ($coluna['visible']) {
                        $title = $coluna['title'];
                        $colId = $coluna['id'];
                        echo "<th>$title</th>";
                    }
                }
            ?>
        </tr>
    </thead>
    <tbody>
        <?php
            while($l = pg_fetch_array($seu_resultado)) {
                echo "<tr>";
                // Render dinâmico das colunas
                foreach ($order as $index) {
                    $coluna = $colunas[$index];
                    if ($coluna['visible']) {
                        $colId = $coluna['id'];
                        $valor = isset($l[$colId]) ? $l[$colId] : '';
                        echo "<td>$valor</td>";
                    }
                }
                echo "</tr>\n";
            }
            @pg_close(); 
        ?>
    </tbody>
</table>

<?php include ('../include/fim.php');  ?>
<!-- Bootstrap JS Explícito -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<!-- Script de edição de layout (OBRIGATÓRIO - deve ser o último!) -->
<script src="../layout/editar.js"></script>
```

### Passo 2: Configuração no seu select.php

Certifique-se de que seu `select.php` retorna um `pg_resource` com a variável esperada:

```php
// exemplo de select.php
$query = "SELECT id, nome FROM sua_tabela";
$seu_resultado = pg_query($bdcon, $query);
```

### Passo 3: Mapeamento de colunas

No JSON padrão (`$layout_padrao_json`), defina:
- `id`: Identificador da coluna (deve corresponder ao nome da coluna no banco)
- `title`: Título exibido no cabeçalho
- `visible`: Se começa visível (true) ou oculta (false)

## Arquivos envolvidos

- **`include/lista.php`**: Contém o botão "Layout" e o modal padrão
- **`layout/editar.js`**: Script que trata o drag-drop e submit do formulário
- **`layout/salvarlayout.php`**: Backend que salva/atualiza no banco de dados
- **Seu `index.php`**: Passa as variáveis globais e carrega editar.js

## Como funciona

1. User clica no botão "Layout" (em lista.php)
2. Modal aparece (também em lista.php)
3. User arrasta para reordenar e marca checkboxes
4. User clica "Salvar Layout"
5. `editar.js` envia os dados via POST para `salvarlayout.php`
6. `salvarlayout.php` salva no banco (ou cria novo layout)
7. Página recarrega e exibe com a nova configuração

## Padrão de Database

Tabela: `sis005_layout`

```sql
CREATE TABLE sis005_layout (
    id SERIAL PRIMARY KEY,
    usuario INTEGER NOT NULL,
    rotina VARCHAR(255) NOT NULL,
    colunasorder JSON NOT NULL,
    visivelcolunas VARCHAR(1000),
    status INTEGER DEFAULT 0,
    padrao INTEGER DEFAULT 0,
    UNIQUE (usuario, rotina)
);
```

A coluna `colunasorder` armazena:
```json
{
  "order": [0, 1, 2],
  "columns": {
    "0": {"id": "id", "title": "Id", "visible": true},
    "1": {"id": "nome", "title": "Nome", "visible": false},
    "2": {"id": "email", "title": "Email", "visible": true}
  }
}
```

## Próximos passos

1. Aplique este template em outros index.php (substitua `seu_resultado` pelo seu resultado real)
2. Teste se o modal abre, arrasta e salva corretamente
3. Verifique se os dados são salvos no banco com a estrutura correta
