Skip to content

Commit 89a97b7

Browse files
ronnyjohntironnyjohnti
committed
Adds period filter to event page
1 parent f8a3020 commit 89a97b7

File tree

22 files changed

+445
-47
lines changed

22 files changed

+445
-47
lines changed

‎Makefile‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ container_php:
2020

2121
# Instala dependências dentro do contêiner PHP
2222
install_dependencies:
23-
docker compose exec -T php bash -c "composer install"
23+
docker compose exec -T php bash -c "COMPOSER_MEMORY_LIMIT=-1 composer install"
2424

2525
# Gera os arquivos de Proxies do MongoDB
2626
generate_proxies:
@@ -71,12 +71,12 @@ reset:
7171
# Limpa a cache e o banco
7272
reset-deep:
7373
rm -rf var/storage
74-
rm -rf assets/uploads
74+
docker compose exec -T php bash -c "rm -rf assets/uploads"
7575
rm -rf assets/vendor
7676
rm -rf public/assets
77-
rm -rf var/cache
78-
rm -rf var/log
79-
docker compose exec -T php bash -c "php bin/console cache:clear"
77+
docker compose exec -T php bash -c "rm -rf var/cache"
78+
docker compose exec -T php bash -c "rm -rf var/log"
79+
docker compose exec -T php bash -c "php -d memory_limit=-1 bin/console cache:clear"
8080
docker compose exec -T php bash -c "php bin/console doctrine:mongodb:schema:drop --search-index"
8181
docker compose exec -T php bash -c "php bin/console doctrine:mongodb:schema:drop --collection"
8282
docker compose exec -T php bash -c "php bin/console doctrine:mongodb:schema:drop --db"

‎assets/app.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
import 'air-datepicker/air-datepicker.css';
2+
import './styles/lib/air-datepicker-custom.css';
3+
14
import './styles/app.css';
25
import './styles/components/navbar.css';
36
import './styles/components/footer.css';

