Arquivo de Web - Página 7 de 10

CRUD com FastHTML e Python

25/04/202621/02/2025 Por antonino

No mundo do desenvolvimento web, a criação de aplicações CRUD (Create, Read, Update, Delete) é uma tarefa comum. Essas aplicações permitem que os usuários interajam com bancos de dados de forma simples e eficiente. Neste artigo, vamos explorar como criar um CRUD completo usando FastHTML e Python. O código apresentado é altamente eficiente, modular e fácil de manter, atendendo às melhores práticas de desenvolvimento.

O que é FastHTML?

Em primeiro lugar, FastHTML é uma biblioteca Python que facilita a criação de interfaces web dinâmicas, responsivas e a criação de sua biblioteca de componentes. Além disso, ele combina a simplicidade do HTML com a potência do Python, o que permite que desenvolvedores criem aplicações web de maneira rápida e eficiente. No nosso exemplo, usamos FastHTML para criar um CRUD que gerencia uma tabela de pessoas, incluindo funcionalidades como adicionar, editar, excluir e listar registros. Como resultado, neste projeto, temos o código 100% em Python, o que demonstra a versatilidade e a praticidade dessa biblioteca para o desenvolvimento web.

Estrutura do Projeto

O projeto é organizado em módulos, o que facilita a manutenção e a escalabilidade. Aqui está uma visão geral da estrutura:

main.py: O ponto de entrada da aplicação, onde configuramos o FastHTML e registramos as rotas.
constantes.py: Contém constantes como o número de registros por página e expressões regulares para validação.
SGBD.py: Gerencia a conexão com o banco de dados.
componentes.py: Define componentes reutilizáveis, como a função caixa_mensagem.
classes.py: Define a classe Pessoa, que representa a entidade no banco de dados.

Funcionalidades do CRUD

Adicionar Registros

A função adiciona_pessoa permite que os usuários adicionem novos registros à tabela. Antes de inserir os dados, o sistema valida o campo nome para garantir que ele não esteja vazio, não contenha números ou caracteres especiais. Se a validação falhar, uma mensagem de erro é exibida.

@rt("/adiciona/pessoa")
def adiciona_pessoa(nome: str):
    try:
        if validar_formulario(nome):
            db_pessoa.insert(nome=nome)
            return Div(
                listar_pessoas(page=1),
                caixa_mensagem("sucesso","Pessoa adicionada com sucesso!"),
                limpar_formulario()
            )
    except ValueError as e:
        return Div(
                listar_pessoas(page=1),
                caixa_mensagem("erro", str(e)),
                limpar_formulario()
            )

@rt("/adiciona/pessoa")

def adiciona_pessoa(nome: str):

try:

if validar_formulario(nome):

db_pessoa.insert(nome=nome)

return Div(

listar_pessoas(page=1),

caixa_mensagem("sucesso","Pessoa adicionada com sucesso!"),

limpar_formulario()

)

except ValueError as e:

return Div(

listar_pessoas(page=1),

caixa_mensagem("erro", str(e)),

limpar_formulario()

)

Editar Registros

A função editar_pessoa permite que os usuários editem registros existentes. O sistema redireciona o usuário para o formulário de edição, onde ele pode alterar o nome da pessoa. Após a edição, o sistema valida os dados e, se tudo estiver correto, atualiza o registro no banco de dados.

@rt("/editar/pessoa/{id}")
def editar_pessoa(id: int, page: int = 1):
    pessoa = db_pessoa.get(id)
    if not pessoa:
        return caixa_mensagem("erro", "Pessoa não encontrada!")
    return Redirect(f"/frm/pessoa?edit_id={id}&amp;page={page}")

@rt("/editar/pessoa/{id}")

def editar_pessoa(id: int, page: int = 1):

pessoa = db_pessoa.get(id)

if not pessoa:

return caixa_mensagem("erro", "Pessoa não encontrada!")

return Redirect(f"/frm/pessoa?edit_id={id}&page={page}")

Excluir Registros

A função excluir_pessoa permite que os usuários excluam registros da tabela. O sistema remove o registro do banco de dados e atualiza a listagem, mantendo a paginação correta.

@rt("/excluir/pessoa/{id}")
def excluir_pessoa(id: int, page: int = 1):
    db_pessoa.delete(id)
    total_pessoas = len(db_pessoa())
    total_paginas = (total_pessoas + NUMERO_REGISTROS_POR_PAGINA - 1) // NUMERO_REGISTROS_POR_PAGINA
    if page &gt; total_paginas and page &gt; 1:
        page -= 1
    return Div(
        listar_pessoas(page=page),
        caixa_mensagem("sucesso", "✖ Pessoa removida com sucesso!")
    )

@rt("/excluir/pessoa/{id}")

def excluir_pessoa(id: int, page: int = 1):

