Adds period filter to event page (#672)

Author: ronnyjohnti

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';

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(' - ');
+        }
+    }
+})();

assets/js/navbar-dropdown.js

@@ -1,25 +1,23 @@
 document.addEventListener('DOMContentLoaded', () => {
     function toggleDropdown() {
         const dropdownMenu = document.getElementById("customDropdown");
-        dropdownMenu.classList.toggle("show");
+        dropdownMenu?.classList.toggle("show");
 
         setTimeout(() => {
-            document.getElementById("dropdownMenuButton").blur();
+            document.getElementById("dropdownMenuButton")?.blur();
         }, 100);
     }
 
     const dropdownButton = document.getElementById("dropdownMenuButton");
-    if (dropdownButton) {
-        dropdownButton.addEventListener('click', (e) => {
-            e.stopPropagation();
-            toggleDropdown();
-        });
-    }
+    dropdownButton?.addEventListener('click', (e) => {
+        e.stopPropagation();
+        toggleDropdown();
+    });
 
     document.addEventListener('click', (event) => {
         const dropdownMenu = document.getElementById("customDropdown");
 
-        if (dropdownMenu && dropdownMenu.classList.contains('show')) {
+        if (dropdownMenu?.classList.contains('show')) {
             if (!dropdownButton.contains(event.target) && !dropdownMenu.contains(event.target)) {
                 dropdownMenu.classList.remove('show');
             }

assets/js/side-filter.js

@@ -16,13 +16,13 @@ function toggleSidebar() {
 
     if (SIDEBAR.classList.contains('open')) {
         BTN_OPEN_FILTER.style.visibility = 'hidden';
-        BTN_OPEN_FILTER.style.opacity = 0;
+        BTN_OPEN_FILTER.style.opacity = '0';
         return;
     }
 
     setTimeout(() => {
         BTN_OPEN_FILTER.style.visibility = 'visible';
-        BTN_OPEN_FILTER.style.opacity = 1;
+        BTN_OPEN_FILTER.style.opacity = '1';
     }, 300);
 }
 

assets/styles/lib/air-datepicker-custom.css

@@ -0,0 +1,76 @@
+.air-datepicker-cell {
+    border: 2px solid var(--adp-border-color-inner);
+}
+
+.air-datepicker-cell.-day- {
+    aspect-ratio: 1;
+}
+
+.air-datepicker-body--cells {
+    gap: .3rem;
+}
+
+.air-datepicker-body--cells.-days- {
+    grid-auto-rows: initial;
+}
+
+.air-datepicker-nav {
+    border-bottom: initial;
+}
+
+.air-datepicker-nav--title, .air-datepicker-nav--action {
+    font-weight: bold;
+}
+
+.air-datepicker-nav--action {
+    border-radius: 50%;
+    border: 1px solid var(--adp-accent-color);
+    aspect-ratio: 1;
+    display: block;
+    padding: 0;
+}
+
+.air-datepicker-nav--action path {
+    stroke: var(--adp-accent-color);
+}
+
+.air-datepicker-nav--title {
+    background-color: var(--adp-accent-color);
+    color: var(--adp-background-color);
+    font-size: 14px;
+}
+
+.air-datepicker-nav--title i {
+    color: var(--adp-background-color);
+}
+
+.air-datepicker-nav--title:hover, .air-datepicker-nav--title:hover i {
+    color: var(--adp-accent-color);
+}
+
+.air-datepicker {
+    --adp-font-size: 10px;
+    --adp-background-color: var(--bs-body-bg);
+    --adp-background-color-hover: var(--bs-primary-bg-subtle);
+    --adp-background-color-active: var(--bs-primary-bg-subtle);
+    --adp-background-color-in-range: rgba(var(--bs-primary-rgb), .1);
+    --adp-background-color-in-range-focused: rgba(var(--bs-primary-rgb), .2);
+    --adp-background-color-selected-other-month-focused: var(--bs-primary-bg-subtle);
+    --adp-background-color-selected-other-month: var(--bs-primary-bg-subtle);
+    --adp-color: var(--bs-body-color);
+    --adp-color-secondary: var(--bs-secondary-color);
+    --adp-accent-color: var(--bs-primary);
+    --adp-color-disabled: var(--bs-dropdown-link-disabled-color);
+    --adp-color-disabled-in-range: var(--bs-nav-link-disabled-color);
+    --adp-border-color: var(--bs-secondary-border-subtle);
+    --adp-day-name-color: var(--adp-color);
+    --adp-cell-border-radius: 7px;
+    --adp-cell-background-color-selected: var(--bs-primary);
+    --adp-cell-background-color-selected-hover: var(--bs-primary);
+    --adp-cell-background-color-in-range: var(--bs-primary-bg-subtle);
+    --adp-cell-background-color-in-range-hover: var(--bs-primary-border-subtle);
+}
+
+.air-datepicker {
+    border: initial;
+}