From 0f3e996d686fbaa3c378baf1be576bd081f27ba5 Mon Sep 17 00:00:00 2001 From: Caleb Alldrin Date: Mon, 19 Feb 2024 14:47:42 -0800 Subject: [PATCH 1/6] Merge filter-sort --- package.json | 2 +- .../resource/resource.component.html | 7 +- .../resource/resource.component.spec.ts | 8 +- .../resources/resources.component.html | 134 ++++++++++++++++-- .../resources/resources.component.spec.ts | 4 + .../resources/resources.component.ts | 107 +++++++++++++- src/app/models/filters.ts | 5 + src/styles.css | 98 +++++++++---- yarn.lock | 2 +- 9 files changed, 321 insertions(+), 46 deletions(-) create mode 100644 src/app/models/filters.ts diff --git a/package.json b/package.json index d0d415c4..f002c899 100644 --- a/package.json +++ b/package.json @@ -34,7 +34,7 @@ "angular2-uuid": "1.1.1", "components-font-awesome": "4.7.0", "core-js": "2.6.12", - "countries-list": "^3.0.5", + "countries-list": "3.0.5", "jsonapi-datastore": "0.4.0-beta", "lodash": "^4.17.21", "ng2-ace-editor": "0.3.9", diff --git a/src/app/components/resource/resource.component.html b/src/app/components/resource/resource.component.html index eb951410..26dabdb8 100644 --- a/src/app/components/resource/resource.component.html +++ b/src/app/components/resource/resource.component.html @@ -5,9 +5,12 @@ (click)="showDetails = !showDetails" > - {{ resource.name }} + {{ resource.name }} -
+
-
+
Instructions
    @@ -64,11 +67,126 @@
    Instructions

