From 301e3932b64172b3f9cf055287fdfdb4a89620af Mon Sep 17 00:00:00 2001 From: Syndamia Date: Wed, 24 Feb 2021 18:56:32 +0200 Subject: Improved semantics and simplified some HTML of comments and posts --- src/app/components/comment/comment.component.css | 5 +--- src/app/components/comment/comment.component.html | 36 +++++++++++------------ 2 files changed, 18 insertions(+), 23 deletions(-) (limited to 'src/app/components/comment') diff --git a/src/app/components/comment/comment.component.css b/src/app/components/comment/comment.component.css index d82f10e..419cbf8 100644 --- a/src/app/components/comment/comment.component.css +++ b/src/app/components/comment/comment.component.css @@ -1,5 +1,6 @@ .comment { display: flex; + flex-direction: column; width: 100%; margin: .5em auto; @@ -40,10 +41,6 @@ /* Content */ -.content { - flex: 1; -} - .message { margin: .3em 0; word-break: break-all; diff --git a/src/app/components/comment/comment.component.html b/src/app/components/comment/comment.component.html index 718e25c..e46bdb7 100644 --- a/src/app/components/comment/comment.component.html +++ b/src/app/components/comment/comment.component.html @@ -1,23 +1,21 @@ -
-
-
- -
-
- {{ user.firstName }} {{ user.lastName }} -
-
- @{{ user.userName }} -
+
+ + +
+
+ {{ user.firstName }} {{ user.lastName }} +
+
+ @{{ user.userName }}
-
- {{ comment.message }} -
-
- {{ timeCreated }} -
-
-
+ +
+ {{ comment.message }} +
+ + -- cgit v1.2.3 From 807e72b990e7412bdf243095a07bd716bb93453f Mon Sep 17 00:00:00 2001 From: Syndamia Date: Sun, 14 Mar 2021 08:34:59 +0200 Subject: Updated comment and comment-page's subscriptions to use an observer object --- .../comment-page/comment-page.component.ts | 20 ++++++++++---------- src/app/components/comment/comment.component.ts | 12 ++++++------ 2 files changed, 16 insertions(+), 16 deletions(-) (limited to 'src/app/components/comment') diff --git a/src/app/components/comment-page/comment-page.component.ts b/src/app/components/comment-page/comment-page.component.ts index 413436e..9bbdc59 100644 --- a/src/app/components/comment-page/comment-page.component.ts +++ b/src/app/components/comment-page/comment-page.component.ts @@ -32,8 +32,8 @@ export class CommentPageComponent implements OnInit { // Gets the post and the logged in user and compares them, // to determine if the current post is made by the user - this._commentService.getCommentRequest(this.commentId).subscribe( - (result: object) => { + this._commentService.getCommentRequest(this.commentId).subscribe({ + next: (result: object) => { this.comment = result as Comment; if (this.loggedIn) { this.editable = this.comment.issuerUsername === this._tokenService.getUsernameFromSessionStorageToken(); @@ -41,10 +41,10 @@ export class CommentPageComponent implements OnInit { } this.loaded = true; }, - () => { + error: () => { this._router.navigate(['/not-found']); } - ); + }); this.editCommentFormGroup = this._fb.group({ newCommentMessage: new FormControl('') @@ -66,22 +66,22 @@ export class CommentPageComponent implements OnInit { if (newMessage !== '' && newMessage !== this.comment.message) { console.log(this.commentId); - this._commentService.putCommentWithSessionStorageRequest(this.commentId, this.comment.postId, newMessage).subscribe( - () => { + this._commentService.putCommentWithSessionStorageRequest(this.commentId, this.comment.postId, newMessage).subscribe({ + next: () => { this.reloadPage(); } - ); + }); } } this.editingComment = !this.editingComment; } deleteComment(): void { - this._commentService.deleteCommentWithSessionStorage(this.commentId).subscribe( - () => { + this._commentService.deleteCommentWithSessionStorage(this.commentId).subscribe({ + next: () => { this.toPost(); } - ); + }); } private reloadPage(): void { diff --git a/src/app/components/comment/comment.component.ts b/src/app/components/comment/comment.component.ts index 5076769..d4dd9f4 100644 --- a/src/app/components/comment/comment.component.ts +++ b/src/app/components/comment/comment.component.ts @@ -25,23 +25,23 @@ export class CommentComponent implements OnInit { this.comment = this._commentService.getDefaultComment(); this.user = this._userService.getDefaultUser(); - this._commentService.getCommentRequest(Guid.parse(this.paramId)).subscribe( - (result: object) => { + this._commentService.getCommentRequest(Guid.parse(this.paramId)).subscribe({ + next: (result: object) => { Object.assign(this.comment, result); this.timeCreated = new Date(this.comment.timeCreated).toLocaleString('en-GB'); this.loadUser(); } - ); + }); } private loadUser(): void { - this._userService.getUserByUsernameRequest(this.comment.issuerUsername).subscribe( - (result: object) => { + this._userService.getUserByUsernameRequest(this.comment.issuerUsername).subscribe({ + next: (result: object) => { Object.assign(this.user, result); this.loaded = true; } - ); + }); } goToAuthorProfile(): void { -- cgit v1.2.3 From 8434044dcf8cec14765aa5d96072feaa2560a823 Mon Sep 17 00:00:00 2001 From: Syndamia Date: Sun, 14 Mar 2021 09:06:08 +0200 Subject: Fixed includes (for models) of all components --- src/app/components/admin-panel-page/admin-panel-page.component.ts | 6 +++--- src/app/components/comment-page/comment-page.component.ts | 2 +- src/app/components/comment/comment.component.ts | 4 ++-- src/app/components/feed/feed.component.ts | 4 ++-- src/app/components/post-page/post-page.component.ts | 2 +- src/app/components/post/post.component.ts | 4 ++-- src/app/components/profile-settings/profile-settings.component.ts | 6 +++--- src/app/components/profile/profile.component.ts | 6 +++--- src/app/components/register/register.component.ts | 2 +- 9 files changed, 18 insertions(+), 18 deletions(-) (limited to 'src/app/components/comment') diff --git a/src/app/components/admin-panel-page/admin-panel-page.component.ts b/src/app/components/admin-panel-page/admin-panel-page.component.ts index d5ecc71..9beb8bc 100644 --- a/src/app/components/admin-panel-page/admin-panel-page.component.ts +++ b/src/app/components/admin-panel-page/admin-panel-page.component.ts @@ -11,9 +11,9 @@ import { PostService } from 'src/app/services/post.service'; import { TechnologyService } from 'src/app/services/technology.service'; import { TokenService } from 'src/app/services/token.service'; import { UserService } from 'src/app/services/user.service'; -import { User } from 'src/models/identity/user'; -import { Language } from 'src/models/language'; -import { Technology } from 'src/models/technology'; +import { User } from 'src/models/identity/user.model'; +import { Language } from 'src/models/language.model'; +import { Technology } from 'src/models/technology.model'; import { ErrorBarComponent } from '../error-bar/error-bar.component'; import { SuccessBarComponent } from '../success-bar/success-bar.component'; diff --git a/src/app/components/comment-page/comment-page.component.ts b/src/app/components/comment-page/comment-page.component.ts index 9bbdc59..5d256bf 100644 --- a/src/app/components/comment-page/comment-page.component.ts +++ b/src/app/components/comment-page/comment-page.component.ts @@ -5,7 +5,7 @@ import { Router } from '@angular/router'; import { Guid } from 'guid-typescript'; import { CommentService } from 'src/app/services/comment.service'; import { TokenService } from 'src/app/services/token.service'; -import { Comment } from 'src/models/comment'; +import { Comment } from 'src/models/comment.model'; @Component({ selector: 'app-comment-page', diff --git a/src/app/components/comment/comment.component.ts b/src/app/components/comment/comment.component.ts index d4dd9f4..7da896d 100644 --- a/src/app/components/comment/comment.component.ts +++ b/src/app/components/comment/comment.component.ts @@ -3,8 +3,8 @@ import { Router } from '@angular/router'; import { Guid } from 'guid-typescript'; import { CommentService } from 'src/app/services/comment.service'; import { UserService } from 'src/app/services/user.service'; -import { Comment } from 'src/models/comment'; -import { User } from 'src/models/identity/user'; +import { Comment } from 'src/models/comment.model'; +import { User } from 'src/models/identity/user.model'; @Component({ selector: 'app-comment', diff --git a/src/app/components/feed/feed.component.ts b/src/app/components/feed/feed.component.ts index a9a042c..895bf76 100644 --- a/src/app/components/feed/feed.component.ts +++ b/src/app/components/feed/feed.component.ts @@ -1,11 +1,11 @@ import { Component, OnInit } from '@angular/core'; import { Title } from '@angular/platform-browser'; import { Router } from '@angular/router'; -import { User } from 'src/models/identity/user'; +import { User } from 'src/models/identity/user.model'; import { UserService } from '../../services/user.service'; import { AppConstants } from 'src/app/app-constants.module'; import { FeedService } from 'src/app/services/feed.service'; -import { Post } from 'src/models/post'; +import { Post } from 'src/models/post.model'; import { FormBuilder, FormControl, FormGroup } from '@angular/forms'; import { PostService } from 'src/app/services/post.service'; import { TokenService } from 'src/app/services/token.service'; diff --git a/src/app/components/post-page/post-page.component.ts b/src/app/components/post-page/post-page.component.ts index 7c32ce0..a60f4da 100644 --- a/src/app/components/post-page/post-page.component.ts +++ b/src/app/components/post-page/post-page.component.ts @@ -6,7 +6,7 @@ import { Guid } from 'guid-typescript'; import { CommentService } from 'src/app/services/comment.service'; import { PostService } from 'src/app/services/post.service'; import { TokenService } from 'src/app/services/token.service'; -import { Post } from 'src/models/post'; +import { Post } from 'src/models/post.model'; import { CloudinaryService } from 'src/app/services/cloudinary.service'; @Component({ diff --git a/src/app/components/post/post.component.ts b/src/app/components/post/post.component.ts index a46811d..fa5ac2f 100644 --- a/src/app/components/post/post.component.ts +++ b/src/app/components/post/post.component.ts @@ -3,8 +3,8 @@ import { Router } from '@angular/router'; import { Guid } from 'guid-typescript'; import { PostService } from 'src/app/services/post.service'; import { UserService } from 'src/app/services/user.service'; -import { User } from 'src/models/identity/user'; -import { Post } from 'src/models/post'; +import { User } from 'src/models/identity/user.model'; +import { Post } from 'src/models/post.model'; @Component({ selector: 'app-post', diff --git a/src/app/components/profile-settings/profile-settings.component.ts b/src/app/components/profile-settings/profile-settings.component.ts index ba1fbb6..b856bef 100644 --- a/src/app/components/profile-settings/profile-settings.component.ts +++ b/src/app/components/profile-settings/profile-settings.component.ts @@ -6,11 +6,11 @@ import { Router } from '@angular/router'; import { LanguageService } from 'src/app/services/language.service'; import { UserService } from 'src/app/services/user.service'; import { TechnologyService } from 'src/app/services/technology.service'; -import { User } from 'src/models/identity/user'; +import { User } from 'src/models/identity/user.model'; import { ErrorBarComponent } from '../error-bar/error-bar.component'; import { SuccessBarComponent } from '../success-bar/success-bar.component'; -import { Language } from 'src/models/language'; -import { Technology } from 'src/models/technology'; +import { Language } from 'src/models/language.model'; +import { Technology } from 'src/models/technology.model'; import { TokenService } from 'src/app/services/token.service'; import { Title } from '@angular/platform-browser'; import { AppConstants } from 'src/app/app-constants.module'; diff --git a/src/app/components/profile/profile.component.ts b/src/app/components/profile/profile.component.ts index 73e1e96..ed17f33 100644 --- a/src/app/components/profile/profile.component.ts +++ b/src/app/components/profile/profile.component.ts @@ -1,16 +1,16 @@ import { Component, OnInit } from '@angular/core'; import { Router } from '@angular/router'; import { UserService } from 'src/app/services/user.service'; -import { User } from 'src/models/identity/user'; +import { User } from 'src/models/identity/user.model'; import { AppConstants } from 'src/app/app-constants.module'; import { Location } from '@angular/common'; import { LanguageService } from 'src/app/services/language.service'; import { TechnologyService } from 'src/app/services/technology.service'; -import { Post } from 'src/models/post'; +import { Post } from 'src/models/post.model'; import { FeedService } from 'src/app/services/feed.service'; import { TokenService } from 'src/app/services/token.service'; import { Title } from '@angular/platform-browser'; -import { Friend } from 'src/models/identity/friend'; +import { Friend } from 'src/models/identity/friend.model'; import { FormBuilder, FormControl, FormGroup } from '@angular/forms'; @Component({ diff --git a/src/app/components/register/register.component.ts b/src/app/components/register/register.component.ts index b5800ad..07b8976 100644 --- a/src/app/components/register/register.component.ts +++ b/src/app/components/register/register.component.ts @@ -1,6 +1,6 @@ import { HttpErrorResponse } from '@angular/common/http'; import { Component, OnInit, ViewChild } from '@angular/core'; -import { AbstractControl, FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms'; +import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms'; import { Title } from '@angular/platform-browser'; import { Router } from '@angular/router'; import { TokenService } from 'src/app/services/token.service'; -- cgit v1.2.3 From 9a5b8b3d2d036dc9883ce434cb66d7453afa01ab Mon Sep 17 00:00:00 2001 From: Syndamia Date: Sun, 21 Mar 2021 18:12:45 +0200 Subject: Major redesign of comment component styling --- src/app/components/comment/comment.component.css | 54 ++++++----------------- src/app/components/comment/comment.component.html | 45 ++++++++++++------- 2 files changed, 43 insertions(+), 56 deletions(-) (limited to 'src/app/components/comment') diff --git a/src/app/components/comment/comment.component.css b/src/app/components/comment/comment.component.css index 419cbf8..48d9174 100644 --- a/src/app/components/comment/comment.component.css +++ b/src/app/components/comment/comment.component.css @@ -1,56 +1,30 @@ -.comment { - display: flex; - flex-direction: column; - width: 100%; - - margin: .5em auto; +.left-pane { box-sizing: border-box; - padding: .5em; - background-color: var(--card-bg); -} - -.comment:first-child { - margin-top: 0; } /* Author */ -.author { - display: flex; - margin-bottom: .2em; -} - -.author:hover { - cursor: pointer; -} - -.author > img { - width: 1.7em; - height: 1.7em; - margin-right: .2em; +.author-picture { + width: 2.2em; + height: 2.2em; } -.author-info > .name { - font-size: .8em; -} +/* Content */ -.author-info > .handle { - font-size: .6em; - color: gray; +.content { + padding: 0 var(--card-padding); } -/* Content */ - .message { - margin: .3em 0; - word-break: break-all; + word-break: break-word; } -.timestamp { - font-size: .5em; - color: gray; +.comment-details { + margin-bottom: calc(var(--card-padding) / 1.5); + padding: 0.2em 0; } -.message:hover, .timestamp:hover { - cursor: pointer; +.comment-details > * { + margin-left: 1.1em; } + diff --git a/src/app/components/comment/comment.component.html b/src/app/components/comment/comment.component.html index e46bdb7..03ba649 100644 --- a/src/app/components/comment/comment.component.html +++ b/src/app/components/comment/comment.component.html @@ -1,21 +1,34 @@ -
- - -
-
+
+ +
+ + {{ user.firstName }} {{ user.lastName }} -
-
+ + @{{ user.userName }} -
-
- -
- {{ comment.message }} -
- + + +
+ {{ comment.message }} +
+
+ +
+
+ +
+
-- cgit v1.2.3 From 578e3408089747fa1cedf59409baf96f27053d21 Mon Sep 17 00:00:00 2001 From: Syndamia Date: Sun, 21 Mar 2021 18:13:41 +0200 Subject: Removed comment page component --- src/app/app-routing.module.ts | 2 - src/app/app.module.ts | 2 - .../comment-page/comment-page.component.css | 26 ------ .../comment-page/comment-page.component.html | 18 ----- .../comment-page/comment-page.component.ts | 92 ---------------------- src/app/components/comment/comment.component.ts | 4 - 6 files changed, 144 deletions(-) delete mode 100644 src/app/components/comment-page/comment-page.component.css delete mode 100644 src/app/components/comment-page/comment-page.component.html delete mode 100644 src/app/components/comment-page/comment-page.component.ts (limited to 'src/app/components/comment') diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 0d83079..4367db7 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -8,7 +8,6 @@ import { ProfileSettingsComponent } from './components/profile-settings/profile- import { NotFoundComponent } from './components/not-found/not-found.component'; import { PostPageComponent } from './components/post-page/post-page.component'; import {AdminPanelPageComponent} from './components/admin-panel-page/admin-panel-page.component'; -import {CommentPageComponent} from './components/comment-page/comment-page.component'; const routes: Routes = [ { path: '', component: FeedComponent }, @@ -17,7 +16,6 @@ const routes: Routes = [ { path: 'profile/:username', component: ProfileComponent }, { path: 'profile/:username/settings', component: ProfileSettingsComponent }, { path: 'post/:id', component: PostPageComponent }, - { path: 'comment/:id', component: CommentPageComponent }, { path: 'admin-panel', component: AdminPanelPageComponent }, { path: 'not-found', component: NotFoundComponent }, { path: '**', component: NotFoundComponent } diff --git a/src/app/app.module.ts b/src/app/app.module.ts index f582bbc..cd796c2 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -22,7 +22,6 @@ import { SuccessBarComponent } from './components/success-bar/success-bar.compon import { PostPageComponent } from './components/post-page/post-page.component'; import { AdminPanelPageComponent } from './components/admin-panel-page/admin-panel-page.component'; import { CommentComponent } from './components/comment/comment.component'; -import { CommentPageComponent } from './components/comment-page/comment-page.component'; import { PostAttachmentComponent } from './components/post-attachment/post-attachment.component'; import { RouterModule } from '@angular/router'; import { NavbarComponent } from './components/navbar/navbar.component'; @@ -43,7 +42,6 @@ import { NavbarComponent } from './components/navbar/navbar.component'; PostPageComponent, AdminPanelPageComponent, CommentComponent, - CommentPageComponent, PostAttachmentComponent, NavbarComponent, ], diff --git a/src/app/components/comment-page/comment-page.component.css b/src/app/components/comment-page/comment-page.component.css deleted file mode 100644 index f9dc390..0000000 --- a/src/app/components/comment-page/comment-page.component.css +++ /dev/null @@ -1,26 +0,0 @@ -#content { - justify-content: flex-start !important; -} - -#content > * { - width: 100%; -} - -.many-buttons { - width: 100%; - display: flex; -} - -.many-buttons > * { - flex: 1; - margin-right: .3em; -} - -.many-buttons > *:last-of-type { - margin-right: 0; -} - -.submit-btn { - margin: 0 auto; - margin-bottom: .5em; -} diff --git a/src/app/components/comment-page/comment-page.component.html b/src/app/components/comment-page/comment-page.component.html deleted file mode 100644 index 553b545..0000000 --- a/src/app/components/comment-page/comment-page.component.html +++ /dev/null @@ -1,18 +0,0 @@ - - - - -
- - - -
- - -
-
diff --git a/src/app/components/comment-page/comment-page.component.ts b/src/app/components/comment-page/comment-page.component.ts deleted file mode 100644 index 5d256bf..0000000 --- a/src/app/components/comment-page/comment-page.component.ts +++ /dev/null @@ -1,92 +0,0 @@ -import { Component, OnInit } from '@angular/core'; -import { FormBuilder, FormControl, FormGroup } from '@angular/forms'; -import { Title } from '@angular/platform-browser'; -import { Router } from '@angular/router'; -import { Guid } from 'guid-typescript'; -import { CommentService } from 'src/app/services/comment.service'; -import { TokenService } from 'src/app/services/token.service'; -import { Comment } from 'src/models/comment.model'; - -@Component({ - selector: 'app-comment-page', - templateUrl: './comment-page.component.html', - styleUrls: ['./comment-page.component.css'] -}) -export class CommentPageComponent implements OnInit { - private _title = 'Comment'; - public loaded = false; - public loggedIn = false; - public editable = false; - public editingComment = false; - public commentId: Guid; - public comment: Comment; - public editCommentFormGroup: FormGroup; - - constructor(private _titleService: Title, private _router: Router, private _fb: FormBuilder, private _tokenService: TokenService, private _commentService: CommentService){ - this._titleService.setTitle(this._title); - } - - ngOnInit(): void { - this.loggedIn = this._tokenService.getTokenFromSessionStorage() !== ''; - this.commentId = Guid.parse(this._router.url.substring(9)); - - // Gets the post and the logged in user and compares them, - // to determine if the current post is made by the user - this._commentService.getCommentRequest(this.commentId).subscribe({ - next: (result: object) => { - this.comment = result as Comment; - if (this.loggedIn) { - this.editable = this.comment.issuerUsername === this._tokenService.getUsernameFromSessionStorageToken(); - this.editCommentFormGroup.get('newCommentMessage')?.setValue(this.comment.message); - } - this.loaded = true; - }, - error: () => { - this._router.navigate(['/not-found']); - } - }); - - this.editCommentFormGroup = this._fb.group({ - newCommentMessage: new FormControl('') - }); - } - - toPost(): void { - this._router.navigate(['/post/' + this.comment.postId]); - } - - editComment(): void { - if (this._tokenService.getTokenFromSessionStorage() === '') { - this._router.navigate(['/login']); - return; - } - - if (this.editingComment) { - const newMessage = this.editCommentFormGroup.get('newCommentMessage')?.value; - - if (newMessage !== '' && newMessage !== this.comment.message) { - console.log(this.commentId); - this._commentService.putCommentWithSessionStorageRequest(this.commentId, this.comment.postId, newMessage).subscribe({ - next: () => { - this.reloadPage(); - } - }); - } - } - this.editingComment = !this.editingComment; - } - - deleteComment(): void { - this._commentService.deleteCommentWithSessionStorage(this.commentId).subscribe({ - next: () => { - this.toPost(); - } - }); - } - - private reloadPage(): void { - this._router.routeReuseStrategy.shouldReuseRoute = () => false; - this._router.onSameUrlNavigation = 'reload'; - this._router.navigate([this._router.url]); - } -} diff --git a/src/app/components/comment/comment.component.ts b/src/app/components/comment/comment.component.ts index 7da896d..693fd43 100644 --- a/src/app/components/comment/comment.component.ts +++ b/src/app/components/comment/comment.component.ts @@ -47,8 +47,4 @@ export class CommentComponent implements OnInit { goToAuthorProfile(): void { this._router.navigate(['/profile/' + this.comment.issuerUsername]); } - - goToCommentPage(): void { - this._router.navigate(['/comment/' + this.comment.commentId]); - } } -- cgit v1.2.3 From 276b47c8823fd9332948435566a8a5349c898f8e Mon Sep 17 00:00:00 2001 From: Syndamia Date: Sun, 21 Mar 2021 18:27:14 +0200 Subject: Implemented (moved from comment page) functionality for editing and deleting comments --- src/app/components/comment/comment.component.html | 16 ++++++- src/app/components/comment/comment.component.ts | 55 +++++++++++++++++++++- .../components/post-page/post-page.component.html | 2 +- 3 files changed, 69 insertions(+), 4 deletions(-) (limited to 'src/app/components/comment') diff --git a/src/app/components/comment/comment.component.html b/src/app/components/comment/comment.component.html index 03ba649..65ebf56 100644 --- a/src/app/components/comment/comment.component.html +++ b/src/app/components/comment/comment.component.html @@ -13,7 +13,13 @@ @{{ user.userName }} -
+
+ + +
+
{{ comment.message }}
@@ -25,10 +31,16 @@
- + +
diff --git a/src/app/components/comment/comment.component.ts b/src/app/components/comment/comment.component.ts index 693fd43..0096c18 100644 --- a/src/app/components/comment/comment.component.ts +++ b/src/app/components/comment/comment.component.ts @@ -1,7 +1,9 @@ import { Component, Input, OnInit } from '@angular/core'; +import {FormBuilder, FormControl, FormGroup} from '@angular/forms'; import { Router } from '@angular/router'; import { Guid } from 'guid-typescript'; import { CommentService } from 'src/app/services/comment.service'; +import { TokenService } from 'src/app/services/token.service'; import { UserService } from 'src/app/services/user.service'; import { Comment } from 'src/models/comment.model'; import { User } from 'src/models/identity/user.model'; @@ -13,12 +15,15 @@ import { User } from 'src/models/identity/user.model'; }) export class CommentComponent implements OnInit { public loaded = false; + public loggedInAuthor = false; + public editingComment = false; public user: User; public comment: Comment; public timeCreated: string; @Input() paramId: string; + public editCommentFormGroup: FormGroup; - constructor(private _router: Router, private _commentService: CommentService, private _userService: UserService) + constructor(private _router: Router, private _commentService: CommentService, private _userService: UserService, private _tokenService: TokenService, private _fb: FormBuilder) { } ngOnInit(): void { @@ -33,12 +38,22 @@ export class CommentComponent implements OnInit { this.loadUser(); } }); + + this.editCommentFormGroup = this._fb.group({ + newCommentMessage: new FormControl('') + }); } private loadUser(): void { this._userService.getUserByUsernameRequest(this.comment.issuerUsername).subscribe({ next: (result: object) => { Object.assign(this.user, result); + + if (this._tokenService.getTokenFromSessionStorage() !== '') { + this.loggedInAuthor = this._tokenService.getUsernameFromSessionStorageToken() === this.comment.issuerUsername; + this.editCommentFormGroup.get('newCommentMessage')?.setValue(this.comment.message); + } + this.loaded = true; } }); @@ -47,4 +62,42 @@ export class CommentComponent implements OnInit { goToAuthorProfile(): void { this._router.navigate(['/profile/' + this.comment.issuerUsername]); } + + toggleEditing(): void { + this.editingComment = !this.editingComment; + } + + editComment(): void { + if (this._tokenService.getTokenFromSessionStorage() === '') { + this._router.navigate(['/login']); + return; + } + + if (this.editingComment) { + const newMessage = this.editCommentFormGroup.get('newCommentMessage')?.value; + + if (newMessage !== '' && newMessage !== this.comment.message) { + this._commentService.putCommentWithSessionStorageRequest(Guid.parse(this.paramId), this.comment.postId, newMessage).subscribe({ + next: () => { + this.reloadPage(); + } + }); + } + } + this.editingComment = !this.editingComment; + } + + deleteComment(): void { + this._commentService.deleteCommentWithSessionStorage(Guid.parse(this.paramId)).subscribe({ + next: () => { + this.reloadPage(); + } + }); + } + + private reloadPage(): void { + this._router.routeReuseStrategy.shouldReuseRoute = () => false; + this._router.onSameUrlNavigation = 'reload'; + this._router.navigate([this._router.url]); + } } diff --git a/src/app/components/post-page/post-page.component.html b/src/app/components/post-page/post-page.component.html index 529d971..9858c76 100644 --- a/src/app/components/post-page/post-page.component.html +++ b/src/app/components/post-page/post-page.component.html @@ -11,7 +11,7 @@
-
+
-- cgit v1.2.3 From c08d710428ca14b0ebe3d13c16df0aa9b8ba9a93 Mon Sep 17 00:00:00 2001 From: Syndamia Date: Mon, 22 Mar 2021 09:09:01 +0200 Subject: Minor update/fix to styling of textarea component on editing comment --- src/app/components/comment/comment.component.html | 2 +- src/styles.css | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) (limited to 'src/app/components/comment') diff --git a/src/app/components/comment/comment.component.html b/src/app/components/comment/comment.component.html index 65ebf56..a22907a 100644 --- a/src/app/components/comment/comment.component.html +++ b/src/app/components/comment/comment.component.html @@ -14,7 +14,7 @@
- + diff --git a/src/styles.css b/src/styles.css index d57416e..06ddae6 100644 --- a/src/styles.css +++ b/src/styles.css @@ -372,8 +372,9 @@ input[type=file]::file-selector-button { /* Inputs, the type found in login and register */ .textarea-new-msg { - min-height: 1.5em; + min-height: 2em; resize: vertical; + box-sizing: border-box; } .fancy-input { -- cgit v1.2.3 From 75594e7eac044e9398fd1b74246f22cabe6ddeba Mon Sep 17 00:00:00 2001 From: Syndamia Date: Mon, 22 Mar 2021 19:48:49 +0200 Subject: Implemented comment share functionality --- src/app/components/comment/comment.component.html | 4 +-- src/app/components/comment/comment.component.ts | 31 ++++++++++++++++++++--- 2 files changed, 29 insertions(+), 6 deletions(-) (limited to 'src/app/components/comment') diff --git a/src/app/components/comment/comment.component.html b/src/app/components/comment/comment.component.html index a22907a..27a11e6 100644 --- a/src/app/components/comment/comment.component.html +++ b/src/app/components/comment/comment.component.html @@ -1,6 +1,6 @@ -
+
@@ -34,7 +34,7 @@ - diff --git a/src/app/components/comment/comment.component.ts b/src/app/components/comment/comment.component.ts index 0096c18..2a54f92 100644 --- a/src/app/components/comment/comment.component.ts +++ b/src/app/components/comment/comment.component.ts @@ -1,5 +1,5 @@ -import { Component, Input, OnInit } from '@angular/core'; -import {FormBuilder, FormControl, FormGroup} from '@angular/forms'; +import { AfterViewInit, Component, ElementRef, Input, OnInit, Renderer2, ViewChild } from '@angular/core'; +import { FormBuilder, FormControl, FormGroup } from '@angular/forms'; import { Router } from '@angular/router'; import { Guid } from 'guid-typescript'; import { CommentService } from 'src/app/services/comment.service'; @@ -13,7 +13,7 @@ import { User } from 'src/models/identity/user.model'; templateUrl: './comment.component.html', styleUrls: ['./comment.component.css'] }) -export class CommentComponent implements OnInit { +export class CommentComponent implements OnInit, AfterViewInit { public loaded = false; public loggedInAuthor = false; public editingComment = false; @@ -22,8 +22,11 @@ export class CommentComponent implements OnInit { public timeCreated: string; @Input() paramId: string; public editCommentFormGroup: FormGroup; + @ViewChild('share') shareBtn: ElementRef; + private _defaultShareBtnInnerHTML: string; + private _linkShared = false; - constructor(private _router: Router, private _commentService: CommentService, private _userService: UserService, private _tokenService: TokenService, private _fb: FormBuilder) + constructor(private _router: Router, private _commentService: CommentService, private _userService: UserService, private _tokenService: TokenService, private _fb: FormBuilder, private _elem: ElementRef, private _renderer: Renderer2) { } ngOnInit(): void { @@ -59,6 +62,10 @@ export class CommentComponent implements OnInit { }); } + ngAfterViewInit(): void { + this._defaultShareBtnInnerHTML = this.shareBtn.nativeElement.innerHTML; + } + goToAuthorProfile(): void { this._router.navigate(['/profile/' + this.comment.issuerUsername]); } @@ -100,4 +107,20 @@ export class CommentComponent implements OnInit { this._router.onSameUrlNavigation = 'reload'; this._router.navigate([this._router.url]); } + + resetShareBtn(): void { + if (this._linkShared) { + this._renderer.setProperty(this.shareBtn.nativeElement, 'innerHTML', this._defaultShareBtnInnerHTML); + this._linkShared = false; + } + } + + showCopiedMessage(): void { + this._renderer.setProperty(this.shareBtn.nativeElement, 'innerHTML', 'Link copied to clipboard!'); + this._linkShared = true; + } + + getPostLink(): string { + return location.origin + '/comment/' + this.paramId; + } } -- cgit v1.2.3 From 9906b285148f54b4060c71012854a814409cc9d7 Mon Sep 17 00:00:00 2001 From: Syndamia Date: Mon, 22 Mar 2021 20:23:30 +0200 Subject: Improved readability and consistency of font-size, text, border, colors and padding CSS class names --- .../admin-panel-page.component.html | 62 +++++++++++----------- src/app/components/comment/comment.component.html | 18 +++---- src/app/components/feed/feed.component.html | 12 ++--- src/app/components/login/login.component.html | 22 ++++---- src/app/components/navbar/navbar.component.html | 20 +++---- .../components/not-found/not-found.component.html | 10 ++-- .../post-attachment/post-attachment.component.html | 4 +- .../components/post-page/post-page.component.html | 6 +-- src/app/components/post/post.component.html | 36 ++++++------- .../profile-settings.component.html | 54 +++++++++---------- src/app/components/profile/profile.component.html | 22 ++++---- .../components/register/register.component.html | 34 ++++++------ src/styles.css | 54 ++++++++++--------- 13 files changed, 178 insertions(+), 176 deletions(-) (limited to 'src/app/components/comment') diff --git a/src/app/components/admin-panel-page/admin-panel-page.component.html b/src/app/components/admin-panel-page/admin-panel-page.component.html index 65f9691..80d6795 100644 --- a/src/app/components/admin-panel-page/admin-panel-page.component.html +++ b/src/app/components/admin-panel-page/admin-panel-page.component.html @@ -6,34 +6,34 @@ -
+
- -
-
+
{{ lang.name }}
@@ -49,32 +49,32 @@
-
-
-
+
{{ tech.name }}
@@ -90,26 +90,26 @@
-
-
No languages available! @@ -81,12 +81,12 @@ Available languages:
-
+
{{ lang.name }}
-
@@ -94,7 +94,7 @@ - +
No technologies available! @@ -103,7 +103,7 @@ Available technologies:
-
+
{{ tech.name }}
@@ -112,15 +112,15 @@ - -
-
+
+
Are you sure you want to delete your account?
This is permanent!
-
diff --git a/src/app/components/profile/profile.component.html b/src/app/components/profile/profile.component.html index e6abeb9..8963d1b 100644 --- a/src/app/components/profile/profile.component.html +++ b/src/app/components/profile/profile.component.html @@ -3,47 +3,47 @@
-
+
-
+
{{ user.firstName }} {{ user.lastName }}
@{{ user.userName }}
-
- -
-
-
+
+
Languages
None
-
+
{{ lang.name }}
-
-
+
+
Technologies
None
-
+
{{ tech.name }}
diff --git a/src/app/components/register/register.component.html b/src/app/components/register/register.component.html index 4aae7ed..7d3a0bf 100644 --- a/src/app/components/register/register.component.html +++ b/src/app/components/register/register.component.html @@ -1,44 +1,44 @@ -
- Register +
+ Register - + -
-
- - + +
+ +
- - + +
- - + +
- - + +
- - + +
@@ -47,9 +47,9 @@
- + -
diff --git a/src/styles.css b/src/styles.css index 6c43f1f..373ff93 100644 --- a/src/styles.css +++ b/src/styles.css @@ -179,7 +179,7 @@ input[type=file]::file-selector-button { justify-content: center; } -.flex-center-align-children > * { +.align-children-center > * { display: flex; align-items: center; } @@ -203,10 +203,6 @@ input[type=file]::file-selector-button { font-size: 0.7em; } -.img-height-font-size { - height: 1em; -} - /* General text */ .text-centered { @@ -219,19 +215,19 @@ input[type=file]::file-selector-button { /* General border */ -.faded-slim-border { +.border-faded-slim { border: 1px solid var(--faded-color); } -.border-radius-normal, .card { +.border-radius-dot5r, .card { border-radius: 0.5rem; } -.border-radius-smaller { +.border-radius-dot3 { border-radius: 0.3em; } -.border-radius-small { +.border-radius-dot2 { border-radius: 0.2em; } @@ -243,66 +239,66 @@ input[type=file]::file-selector-button { /* General colors */ -.fg-color-faded { +.fg-faded { color: var(--faded-color); } -.focus-fg-color { +.fg-focus { color: var(--focus-color); border-color: var(--focus-color); } -.error-fg-color { +.fg-error { color: var(--failure); border-color: var(--failure); } /* General padding */ -.padding-big { +.padding-dot6 { padding: 0.6em; } -.padding-bigger { +.padding-dot5 { padding: 0.5em; } -.padding-normal { +.padding-dot4 { padding: 0.4em; } -.padding-smaller { +.padding-dot3 { padding: 0.3em; } -.padding-small { +.padding-dot2 { padding: 0.2em; } -.padding-tiny { +.padding-dot1 { padding: 0.1em; } -.side-padding-font { +.padding-side-font { padding-right: 1em; padding-left: 1em; } -.side-padding-smaller { +.padding-side-dot3 { padding-right: 0.3em; padding-left: 0.3em; } -.bot-padding-bigger { +.padding-bot-dot5 { padding-bottom: 0.5em; } -.top-bot-padding-bigger { +.padding-top-bot-dot5 { padding-top: 0.5em; padding-bottom: 0.5em; } -.top-bot-padding-small { +.padding-top-bot-dot2 { padding-top: 0.2em; padding-bottom: 0.2em; } @@ -370,16 +366,22 @@ input[type=file]::file-selector-button { transform: scale(0.9); } -/* Misc */ +/* Size */ -.full-height { +.height-full { height: 100%; } -.full-width { +.width-full { width: 100%; } +.height-font { + height: 1em; +} + +/* Misc */ + .centered-content { max-width: var(--max-width); margin: 0 auto; -- cgit v1.2.3 From 1afe87209a9e7140fabd3ba58b5e7b470b68fc7b Mon Sep 17 00:00:00 2001 From: Syndamia Date: Mon, 22 Mar 2021 20:35:04 +0200 Subject: Improved readability and consistency of margin global styling --- .../admin-panel-page.component.html | 22 +++++++++++----------- src/app/components/comment/comment.component.html | 6 +++--- src/app/components/feed/feed.component.html | 2 +- src/app/components/login/login.component.html | 6 +++--- .../components/not-found/not-found.component.html | 2 +- .../post-attachment/post-attachment.component.html | 4 ++-- .../components/post-page/post-page.component.html | 4 ++-- src/app/components/post/post.component.html | 6 +++--- .../profile-settings.component.html | 20 ++++++++++---------- src/app/components/profile/profile.component.html | 4 ++-- .../components/register/register.component.html | 6 +++--- src/styles.css | 18 +++++++++--------- 12 files changed, 50 insertions(+), 50 deletions(-) (limited to 'src/app/components/comment') diff --git a/src/app/components/admin-panel-page/admin-panel-page.component.html b/src/app/components/admin-panel-page/admin-panel-page.component.html index 80d6795..bc4a71f 100644 --- a/src/app/components/admin-panel-page/admin-panel-page.component.html +++ b/src/app/components/admin-panel-page/admin-panel-page.component.html @@ -11,7 +11,7 @@ -
+ @@ -21,7 +21,7 @@ Update language:
- +
@@ -33,14 +33,14 @@ -
+
No languages in database!
Available languages:
-
+
{{ lang.name }}
@@ -49,10 +49,10 @@
- -
+ @@ -62,7 +62,7 @@ Update technology:
- +
@@ -74,14 +74,14 @@ -
+
No technologies in database!
Available technologies:
-
+
{{ tech.name }}
@@ -90,10 +90,10 @@
- -
+ diff --git a/src/app/components/comment/comment.component.html b/src/app/components/comment/comment.component.html index 0ec443b..9403ea2 100644 --- a/src/app/components/comment/comment.component.html +++ b/src/app/components/comment/comment.component.html @@ -14,12 +14,12 @@ - -
-
+
{{ comment.message }}
diff --git a/src/app/components/feed/feed.component.html b/src/app/components/feed/feed.component.html index d81a142..93171a2 100644 --- a/src/app/components/feed/feed.component.html +++ b/src/app/components/feed/feed.component.html @@ -12,7 +12,7 @@
-
+
{{ file.name ? file.name : 'Attachment' }}
diff --git a/src/app/components/login/login.component.html b/src/app/components/login/login.component.html index 7649a3c..29aebf9 100644 --- a/src/app/components/login/login.component.html +++ b/src/app/components/login/login.component.html @@ -1,7 +1,7 @@
- Login + Login - +
@@ -21,5 +21,5 @@ - +
diff --git a/src/app/components/not-found/not-found.component.html b/src/app/components/not-found/not-found.component.html index 7b776bd..4d1165d 100644 --- a/src/app/components/not-found/not-found.component.html +++ b/src/app/components/not-found/not-found.component.html @@ -5,7 +5,7 @@
-
-
+
@@ -80,17 +80,17 @@
Available languages:
-
+
{{ lang.name }}
-
-
+
@@ -102,13 +102,13 @@
Available technologies:
-
+
{{ tech.name }}
-
+
@@ -117,7 +117,7 @@
-
+
Are you sure you want to delete your account?
This is permanent!
diff --git a/src/app/components/register/register.component.html b/src/app/components/register/register.component.html index 7d3a0bf..1f547c4 100644 --- a/src/app/components/register/register.component.html +++ b/src/app/components/register/register.component.html @@ -1,7 +1,7 @@
- Register + Register - +
@@ -49,7 +49,7 @@ -
diff --git a/src/styles.css b/src/styles.css index 373ff93..11c2973 100644 --- a/src/styles.css +++ b/src/styles.css @@ -305,42 +305,42 @@ input[type=file]::file-selector-button { /* Margin */ -.no-margin { +.margin-0 { margin: 0; } -.no-margin-top { +.margin-top-0 { margin-top: 0; } -.margin-top-normal { +.margin-top-dot4 { margin-top: 0.4em; } -.margin-top-bigger { +.margin-top-dot5 { margin-top: 0.5em; } -.margin-bot-bigger { +.margin-bot-dot5 { margin-bottom: 0.5em; } -.margin-top-bot-very-big { +.margin-top-bot-dot7 { margin-top: 0.7em; margin-bottom: 0.7em; } -.margin-top-bot-smaller { +.margin-top-bot-dot3 { margin-top: 0.3em; margin-bottom: 0.3em; } -.margin-top-bot-small { +.margin-top-bot-dot2 { margin-top: 0.2em; margin-bottom: 0.2em; } -.margin-right-small { +.margin-right-dot2 { margin-right: 0.2em; } -- cgit v1.2.3