Skip to content

Commit

Permalink
feat(arc): created demo component to demo all the gantt component
Browse files Browse the repository at this point in the history
created demo component to demo all the gantt component

GH-58
  • Loading branch information
Deepika516 committed Jul 22, 2024
1 parent f1c79b0 commit 5e2bdda
Show file tree
Hide file tree
Showing 12 changed files with 217 additions and 23 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,6 @@ export class GanttBarsComponent {
@Input() allocationTypes: any;
@Input() allocationBase: number;

constructor() {
console.log('hii tiny');
}
formatAllocation(value: number): string {
return `${value} hours`;
}
Expand Down
Original file line number Diff line number Diff line change
@@ -1,8 +1,20 @@
<div>
<h1>{{ name }}</h1>
<div *ngIf="showSearch">
<input type="text" [placeholder]="searchPlaceholder" />
</div>
<div class="header-wrapper">
<h2 class="project-title">{{ name }}</h2>
<nb-card>
<nb-card-body>
<div class="search-wrapper" *ngIf="showSearch">
<input
nbInput
fullWidth
fieldSize="medium"
type="text"
status="basic"
[placeholder]="searchPlaceholder"
/>
</div>
</nb-card-body>
</nb-card>

<div *ngIf="desc">
<p>Description is enabled.</p>
</div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@
bottom: 70.83%;
}
}

.title-bar {
display: flex;
align-items: center;
Expand All @@ -50,4 +51,15 @@
nb-form-field nb-icon {
color: map.get($color, icon);
}


}
.header-wrapper {
display: flex;
align-items: center;
gap: 20px;
}

