-
-
+
+
+
+
+
+
+
-
- Location
-
- {{ location || "No Location" }}
- cancel
-
-
-
-
-
-
- {{ getFacetId(fc, "No Location") }} |
- {{ getFacetCount(fc) }}
-
-
-
-
-
- Group
-
- {{ group }}cancel
-
-
-
-
-
-
- {{ getFacetId(fc, "No Group") }} |
- {{ getFacetCount(fc) }}
-
-
-
-
-
- Type
-
- {{ type }}cancel
-
-
-
-
-
-
- {{ getFacetId(fc, "No Type") }} |
- {{ getFacetCount(fc) }}
-
-
-
-
-
- Keywords
-
- {{ keyword }}cancel
-
-
-
-
-
- {{ getFacetId(fc, "No Keywords") }}
- : {{ getFacetCount(fc) }}
-
-
-
-
-
- Start Date - End Date
-
-
-
-
-
-
-
-
-
-
-
-
- {{ condition.lhs }}
-
-
- =
-
-
- =
-
-
- <
-
-
- >
-
-
- {{
- condition.relation === "EQUAL_TO_STRING"
- ? '"' + condition.rhs + '"'
- : condition.rhs
- }}
- {{ condition.unit | prettyUnit }}
-
- cancel
-
-
+
+
+
+
+
+
+
diff --git a/src/app/datasets/datasets-filter/datasets-filter.component.scss b/src/app/datasets/datasets-filter/datasets-filter.component.scss
index d3c8fb819..92dbd784e 100644
--- a/src/app/datasets/datasets-filter/datasets-filter.component.scss
+++ b/src/app/datasets/datasets-filter/datasets-filter.component.scss
@@ -5,6 +5,15 @@ mat-card {
width: 100%;
}
+ .filter-container {
+ display: flex;
+ align-items: center;
+
+ :first-child {
+ flex-grow: 1;
+ }
+ }
+
.section-container {
font-size: 1.25rem;
font-weight: 425;
@@ -20,6 +29,18 @@ mat-card {
margin-left: auto;
}
+ .full-width-button {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 100%;
+ padding: 0;
+
+ mat-icon {
+ margin-right: 8px;
+ }
+ }
+
.scientific-chips {
::ng-deep .mat-mdc-chip-list-wrapper {
margin: 0;
diff --git a/src/app/datasets/datasets-filter/datasets-filter.component.spec.ts b/src/app/datasets/datasets-filter/datasets-filter.component.spec.ts
index 5c4d78247..cfc4f6053 100644
--- a/src/app/datasets/datasets-filter/datasets-filter.component.spec.ts
+++ b/src/app/datasets/datasets-filter/datasets-filter.component.spec.ts
@@ -11,30 +11,13 @@ import { MockStore } from "shared/MockStubs";
import { FormsModule, ReactiveFormsModule } from "@angular/forms";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
-import { FacetCount } from "state-management/state/datasets.store";
import {
- setSearchTermsAction,
- addLocationFilterAction,
- removeLocationFilterAction,
- addGroupFilterAction,
- removeGroupFilterAction,
- addKeywordFilterAction,
- removeKeywordFilterAction,
- addTypeFilterAction,
- removeTypeFilterAction,
clearFacetsAction,
- removeScientificConditionAction,
- setDateRangeFilterAction,
- addScientificConditionAction,
- setPidTermsAction,
+ fetchDatasetsAction,
+ fetchFacetCountsAction,
} from "state-management/actions/datasets.actions";
import { of } from "rxjs";
-import {
- selectColumnAction,
- deselectColumnAction,
- deselectAllCustomColumnsAction,
-} from "state-management/actions/user.actions";
-import { ScientificCondition } from "state-management/models";
+import { deselectAllCustomColumnsAction } from "state-management/actions/user.actions";
import { SharedScicatFrontendModule } from "shared/shared.module";
import { MatAutocompleteModule } from "@angular/material/autocomplete";
import { MatDialogModule, MatDialog } from "@angular/material/dialog";
@@ -43,25 +26,51 @@ import { MatInputModule } from "@angular/material/input";
import { MatSelectModule } from "@angular/material/select";
import { SearchParametersDialogComponent } from "shared/modules/search-parameters-dialog/search-parameters-dialog.component";
import { AsyncPipe } from "@angular/common";
-import { DateTime } from "luxon";
-import {
- MatDatepickerInputEvent,
- MatDatepickerModule,
-} from "@angular/material/datepicker";
+import { MatDatepickerModule } from "@angular/material/datepicker";
import { MatChipsModule } from "@angular/material/chips";
import { MatNativeDateModule, MatOptionModule } from "@angular/material/core";
import { MatCardModule } from "@angular/material/card";
import { MatButtonModule } from "@angular/material/button";
import { MatIconModule } from "@angular/material/icon";
import { AppConfigService } from "app-config.service";
+import { DatasetsFilterSettingsComponent } from "./settings/datasets-filter-settings.component";
+import { LocationFilterComponent } from "../../shared/modules/filters/location-filter.component";
+import { PidFilterComponent } from "../../shared/modules/filters/pid-filter.component";
+import { PidFilterContainsComponent } from "../../shared/modules/filters/pid-filter-contains.component";
+import { PidFilterStartsWithComponent } from "../../shared/modules/filters/pid-filter-startsWith.component";
+import { GroupFilterComponent } from "../../shared/modules/filters/group-filter.component";
+import { TypeFilterComponent } from "../../shared/modules/filters/type-filter.component";
+import { KeywordFilterComponent } from "../../shared/modules/filters/keyword-filter.component";
+import { DateRangeFilterComponent } from "../../shared/modules/filters/date-range-filter.component";
+import { TextFilterComponent } from "../../shared/modules/filters/text-filter.component";
+import { FilterConfig } from "../../shared/modules/filters/filters.module";
+import { selectFilters } from "../../state-management/selectors/user.selectors";
+
+const filterConfigs: FilterConfig[] = [
+ { type: "LocationFilterComponent", visible: true },
+ { type: "PidFilterComponent", visible: true },
+ { type: "PidFilterContainsComponent", visible: false },
+ { type: "PidFilterStartsWithComponent", visible: false },
+ { type: "GroupFilterComponent", visible: true },
+ { type: "TypeFilterComponent", visible: true },
+ { type: "KeywordFilterComponent", visible: true },
+ { type: "DateRangeFilterComponent", visible: true },
+ { type: "TextFilterComponent", visible: true },
+];
+
+export class MockStoreWithFilters extends MockStore {
+ public select(selector: any) {
+ if (selector === selectFilters) {
+ return of(filterConfigs);
+ }
+ return of(null);
+ }
+}
export class MockMatDialog {
open() {
return {
- afterClosed: () =>
- of({
- data: { lhs: "", rhs: "", relation: "EQUAL_TO_STRING", unit: "" },
- }),
+ afterClosed: () => of(filterConfigs),
};
}
}
@@ -74,7 +83,7 @@ describe("DatasetsFilterComponent", () => {
let component: DatasetsFilterComponent;
let fixture: ComponentFixture