db_pessoa.delete(id)

total_pessoas = len(db_pessoa())

total_paginas = (total_pessoas + NUMERO_REGISTROS_POR_PAGINA - 1) // NUMERO_REGISTROS_POR_PAGINA

if page > total_paginas and page > 1:

page -= 1

return Div(

listar_pessoas(page=page),

caixa_mensagem("sucesso", "✖ Pessoa removida com sucesso!")

)

Listar Registros com Paginação

A função listar_pessoas exibe os registros da tabela com paginação. Os usuários podem navegar entre as páginas usando os botões “Anterior”, “Próxima”, “Primeira” e “Última”.

@rt("/listar/pessoas")
def listar_pessoas(page: int = 1):
    total_pessoas = len(db_pessoa())
    total_paginas = (total_pessoas + NUMERO_REGISTROS_POR_PAGINA - 1) // NUMERO_REGISTROS_POR_PAGINA
    inicio = (page - 1) * NUMERO_REGISTROS_POR_PAGINA
    pessoas = db_pessoa()[inicio:inicio + NUMERO_REGISTROS_POR_PAGINA]
    tabela = Table(
        Tr(Th("Id"), Th("Nome"), Th("Ações")),
        *[
            Tr(
                Td(pessoa.id),
                Td(pessoa.nome),
                Td(
                    Button("✏️ Editar",
                        hx_get=f"/editar/pessoa/{pessoa.id}?page={page}",
                        hx_target="#listagem",
                        hx_swap="innerHTML",
                        style="background:#134B70; color:white; border:none; padding:5px 8px; cursor:pointer;"),
                    Button("✖ Excluir", 
                        hx_get=f"/excluir/pessoa/{pessoa.id}?page={page}", 
                        hx_target="#listagem", 
                        hx_swap="innerHTML", 
                        style="margin-left:10px; background:#A0153E; color:white; border:none; padding:5px 8px; cursor:pointer;")
                )
            ) for pessoa in pessoas
        ]
    )
    paginacao = Div(
        A("⏮️", title="Primeira Página", hx_get=f"/listar/pessoas?page=1", hx_target="#listagem", style="font-size: 30px; margin-right: 10px;" if page &gt; 1 else "display:none;"),
        A("◀️", title="Anterior", hx_get=f"/listar/pessoas?page={page-1}", hx_target="#listagem", style="font-size: 30px; margin-right: 10px;" if page &gt; 1 else "display:none;"),
        Label(f" {page} ", style="font-size: 30px; color: blue"),
        A("▶️", title="Próxima", hx_get=f"/listar/pessoas?page={page+1}", hx_target="#listagem", style="font-size: 30px; margin-left: 10px;" if page &lt; total_paginas else "display:none;"),
        A("⏩", title="Última Página", hx_get=f"/listar/pessoas?page={total_paginas}", hx_target="#listagem", style="font-size: 30px; margin-left: 10px;" if page &lt; total_paginas else "display:none;"),
        style="margin-top: 20px; display: flex; gap: 10px;"
    )
    return Div(
        tabela,
        paginacao,
        limpar_formulario()
    )

@rt("/listar/pessoas")

def listar_pessoas(page: int = 1):

total_pessoas = len(db_pessoa())

total_paginas = (total_pessoas + NUMERO_REGISTROS_POR_PAGINA - 1) // NUMERO_REGISTROS_POR_PAGINA

inicio = (page - 1) * NUMERO_REGISTROS_POR_PAGINA

pessoas = db_pessoa()[inicio:inicio + NUMERO_REGISTROS_POR_PAGINA]

tabela = Table(

Tr(Th("Id"), Th("Nome"), Th("Ações")),

Tr(

Td(pessoa.id),

Td(pessoa.nome),

Td(

Button("✏️ Editar",

hx_get=f"/editar/pessoa/{pessoa.id}?page={page}",

hx_target="#listagem",

hx_swap="innerHTML",

style="background:#134B70; color:white; border:none; padding:5px 8px; cursor:pointer;"),

Button("✖ Excluir",

hx_get=f"/excluir/pessoa/{pessoa.id}?page={page}",

hx_target="#listagem",

hx_swap="innerHTML",

style="margin-left:10px; background:#A0153E; color:white; border:none; padding:5px 8px; cursor:pointer;")

)

) for pessoa in pessoas

]

)