-
- +
+
+
+
+
+
+ +
+ Showing All + + Clear +
+
TYPE
+ +
SYSTEM
+ +
OTHER
+ +
+
+
+ +
+ + +
+
+
{ let comp: ResourcesComponent; @@ -48,6 +50,8 @@ describe('ResourcesComponent', () => { { provide: LanguageService, useValue: languageServiceStub }, { provide: NgbModal }, { provide: DraftService }, + { provide: ResourceTypeService }, + { provide: SystemService }, ], }).compileComponents(); })); diff --git a/src/app/components/resources/resources.component.ts b/src/app/components/resources/resources.component.ts index 62e53f64..1c6c4a7d 100644 --- a/src/app/components/resources/resources.component.ts +++ b/src/app/components/resources/resources.component.ts @@ -5,6 +5,11 @@ import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap'; import { CreateResourceComponent } from '../edit-resource/create-resource/create-resource.component'; import { Language } from '../../models/language'; import { LanguageService } from '../../service/language.service'; +import { ResourceType } from '../../../../src/app/models/resource-type'; +import { System } from '../../../../src/app/models/system'; +import { Filters } from '../../../../src/app/models/filters'; +import { SystemService } from '../../../../src/app/service/system.service'; +import { ResourceTypeService } from '../../../../src/app/service/resource-type.service'; @Component({ selector: 'admin-resources', @@ -13,36 +18,100 @@ import { LanguageService } from '../../service/language.service'; export class ResourcesComponent implements OnInit { resources: Resource[]; languages: Language[]; + resourceTypes: ResourceType[]; + systems: System[]; showInstructions = false; + showFilters = false; loadingResources = false; loadingLanguages = false; errorMessage: string; + filters: Filters; + totalFilters: number; + sortOrder: string; constructor( private resourceService: ResourceService, private languageService: LanguageService, private modalService: NgbModal, + protected systemService: SystemService, + protected resourceTypeService: ResourceTypeService, ) {} ngOnInit(): void { this.loadResources(); this.loadLanguages(); + this.loadFilters(); } - loadResources(): void { - this.loadingResources = true; + blankFilters(): Filters { + return { + type: [], + system: [], + other: [], + }; + } + loadResources(): void { this.resourceService .getResources( 'latest-drafts-translations,pages,custom-manifests,tips,attachments,variants', ) .then((resources) => { - this.resources = resources; + const localFilters = localStorage.getItem('filters'); + this.sortOrder = localStorage.getItem('sortOrder'); + this.filters = localFilters + ? JSON.parse(localFilters) + : this.blankFilters(); + this.totalFilters = Object.keys(this.filters).reduce( + (acc, item) => acc + this.filters[item].length, + 0, + ); + + this.resources = this.filters + ? resources.filter((r) => { + let visible = true; + if (this.filters['type'].length) { + if (!this.filters['type'].includes(r['resource-type'])) { + visible = false; + } + } + if (this.filters['system'].length) { + if (!this.filters['system'].includes(r['system']['id'])) { + visible = false; + } + } + if (this.filters['other'].length) { + if ( + !r['attr-hidden'] || + (r['attr-hidden'] && + !this.filters['other'].includes('hidden')) + ) { + visible = false; + } + } + return visible; + }) + : resources; + if (this.sortOrder === 'default') { + this.resources.sort( + (a, b) => + (a['attr-default-order'] || 100) - + (b['attr-default-order'] || 100), + ); + } }) .catch(this.handleError.bind(this)) .then(() => (this.loadingResources = false)); } + loadFilters(): void { + this.resourceTypeService.getResourceTypes().then((types) => { + this.resourceTypes = types; + }); + this.systemService.getSystems().then((systems) => { + this.systems = systems; + }); + } openCreateModal(): void { const modalRef: NgbModalRef = this.modalService.open( @@ -51,6 +120,38 @@ export class ResourcesComponent implements OnInit { modalRef.result.then(() => this.loadResources(), console.log); } + toggleResources = function ( + category: string, + optionId: string | number, + ): void { + const updatedFilters = + this.filters[category] && this.filters[category].includes(optionId) + ? { + ...this.filters, + [category]: this.filters[category].filter((e) => e !== optionId), + } + : this.filters[category] + ? { + ...this.filters, + [category]: [...this.filters[category], optionId], + } + : { + ...this.filters, + [category]: [optionId], + }; + localStorage.setItem('filters', JSON.stringify(updatedFilters)); + this.loadResources(); + }; + + clearFilters = function (): void { + localStorage.setItem('filters', JSON.stringify(this.blankFilters())); + this.loadResources(); + }; + updateSort = function (order: string): void { + localStorage.setItem('sortOrder', order); + this.loadResources(); + }; + trackByFunction(pIx: number, pItem: Resource) { if (!pItem || pIx < 0) { return null; diff --git a/src/app/models/filters.ts b/src/app/models/filters.ts new file mode 100644 index 00000000..048312da --- /dev/null +++ b/src/app/models/filters.ts @@ -0,0 +1,5 @@ +export class Filters { + type: string[] | null; + system: number[] | null; + other: string[] | null; +} diff --git a/src/styles.css b/src/styles.css index 5b8aea89..bb519679 100644 --- a/src/styles.css +++ b/src/styles.css @@ -21,44 +21,82 @@ /* Tooltip */ .tooltip { - display:inline-block; - position:relative; - border-bottom:1px dotted #666; - text-align:left; + display: inline-block; + position: relative; + border-bottom: 1px dotted #666; + text-align: left; } -.tooltip h3 {margin:12px 0;} +.tooltip h3 { + margin: 12px 0; +} .tooltip .tooltip-content { - min-width:200px; - max-width:400px; - top:-20px; - left:50%; - transform:translate(-30%,-100%); - padding:10px 20px; - color:#ffffff; - background-color:#009cdc; - font-weight:normal; - font-size:14px; - border-radius:8px; - position:absolute; - z-index:99999999; - box-sizing:border-box; - box-shadow:0 1px 8px rgba(0,0,0,0.5); - display:none; + min-width: 200px; + max-width: 400px; + top: -20px; + left: 50%; + transform: translate(-30%, -100%); + padding: 10px 20px; + color: #ffffff; + background-color: #009cdc; + font-weight: normal; + font-size: 14px; + border-radius: 8px; + position: absolute; + z-index: 99999999; + box-sizing: border-box; + box-shadow: 0 1px 8px rgba(0, 0, 0, 0.5); + display: none; } .tooltip:hover .tooltip-content { - display:block; + display: block; } .tooltip .tooltip-content:after { - content:''; - position:absolute; - width:15px; - height:15px; - left:50%; - transform:translate(-50%,-50%) rotate(45deg); - background-color:#009cdc; - box-shadow:0 1px 8px rgba(0,0,0,0.5); + content: ''; + position: absolute; + width: 15px; + height: 15px; + left: 50%; + transform: translate(-50%, -50%) rotate(45deg); + background-color: #009cdc; + box-shadow: 0 1px 8px rgba(0, 0, 0, 0.5); +} +.filter-dropdown-button { + cursor: pointer; + display: block; + width: 100%; + padding: 0.25rem 1rem; + font-size: 0.875rem; + line-height: 1.5; + border-radius: 0.2rem; + clear: both; + font-weight: 400; + color: #212529; + text-align: inherit; + white-space: nowrap; + background-color: transparent; + border: 0; +} +.filter-dropdown-button:hover { + background-color: #f8f9fa; +} +.dropdown-menu > span { + padding-left: 1rem; + font-size: 0.875rem; +} +.card-header span.h4 i.fa { + visibility: hidden; + font-size: 15px; + margin-left: 5px; +} +.card-header:hover span.h4 i.fa { + visibility: visible; +} +#filterBadge { + translate: 0 -50%; + top: 50%; + width: 15px; } diff --git a/yarn.lock b/yarn.lock index 97b88c58..9c4edb21 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2176,7 +2176,7 @@ cosmiconfig@^5.0.0: js-yaml "^3.13.1" parse-json "^4.0.0" -countries-list@^3.0.5: +countries-list@3.0.5: version "3.0.5" resolved "https://registry.yarnpkg.com/countries-list/-/countries-list-3.0.5.tgz#34f2b76dfef5c5f47b0c2e536c0e9b2fb10e16a9" integrity sha512-JwaAU/wpoUoZk+6WSaGJL1WDoNCJ2vrQCkHOg/t3qoYIPH6kZ+SGAX3YZukMsKXbX1xkxU34pJOE+xr55O+Sww== From 2fdb69a7f242c217f708eb7d07a1595453718817 Mon Sep 17 00:00:00 2001 From: Caleb Alldrin Date: Thu, 22 Feb 2024 18:04:29 -0800 Subject: [PATCH 2/6] Merge filter-sort --- package.json | 2 +- .../resource/resource.component.html | 5 +- .../resources/resources.component.html | 52 +++--- .../resources/resources.component.spec.ts | 164 ++++++++++++++++++ .../resources/resources.component.ts | 114 ++++++------ src/styles.css | 61 ++++++- tslint.json | 3 - 7 files changed, 310 insertions(+), 91 deletions(-) diff --git a/package.json b/package.json index f002c899..d6ab91ce 100644 --- a/package.json +++ b/package.json @@ -8,7 +8,7 @@ "build": "ng build", "build:stage": "ng build -c staging", "build:prod": "ng build -c production", - "test": "ng test", + "test": "ng test --browsers=ChromeHeadless", "test:codecov": "ng test --watch=false --browsers=ChromeHeadless --code-coverage", "lint": "ng lint", "lint:fix": "ng lint --fix", diff --git a/src/app/components/resource/resource.component.html b/src/app/components/resource/resource.component.html index 26dabdb8..aa037c15 100644 --- a/src/app/components/resource/resource.component.html +++ b/src/app/components/resource/resource.component.html @@ -1,7 +1,8 @@
diff --git a/src/app/components/resources/resources.component.html b/src/app/components/resources/resources.component.html index 8e3d7189..b35d390c 100644 --- a/src/app/components/resources/resources.component.html +++ b/src/app/components/resources/resources.component.html @@ -1,9 +1,9 @@
- Translations + Tools
-
-
+
+
Instructions
  • @@ -70,12 +70,18 @@
    Instructions
