Atualização de Responsividade

Makefile

@@ -1,15 +1,7 @@
 # Makefile para automatizar setup do projeto PHP com Docker
 
-include .env
-
 .PHONY: up install_dependencies generate_proxies migrate_database load_fixtures install_frontend compile_frontend generate_keys
 
-# Função para bloquear comandos em produção
-guard-not-prod:
-ifeq ($(APP_ENV),prod)
-	$(error Este comando não pode ser executado em produção)
-endif
-
 # Inicia os serviços Docker em modo detached
 up:
 	docker compose up -d
@@ -28,7 +20,7 @@ container_php:
 
 # Instala dependências dentro do contêiner PHP
 install_dependencies:
-	docker compose exec -T php bash -c "composer install --ignore-platform-req=ext-mongodb"
+	docker compose exec -T php bash -c "COMPOSER_MEMORY_LIMIT=-1 composer install"
 
 # Gera os arquivos de Proxies do MongoDB
 generate_proxies:
@@ -46,56 +38,45 @@ migrate_odm:
 	docker compose exec -T php bash -c "php bin/console app:mongo:migrations:execute"
 
 # Executa as fixtures de dados
-load_fixtures: guard-not-prod
+load_fixtures:
 	docker compose exec -T php bash -c "php bin/console doctrine:fixtures:load -n --purge-exclusions=city --purge-exclusions=state"
 
 # Instala dependências do frontend
 install_frontend:
 	docker compose exec -T php bash -c "php bin/console importmap:install"
 
 # Compila os arquivos do frontend
-compile_frontend: reset
+compile_frontend:
 	docker compose exec -T php bash -c "php bin/console asset-map:compile"
 
-# Abre uma instância gráfica do cypress
-open_cypress: load_fixtures
-	xhost +local:
-	CYPRESS_MODE=open docker compose --profile tests up
-
 # Executa as fixtures de dados e os testes de front-end
-tests_front: guard-not-prod
-	if [ "$(fixtures)" != "no" ]; then \
-		make load_fixtures;\
-	fi;
+tests_front: load_fixtures
 	docker compose up cypress
 
 # Executa as fixtures de dados e os testes de back-end
-tests_back:	guard-not-prod
+tests_back:
 	if [ "$(fixtures)" != "no" ]; then \
 		make load_fixtures;\
 	fi;
 	docker compose exec -T php bash -c "php bin/paratest $(filename) --no-coverage"
 
 # Executa as fixtures de dados e os testes de back-end
-tests_back_coverage: guard-not-prod
-	if [ "$(fixtures)" != "no" ]; then \
-		make load_fixtures;\
-	fi;
+tests_back_coverage: load_fixtures
 	docker compose exec -T php bash -c "php -d memory_limit=512M bin/paratest $(filename)"
 
 # Limpa o cache do projeto
 reset:
 	docker compose exec -T php bash -c "php bin/console cache:clear"
 
 # Limpa a cache e o banco
-reset-deep:	guard-not-prod
+reset-deep:
 	rm -rf var/storage
-	rm -rf assets/uploads
+	docker compose exec -T php bash -c "rm -rf assets/uploads"
 	rm -rf assets/vendor
 	rm -rf public/assets
-	rm -rf var/cache
-	rm -rf var/log
-	docker compose exec -T php bash -c "php bin/console cache:clear"
+	docker compose exec -T php bash -c "rm -rf var/cache"
+	docker compose exec -T php bash -c "rm -rf var/log"
+	docker compose exec -T php bash -c "php -d memory_limit=-1 bin/console cache:clear"
 	docker compose exec -T php bash -c "php bin/console doctrine:mongodb:schema:drop --search-index"
 	docker compose exec -T php bash -c "php bin/console doctrine:mongodb:schema:drop --collection"
 	docker compose exec -T php bash -c "php bin/console doctrine:mongodb:schema:drop --db"
@@ -112,9 +93,6 @@ style:
 	docker compose exec -T php bash -c "php vendor/bin/phpcs --config-set installed_paths src/Standards"
 	docker compose exec -T php bash -c "php vendor/bin/phpcs"
 
