Partial commit --- softcofing forum DS

package-lock.json

@@ -7567,6 +7567,11 @@
         "minimist": "^1.2.5"
       }
     },
+    "moment": {
+      "version": "2.27.0",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.27.0.tgz",
+      "integrity": "sha512-al0MUK7cpIcglMv3YF13qSgdAIqxHTO7brRtaz3DlSULbqfazqkc5kEjNrLDOM7fsjshoFIihnU8snrP7zUvhQ=="
+    },
     "move-concurrently": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",

package.json

@@ -21,6 +21,7 @@
     "@angular/router": "~9.1.1",
     "@angular/service-worker": "~9.1.1",
     "angular-svg-icon": "^9.2.0",
+    "moment": "^2.27.0",
     "ngx-scroll-event": "^1.0.8",
     "ngx-siema": "^2.0.1",
     "rxjs": "~6.5.4",

src/app/reusable-components/forum/forum.component.html

@@ -12,7 +12,7 @@
             </div>
             <div class="input-holder">
                 <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/link.svg"></svg-icon>
-                <textarea type="text" placeholder="Concerned URL link (ex: https://en.wikipedia.org/wiki/Planck_constant)"></textarea>
+                <textarea type="text" placeholder="Concerned URL (ex: https://en.wikipedia.org/wiki/Planck_constant)"></textarea>
             </div>
             <div class="input-holder">
                 <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/document.svg"></svg-icon>
@@ -26,98 +26,60 @@
     </section>
 
     <ul class="forum-post-list">
-        <li class="post">
-            <button class="book-mark-button">
+        <li class="post" *ngFor="let post of forumPostList">
+            <button class="book-mark-button" [ngClass]="{'active' : post.isBookmarked}">
                 <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/bookmark.svg"></svg-icon>
             </button>
             <div [routerLink]="['/forum-post-details']">
                 <h5>
-                    Can anyone explain dark matter radiation theory in a most simplest
-                    way possible?
+                    {{ post.question }}
                 </h5>
-                <p>
-                    It's easy to explain actually
-                </p>
+                <div class="tags">
+                    <button *ngFor="let tag of post.hashTags"> {{ tag }} </button>
+                </div>
             </div>
             <div class="author">
-                <img src="https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg">
-                <label> Dwayne the Rock </label>
-                <span class="time-stamp"> August 15, 2020 </span>
+                <img src="{{ post.author.imgSrc }}">
+                <label> {{ post.author.name }} </label>
+                <span class="time-stamp"> {{ getFormattedDate(post.date) }} </span>
             </div>
             <div class="action-buttons">
                 <button>
                     <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/like.svg"></svg-icon>
-                    <span> 56 </span>
+                    <span> {{ post.likeCount }} </span>
                 </button>
                 <button>
                     <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/comment.svg"></svg-icon>
-                    <span> 56 </span>
+                    <span> {{ post.answers.length }} </span>
                 </button>
                 <button>
                     <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/share.svg"></svg-icon>
-                    <span> 56 </span>
                 </button>
 
                 <button class="more-button" (click)="showMorePostOptions = true">
                     <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/more.svg"></svg-icon>
                 </button>
             </div>
-
-            <ul class="comment-list">
-                <button class="add-comment-button" (click)="showAddCommentToPost = true">
-                    <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/comment.svg"></svg-icon>
-                    ADD A COMMENT
-                </button>
-                <li class="comment">
-                    <div class="author">
-                        <img src="https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg">
-                        <label> Dwayne the Rock </label>
-                        <span class="time-stamp"> August 15, 2020 </span>
-                    </div>
-                    <p>
-                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla, iusto, quaerat. Facilis commodi, pariatur eum. Nam ullam neque delectus, ducimus! Odit, qui ad vitae. Rerum vero quisquam laboriosam, accusantium optio!
-                    </p>
-                    <div class="action-buttons">
-                        <button>
-                            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/reply.svg"></svg-icon>
-                            <span> Reply </span>
-                        </button>
-                        <button>
-                            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/like.svg"></svg-icon>
-                            <span> 56 </span>
-                        </button>
-
-                        <button class="more-button">
-                            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/more.svg"></svg-icon>
-                        </button>
-                    </div>
-                </li>
-
-                <li class="comment">
-                    <div class="author">
-                        <img src="https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg">
-                        <label> Dwayne the Rock </label>
-                        <span class="time-stamp"> August 15, 2020 </span>
-                    </div>
-                    <p>
-                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla, iusto, quaerat. Facilis commodi, pariatur eum. Nam ullam neque delectus, ducimus! Odit, qui ad vitae. Rerum vero quisquam laboriosam, accusantium optio!
-                    </p>
-                    <div class="action-buttons">
-                        <button>
-                            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/reply.svg"></svg-icon>
-                            <span> Reply </span>
-                        </button>
-                        <button>
-                            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/share.svg"></svg-icon>
-                            <span> 56 </span>
-                        </button>
-
-                        <button class="more-button">
-                            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/more.svg"></svg-icon>
-                        </button>
-                    </div>
-                </li>
-            </ul>
         </li>
     </ul>
