''

Author: 8306809668

angular-10/package-lock.json

@@ -0,0 +1,41 @@
+export interface Feed {
+    class: string,
+    icon: string,
+    task: string,
+    time: string
+}
+
+export const Feeds: Feed[] = [
+
+    {
+        class: 'bg-info',
+        icon: 'far fa-bell',
+        task: 'You have 4 pending tasks.',
+        time: 'Just Now'
+    },
+    {
+        class: 'bg-success',
+        icon: 'ti-server',
+        task: 'Server #1 overloaded.',
+        time: '2 Hours ago'
+    },
+    {
+        class: 'bg-warning',
+        icon: 'ti-shopping-cart',
+        task: 'New order received.',
+        time: '31 May'
+    },
+    {
+        class: 'bg-danger',
+        icon: 'ti-user',
+        task: 'New user registered.',
+        time: '30 May'
+    },
+    {
+        class: 'bg-primary',
+        icon: 'far fa-user',
+        task: 'You have new password.',
+        time: '21 May'
+    },
+
+] 

angular-10/src/app/dashboard/dashboard-components/feeds/feeds-data.ts

@@ -0,0 +1,16 @@
+<div class="card">
+    <div class="card-body">
+        <h4 class="card-title">Feeds</h4>
+        <div class="feed-widget">
+            <ul class="list-style-none feed-body m-0 p-b-20">
+                <li class="feed-item" *ngFor='let feed of feeds'>
+                    <div class="feed-icon {{feed.class}}">
+                        <i class={{feed.icon}}></i>
+                    </div>
+                    {{feed.task}}
+                    <span class="ml-auto font-12 text-muted"> {{feed.time}}</span>
+                </li>
+            </ul>
+        </div>
+    </div>
+</div>

angular-10/src/app/dashboard/dashboard-components/feeds/feeds.component.css

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FeedsComponent } from './feeds.component';
+
+describe('FeedsComponent', () => {
+  let component: FeedsComponent;
+  let fixture: ComponentFixture<FeedsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ FeedsComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FeedsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

angular-10/src/app/dashboard/dashboard-components/feeds/feeds.component.html

@@ -0,0 +1,21 @@
+import { Component, OnInit } from '@angular/core';
+import { Feeds,Feed } from './feeds-data';
+
+@Component({
+  selector: 'app-feeds',
+  templateUrl: './feeds.component.html',
+  styleUrls: ['./feeds.component.css']
+})
+export class FeedsComponent implements OnInit {
+
+  feeds:Feed[];
+
+  constructor() {
+
+    this.feeds = Feeds;
+  }
+
+  ngOnInit(): void {
+  }
+
+}

angular-10/src/app/dashboard/dashboard-components/feeds/feeds.component.spec.ts

@@ -0,0 +1,39 @@
+export interface Comment{
+    image:string,
+    name:string,
+    comment:string,
+    date:string,
+    labelClass:string,
+    status:string
+}
+
+export const  comments:Comment[]=[
+
+    {
+        image:'assets/images/users/1.jpg',
+        name:'James Anderson',
+        comment:'Lorem Ipsum is simply dummy text of the printing and type setting industry.',
+        date:'April 14, 2016',
+        labelClass:'label-primary',
+        status:'Pending'
+        
+    },
+    {
+        image:'assets/images/users/4.jpg',
+        name:'Michael Jorden',
+        comment:'Lorem Ipsum is simply dummy text of the printing and type setting industry.',
+        date:'April 14, 2016',
+        labelClass:'label-success',
+        status:'Pending'
+        
+    },
+    {
+        image:'assets/images/users/5.jpg',
+        name:'Johnathan Doeting',
+        comment:'Lorem Ipsum is simply dummy text of the printing and type setting industry.',
+        date:'April 14, 2016',
+        labelClass:'label-danger',
+        status:'Pending'
+        
+    },
+]

angular-10/src/app/dashboard/dashboard-components/feeds/feeds.component.ts

@@ -0,0 +1,26 @@
+<div class="card">
+    <div class="card-body pb-0">
+        <h4 class="card-title">Recent Comments</h4>
+    </div>
+    <div class="comment-widgets scrollable">
+        <!-- Comment Row -->
+        <div class="d-flex flex-row comment-row m-t-0" *ngFor='let comment of userComments'>
+            <div class="p-2">
+                <img [src]=comment.image alt="user" width="50" class="rounded-circle">
+            </div>
+            <div class="comment-text w-100">
+                <h6 class="font-medium">{{comment.name}}</h6>
+                <span class="m-b-15 d-block">{{comment.comment}} </span>
+                <div class="comment-footer">
+                    <span class="text-muted float-right">{{comment.date}}</span>
+                    <span class="label label-rounded {{comment.labelClass}}">{{comment.status}}</span>
+                    <span class="action-icons">
+                        <a href="javascript:void(0)"><i class="ti-pencil-alt"></i></a>
+                        <a href="javascript:void(0)"><i class="ti-check"></i></a>
+                        <a href="javascript:void(0)"><i class="ti-heart"></i></a>
+                    </span>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

angular-10/src/app/dashboard/dashboard-components/recent-comments/comments-data.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RecentCommentsComponent } from './recent-comments.component';
+
+describe('RecentCommentsComponent', () => {
+  let component: RecentCommentsComponent;
+  let fixture: ComponentFixture<RecentCommentsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ RecentCommentsComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(RecentCommentsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});