Merge branch 'develop' into feature/issue-2-Business_Partners

open-template-hub · Aug 29, 2021 · b4bc0bd · b4bc0bd
2 parents df48b57 + 6862e5e
commit b4bc0bd
Show file tree

Hide file tree

Showing 16 changed files with 134 additions and 127 deletions.
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -69,6 +69,7 @@ import { CalendarComponent } from './component/common/calendar/calendar.componen
 import { SearchComponent } from './component/common/search/search.component';
 import { RateBarComponent } from './component/common/rate-bar/rate-bar.component';
 import { SwiperWrapperComponent } from './component/common/swiper-wrapper/swiper-wrapper.component';
+import { ColorChartComponent } from './component/common/color-chart/color-chart.component';
 
 FullCalendarModule.registerPlugins( [
   dayGridPlugin,
@@ -125,6 +126,7 @@ FullCalendarModule.registerPlugins( [
     RateBarComponent,
     EditThemeComponent,
     SwiperWrapperComponent
+    ColorChartComponent
   ],
   imports: [
     BrowserModule,

diff --git a/src/app/component/common/color-chart/color-chart.component.html b/src/app/component/common/color-chart/color-chart.component.html
@@ -0,0 +1,23 @@
+<div class="color-chart">
+
+  Less
+
+  <svg width="10" height="10" class="d-inline-block">
+    <rect width="10" height="10" style="fill: var(--brand-color-lighter-4)"></rect>
+  </svg>
+  <svg width="10" height="10" class="d-inline-block">
+    <rect width="10" height="10" style="fill: var(--brand-color-lighter-3)"></rect>
+  </svg>
+  <svg width="10" height="10" class="d-inline-block">
+    <rect width="10" height="10" style="fill: var(--brand-color-lighter-2)"></rect>
+  </svg>
+  <svg width="10" height="10" class="d-inline-block">
+    <rect width="10" height="10" style="fill: var(--brand-color-lighter-1)"></rect>
+  </svg>
+  <svg width="10" height="10" class="d-inline-block">
+    <rect width="10" height="10" style="fill: var(--brand-color)"></rect>
+  </svg>
+
+  More
+
+</div>
diff --git a/src/app/component/common/color-chart/color-chart.component.scss b/src/app/component/common/color-chart/color-chart.component.scss
@@ -0,0 +1,10 @@
+.color-chart {
+  float: right;
+  color: var(--color);
+}
+
+.color-chart svg {
+  margin-left: 2px;
+  margin-right: 2px;
+}
+
diff --git a/src/app/component/common/color-chart/color-chart.component.spec.ts b/src/app/component/common/color-chart/color-chart.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ColorChartComponent } from './color-chart.component';
+
+describe('ColorChartComponent', () => {
+  let component: ColorChartComponent;
+  let fixture: ComponentFixture<ColorChartComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ColorChartComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ColorChartComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/component/common/color-chart/color-chart.component.ts b/src/app/component/common/color-chart/color-chart.component.ts
@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-color-chart',
+  templateUrl: './color-chart.component.html',
+  styleUrls: ['./color-chart.component.scss']
+})
+export class ColorChartComponent {
+
+  constructor() {
+    // Intentionally blank
+  }
+}
diff --git a/src/app/page/dashboard-layout/create-event/create-event.component.ts b/src/app/page/dashboard-layout/create-event/create-event.component.ts
@@ -32,8 +32,8 @@ export class CreateEventComponent implements OnInit {
   searchedEvents = [];
 
   defaultCategory: any = {
-    category: { name: 'Teaching & Academics', id: 13 },
-    subCategory: { name: 'Online Education', id: 5 },
+    category: { name: 'Development', id: 1 },
+    subCategory: { name: 'Web Development', id: 1 },
     leafCategory: undefined
   }
 

diff --git a/src/app/page/dashboard-layout/my-profile/my-profile.component.html b/src/app/page/dashboard-layout/my-profile/my-profile.component.html
@@ -119,7 +119,7 @@
       <br/>
       <ngx-charts-bar-horizontal
           [gradient]="gradient"
-          [customColors]="barCustomColors(lessonsInfo)"
+          [customColors]="colors"
           [animations]="false"
           [legend]="showLegend"
           [results]="eventsInfo"
@@ -129,29 +129,7 @@
           [xAxis]="showXAxis"
           [yAxis]="showYAxis">
       </ngx-charts-bar-horizontal>
-      <div class="color-text">
-
-        Less
-
-        <svg width="10" height="10" class="d-inline-block">
-          <rect width="10" height="10" style="fill: var(--brand-color-lighter-4)"></rect>
-        </svg>
-        <svg width="10" height="10" class="d-inline-block">
-          <rect width="10" height="10" style="fill: var(--brand-color-lighter-3)"></rect>
-        </svg>
-        <svg width="10" height="10" class="d-inline-block">
-          <rect width="10" height="10" style="fill: var(--brand-color-lighter-2)"></rect>
-        </svg>
-        <svg width="10" height="10" class="d-inline-block">
-          <rect width="10" height="10" style="fill: var(--brand-color-lighter-1)"></rect>
-        </svg>
-        <svg width="10" height="10" class="d-inline-block">
-          <rect width="10" height="10" style="fill: var(--brand-color)"></rect>
-        </svg>
-
-        More
-
-      </div>
+      <app-color-chart></app-color-chart>
     </div>
   </app-card1>
   <app-card1 *ngIf="eventsInfo.length === 0" [title]="'Lessons Taken'">
@@ -167,7 +145,7 @@ <h3 class="dim">No results found</h3>
       <br/>
       <ngx-charts-bar-horizontal
           [gradient]="gradient"
-          [customColors]="barCustomColors(eventsInfo)"
+          [customColors]="colors"
           [animations]="false"
           [legend]="showLegend"
           [results]="eventsInfo"

diff --git a/src/app/page/dashboard-layout/my-profile/my-profile.component.scss b/src/app/page/dashboard-layout/my-profile/my-profile.component.scss
@@ -42,12 +42,12 @@
   color: var(--brand-color);
 }
 
-.color-text {
+.color-chart {
   float: right;
   color: var(--color);
 }
 
-.color-text svg {
+.color-chart svg {
   margin-left: 2px;
   margin-right: 2px;
 }

diff --git a/src/app/page/dashboard-layout/my-profile/my-profile.component.ts b/src/app/page/dashboard-layout/my-profile/my-profile.component.ts
@@ -16,11 +16,11 @@ import { ThemeService } from '../../../service/theme/theme.service';
 import { UserActivityService } from '../../../service/user-activity/user-activity.service';
 import { PROFILE_IMG, URLS } from '../../../util/constant';
 
-@Component({
+@Component( {
   selector: 'app-my-profile',
   templateUrl: './my-profile.component.html',
-  styleUrls: ['./my-profile.component.scss']
-})
+  styleUrls: [ './my-profile.component.scss' ]
+} )
 export class MyProfileComponent implements OnDestroy {
 
   currentUser: AuthToken;
@@ -31,7 +31,6 @@ export class MyProfileComponent implements OnDestroy {
   loadingCount = false;
   loadingLessonsTaken = false;
   userInterests = [];
-  attendedEvents;
   numberOfEventsMade: number;
   numberOfEventsTaken: number;
   topContributor: number;
@@ -47,6 +46,7 @@ export class MyProfileComponent implements OnDestroy {
 
   eventsInfo: any[] = [];
   lessonsInfo: any[] = [];
+  colors: any[] = [];
 
   showXAxis = true;
   showYAxis = true;
@@ -55,20 +55,13 @@ export class MyProfileComponent implements OnDestroy {
   showXAxisLabel = true;
   showYAxisLabel = false;
 
-  colorScheme = {
-    domain: [
-      ''
-    ]
-  };
-
   eventsTakenXAxisLabel = '# of events taken';
 
   eventsXAxisLabel = '# of events.ts';
 
-  eduMailPattern = '^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-.]+\.edu\.[a-z]{2}$'
+  eduMailPattern = '^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-.]+\.edu\.[a-z]{2}$';
 
   formattedRateNumber: string;
-  numberOfRate: number;
 
   constructor(
       private router: Router,
@@ -82,9 +75,9 @@ export class MyProfileComponent implements OnDestroy {
       private followeeService: FolloweeService,
       private eventService: EventService,
       private themeService: ThemeService,
-      private userActivityService: UserActivityService) {
+      private userActivityService: UserActivityService ) {
     this.loadingCount = true;
-    this.loadingLessonsTaken = true
+    this.loadingLessonsTaken = true;
 
     this.authenticationService.currentUser.subscribe( currentUser => {
           this.currentUser = currentUser;
@@ -103,14 +96,15 @@ export class MyProfileComponent implements OnDestroy {
 
       if ( userInfo?.username ) {
         this.eventService.countUserEvents( userInfo.username ).subscribe( eventList => {
-          this.eventsInfo = eventList
+          this.eventsInfo = eventList;
           this.loadingCount = false;
-        } )
+        } );
 
         this.userActivityService.getEventsTaken( userInfo.username ).subscribe( eventList => {
-          this.lessonsInfo = eventList
-          this.loadingLessonsTaken = false
-        } )
+          this.lessonsInfo = eventList;
+          this.loadingLessonsTaken = false;
+          this.colors = this.themeService.barCustomColors( this.lessonsInfo );
+        } );
 
         this.followerService.count( userInfo.username ).subscribe( followerCount => {
           this.followerCount = followerCount[ 0 ].count;
@@ -121,32 +115,32 @@ export class MyProfileComponent implements OnDestroy {
         } );
 
         this.userActivityService.getNumberOfEventsTaken( userInfo.username ).subscribe( result => {
-          this.numberOfEventsTaken = result[0].numberOfEventsTaken
-        })
+          this.numberOfEventsTaken = result[ 0 ].numberOfEventsTaken;
+        } );
 
         if ( userInfo.payload?.userProfileActivated ) {
           this.userActivityService.getNumberOfEventsMade( userInfo.username ).subscribe( result => {
-            this.numberOfEventsMade = result.numberOfEventsMade
-          } )
+            this.numberOfEventsMade = result.numberOfEventsMade;
+          } );
 
           this.userActivityService.getContributorRate( userInfo.username ).subscribe( rate => {
             this.rateObject = {
               userRating: rate.userRating,
               numberOfRates: rate.numberOfRates
-            }
-          })
+            };
+          } );
 
           this.userActivityService.getTopContributors().subscribe( topContributors => {
             topContributors.forEach( ( value, index ) => {
-              if( value.username === userInfo.username ) {
+              if ( value.username === userInfo.username ) {
                 this.topContributor = index;
               }
             } );
-          })
+          } );
         } else {
-          this.numberOfEventsMade = undefined
-          this.rateObject = undefined
-          this.topContributor = undefined
+          this.numberOfEventsMade = undefined;
+          this.rateObject = undefined;
+          this.topContributor = undefined;
         }
 
         this.categoryService.getCategoriesFromId( this.userInfo.payload?.interests ).subscribe( result => {
@@ -171,16 +165,4 @@ export class MyProfileComponent implements OnDestroy {
   goToUrl( url: string ) {
     window.open( url, '_blank' );
   }
-
-  barCustomColors( array: any[] ) {
-    const result: any[] = [];
-    const style = getComputedStyle( document.body )
-
-    for (let i = 0; i < array.length; i++) {
-      result.push({name: array[i].name, value: style
-        .getPropertyValue( this.themeService.colors[ Math.floor( i / 2 ) ] )});
-    }
-
-    return result;
-  }
 }
diff --git a/src/app/page/dashboard-layout/public-profile/public-profile.component.html b/src/app/page/dashboard-layout/public-profile/public-profile.component.html
@@ -124,7 +124,7 @@
       <br/>
       <ngx-charts-bar-horizontal
           [gradient]="gradient"
-          [customColors]="barCustomColors(lessonsInfo)"
+          [customColors]="colors"
           [animations]="false"
           [legend]="showLegend"
           [results]="lessonsInfo"
@@ -134,7 +134,7 @@
           [xAxis]="showXAxis"
           [yAxis]="showYAxis">
       </ngx-charts-bar-horizontal>
-      <div class="color-text">
+      <div class="color-chart">
 
         Less
 
@@ -173,7 +173,7 @@ <h3 class="dim">No results found</h3>
       <br/>
       <ngx-charts-bar-horizontal
         [gradient]="gradient"
-        [customColors]="barCustomColors(eventsInfo)"
+        [customColors]="colors"
         [animations]="false"
         [legend]="showLegend"
         [results]="eventsInfo"
@@ -183,29 +183,7 @@ <h3 class="dim">No results found</h3>
         [xAxis]="showXAxis"
         [yAxis]="showYAxis">
       </ngx-charts-bar-horizontal>
-      <div class="color-text">
-
-        Less
-
-        <svg width="10" height="10" class="d-inline-block">
-          <rect width="10" height="10" style="fill: var(--brand-color-lighter-4)"></rect>
-        </svg>
-        <svg width="10" height="10" class="d-inline-block">
-          <rect width="10" height="10" style="fill: var(--brand-color-lighter-3)"></rect>
-        </svg>
-        <svg width="10" height="10" class="d-inline-block">
-          <rect width="10" height="10" style="fill: var(--brand-color-lighter-2)"></rect>
-        </svg>
-        <svg width="10" height="10" class="d-inline-block">
-          <rect width="10" height="10" style="fill: var(--brand-color-lighter-1)"></rect>
-        </svg>
-        <svg width="10" height="10" class="d-inline-block">
-          <rect width="10" height="10" style="fill: var(--brand-color)"></rect>
-        </svg>
-
-        More
-
-      </div>
+      <app-color-chart></app-color-chart>
     </div>
   </app-card1>
   <app-card1 *ngIf="userInfo?.payload?.userProfileActivated && eventsInfo.length === 0" [title]="'Events'">

diff --git a/src/app/page/dashboard-layout/public-profile/public-profile.component.scss b/src/app/page/dashboard-layout/public-profile/public-profile.component.scss
@@ -42,16 +42,6 @@
   margin-right: 20px;
 }
 
-.color-text {
-  float: right;
-  color: var(--color);
-}
-
-.color-text svg {
-  margin-left: 2px;
-  margin-right: 2px;
-}
-
 .rate-badge-wrapper {
   position: absolute;
   top: 45px;