From 8e74835f1efd2ee9488db083caccdbc1178e53dc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=C3=A3o=20Henrique?= Date: Wed, 9 Sep 2026 11:41:11 -0400 Subject: [PATCH] feat: adicionados editar, duplicar e ativar ou inativar aos perfis MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - adicionados editar, duplicar e ativar ou inativar aos perfis de vídeo do catálogo Resumo: - 2 arquivos alterados - 0 novos - 2 modificados - 0 removidos 2 files changed, 51 insertions(+), 3 deletions(-) Arquivos: - code/cep-plugin/main.js - code/cep-plugin/styles.css --- code/cep-plugin/main.js | 47 ++++++++++++++++++++++++++++++++++++-- code/cep-plugin/styles.css | 7 +++++- 2 files changed, 51 insertions(+), 3 deletions(-) diff --git a/code/cep-plugin/main.js b/code/cep-plugin/main.js index fdde7d9..3cab187 100755 --- a/code/cep-plugin/main.js +++ b/code/cep-plugin/main.js @@ -283,11 +283,17 @@ function tiposVideoRenderizarLista() { var item = document.createElement("div"); item.className = "video-type-row" + (tipo.id === tipoVideoAtualId ? " is-selected" : ""); item.setAttribute("role", "listitem"); - item.innerHTML = '
'; + item.innerHTML = '
'; item.querySelector("strong").textContent = tipo.nome; item.querySelector("span").textContent = tipo.descricao; item.querySelector(".video-type-meta").textContent = tipo.duracao_maxima_segundos + " s · " + tipo.proporcao + " · " + tipo.canais; - item.querySelector("button").onclick = function () { tipoVideoEditar(tipo.id); }; + item.querySelector(".video-type-status").textContent = tipo.ativo === false ? "Inativo" : "Ativo"; + item.querySelector(".video-type-status").setAttribute("data-state", tipo.ativo === false ? "inactive" : "active"); + item.querySelector(".video-type-edit").onclick = function () { tipoVideoEditar(tipo.id); }; + item.querySelector(".video-type-duplicate").onclick = function () { tipoVideoDuplicar(tipo.id); }; + item.querySelector(".video-type-toggle").textContent = tipo.ativo === false ? "Ativar" : "Inativar"; + item.querySelector(".video-type-toggle").onclick = function () { tipoVideoAlternarAtivo(tipo.id); }; + item.querySelector(".video-type-copy").onclick = function () { tipoVideoEditar(tipo.id); }; lista.appendChild(item); }); } @@ -426,6 +432,43 @@ function tipoVideoSalvar() { } catch (erro) { showToast("err", erro.message); } } +function tipoVideoDuplicar(id) { + var origem = tiposVideoLer().filter(function (item) { return item.id === id; })[0]; + if (!origem) return; + var copia = JSON.parse(JSON.stringify(origem)); + copia.id = origem.id + "-copia-" + Date.now(); + copia.nome = origem.nome + " (cópia)"; + copia.ativo = true; + copia.criado_em = new Date().toISOString(); + copia.atualizado_em = copia.criado_em; + var lista = tiposVideoLer(); + lista.push(copia); + tiposVideoSalvarNoCatalogo(lista); + tipoVideoAtualId = copia.id; + tipoVideoPreencher(copia); + document.getElementById("tipoVideoEditorTitulo").textContent = "Editar tipo de vídeo"; + document.getElementById("tipoVideoEditorStatus").textContent = "Cópia criada"; + document.getElementById("tipoVideoEditorCard").hidden = false; + document.getElementById("tiposVideoStatus").textContent = "Perfil duplicado. Revise os campos e salve a cópia."; + tiposVideoRenderizarLista(); + showToast("ok", "Perfil duplicado. Você pode ajustar a cópia antes de salvar."); +} + +function tipoVideoAlternarAtivo(id) { + var lista = tiposVideoLer(); + var item = lista.filter(function (perfil) { return perfil.id === id; })[0]; + if (!item) return; + item.ativo = item.ativo === false; + item.atualizado_em = new Date().toISOString(); + tiposVideoSalvarNoCatalogo(lista); + if (tipoVideoAtualId === id) { + document.getElementById("tipoVideoAtivo").checked = item.ativo; + document.getElementById("tipoVideoEditorStatus").textContent = item.ativo ? "Ativo" : "Inativo"; + } + tiposVideoRenderizarLista(); + showToast("ok", item.ativo ? "Perfil ativado." : "Perfil inativado."); +} + function tipoVideoCancelar() { tipoVideoAtualId = null; document.getElementById("tipoVideoEditorCard").hidden = true; diff --git a/code/cep-plugin/styles.css b/code/cep-plugin/styles.css index 039a7da..8a2f5fe 100755 --- a/code/cep-plugin/styles.css +++ b/code/cep-plugin/styles.css @@ -393,11 +393,16 @@ textarea { padding: 8px 10px; font: 10px var(--font-mono); color: var(--text-sec .video-type-row { display: flex; align-items: center; gap: 9px; padding: 9px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-deep); } .video-type-row.is-selected { border-color: rgba(155, 108, 255, .55); background: var(--violet-soft); } .video-type-copy { flex: 1; min-width: 0; } +.video-type-copy { cursor: pointer; } .video-type-copy strong, .video-type-copy span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .video-type-copy strong { color: var(--text); font-size: 10.5px; font-weight: 650; } .video-type-copy span { margin-top: 3px; color: var(--text-muted); font-size: 9px; } .video-type-meta { max-width: 32%; overflow: hidden; color: var(--text-muted); font: 8.5px var(--font-mono); text-overflow: ellipsis; white-space: nowrap; } -.video-type-row .button { height: 27px; padding: 0 9px; flex: 0 0 auto; font-size: 9px; } +.video-type-status { flex: 0 0 auto; padding: 3px 7px; border-radius: 12px; font-size: 8.5px; font-weight: 650; } +.video-type-status[data-state="active"] { background: var(--green-soft); color: var(--green); } +.video-type-status[data-state="inactive"] { background: var(--surface-raised); color: var(--text-muted); } +.video-type-actions { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; } +.video-type-row .button { height: 27px; padding: 0 8px; flex: 0 0 auto; font-size: 9px; } .profile-section { margin-top: 12px; padding: 12px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface-deep); } .profile-section-head { display: flex; align-items: center; gap: 9px; margin-bottom: 11px; } .profile-section-head > span { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex: 0 0 auto; border-radius: 50%; background: var(--violet-soft); color: var(--violet-hover); font-size: 10px; font-weight: 700; }