paginacao = Div(

A("⏮️", title="Primeira Página", hx_get=f"/listar/pessoas?page=1", hx_target="#listagem", style="font-size: 30px; margin-right: 10px;" if page > 1 else "display:none;"),

A("◀️", title="Anterior", hx_get=f"/listar/pessoas?page={page-1}", hx_target="#listagem", style="font-size: 30px; margin-right: 10px;" if page > 1 else "display:none;"),

Label(f" {page} ", style="font-size: 30px; color: blue"),

A("▶️", title="Próxima", hx_get=f"/listar/pessoas?page={page+1}", hx_target="#listagem", style="font-size: 30px; margin-left: 10px;" if page < total_paginas else "display:none;"),

A("⏩", title="Última Página", hx_get=f"/listar/pessoas?page={total_paginas}", hx_target="#listagem", style="font-size: 30px; margin-left: 10px;" if page < total_paginas else "display:none;"),

style="margin-top: 20px; display: flex; gap: 10px;"

)

return Div(

tabela,

paginacao,

limpar_formulario()

)

Validação de Dados

A função validar_formulario é usada para garantir que os dados inseridos pelos usuários sejam válidos. Ela verifica se o campo nome não está vazio, não contém números ou caracteres especiais.

def validar_formulario(nome):
    valido = True
    if not nome:
        valido = False
        raise ValueError("O campo 'nome' é obrigatório")
    if re.search(REGEX_VALIDAR["tem_numeros"], nome):
        valido = False
        raise ValueError("O campo 'nome' não pode ter números.")
    if re.search(REGEX_VALIDAR["tem_caracteres_especiais"], nome):
        valido = False
        raise ValueError("O campo 'nome' não pode ter caracteres especiais.")
    return valido

def validar_formulario(nome):

valido = True

if not nome:

valido = False

raise ValueError("O campo 'nome' é obrigatório")

if re.search(REGEX_VALIDAR["tem_numeros"], nome):

valido = False

raise ValueError("O campo 'nome' não pode ter números.")

if re.search(REGEX_VALIDAR["tem_caracteres_especiais"], nome):

valido = False

raise ValueError("O campo 'nome' não pode ter caracteres especiais.")

return valido

Eficiência e Boas Práticas

Primeiramente, o código foi desenvolvido seguindo as melhores práticas de desenvolvimento, como modularização, validação de dados e paginação. Dessa forma, isso garante que a aplicação seja não apenas eficiente, mas também fácil de manter e altamente escalável. Além disso, o uso do FastHTML permite uma integração perfeita entre o front-end e o back-end, o que, por sua vez, proporciona uma experiência de usuário fluida e intuitiva. Portanto, ao adotar essas práticas e ferramentas, o desenvolvimento se torna mais organizado e o resultado final, significativamente mais robusto.

Integrando varios formulários ao main.py

O código principal do projeto fica em main.py e cada formulário em um arquivo python separado, com suas rotas e sua validação especifica. Veja como integrar os formulários em main.py.

from fasthtml.common import fast_app, serve
from SGBD import get_db
from frm_pessoa import frm_pessoa, adiciona_pessoa, editar_pessoa, salvar_pessoa, excluir_pessoa, listar_pessoas
# Configuração do FastHTML
app, rt = fast_app()
db = get_db()
# Pessoa
rt("/frm/pessoa")(frm_pessoa)
rt("/adiciona/pessoa")(adiciona_pessoa)
rt("/editar/pessoa/{id}")(editar_pessoa)
rt("/salvar/pessoa/{id}")(salvar_pessoa)
rt("/excluir/pessoa/{id}")(excluir_pessoa)
rt("/listar/pessoas")(listar_pessoas)
# Servir a aplicação
serve()

from fasthtml.common import fast_app, serve

from SGBD import get_db

from frm_pessoa import frm_pessoa, adiciona_pessoa, editar_pessoa, salvar_pessoa, excluir_pessoa, listar_pessoas

# Configuração do FastHTML

app, rt = fast_app()

db = get_db()

# Pessoa

rt("/frm/pessoa")(frm_pessoa)

rt("/adiciona/pessoa")(adiciona_pessoa)

rt("/editar/pessoa/{id}")(editar_pessoa)

rt("/salvar/pessoa/{id}")(salvar_pessoa)

rt("/excluir/pessoa/{id}")(excluir_pessoa)

rt("/listar/pessoas")(listar_pessoas)

# Servir a aplicação

serve()

Conclusão

Em resumo, este guia mostrou como o FastHTML pode simplificar a criação de CRUDs em Python. Ao seguir os passos apresentados, você estará apto a desenvolver aplicações web eficientes e de alta qualidade. Portanto, não hesite em experimentar o FastHTML em seus projetos. Por fim, se você gostou deste conteúdo, compartilhe com outros desenvolvedores e deixe seu feedback nos comentários. Dessa forma, podemos continuar trazendo mais tutoriais como este!

Formulário

Chamada para Ação

Se você gostou deste artigo e quer aprender mais sobre desenvolvimento web com Python, siga-nos nas redes sociais e divulgue nosso site. Também deixe o comentário para identificarmos o próximo post.

Referências:

FastHTML

GitHub:

