From 645f3e1758ef149bf47d283032beabd64b50a06b Mon Sep 17 00:00:00 2001 From: Jan Kaiser Date: Tue, 29 Aug 2023 20:00:22 +0200 Subject: [PATCH] fix: add clear filters button and resolve lint warnings --- .../projects/prism/src/lib/types/model.ts | 2 +- .../prism/src/lib/utils/normalize-tokens.ts | 2 +- .../issues-header.component.html | 6 ++++ .../issues-header.component.scss | 3 ++ .../issues-header/issues-header.component.ts | 8 +++++ .../issues/components/issues.component.html | 4 ++- .../issues/components/issues.component.scss | 6 ++-- .../pull-requests-header.component.html | 8 ++++- .../pull-requests-header.component.scss | 3 ++ .../pull-requests-header.component.ts | 8 +++++ .../pull-requests.component.html | 16 ++++----- .../pull-requests.component.scss | 5 +-- .../clear-filters-button.component.html | 6 ++++ .../clear-filters-button.component.scss | 36 +++++++++++++++++++ .../clear-filters-button.component.ts | 10 ++++++ .../repo-controls.component.html | 9 ++--- .../repo-controls.component.scss | 27 -------------- .../src/app/shared/shared.module.ts | 3 ++ .../src/app/state/auth/auth.effects.spec.ts | 4 +-- .../repository/repository.effects.spec.ts | 2 ++ .../state/repository/repository.effects.ts | 2 ++ .../state/repository/repository.reducer.ts | 4 +++ .../state/repository/repository.selectors.ts | 23 ++++++++++++ .../app/state/repository/repository.state.ts | 3 ++ .../src/app/state/user/user.effects.spec.ts | 3 +- 25 files changed, 149 insertions(+), 54 deletions(-) create mode 100644 angular-ngrx-scss/src/app/shared/components/clear-filters-button/clear-filters-button.component.html create mode 100644 angular-ngrx-scss/src/app/shared/components/clear-filters-button/clear-filters-button.component.scss create mode 100644 angular-ngrx-scss/src/app/shared/components/clear-filters-button/clear-filters-button.component.ts diff --git a/angular-ngrx-scss/projects/prism/src/lib/types/model.ts b/angular-ngrx-scss/projects/prism/src/lib/types/model.ts index ab1342b35..0d1d6f4ee 100644 --- a/angular-ngrx-scss/projects/prism/src/lib/types/model.ts +++ b/angular-ngrx-scss/projects/prism/src/lib/types/model.ts @@ -14,7 +14,7 @@ export type TokenEnv = { tokens: Array; }; -export type StyleObj = { [klass: string]: any } | null; +export type StyleObj = { [klass: string]: unknown } | null; export type LineInputProps = { style?: StyleObj; diff --git a/angular-ngrx-scss/projects/prism/src/lib/utils/normalize-tokens.ts b/angular-ngrx-scss/projects/prism/src/lib/utils/normalize-tokens.ts index ef3954c7f..b521c1a51 100644 --- a/angular-ngrx-scss/projects/prism/src/lib/utils/normalize-tokens.ts +++ b/angular-ngrx-scss/projects/prism/src/lib/utils/normalize-tokens.ts @@ -40,7 +40,7 @@ const normalizeTokens = (tokens: Array): Token[][] => { let i = 0; let stackIndex = 0; - let currentLine: any[] = []; + let currentLine: Token[] = []; const acc = [currentLine]; diff --git a/angular-ngrx-scss/src/app/issues/components/issues-header/issues-header.component.html b/angular-ngrx-scss/src/app/issues/components/issues-header/issues-header.component.html index 8aed36979..af309324a 100644 --- a/angular-ngrx-scss/src/app/issues/components/issues-header/issues-header.component.html +++ b/angular-ngrx-scss/src/app/issues/components/issues-header/issues-header.component.html @@ -1,3 +1,9 @@ +
+ Clear current search query, filters, and sorts +
+
diff --git a/angular-ngrx-scss/src/app/shared/components/clear-filters-button/clear-filters-button.component.scss b/angular-ngrx-scss/src/app/shared/components/clear-filters-button/clear-filters-button.component.scss new file mode 100644 index 000000000..937c6e446 --- /dev/null +++ b/angular-ngrx-scss/src/app/shared/components/clear-filters-button/clear-filters-button.component.scss @@ -0,0 +1,36 @@ +@use 'variables'; +@use 'functions'; + +.button { + background: none; + color: inherit; + border: none; + padding: 0; + font: inherit; + cursor: pointer; + display: flex; + align-items: center; + gap: variables.$padding; + color: variables.$gray500; + + &:hover { + color: variables.$blue600; + } + + &__icon { + background: variables.$gray500; + border-radius: variables.$padding--s; + width: functions.rem(20); + height: functions.rem(20); + display: grid; + place-items: center; + } + + &:hover &__icon { + background: variables.$blue600; + } + + &__text:empty::after { + content: 'Clear filter'; + } +} diff --git a/angular-ngrx-scss/src/app/shared/components/clear-filters-button/clear-filters-button.component.ts b/angular-ngrx-scss/src/app/shared/components/clear-filters-button/clear-filters-button.component.ts new file mode 100644 index 000000000..c0a5d4079 --- /dev/null +++ b/angular-ngrx-scss/src/app/shared/components/clear-filters-button/clear-filters-button.component.ts @@ -0,0 +1,10 @@ +import { Component, EventEmitter, Output } from '@angular/core'; + +@Component({ + selector: 'app-clear-filters-button', + templateUrl: './clear-filters-button.component.html', + styleUrls: ['./clear-filters-button.component.scss'], +}) +export class ClearFiltersButtonComponent { + @Output() clearFilters = new EventEmitter(); +} diff --git a/angular-ngrx-scss/src/app/shared/components/repo-controls/repo-controls.component.html b/angular-ngrx-scss/src/app/shared/components/repo-controls/repo-controls.component.html index 51169ea32..e28af6c92 100644 --- a/angular-ngrx-scss/src/app/shared/components/repo-controls/repo-controls.component.html +++ b/angular-ngrx-scss/src/app/shared/components/repo-controls/repo-controls.component.html @@ -53,12 +53,9 @@ {{ (selectSortFilter$ | async)?.split('_')?.join(' ') | lowercase }}

- +
diff --git a/angular-ngrx-scss/src/app/shared/components/repo-controls/repo-controls.component.scss b/angular-ngrx-scss/src/app/shared/components/repo-controls/repo-controls.component.scss index bc82e92d0..50b04f3e0 100644 --- a/angular-ngrx-scss/src/app/shared/components/repo-controls/repo-controls.component.scss +++ b/angular-ngrx-scss/src/app/shared/components/repo-controls/repo-controls.component.scss @@ -57,31 +57,4 @@ section { &__text { flex-grow: 1; } - - &__clear { - background: none; - color: inherit; - border: none; - padding: 0; - font: inherit; - cursor: pointer; - display: flex; - align-items: center; - gap: variables.$padding; - color: variables.$gray500; - &:hover { - color: variables.$blue600; - } - &__icon { - background: variables.$gray500; - border-radius: variables.$padding--s; - width: functions.rem(20); - height: functions.rem(20); - display: grid; - place-items: center; - } - &:hover &__icon { - background: variables.$blue600; - } - } } diff --git a/angular-ngrx-scss/src/app/shared/shared.module.ts b/angular-ngrx-scss/src/app/shared/shared.module.ts index 207d738eb..d63285582 100644 --- a/angular-ngrx-scss/src/app/shared/shared.module.ts +++ b/angular-ngrx-scss/src/app/shared/shared.module.ts @@ -9,6 +9,7 @@ import { MarkdownPipe } from './pipes/markdown.pipe'; import { PaginationComponent } from './components/pagination/pagination.component'; import { RepoIssuePullCardComponent } from './components/repo-issue-pull-card/repo-issue-pull-card.component'; import { ClickAwayDirective } from './directives/click-away.directive'; +import { ClearFiltersButtonComponent } from './components/clear-filters-button/clear-filters-button.component'; @NgModule({ declarations: [ @@ -20,6 +21,7 @@ import { ClickAwayDirective } from './directives/click-away.directive'; PaginationComponent, RepoIssuePullCardComponent, ClickAwayDirective, + ClearFiltersButtonComponent, ], imports: [CommonModule, RouterModule], exports: [ @@ -31,6 +33,7 @@ import { ClickAwayDirective } from './directives/click-away.directive'; PaginationComponent, RepoIssuePullCardComponent, ClickAwayDirective, + ClearFiltersButtonComponent, ], }) export class SharedModule {} diff --git a/angular-ngrx-scss/src/app/state/auth/auth.effects.spec.ts b/angular-ngrx-scss/src/app/state/auth/auth.effects.spec.ts index 9cd66e0b7..b75da9dec 100644 --- a/angular-ngrx-scss/src/app/state/auth/auth.effects.spec.ts +++ b/angular-ngrx-scss/src/app/state/auth/auth.effects.spec.ts @@ -18,7 +18,6 @@ import { AuthEffects } from './auth.effects'; describe('AuthEffects', () => { let actions$: Actions; let effects: AuthEffects; - let store: MockStore; let mockHttpClient: jasmine.SpyObj; let authService: jasmine.SpyObj; @@ -56,8 +55,7 @@ describe('AuthEffects', () => { ], }); - // eslint-disable-next-line @typescript-eslint/no-unused-vars - store = TestBed.inject(MockStore); + TestBed.inject(MockStore); actions$ = TestBed.inject(Actions); effects = TestBed.inject(AuthEffects); }); diff --git a/angular-ngrx-scss/src/app/state/repository/repository.effects.spec.ts b/angular-ngrx-scss/src/app/state/repository/repository.effects.spec.ts index 570eccca6..864961f8c 100644 --- a/angular-ngrx-scss/src/app/state/repository/repository.effects.spec.ts +++ b/angular-ngrx-scss/src/app/state/repository/repository.effects.spec.ts @@ -269,6 +269,8 @@ describe('RepositoryEffects', () => { labels: [], milestones: [], path: '', + issuesFilterParams: null, + pullsFilterParams: null, }; repoServiceMock.getRepositoryInfo.and.returnValue(of(MOCK_REPO_INFO)); diff --git a/angular-ngrx-scss/src/app/state/repository/repository.effects.ts b/angular-ngrx-scss/src/app/state/repository/repository.effects.ts index 0c5cb4192..8015ce0e7 100644 --- a/angular-ngrx-scss/src/app/state/repository/repository.effects.ts +++ b/angular-ngrx-scss/src/app/state/repository/repository.effects.ts @@ -86,6 +86,8 @@ export class RepositoryEffects { readme: readme.content || '', milestones: milestones || [], labels: labels || [], + pullsFilterParams: null, + issuesFilterParams: null, }; return fetchRepositorySuccess({ repoData: allData }); }), diff --git a/angular-ngrx-scss/src/app/state/repository/repository.reducer.ts b/angular-ngrx-scss/src/app/state/repository/repository.reducer.ts index e73530ebe..d65ffc7af 100644 --- a/angular-ngrx-scss/src/app/state/repository/repository.reducer.ts +++ b/angular-ngrx-scss/src/app/state/repository/repository.reducer.ts @@ -25,6 +25,8 @@ export const initialRepositoryState: RepositoryState = { website: '', milestones: [], labels: [], + pullsFilterParams: null, + issuesFilterParams: null, }; const reducer = createReducer( @@ -43,6 +45,7 @@ const reducer = createReducer( (state, { pullRequests, params }) => { return { ...state, + pullsFilterParams: params, openPullRequests: params.state === 'open' ? pullRequests : state.openPullRequests, closedPullRequests: @@ -54,6 +57,7 @@ const reducer = createReducer( on(RepositoryActions.fetchIssuesSuccess, (state, { issues, params }) => { return { ...state, + issuesFilterParams: params, openIssues: params.state === 'open' ? issues : state.openIssues, closedIssues: params.state === 'closed' ? issues : state.closedIssues, }; diff --git a/angular-ngrx-scss/src/app/state/repository/repository.selectors.ts b/angular-ngrx-scss/src/app/state/repository/repository.selectors.ts index 409cb4273..f6797cb55 100644 --- a/angular-ngrx-scss/src/app/state/repository/repository.selectors.ts +++ b/angular-ngrx-scss/src/app/state/repository/repository.selectors.ts @@ -65,3 +65,26 @@ export const selectLabels = createSelector( selectRepositoryState, (state) => state.labels, ); + +export const selectHasActiveIssueFilters = createSelector( + selectRepositoryState, + (state) => + state.issuesFilterParams && + ((state.issuesFilterParams.milestone && + state.issuesFilterParams.milestone?.length > 0) || + (state.issuesFilterParams?.labels && + state.issuesFilterParams.labels.length > 0) || + (state.issuesFilterParams.sort && + state.issuesFilterParams?.sort !== 'created')), +); + +export const selectHasActivePullRequestFilters = createSelector( + selectRepositoryState, + (state) => + state.pullsFilterParams && + ((state.pullsFilterParams?.labels && + state.pullsFilterParams.labels.length > 0) || + (state.pullsFilterParams?.sort && + state.pullsFilterParams.sort && + state.pullsFilterParams.sort !== 'created')), +); diff --git a/angular-ngrx-scss/src/app/state/repository/repository.state.ts b/angular-ngrx-scss/src/app/state/repository/repository.state.ts index 5579812eb..1bcd51932 100644 --- a/angular-ngrx-scss/src/app/state/repository/repository.state.ts +++ b/angular-ngrx-scss/src/app/state/repository/repository.state.ts @@ -1,6 +1,7 @@ import { Issue, PullRequest, + RepositoryIssuesApiParams, } from 'src/app/repository/services/repository.interfaces'; import { UserApiResponse } from '../user'; @@ -27,6 +28,8 @@ export interface RepositoryState { website: string; milestones: Milestone[]; labels: IssueLabel[]; + pullsFilterParams: RepositoryIssuesApiParams | null; + issuesFilterParams: RepositoryIssuesApiParams | null; } export interface Milestone { diff --git a/angular-ngrx-scss/src/app/state/user/user.effects.spec.ts b/angular-ngrx-scss/src/app/state/user/user.effects.spec.ts index 2fbddd734..451307803 100644 --- a/angular-ngrx-scss/src/app/state/user/user.effects.spec.ts +++ b/angular-ngrx-scss/src/app/state/user/user.effects.spec.ts @@ -126,7 +126,6 @@ const MOCK_TOP_REPOS: UserReposApiResponse = [ describe('UserEffects', () => { let actions$: Observable; let effects: UserEffects; - let store: MockStore; let userServiceMock: jasmine.SpyObj; beforeEach(() => { @@ -164,7 +163,7 @@ describe('UserEffects', () => { }); // eslint-disable-next-line @typescript-eslint/no-unused-vars - store = TestBed.inject(MockStore); + TestBed.inject(MockStore); effects = TestBed.inject(UserEffects); });