From c6129a1c63a3fa5a68269cb85f6ec2d61182717b Mon Sep 17 00:00:00 2001 From: Ricardo Carneiro Date: Sat, 16 Aug 2025 18:55:17 -0300 Subject: [PATCH] feat: links sociais opcionais --- src/BCards.Web/Controllers/AdminController.cs | 25 + .../ViewModels/CreatePageViewModel.cs | 4 - src/BCards.Web/Views/Admin/CreatePage.cshtml | 16 +- src/BCards.Web/Views/Admin/ManagePage.cshtml | 505 +++++++++++++++--- 4 files changed, 469 insertions(+), 81 deletions(-) diff --git a/src/BCards.Web/Controllers/AdminController.cs b/src/BCards.Web/Controllers/AdminController.cs index 2786714..89dfb18 100644 --- a/src/BCards.Web/Controllers/AdminController.cs +++ b/src/BCards.Web/Controllers/AdminController.cs @@ -4,6 +4,7 @@ using BCards.Web.Utils; using BCards.Web.ViewModels; using Microsoft.AspNetCore.Authorization; using Microsoft.AspNetCore.Mvc; +using Microsoft.AspNetCore.Mvc.ModelBinding; using System.Security.Claims; namespace BCards.Web.Controllers; @@ -159,8 +160,16 @@ public class AdminController : Controller if (user == null) return RedirectToAction("Login", "Auth"); + // Limpar campos de redes sociais que são apenas espaços (tratados como vazios) + CleanSocialMediaFields(model); + _logger.LogInformation($"ManagePage POST: IsNewPage={model.IsNewPage}, DisplayName={model.DisplayName}, Category={model.Category}, Links={model.Links?.Count ?? 0}"); + ModelState.Remove(x => x.InstagramUrl); + ModelState.Remove(x => x.FacebookUrl); + ModelState.Remove(x => x.TwitterUrl); + ModelState.Remove(x => x.WhatsAppNumber); + if (!ModelState.IsValid) { _logger.LogWarning("ModelState is invalid:"); @@ -958,4 +967,20 @@ public class AdminController : Controller }); } } + + private void CleanSocialMediaFields(ManagePageViewModel model) + { + // Tratar espaço em branco como campo vazio para redes sociais + if (string.IsNullOrWhiteSpace(model.WhatsAppNumber) || model.WhatsAppNumber.Trim().Length <= 1) + model.WhatsAppNumber = string.Empty; + + if (string.IsNullOrWhiteSpace(model.FacebookUrl) || model.FacebookUrl.Trim().Length <= 1) + model.FacebookUrl = string.Empty; + + if (string.IsNullOrWhiteSpace(model.InstagramUrl) || model.InstagramUrl.Trim().Length <= 1) + model.InstagramUrl = string.Empty; + + if (string.IsNullOrWhiteSpace(model.TwitterUrl) || model.TwitterUrl.Trim().Length <= 1) + model.TwitterUrl = string.Empty; + } } \ No newline at end of file diff --git a/src/BCards.Web/ViewModels/CreatePageViewModel.cs b/src/BCards.Web/ViewModels/CreatePageViewModel.cs index 510be65..338b7a3 100644 --- a/src/BCards.Web/ViewModels/CreatePageViewModel.cs +++ b/src/BCards.Web/ViewModels/CreatePageViewModel.cs @@ -20,16 +20,12 @@ public class CreatePageViewModel [Required(ErrorMessage = "Tema é obrigatório")] public string SelectedTheme { get; set; } = "minimalist"; - [Phone(ErrorMessage = "Número de WhatsApp inválido")] public string WhatsAppNumber { get; set; } = string.Empty; - [Url(ErrorMessage = "URL do Facebook inválida")] public string FacebookUrl { get; set; } = string.Empty; - [Url(ErrorMessage = "URL do X/Twitter inválida")] public string TwitterUrl { get; set; } = string.Empty; - [Url(ErrorMessage = "URL do Instagram inválida")] public string InstagramUrl { get; set; } = string.Empty; public List Links { get; set; } = new(); diff --git a/src/BCards.Web/Views/Admin/CreatePage.cshtml b/src/BCards.Web/Views/Admin/CreatePage.cshtml index bba9113..fd057ca 100644 --- a/src/BCards.Web/Views/Admin/CreatePage.cshtml +++ b/src/BCards.Web/Views/Admin/CreatePage.cshtml @@ -548,18 +548,26 @@ function generateLinksData() { } }); - // Create hidden inputs for links - $('#linksContainer').append('
'); - $('#linksData').empty(); + // Remove existing hidden link inputs + $('input[name^="Links["]').remove(); + // Create hidden inputs for links directly in the form links.forEach((link, index) => { - $('#linksData').append(` + $('#createPageForm').append(` `); }); + + // Debug: Log what we're sending + console.log('=== DEBUG GENERATELINKSDATA ==='); + console.log('Links found:', links.length); + links.forEach((link, index) => { + console.log(`Link ${index}:`, link); + }); + console.log('=== FIM DEBUG ==='); } function generatePreview() { diff --git a/src/BCards.Web/Views/Admin/ManagePage.cshtml b/src/BCards.Web/Views/Admin/ManagePage.cshtml index a57e256..0615aa5 100644 --- a/src/BCards.Web/Views/Admin/ManagePage.cshtml +++ b/src/BCards.Web/Views/Admin/ManagePage.cshtml @@ -354,53 +354,96 @@
-