Projeto GitHub completo

Kanban iterativo

19/12/202516/01/2025 Por antonino

Veremos hoje um Kanban iterativo, criando componentes javascript em tempo de execução no front-end.

Criando componentes em tempo de execução

O Kanban iterativo é uma metodologia ágil amplamente utilizada para gerenciar projetos de forma visual e eficiente. Com sua abordagem intuitiva, ele facilita a organização e acompanhamento de tarefas em diferentes etapas. Recentemente, construí um Kanban digital, o que trouxe uma nova perspectiva sobre como gerenciar atividades e melhorar a produtividade. Neste post, explorarei os principais recursos e a importância dessa ferramenta na minha jornada de desenvolvimento.

Primeiramente, o Kanban digital oferece uma interface prática e fácil de usar. A estrutura da ferramenta permite a criação de grupos (como “Em andamento”, “Concluído” e “A Fazer”) para organizar os itens de trabalho. Cada grupo pode ter múltiplos itens, que representam tarefas específicas. Além disso, o sistema oferece a funcionalidade de “drag-and-drop”, ou arrastar e soltar, permitindo que os itens sejam movidos entre os grupos com facilidade. Com isso, a visualização do progresso do projeto se torna clara e dinâmica.

Outro ponto importante é a possibilidade de personalizar o Kanban conforme as necessidades de cada usuário. Ao adicionar e editar grupos ou itens, é possível ajustar o quadro conforme a evolução do projeto. Para garantir que as informações não se percam, implementei um sistema de salvamento dos dados no cookie do navegador, o que possibilita carregar e recuperar o quadro sempre que necessário, mantendo o histórico de alterações.

Menu flutuante nos objetos

Além disso, a integração de menus contextuais para cada grupo e item proporciona um nível extra de interação. O usuário pode, por exemplo, excluir ou editar itens diretamente no menu de contexto, sem precisar abrir outras interfaces ou se distrair com processos complicados. Dessa forma, as ações tornam-se mais diretas e práticas.

Em termos de usabilidade, o Kanban digital é acessível a qualquer pessoa que precise de uma forma visual e ágil de gerenciar tarefas. A integração de criptografia para salvar os dados no navegador é outra medida que proporciona segurança e confiabilidade ao sistema.

Por fim, a possibilidade de personalizar e salvar os dados em cookies oferece flexibilidade e autonomia ao usuário. Assim, além de ser uma ferramenta eficaz para gerenciamento de tarefas, ela também se torna uma aliada indispensável para quem busca produtividade e organização. Concluindo, o Kanban digital não é apenas uma plataforma de gerenciamento, mas um reflexo da constante busca por aprimoramento nas metodologias ágeis.

Vejamos um exemplo de KanBan que podemos fazer de forma dinâmica abaixo.

JAVASCRIPT:

/**
 * Obtém os elementos do DOM para manipulação posterior
 * @type {HTMLElement}
 */
const addGrupoButton = document.getElementById('add-grupo');
const addItemButton = document.getElementById('add-item');
const nomeNovoGrupoInput = document.getElementById('nome-novo-grupo');
const nomeNovoItemInput = document.getElementById('nome-novo-item');
const kanban = document.getElementById('kanban');
const contextMenu = document.getElementById('contextMenu');
const contextMenuGrupo = document.getElementById('contextMenuGrupo');
const editarItemOption = document.getElementById('editarItem');
const excluirItemOption = document.getElementById('excluirItem');
const editarGrupoOption = document.getElementById('editarGrupo');
const excluirGrupoOption = document.getElementById('excluirGrupo');

let itemCounter = 3; // Começa após o último item existente
let currentItem = null; // Referência ao item atual do menu de contexto
let currentGrupo = null; // Referência ao grupo atual do menu de contexto

/**
 * Função para salvar o estado atual do Kanban no cookie
 * @function
 */
function saveKanbanToCookie() {
  const grupos = [];
  const grupoElements = document.querySelectorAll('.titulo-grupo');

  grupoElements.forEach(grupoElement => {
    const grupo = {
      nome: grupoElement.querySelector('h1').textContent,
      itens: []
    };

    const itemElements = grupoElement.querySelectorAll('.grupo .item');
    itemElements.forEach(item => {
      grupo.itens.push(item.textContent);
    });

    grupos.push(grupo);
  });

  // Converte os dados em JSON
  const jsonData = JSON.stringify(grupos);

  // Criptografa os dados
  const encryptedData = CryptoJS.AES.encrypt(jsonData, 'secret-key').toString();

  // Salva os dados criptografados no cookie
  document.cookie = `kanbanData=${encryptedData}; path=/; max-age=${60 * 60 * 24 * 365}`;
}

/**
 * Função para carregar o Kanban a partir do cookie
 * @function
 */
