Merge pull request commudle#9 from SDOS-Winter2021/feature-external-f…

…eed-akshyta flagging-posts and filtering for latest and popular posts
The-Vector-007 · May 5, 2021 · 69c8aba · 69c8aba
2 parents 2fe40e8 + f73d50e
commit 69c8aba
Show file tree

Hide file tree

Showing 28 changed files with 407 additions and 81 deletions.
diff --git a/...p/components/home/components/home-events/home-events-card/home-events-card.component.scss b/...p/components/home/components/home-events/home-events-card/home-events-card.component.scss
@@ -49,8 +49,8 @@
 
   .home-events-date {
     position: absolute;
-    height: 56px;
-    width: 56px;
+    height: 58px;
+    width: 58px;
     top: 120px;
     right: 12px;
     border-radius: $border-8;

diff --git a/.../events/components/event-embedded-video-stream/event-embedded-video-stream.component.html b/.../events/components/event-embedded-video-stream/event-embedded-video-stream.component.html
@@ -4,7 +4,7 @@
         <div>
           <nb-select placeholder="Source*" fullWidth formControlName="source" status="primary" size="small" (selectedChange)="updateValidators()">
 
-            <nb-option *ngIf="[1, 74, 116, 118, 119, 121].includes(community.id)" [value]="EEmbeddedVideoStreamSources.COMMUDLE">
+            <nb-option *ngIf="[1, 74, 116, 118, 119, 121, 124].includes(community.id)" [value]="EEmbeddedVideoStreamSources.COMMUDLE">
               <div>
                 Commudle Stage
                   <br/>
@@ -14,6 +14,9 @@
                   <br/>
               </div>
             </nb-option>
+            <nb-option [value]="EEmbeddedVideoStreamSources.ZOOM">
+              ZOOM (embedded into browser)
+            </nb-option>
             <nb-option [value]="EEmbeddedVideoStreamSources.EXTERNAL_LINK">
               External Link (to platforms like Google Meet)
             </nb-option>

diff --git a/...eature-modules/events/components/event-form-responses/event-form-responses.component.html b/...eature-modules/events/components/event-form-responses/event-form-responses.component.html
@@ -107,7 +107,7 @@ <h3>{{ event.name }}</h3>
                         type="text"
                         fullWidth
                         fieldSize="tiny"
-                        placeholder="{{ isLoading ? 'Still Loading' : 'Filter by Name' }}"
+                        placeholder="{{ isLoading ? 'Still Loading' : 'Search by name or email' }}"
                         formControlName="name"
                         [disabled]="isLoading"
                       />

diff --git a/...c/app/feature-modules/external-feed/components/external-feed/external-feed.component.html b/...c/app/feature-modules/external-feed/components/external-feed/external-feed.component.html
@@ -4,14 +4,7 @@
       <nb-card class="tag-checkboxes">
         <div class="header">Popular Tags</div>
         <div class="tag-checkbox" *ngFor="let tag of tags">
-          <input
-            type="checkbox"
-            name="tags"
-            value="{{ tag }}"
-            id="#{{ tag }}"
-            [checked]="false"
-            (change)="updateCheckedTags(tag, $event)"
-          />
+          <input type="checkbox" name="tags" value="{{ tag }}" id="#{{ tag }}" [checked]="false" (change)="updateCheckedTags(tag, $event)" />
           <label for="#{{ tag }}"> #{{ tag }} </label>
           <br />
           <br />
@@ -28,36 +21,26 @@ <h1>
           <p>Some links from around the world!</p>
         </nb-card-body>
       </nb-card>
-
       <nb-card>
         <div class="sorting d-flex justify-content-center">
-          <button (click)="getLatestPosts()">
+          <button (click)="getLatestPosts()" [ngClass]="{'white' : !toggleLatestButton, 'light-purple': toggleLatestButton}">
             <nb-icon icon="sun" status="warning"></nb-icon>
             Latest
           </button>
-          <button (click)="getPopularPosts()">
+          <button (click)="getPopularPosts()" [ngClass]="{'white' : !togglePopularButton, 'light-purple': togglePopularButton}">
             <nb-icon icon="flash" status="warning"></nb-icon>
             Hot
           </button>
+          <hr>
         </div>
       </nb-card>
-
       <div class="external-feed-list">
         <div *ngFor="let post of externalPosts">
-          <app-external-feed-hlist-item
-            [feedItem]="post"
-          ></app-external-feed-hlist-item>
+          <app-external-feed-hlist-item [feedItem]="post"></app-external-feed-hlist-item>
         </div>
       </div>
       <div class="load-more-button" *ngIf="canLoadMore && total">
-        <button
-          (click)="getFeedPosts()"
-          fullWidth
-          nbButton
-          status="primary"
-          size="small"
-          outline
-        >
+        <button (click)="getFeedPosts()" fullWidth nbButton status="primary" size="small" outline>
           Load More!
         </button>
       </div>

diff --git a/...c/app/feature-modules/external-feed/components/external-feed/external-feed.component.scss b/...c/app/feature-modules/external-feed/components/external-feed/external-feed.component.scss
@@ -60,13 +60,22 @@
       border: $border-1;
       border-radius: $border-10;
       box-shadow: none;
+
       button {
         margin: 10px;
         background-color: white;
         font-size: 16px;
         border: none;
         text-align: center;
-        width: 500px;
+        width: 100px;
+      }
+
+      .white {
+        background-color: white;
+      }
+
+      .light-purple {
+        background-color: $light-purple;
       }
     }
   }

