Skip to content

Commit

Permalink
feat: show filter counter
Browse files Browse the repository at this point in the history
  • Loading branch information
gion-andri committed Oct 11, 2023
1 parent f53221c commit c021058
Show file tree
Hide file tree
Showing 14 changed files with 185 additions and 81 deletions.
2 changes: 2 additions & 0 deletions src/app/app.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,7 @@ import { EventFilterModalComponent } from './components/events/event-filter-moda
import { DatepickerTranslatorService } from './services/datepicker-translator.service';
import { EventsListCardsComponent } from './components/events/events-list/events-list-cards/events-list-cards.component';
import { EventsListTableComponent } from './components/events/events-list/events-list-table/events-list-table.component';
import { ViewSelectionComponent } from './components/events/view-selection/view-selection.component';

export function jwtOptionsFactory(authService: AuthenticationService) {
return {
Expand Down Expand Up @@ -129,6 +130,7 @@ export function createTranslateLoader(http: HttpClient) {
EventFilterModalComponent,
EventsListCardsComponent,
EventsListTableComponent,
ViewSelectionComponent,
],
imports: [
BrowserModule,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ h2 {
}

.tags {
font-size: 0.9rem;
display: flex;
flex-wrap: wrap;
}
Expand All @@ -19,6 +20,7 @@ h2 {
margin-bottom: 6px;
margin-left: 0;
cursor: pointer;
padding: 2px 6px;
}

hr {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -29,8 +29,7 @@ export class EventFilterComponent implements OnInit, OnDestroy {


constructor(private staticData: StaticDataService, private eventsFilterService: EventsFilterService, private calendar: NgbCalendar) {
// this.startDate = this.calendar.getToday();
this.selectedStartDate = {year: 2023, month: 4, day: 1}; // TODO: change to today
this.selectedStartDate = this.calendar.getToday();
}

ngOnInit(): void {
Expand Down
Original file line number Diff line number Diff line change
@@ -1,61 +1,34 @@
<div class="filter-menu">
<button class="filter-button d-none d-md-block" (click)="openDesktopFilter()">
<button class="filter-button d-none d-md-block" (click)="openDesktopFilter()"
[class.active]="eventsFilterService.numberOfFilters > 0">
<span class="txt">mussar il filter</span>
<span>
<svg xmlns="http://www.w3.org/2000/svg" width="17" height="18" viewBox="0 0 17 18" fill="none">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M0.612676 2.65286C0.728742 2.4027 0.979445 2.24265 1.25522 2.24265H15.4219C15.6977 2.24265 15.9484 2.4027 16.0644 2.65286C16.1805 2.90302 16.1408 3.1978 15.9627 3.40837L10.4636 9.91117V15.701C10.4636 15.9465 10.3364 16.1745 10.1276 16.3035C9.91878 16.4326 9.65802 16.4443 9.43844 16.3345L6.60511 14.9179C6.36514 14.7979 6.21355 14.5526 6.21355 14.2843V9.91117L0.714356 3.40837C0.536282 3.1978 0.49661 2.90302 0.612676 2.65286ZM2.78189 3.65931L7.46275 9.19442C7.57088 9.3223 7.63022 9.48435 7.63022 9.65181V13.8465L9.04688 14.5549V9.65181C9.04688 9.48435 9.10622 9.3223 9.21436 9.19442L13.8952 3.65931H2.78189Z"
fill="#1C2B33"/>
</svg>
</span>
<svg xmlns="http://www.w3.org/2000/svg" width="17" height="18" viewBox="0 0 17 18" fill="none">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M0.612676 2.65286C0.728742 2.4027 0.979445 2.24265 1.25522 2.24265H15.4219C15.6977 2.24265 15.9484 2.4027 16.0644 2.65286C16.1805 2.90302 16.1408 3.1978 15.9627 3.40837L10.4636 9.91117V15.701C10.4636 15.9465 10.3364 16.1745 10.1276 16.3035C9.91878 16.4326 9.65802 16.4443 9.43844 16.3345L6.60511 14.9179C6.36514 14.7979 6.21355 14.5526 6.21355 14.2843V9.91117L0.714356 3.40837C0.536282 3.1978 0.49661 2.90302 0.612676 2.65286ZM2.78189 3.65931L7.46275 9.19442C7.57088 9.3223 7.63022 9.48435 7.63022 9.65181V13.8465L9.04688 14.5549V9.65181C9.04688 9.48435 9.10622 9.3223 9.21436 9.19442L13.8952 3.65931H2.78189Z"
fill="#1C2B33"/>
</svg>
</span>
<span class="counter" *ngIf="eventsFilterService.numberOfFilters > 0">
{{ eventsFilterService.numberOfFilters }}
</span>
</button>

<div class="style-selection">
<div class="style-button">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<rect x="13" y="3" width="8" height="8" rx="1" fill="#3CBFA4"/>
<rect x="2" y="3" width="8" height="8" rx="1" fill="#3CBFA4"/>
<rect x="2" y="13" width="8" height="8" rx="1" fill="#3CBFA4"/>
<rect x="13" y="13" width="8" height="8" rx="1" fill="#3CBFA4"/>
</svg>
</div>
<div class="style-button">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M8 6H21" stroke="#1C2B33" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M8 12H21" stroke="#1C2B33" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round"/>
<path d="M8 18H21" stroke="#1C2B33" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round"/>
<path d="M3 6H3.01" stroke="#1C2B33" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round"/>
<path d="M3 12H3.01" stroke="#1C2B33" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round"/>
<path d="M3 18H3.01" stroke="#1C2B33" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round"/>
<path d="M8 6H21" stroke="#1C2B33" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M8 12H21" stroke="#1C2B33" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round"/>
<path d="M8 18H21" stroke="#1C2B33" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round"/>
<path d="M3 6H3.01" stroke="#1C2B33" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round"/>
<path d="M3 12H3.01" stroke="#1C2B33" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round"/>
<path d="M3 18H3.01" stroke="#1C2B33" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round"/>
</svg>
</div>
</div>
<app-view-selection></app-view-selection>

<button class="filter-button d-md-none" (click)="openMobileFilter()">
<button class="filter-button d-md-none" (click)="openMobileFilter()"
[class.active]="eventsFilterService.numberOfFilters > 0">
<span class="txt">mussar il filter</span>
<span>
<svg xmlns="http://www.w3.org/2000/svg" width="17" height="18" viewBox="0 0 17 18" fill="none">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M0.612676 2.65286C0.728742 2.4027 0.979445 2.24265 1.25522 2.24265H15.4219C15.6977 2.24265 15.9484 2.4027 16.0644 2.65286C16.1805 2.90302 16.1408 3.1978 15.9627 3.40837L10.4636 9.91117V15.701C10.4636 15.9465 10.3364 16.1745 10.1276 16.3035C9.91878 16.4326 9.65802 16.4443 9.43844 16.3345L6.60511 14.9179C6.36514 14.7979 6.21355 14.5526 6.21355 14.2843V9.91117L0.714356 3.40837C0.536282 3.1978 0.49661 2.90302 0.612676 2.65286ZM2.78189 3.65931L7.46275 9.19442C7.57088 9.3223 7.63022 9.48435 7.63022 9.65181V13.8465L9.04688 14.5549V9.65181C9.04688 9.48435 9.10622 9.3223 9.21436 9.19442L13.8952 3.65931H2.78189Z"
fill="#1C2B33"/>
</svg>
</span>
<svg xmlns="http://www.w3.org/2000/svg" width="17" height="18" viewBox="0 0 17 18" fill="none">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M0.612676 2.65286C0.728742 2.4027 0.979445 2.24265 1.25522 2.24265H15.4219C15.6977 2.24265 15.9484 2.4027 16.0644 2.65286C16.1805 2.90302 16.1408 3.1978 15.9627 3.40837L10.4636 9.91117V15.701C10.4636 15.9465 10.3364 16.1745 10.1276 16.3035C9.91878 16.4326 9.65802 16.4443 9.43844 16.3345L6.60511 14.9179C6.36514 14.7979 6.21355 14.5526 6.21355 14.2843V9.91117L0.714356 3.40837C0.536282 3.1978 0.49661 2.90302 0.612676 2.65286ZM2.78189 3.65931L7.46275 9.19442C7.57088 9.3223 7.63022 9.48435 7.63022 9.65181V13.8465L9.04688 14.5549V9.65181C9.04688 9.48435 9.10622 9.3223 9.21436 9.19442L13.8952 3.65931H2.78189Z"
fill="#1C2B33"/>
</svg>
</span>
<span class="counter" *ngIf="eventsFilterService.numberOfFilters > 0">
{{ eventsFilterService.numberOfFilters }}
</span>
</button>
</div>

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,15 +7,6 @@
justify-content: space-between;
margin: 1rem 0;

.style-selection {
display: flex;
margin-left: 1rem;

> * {
margin-right: 0.5rem;
}
}

.filter-button {
font-family: 'CadizBlack';
padding: 8px 16px;
Expand All @@ -27,6 +18,21 @@
.txt {
margin-right: 8px;
}

.counter {
background-color: black;
color: white;
border-radius: 50%;
font-size: .8rem;
width: 20px;
display: inline-block;
aspect-ratio: 1/1;
}

@include media-breakpoint-up(md) {
margin-right: 0;
margin-left: 2rem;
}
}
}

Expand All @@ -51,7 +57,7 @@
@include media-breakpoint-up(md) {
h2 {
font-size: 1.5rem;
margin: 2rem;
margin: 1rem 2rem;
}
}
}
Expand All @@ -74,15 +80,6 @@ li app-event-card {
border-top: 1px solid #DADADA;
}

/*
li {
border: 1px solid #DADADA;
box-shadow: 0 0 36px 0 rgba(0, 0, 0, 0.25);;
}
*/

.load-next-page {
margin: 0;
padding: 1rem 3rem;
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
<div class="view-selection">
<div class="style-button" (click)="selectView('cards')" placement="bottom-right" ngbTooltip="Vista grafica">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<rect x="13" y="3" width="8" height="8" rx="1" fill="#3CBFA4"/>
<rect x="2" y="3" width="8" height="8" rx="1" fill="#3CBFA4"/>
<rect x="2" y="13" width="8" height="8" rx="1" fill="#3CBFA4"/>
<rect x="13" y="13" width="8" height="8" rx="1" fill="#3CBFA4"/>
</svg>
</div>
<div class="style-button" (click)="selectView('list')" placement="bottom-right" ngbTooltip="Vista tabellara">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M8 6H21" stroke="#1C2B33" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M8 12H21" stroke="#1C2B33" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round"/>
<path d="M8 18H21" stroke="#1C2B33" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round"/>
<path d="M3 6H3.01" stroke="#1C2B33" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round"/>
<path d="M3 12H3.01" stroke="#1C2B33" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round"/>
<path d="M3 18H3.01" stroke="#1C2B33" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round"/>
<path d="M8 6H21" stroke="#1C2B33" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M8 12H21" stroke="#1C2B33" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round"/>
<path d="M8 18H21" stroke="#1C2B33" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round"/>
<path d="M3 6H3.01" stroke="#1C2B33" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round"/>
<path d="M3 12H3.01" stroke="#1C2B33" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round"/>
<path d="M3 18H3.01" stroke="#1C2B33" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round"/>
</svg>
</div>
</div>
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
@import 'node_modules/bootstrap/scss/functions';
@import 'node_modules/bootstrap/scss/variables';
@import 'node_modules/bootstrap/scss/mixins';

.view-selection {
display: flex;
margin-left: 1rem;

.style-button {
margin-right: 0.5rem;
cursor: pointer;
}

@include media-breakpoint-up(md) {
margin-left: 0;
margin-right: 2rem;

> * {
margin-right: 0;
margin-left: 0.5rem;
}
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';

import { ViewSelectionComponent } from './view-selection.component';

describe('ViewSelectionComponent', () => {
let component: ViewSelectionComponent;
let fixture: ComponentFixture<ViewSelectionComponent>;

beforeEach(() => {
TestBed.configureTestingModule({
declarations: [ViewSelectionComponent]
});
fixture = TestBed.createComponent(ViewSelectionComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});

it('should create', () => {
expect(component).toBeTruthy();
});
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import { Component } from '@angular/core';
import { EventsFilterService } from '../../../services/events-filter.service';

@Component({
selector: 'app-view-selection',
templateUrl: './view-selection.component.html',
styleUrls: ['./view-selection.component.scss']
})
export class ViewSelectionComponent {

constructor(public eventsFilterService: EventsFilterService) {
}

selectView(view: 'cards' | 'list') {
this.eventsFilterService.selectedView = view;
}
}
2 changes: 1 addition & 1 deletion src/app/components/header/header.component.scss
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
}

@include media-breakpoint-up(md) {
height: 124px;
height: 85px;
}
}

Expand Down
7 changes: 4 additions & 3 deletions src/app/pages/events/events-list/events-list.component.html
Original file line number Diff line number Diff line change
@@ -1,13 +1,14 @@
<div class="d-none d-md-block">
<div class="filter-area d-none d-md-block">
<div #collapse="ngbCollapse" [(ngbCollapse)]="isFilterCollapsed"
[horizontal]="true" class="filter">
<app-event-filter></app-event-filter>
</div>
</div>

<div class="events">
<app-events-list-cards (toggleFilter)="toggleFilter()"></app-events-list-cards>
<app-events-list-table></app-events-list-table>
<app-events-list-cards (toggleFilter)="toggleFilter()"
*ngIf="eventsFilterService.selectedView === 'cards'"></app-events-list-cards>
<app-events-list-table *ngIf="eventsFilterService.selectedView === 'list'"></app-events-list-table>
</div>

<!--
Expand Down
8 changes: 8 additions & 0 deletions src/app/pages/events/events-list/events-list.component.scss
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,18 @@
display: flex;
}

.filter-area {
position: sticky;
top: 0;
align-self: flex-start; // needed for sticky to work
}

.filter {
padding: 2rem;
width: 300px;
max-width: 300px;
max-height: 100vh;
overflow-y: scroll;
}

.events {
Expand Down
2 changes: 1 addition & 1 deletion src/app/pages/events/events-list/events-list.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ export class EventsListComponent implements OnInit, OnDestroy, OnAttach, OnDetac

public isFilterCollapsed = false;

constructor(private eventsFilterService: EventsFilterService, private datesUtil: DatesUtil) {
constructor(public eventsFilterService: EventsFilterService, private datesUtil: DatesUtil) {
}

ngOnInit() {
Expand Down
Loading

0 comments on commit c021058

Please sign in to comment.