function loadKanbanFromCookie() {
  const cookies = document.cookie.split('; ');
  const kanbanCookie = cookies.find(cookie => cookie.startsWith('kanbanData='));

  if (kanbanCookie) {
    // Extrai e descriptografa os dados do cookie
    const encryptedData = kanbanCookie.split('=')[1];
    const bytes = CryptoJS.AES.decrypt(encryptedData, 'secret-key');
    const jsonData = bytes.toString(CryptoJS.enc.Utf8);

    // Converte de volta para um objeto
    const kanbanData = JSON.parse(jsonData);

    // Cria os grupos e itens a partir dos dados
    kanbanData.forEach(grupo => {
      createGrupo(grupo.nome); // Cria o grupo
      const grupoElement = document.querySelector(`#kanban .titulo-grupo:last-child .grupo`);
      grupo.itens.forEach(item => {
        createItem(item, grupoElement); // Cria os itens dentro do grupo
      });
    });
  }
}

/**
 * Função para criar um novo grupo
 * @param {string} nome - Nome do grupo a ser criado
 * @function
 */
function createGrupo(nome) {
  const tituloGrupo = document.createElement('div');
  tituloGrupo.className = 'titulo-grupo';

  const grupo = document.createElement('div');
  grupo.className = 'grupo';
  grupo.addEventListener('dragover', handleDragOver);

  const titulo = document.createElement('h1');
  titulo.textContent = nome;
  titulo.addEventListener('contextmenu', handleContextMenuGrupo); // Adicionando o menu de contexto para o título do grupo

  tituloGrupo.appendChild(titulo);
  tituloGrupo.appendChild(grupo);
  kanban.appendChild(tituloGrupo);
}

/**
 * Função para criar um novo item dentro de um grupo
 * @param {string} nome - Nome do item a ser criado
 * @param {HTMLElement} grupo - O grupo onde o item será adicionado
 * @function
 */
function createItem(nome, grupo) {
  const item = document.createElement('div');
  item.className = 'item';
  item.draggable = true;
  item.id = `item-${++itemCounter}`;
  item.textContent = nome;

  item.addEventListener('dragstart', () => item.classList.add('dragging'));
  item.addEventListener('dragend', () => item.classList.remove('dragging'));
  item.addEventListener('contextmenu', handleContextMenu); // Menu de contexto para o item

  grupo.appendChild(item);
}

// Evento de adicionar grupo
addGrupoButton.addEventListener('click', () => {
  const nomeGrupo = nomeNovoGrupoInput.value.trim();
  if (nomeGrupo) {
    createGrupo(nomeGrupo);
    nomeNovoGrupoInput.value = '';
    saveKanbanToCookie(); // Salva o estado após adicionar o grupo
  }
});

// Evento de adicionar item
addItemButton.addEventListener('click', () => {
  const nomeItem = nomeNovoItemInput.value.trim();
  const grupoInicial = document.getElementById('grupo-inicial');
  if (nomeItem && grupoInicial) {
    createItem(nomeItem, grupoInicial);
    nomeNovoItemInput.value = '';
    saveKanbanToCookie(); // Salva o estado após adicionar o item
  }
});

/**
 * Gerencia o menu de contexto para itens
 * @param {Event} event - O evento de clique com o botão direito
 * @function
 */
function handleContextMenu(event) {
  event.preventDefault();
  const { clientX, clientY } = event;
  currentItem = event.target; // Armazena o item atual
  contextMenu.style.left = `${clientX}px`;
  contextMenu.style.top = `${clientY}px`;
  contextMenu.style.display = 'block';
}

/**
 * Gerencia o menu de contexto para grupos
 * @param {Event} event - O evento de clique com o botão direito
 * @function
 */
function handleContextMenuGrupo(event) {
  event.preventDefault();
  const { clientX, clientY } = event;
  currentGrupo = event.target.closest('.titulo-grupo'); // Armazena o grupo atual
  contextMenuGrupo.style.left = `${clientX}px`;
  contextMenuGrupo.style.top = `${clientY}px`;
  contextMenuGrupo.style.display = 'block';
}

/**
 * Fechar os menus de contexto ao clicar fora deles
 * @param {Event} event - O evento de clique
 * @function
 */
document.addEventListener('click', (event) => {
  if (!contextMenu.contains(event.target) && !contextMenuGrupo.contains(event.target)) {
    contextMenu.style.display = 'none';
    contextMenuGrupo.style.display = 'none';
  }
});

/**
 * Função para gerenciar o drag-and-drop de itens entre grupos
 * @param {Event} event - O evento de arrastar
 * @function
 */
function handleDragOver(event) {
  event.preventDefault();
  const dragging = document.querySelector('.dragging');
  const target = event.target.closest('.grupo');
  if (target) {
    target.appendChild(dragging);
  }
}