Conecte suas redes sociais (todos os campos são opcionais):

- -
-
-
- - - -
-
- -
-
- - - -
-
+
+ + Redes Sociais Opcionais +

Marque apenas as redes sociais que você quer conectar. Todas são opcionais e você pode pular esta etapa.

-
-
- - - +
+ +
+
+ + +
+ + Exemplo: 5511999999999 (código do país + DDD + número) + + +
+ + +
+
+ + +
+ + +
-
-
- - +
+ +
+
+ + +
+ +
+ + +
+
+ + +
+ + + +
@@ -408,15 +451,10 @@ -
- - -
+
@@ -674,6 +712,60 @@ box-shadow: 0 4px 8px rgba(0,0,0,0.15); } +/* Social Media Input Groups */ +.social-input-group .input-group-text { + min-width: 180px; + justify-content: flex-start; + background-color: #f8f9fa; + border-right: none; + font-size: 0.9rem; + font-weight: 500; +} + +.social-input-group .form-control { + border-left: none; +} + +.social-input-group .form-control:focus { + border-color: #80bdff; + box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25); +} + +.form-check-label { + cursor: pointer; + font-weight: 500; + transition: color 0.2s ease; +} + +.form-check-label:hover { + color: #0056b3; +} + +.form-check-input:checked + .form-check-label { + color: #198754; +} + +.social-input-group { + transition: all 0.3s ease; +} + +/* Estados de validação */ +.form-control.is-valid { + border-color: #198754; + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='m2.3 6.73.99-.99 1.99-1.99L6.98 2.99l-.99-.99L4.49 3.5 3.5 2.51 2.51 3.5z'/%3e%3c/svg%3e"); + background-repeat: no-repeat; + background-position: right calc(0.375em + 0.1875rem) center; + background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem); +} + +.form-control.is-invalid { + border-color: #dc3545; + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath d='m5.8 4.6 1.4 1.4m0 0 1.4 1.4m-1.4-1.4L5.8 8.4m1.4-1.4L8.6 5.6'/%3e%3c/svg%3e"); + background-repeat: no-repeat; + background-position: right calc(0.375em + 0.1875rem) center; + background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem); +} + /* Product Link Preview Styles */ .product-link-preview { background: rgba(25, 135, 84, 0.05); @@ -709,6 +801,27 @@ let currentStep = 1; $(document).ready(function() { + // Initialize social media fields + initializeSocialMedia(); + + // Check for validation errors and show toast + open accordion + checkValidationErrors(); + + // Garantir que campos não marcados sejam string vazia ao submeter + $('form').on('submit', function() { + ensureUncheckedFieldsAreEmpty(); + + // Debug: Verificar quais campos de links estão sendo enviados + console.log('=== DEBUG FORM SUBMISSION ==='); + const formData = new FormData(this); + for (let [key, value] of formData.entries()) { + if (key.includes('Links[')) { + console.log(`${key}: ${value}`); + } + } + console.log('=== FIM DEBUG ==='); + }); + // Generate slug when name or category changes $('#DisplayName, #Category').on('input change', function() { generateSlug(); @@ -867,13 +980,27 @@ } function addLinkInput(title = '', url = '', description = '', icon = '', linkType = 'Normal', id='new') { + // Encontrar o próximo índice disponível baseado em todos os campos Links[] existentes + const existingIndexes = []; + $('input[name^="Links["]').each(function() { + const name = $(this).attr('name'); + const match = name.match(/Links\[(\d+)\]/); + if (match) { + existingIndexes.push(parseInt(match[1])); + } + }); + + // Encontrar o próximo índice disponível + const nextIndex = existingIndexes.length > 0 ? Math.max(...existingIndexes) + 1 : 0; + const iconHtml = icon ? `` : ''; + const displayCount = $('.link-input-group').length + 1; const linkHtml = ` -
+
- ${iconHtml}Link ${linkCount + 1}: ${title || 'Novo Link'} + ${iconHtml}Link ${displayCount}: ${title || 'Novo Link'}
`; @@ -1010,11 +1136,25 @@ } function addProductLinkInput(title, url, description, price, image, id='new') { + // Encontrar o próximo índice disponível baseado em todos os campos Links[] existentes + const existingIndexes = []; + $('input[name^="Links["]').each(function() { + const name = $(this).attr('name'); + const match = name.match(/Links\[(\d+)\]/); + if (match) { + existingIndexes.push(parseInt(match[1])); + } + }); + + // Encontrar o próximo índice disponível + const nextIndex = existingIndexes.length > 0 ? Math.max(...existingIndexes) + 1 : 0; + const displayCount = $('.link-input-group').length + 1; + const linkHtml = ` -
+
- Link de Produto ${linkCount + 1} + Link de Produto ${displayCount}
- - - - - - - - - - - - + + + + + + + + + + + +
`; @@ -1104,6 +1244,225 @@ $toast.remove(); }, 5000); } + + // Validation Error Handling + function checkValidationErrors() { + // Só verificar erros se estamos em um POST-back (ou seja, se ModelState foi validado) + // Verificamos se existe algum input com validation-error class ou summary de erros + const hasValidationSummary = $('.validation-summary-errors').length > 0; + const hasFieldErrors = $('.input-validation-error').length > 0; + + if (!hasValidationSummary && !hasFieldErrors) { + return; // Não há erros reais de validação, sair + } + + const errorElements = $('.text-danger:not(:empty)').filter(function() { + // Filtrar apenas spans que realmente têm mensagens de erro + const text = $(this).text().trim(); + return text.length > 0; + }); + + if (errorElements.length > 0) { + // Find which accordion steps have errors + const stepsWithErrors = []; + + errorElements.each(function() { + const $error = $(this); + const $accordion = $error.closest('.accordion-item'); + + if ($accordion.length > 0) { + const stepNumber = getStepNumber($accordion); + if (stepNumber && !stepsWithErrors.includes(stepNumber)) { + stepsWithErrors.push(stepNumber); + } + } + }); + + if (stepsWithErrors.length > 0) { + // Show validation error toast + showValidationErrorToast(stepsWithErrors); + + // Open first accordion with error + const firstErrorStep = Math.min(...stepsWithErrors); + openAccordionStep(firstErrorStep); + } + } + } + + function getStepNumber($accordion) { + const id = $accordion.find('.accordion-collapse').attr('id'); + const stepMap = { + 'collapseBasic': 1, + 'collapseLinks': 3, + 'collapseSocial': 4 + }; + return stepMap[id] || null; + } + + function openAccordionStep(stepNumber) { + const stepMap = { + 1: '#collapseBasic', + 3: '#collapseLinks', + 4: '#collapseSocial' + }; + + const targetId = stepMap[stepNumber]; + if (targetId) { + $(targetId).collapse('show'); + } + } + + function showValidationErrorToast(stepsWithErrors) { + const stepNames = { + 1: 'Informações Básicas', + 3: 'Links', + 4: 'Redes Sociais' + }; + + const errorStepNames = stepsWithErrors.map(step => stepNames[step]).join(', '); + + const toastHtml = ` + + `; + + const $toast = $(toastHtml); + $('body').append($toast); + + const toast = new bootstrap.Toast($toast[0], { delay: 4000 }); + toast.show(); + + // Remove toast after it's hidden + $toast.on('hidden.bs.toast', function() { + $(this).remove(); + }); + } + + // Garantir que campos não selecionados sejam string vazia + function ensureUncheckedFieldsAreEmpty() { + const socialFields = [ + { checkbox: '#enableWhatsApp', hidden: 'input[name="WhatsAppNumber"]' }, + { checkbox: '#enableFacebook', hidden: 'input[name="FacebookUrl"]' }, + { checkbox: '#enableInstagram', hidden: 'input[name="InstagramUrl"]' }, + { checkbox: '#enableTwitter', hidden: 'input[name="TwitterUrl"]' } + ]; + + socialFields.forEach(field => { + if (!$(field.checkbox).is(':checked')) { + $(field.hidden).val(' '); // Forçar espaço para campos não marcados + } + }); + } + + // Social Media Functions + function initializeSocialMedia() { + // WhatsApp + setupSocialField('WhatsApp', 'WhatsAppNumber', 'https://wa.me/', true); + + // Facebook + setupSocialField('Facebook', 'FacebookUrl', 'https://facebook.com/', false); + + // Instagram + setupSocialField('Instagram', 'InstagramUrl', 'https://instagram.com/', false); + + // Twitter + setupSocialField('Twitter', 'TwitterUrl', 'https://x.com/', false); + } + + function setupSocialField(name, hiddenFieldName, prefix, isWhatsApp) { + const checkbox = $(`#enable${name}`); + const groupName = name.toLowerCase(); + const group = $(`#${groupName}Group`); + const userInput = isWhatsApp ? $(`#${groupName}Number`) : $(`#${groupName}User`); + const hiddenField = $(`input[name="${hiddenFieldName}"]`); + + // SEMPRE garantir que hidden field tenha um valor (espaço se vazio) + if (!hiddenField.val() || hiddenField.val().trim() === '') { + hiddenField.val(' '); // Espaço em branco para evitar null + } + + // Verificar se já tem valor e configurar estado inicial + const currentValue = hiddenField.val(); + if (currentValue && currentValue.trim() !== '') { + checkbox.prop('checked', true); + group.show(); + + // Extrair username/número do valor atual + if (currentValue.startsWith(prefix)) { + const userPart = currentValue.replace(prefix, ''); + userInput.val(userPart); + } else { + userInput.val(currentValue); + } + } else { + // Se não tem valor, garantir que o hidden field seja espaço + hiddenField.val(' '); + } + + // Toggle visibility + checkbox.on('change', function() { + if ($(this).is(':checked')) { + group.slideDown(200); + userInput.focus(); + } else { + group.slideUp(200); + userInput.val(''); + hiddenField.val(' '); // Espaço em branco para evitar null - sobrescreve valor existente + } + }); + + // Atualizar campo hidden em tempo real + userInput.on('input', function() { + let value = $(this).val().trim(); + + if (isWhatsApp) { + // WhatsApp: apenas números + value = value.replace(/\D/g, ''); + $(this).val(value); + } + + // Atualizar campo hidden - SEMPRE string, nunca null + if (value) { + hiddenField.val(prefix + value); + } else { + hiddenField.val(' '); // Espaço em branco para evitar null + } + + // Feedback visual + updateSocialFieldFeedback(userInput, value, isWhatsApp); + }); + } + + function updateSocialFieldFeedback(input, value, isWhatsApp) { + // Remover classes anteriores + input.removeClass('is-valid is-invalid'); + + if (!value) return; + + if (isWhatsApp) { + // Validar WhatsApp (mínimo 10 dígitos) + if (value.length >= 10) { + input.addClass('is-valid'); + } else { + input.addClass('is-invalid'); + } + } else { + // Validar username (mínimo 3 caracteres, sem espaços) + if (value.length >= 3 && !/\s/.test(value)) { + input.addClass('is-valid'); + } else { + input.addClass('is-invalid'); + } + } + } }