Adds period filter to event page

Makefile

@@ -20,7 +20,7 @@ container_php:
 
 # Instala dependências dentro do contêiner PHP
 install_dependencies:
-	docker compose exec -T php bash -c "composer install"
+	docker compose exec -T php bash -c "COMPOSER_MEMORY_LIMIT=-1 composer install"
 
 # Gera os arquivos de Proxies do MongoDB
 generate_proxies:
@@ -71,12 +71,12 @@ reset:
 # Limpa a cache e o banco
 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"

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

@@ -1,13 +1,13 @@
 const BTN_OPEN_FILTER = document.getElementById('open-filter');
-const BTN_CLOSE_FILER = document.getElementById('close-filter');
+const BTN_CLOSE_FILTER = document.getElementById('close-filter');
 const SIDEBAR = document.getElementById('filter-sidebar');
 const MAIN_CONTENT = document.querySelector('.entity-container');
 const ENTITY_WRAPPER = document.querySelector('.entity-wrapper');
 const FORM_FILTER_SIDEBAR = document.getElementById('filter-sidebar');
 const ORDER_SELECT = document.getElementById('order-select');
 
 BTN_OPEN_FILTER.addEventListener('click', toggleSidebar);
-BTN_CLOSE_FILER.addEventListener('click', toggleSidebar);
+BTN_CLOSE_FILTER.addEventListener('click', toggleSidebar);
 
 function toggleSidebar() {
     SIDEBAR.classList.toggle('open');
@@ -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;
+}

composer.json

@@ -100,6 +100,7 @@
         "symfony/browser-kit": "7.1.*",
         "symfony/css-selector": "7.1.*",
         "symfony/maker-bundle": "^1.60",
-        "symfony/phpunit-bridge": "^7.1"
+        "symfony/phpunit-bridge": "^7.1",
+        "symfony/stopwatch": "7.1.*"
     }
 }

cypress/e2e/web/event/event-list.cy.js

@@ -58,11 +58,24 @@ describe('Pagina de listar Eventos', () => {
     });
 
     it('Garante que o filtro funciona', () => {
-        cy.get('#open-filter').click();
-        cy.get('#event-name').type('Festival da Rapadura');
+        cy.get('[id=open-filter]').click();
+        cy.scrollTo('top');
+        cy.contains('Ver calendário').click();
+        cy.get('[data-cy=dropdown-calendar]').should('be.visible');
+        cy.get('[data-cy=dropdown-calendar] .air-datepicker-nav--title')
+            .click()
+            .click();
+        cy.get('[data-cy=dropdown-calendar]').contains('2024').click();
+        cy.get('[data-cy=dropdown-calendar]').contains('Jul').click();
+        cy.get('[data-cy=dropdown-calendar]').contains('9').click();
+        cy.get('[data-cy=dropdown-calendar] [data-action=next]').click();
+        cy.get('[data-cy=dropdown-calendar] [data-date="2"]').click();
+        cy.get('#period').should('have.value', '2024-07-09,2024-08-02');
+        cy.get('#period').should('contain.text', '09/07/2024 - 02/08/2024');
+        cy.get('#event-name').type('sertão');
         cy.get('#apply-filters').click();
         cy.get('.total-events').contains('1 Eventos Encontrados').should('be.visible');
-        cy.get('.event-name').contains('Festival da Rapadura').should('be.visible');
+        cy.get('.event-name').contains('Festival Sertão Criativo').should('be.visible');
     });
 
     it('Garante que o botão de limpar filtros funciona', () => {

docker-compose.yml

@@ -9,6 +9,7 @@ services:
     volumes:
       - ./:/var/www
       - ./docker/php/local.ini:/usr/local/etc/php/conf.d/local.ini
+      - ./docker/php/99-xdebug.ini:/usr/local/etc/php/conf.d/docker-php-ext-xdebug.ini
     networks:
       - aurora_network
 

docker/php/99-xdebug.ini

@@ -0,0 +1,9 @@
+zend_extension=xdebug.so
+xdebug.mode=coverage,develop,debug
+xdebug.start_with_request=trigger
+xdebug.discover_client_host=0
+xdebug.client_host=host.docker.internal
+xdebug.output_dir=/var/www
+xdebug.log=/var/www/xdebug.log
+xdebug.log_level=10
+xdebug.show_local_vars=1

importmap.php

@@ -45,4 +45,23 @@
     '@iconify/iconify' => [
         'version' => '3.1.1',
     ],
+    'air-datepicker' => [
+        'version' => '3.5.3',
+    ],
+    'air-datepicker/locale/en.js' => [
+        'version' => '3.5.3',
+    ],
+    'air-datepicker/locale/es.js' => [
+        'version' => '3.5.3',
+    ],
+    'air-datepicker/locale/pt-BR.js' => [
+        'version' => '3.5.3',
+    ],
+    'air-datepicker/locale/pt-br.js' => [
+        'path' => 'vendor/air-datepicker/locale/pt-BR.js',
+    ],
+    'air-datepicker/air-datepicker.css' => [
+        'version' => '3.5.3',
+        'type' => 'css',
+    ],
 ];

package.json

@@ -1,8 +1,12 @@
 {
+  "scripts": {
+    "watch-assets": "nodemon --watch assets/ --ext js,css,scss,twig --exec \"make compile_frontend\""
+  },
   "devDependencies": {
     "cypress": "^13.13.2",
     "cypress-file-upload": "^5.0.8",
     "dotenv": "^16.4.5",
-    "node": "^22.6.0"
+    "node": "^22.6.0",
+    "nodemon": "^3.1.9"
   }
 }