+
+    <section class="more-options-slideup" [ngClass]="{'active' : showMorePostOptions }">
+        <header>
+            <h4> More Options </h4>
+            <button class="close-button" (click)="showMorePostOptions = false">
+                <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/close.svg"></svg-icon>
+            </button>
+        </header>
+        <ul>
+            <li>
+                Downvote Answer
+            </li>
+            <li>
+                Downvote Question
+            </li>
+            <li>
+                Report
+            </li>
+        </ul>
+    </section>
 </section>

src/app/reusable-components/forum/forum.component.scss

@@ -1,28 +1,33 @@
-.forum-details {
-    .add-post {
-        width: 90%;
-        margin: 10px auto 20px;
-        .post-input {
-            border: 0px;
-            height: 150px;
-            display: block;
-            width: 100%;
-            font-size: 16px;
-            color: white;
-            padding: 10px;
-            background-color: transparent;
-            border: 2px solid var(--dark-grey);
-            border-radius: 7px;
-            resize: none;
-            margin: 20px auto;
+.add-post {
+    width: 90%;
+    margin: 10px auto 20px;
+    .post-input {
+        border: 0px;
+        height: 150px;
+        display: block;
+        width: 100%;
+        font-size: 16px;
+        color: white;
+        padding: 10px;
+        background-color: transparent;
+        border: 2px solid var(--dark-grey);
+        border-radius: 7px;
+        resize: none;
+        margin: 20px auto;
 
-            &::placeholder {
-                opacity: 0.8;
-                font-weight: 400;
-            }
+        &::placeholder {
+            opacity: 0.8;
+            font-weight: 400;
         }
     }
 
+    .action-buttons {
+        display: flex;
+        width: 100%;
+        margin-top: 20px;
+        justify-content: space-between;
+    }
+
     .input-holder {
         display: flex;
         align-items: center;
@@ -62,13 +67,6 @@
         }
     }
 
-    .action-buttons {
-        display: flex;
-        width: 100%;
-        margin-top: 20px;
-        justify-content: space-between;
-    }
-
     .add-post-button {
         display: block;
         flex-grow: 1;
@@ -198,13 +196,6 @@
         &.active {
             box-shadow: 0px 0px 5px var(--teal-green);
 
-            .action-buttons {
-                button {
-                    border: 1px solid var(--light-grey);
-                    border-radius: 5px;
-                }
-            }
-
             p {
                 display: block;
                 max-height: none;
@@ -215,6 +206,21 @@
         }
     }
 
+    .tags {
+        width: 100%;
+
+        button {
+            background-color: var(--black);
+            color: white;
+            border-radius: 20px;
+            height: 25px;
+            font-size: 12px;
+            padding: 0 15px;
+            border: 0px;
+            margin-right: 5px;
+        }
+    }
+
     .book-mark-button {
         position: absolute;
         right: 10px;
@@ -222,9 +228,15 @@
         border: 0px;
         background-color: transparent;
 
+        &.active {
+            .icon {
+                fill: var(--teal);
+            }
+        }
+
         .icon {
-            width: 20px;
-            height: 20px;
+            width: 15px;
+            height: 15px;
             fill: var(--light-grey);
         }
     }
@@ -291,19 +303,28 @@
 
         button {
             background-color: transparent;
-            color: var(--light-grey);
-            border: 0px;
+            color: var(--light-grey);            
             padding: 0 10px;
             height: 30px;
             margin-right: 10px;
             display: flex;
             align-items: center;
             justify-content: center;
+            border: 1px solid var(--light-grey);
+            border-radius: 5px;
+
+            &.active {
+                color: var(--teal-green);
+
+                .icon {
+                    fill: var(--teal-green);
+                }
+            }
 
             .icon {
                 width: 15px;
                 height: 15px;
-                margin-right: 2px;
+                margin-right: 5px;
                 fill: var(--light-grey);
             }
 
@@ -383,5 +404,11 @@
             display: block;
             max-height: none;
         }
+
+        &.reply-comment {
+            margin-top: 10px;
+            padding-left: 15px;
+            border-left: 3px solid var(--light-grey);
+        }
     }
 }

src/app/reusable-components/forum/forum.component.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit, Input } from '@angular/core';
+import * as moment from 'moment';
 
 @Component({
 	selector: 'app-forum',
@@ -14,10 +15,93 @@ export class ForumComponent implements OnInit {
 
     @Input() isSubSegment: boolean = false;
 
+    forumPostList = [{
+        question: 'Can anyone tell me how to find Planck\'s constant',
+        isBookmarked: false,
+        isLiked: true,
+        likeCount: 30,
+        hashTags: ['h', 'maxplank', 'quantum physics'],
+        friendTags: ['Rahul'],
+        helpLink: 'https://en.wikipedia.org/wiki/Planck_constant',
+        files: [],
+        author: {
+            name: 'Mr Miyagi',
+            imgSrc: 'https://pbs.twimg.com/profile_images/673997632969117696/6Fm92vaZ_400x400.jpg'
+        },
+        date: new Date(),
+        answers: [{
+            answer: 'Here is a video you can take a look at if you would like to understand more...',
+            isBookmarked: true,
+            isLiked: false,
+            likeCount: 10,
+            friendTags: ['Mr Miyagi'],
+            helpLink: 'https://www.youtube.com/watch?v=tQSbms5MDvY',
+            files: [],
+            author: {
+                name: 'Rahul',
+                imgSrc: 'https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg'
+            },
+            date: new Date(),
+            comments: [{
+                description: 'Are you Sure Rahul?',
+                isLiked: true,
+                likeCount: 1,
+                author: {
+                    name: 'Mr Miyagi',
+                    imgSrc: 'https://pbs.twimg.com/profile_images/673997632969117696/6Fm92vaZ_400x400.jpg'
+                },
+                date: new Date(),
+                replyComment: [{
+                    description: 'Yes Bro!',
+                    isLiked: false,
+                    likeCount: 0,
+                    author: {
+                        name: 'Rahul',
+                        imgSrc: 'https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg'
+                    },
+                    date: new Date(),
+                }]
+            }]
+        }]
+    }, {
+        question: 'How to define "What is a cricle?" question?',
+        isBookmarked: true,
+        isLiked: false,
+        likeCount: 30,
+        hashTags: ['maths', 'circle'],
+        friendTags: [],
+        helpLink: '',
+        files: [],
+        author: {
+            name: 'Mr Miyagi',
+            imgSrc: 'https://pbs.twimg.com/profile_images/673997632969117696/6Fm92vaZ_400x400.jpg'
+        },
+        date: new Date(),
+        answers: [{
+            answer: 'Here is a video you can take a look at if you would like to understand more...',
+            isBookmarked: true,
+            isLiked: false,
+            likeCount: 10,
+            friendTags: ['Mr Miyagi'],
+            helpLink: 'https://www.youtube.com/watch?v=tQSbms5MDvY',
+            files: [],
+            author: {
+                name: 'Rahul',
+                imgSrc: 'https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg'
+            },
+            date: new Date(),
+            comments: []
+        }]
+    }];
+
 	constructor() { }
 
 	ngOnInit(): void {
 
 	}
 
+    getFormattedDate(date: any) {
+        return moment(date).format('MMMM DD, YYYY');
+    }
+
 }

src/app/reusable-components/forum/post-details/post-details.component.html

@@ -36,7 +36,7 @@
                 <span class="time-stamp"> August 15, 2020 </span>
             </div>
             <div class="action-buttons">
-                <button>
+                <button class="active">
                     <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/like.svg"></svg-icon>
                     <span> 56 </span>
                 </button>
@@ -70,7 +70,7 @@
                         Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla, iusto, quaerat. Facilis commodi, pariatur eum. Nam ullam neque delectus, ducimus! Odit, qui ad vitae. Rerum vero quisquam laboriosam, accusantium optio!
                     </p>
                     <div class="action-buttons">
-                        <button>
+                        <button (click)="showAddCommentToPost = true">
                             <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/reply.svg"></svg-icon>
                             <span> Reply </span>
                         </button>
@@ -79,10 +79,31 @@
                             <span> 56 </span>
                         </button>
 
-                        <button class="more-button">
+                        <button class="more-button" (click)="showMorePostOptions = true">
                             <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/more.svg"></svg-icon>
                         </button>
                     </div>
+
+                    <div class="comment reply-comment">
+                        <div class="author">
+                            <img src="https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg">
+                            <label> Dwayne the Rock </label>
+                            <span class="time-stamp"> August 15, 2020 </span>
+                        </div>
+                        <p>
+                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla, iusto, quaerat. Facilis commodi, pariatur eum. Nam ullam neque delectus, ducimus! Odit, qui ad vitae. Rerum vero quisquam laboriosam, accusantium optio!
+                        </p>
+                        <div class="action-buttons">
+                            <button class="active">
+                                <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/like.svg"></svg-icon>
+                                <span> 56 </span>
+                            </button>
+
+                            <button class="more-button" (click)="showMorePostOptions = true">
+                                <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/more.svg"></svg-icon>
+                            </button>
+                        </div>
+                    </div>
                 </li>
 
                 <li class="comment">
@@ -95,16 +116,16 @@
                         Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla, iusto, quaerat. Facilis commodi, pariatur eum. Nam ullam neque delectus, ducimus! Odit, qui ad vitae. Rerum vero quisquam laboriosam, accusantium optio!
                     </p>
                     <div class="action-buttons">
-                        <button>
+                        <button (click)="showAddCommentToPost = true">
                             <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/reply.svg"></svg-icon>
                             <span> Reply </span>
                         </button>
                         <button>
-                            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/share.svg"></svg-icon>
+                            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/like.svg"></svg-icon>
                             <span> 56 </span>
                         </button>
 
-                        <button class="more-button">
+                        <button class="more-button" (click)="showMorePostOptions = true">
                             <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/more.svg"></svg-icon>
                         </button>
                     </div>
@@ -132,7 +153,7 @@
                 <span class="time-stamp"> August 15, 2020 </span>
             </div>
             <div class="action-buttons">
-                <button>
+                <button class="active">
                     <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/like.svg"></svg-icon>
                     <span> 56 </span>
                 </button>
@@ -166,7 +187,7 @@
                         Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla, iusto, quaerat. Facilis commodi, pariatur eum. Nam ullam neque delectus, ducimus! Odit, qui ad vitae. Rerum vero quisquam laboriosam, accusantium optio!
                     </p>
                     <div class="action-buttons">
-                        <button>
+                        <button (click)="showAddCommentToPost = true">
                             <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/reply.svg"></svg-icon>
                             <span> Reply </span>
                         </button>
@@ -175,7 +196,7 @@
                             <span> 56 </span>
                         </button>
 
-                        <button class="more-button">
+                        <button class="more-button" (click)="showMorePostOptions = true">
                             <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/more.svg"></svg-icon>
                         </button>
                     </div>
@@ -191,16 +212,16 @@
                         Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla, iusto, quaerat. Facilis commodi, pariatur eum. Nam ullam neque delectus, ducimus! Odit, qui ad vitae. Rerum vero quisquam laboriosam, accusantium optio!
                     </p>
                     <div class="action-buttons">
-                        <button>
+                        <button (click)="showAddCommentToPost = true">
                             <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/reply.svg"></svg-icon>
                             <span> Reply </span>
                         </button>
                         <button>
-                            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/share.svg"></svg-icon>
+                            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/like.svg"></svg-icon>
                             <span> 56 </span>
                         </button>
 
-                        <button class="more-button">
+                        <button class="more-button" (click)="showMorePostOptions = true">
                             <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/more.svg"></svg-icon>
                         </button>
                     </div>
@@ -261,7 +282,7 @@
                         Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla, iusto, quaerat. Facilis commodi, pariatur eum. Nam ullam neque delectus, ducimus! Odit, qui ad vitae. Rerum vero quisquam laboriosam, accusantium optio!
                     </p>
                     <div class="action-buttons">
-                        <button>
+                        <button (click)="showAddCommentToPost = true">
                             <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/reply.svg"></svg-icon>
                             <span> Reply </span>
                         </button>
@@ -270,7 +291,7 @@
                             <span> 56 </span>
                         </button>
 
-                        <button class="more-button">
+                        <button class="more-button" (click)="showMorePostOptions = true">
                             <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/more.svg"></svg-icon>
                         </button>
                     </div>
@@ -286,16 +307,16 @@
                         Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla, iusto, quaerat. Facilis commodi, pariatur eum. Nam ullam neque delectus, ducimus! Odit, qui ad vitae. Rerum vero quisquam laboriosam, accusantium optio!
                     </p>
                     <div class="action-buttons">
-                        <button>
+                        <button (click)="showAddCommentToPost = true">
                             <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/reply.svg"></svg-icon>
                             <span> Reply </span>
                         </button>
                         <button>
-                            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/share.svg"></svg-icon>
+                            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/like.svg"></svg-icon>
                             <span> 56 </span>
                         </button>
 
-                        <button class="more-button">
+                        <button class="more-button" (click)="showMorePostOptions = true">
                             <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/more.svg"></svg-icon>
                         </button>
                     </div>