import { Component } from '@angular/core';
import { mobiscroll, MbscNavOptions, MbscListviewOptions } from '@mobiscroll/angular';
import { HttpClient } from '@angular/common/http';
mobiscroll.settings = {
lang: ' ',
theme: ' ',
themeVariant: ' '
};
@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent {
selectedUser: any;
selectedTab = 'profile';
data: any;
people = [
{ id: 0, name: 'Ashlee Conner', selected: true },
{ id: 1, name: 'Bianca Baker', selected: false },
{ id: 2, name: 'Christopher Tran', selected: false },
{ id: 3, name: 'Konner Stone', selected: false },
{ id: 4, name: 'Leon Medina', selected: false },
{ id: 5, name: 'Nora Leonard', selected: false },
{ id: 6, name: 'Octavio Daniels', selected: false },
{ id: 7, name: 'Russell Wang', selected: false },
{ id: 8, name: 'Teresa Livingston', selected: false },
{ id: 9, name: 'Zoe Gilbert', selected: false }
];
setUser(userIndex) {
this.selectedUser = this.data[userIndex];
}
setTab(tab) {
this.selectedTab = tab;
}
constructor(private http: HttpClient) {
this.getData();
}
getData() {
this.http.jsonp('https://trial.mobiscroll.com/master-detail/', 'callback').subscribe((resp: any) => {
this.data = resp;
this.selectedUser = this.data[0];
}, 'jsonp');
}
formatDate(date) {
return mobiscroll.util.datetime.formatDate('D, d h:ii A', new Date(date));
}
navSettings: MbscNavOptions = {
type: 'tab',
display: 'inline'
};
listviewSettings: MbscListviewOptions = {
select: 'single'
};
}
<mbsc-form class="md-master-detail-demo">
<div class="mbsc-grid mbsc-no-padding">
<div class="mbsc-row">
<div class="mbsc-col-12 mbsc-col-md-2 mbsc-col-sm-3">
<mbsc-listview [options]="listviewSettings" *ngIf="selectedUser">
<mbsc-listview-item *ngFor="let item of people; let i = index" [selected]="item.selected" (click)="setUser(i)">{{item.name}}</mbsc-listview-item>
</mbsc-listview>
</div>
<div class="mbsc-col-12 mbsc-col-md-10 mbsc-col-sm-9 md-col-border">
<mbsc-tab-nav [options]="navSettings">
<mbsc-nav-item [selected]="selectedTab == 'profile'" (click)="setTab('profile')">Profile</mbsc-nav-item>
<mbsc-nav-item [selected]="selectedTab == 'conv'" (click)="setTab('conv')">Conversations</mbsc-nav-item>
<mbsc-nav-item [selected]="selectedTab == 'tasks'" (click)="setTab('tasks')">Tasks</mbsc-nav-item>
</mbsc-tab-nav>
<div *ngIf="selectedUser && selectedTab == 'profile'" class="mbsc-form-grid">
<mbsc-card>
<mbsc-card-content>
<div class="mbsc-row">
<div class="mbsc-col-md-6 mbsc-col-12">
<mbsc-input [(ngModel)]="selectedUser.first" input-style="box" label-style="floating">First name</mbsc-input>
</div>
<div class="mbsc-col-md-6 mbsc-col-12">
<mbsc-input [(ngModel)]="selectedUser.last" input-style="box" label-style="floating">Last name</mbsc-input>
</div>
</div>
<div class="mbsc-row">
<div class="mbsc-col-md-6 mbsc-col-12">
<mbsc-input [(ngModel)]="selectedUser.email" input-style="box" label-style="floating">Email</mbsc-input>
</div>
</div>
<div class="mbsc-row">
<div class="mbsc-col-md-6 mbsc-col-12">
<mbsc-input [(ngModel)]="selectedUser.company" input-style="box" label-style="floating">Company</mbsc-input>
</div>
<div class="mbsc-col-md-6 mbsc-col-12">
<mbsc-dropdown [(ngModel)]="selectedUser.role" input-style="box" label-style="floating" label="Role">
<option value="ceo">CEO</option>
<option value="cto">CTO</option>
<option value="vpp">VP of Product</option>
<option value="vpm">VP of Marketing</option>
<option value="vpe">VP of Engineering</option>
</mbsc-dropdown>
</div>
</div>
<div class="mbsc-row">
<div class="mbsc-col-md-6 mbsc-col-12">
<mbsc-textarea input-style="box" label-style="floating" [(ngModel)]="selectedUser.notes">Notes</mbsc-textarea>
</div>
</div>
<div class="mbsc-row mbsc-justify-content-end">
<div class="mbsc-col-md-6 mbsc-col-12">
<div class="mbsc-pull-right mbsc-btn-group">
<mbsc-button color="primary">Update</mbsc-button>
<mbsc-button color="secondary">Email</mbsc-button>
<mbsc-button color="secondary">Call</mbsc-button>
<mbsc-button color="secondary">Meet</mbsc-button>
</div>
</div>
</div>
</mbsc-card-content>
</mbsc-card>
</div>
<div *ngIf="selectedUser && selectedTab == 'conv'" class="mbsc-form-grid">
<div *ngFor="let conv of selectedUser.conv">
<mbsc-card data-collapsible data-open>
<mbsc-card-header>
<span class="mbsc-bold">{{conv.title}}</span>
<span class="mbsc-pull-right mbsc-card-subtitle">{{formatDate(conv.date)}}</span>
</mbsc-card-header>
<mbsc-card-content>{{conv.text}}</mbsc-card-content>
</mbsc-card>
</div>
</div>
<div *ngIf="selectedUser && selectedTab == 'tasks'" class="mbsc-form-grid">
<mbsc-card>
<mbsc-card-header>
<h2 class="mbsc-card-title">Qualification process with lead</h2>
</mbsc-card-header>
<mbsc-card-content class="mbsc-no-padding">
<mbsc-checkbox [(ngModel)]="selectedUser.tasks[0]">
Understanding business problem we can fix.
</mbsc-checkbox>
<mbsc-checkbox [(ngModel)]="selectedUser.tasks[1]">
How are they solving the problem at the moment?
</mbsc-checkbox>
<mbsc-checkbox [(ngModel)]="selectedUser.tasks[2]">
Do you have a budget allocated to solve this problem?
</mbsc-checkbox>
<mbsc-checkbox [(ngModel)]="selectedUser.tasks[3]">
Understanding the budget signoff process.
</mbsc-checkbox>
<mbsc-checkbox [(ngModel)]="selectedUser.tasks[4]">
What other solutions are you evaluating?
</mbsc-checkbox>
<mbsc-checkbox [(ngModel)]="selectedUser.tasks[5]">
What does success look like?
</mbsc-checkbox>
<mbsc-checkbox [(ngModel)]="selectedUser.tasks[6]">
What does solving the problem mean to you personally?
</mbsc-checkbox>
<mbsc-checkbox [(ngModel)]="selectedUser.tasks[7]">
What's the deadline?
</mbsc-checkbox>
</mbsc-card-content>
</mbsc-card>
</div>
</div>
</div>
</div>
</mbsc-form>
.demo-main-cont.demo-comp-listview { padding: 0; }
.demo-comp-listview .demo-note { margin: 10px; }
.md-master-detail-demo,
.md-master-detail-demo .mbsc-row {
height: 100%;
}
.md-master-detail-demo .mbsc-grid {
height: 100%;
}
.md-master-detail-demo .md-col-border {
overflow: auto;
height: 100%;
min-height: 800px;
border-left: 1px solid #ccc;
}
.md-master-detail-demo .mbsc-ms-c {
border-top: 0;
}
.md-master-tab,
.md-master-item {
display: none;
}
.md-master-tab-sel,
.md-master-item-sel {
display: block;
}
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule, HttpClientJsonpModule } from '@angular/common/http';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MbscModule } from '@mobiscroll/angular';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
MbscModule,
FormsModule,
ReactiveFormsModule,
HttpClientModule,
HttpClientJsonpModule
],
bootstrap: [AppComponent]
})
export class AppModule { }