-create-admin-user:
-	docker compose exec -T php bash -c "php bin/console app:create-admin-user"
-
 # Gera as chaves de autenticação JWT
 generate_keys:
 	docker compose exec -T php bash -c "php bin/console lexik:jwt:generate-keypair --overwrite -n"
@@ -124,11 +102,5 @@ copy_dist:
 	cp phpcs.xml.dist phpcs.xml
 	cp phpunit.xml.dist phpunit.xml
 
-permissions:
-	mkdir -p var/
-	mkdir -p vendor/
-	mkdir -p config/jwt
-	chmod -R 775 assets/ config/jwt var/ vendor/ public/
-
 # Comando para rodar todos os passos juntos
-setup: guard-not-prod up install_dependencies copy_dist reset-deep generate_proxies migrate_database load_fixtures install_frontend compile_frontend generate_keys
+setup: up install_dependencies copy_dist reset-deep generate_proxies migrate_database load_fixtures install_frontend compile_frontend generate_keys

assets/app.js

@@ -1,3 +1,6 @@
+import 'air-datepicker/air-datepicker.css';
+import './styles/lib/air-datepicker-custom.css';
+
 import './styles/app.css';
 import './styles/components/navbar.css';
 import './styles/components/footer.css';
@@ -7,6 +10,7 @@ import './styles/components/side-bar.css';
 import './styles/components/title.css';
 import './styles/components/form-step.css';
 import './js/modal-confirm-remove.js';
+import './js/_components/copy-id.js';
 
 import './js/navbar-dropdown.js';
 import '@iconify/iconify';

assets/js/banner-cropper.js

@@ -0,0 +1,116 @@
+document.addEventListener('DOMContentLoaded', () => {
+    document.querySelectorAll('.js-cropper-input')
+        .forEach(input => new ImageCropper(input));
+});
+
+class ImageCropper {
+    constructor(inputElement) {
+        this.input = inputElement;
+
+        this.config = {
+            modalId: this.input.dataset.modalId,
+            previewSelector: this.input.dataset.preview,
+            aspectRatio: parseFloat(this.input.dataset.aspectRatio) || (16 / 9)
+        };
+
+        this.modalEl = document.getElementById(this.config.modalId);
+
+        if (!this.modalEl) {
+            return console.error(`ImageCropper: Modal "${this.config.modalId}" não encontrado.`);
+        }
+
+        this.imageEl = this.modalEl.querySelector('.image-to-crop');
+        this.saveBtn = this.modalEl.querySelector('.crop-save-btn');
+        this.previewEl = document.querySelector(this.config.previewSelector);
+
+        this.cropper = null;
+        this.bsModal = this.getBootstrapModal();
+
+        this.init();
+    }
+
+    init() {
+        if (!this.imageEl) return console.error('ImageCropper: Imagem .image-to-crop não encontrada.');
+
+        this.input.addEventListener('change', (e) => this.handleInputChange(e));
+        this.modalEl.addEventListener('shown.bs.modal', () => this.initCropperInstance());
+        this.modalEl.addEventListener('hidden.bs.modal', () => this.destroyCropperInstance());
+
+        if (this.saveBtn) {
+            this.saveBtn.addEventListener('click', () => this.handleSave());
+        }
+    }
+
+    getBootstrapModal() {
+        if (typeof bootstrap !== 'undefined') return new bootstrap.Modal(this.modalEl);
+        if (window.bootstrap) return new window.bootstrap.Modal(this.modalEl);
+        return null;
+    }
+
+    handleInputChange(e) {
+        const files = e.target.files;
+
+        if (!files || files.length === 0) return;
+        const file = files[0];
+        this.input.value = '';
+        this.imageEl.src = URL.createObjectURL(file);
+        if (this.bsModal) this.bsModal.show();
+    }
+
+    initCropperInstance() {
+        if (this.cropper) this.cropper.destroy();
+
+        this.cropper = new Cropper(this.imageEl, {
+            aspectRatio: this.config.aspectRatio,
+            viewMode: 1,
+            autoCropArea: 1,
+        });
+    }
+
+    destroyCropperInstance() {
+        if (!this.cropper) return;
+
+        this.cropper.destroy();
+        this.cropper = null;
+        this.imageEl.src = '';
+    }
+
+    handleSave() {
+        if (!this.cropper) return;
+
+        this.cropper.getCroppedCanvas({
+            width: 1920,
+            imageSmoothingEnabled: true,
+            imageSmoothingQuality: 'high',
+        }).toBlob((blob) => this.processBlob(blob), 'image/jpeg', 0.9);
+    }
+
+    processBlob(blob) {
+        if (!blob) return;
+
+        const file = new File([blob], "imagem-editada.jpg", {
+            type: "image/jpeg",
+            lastModified: Date.now()
+        });
+
+        const container = new DataTransfer();
+        container.items.add(file);
+        this.input.files = container.files;
+        this.updatePreview(blob);
+
+        if (this.bsModal) this.bsModal.hide();
+    }
+
+    updatePreview(blob) {
+        if (!this.previewEl) return;
+
+        const url = URL.createObjectURL(blob);
+
+        if (this.previewEl.tagName === 'IMG') {
+            this.previewEl.src = url;
+            return;
+        }
+
+        this.previewEl.style.backgroundImage = `url('${url}')`;
+    }
+}

