?? Tela: Editar Evento da Agenda

Rota: /Agenda/Edit/{id}

Método HTTP: GET (exibir formulário) / POST (atualizar evento)

Permissão necessária: Administrador ou Gerente

?? Visão Geral da Tela

Formulário simplificado para edição de eventos existentes. Campos pré-preenchidos com dados atuais do evento. Interface mais enxuta que o Create.

?? Elementos da Interface

1. Cabeçalho da Página

  • Breadcrumb: Home ? Agenda ? Editar
  • Título: "Editar Evento" (ícone ti-edit)
  • Subtitle: Título do evento sendo editado
  • Botão secundário: "Voltar" (link para /Agenda/Details/{id})

2. Layout do Formulário

Formulário dividido em 2 colunas:

  • Coluna principal (col-lg-8): 2 cards com campos de dados
  • Sidebar (col-lg-4): 2 cards com data/horário e botões de ação

?? Campos do Formulário

Campos Hidden

  • Id: Campo hidden com ID do evento (obrigatório para update)

Card 1: Informações Básicas

Campo Tipo Obrigatório Observação
Titulo text Sim Pré-preenchido com Model.Titulo
Descricao textarea (4 rows) Não Pré-preenchido com Model.Descricao
TurmaId select (Choices.js) Não SelectList com ViewBag.Turmas, seleção atual em Model.TurmaId

Card 2: Local e Tipo

Campo Tipo Largura Observação
Local text col-md-8 Pré-preenchido com Model.Local
Tipo text col-md-4 Pré-preenchido com Model.Tipo

Sidebar Card 1: Data e Horário

Campo Tipo Obrigatório Observação
DataEvento date Sim Pré-preenchido com Model.DataEvento
HoraEvento time Não Pré-preenchido com Model.HoraEvento
IsPublico checkbox switch Não Marcado se Model.IsPublico = true

Sidebar Card 2: Botões de Ação

  • Salvar Alterações: Botão primário com ícone ti-device-floppy (submit)
  • Cancelar: Botão light (link para /Agenda/Details/{id})

?? Funcionalidades JavaScript

Choices.js - Autocomplete de Turma

new Choices(turmaSelect, {
    searchEnabled: true,
    searchPlaceholderValue: "Buscar turma...",
    noResultsText: "Nenhuma turma encontrada",
    itemSelectText: "Clique para selecionar",
    shouldSort: false,
    removeItemButton: true,
    placeholder: true,
    placeholderValue: "Selecione uma turma"
});

? Validação do Formulário

Validação HTML5

  • Atributo required em: Titulo, DataEvento
  • Validação de tipo: date, time

Validação Server-Side

  • ModelState valida campos obrigatórios
  • asp-validation-for em cada campo
  • Retorna view com erros se validação falhar

?? Notificações e Feedback

Sucesso

Alert verde dismissível após atualização: "Evento atualizado com sucesso!" (via TempData)

Erro

Alert vermelho dismissível com descrição do erro (via TempData)

?? Regras de Negócio

  • ID do evento é obrigatório e validado
  • Apenas o proprietário/admin pode editar
  • Título e Data são obrigatórios
  • Campos vazios/null mantêm valores anteriores (a menos que explicitamente alterados)
  • TurmaId vazio = Evento Geral
  • IsPublico desmarcado = false
  • Tipo de evento pode ser alterado livremente

?? Integração com API

GET /Agenda/Edit/{id}

  • Retorna view com Model (Evento) pré-preenchido
  • ViewBag.Turmas: IEnumerable<Turma>
  • Validação: Evento existe e pertence ao tenant
  • Redirect para Index se não encontrado

POST /Agenda/Edit/{id}

  • Content-Type: application/x-www-form-urlencoded
  • Antiforgery token obrigatório
  • Route parameter: id
  • Model binding para Evento (com Id hidden)
  • Validação: ID do route = ID do model
  • Redirect após sucesso: /Agenda/Details/{id}

?? Navegação

  • Ao salvar com sucesso: Redireciona para /Agenda/Details/{id}
  • Ao clicar em "Cancelar": Redireciona para /Agenda/Details/{id}
  • Ao clicar em "Voltar": Redireciona para /Agenda/Details/{id}
  • Breadcrumb Home: /Dashboard/Index
  • Breadcrumb Agenda: /Agenda/Index

?? Responsividade

  • Layout 2 colunas em desktop (8/4), empilha em mobile
  • Campos lado a lado em tablet+, empilhados em mobile
  • Choices.js é responsivo por padrão

?? Bibliotecas Externas

  • Choices.js 10.2.0: Autocomplete para select de turma
  • estudio-autocomplete.js: Script customizado (se existir)
  • Bootstrap 5: Grid, forms
  • Tabler Icons: Ícones de interface