Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Complaints suggestions #49

Open
wants to merge 20 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from 17 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 10 additions & 1 deletion src/api.ts
Original file line number Diff line number Diff line change
Expand Up @@ -40,5 +40,14 @@ export const API = {
NotificationsAllRead: 'api/notifications/read',
WebPushSubscribe: 'api/user-me/subscribe-wp',

UserTags: 'api/user-tags'
UserTags: 'api/user-tags',

Complaints: 'api/venter/complaints',
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

MyComplaints: 'api/venter/complaints?filter=me',
Complaint: 'api/venter/complaints/{complaintId}',
UpVote: 'api/venter/complaints/{complaintId}/upvote{?action}',
CommentPost: 'api/venter/complaints/{complaintId}/comments',
CommentEdit: 'api/venter/comments/{commentId}',
TagCategories: 'api/venter/tags',
SubscribeToComplaint: 'api/venter/complaints/{complaintId}/subscribe{?action}'
};
25 changes: 22 additions & 3 deletions src/app/app.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,13 @@ import { RedirComponent } from './redir/redir.component';
import { UpdateRoleComponent } from './update-role/update-role.component';
import { CardComponent } from './card/card.component';

import { ComplaintsHomeComponent } from './venter/complaints-home/complaints-home.component';
import { FileComplaintComponent } from './venter/file-complaint/file-complaint.component';
import { DetailedComplaintComponent } from './venter/detailed-complaint/detailed-complaint.component';
import { EditCommentComponent } from './venter/edit-comment/edit-comment.component';
import { VenterDataService } from './venter/venter-data.service';
import { ComplaintCardComponent } from './venter/complaint-card/complaint-card.component';

@NgModule({
declarations: [
AppComponent,
Expand Down Expand Up @@ -91,7 +98,12 @@ import { CardComponent } from './card/card.component';
NotifyCardComponent,
RedirComponent,
UpdateRoleComponent,
CardComponent
CardComponent,
ComplaintsHomeComponent,
FileComplaintComponent,
DetailedComplaintComponent,
EditCommentComponent,
ComplaintCardComponent,
],
imports: [
BrowserModule,
Expand All @@ -100,6 +112,7 @@ import { CardComponent } from './card/card.component';
HttpClientModule,
FormsModule,
BrowserAnimationsModule,
MyMaterialClass,
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is already imported on line 157


ImgFallbackModule,
MarkdownModule.forRoot(),
Expand All @@ -120,7 +133,6 @@ import { CardComponent } from './card/card.component';
{ path: 'quick-links', component: QuickLinksComponent, data: { state: 'base' } },
{ path: 'settings', component: SettingsComponent, data: { state: 'base' } },
{ path: 'about', component: AboutComponent, data: { state: 'overlay' } },

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This whitespace was intentional

{ path: 'add-event', component: AddEventComponent, data: { state: 'overlay' }, canActivate: [LoginActivate] },
{ path: 'edit-event/:id', component: AddEventComponent, data: { state: 'overlay' }, canActivate: [LoginActivate] },
{ path: 'edit-body/:id', component: UpdateBodyComponent, data: { state: 'overlay' }, canActivate: [LoginActivate] },
Expand All @@ -131,6 +143,11 @@ import { CardComponent } from './card/card.component';

{ path: 'blog/:blog', component: BlogComponent, data: { state: 'base' }, canActivate: [LoginActivate] },
{ path: 'login', component: LoginComponent, data: { state: 'base' } },

{ path: 'venter/complaints-home', component: ComplaintsHomeComponent, data: { state: 'base' } },
{ path: 'venter/file-complaint', component: FileComplaintComponent, data: { state: 'base' } },
{ path: 'venter/detailed-complaint/:id', component: DetailedComplaintComponent, data: { state: 'base' } },
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These paths are user-facing and hence should not be so verbose. Just change to:

  1. venter/complaints
  2. venter/file
  3. venter/complaint/:id

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also add LoginActivate here cause complaints aren't supposed to be visible to guests.


{ path: 'feedback', component: RedirComponent, data: { state: 'base' } },
{ path: 'android', component: RedirComponent, data: { state: 'base' } },
{ path: '**', redirectTo: 'feed' },
Expand All @@ -141,12 +158,14 @@ import { CardComponent } from './card/card.component';
LayoutModule,
],
entryComponents: [
NotifyCardComponent
NotifyCardComponent,
EditCommentComponent
],
providers: [
DataService,
{ provide: RouteReuseStrategy, useClass: CustomReuseStrategy },
LoginActivate,
VenterDataService,
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Move this just below DataService

],
bootstrap: [AppComponent]
})
Expand Down
54 changes: 54 additions & 0 deletions src/app/interfaces.ts
Original file line number Diff line number Diff line change
Expand Up @@ -162,6 +162,60 @@ export interface IUserTagCategory {
tags: IUserTag[];
}