.project-title{
font-size: x-large;
}
Original file line number Diff line number Diff line change
@@ -1,28 +1,28 @@
<!-- gantt-tooltip.component.html -->
<div class="tooltip-wrapper">
<div class="gantt-tooltip" *ngIf="item">
<div class="gantt-tooltip" *ngIf="itemData">
<div class="key">
<div>Hours Per Day</div>
<div>{{ formatAllocation(item.allocatedHours) }}</div>
<div>{{ formatAllocation(itemData.allocatedHours) }}</div>
</div>
<div class="key" *ngIf="item.billingRate">
<div class="key" *ngIf="itemData.billingRate">
<div>Hourly Rate</div>
<div>{{ formatter(item.billingRate) }}</div>
<div>{{ formatter(itemData.billingRate) }}</div>
</div>
<div class="key" *ngIf="item.startDate">
<div class="key" *ngIf="itemData.startDate">
<div>Start Date</div>
<div *ngIf="item.startDate">
{{ formatDate(item.startDate) | date: 'dd/MM/yyyy' }}
<div *ngIf="itemData.startDate">
{{ formatDate(itemData.startDate) | date: 'dd/MM/yyyy' }}
</div>
</div>
<div class="key" *ngIf="item.endDate">
<div class="key" *ngIf="itemData.endDate">
<div>End Date</div>
<div *ngIf="item.endDate">
{{ formatDate(item.endDate) | date: 'dd/MM/yyyy' }}
<div *ngIf="itemData.endDate">
{{ formatDate(itemData.endDate) | date: 'dd/MM/yyyy' }}
</div>
</div>
<hr />
<div class="key" *ngFor="let deal of item.allotedDeals">
<div class="key" *ngFor="let deal of itemData.allotedDeals">
<div class="deal-name">
<span class="underline">{{ deal.name }}</span>
<ng-container *ngIf="allocationMap.get(deal.name)">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import {Item} from '../../model/item.model';
})
export class GanttTooltipComponent {
@Input()
item: Item;
itemData: Item;

@Input()
allocationMap = new Map<string, boolean>([]);
Expand Down
4 changes: 2 additions & 2 deletions projects/arc-lib/src/lib/components/gantt/gantt.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -15,13 +15,14 @@ import {
GanttLib,
GanttScaleService,
} from './types';
import {DateOperationService} from './services/date-operation.service';

import {
GanttBarsComponent,
GanttColumnComponent,
GanttHeaderComponent,
GanttTooltipComponent,
} from './components';
import {NbInputModule} from '@nebular/theme/components/input/input.module';

@NgModule({
declarations: [
Expand All @@ -38,7 +39,6 @@ import {
GanttTooltipComponent,
],
providers: [
DateOperationService,
GanttService,
{
provide: GANTT,
Expand Down
7 changes: 7 additions & 0 deletions projects/arc/src/app/app-routing.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import {NgModule} from '@angular/core';
import {RouterModule, Routes} from '@angular/router';
import {environment} from '../environments/environment';
import {AuthGuard, LoggedInGuard} from '@project-lib/core/auth';
import {GanttDemoComponent} from './components/gantt-demo/gantt-demo.component';

const routes: Routes = [
{
Expand All @@ -25,6 +26,12 @@ const routes: Routes = [
),
canActivate: [AuthGuard],
},

{
path: 'gantt-demo',
component: GanttDemoComponent,
},

{
path: '',
redirectTo: environment.homePath,
Expand Down
6 changes: 5 additions & 1 deletion projects/arc/src/app/app.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -23,9 +23,11 @@ import {GanttModule} from '@project-lib/components/index';
import {SelectModule} from '@project-lib/components/selector';
import {HeaderComponent} from '@project-lib/components/header/header.component';
import {SidebarComponent} from '@project-lib/components/sidebar/sidebar.component';
import {GanttService} from '@project-lib/components/gantt';
import {GanttDemoComponent} from './components/gantt-demo/gantt-demo.component';

@NgModule({
declarations: [AppComponent],
declarations: [AppComponent, GanttDemoComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
imports: [
BrowserModule,
Expand All @@ -36,6 +38,7 @@ import {SidebarComponent} from '@project-lib/components/sidebar/sidebar.componen
ThemeModule.forRoot('default'),
OverlayModule,
SelectModule,

GanttModule,
BrowserAnimationsModule,
HeaderComponent,
Expand All @@ -49,6 +52,7 @@ import {SidebarComponent} from '@project-lib/components/sidebar/sidebar.componen
SystemStoreFacadeService,
EnvAdapterService,
ApiService,
GanttService,
{
provide: APP_CONFIG,
useValue: environment,
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
<nb-layout>
<nb-layout-header fixed class="border-basic-bottom">
<div class="header-wrapper">
<div class="header">
<arc-gantt-header
[desc]="headerDesc"
[name]="headerName"
[searchPlaceholder]="headerSearchPlaceholder"
[showSearch]="headerShowSearch"
></arc-gantt-header>
</div>
</div>
</nb-layout-header>
<nb-sidebar>
<div class="sidebar">
<arc-gantt-column
[items]="items"
[showParentInitials]="showParentInitials"
[showChildInitials]="showChildInitials"
[showOverallocatedIcon]="showOverallocatedIcon"
></arc-gantt-column>
</div>
</nb-sidebar>
<nb-layout-column>
<nb-card>
<nb-card-header> </nb-card-header>
<nb-card-body>
<arc-gantt-bars
[item]="item"
[allocationTypes]="allocationTypes"
[allocationBase]="allocationBase"
></arc-gantt-bars>
</nb-card-body>
</nb-card>
</nb-layout-column>

<arc-gantt-tooltip [item]="selectedItem"></arc-gantt-tooltip>
</nb-layout>
Empty file.
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';

import { GanttDemoComponent } from './gantt-demo.component';

describe('GanttDemoComponent', () => {
let component: GanttDemoComponent;
let fixture: ComponentFixture<GanttDemoComponent>;

beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ GanttDemoComponent ]
})
.compileComponents();

fixture = TestBed.createComponent(GanttDemoComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});

it('should create', () => {
expect(component).toBeTruthy();
});
});
101 changes: 101 additions & 0 deletions projects/arc/src/app/components/gantt-demo/gantt-demo.component.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,101 @@
import {Component} from '@angular/core';
import {NbSidebarService} from '@nebular/theme';
import {Item, empData} from '@project-lib/components/gantt/model/item.model';

@Component({
selector: 'arc-gantt-demo',
templateUrl: './gantt-demo.component.html',
styleUrls: ['./gantt-demo.component.scss'],
})
export class GanttDemoComponent {
// data for tooltip component
showTooltip = false;
selectedItem: Item;

onBarHovered(itemData: Item) {
this.selectedItem = itemData;
this.showTooltip = true;
}

onBarMouseLeave() {
this.showTooltip = false;
}

itemData: Item = {
allocatedHours: 1600,
billingRate: 100,
startDate: new Date('2024-01-01'),
endDate: new Date('2024-12-31'),
allotedDeals: [
{name: 'Deal 1', allocatedHours: 800, status: 'approved'},
{name: 'Deal 2', allocatedHours: 900, status: 'pending'},
],
};

allocationMap = new Map<string, boolean>([
['Deal 1', true],
['Deal 2', false],
]);

// Data for GanttColumnComponent
items: empData[] = [
{
name: 'john Doe ',
subtitle: 'Manager',
hasChildren: false,
isParent: false,
$open: false,
overallocated: false,
},
{
name: 'kelly',
subtitle: 'Assistant Manager',
hasChildren: false,
isParent: false,
$open: false,
overallocated: false,
},
{
name: 'Clove',
subtitle: 'Software Developer',
hasChildren: false,
isParent: false,
$open: false,
overallocated: false,
},
{
name: 'Classy',
subtitle: 'DevOps',
hasChildren: false,
isParent: false,
$open: false,
overallocated: false,
},
];
showParentInitials = true;
showChildInitials = true;
showOverallocatedIcon = true;

allocationTypes = {
PlaceholderResource: 'PlaceholderResource',
};

allocationBase = 40;

item: Item = {
type: 'ActualResource',
allocation: 32,
payload: {dealStage: 'closedwon', billingRate: 100},
classes: ['example-class'],
subAllocations: [
{percent: 50, allocation: 16, allocatedHours: 16, classes: ['class1']},
{percent: 50, allocation: 16, allocatedHours: 16, classes: ['class2']},
],
};

// Data for GanttHeaderComponent
headerDesc = true;
headerName = 'Dynamic Project Gantt';
headerSearchPlaceholder = 'Search your tasks';
headerShowSearch = true;
}

0 comments on commit 5e2bdda

Please sign in to comment.