Skip to content

Commit f343bb7

Browse files
akshytaakshyta
authored
Merge pull request #9 from SDOS-Winter2021/feature-external-feed-akshyta
flagging-posts and filtering for latest and popular posts
2 parents e43d713 + 31bd651 commit f343bb7

28 files changed

+407
-81
lines changed

‎projects/commudle-admin/src/app/components/home/components/home-events/home-events-card/home-events-card.component.scss

+2-2
Original file line numberDiff line numberDiff line change
@@ -49,8 +49,8 @@
4949

5050
.home-events-date {
5151
position: absolute;
52-
height: 56px;
53-
width: 56px;
52+
height: 58px;
53+
width: 58px;
5454
top: 120px;
5555
right: 12px;
5656
border-radius: $border-8;

‎projects/commudle-admin/src/app/feature-modules/events/components/event-embedded-video-stream/event-embedded-video-stream.component.html

+4-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<div>
55
<nb-select placeholder="Source*" fullWidth formControlName="source" status="primary" size="small" (selectedChange)="updateValidators()">
66

7-
<nb-option *ngIf="[1, 74, 116, 118, 119, 121].includes(community.id)" [value]="EEmbeddedVideoStreamSources.COMMUDLE">
7+
<nb-option *ngIf="[1, 74, 116, 118, 119, 121, 124].includes(community.id)" [value]="EEmbeddedVideoStreamSources.COMMUDLE">
88
<div>
99
Commudle Stage
1010
<br/>
@@ -14,6 +14,9 @@
1414
<br/>
1515
</div>
1616
</nb-option>
17+
<nb-option [value]="EEmbeddedVideoStreamSources.ZOOM">
18+
ZOOM (embedded into browser)
19+
</nb-option>
1720
<nb-option [value]="EEmbeddedVideoStreamSources.EXTERNAL_LINK">
1821
External Link (to platforms like Google Meet)
1922
</nb-option>

‎projects/commudle-admin/src/app/feature-modules/events/components/event-form-responses/event-form-responses.component.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -107,7 +107,7 @@ <h3>{{ event.name }}</h3>
107107
type="text"
108108
fullWidth
109109
fieldSize="tiny"
110-
placeholder="{{ isLoading ? 'Still Loading' : 'Filter by Name' }}"
110+
placeholder="{{ isLoading ? 'Still Loading' : 'Search by name or email' }}"
111111
formControlName="name"
112112
[disabled]="isLoading"
113113
/>

‎projects/commudle-admin/src/app/feature-modules/external-feed/components/external-feed/external-feed.component.html

+6-23
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,7 @@
44
<nb-card class="tag-checkboxes">
55
<div class="header">Popular Tags</div>
66
<div class="tag-checkbox" *ngFor="let tag of tags">
7-
<input
8-
type="checkbox"
9-
name="tags"
10-
value="{{ tag }}"
11-
id="#{{ tag }}"
12-
[checked]="false"
13-
(change)="updateCheckedTags(tag, $event)"
14-
/>
7+
<input type="checkbox" name="tags" value="{{ tag }}" id="#{{ tag }}" [checked]="false" (change)="updateCheckedTags(tag, $event)" />
158
<label for="#{{ tag }}"> #{{ tag }} </label>
169
<br />
1710
<br />
@@ -28,36 +21,26 @@ <h1>
2821
<p>Some links from around the world!</p>
2922
</nb-card-body>
3023
</nb-card>
31-
3224
<nb-card>
3325
<div class="sorting d-flex justify-content-center">
34-
<button (click)="getLatestPosts()">
26+
<button (click)="getLatestPosts()" [ngClass]="{'white' : !toggleLatestButton, 'light-purple': toggleLatestButton}">
3527
<nb-icon icon="sun" status="warning"></nb-icon>
3628
Latest
3729
</button>
38-
<button (click)="getPopularPosts()">
30+
<button (click)="getPopularPosts()" [ngClass]="{'white' : !togglePopularButton, 'light-purple': togglePopularButton}">
3931
<nb-icon icon="flash" status="warning"></nb-icon>
4032
Hot
4133
</button>
34+
<hr>
4235
</div>
4336
</nb-card>
44-
4537
<div class="external-feed-list">
4638
<div *ngFor="let post of externalPosts">
47-
<app-external-feed-hlist-item
48-
[feedItem]="post"
49-
></app-external-feed-hlist-item>
39+
<app-external-feed-hlist-item [feedItem]="post"></app-external-feed-hlist-item>
5040
</div>
5141
</div>
5242
<div class="load-more-button" *ngIf="canLoadMore && total">
53-
<button
54-
(click)="getFeedPosts()"
55-
fullWidth
56-
nbButton
57-
status="primary"
58-
size="small"
59-
outline
60-
>
43+
<button (click)="getFeedPosts()" fullWidth nbButton status="primary" size="small" outline>
6144
Load More!
6245
</button>
6346
</div>

‎projects/commudle-admin/src/app/feature-modules/external-feed/components/external-feed/external-feed.component.scss

+10-1
Original file line numberDiff line numberDiff line change
@@ -60,13 +60,22 @@
6060
border: $border-1;
6161
border-radius: $border-10;
6262
box-shadow: none;
63+
6364
button {
6465
margin: 10px;
6566
background-color: white;
6667
font-size: 16px;
6768
border: none;
6869
text-align: center;
69-
width: 500px;
70+
width: 100px;
71+
}
72+
73+
.white {
74+
background-color: white;
75+
}
76+
77+
.light-purple {
78+
background-color: $light-purple;
7079
}
7180
}
7281
}

