From ead239c0614aa2dd1b8791d98e85d0da95b400a4 Mon Sep 17 00:00:00 2001 From: Eugen Wissner Date: Thu, 2 Oct 2025 15:45:31 +0200 Subject: [PATCH] Implement post categories --- .../TBApplicationRootComponent.class.st | 5 +- .../TBCategoriesComponent.class.st | 61 ++++++++++++++ .../TBHeaderComponent.class.st | 5 +- .../TBPostComponent.class.st | 5 +- .../TBPostsListComponent.class.st | 81 +++++++++++++++++-- .../TBScreenComponent.class.st | 5 +- .../TBBlogTest.class.st | 3 +- .../TBPostTest.class.st | 3 +- src/TinyBlog-Tests/package.st | 1 + 9 files changed, 145 insertions(+), 24 deletions(-) create mode 100644 src/TinyBlog-Components/TBCategoriesComponent.class.st rename src/{TinyBlog => TinyBlog-Tests}/TBBlogTest.class.st (98%) rename src/{TinyBlog => TinyBlog-Tests}/TBPostTest.class.st (94%) create mode 100644 src/TinyBlog-Tests/package.st diff --git a/src/TinyBlog-Components/TBApplicationRootComponent.class.st b/src/TinyBlog-Components/TBApplicationRootComponent.class.st index d91bd2c..49b7692 100644 --- a/src/TinyBlog-Components/TBApplicationRootComponent.class.st +++ b/src/TinyBlog-Components/TBApplicationRootComponent.class.st @@ -4,9 +4,8 @@ Class { #instVars : [ 'main' ], - #category : 'TinyBlog-Components-Components', - #package : 'TinyBlog-Components', - #tag : 'Components' + #category : 'TinyBlog-Components', + #package : 'TinyBlog-Components' } { #category : 'testing' } diff --git a/src/TinyBlog-Components/TBCategoriesComponent.class.st b/src/TinyBlog-Components/TBCategoriesComponent.class.st new file mode 100644 index 0000000..6776186 --- /dev/null +++ b/src/TinyBlog-Components/TBCategoriesComponent.class.st @@ -0,0 +1,61 @@ +Class { + #name : 'TBCategoriesComponent', + #superclass : 'TBScreenComponent', + #instVars : [ + 'categories', + 'postsList' + ], + #category : 'TinyBlog-Components', + #package : 'TinyBlog-Components' +} + +{ #category : 'instance creation' } +TBCategoriesComponent class >> categories: categories postsList: aTBScreen [ + ^ self new categories: categories; postsList: aTBScreen +] + +{ #category : 'accessing' } +TBCategoriesComponent >> categories [ + + ^ categories +] + +{ #category : 'accessing' } +TBCategoriesComponent >> categories: anObject [ + + categories := anObject +] + +{ #category : 'accessing' } +TBCategoriesComponent >> postsList [ + + ^ postsList +] + +{ #category : 'accessing' } +TBCategoriesComponent >> postsList: anObject [ + + postsList := anObject +] + +{ #category : 'actions' } +TBCategoriesComponent >> renderCategoryLinkOn: html with: aCategory [ + html listGroupLinkedItem + class: 'active' if: aCategory = self postsList currentCategory; + callback: [ self selectCategory: aCategory ]; + with: aCategory +] + +{ #category : 'actions' } +TBCategoriesComponent >> renderContentOn: html [ + html listGroup: [ + html listGroupItem + with: [ html strong: 'Categories' ]. + categories do: [ :cat | + self renderCategoryLinkOn: html with: cat ] ] +] + +{ #category : 'actions' } +TBCategoriesComponent >> selectCategory: aCategory [ + postsList currentCategory: aCategory +] diff --git a/src/TinyBlog-Components/TBHeaderComponent.class.st b/src/TinyBlog-Components/TBHeaderComponent.class.st index cd9405a..302bef3 100644 --- a/src/TinyBlog-Components/TBHeaderComponent.class.st +++ b/src/TinyBlog-Components/TBHeaderComponent.class.st @@ -1,9 +1,8 @@ Class { #name : 'TBHeaderComponent', #superclass : 'SBSComponent', - #category : 'TinyBlog-Components-Components', - #package : 'TinyBlog-Components', - #tag : 'Components' + #category : 'TinyBlog-Components', + #package : 'TinyBlog-Components' } { #category : 'rendering' } diff --git a/src/TinyBlog-Components/TBPostComponent.class.st b/src/TinyBlog-Components/TBPostComponent.class.st index ac17174..f534bf7 100644 --- a/src/TinyBlog-Components/TBPostComponent.class.st +++ b/src/TinyBlog-Components/TBPostComponent.class.st @@ -4,9 +4,8 @@ Class { #instVars : [ 'post' ], - #category : 'TinyBlog-Components-Components', - #package : 'TinyBlog-Components', - #tag : 'Components' + #category : 'TinyBlog-Components', + #package : 'TinyBlog-Components' } { #category : 'initialization' } diff --git a/src/TinyBlog-Components/TBPostsListComponent.class.st b/src/TinyBlog-Components/TBPostsListComponent.class.st index d28d4ce..05dc2d5 100644 --- a/src/TinyBlog-Components/TBPostsListComponent.class.st +++ b/src/TinyBlog-Components/TBPostsListComponent.class.st @@ -2,40 +2,105 @@ Class { #name : 'TBPostsListComponent', #superclass : 'TBScreenComponent', #instVars : [ - 'postComponents' + 'postComponents', + 'currentCategory' ], - #category : 'TinyBlog-Components-Components', - #package : 'TinyBlog-Components', - #tag : 'Components' + #category : 'TinyBlog-Components', + #package : 'TinyBlog-Components' } +{ #category : 'rendering' } +TBPostsListComponent >> basicRenderCategoriesOn: html [ + html render: self categoriesComponent +] + +{ #category : 'rendering' } +TBPostsListComponent >> basicRenderPostsOn: html [ + self readSelectedPosts do: [ :p | html render: (self postComponentFor: p) ] +] + +{ #category : 'rendering' } +TBPostsListComponent >> categoriesComponent [ + ^ TBCategoriesComponent + categories: self blog allCategories + postsList: self +] + { #category : 'initialization' } TBPostsListComponent >> children [ ^ self postComponents, super children ] +{ #category : 'accessing' } +TBPostsListComponent >> currentCategory [ + + ^ currentCategory +] + +{ #category : 'accessing' } +TBPostsListComponent >> currentCategory: anObject [ + + currentCategory := anObject +] + { #category : 'initialization' } TBPostsListComponent >> initialize [ super initialize. postComponents := OrderedCollection new ] +{ #category : 'rendering' } +TBPostsListComponent >> postComponentFor: aPost [ + ^ TBPostComponent new post: aPost +] + { #category : 'initialization' } TBPostsListComponent >> postComponents [ postComponents := self readSelectedPosts - collect: [ :each | TBPostComponent new post: each ]. + collect: [ :each | TBPostComponent new post: each ]. ^ postComponents ] { #category : 'initialization' } TBPostsListComponent >> readSelectedPosts [ - ^ self blog allVisibleBlogPosts + ^ self currentCategory + ifNil: [ self blog allVisibleBlogPosts ] + ifNotNil: [ self blog allVisibleBlogPostsFromCategory: self currentCategory ] +] + +{ #category : 'rendering' } +TBPostsListComponent >> renderCategoryColumnOn: html [ + html column + extraSmallSize: 12; + smallSize: 2; + mediumSize: 4; + with: [ self basicRenderCategoriesOn: html ] ] { #category : 'rendering' } TBPostsListComponent >> renderContentOn: html [ super renderContentOn: html. html container: [ - self postComponents do: [ :p | - html render: p ] ] + html row + with: [ + html column + extraSmallSize: 12; + smallSize: 2; + mediumSize: 4; + with: [ html render: self categoriesComponent ]. + html column + extraSmallSize: 12; + smallSize: 10; + mediumSize: 8; + with: [ + self postComponents do: [ :p | html render: (self postComponentFor: p) ] ] ] ] +] + +{ #category : 'rendering' } +TBPostsListComponent >> renderPostColumnOn: html [ + html column + extraSmallSize: 12; + smallSize: 2; + mediumSize: 4; + with: [ self basicRenderPostsOn: html ] ] diff --git a/src/TinyBlog-Components/TBScreenComponent.class.st b/src/TinyBlog-Components/TBScreenComponent.class.st index 0732e00..eee94ce 100644 --- a/src/TinyBlog-Components/TBScreenComponent.class.st +++ b/src/TinyBlog-Components/TBScreenComponent.class.st @@ -4,9 +4,8 @@ Class { #instVars : [ 'header' ], - #category : 'TinyBlog-Components-Components', - #package : 'TinyBlog-Components', - #tag : 'Components' + #category : 'TinyBlog-Components', + #package : 'TinyBlog-Components' } { #category : 'acccessing' } diff --git a/src/TinyBlog/TBBlogTest.class.st b/src/TinyBlog-Tests/TBBlogTest.class.st similarity index 98% rename from src/TinyBlog/TBBlogTest.class.st rename to src/TinyBlog-Tests/TBBlogTest.class.st index f806ad1..2b00d97 100644 --- a/src/TinyBlog/TBBlogTest.class.st +++ b/src/TinyBlog-Tests/TBBlogTest.class.st @@ -8,8 +8,7 @@ Class { 'previousRepository' ], #category : 'TinyBlog-Tests', - #package : 'TinyBlog', - #tag : 'Tests' + #package : 'TinyBlog-Tests' } { #category : 'running' } diff --git a/src/TinyBlog/TBPostTest.class.st b/src/TinyBlog-Tests/TBPostTest.class.st similarity index 94% rename from src/TinyBlog/TBPostTest.class.st rename to src/TinyBlog-Tests/TBPostTest.class.st index 39fac0c..d9a2f78 100644 --- a/src/TinyBlog/TBPostTest.class.st +++ b/src/TinyBlog-Tests/TBPostTest.class.st @@ -2,8 +2,7 @@ Class { #name : 'TBPostTest', #superclass : 'TestCase', #category : 'TinyBlog-Tests', - #package : 'TinyBlog', - #tag : 'Tests' + #package : 'TinyBlog-Tests' } { #category : 'tests' } diff --git a/src/TinyBlog-Tests/package.st b/src/TinyBlog-Tests/package.st new file mode 100644 index 0000000..27356f6 --- /dev/null +++ b/src/TinyBlog-Tests/package.st @@ -0,0 +1 @@ +Package { #name : 'TinyBlog-Tests' }