/**
 * Funcionalidade de Editar Item
 * @function
 */
editarItemOption.addEventListener('click', () => {
  if (currentItem) {
    const novoTexto = prompt('Editar Item:', currentItem.textContent);
    if (novoTexto) {
      currentItem.textContent = novoTexto;
      saveKanbanToCookie(); // Salva o estado após editar o item
    }
    contextMenu.style.display = 'none';
  }
});

/**
 * Funcionalidade de Excluir Item
 * @function
 */
excluirItemOption.addEventListener('click', () => {
  if (currentItem) {
    currentItem.remove(); // Remove o item atual
    saveKanbanToCookie(); // Salva o estado após excluir o item
    contextMenu.style.display = 'none';
  }
});

/**
 * Funcionalidade de Editar Grupo
 * @function
 */
editarGrupoOption.addEventListener('click', () => {
  if (currentGrupo) {
    const tituloGrupo = currentGrupo.querySelector('h1');
    const novoNome = prompt('Editar nome do Grupo:', tituloGrupo.textContent);
    if (novoNome) {
      tituloGrupo.textContent = novoNome;
      saveKanbanToCookie(); // Salva o estado após editar o grupo
    }
    contextMenuGrupo.style.display = 'none';
  }
});

/**
 * Funcionalidade de Excluir Grupo
 * @function
 */
excluirGrupoOption.addEventListener('click', () => {
  if (currentGrupo) {
    currentGrupo.remove(); // Remove o grupo
    saveKanbanToCookie(); // Salva o estado após excluir o grupo
    contextMenuGrupo.style.display = 'none';
  }
});

/**
 * Carregar o Kanban quando a página for carregada
 * @function
 */
window.onload = () => {
  loadKanbanFromCookie(); // Carrega o Kanban do cookie
};

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

