diff --git a/docs/trendy-client-layout.md b/docs/trendy-client-layout.md index 28c865c..d3ea145 100644 --- a/docs/trendy-client-layout.md +++ b/docs/trendy-client-layout.md @@ -54,6 +54,31 @@ nx g @nrwl/angular:component containers/picture-cards/picture-cards --project=p nx g @nrwl/angular:component components/picture-card/picture-card --project=pictures ``` +The picture-cards can get the data from a service. +The picture-card gets its info from the picture-cards container. + +This way we can just add a new data model to the source, and it will end up as a route? + +Not sure how that part is going to work. Maybe we just add an entry in the service and make sure to add a route for each entry. That could work. Worth a try for our first effort. + +The status demo: + +```js +{ path: 'Mike Richards', component: MikeRichardsComponent }, +``` + +The first idea: + +```js +{ path: 'picture/Mike Richards', component: PictureCardsComponent }, +``` + +Then in PictureCardsComponent, we look at the path and use the data for that picture. Not sure about all this, but it actually works. + +I thought it would be a good idea to create a topic about something which has not search results. So enter: + +http://localhost:4200/topic/Qivit%20Tittysure + ## Git issue Git fatal: failed to resolve HEAD as a valid ref. diff --git a/libs/pictures/src/lib/components/picture-card/picture-card/picture-card.component.html b/libs/pictures/src/lib/components/picture-card/picture-card/picture-card.component.html new file mode 100644 index 0000000..f9845bc --- /dev/null +++ b/libs/pictures/src/lib/components/picture-card/picture-card/picture-card.component.html @@ -0,0 +1,19 @@ + + + {{ picture.title }} + + {{ picture.altText }} + +

+ {{ picture.description }} +

+ + + + + + diff --git a/libs/pictures/src/lib/components/picture-card/picture-card/picture-card.component.scss b/libs/pictures/src/lib/components/picture-card/picture-card/picture-card.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/libs/pictures/src/lib/components/picture-card/picture-card/picture-card.component.spec.ts b/libs/pictures/src/lib/components/picture-card/picture-card/picture-card.component.spec.ts new file mode 100644 index 0000000..e908ec1 --- /dev/null +++ b/libs/pictures/src/lib/components/picture-card/picture-card/picture-card.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { PictureCardComponent } from './picture-card.component'; + +describe('PictureCardComponent', () => { + let component: PictureCardComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ PictureCardComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(PictureCardComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/libs/pictures/src/lib/components/picture-card/picture-card/picture-card.component.ts b/libs/pictures/src/lib/components/picture-card/picture-card/picture-card.component.ts new file mode 100644 index 0000000..7bb7eeb --- /dev/null +++ b/libs/pictures/src/lib/components/picture-card/picture-card/picture-card.component.ts @@ -0,0 +1,13 @@ +import { Component, OnInit, Input } from '@angular/core'; + +@Component({ + selector: 'demo-app-picture-card', + templateUrl: './picture-card.component.html', + styleUrls: ['./picture-card.component.scss'], +}) +export class PictureCardComponent implements OnInit { + @Input() picture: any; + constructor() {} + + ngOnInit(): void {} +} diff --git a/libs/pictures/src/lib/containers/picture-cards/picture-cards/picture-cards.component.html b/libs/pictures/src/lib/containers/picture-cards/picture-cards/picture-cards.component.html new file mode 100644 index 0000000..f43908f --- /dev/null +++ b/libs/pictures/src/lib/containers/picture-cards/picture-cards/picture-cards.component.html @@ -0,0 +1,14 @@ +
+
+
+ +
+
+ +
+
+

+ {{ trend.description }} + {{ trend.linkLabel }} +

+
diff --git a/libs/pictures/src/lib/containers/picture-cards/picture-cards/picture-cards.component.scss b/libs/pictures/src/lib/containers/picture-cards/picture-cards/picture-cards.component.scss new file mode 100644 index 0000000..9403b31 --- /dev/null +++ b/libs/pictures/src/lib/containers/picture-cards/picture-cards/picture-cards.component.scss @@ -0,0 +1,9 @@ +.content { + padding: 16px; + overflow: hidden; +} + +.info { + margin-top: 5px; + font-size: small; +} \ No newline at end of file diff --git a/libs/pictures/src/lib/containers/picture-cards/picture-cards/picture-cards.component.spec.ts b/libs/pictures/src/lib/containers/picture-cards/picture-cards/picture-cards.component.spec.ts new file mode 100644 index 0000000..825aa77 --- /dev/null +++ b/libs/pictures/src/lib/containers/picture-cards/picture-cards/picture-cards.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { PictureCardsComponent } from './picture-cards.component'; + +describe('PictureCardsComponent', () => { + let component: PictureCardsComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ PictureCardsComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(PictureCardsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/libs/pictures/src/lib/containers/picture-cards/picture-cards/picture-cards.component.ts b/libs/pictures/src/lib/containers/picture-cards/picture-cards/picture-cards.component.ts new file mode 100644 index 0000000..6084a3e --- /dev/null +++ b/libs/pictures/src/lib/containers/picture-cards/picture-cards/picture-cards.component.ts @@ -0,0 +1,46 @@ +import { Component, OnInit } from '@angular/core'; +import { Router } from '@angular/router'; + +@Component({ + selector: 'demo-app-picture-cards', + templateUrl: './picture-cards.component.html', + styleUrls: ['./picture-cards.component.scss'], +}) +export class PictureCardsComponent implements OnInit { + currentRoute: string; + trend; + + trends = { + Qivit_Tittysure: { + description: + 'Qivit Tittysure is the soft, dense, light-brown woolly undercoat of the quoll and a small quantity of left over fluff.', + linkUrl: + 'https://en.wikipedia.org/wiki/Mike_Richards_(television_personality)', + linkLabel: 'Wikipedia', + one: { + pictureTitle: 'One title', + altText: 'Same as title', + imageSrc: + './../assets/pictures/mike-richards/toonify-mike-richards.jpg', + description: 'This is a description of one', + }, + two: { + pictureTitle: 'Two title', + altText: 'Same as title', + imageSrc: + './../assets/pictures/mike-richards/toonify-mike-richards.jpg', + description: 'This is a description of two', + }, + }, + }; + + constructor(private router: Router) { + const currentRoute = router.url; + const slash = currentRoute.lastIndexOf('/'); + const lastPart = currentRoute.substring(slash + 1, currentRoute.length); + const topic = lastPart.replace('%20', '_'); + this.trend = this.trends[topic]; + } + + ngOnInit(): void {} +} diff --git a/libs/pictures/src/lib/pictures.module.ts b/libs/pictures/src/lib/pictures.module.ts index de6c66c..553ff75 100644 --- a/libs/pictures/src/lib/pictures.module.ts +++ b/libs/pictures/src/lib/pictures.module.ts @@ -6,6 +6,8 @@ import { PicturesComponent } from './containers/pictures/pictures.component'; import { MikeRichardsComponent } from './containers/pictures/trends/mike-richards/mike-richards.component'; import { ToonifyMikeRichardsComponent } from './containers/pictures/trends/mike-richards/toonify/toonify-mike-richards/toonify-mike-richards.component'; import { TransitioncatMikeRichardsComponent } from './containers/pictures/trends/mike-richards/transitioncat/transitioncat-mike-richards/transitioncat-mike-richards.component'; +import { PictureCardsComponent } from './containers/picture-cards/picture-cards/picture-cards.component'; +import { PictureCardComponent } from './components/picture-card/picture-card/picture-card.component'; export const picturesRoutes: Route[] = []; @@ -17,6 +19,7 @@ export const picturesRoutes: Route[] = []; { path: '', component: PicturesComponent }, { path: 'home', component: PicturesComponent }, { path: 'Mike Richards', component: MikeRichardsComponent }, + { path: 'topic/Qivit Tittysure', component: PictureCardsComponent }, ]), ], declarations: [ @@ -24,6 +27,8 @@ export const picturesRoutes: Route[] = []; MikeRichardsComponent, ToonifyMikeRichardsComponent, TransitioncatMikeRichardsComponent, + PictureCardsComponent, + PictureCardComponent, ], }) export class PicturesModule {}