export interface IComplaintTagUri {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Change to IComplaintTag for consistency with backend.

id: string;
tag_uri: string;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

}

export interface IComplaintComment {
id: string;
time: string;
text: string;
commented_by: IUserProfile;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

reported_date: string;
}

export interface IComplaint {
id: string;
created_by: IUserProfile;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

description: string;
suggestions: string;
location_details: string;
report_date: string;
reported_date: string;
status: string;
status_color: string;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

latitude: number;
longitude: number;
location_description: string;
tags: IComplaintTagUri;
users_up_voted: IUserProfile[];
images: string[];
comments: IComplaintComment[];
vote_count: number;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

is_subscribed: number;
upvoted: boolean;
}

export interface IComplaintPost {
description: string;
suggestions: string;
location_details: string;
latitude: number;
longitude: number;
location_description: string;
tags: string[];
images: string[];
}

export interface IPostComment {
text: string;
}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You don't need separate interfaces for posting. Reuse IComplaintComment.


export interface ICommentDialogData {
commentId: string;
comment: string;
}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just use the IComplaintComment interface wherever this is being used.

export interface IInstituteRole {
id: string;
name: string;
Expand Down
12 changes: 12 additions & 0 deletions src/app/material-angular.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,10 @@ import { MatExpansionModule } from '@angular/material/expansion';
import { MatBadgeModule } from '@angular/material/badge';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatRippleModule } from '@angular/material/core';
import { MatTabsModule } from '@angular/material/tabs';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatDividerModule } from '@angular/material/divider';
import { MatDialogModule } from '@angular/material/dialog';

import { ReactiveFormsModule } from '@angular/forms';
import { NgModule } from '@angular/core';
Expand Down Expand Up @@ -45,6 +49,10 @@ import { MatNativeDateModule } from '@angular/material/core';
MatExpansionModule,
MatBadgeModule,
MatSidenavModule,
MatTabsModule,
MatFormFieldModule,
MatDividerModule,
MatDialogModule
],
exports: [
ReactiveFormsModule,
Expand All @@ -68,6 +76,10 @@ import { MatNativeDateModule } from '@angular/material/core';
MatExpansionModule,
MatBadgeModule,
MatSidenavModule,
MatTabsModule,
MatFormFieldModule,
MatDividerModule,
MatDialogModule
],
})
export class MyMaterialClass { }
6 changes: 6 additions & 0 deletions src/app/navmenu/navmenu.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,12 @@
<mat-icon>map</mat-icon> &nbsp; Map
</a>

<a [routerLink]="['/venter/complaints-home']"
routerLinkActive="active-link"
mat-list-item>
<mat-icon>announcement</mat-icon> &nbsp; Complaints/ Suggestions
</a>

<a [routerLink]="['/quick-links']"
routerLinkActive="active-link"
mat-list-item>
Expand Down
48 changes: 48 additions & 0 deletions src/app/venter/complaint-card/complaint-card.component.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
.complaint-card {
text-decoration: none;
}

.complaint-divider {
padding: 1%;
}

.complaint-card-content {
font-size: medium;
padding-top: 3%;
}

.complaint-description {
white-space: pre-wrap;
}

.complaint-location-details {
padding-top: 2%;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

}

.card {
margin: 5%;
width: 80%;
}

.footer {
position: relative;
text-align: center;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

}

.footer-button-container {
display: inline;
}

.complaint-upvote-active {
color: #536dfe;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

}