diff --git a/...src/app/feature-modules/external-feed/components/external-feed/external-feed.component.ts b/...src/app/feature-modules/external-feed/components/external-feed/external-feed.component.ts
@@ -18,6 +18,8 @@ export class ExternalFeedComponent implements OnInit {
   tagsMap:any = {};
   tagsChecked = [];
   sortingCriterion = "published_at";
+  toggleLatestButton = false;
+  togglePopularButton = false;
 
   constructor(
     private feedItemService: FeedItemService,
@@ -48,6 +50,7 @@ export class ExternalFeedComponent implements OnInit {
       }
     }); 
   }
+
   updateCheckedTags(tag, event) {
    this.page = 1
    this.tagsMap[tag] = event.target.checked;
@@ -102,6 +105,10 @@ export class ExternalFeedComponent implements OnInit {
   }
 
   getLatestPosts() {
+    this.toggleLatestButton = true;
+    if (this.togglePopularButton) {
+      this.togglePopularButton = false;
+    }
     this.sortingCriterion = "published_at";
     this.page = 1;
     this.externalPosts = [];
@@ -110,6 +117,10 @@ export class ExternalFeedComponent implements OnInit {
   }
 
   getPopularPosts() {
+    this.togglePopularButton = true;
+    if (this.toggleLatestButton) {
+      this.toggleLatestButton = false;
+    }
     this.sortingCriterion = "likes";
     this.page = 1;
     this.externalPosts = [];

diff --git a/...ature-modules/external-feed/components/feed-item-details/feed-item-details.component.html b/...ature-modules/external-feed/components/feed-item-details/feed-item-details.component.html
@@ -2,10 +2,7 @@
   <nb-card>
     <nb-card-body>
       <div class="image" *ngIf="feedItem.details.image.length > 0">
-        <img
-          src="{{ feedItem.details.image }}"
-          alt="{{ feedItem.details.source }}"
-        />
+        <img src="{{ feedItem.details.image }}" alt="{{ feedItem.details.source }}" />
       </div>
       <div class="source-details d-flex align-items-center">
         <div class="source-info">
@@ -29,11 +26,7 @@ <h3 class="name">
       </p>
       <div class="stats d-flex align-items-center">
         <p class="stars">
-          <app-votes-display
-            [votableType]="'FeedItem'"
-            [votableId]="feedItem.id"
-            [icon]="'heart'"
-          >
+          <app-votes-display [votableType]="'FeedItem'" [votableId]="feedItem.id" [icon]="'heart'">
           </app-votes-display>
         </p>
         <p class="comments" [routerLink]="['/feed', feedItem.id]">
@@ -42,24 +35,14 @@ <h3 class="name">
           </span>
           <nb-icon icon="message-circle-outline"></nb-icon>
         </p>
-        <!--<div (click)="sendFlag(feedItem.id)" class="clickable">
-          <p
-            [ngClass]="{ 'error-text': -1 > 0 }"
-            nbTooltip="Report this message. (3 reports will delete it)"
-            nbTooltipStatus="warning"
-          >
-            <span *ngIf="message.flags_count > 0">{{ feedItem.flags_count }}</span>
-            <span> 1 </span>
-            <nb-icon icon="flag"></nb-icon>
-          </p>
-        </div> -->
+        <p class="flags">
+          <app-flags-display [flaggableType]="'FeedItem'" [flaggableId]="feedItem.id">
+          </app-flags-display>
+        </p>
       </div>
     </nb-card-body>
   </nb-card>
 </div>
 <div class="feed-discussion">
-  <app-feed-item-discussion
-    *ngIf="discussionChat"
-    [discussion]="discussionChat"
-  ></app-feed-item-discussion>
+  <app-feed-item-discussion *ngIf="discussionChat" [discussion]="discussionChat"></app-feed-item-discussion>
 </div>
diff --git a/...ature-modules/external-feed/components/feed-item-details/feed-item-details.component.scss b/...ature-modules/external-feed/components/feed-item-details/feed-item-details.component.scss
@@ -64,9 +64,16 @@
        }
 
        .stats {
+        .clickable {
+
+           nb-icon {
+             color: $spanish-gray;
+           }
+        }
          >p {
+
            margin: 0 16px 0 0;
-           color:  #8080808C;
+
            &.comments {
              nb-icon {
                color: $spanish-gray;

diff --git a/...feature-modules/external-feed/components/feed-item-details/feed-item-details.component.ts b/...feature-modules/external-feed/components/feed-item-details/feed-item-details.component.ts
@@ -11,6 +11,9 @@ import { IFeedItem } from "projects/shared-models/feed-item.model";
 import { DiscussionsService } from "projects/commudle-admin/src/app/services/discussions.service";
 import { IDiscussion } from "projects/shared-models/discussion.model";
 import { DatePipe } from "@angular/common";
+import {DiscussionChatChannel} from 'projects/shared-components/services/websockets/discussion-chat.channel';
+import {ICurrentUser} from 'projects/shared-models/current_user.model';
+import {LibAuthwatchService} from 'projects/shared-services/lib-authwatch.service';
 
 @Component({
   selector: "app-feed-item-details",
@@ -22,10 +25,13 @@ export class FeedItemDetailsComponent implements OnInit {
   discussionChat: IDiscussion;
 
   messagesCount: number;
+  currentUser: ICurrentUser;
 
   constructor(
     private discussionsService: DiscussionsService,
-    private datePipe: DatePipe
+    private datePipe: DatePipe,
+    private discussionChatChannel: DiscussionChatChannel,
+    private authWatchService: LibAuthwatchService,
   ) {}
 
   ngOnInit() {
@@ -42,23 +48,4 @@ export class FeedItemDetailsComponent implements OnInit {
       .subscribe((data) => (this.discussionChat = data));
   }
 
-  // 	// @Output() sendFlag = new EventEmitter();
-  // 	}
-
-  // 	// emitFlag(itemId) {
-  // 	// 	console.log("Emitting flag for ");
-  // 	// 	console.log(itemId);
-  //  //    	this.sendFlag.emit(itemId);
-  //  //  	}
-
-  //   	sendFlag(itemId) {
-  //   		console.log("Emitting flag for ");
-  // 		console.log(itemId);
-  //     // this.discussionChatChannel.sendData(
-  //     //   this.discussionChatChannel.ACTIONS.FLAG,
-  //     //   {
-  //     //     feed_item_id: itemId
-  //     //   }
-  //     // );
-  //   }
 }
diff --git a/...min/src/app/feature-modules/users/components/public-profile/public-profile.component.scss b/...min/src/app/feature-modules/users/components/public-profile/public-profile.component.scss
@@ -4,7 +4,6 @@
   gap: $space-16;
   min-height: 100vh;
   margin: $space-16 auto $space-32;
-  background-color: $light-purple;
 
   .basic-details {
     max-width: 264px;

diff --git a/...mponents/public-profile/user-content/user-contributions/user-contributions.component.scss b/...mponents/public-profile/user-content/user-contributions/user-contributions.component.scss
@@ -5,6 +5,12 @@
     position: relative;
     margin-bottom: $space-40;
 
+    &:hover {
+      .navigation.active {
+        visibility: visible;
+      }
+    }
+
     .header {
       width: max-content;
       margin: 0 0 $space-24;
@@ -24,6 +30,7 @@
     }
 
     .navigation {
+      visibility: hidden;
       pointer-events: none;
       display: flex;
       justify-content: space-between;

diff --git a/projects/commudle-admin/src/app/services/feed-items.service.ts b/projects/commudle-admin/src/app/services/feed-items.service.ts
@@ -10,7 +10,7 @@ import { IFeedItem } from "projects/shared-models/feed-item.model";
   providedIn: "root",
 })
 export class FeedItemService {
-  private popular_tags_api = "http://15.207.110.193/feed/v2/popular-tags/";
+  private popular_tags_api = "https://feed.commudle.com/feed/v2/popular-tags/";
 
   constructor(
     private http: HttpClient,

diff --git a/projects/shared-components/flags-display/flags-display.component.html b/projects/shared-components/flags-display/flags-display.component.html
@@ -0,0 +1,16 @@
+<div class="clickable flags size-{{size}}">
+  <p>
+    <span
+      *ngIf="totalFlags > 0"
+      class="count">
+      {{ totalFlags }}
+    </span>
+    <span (click)="toggleFlag()">
+      <nb-icon
+        [ngClass]="{'flagged': myFlag, 'unflag': !myFlag, 'has-flags': totalFlags > 0}"
+        class="hear"
+        icon="flag">
+      </nb-icon>
+    </span>
+  </p>
+</div>
diff --git a/projects/shared-components/flags-display/flags-display.component.scss b/projects/shared-components/flags-display/flags-display.component.scss
@@ -0,0 +1,29 @@
+.flags {
+    > p {
+      margin: 0;
+
+      .count {
+        color: grey;
+      }
+
+      nb-icon {
+        font-size: 1.2rem;
+        color: #8080808c;
+      }
+
+
+      nb-icon.flagged {
+        color: #ff1e1ed6;
+      }
+    }
+
+    &.size-large {
+      > p {
+        font-size: 1.8rem;
+
+        nb-icon {
+          font-size: 1.8rem;
+        }
+      }
+    }
+  }
diff --git a/projects/shared-components/flags-display/flags-display.component.spec.ts b/projects/shared-components/flags-display/flags-display.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FlagsDisplayComponent } from './flags-display.component';
+
+describe('FlagsDisplayComponent', () => {
+  let component: FlagsDisplayComponent;
+  let fixture: ComponentFixture<FlagsDisplayComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ FlagsDisplayComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FlagsDisplayComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});