Skip to content

Commit f29c684

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

24 files changed

Lines changed: 455 additions & 47 deletions

‎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/event/period-filter.js‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
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+
6+
const FORM_FILTER_SIDEBAR = document.getElementById('filter-sidebar');
7+
const PERIOD_SELECT = document.getElementById('period');
8+
const BTN_APPLY_PERIOD_FILTER = document.getElementById('apply-period-filter');
9+
10+
const datepicker = new AirDatepicker(document.getElementById('datepicker'), {
11+
range: true,
12+
multipleDates: true,
13+
locale: await datepickerLocale.default.default,
14+
onSelect: function ({ date, formattedDate }) {
15+
const customPeriod = document.querySelector('#period option[data-name=custom]');
16+
customPeriod.classList.remove('d-none');
17+
customPeriod.innerText = formattedDate.join(' - ');
18+
19+
customPeriod.value = date.map(d => {
20+
return d.getFullYear() + '-'
21+
+ (d.getMonth()+1).toString().padStart(2, '0') + '-'
22+
+ d.getDate().toString().padStart(2, '0');
23+
}).join(',');
24+
customPeriod.selected = true;
25+
26+
if (date.length === 2) {
27+
customPeriod.selected = true;
28+
BTN_CLOSE_FILTER.click();
29+
}
30+
},
31+
});
32+
33+
PERIOD_SELECT.addEventListener('change', function () {
34+
datepicker.clear({silent: true});
35+
const customPeriod = document.querySelector('#period option[data-name=custom]');
36+
customPeriod.classList.add('d-none');
37+
customPeriod.innerText = '';
38+
});
39+
40+
BTN_APPLY_PERIOD_FILTER.addEventListener('click', function () {
41+
const period = PERIOD_SELECT.value;
42+
const url = new URL(window.location.href);
43+
44+
url.searchParams.set('period', period);
45+
46+
window.location.href = url.toString();
47+
});
48+
49+
(function () {
50+
const searchParams = new URLSearchParams(window.location.search);
51+
52+
new FormData(FORM_FILTER_SIDEBAR).forEach(function (value, key) {
53+
const element = FORM_FILTER_SIDEBAR.querySelector(`[name=${key}]`);
54+
if (element) {
55+
element.value = searchParams.get(key);
56+
}
57+
});
58+
59+
if ('' === PERIOD_SELECT.value) {
60+
const period = searchParams.get('period');
61+
if (period) {
62+
const customPeriod = document.querySelector('#period option[data-name=custom]');
63+
const periodInnerText = period.split(',').map(date => {
64+
const [year, month, day] = date.split('-');
65+
return `${day.padStart(2, '0')}/${month.padStart(2, '0')}/${year}`;
66+
});
67+
68+
customPeriod.value = period;
69+
customPeriod.selected = 'selected';
70+
customPeriod.innerText = periodInnerText.join(' - ');
71+
}
72+
}
73+
})();

‎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: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
const BTN_OPEN_FILTER = document.getElementById('open-filter');
2-
const BTN_CLOSE_FILER = document.getElementById('close-filter');
2+
const BTN_CLOSE_FILTER = document.getElementById('close-filter');
33
const SIDEBAR = document.getElementById('filter-sidebar');
44
const MAIN_CONTENT = document.querySelector('.entity-container');
55
const ENTITY_WRAPPER = document.querySelector('.entity-wrapper');
66
const FORM_FILTER_SIDEBAR = document.getElementById('filter-sidebar');
77
const ORDER_SELECT = document.getElementById('order-select');
88

99
BTN_OPEN_FILTER.addEventListener('click', toggleSidebar);
10-
BTN_CLOSE_FILER.addEventListener('click', toggleSidebar);
10+
BTN_CLOSE_FILTER.addEventListener('click', toggleSidebar);
1111

1212
function toggleSidebar() {
1313
SIDEBAR.classList.toggle('open');
@@ -16,13 +16,13 @@ function toggleSidebar() {
1616

1717
if (SIDEBAR.classList.contains('open')) {
1818
BTN_OPEN_FILTER.style.visibility = 'hidden';
19-
BTN_OPEN_FILTER.style.opacity = 0;
19+
BTN_OPEN_FILTER.style.opacity = '0';
2020
return;
2121
}
2222

2323
setTimeout(() => {
2424
BTN_OPEN_FILTER.style.visibility = 'visible';
25-
BTN_OPEN_FILTER.style.opacity = 1;
25+
BTN_OPEN_FILTER.style.opacity = '1';
2626
}, 300);
2727
}
2828

‎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

0 commit comments

Comments
 (0)