-
-
-
+ { } as unknown) as Language; const resource: Resource = new Resource(); + const unfilteredResources = [ + { + name: 'GodTools CYOA Tool - Hidden', + abbreviation: 'emojitool2', + description: 'Emoji survey for the holiday season', + id: 123, + system: { id: 1, name: 'GodTools' }, + manifest: '', + showTranslations: false, + oneskyProjectId: 78097, + resourceType: { id: 2, name: 'cyoa' }, + variants: [], + 'latest-drafts-translations': [], + attachments: [], + pages: [], + tips: [], + latest: [], + data: { id: 22 }, + customManifests: [], + 'attr-default-order': 2, + 'attr-hidden': true, + 'resource-type': 'cyoa', + }, + { + name: 'GodTools Tract Tool - Not Hidden', + abbreviation: 'emojitool2', + description: 'Tract for all purposes', + id: 123, + system: { id: 1, name: 'GodTools' }, + manifest: '', + showTranslations: false, + oneskyProjectId: 385532, + resourceType: { id: 1, name: 'tract' }, + variants: [], + 'latest-drafts-translations': [], + attachments: [], + pages: [], + tips: [], + latest: [], + data: { id: 13 }, + customManifests: [], + 'attr-default-order': 1, + 'resource-type': 'tract', + }, + { + name: 'Test System Lesson Tool - Not Hidden', + abbreviation: 'lesson2', + description: 'Lesson for the holiday season', + id: 123, + system: { id: 99, name: 'Test' }, + manifest: '', + showTranslations: false, + oneskyProjectId: 456858656, + resourceType: { id: 3, name: 'lesson' }, + variants: [], + 'latest-drafts-translations': [], + attachments: [], + pages: [], + tips: [], + latest: [], + data: { id: 77 }, + customManifests: [], + 'resource-type': 'lesson', + }, + ]; beforeEach(async(() => { spyOn(resourceServiceStub, 'getResources').and.returnValue( @@ -56,9 +121,25 @@ describe('ResourcesComponent', () => { }).compileComponents(); })); + let localStore; + beforeEach(() => { fixture = TestBed.createComponent(ResourcesComponent); comp = fixture.componentInstance; + + localStore = {}; + + spyOn(window.localStorage, 'getItem').and.callFake((key) => + key in localStore ? localStore[key] : null, + ); + spyOn(window.localStorage, 'setItem').and.callFake( + (key, value) => (localStore[key] = value + ''), + ); + spyOn(window.localStorage, 'clear').and.callFake(() => (localStore = {})); + }); + + afterEach(() => { + comp.clearFilters(); }); it('should include pages when loading resources', (done) => { @@ -68,7 +149,90 @@ describe('ResourcesComponent', () => { expect(resourceServiceStub.getResources).toHaveBeenCalledWith( 'latest-drafts-translations,pages,custom-manifests,tips,attachments,variants', ); + done(); + }); + }); + + it('should filter resources by hidden', (done) => { + comp.unfilteredResources = unfilteredResources; + comp.filterAndSort(); + setTimeout(() => { + comp.toggleResources('other', 'hidden'); + }); + + setTimeout(() => { + expect( + comp.resources.find( + (r) => r.name === 'GodTools Tract Tool - Not Hidden', + ), + ).toEqual(undefined); + expect( + comp.resources.find((r) => r.name === 'GodTools CYOA Tool - Hidden'), + ).toBeTruthy(); + done(); + }); + }); + + it('should filter resources by type', (done) => { + comp.unfilteredResources = unfilteredResources; + comp.filterAndSort(); + comp.toggleResources('type', 'tract'); + + setTimeout(() => { + expect( + comp.resources.find( + (r) => r.name === 'GodTools Tract Tool - Not Hidden', + ), + ).toBeTruthy(); + expect( + comp.resources.find((r) => r.name === 'GodTools CYOA Tool - Hidden'), + ).toEqual(undefined); + done(); + }); + }); + + it('should filter resources by system', (done) => { + comp.unfilteredResources = unfilteredResources; + comp.filterAndSort(); + comp.toggleResources('system', 99); + + setTimeout(() => { + expect( + comp.resources.find( + (r) => r.name === 'Test System Lesson Tool - Not Hidden', + ), + ).toBeTruthy(); + expect( + comp.resources.find((r) => r.name === 'GodTools CYOA Tool - Hidden'), + ).toEqual(undefined); + done(); + }); + }); + it('should set local storage', (done) => { + comp.unfilteredResources = unfilteredResources; + comp.filterAndSort(); + comp.toggleResources('system', 99); + const expectedData = { + type: [], + system: [99], + other: [], + }; + + setTimeout(() => { + expect(localStorage.getItem('filters')).toEqual( + JSON.stringify(expectedData), + ); + done(); + }); + }); + it('should sort by tool order', (done) => { + comp.unfilteredResources = unfilteredResources; + comp.updateSort('tool'); + setTimeout(() => { + expect(comp.resources[0].name).toEqual( + 'GodTools Tract Tool - Not Hidden', + ); done(); }); }); diff --git a/src/app/components/resources/resources.component.ts b/src/app/components/resources/resources.component.ts index 1c6c4a7d..0bfbdf9f 100644 --- a/src/app/components/resources/resources.component.ts +++ b/src/app/components/resources/resources.component.ts @@ -17,6 +17,7 @@ import { ResourceTypeService } from '../../../../src/app/service/resource-type.s }) export class ResourcesComponent implements OnInit { resources: Resource[]; + unfilteredResources: Resource[]; languages: Language[]; resourceTypes: ResourceType[]; systems: System[]; @@ -44,7 +45,7 @@ export class ResourcesComponent implements OnInit { this.loadFilters(); } - blankFilters(): Filters { + getBlankFilters(): Filters { return { type: [], system: [], @@ -58,52 +59,55 @@ export class ResourcesComponent implements OnInit { 'latest-drafts-translations,pages,custom-manifests,tips,attachments,variants', ) .then((resources) => { - const localFilters = localStorage.getItem('filters'); - this.sortOrder = localStorage.getItem('sortOrder'); - this.filters = localFilters - ? JSON.parse(localFilters) - : this.blankFilters(); - this.totalFilters = Object.keys(this.filters).reduce( - (acc, item) => acc + this.filters[item].length, - 0, - ); - - this.resources = this.filters - ? resources.filter((r) => { - let visible = true; - if (this.filters['type'].length) { - if (!this.filters['type'].includes(r['resource-type'])) { - visible = false; - } - } - if (this.filters['system'].length) { - if (!this.filters['system'].includes(r['system']['id'])) { - visible = false; - } - } - if (this.filters['other'].length) { - if ( - !r['attr-hidden'] || - (r['attr-hidden'] && - !this.filters['other'].includes('hidden')) - ) { - visible = false; - } - } - return visible; - }) - : resources; - if (this.sortOrder === 'default') { - this.resources.sort( - (a, b) => - (a['attr-default-order'] || 100) - - (b['attr-default-order'] || 100), - ); - } + this.unfilteredResources = resources; + this.filterAndSort(); }) .catch(this.handleError.bind(this)) .then(() => (this.loadingResources = false)); } + filterAndSort(): void { + const localFilters = localStorage.getItem('filters'); + this.sortOrder = localStorage.getItem('sortOrder'); + this.filters = localFilters + ? JSON.parse(localFilters) + : this.getBlankFilters(); + this.totalFilters = Object.keys(this.filters).reduce( + (acc, item) => acc + this.filters[item].length, + 0, + ); + + this.resources = this.filters + ? this.unfilteredResources.filter((resource) => { + if (this.filters['type'].length) { + if (!this.filters['type'].includes(resource['resource-type'])) { + return false; + } + } + if (this.filters['system'].length) { + if (!this.filters['system'].includes(resource['system']['id'])) { + return false; + } + } + if (this.filters['other'].length) { + if ( + !resource['attr-hidden'] || + (resource['attr-hidden'] && + !this.filters['other'].includes('hidden')) + ) { + return false; + } + } + return true; + }) + : this.unfilteredResources; + + if (this.sortOrder === 'tool') { + this.resources.sort( + (a, b) => + (a['attr-default-order'] || 100) - (b['attr-default-order'] || 100), + ); + } + } loadFilters(): void { this.resourceTypeService.getResourceTypes().then((types) => { this.resourceTypes = types; @@ -116,6 +120,7 @@ export class ResourcesComponent implements OnInit { openCreateModal(): void { const modalRef: NgbModalRef = this.modalService.open( CreateResourceComponent, + { size: 'lg' }, ); modalRef.result.then(() => this.loadResources(), console.log); } @@ -124,32 +129,31 @@ export class ResourcesComponent implements OnInit { category: string, optionId: string | number, ): void { - const updatedFilters = - this.filters[category] && this.filters[category].includes(optionId) + const updatedFilters = this.filters[category] + ? this.filters[category].includes(optionId) ? { ...this.filters, [category]: this.filters[category].filter((e) => e !== optionId), } - : this.filters[category] - ? { + : { ...this.filters, [category]: [...this.filters[category], optionId], } - : { - ...this.filters, - [category]: [optionId], - }; + : { + ...this.filters, + [category]: [optionId], + }; localStorage.setItem('filters', JSON.stringify(updatedFilters)); - this.loadResources(); + this.filterAndSort(); }; clearFilters = function (): void { - localStorage.setItem('filters', JSON.stringify(this.blankFilters())); - this.loadResources(); + localStorage.setItem('filters', JSON.stringify(this.getBlankFilters())); + this.filterAndSort(); }; updateSort = function (order: string): void { localStorage.setItem('sortOrder', order); - this.loadResources(); + this.filterAndSort(); }; trackByFunction(pIx: number, pItem: Resource) { diff --git a/src/styles.css b/src/styles.css index bb519679..6c525284 100644 --- a/src/styles.css +++ b/src/styles.css @@ -6,7 +6,6 @@ max-height: 500px; overflow-y: auto; } - /* .card with scroll */ .card.autoScroll { max-height: 500px; @@ -81,22 +80,70 @@ border: 0; } .filter-dropdown-button:hover { - background-color: #f8f9fa; + background-color: rgba(0, 0, 0, 0.05); } -.dropdown-menu > span { - padding-left: 1rem; - font-size: 0.875rem; +.filter-dropdown-button:active { + background-color: rgba(0, 0, 0, 0.1); +} +#filterSortBar { + padding: 0 0 0 3px; +} +#filterSortBar > div > span { + padding-right: 0.75rem; + font-size: 0.75rem; + float: right; + vertical-align: middle; + margin: auto 0; + font-style: italic; + color: #6c757d; +} +#filterSortBar .dropdown > button { + font-size: 0.75rem; + border: 0; + padding: 0.15rem 0.4rem; + background-color: rgba(0, 0, 0, 0); + color: #6c757d; + margin-right: 5px; +} +#filterSortBar .dropdown > button:hover { + background-color: rgba(0, 0, 0, 0.05); +} +#filterSortBar .dropdown > button:focus { + box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); + background-color: rgba(0, 0, 0, 0.05); +} +#filterSortBar .dropdown > button:active { + background-color: rgba(0, 0, 0, 0.1); +} +#filterSortBar .dropdown-header { + padding: 0.3rem 0.5rem; + color: #000; +} +#filterSortBar .btn-group { + vertical-align: inherit; } .card-header span.h4 i.fa { visibility: hidden; font-size: 15px; margin-left: 5px; + vertical-align: middle !important; } -.card-header:hover span.h4 i.fa { - visibility: visible; +.card-header.pointer:hover { + cursor: pointer; +} +.card-header.pointer:hover span.h4 { + color: rgba(255, 255, 255, 0.75); +} +.card-header.pointer:active span.h4 { + color: rgba(255, 255, 255, 0.5); } #filterBadge { translate: 0 -50%; top: 50%; width: 15px; } +@media (min-width: 576px) { + .modal-dialog.modal-lg { + max-width: 750px; + } +} diff --git a/tslint.json b/tslint.json index 4c7e7d0c..c1e3e50c 100644 --- a/tslint.json +++ b/tslint.json @@ -56,8 +56,6 @@ "no-trailing-whitespace": true, "no-unnecessary-initializer": true, "no-unused-expression": true, - "no-unused-variable": [true, "check-parameters"], - "no-use-before-declare": true, "no-var-keyword": true, "object-literal-sort-keys": false, "one-line": [ @@ -82,7 +80,6 @@ "variable-declaration": "nospace" } ], - "typeof-compare": true, "unified-signatures": true, "variable-name": false, "whitespace": [ From 71589a34ffdd54513e6aad68b616ee4dd6a2abf0 Mon Sep 17 00:00:00 2001 From: Caleb Alldrin Date: Fri, 23 Feb 2024 08:08:42 -0800 Subject: [PATCH 3/6] Change styles and sort menu --- .../resources/resources.component.html | 8 +-- src/styles.css | 72 ++++++++++--------- 2 files changed, 41 insertions(+), 39 deletions(-) diff --git a/src/app/components/resources/resources.component.html b/src/app/components/resources/resources.component.html index b35d390c..1de55148 100644 --- a/src/app/components/resources/resources.component.html +++ b/src/app/components/resources/resources.component.html @@ -148,6 +148,7 @@
OTHER
+ Sort by |
OTHER diff --git a/src/styles.css b/src/styles.css index 6c525284..721b6b22 100644 --- a/src/styles.css +++ b/src/styles.css @@ -63,28 +63,7 @@ background-color: #009cdc; box-shadow: 0 1px 8px rgba(0, 0, 0, 0.5); } -.filter-dropdown-button { - cursor: pointer; - display: block; - width: 100%; - padding: 0.25rem 1rem; - font-size: 0.875rem; - line-height: 1.5; - border-radius: 0.2rem; - clear: both; - font-weight: 400; - color: #212529; - text-align: inherit; - white-space: nowrap; - background-color: transparent; - border: 0; -} -.filter-dropdown-button:hover { - background-color: rgba(0, 0, 0, 0.05); -} -.filter-dropdown-button:active { - background-color: rgba(0, 0, 0, 0.1); -} +/* Filter Sort Bar */ #filterSortBar { padding: 0 0 0 3px; } @@ -97,6 +76,14 @@ font-style: italic; color: #6c757d; } +#filterSortBar .btn-group { + vertical-align: inherit; +} +#filterSortBar .dropdown-header { + padding: 0.3rem 0.5rem; + color: #000; +} +/* Filter/Sort Button (Within Dropdown Menu) */ #filterSortBar .dropdown > button { font-size: 0.75rem; border: 0; @@ -115,28 +102,43 @@ #filterSortBar .dropdown > button:active { background-color: rgba(0, 0, 0, 0.1); } -#filterSortBar .dropdown-header { - padding: 0.3rem 0.5rem; - color: #000; +/* Filter/Sort NavBar Buttons */ +.filter-dropdown-button { + cursor: pointer; + display: block; + width: 100%; + padding: 0.25rem 1rem; + font-size: 0.875rem; + line-height: 1.5; + border-radius: 0.2rem; + clear: both; + font-weight: 400; + color: #212529; + text-align: inherit; + white-space: nowrap; + background-color: transparent; + border: 0; } -#filterSortBar .btn-group { - vertical-align: inherit; +.filter-dropdown-button:hover { + background-color: rgba(0, 0, 0, 0.05); } -.card-header span.h4 i.fa { - visibility: hidden; - font-size: 15px; - margin-left: 5px; - vertical-align: middle !important; +.filter-dropdown-button:active { + background-color: rgba(0, 0, 0, 0.1); } +span.sortLabel { + font-size: 0.75rem; + color: #6c757d; + margin-left: 7px; +} +/* Tool Cards */ .card-header.pointer:hover { cursor: pointer; -} -.card-header.pointer:hover span.h4 { - color: rgba(255, 255, 255, 0.75); + background-color: rgba(52, 58, 64, 0.9) !important; } .card-header.pointer:active span.h4 { color: rgba(255, 255, 255, 0.5); } +/* Other */ #filterBadge { translate: 0 -50%; top: 50%; From 7d251b2562bc65eb88262686ff2441ebbf35dd03 Mon Sep 17 00:00:00 2001 From: Caleb Alldrin Date: Fri, 1 Mar 2024 07:48:44 -0800 Subject: [PATCH 4/6] Change name from Tools to Content --- README.md | 11 +++++------ .../components/resources/resources.component.html | 14 +++++++------- .../resources/resources.component.spec.ts | 4 ++-- .../components/resources/resources.component.ts | 4 ++-- 4 files changed, 16 insertions(+), 17 deletions(-) diff --git a/README.md b/README.md index 766edbdb..378f5596 100644 --- a/README.md +++ b/README.md @@ -1,11 +1,10 @@ # MobileContentAdmin [![Build Status](https://travis-ci.org/CruGlobal/mobile-content-admin.svg?branch=master)](https://travis-ci.org/CruGlobal/mobile-content-admin) [![codecov](https://codecov.io/gh/CruGlobal/mobile-content-admin/branch/master/graph/badge.svg)](https://codecov.io/gh/CruGlobal/mobile-content-admin) - This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.2.7. ## Development server -Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files. +Run `yarn start` for a dev server. Navigate to `http://localhost:8080/`. The app will automatically reload if you change any of the source files. ## Code scaffolding @@ -13,16 +12,16 @@ Run `ng generate component component-name` to generate a new component. You can ## Build -Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build. +Run `yarn build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build. ## Running unit tests -Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io). -If you want to only run a single test on a file, change the file's root `describe` to `fdescribe` and Jamsine will only test that file. +Run `yarn test` to execute the unit tests via [Karma](https://karma-runner.github.io). +If you want to only run a single test on a file, change the file's root `describe` to `fdescribe` and Jamsine will only test that file. ## Running end-to-end tests -Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/). +Run `yarn e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/). Before running the tests make sure you are serving the app via `ng serve`. ## Further help diff --git a/src/app/components/resources/resources.component.html b/src/app/components/resources/resources.component.html index 1de55148..8f91d45f 100644 --- a/src/app/components/resources/resources.component.html +++ b/src/app/components/resources/resources.component.html @@ -1,9 +1,9 @@
- Tools + Content
OTHER
diff --git a/src/app/components/resources/resources.component.spec.ts b/src/app/components/resources/resources.component.spec.ts index 1cc65f27..dd82d7ea 100644 --- a/src/app/components/resources/resources.component.spec.ts +++ b/src/app/components/resources/resources.component.spec.ts @@ -225,9 +225,9 @@ describe('ResourcesComponent', () => { done(); }); }); - it('should sort by tool order', (done) => { + it('should sort by content order', (done) => { comp.unfilteredResources = unfilteredResources; - comp.updateSort('tool'); + comp.updateSort('content'); setTimeout(() => { expect(comp.resources[0].name).toEqual( diff --git a/src/app/components/resources/resources.component.ts b/src/app/components/resources/resources.component.ts index 0bfbdf9f..04f36241 100644 --- a/src/app/components/resources/resources.component.ts +++ b/src/app/components/resources/resources.component.ts @@ -101,10 +101,10 @@ export class ResourcesComponent implements OnInit { }) : this.unfilteredResources; - if (this.sortOrder === 'tool') { + if (this.sortOrder === 'content') { this.resources.sort( (a, b) => - (a['attr-default-order'] || 100) - (b['attr-default-order'] || 100), + (a['attr-default-order'] || 1000) - (b['attr-default-order'] || 1000), ); } } From e34ec7d6c54241f2fafebbd9ebae1363708a820a Mon Sep 17 00:00:00 2001 From: Caleb Alldrin Date: Fri, 1 Mar 2024 08:47:40 -0800 Subject: [PATCH 5/6] Remove chevron from merge --- src/app/components/resource/resource.component.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/components/resource/resource.component.html b/src/app/components/resource/resource.component.html index aa037c15..0674456d 100644 --- a/src/app/components/resource/resource.component.html +++ b/src/app/components/resource/resource.component.html @@ -6,7 +6,7 @@ (click)="showDetails = !showDetails" > - {{ resource.name }} + {{ resource.name }}
Date: Wed, 27 Mar 2024 15:23:40 -0400 Subject: [PATCH 6/6] Using {{ translation.version }} instead of hardcoded number --- .../translation-version-badge.component.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/components/translation/translation-version-badge/translation-version-badge.component.html b/src/app/components/translation/translation-version-badge/translation-version-badge.component.html index 36ecf072..7cd84fa2 100644 --- a/src/app/components/translation/translation-version-badge/translation-version-badge.component.html +++ b/src/app/components/translation/translation-version-badge/translation-version-badge.component.html @@ -11,6 +11,6 @@ >{{ translation.version }} | Live 1 | Error{{ translation.version }} | Error None