/**

* Obtém os elementos do DOM para manipulação posterior

* @type {HTMLElement}

const addGrupoButton = document.getElementById('add-grupo');

const addItemButton = document.getElementById('add-item');

const nomeNovoGrupoInput = document.getElementById('nome-novo-grupo');

const nomeNovoItemInput = document.getElementById('nome-novo-item');

const kanban = document.getElementById('kanban');

const contextMenu = document.getElementById('contextMenu');

const contextMenuGrupo = document.getElementById('contextMenuGrupo');

const editarItemOption = document.getElementById('editarItem');

const excluirItemOption = document.getElementById('excluirItem');

const editarGrupoOption = document.getElementById('editarGrupo');

const excluirGrupoOption = document.getElementById('excluirGrupo');

let itemCounter = 3; // Começa após o último item existente

let currentItem = null; // Referência ao item atual do menu de contexto

let currentGrupo = null; // Referência ao grupo atual do menu de contexto

/**

* Função para salvar o estado atual do Kanban no cookie

* @function

function saveKanbanToCookie() {

const grupos = [];

const grupoElements = document.querySelectorAll('.titulo-grupo');

grupoElements.forEach(grupoElement => {

const grupo = {

nome: grupoElement.querySelector('h1').textContent,

itens: []

};

const itemElements = grupoElement.querySelectorAll('.grupo .item');

itemElements.forEach(item => {

grupo.itens.push(item.textContent);

});

grupos.push(grupo);

});

// Converte os dados em JSON

const jsonData = JSON.stringify(grupos);

// Criptografa os dados

const encryptedData = CryptoJS.AES.encrypt(jsonData, 'secret-key').toString();

// Salva os dados criptografados no cookie

document.cookie = `kanbanData=${encryptedData}; path=/; max-age=${60 * 60 * 24 * 365}`;

}

/**

* Função para carregar o Kanban a partir do cookie

* @function

function loadKanbanFromCookie() {

const cookies = document.cookie.split('; ');

const kanbanCookie = cookies.find(cookie => cookie.startsWith('kanbanData='));

if (kanbanCookie) {

// Extrai e descriptografa os dados do cookie

const encryptedData = kanbanCookie.split('=')[1];

const bytes = CryptoJS.AES.decrypt(encryptedData, 'secret-key');

const jsonData = bytes.toString(CryptoJS.enc.Utf8);

// Converte de volta para um objeto

const kanbanData = JSON.parse(jsonData);

// Cria os grupos e itens a partir dos dados

kanbanData.forEach(grupo => {

createGrupo(grupo.nome); // Cria o grupo

const grupoElement = document.querySelector(`#kanban .titulo-grupo:last-child .grupo`);

grupo.itens.forEach(item => {

createItem(item, grupoElement); // Cria os itens dentro do grupo

});

}

/**

* Função para criar um novo grupo

* @param {string} nome - Nome do grupo a ser criado

* @function

function createGrupo(nome) {

const tituloGrupo = document.createElement('div');

tituloGrupo.className = 'titulo-grupo';

const grupo = document.createElement('div');

grupo.className = 'grupo';

grupo.addEventListener('dragover', handleDragOver);

const titulo = document.createElement('h1');

titulo.textContent = nome;

titulo.addEventListener('contextmenu', handleContextMenuGrupo); // Adicionando o menu de contexto para o título do grupo

tituloGrupo.appendChild(titulo);

tituloGrupo.appendChild(grupo);

kanban.appendChild(tituloGrupo);

}

/**

* Função para criar um novo item dentro de um grupo

* @param {string} nome - Nome do item a ser criado

* @param {HTMLElement} grupo - O grupo onde o item será adicionado

* @function

function createItem(nome, grupo) {

const item = document.createElement('div');

item.className = 'item';

item.draggable = true;

item.id = `item-${++itemCounter}`;

item.textContent = nome;

item.addEventListener('dragstart', () => item.classList.add('dragging'));

item.addEventListener('dragend', () => item.classList.remove('dragging'));

item.addEventListener('contextmenu', handleContextMenu); // Menu de contexto para o item

grupo.appendChild(item);

}

// Evento de adicionar grupo

addGrupoButton.addEventListener('click', () => {

const nomeGrupo = nomeNovoGrupoInput.value.trim();

if (nomeGrupo) {

createGrupo(nomeGrupo);

nomeNovoGrupoInput.value = '';

saveKanbanToCookie(); // Salva o estado após adicionar o grupo

}

});

// Evento de adicionar item

addItemButton.addEventListener('click', () => {

const nomeItem = nomeNovoItemInput.value.trim();

const grupoInicial = document.getElementById('grupo-inicial');

if (nomeItem && grupoInicial) {

createItem(nomeItem, grupoInicial);

nomeNovoItemInput.value = '';

saveKanbanToCookie(); // Salva o estado após adicionar o item

}

});

/**

* Gerencia o menu de contexto para itens

* @param {Event} event - O evento de clique com o botão direito

* @function

function handleContextMenu(event) {

event.preventDefault();

const { clientX, clientY } = event;

currentItem = event.target; // Armazena o item atual

contextMenu.style.left = `${clientX}px`;

contextMenu.style.top = `${clientY}px`;

contextMenu.style.display = 'block';

}

/**

* Gerencia o menu de contexto para grupos

* @param {Event} event - O evento de clique com o botão direito

* @function

function handleContextMenuGrupo(event) {

event.preventDefault();

const { clientX, clientY } = event;

currentGrupo = event.target.closest('.titulo-grupo'); // Armazena o grupo atual

contextMenuGrupo.style.left = `${clientX}px`;

contextMenuGrupo.style.top = `${clientY}px`;

contextMenuGrupo.style.display = 'block';

}

/**

* Fechar os menus de contexto ao clicar fora deles

* @param {Event} event - O evento de clique

* @function

document.addEventListener('click', (event) => {

if (!contextMenu.contains(event.target) && !contextMenuGrupo.contains(event.target)) {

contextMenu.style.display = 'none';

contextMenuGrupo.style.display = 'none';

}

});

/**

* Função para gerenciar o drag-and-drop de itens entre grupos

* @param {Event} event - O evento de arrastar

* @function

function handleDragOver(event) {

event.preventDefault();

const dragging = document.querySelector('.dragging');

const target = event.target.closest('.grupo');

if (target) {

target.appendChild(dragging);

}

/**

* Funcionalidade de Editar Item

* @function

editarItemOption.addEventListener('click', () => {

if (currentItem) {

const novoTexto = prompt('Editar Item:', currentItem.textContent);

if (novoTexto) {

currentItem.textContent = novoTexto;

saveKanbanToCookie(); // Salva o estado após editar o item

}

contextMenu.style.display = 'none';

}

});

/**

* Funcionalidade de Excluir Item

* @function

excluirItemOption.addEventListener('click', () => {

if (currentItem) {

currentItem.remove(); // Remove o item atual

saveKanbanToCookie(); // Salva o estado após excluir o item

contextMenu.style.display = 'none';

}

});

/**

* Funcionalidade de Editar Grupo

* @function

editarGrupoOption.addEventListener('click', () => {

if (currentGrupo) {

const tituloGrupo = currentGrupo.querySelector('h1');

const novoNome = prompt('Editar nome do Grupo:', tituloGrupo.textContent);

if (novoNome) {

tituloGrupo.textContent = novoNome;

saveKanbanToCookie(); // Salva o estado após editar o grupo

}

contextMenuGrupo.style.display = 'none';

}

});

/**

* Funcionalidade de Excluir Grupo

* @function

excluirGrupoOption.addEventListener('click', () => {

if (currentGrupo) {

currentGrupo.remove(); // Remove o grupo

saveKanbanToCookie(); // Salva o estado após excluir o grupo

contextMenuGrupo.style.display = 'none';

}

});

/**

* Carregar o Kanban quando a página for carregada

* @function

window.onload = () => {

loadKanbanFromCookie(); // Carrega o Kanban do cookie

};

CSS:

:root {
  --kanban-bg: #FFF4CF;
  --grupo-bg: #5FA06D;
  --item-bg: #ffffff;
  --context-menu-bg: #ffffff;
  --context-menu-border: #ccc;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

body {
  font-size: 12px;
}

.kanban {
  display: flex;
  gap: 10px;
  padding: 10px;
  background: var(--kanban-bg);
  width: 100%;
  min-height: 400px;
}

.grupo {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
  background-color: var(--grupo-bg);
  border-radius: 5px;
  min-width: 200px;
  margin: 20px;
}

.item {
  background-color: var(--item-bg);
  padding: 10px;
  border-radius: 5px;
  cursor: grab;
}

.dragging {
  opacity: 0.5;
}

#formulario {
  display: flex;
  justify-content: space-around;
  padding: 10px;
  gap: 10px;
}

#formulario input,
#formulario button {
  padding: 5px;
  border-radius: 3px;
  border: 1px solid #ccc;
}

.context-menu {
  position: absolute;
  display: none;
  background: var(--context-menu-bg);
  border: 1px solid var(--context-menu-border);
  padding: 5px;
  border-radius: 3px;
}

.context-menu ul {
  list-style: none;
  padding: 0;
}

.context-menu li {
  padding: 5px;
  cursor: pointer;
}

.context-menu li:hover {
  background-color: #f0f0f0;
}

:root {

--kanban-bg: #FFF4CF;

--grupo-bg: #5FA06D;

--item-bg: #ffffff;

--context-menu-bg: #ffffff;

--context-menu-border: #ccc;

}

* {

margin: 0;

padding: 0;

box-sizing: border-box;

font-family: 'Poppins', sans-serif;

}

body {

font-size: 12px;

}

.kanban {

display: flex;

gap: 10px;

padding: 10px;

background: var(--kanban-bg);

width: 100%;

min-height: 400px;

}

.grupo {

display: flex;

flex-direction: column;

gap: 10px;

padding: 10px;

background-color: var(--grupo-bg);

border-radius: 5px;

min-width: 200px;

margin: 20px;

}

.item {

background-color: var(--item-bg);

padding: 10px;

border-radius: 5px;

cursor: grab;

}

.dragging {

opacity: 0.5;

}

#formulario {

display: flex;

justify-content: space-around;

padding: 10px;

gap: 10px;

}

#formulario input,

#formulario button {

padding: 5px;

border-radius: 3px;

border: 1px solid #ccc;

}

.context-menu {

position: absolute;

display: none;

background: var(--context-menu-bg);

border: 1px solid var(--context-menu-border);

padding: 5px;

border-radius: 3px;

}

.context-menu ul {

list-style: none;

padding: 0;

}

.context-menu li {

padding: 5px;

cursor: pointer;

}

.context-menu li:hover {

background-color: #f0f0f0;

}

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Kanban</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <div id="contextMenu" class="context-menu">
    <ul>
      <li id="editarItem">Editar Item</li>
      <li id="excluirItem">Excluir Item</li>
    </ul>
  </div>

  <div id="contextMenuGrupo" class="context-menu">
    <ul>
      <li id="editarGrupo">Editar Grupo</li>
      <li id="excluirGrupo">Excluir Grupo</li>
    </ul>
  </div>

  <div id="formulario">
    <input id="nome-novo-grupo" type="text" placeholder="Nome do Grupo" />
    <button id="add-grupo">Adicionar Grupo</button>
    <input id="nome-novo-item" type="text" placeholder="Nome do Item" />
    <button id="add-item">Adicionar Item</button>
  </div>

  <div id="kanban" class="kanban">
    <div class="titulo-grupo">
      <h1>Start</h1>
      <div class="grupo" id="grupo-inicial"></div>
    </div>
  </div>

  <script src="script.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9-1-crypto-js.min.js"></script
</body>
</html>

<!DOCTYPE html>

<head>

<title>Kanban</title>

</head>

<body>

<ul>

<li id="editarItem">Editar Item</li>

<li id="excluirItem">Excluir Item</li>

</ul>

</div>

<ul>

<li id="editarGrupo">Editar Grupo</li>

<li id="excluirGrupo">Excluir Grupo</li>

</ul>

</div>

<button id="add-grupo">Adicionar Grupo</button>

<button id="add-item">Adicionar Item</button>

</div>

<h1>Start</h1>

</div>

</body>

</html>

Referências:

Documentação JSDoc

GitHub:

Projeto kanban_js