assets/js/event/period-filter.js

@@ -0,0 +1,74 @@
+import {getLocale} from "@symfony/ux-translator";
+import AirDatepicker from 'air-datepicker';
+import '../../styles/lib/air-datepicker-custom.css';
+const datepickerLocale = await import('air-datepicker/locale/'+getLocale()+'.js');
+
+const FORM_FILTER_SIDEBAR = document.getElementById('filter-sidebar');
+const PERIOD_SELECT = document.getElementById('period');
+const BTN_APPLY_PERIOD_FILTER = document.getElementById('apply-period-filter');
+const BTN_CLOSE_CALENDAR = document.getElementById('close-calendar');
+
+const datepicker = new AirDatepicker(document.getElementById('datepicker'), {
+    range: true,
+    multipleDates: true,
+    locale: await datepickerLocale.default.default,
+    onSelect: function ({ date, formattedDate }) {
+        const customPeriod = document.querySelector('#period option[data-name=custom]');
+        customPeriod.classList.remove('d-none');
+        customPeriod.innerText = formattedDate.join(' - ');
+
+        customPeriod.value = date.map(d => {
+            return d.getFullYear() + '-'
+                + (d.getMonth()+1).toString().padStart(2, '0') + '-'
+                + d.getDate().toString().padStart(2, '0');
+        }).join(',');
+        customPeriod.selected = true;
+
+        if (date.length === 2) {
+            customPeriod.selected = true;
+            BTN_CLOSE_CALENDAR.click();
+        }
+    },
+});
+
+PERIOD_SELECT.addEventListener('change', function () {
+    datepicker.clear({silent: true});
+    const customPeriod = document.querySelector('#period option[data-name=custom]');
+    customPeriod.classList.add('d-none');
+    customPeriod.innerText = '';
+});
+
+BTN_APPLY_PERIOD_FILTER.addEventListener('click', function () {
+    const period = PERIOD_SELECT.value;
+    const url = new URL(window.location.href);
+
+    url.searchParams.set('period', period);
+
+    window.location.href = url.toString();
+});
+
+(function () {
+    const searchParams = new URLSearchParams(window.location.search);
+
+    new FormData(FORM_FILTER_SIDEBAR).forEach(function (value, key) {
+        const element = FORM_FILTER_SIDEBAR.querySelector(`[name=${key}]`);
+        if (element) {
+            element.value = searchParams.get(key);
+        }
+    });
+
+    if ('' === PERIOD_SELECT.value) {
+        const period = searchParams.get('period');
+        if (period) {
+            const customPeriod = document.querySelector('#period option[data-name=custom]');
+            const periodInnerText = period.split(',').map(date => {
+                const [year, month, day] = date.split('-');
+                return `${day.padStart(2, '0')}/${month.padStart(2, '0')}/${year}`;
+            });
+
+            customPeriod.value = period;
+            customPeriod.selected = true;
+            customPeriod.innerText = periodInnerText.join(' - ');
+        }
+    }
+})();