‎projects/commudle-admin/src/app/feature-modules/external-feed/components/external-feed/external-feed.component.ts

+11
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,8 @@ export class ExternalFeedComponent implements OnInit {
1818
tagsMap:any = {};
1919
tagsChecked = [];
2020
sortingCriterion = "published_at";
21+
toggleLatestButton = false;
22+
togglePopularButton = false;
2123

2224
constructor(
2325
private feedItemService: FeedItemService,
@@ -48,6 +50,7 @@ export class ExternalFeedComponent implements OnInit {
4850
}
4951
});
5052
}
53+
5154
updateCheckedTags(tag, event) {
5255
this.page = 1
5356
this.tagsMap[tag] = event.target.checked;
@@ -102,6 +105,10 @@ export class ExternalFeedComponent implements OnInit {
102105
}
103106

104107
getLatestPosts() {
108+
this.toggleLatestButton = true;
109+
if (this.togglePopularButton) {
110+
this.togglePopularButton = false;
111+
}
105112
this.sortingCriterion = "published_at";
106113
this.page = 1;
107114
this.externalPosts = [];
@@ -110,6 +117,10 @@ export class ExternalFeedComponent implements OnInit {
110117
}
111118

112119
getPopularPosts() {
120+
this.togglePopularButton = true;
121+
if (this.toggleLatestButton) {
122+
this.toggleLatestButton = false;
123+
}
113124
this.sortingCriterion = "likes";
114125
this.page = 1;
115126
this.externalPosts = [];

‎projects/commudle-admin/src/app/feature-modules/external-feed/components/feed-item-details/feed-item-details.component.html

+7-24
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,7 @@
22
<nb-card>
33
<nb-card-body>
44
<div class="image" *ngIf="feedItem.details.image.length > 0">
5-
<img
6-
src="{{ feedItem.details.image }}"
7-
alt="{{ feedItem.details.source }}"
8-
/>
5+
<img src="{{ feedItem.details.image }}" alt="{{ feedItem.details.source }}" />
96
</div>
107
<div class="source-details d-flex align-items-center">
118
<div class="source-info">
@@ -29,11 +26,7 @@ <h3 class="name">
2926
</p>
3027
<div class="stats d-flex align-items-center">
3128
<p class="stars">
32-
<app-votes-display
33-
[votableType]="'FeedItem'"
34-
[votableId]="feedItem.id"
35-
[icon]="'heart'"
36-
>
29+
<app-votes-display [votableType]="'FeedItem'" [votableId]="feedItem.id" [icon]="'heart'">
3730
</app-votes-display>
3831
</p>
3932
<p class="comments" [routerLink]="['/feed', feedItem.id]">
@@ -42,24 +35,14 @@ <h3 class="name">
4235
</span>
4336
<nb-icon icon="message-circle-outline"></nb-icon>
4437
</p>
45-
<!--<div (click)="sendFlag(feedItem.id)" class="clickable">
46-
<p
47-
[ngClass]="{ 'error-text': -1 > 0 }"
48-
nbTooltip="Report this message. (3 reports will delete it)"
49-
nbTooltipStatus="warning"
50-
>
51-
<span *ngIf="message.flags_count > 0">{{ feedItem.flags_count }}</span>
52-
<span> 1 </span>
53-
<nb-icon icon="flag"></nb-icon>
54-
</p>
55-
</div> -->
38+
<p class="flags">
39+
<app-flags-display [flaggableType]="'FeedItem'" [flaggableId]="feedItem.id">
40+
</app-flags-display>
41+
</p>
5642
</div>
5743
</nb-card-body>
5844
</nb-card>
5945
</div>
6046
<div class="feed-discussion">
61-
<app-feed-item-discussion
62-
*ngIf="discussionChat"
63-
[discussion]="discussionChat"
64-
></app-feed-item-discussion>
47+
<app-feed-item-discussion *ngIf="discussionChat" [discussion]="discussionChat"></app-feed-item-discussion>
6548
</div>

‎projects/commudle-admin/src/app/feature-modules/external-feed/components/feed-item-details/feed-item-details.component.scss

+8-1
Original file line numberDiff line numberDiff line change
@@ -64,9 +64,16 @@
6464
}
6565

6666
.stats {
67+
.clickable {
68+
69+
nb-icon {
70+
color: $spanish-gray;
71+
}
72+
}
6773
>p {
74+
6875
margin: 0 16px 0 0;
69-
color: #8080808C;
76+
7077
&.comments {
7178
nb-icon {
7279
color: $spanish-gray;

‎projects/commudle-admin/src/app/feature-modules/external-feed/components/feed-item-details/feed-item-details.component.ts

+7-20
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,9 @@ import { IFeedItem } from "projects/shared-models/feed-item.model";
1111
import { DiscussionsService } from "projects/commudle-admin/src/app/services/discussions.service";
1212
import { IDiscussion } from "projects/shared-models/discussion.model";
1313
import { DatePipe } from "@angular/common";
14+
import {DiscussionChatChannel} from 'projects/shared-components/services/websockets/discussion-chat.channel';
15+
import {ICurrentUser} from 'projects/shared-models/current_user.model';
16+
import {LibAuthwatchService} from 'projects/shared-services/lib-authwatch.service';
1417

1518
@Component({
1619
selector: "app-feed-item-details",
@@ -22,10 +25,13 @@ export class FeedItemDetailsComponent implements OnInit {
2225
discussionChat: IDiscussion;
2326

2427
messagesCount: number;
28+
currentUser: ICurrentUser;
2529

2630
constructor(
2731
private discussionsService: DiscussionsService,
28-
private datePipe: DatePipe
32+
private datePipe: DatePipe,
33+
private discussionChatChannel: DiscussionChatChannel,
34+
private authWatchService: LibAuthwatchService,
2935
) {}
3036

3137
ngOnInit() {
@@ -42,23 +48,4 @@ export class FeedItemDetailsComponent implements OnInit {
4248
.subscribe((data) => (this.discussionChat = data));
4349
}
4450

45-
// // @Output() sendFlag = new EventEmitter();
46-
// }
47-
48-
// // emitFlag(itemId) {
49-
// // console.log("Emitting flag for ");
50-
// // console.log(itemId);
51-
// // this.sendFlag.emit(itemId);
52-
// // }
53-
54-
// sendFlag(itemId) {
55-
// console.log("Emitting flag for ");
56-
// console.log(itemId);
57-
// // this.discussionChatChannel.sendData(
58-
// // this.discussionChatChannel.ACTIONS.FLAG,
59-
// // {
60-
// // feed_item_id: itemId
61-
// // }
62-
// // );
63-
// }
6451
}

‎projects/commudle-admin/src/app/feature-modules/users/components/public-profile/public-profile.component.scss

-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@
44
gap: $space-16;
55
min-height: 100vh;
66
margin: $space-16 auto $space-32;
7-
background-color: $light-purple;
87

98
.basic-details {
109
max-width: 264px;

‎projects/commudle-admin/src/app/feature-modules/users/components/public-profile/user-content/user-contributions/user-contributions.component.scss

+7
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,12 @@
55
position: relative;
66
margin-bottom: $space-40;
77

8+
&:hover {
9+
.navigation.active {
10+
visibility: visible;
11+
}
12+
}
13+
814
.header {
915
width: max-content;
1016
margin: 0 0 $space-24;
@@ -24,6 +30,7 @@
2430
}
2531

2632
.navigation {
33+
visibility: hidden;
2734
pointer-events: none;
2835
display: flex;
2936
justify-content: space-between;

‎projects/commudle-admin/src/app/services/feed-items.service.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import { IFeedItem } from "projects/shared-models/feed-item.model";
1010
providedIn: "root",
1111
})
1212
export class FeedItemService {
13-
private popular_tags_api = "http://15.207.110.193/feed/v2/popular-tags/";
13+
private popular_tags_api = "https://feed.commudle.com/feed/v2/popular-tags/";
1414

1515
constructor(
1616
private http: HttpClient,

‎projects/shared-components/flags-display/flags-display.component.html

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<div class="clickable flags size-{{size}}">
2+
<p>
3+
<span
4+
*ngIf="totalFlags > 0"
5+
class="count">
6+
{{ totalFlags }}
7+
</span>
8+
<span (click)="toggleFlag()">
9+
<nb-icon
10+
[ngClass]="{'flagged': myFlag, 'unflag': !myFlag, 'has-flags': totalFlags > 0}"
11+
class="hear"
12+
icon="flag">
13+
</nb-icon>
14+
</span>
15+
</p>
16+
</div>

‎projects/shared-components/flags-display/flags-display.component.scss

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
.flags {
2+
> p {
3+
margin: 0;
4+
5+
.count {
6+
color: grey;
7+
}
8+
9+
nb-icon {
10+
font-size: 1.2rem;
11+
color: #8080808c;
12+
}
13+
14+
15+
nb-icon.flagged {
16+
color: #ff1e1ed6;
17+
}
18+
}
19+
20+
&.size-large {
21+
> p {
22+
font-size: 1.8rem;
23+
24+
nb-icon {
25+
font-size: 1.8rem;
26+
}
27+
}
28+
}
29+
}

‎projects/shared-components/flags-display/flags-display.component.spec.ts

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2+
3+
import { FlagsDisplayComponent } from './flags-display.component';
4+
5+
describe('FlagsDisplayComponent', () => {
6+
let component: FlagsDisplayComponent;
7+
let fixture: ComponentFixture<FlagsDisplayComponent>;
8+
9+
beforeEach(async(() => {
10+
TestBed.configureTestingModule({
11+
declarations: [ FlagsDisplayComponent ]
12+
})
13+
.compileComponents();
14+
}));
15+
16+
beforeEach(() => {
17+
fixture = TestBed.createComponent(FlagsDisplayComponent);
18+
component = fixture.componentInstance;
19+
fixture.detectChanges();
20+
});
21+
22+
it('should create', () => {
23+
expect(component).toBeTruthy();
24+
});
25+
});

0 commit comments

Comments
 (0)