‎assets/js/navbar-dropdown.js‎

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,23 @@
11
document.addEventListener('DOMContentLoaded', () => {
22
function toggleDropdown() {
33
const dropdownMenu = document.getElementById("customDropdown");
4-
dropdownMenu.classList.toggle("show");
4+
dropdownMenu?.classList.toggle("show");
55

66
setTimeout(() => {
7-
document.getElementById("dropdownMenuButton").blur();
7+
document.getElementById("dropdownMenuButton")?.blur();
88
}, 100);
99
}
1010

1111
const dropdownButton = document.getElementById("dropdownMenuButton");
12-
if (dropdownButton) {
13-
dropdownButton.addEventListener('click', (e) => {
14-
e.stopPropagation();
15-
toggleDropdown();
16-
});
17-
}
12+
dropdownButton?.addEventListener('click', (e) => {
13+
e.stopPropagation();
14+
toggleDropdown();
15+
});
1816

1917
document.addEventListener('click', (event) => {
2018
const dropdownMenu = document.getElementById("customDropdown");
2119

22-
if (dropdownMenu && dropdownMenu.classList.contains('show')) {
20+
if (dropdownMenu?.classList.contains('show')) {
2321
if (!dropdownButton.contains(event.target) && !dropdownMenu.contains(event.target)) {
2422
dropdownMenu.classList.remove('show');
2523
}

‎assets/js/side-filter.js‎

Lines changed: 71 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,20 @@
1+
import {getLocale} from "@symfony/ux-translator";
2+
import AirDatepicker from 'air-datepicker';
3+
import '../styles/lib/air-datepicker-custom.css';
4+
const datepickerLocale = await import('air-datepicker/locale/'+getLocale()+'.js');
5+
16
const BTN_OPEN_FILTER = document.getElementById('open-filter');
2-
const BTN_CLOSE_FILER = document.getElementById('close-filter');
7+
const BTN_CLOSE_FILTER = document.getElementById('close-filter');
38
const SIDEBAR = document.getElementById('filter-sidebar');
49
const MAIN_CONTENT = document.querySelector('.entity-container');
510
const ENTITY_WRAPPER = document.querySelector('.entity-wrapper');
611
const FORM_FILTER_SIDEBAR = document.getElementById('filter-sidebar');
712
const ORDER_SELECT = document.getElementById('order-select');
13+
const PERIOD_SELECT = document.getElementById('period');
14+
const BTN_APPLY_PERIOD_FILTER = document.getElementById('apply-period-filter');
815

916
BTN_OPEN_FILTER.addEventListener('click', toggleSidebar);
10-
BTN_CLOSE_FILER.addEventListener('click', toggleSidebar);
17+
BTN_CLOSE_FILTER.addEventListener('click', toggleSidebar);
1118

1219
function toggleSidebar() {
1320
SIDEBAR.classList.toggle('open');
@@ -16,13 +23,13 @@ function toggleSidebar() {
1623

1724
if (SIDEBAR.classList.contains('open')) {
1825
BTN_OPEN_FILTER.style.visibility = 'hidden';
19-
BTN_OPEN_FILTER.style.opacity = 0;
26+
BTN_OPEN_FILTER.style.opacity = '0';
2027
return;
2128
}
2229

2330
setTimeout(() => {
2431
BTN_OPEN_FILTER.style.visibility = 'visible';
25-
BTN_OPEN_FILTER.style.opacity = 1;
32+
BTN_OPEN_FILTER.style.opacity = '1';
2633
}, 300);
2734
}
2835

@@ -51,3 +58,63 @@ ORDER_SELECT.addEventListener('change', () => {
5158

5259
window.location.href = `${window.location.pathname}?${params.toString()}`;
5360
});
61+
62+
const datepicker = new AirDatepicker(document.getElementById('datepicker'), {
63+
range: true,
64+
multipleDates: true,
65+
locale: await datepickerLocale.default.default,
66+
onSelect: function ({ date, formattedDate }) {
67+
const customPeriod = document.querySelector('#period option[data-name=custom]');
68+
customPeriod.classList.remove('d-none');
69+
customPeriod.innerText = formattedDate.join(' - ');
70+
71+
customPeriod.value = date.map(d => {
72+
return d.getFullYear() + '-'
73+
+ (d.getMonth()+1).toString().padStart(2, '0') + '-'
74+
+ d.getDate().toString().padStart(2, '0');
75+
}).join(',');
76+
customPeriod.selected = true;
77+
},
78+
});
79+
80+
PERIOD_SELECT.addEventListener('change', function () {
81+
datepicker.clear({silent: true});
82+
const customPeriod = document.querySelector('#period option[data-name=custom]');
83+
customPeriod.classList.add('d-none');
84+
customPeriod.innerText = '';
85+
});
86+
87+
BTN_APPLY_PERIOD_FILTER.addEventListener('click', function () {
88+
const period = PERIOD_SELECT.value;
89+
const url = new URL(window.location.href);
90+
91+
url.searchParams.set('period', period);
92+
93+
window.location.href = url.toString();
94+
});
95+
96+
(function () {
97+
const searchParams = new URLSearchParams(window.location.search);
98+
99+
new FormData(FORM_FILTER_SIDEBAR).forEach(function (value, key) {
100+
const element = FORM_FILTER_SIDEBAR.querySelector(`[name=${key}]`);
101+
if (element) {
102+
element.value = searchParams.get(key);
103+
}
104+
});
105+
106+
if ('' === PERIOD_SELECT.value) {
107+
const period = searchParams.get('period');
108+
if (period) {
109+
const customPeriod = document.querySelector('#period option[data-name=custom]');
110+
const periodInnerText = period.split(',').map(date => {
111+
const [year, month, day] = date.split('-');
112+
return `${day.padStart(2, '0')}/${month.padStart(2, '0')}/${year}`;
113+
});
114+
115+
customPeriod.value = period;
116+
customPeriod.selected = 'selected';
117+
customPeriod.innerText = periodInnerText.join(' - ');
118+
}
119+
}
120+
})();

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

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
.air-datepicker-cell {
2+
border: 2px solid var(--adp-border-color-inner);
3+
}
4+
5+
.air-datepicker-cell.-day- {
6+
aspect-ratio: 1;
7+
}
8+
9+
.air-datepicker-body--cells {
10+
gap: .3rem;
11+
}
12+
13+
.air-datepicker-body--cells.-days- {
14+
grid-auto-rows: initial;
15+
}
16+
17+
.air-datepicker-nav {
18+
border-bottom: initial;
19+
}
20+
21+
.air-datepicker-nav--title, .air-datepicker-nav--action {
22+
font-weight: bold;
23+
}
24+
25+
.air-datepicker-nav--action {
26+
border-radius: 50%;
27+
border: 1px solid var(--adp-accent-color);
28+
aspect-ratio: 1;
29+
display: block;
30+
padding: 0;
31+
}
32+
33+
.air-datepicker-nav--action path {
34+
stroke: var(--adp-accent-color);
35+
}
36+
37+
.air-datepicker-nav--title {
38+
background-color: var(--adp-accent-color);
39+
color: var(--adp-background-color);
40+
font-size: 14px;
41+
}
42+
43+
.air-datepicker-nav--title i {
44+
color: var(--adp-background-color);
45+
}
46+
47+
.air-datepicker-nav--title:hover, .air-datepicker-nav--title:hover i {
48+
color: var(--adp-accent-color);
49+
}
50+
51+
.air-datepicker {
52+
--adp-font-size: 10px;
53+
--adp-background-color: var(--bs-body-bg);
54+
--adp-background-color-hover: var(--bs-primary-bg-subtle);
55+
--adp-background-color-active: var(--bs-primary-bg-subtle);
56+
--adp-background-color-in-range: rgba(var(--bs-primary-rgb), .1);
57+
--adp-background-color-in-range-focused: rgba(var(--bs-primary-rgb), .2);
58+
--adp-background-color-selected-other-month-focused: var(--bs-primary-bg-subtle);
59+
--adp-background-color-selected-other-month: var(--bs-primary-bg-subtle);
60+
--adp-color: var(--bs-body-color);
61+
--adp-color-secondary: var(--bs-secondary-color);
62+
--adp-accent-color: var(--bs-primary);
63+
--adp-color-disabled: var(--bs-dropdown-link-disabled-color);
64+
--adp-color-disabled-in-range: var(--bs-nav-link-disabled-color);
65+
--adp-border-color: var(--bs-secondary-border-subtle);
66+
--adp-day-name-color: var(--adp-color);
67+
--adp-cell-border-radius: 7px;
68+
--adp-cell-background-color-selected: var(--bs-primary);
69+
--adp-cell-background-color-selected-hover: var(--bs-primary);
70+
--adp-cell-background-color-in-range: var(--bs-primary-bg-subtle);
71+
--adp-cell-background-color-in-range-hover: var(--bs-primary-border-subtle);
72+
}
73+
74+
.air-datepicker {
75+
border: initial;
76+
}

‎composer.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -100,6 +100,7 @@
100100
"symfony/browser-kit": "7.1.*",
101101
"symfony/css-selector": "7.1.*",
102102
"symfony/maker-bundle": "^1.60",
103-
"symfony/phpunit-bridge": "^7.1"
103+
"symfony/phpunit-bridge": "^7.1",
104+
"symfony/stopwatch": "7.1.*"
104105
}
105106
}

‎composer.lock‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

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

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -58,11 +58,25 @@ describe('Pagina de listar Eventos', () => {
5858
});
5959

6060
it('Garante que o filtro funciona', () => {
61-
cy.get('#open-filter').click();
62-
cy.get('#event-name').type('Festival da Rapadura');
61+
cy.get('[id=open-filter]').click();
62+
cy.scrollTo('top');
63+
cy.contains('Ver calendário').click();
64+
cy.get('[data-cy=dropdown-calendar]').should('be.visible');
65+
cy.get('[data-cy=dropdown-calendar] .air-datepicker-nav--title')
66+
.click()
67+
.click();
68+
cy.get('[data-cy=dropdown-calendar]').contains('2024').click();
69+
cy.get('[data-cy=dropdown-calendar]').contains('Jul').click();
70+
cy.get('[data-cy=dropdown-calendar]').contains('9').click();
71+
cy.get('[data-cy=dropdown-calendar] [data-action=next]').click();
72+
cy.get('[data-cy=dropdown-calendar] [data-date="2"]').click();
73+
cy.get('[data-cy=close-calendar]').click();
74+
cy.get('#period').should('have.value', '2024-07-09,2024-08-02');
75+
cy.get('#period').should('contain.text', '09/07/2024 - 02/08/2024');
76+
cy.get('#event-name').type('sertão');
6377
cy.get('#apply-filters').click();
6478
cy.get('.total-events').contains('1 Eventos Encontrados').should('be.visible');
65-
cy.get('.event-name').contains('Festival da Rapadura').should('be.visible');
79+
cy.get('.event-name').contains('Festival Sertão Criativo').should('be.visible');
6680
});
6781

6882
it('Garante que o botão de limpar filtros funciona', () => {

‎docker-compose.yml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ services:
99
volumes:
1010
- ./:/var/www
1111
- ./docker/php/local.ini:/usr/local/etc/php/conf.d/local.ini
12+
- ./docker/php/99-xdebug.ini:/usr/local/etc/php/conf.d/docker-php-ext-xdebug.ini
1213
networks:
1314
- aurora_network
1415

‎docker/php/99-xdebug.ini‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
zend_extension=xdebug.so
2+
xdebug.mode=coverage,develop,debug
3+
xdebug.start_with_request=trigger
4+
xdebug.discover_client_host=0
5+
xdebug.client_host=host.docker.internal
6+
xdebug.output_dir=/var/www
7+
xdebug.log=/var/www/xdebug.log
8+
xdebug.log_level=10
9+
xdebug.show_local_vars=1

0 commit comments

Comments
 (0)