.status {
float: right;
background-color: red;
border-width: medium;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

color: white;
padding: 0 2.5%;
font-weight: bold;
text-transform: uppercase;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Newline at EOF

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same for all other files. You can configure most text editors to do this for you.

73 changes: 73 additions & 0 deletions src/app/venter/complaint-card/complaint-card.component.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
<div class="complaint-card" *ngFor="let complaint of complaintList; let i = index">
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  1. If you're making a component for a card, then it should be a single card, not a list of them. Put this loop where this component is being used.
  2. Might be missing something, but I don't see i being used anywhere.

<mat-card class="card" [routerLink]="['/venter/detailed-complaint', complaint.id]">
<div class="status" [style.backgroundColor]="complaint.status_color">
{{ complaint.status }}
</div>
<mat-card-header>
<img mat-card-avatar src="{{complaint.created_by.profile_pic}}"
src-fallback="assets/add_image_placeholder.svg">
<mat-card-title>{{ complaint.created_by.name }}</mat-card-title>
<mat-card-subtitle>
<div>{{ complaint.reported_date }}</div>
<div>{{ complaint.location_description }}</div>
</mat-card-subtitle>
</mat-card-header>
<span class="complaint-divider">
<mat-divider></mat-divider>
</span>
<mat-card-content>
<div>
<div>
<div class="complaint-card-content"><b>Complaint:</b></div>
<pre><div class="complaint-description">{{ complaint.description }}</div></pre>
</div>
<div *ngIf="complaint.suggestions">
<div class="complaint-card-content"><b>Suggestions:</b></div>
<div>{{ complaint.suggestions }}</div>
</div>
<div *ngIf="complaint.location_details">
<div class="complaint-card-content"><b>Location Details:</b></div>
<div class="complaint-location-details">{{ complaint.location_details }}</div>
</div>
</div>
</mat-card-content>
<div class="complaint-divider">
<mat-divider></mat-divider>
</div>
<mat-card-footer>
<div class="footer">
<div class="footer-button-container">
<div *ngIf="complaint.upvoted" class="complaint-upvote-active, footer-button-container">
<button (click)="[upVoteComplaint(complaint.upvoted, complaint.id), onClickEvent($event)]"
class="complaint-upvote-active" mat-icon-button>
<mat-icon>arrow_upward</mat-icon>{{ complaint.users_up_voted.length }}
</button>
</div>
<div *ngIf="!complaint.upvoted" class="footer-button-container">
<button (click)="[upVoteComplaint(complaint.upvoted, complaint.id), onClickEvent($event)]"
mat-icon-button>
<mat-icon>arrow_upward</mat-icon>{{ complaint.users_up_voted.length }}
</button>
</div>
</div>
<button mat-icon-button class="footer-button-container">
<mat-icon>insert_comment</mat-icon>{{ complaint.comments.length }}
</button>
<div class="footer-button-container">
<div *ngIf="complaint.is_subscribed" class="footer-button-container">
<button (click)="[subscribeToComplaint(complaint.complaint_subscribed), onClickEvent($event)]"
mat-icon-button>
<mat-icon>notifications_active</mat-icon>
</button>
</div>
<div *ngIf="!complaint.is_subscribed" class="footer-button-container">
<button (click)="[subscribeToComplaint(complaint.complaint_subscribed), onClickEvent($event)]"
mat-icon-button>
<mat-icon>notifications</mat-icon>
</button>
</div>
</div>
</div>
</mat-card-footer>
</mat-card>
</div>
50 changes: 50 additions & 0 deletions src/app/venter/complaint-card/complaint-card.component.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
import { Component, OnInit, Input } from '@angular/core';
import { IComplaint } from '../../interfaces';
import { DataService } from '../../data.service';
import { API } from '../../../api';
import { VenterDataService } from '../venter-data.service';

@Component({
selector: 'app-complaint-card',
templateUrl: './complaint-card.component.html',
styleUrls: ['./complaint-card.component.css']
})
export class ComplaintCardComponent implements OnInit {

@Input() complaintList: IComplaint[];
@Input() myComplaintsList: IComplaint[];
constructor(
public dataService: DataService,
public venterDataService: VenterDataService,
) { }

ngOnInit() {
}

refresh() {
/* Get all the complaints from server*/
this.dataService.FireGET<IComplaint[]>(API.Complaints).subscribe(result => {
this.complaintList = result;
this.venterDataService.getComplaintInfo(this.complaintList);
});
/* Get the current user complaints from server*/
this.dataService.FireGET<IComplaint[]>(API.MyComplaints).subscribe(result => {
this.myComplaintsList = result;
this.venterDataService.getComplaintInfo(this.myComplaintsList);
});
}

onClickEvent(event) {
event.stopPropagation();
}

subscribeToComplaint(complaint_subscribed: number, complaintId: string) {
this.venterDataService.subscribeToComplaint(complaint_subscribed, complaintId);
this.refresh();
}

upVoteComplaint(has_upvoted: boolean, complaintId: string) {
this.venterDataService.upVoteComplaint(has_upvoted, complaintId);
this.refresh();
}
}
Loading