first commit
This commit is contained in:
@@ -0,0 +1,153 @@
|
||||
.form-control.is-invalid {
|
||||
border-color: #CACFE7;
|
||||
background-image: none !important;
|
||||
}
|
||||
|
||||
.div.basicInfoCard {
|
||||
height: 700px;
|
||||
}
|
||||
|
||||
:host ::ng-deep .block-ui-wrapper {
|
||||
background: rgba(255, 249, 249, 0.5) !important;
|
||||
}
|
||||
:host ::ng-deep .block-ui-wrapper {
|
||||
background: rgba(255, 249, 249, 0.5) !important;
|
||||
}
|
||||
:host ::ng-deep .btn-light:not(:disabled):not(.disabled):active {
|
||||
color: unset !important;
|
||||
background-color: unset !important;
|
||||
border-color: #d3d9df !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .btn-light:hover:not(.disabled):active {
|
||||
background-color: #e2e6ea !important;
|
||||
border-color: #dae0e5 !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .btn-light {
|
||||
color: unset !important;
|
||||
background-color: unset !important;
|
||||
border-color: unset !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .bg-primary {
|
||||
background-color: #007bff !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .text-white {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .custom-day {
|
||||
text-align: center;
|
||||
padding: .185rem .25rem;
|
||||
display: inline-block;
|
||||
height: 2rem;
|
||||
width: 2rem;
|
||||
}
|
||||
|
||||
:host ::ng-deep .custom-day:active {
|
||||
color: #6d7183 !important;
|
||||
background-color: #fff !important;
|
||||
border-block-color: rgb(2, 117, 216) !important;
|
||||
|
||||
}
|
||||
|
||||
.bg-light {
|
||||
background-color: #f8f9fa !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .hidden {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.ngb-dp-weekday {
|
||||
color: #17a2b8;
|
||||
}
|
||||
|
||||
.ngb-dp-week-number,
|
||||
.ngb-dp-weekday {
|
||||
line-height: 2rem;
|
||||
text-align: center;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.ngb-datepicker-month-view {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.small {
|
||||
font-size: 80%;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.ngb-dp-day {
|
||||
cursor: pointer !important;
|
||||
}
|
||||
|
||||
.ngb-dp-month {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.btn-light:hover {
|
||||
color: #212529 !important;
|
||||
background-color: #e2e6ea !important;
|
||||
border-color: #dae0e5 !important;
|
||||
}
|
||||
|
||||
.ngb-datepicker-month-view {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngb-dp-header {
|
||||
background-color: var(--light) !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngb-dp-weekdays {
|
||||
background-color: var(--light);
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngb-dp-month-name {
|
||||
background-color: var(--light);
|
||||
}
|
||||
|
||||
.ngb-dp-header {
|
||||
border-bottom: 0;
|
||||
border-radius: .25rem .25rem 0 0;
|
||||
padding-top: .25rem;
|
||||
}
|
||||
|
||||
.ngb-dp-day,
|
||||
.ngb-dp-week-number,
|
||||
.ngb-dp-weekday {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
}
|
||||
|
||||
.custom-day {
|
||||
text-align: center;
|
||||
padding: 0.185rem 0.25rem;
|
||||
display: inline-block;
|
||||
height: 2rem;
|
||||
width: 2rem;
|
||||
}
|
||||
|
||||
.custom-day.focused {
|
||||
background-color: #e6e6e6;
|
||||
}
|
||||
|
||||
.custom-day.range,
|
||||
.custom-day:hover {
|
||||
background-color: rgb(2, 117, 216);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.custom-day.faded {
|
||||
background-color: rgba(2, 117, 216, 0.5);
|
||||
}
|
||||
|
||||
:host ::ng-deep .block-ui-wrapper {
|
||||
background: rgba(255, 249, 249, 0.5) !important;
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,764 @@
|
||||
<div class="app-content content">
|
||||
<div class="content-wrapper">
|
||||
<div class="content-header row mb-1">
|
||||
<app-breadcrumb class="col-12" [breadcrumb]="breadcrumb"></app-breadcrumb>
|
||||
</div>
|
||||
<div class="content-body">
|
||||
<!-- Basic form layout section start -->
|
||||
<section id="basic-form-layouts">
|
||||
<div class="row" matchHeight="card">
|
||||
<div class="col-md-6" *blockUI="'projectInfo'; message: 'Loading'">
|
||||
<m-card [options]="options" (reloadFunction)="reloadProjectInfo($event)">
|
||||
<ng-container mCardHeaderTitle>
|
||||
Project Info (Reactive Forms Validation)
|
||||
</ng-container>
|
||||
<ng-container mCardBody>
|
||||
<div class="card-text">
|
||||
<p>This is the most basic and default form having form sections. To add form section use
|
||||
<code>.form-section</code>
|
||||
class with any heading tags. This form has the buttons on the bottom left corner which is the
|
||||
default position.</p>
|
||||
</div>
|
||||
<form [formGroup]="projectInfo" (ngSubmit)="onProjectInfoSubmit()">
|
||||
<div class="form-body">
|
||||
<h4 class="form-section"><i class="feather ft-user"></i> Personal Info</h4>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<label for="projectinput1">First Name *</label>
|
||||
<input type="text" id="projectinput1" class="form-control" formControlName="firstName"
|
||||
placeholder="First Name" [ngClass]="{ 'is-invalid': submitted && f.firstName.errors }" />
|
||||
<small class="form-text text-muted danger" *ngIf="submitted && f.firstName.errors"
|
||||
class="invalid-feedback">
|
||||
<div *ngIf=" f.firstName.errors.required">
|
||||
First Name is required</div>
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<label for="projectinput2">Last Name *</label>
|
||||
<input type="text" id="projectinput2" class="form-control" formControlName="lastName"
|
||||
placeholder="Last Name" [ngClass]="{ 'is-invalid': submitted && f.lastName.errors }" />
|
||||
<small class="form-text text-muted danger" *ngIf="submitted && f.lastName.errors" class="invalid-feedback">
|
||||
<div *ngIf="f.lastName.errors.required">
|
||||
Last Name is required</div>
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<label for="projectinput3">E-mail *</label>
|
||||
<input type="text" id="projectinput3" class="form-control" formControlName="email"
|
||||
placeholder="E-mail" [ngClass]="{ 'is-invalid': submitted && f.email.errors }" />
|
||||
<small class="form-text text-muted danger" *ngIf="submitted && f.email.errors" class="invalid-feedback">
|
||||
<div *ngIf="f.email.errors.required">Email
|
||||
is required</div>
|
||||
<div *ngIf="f.email.errors.email">Email must
|
||||
be a valid email address</div>
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<label for="projectinput4">Contact Number *</label>
|
||||
<input type="text" id="projectinput4" class="form-control" formControlName="phone"
|
||||
placeholder="Phone" [ngClass]="{ 'is-invalid': submitted && f.phone.errors }" (keypress)="keyPress($event)"/>
|
||||
<small class="form-text text-muted danger" *ngIf="submitted && f.phone.errors" class="invalid-feedback">
|
||||
<div *ngIf="f.phone.errors.required">phone
|
||||
is required</div>
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h4 class="form-section"><i class="la la-paperclip"></i> Requirements</h4>
|
||||
<div class="form-group">
|
||||
<label for="companyName">Company *</label>
|
||||
<input type="text" id="companyName" class="form-control" formControlName="company"
|
||||
placeholder="Company Name" [ngClass]="{ 'is-invalid': submitted && f.company.errors }" />
|
||||
<small class="form-text text-muted danger" *ngIf="submitted && f.company.errors" class="invalid-feedback">
|
||||
<div *ngIf="f.company.errors.required">Company
|
||||
is required</div>
|
||||
</small>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<label for="projectinput5">Interested in *</label>
|
||||
<select id="projectinput5" class="form-control" formControlName="interestedIn"
|
||||
[ngClass]="{ 'is-invalid': submitted && f.interestedIn.errors }">
|
||||
<option *ngFor="let interest of interestedIn" [value]="interest">{{interest}}</option>
|
||||
</select>
|
||||
<small class="form-text text-muted danger" *ngIf="submitted && f.interestedIn.errors"
|
||||
class="invalid-feedback">
|
||||
<div
|
||||
*ngIf="f.interestedIn.errors.required">
|
||||
Interest is required</div>
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<label for="projectinput6">Budget *</label>
|
||||
<select id="projectinput6" class="form-control" formControlName="budget"
|
||||
[ngClass]="{ 'is-invalid': submitted && f.budget.errors }">
|
||||
<option *ngFor="let range of budget" [value]="range">{{range}}</option>
|
||||
</select>
|
||||
<small class="form-text text-muted danger" *ngIf="submitted && f.budget.errors" class="invalid-feedback">
|
||||
<div *ngIf="f.budget.errors.required">
|
||||
Budget is required</div>
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Select File</label>
|
||||
<label id="projectinput7" class="file center-block">
|
||||
<input type="file" id="file" formControlName="selectFile"
|
||||
[ngClass]="{ 'is-invalid': submitted && f.selectFile.errors }" style="margin-left: 3px;">
|
||||
<span class="file-custom"></span>
|
||||
</label>
|
||||
<small class="form-text text-muted danger" *ngIf="submitted && f.selectFile.errors" class="invalid-feedback">
|
||||
<div *ngIf="f.selectFile.errors.required">File
|
||||
is required</div>
|
||||
</small>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="projectinput8">About Project *</label>
|
||||
<textarea id="projectinput8" rows="5" class="form-control" formControlName="aboutProject"
|
||||
[ngClass]="{ 'is-invalid': submitted && f.aboutProject.errors }" placeholder="About Project"></textarea>
|
||||
<small class="form-text text-muted danger" *ngIf="submitted && f.aboutProject.errors" class="invalid-feedback">
|
||||
<div *ngIf="f.aboutProject.errors.required">
|
||||
Project Description
|
||||
is required</div>
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-actions">
|
||||
<button type="button" class="btn btn-warning mr-1">
|
||||
<i class="feather ft-x"></i> Cancel
|
||||
</button>
|
||||
<button type="submit" class="btn btn-primary">
|
||||
<i class="la la-check"></i> Save
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</ng-container>
|
||||
</m-card>
|
||||
</div>
|
||||
<div class="col-md-6" *blockUI="'userProfile'; message: 'Loading'">
|
||||
<m-card [options]="options" (reloadFunction)="reloadUserProfile($event)">
|
||||
<ng-container mCardHeaderTitle>
|
||||
User Profile (Template-Driven Forms Validation)
|
||||
</ng-container>
|
||||
<ng-container mCardBody>
|
||||
<div class="card-text">
|
||||
<p>You can always change the border color of the form controls using <code>border-*</code> class.
|
||||
In this example we have user <code>border-primary</code> class for form controls. Form action
|
||||
buttons are on the bottom right position.</p>
|
||||
</div>
|
||||
<form #f="ngForm" (ngSubmit)="f.form.valid">
|
||||
<div class="form-body">
|
||||
<h4 class="form-section"><i class="la la-eye"></i> About User</h4>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<label for="userinput1">First Name *</label>
|
||||
<input type="text" id="userinput1" class="form-control border-primary"
|
||||
placeholder="First Name" [(ngModel)]="model.firstName" name="firstname" #firstName="ngModel" required>
|
||||
<small class="form-text text-muted danger" *ngIf="!firstName.valid && f.submitted">First Name is required.</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<label for="userinput2">Last Name *</label>
|
||||
<input type="text" id="userinput2" class="form-control border-primary" placeholder="Last Name"
|
||||
[(ngModel)]="model.lastName" name="lastname" #lastName="ngModel" required>
|
||||
<small class="form-text text-muted danger" *ngIf="!lastName.valid && f.submitted">Last Name is required.</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<label for="userinput3">Username *</label>
|
||||
<input type="text" id="userinput3" class="form-control border-primary" placeholder="Username"
|
||||
[(ngModel)]="model.userName" name="username" #userName="ngModel" required>
|
||||
<small class="form-text text-muted danger" *ngIf="!userName.valid && f.submitted">User Name is required.</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<label for="userinput4">Nick Name *</label>
|
||||
<input type="text" id="userinput4" class="form-control border-primary" placeholder="Nick Name"
|
||||
[(ngModel)]="model.nickName" name="nickname" #nickName="ngModel" required>
|
||||
<small class="form-text text-muted danger" *ngIf="!nickName.valid && f.submitted">Nick Name is required.</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h4 class="form-section"><i class="feather ft-mail"></i> Contact Info & Bio</h4>
|
||||
<div class="form-group">
|
||||
<label for="userinput5">Email *</label>
|
||||
<input class="form-control border-primary" type="email" placeholder="email" id="userinput5"
|
||||
[(ngModel)]="model.email" name="email" #email="ngModel" required email>
|
||||
<small class="form-text text-muted danger" *ngIf="!email.valid && f.submitted">Please enter a valid email!</small>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="userinput6">Website</label>
|
||||
<input class="form-control border-primary" type="text" placeholder="http://" id="userinput6"
|
||||
ngModel name="url" #url="ngModel" url>
|
||||
<small class="form-text text-muted danger" *ngIf="url.errors?.url && f.submitted">url error</small>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Contact Number</label>
|
||||
<input class="form-control border-primary" id="userinput7" type="tel"
|
||||
[(ngModel)]="model.phone" name="phone" #phone="ngModel" (keypress)="keyPress($event)" required>
|
||||
<small class="form-text text-muted danger" *ngIf="!phone.valid && f.submitted" class="invalid-feedback">
|
||||
contact Number required
|
||||
</small>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="userinput8">Bio *</label>
|
||||
<textarea type="text" id="userinput8" rows="5" class="form-control border-primary"
|
||||
placeholder="Bio" name="bio" [(ngModel)]="model.bio" #bio="ngModel" required></textarea>
|
||||
<small class="form-text text-muted danger" *ngIf="!bio.valid && f.submitted">Bio is required.</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-actions text-right">
|
||||
<button type="button" class="btn btn-warning mr-1">
|
||||
<i class="feather ft-x"></i> Cancel
|
||||
</button>
|
||||
<button type="submit" class="btn btn-primary">
|
||||
<i class="la la-check"></i> Save
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</ng-container>
|
||||
</m-card>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" matchHeight="card">
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title" id="basic-layout-tooltip">Issue Tracking</h4>
|
||||
</div>
|
||||
<div class="card-content collapse show">
|
||||
<div class="card-body">
|
||||
<div class="card-text">
|
||||
<p>This form shows tooltips on hover to provide useful information while user is filling the form.
|
||||
Use data attributes like toggle <code>data-toggle</code>, trigger <code>data-trigger</code>,
|
||||
placement <code>data-placement</code>, title <code>data-title</code> to show tooltips on form
|
||||
controls.</p>
|
||||
</div>
|
||||
<form [formGroup]="issueTracking">
|
||||
<div class="form-body">
|
||||
<div class="form-group">
|
||||
<label for="issueinput1">Issue Title</label>
|
||||
<input type="text" id="issueinput1" class="form-control" placeholder="issue title"
|
||||
ngbTooltip="Issue Title" placement="top" formControlName="issueTitle">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="issueinput2">Opened By</label>
|
||||
<input type="text" id="issueinput2" class="form-control" placeholder="opened by"
|
||||
ngbTooltip="Opened By" placement="top" formControlName="openedBy">
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<label for="issueinput3">Date Opened</label>
|
||||
<div class="input-group">
|
||||
<input class="form-control" placeholder="yyyy-mm-dd" name="dp"
|
||||
ngbDatepicker #d1="ngbDatepicker">
|
||||
<div class="input-group-append">
|
||||
<div class="input-group-text" (click)="d1.toggle()">
|
||||
<i class="fa fa-calendar" style="cursor: pointer;"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<label for="issueinput4">Date Fixed</label>
|
||||
<div class="input-group">
|
||||
<input class="form-control" placeholder="yyyy-mm-dd" name="dp"
|
||||
ngbDatepicker #d2="ngbDatepicker">
|
||||
<div class="input-group-append">
|
||||
<div class="input-group-text" (click)="d2.toggle()">
|
||||
<i class="fa fa-calendar" style="cursor: pointer;"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="issueinput5">Priority</label>
|
||||
<select id="issueinput5" class="form-control" ngbTooltip="Priority" placement="top" formControlName="priority">
|
||||
<option *ngFor="let prio of priority" [value]="prio">{{prio}}</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="issueinput6">Status</label>
|
||||
<select id="issueinput6" class="form-control" ngbTooltip="Status" placement="top" formControlName="status">
|
||||
<option *ngFor="let stat of status" [value]="stat">{{stat}}</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="issueinput8">Comments</label>
|
||||
<textarea id="issueinput8" rows="5" class="form-control" placeholder="comments"
|
||||
ngbTooltip="Comments" placement="top" formControlName="comment"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-actions">
|
||||
<button type="button" class="btn btn-warning mr-1">
|
||||
<i class="feather ft-x"></i> Cancel
|
||||
</button>
|
||||
<button type="submit" class="btn btn-primary">
|
||||
<i class="la la-check"></i> Save
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title" id="basic-layout-icons">Timesheet</h4>
|
||||
</div>
|
||||
<div class="card-content collapse show">
|
||||
<div class="card-body">
|
||||
<div class="card-text">
|
||||
<p>This form shows the use of icons with form controls. Define the position of the icon using
|
||||
<code>has-icon-left</code>
|
||||
or <code>has-icon-right</code> class. Use <code>icon-*</code> class to define the icon for the
|
||||
form control. See Icons sections for the list of icons you can use. </p>
|
||||
</div>
|
||||
<form [formGroup]="timeSheet">
|
||||
<div class="form-body">
|
||||
<div class="form-group">
|
||||
<label for="timesheetinput1">Employee Name</label>
|
||||
<div class="position-relative has-icon-left">
|
||||
<input type="text" id="timesheetinput1" class="form-control" placeholder="employee name"
|
||||
formControlName="employeeName">
|
||||
<div class="form-control-position">
|
||||
<i class="feather ft-user"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="timesheetinput2">Project Name</label>
|
||||
<div class="position-relative has-icon-left">
|
||||
<input type="text" id="timesheetinput2" class="form-control" placeholder="project name"
|
||||
formControlName="projectname">
|
||||
<div class="form-control-position">
|
||||
<i class="la la-briefcase"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="timesheetinput3">Date</label>
|
||||
<div class="position-relative has-icon-left">
|
||||
<div class="input-group">
|
||||
<input class="form-control" placeholder="yyyy-mm-dd" name="dp"
|
||||
ngbDatepicker #d3="ngbDatepicker">
|
||||
<div class="input-group-append">
|
||||
<div class="input-group-text" (click)="d3.toggle()">
|
||||
<i class="fa fa-calendar" style="cursor: pointer;"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-control-position">
|
||||
<i class="feather ft-message-square"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Rate Per Hour</label>
|
||||
<div class="input-group mt-0">
|
||||
<div class="input-group-prepend">
|
||||
<span class="input-group-text">$</span>
|
||||
</div>
|
||||
<input type="text" class="form-control" placeholder="Rate Per Hour"
|
||||
formControlName="ratePerHour">
|
||||
<div class="input-group-append">
|
||||
<span class="input-group-text">.00</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<label for="timesheetinput5">Start Time</label>
|
||||
<div class="position-relative has-icon-left">
|
||||
<input type="time" id="timesheetinput5" class="form-control" formControlName="startTime">
|
||||
<div class="form-control-position">
|
||||
<i class="feather ft-clock"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<label for="timesheetinput6">End Time</label>
|
||||
<div class="position-relative has-icon-left">
|
||||
<input type="time" id="timesheetinput6" class="form-control" formControlName="endTime">
|
||||
<div class="form-control-position">
|
||||
<i class="feather ft-clock"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="timesheetinput7">Notes</label>
|
||||
<div class="position-relative has-icon-left">
|
||||
<textarea id="timesheetinput7" rows="5" class="form-control" formControlName="notes"
|
||||
placeholder="notes"></textarea>
|
||||
<div class="form-control-position">
|
||||
<i class="feather ft-file"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-actions right">
|
||||
<button type="button" class="btn btn-warning mr-1">
|
||||
<i class="feather ft-x"></i> Cancel
|
||||
</button>
|
||||
<button type="submit" class="btn btn-primary">
|
||||
<i class="la la-check"></i> Save
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" matchHeight="card">
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title" id="basic-layout-round-controls">Complaint Form</h4>
|
||||
</div>
|
||||
<div class="card-content collapse show">
|
||||
<div class="card-body">
|
||||
|
||||
<div class="card-text">
|
||||
<p>This is a variation to the default form control styling. In this example all the form controls
|
||||
has round styling. To apply round style add class <code>round</code> to any form control.</p>
|
||||
</div>
|
||||
|
||||
<form [formGroup]="complaintForm">
|
||||
<div class="form-body">
|
||||
|
||||
<div class="form-group">
|
||||
<label for="complaintinput1">Company Name</label>
|
||||
<input type="text" id="complaintinput1" class="form-control round" placeholder="company name"
|
||||
formControlName="companyName">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="complaintinput2">Employee Name</label>
|
||||
<input type="text" id="complaintinput2" class="form-control round" placeholder="employee name"
|
||||
formControlName="employeeName">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="complaintinput3">Date of Complaint</label>
|
||||
<div class="input-group">
|
||||
<input class="form-control" placeholder="yyyy-mm-dd" name="dp"
|
||||
ngbDatepicker #d4="ngbDatepicker">
|
||||
<div class="input-group-append">
|
||||
<div class="input-group-text" (click)="d4.toggle()">
|
||||
<i class="fa fa-calendar" style="cursor: pointer;"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="form-group">
|
||||
<label for="complaintinput4">Supervisor's Name</label>
|
||||
<input type="text" id="complaintinput4" class="form-control round" placeholder="supervisor name"
|
||||
formControlName="supervisorName">
|
||||
</div>
|
||||
|
||||
|
||||
<div class="form-group">
|
||||
<label for="complaintinput5">Complaint Details</label>
|
||||
<textarea id="complaintinput5" rows="5" class="form-control round"
|
||||
formControlName="complaintDetails" placeholder="details"></textarea>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="form-group">
|
||||
<label for="complaintinput6">Signature</label>
|
||||
<input type="text" id="complaintinput6" class="form-control round" placeholder="signature"
|
||||
formControlName="signature">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-actions">
|
||||
<button type="button" class="btn btn-warning mr-1">
|
||||
<i class="feather ft-x"></i> Cancel
|
||||
</button>
|
||||
<button type="submit" class="btn btn-primary">
|
||||
<i class="la la-check"></i> Save
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title" id="basic-layout-square-controls">Donation</h4>
|
||||
</div>
|
||||
<div class="card-content collapse show">
|
||||
<div class="card-body">
|
||||
|
||||
<div class="card-text">
|
||||
<p>This is another variation to the default form control styling. In this example all the form
|
||||
controls has square styling. To apply square style add class <code>square</code> to any form
|
||||
control.</p>
|
||||
</div>
|
||||
|
||||
<form [formGroup]="donation">
|
||||
<div class="form-body">
|
||||
|
||||
<div class="form-group">
|
||||
<label for="donationinput1">Full Name</label>
|
||||
<input type="text" id="donationinput1" class="form-control square" placeholder="name"
|
||||
formControlName="fullName">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="donationinput2">Email</label>
|
||||
<input type="email" id="donationinput2" class="form-control square" placeholder="email"
|
||||
formControlName="email">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="donationinput3">Contact Number</label>
|
||||
<input type="tel" id="donationinput3" class="form-control square" formControlName="contact">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="donationinput4">Dontaion Type</label>
|
||||
<input type="text" id="donationinput4" class="form-control square"
|
||||
placeholder="type of donation" formControlName="donationType">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Amount</label>
|
||||
<div class="input-group mt-0">
|
||||
<div class="input-group-prepend">
|
||||
<span class="input-group-text">$</span>
|
||||
</div>
|
||||
<input type="text" class="form-control square" placeholder="amount"
|
||||
aria-label="Amount (to the nearest dollar)" formControlName="amount">
|
||||
<div class="input-group-append">
|
||||
<span class="input-group-text">.00</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="donationinput7">Comments</label>
|
||||
<textarea id="donationinput7" rows="5" class="form-control square" formControlName="comment"
|
||||
placeholder="comments"></textarea>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="form-actions right">
|
||||
<button type="button" class="btn btn-warning mr-1">
|
||||
<i class="feather ft-x"></i> Cancel
|
||||
</button>
|
||||
<button type="submit" class="btn btn-primary">
|
||||
<i class="la la-check"></i> Save
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" matchHeight="card">
|
||||
<div class="col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title" id="basic-layout-form-center">Event Registration</h4>
|
||||
</div>
|
||||
<div class="card-content collapse show">
|
||||
<div class="card-body">
|
||||
|
||||
<div class="card-text">
|
||||
<p>This example shows a way to center your form in the card. Here we have used
|
||||
<code>col-md-6 ml-auto</code>
|
||||
classes to center the form in a full width card. User can always change those classes according
|
||||
to width and offset requirements. This example also uses form action buttons in the center bottom
|
||||
position of the card.</p>
|
||||
</div>
|
||||
|
||||
<form [formGroup]="eventRegistration1">
|
||||
<div class="row justify-content-md-center">
|
||||
<div class="col-md-6">
|
||||
<div class="form-body">
|
||||
<div class="form-group">
|
||||
<label for="eventInput1">Full Name</label>
|
||||
<input type="text" id="eventInput1" class="form-control" placeholder="name"
|
||||
formControlName="fullname">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="eventInput2">Title</label>
|
||||
<input type="text" id="eventInput2" class="form-control" placeholder="title"
|
||||
formControlName="title">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="eventInput3">Company</label>
|
||||
<input type="text" id="eventInput3" class="form-control" placeholder="company"
|
||||
formControlName="company">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="eventInput4">Email</label>
|
||||
<input type="email" id="eventInput4" class="form-control" placeholder="email"
|
||||
formControlName="email">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="eventInput5">Contact Number</label>
|
||||
<input type="tel" id="eventInput5" class="form-control" formControlName="phone"
|
||||
placeholder="contact number">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Existing Customer</label>
|
||||
<div class="input-group">
|
||||
<div class="d-inline-block custom-control custom-radio mr-1">
|
||||
<input type="radio" class="custom-control-input" value="yes" id="yes"
|
||||
formControlName="customer">
|
||||
<label class="custom-control-label" for="yes">Yes</label>
|
||||
</div>
|
||||
<div class="d-inline-block custom-control custom-radio">
|
||||
<input type="radio" class="custom-control-input" value="no" id="no"
|
||||
formControlName="customer">
|
||||
<label class="custom-control-label" for="no">No</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-actions text-center">
|
||||
<button type="button" class="btn btn-warning mr-1">
|
||||
<i class="feather ft-x"></i> Cancel
|
||||
</button>
|
||||
<button type="submit" class="btn btn-primary">
|
||||
<i class="la la-check"></i> Save
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="row justify-content-md-center">
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title" id="basic-layout-card-center">Event Registration</h4>
|
||||
</div>
|
||||
<div class="card-content collapse show">
|
||||
<div class="card-body">
|
||||
<div class="card-text">
|
||||
<p>This example shows a ways to center your card with form. Here we have used
|
||||
<code>col-md-6 ml-auto</code> classes to center the card as its not full width. User can always
|
||||
change those classes according to width and offset requirements. This example also uses form action
|
||||
buttons in the center bottom position of the card.</p>
|
||||
</div>
|
||||
<form [formGroup]="eventRegistration2">
|
||||
<div class="row justify-content-md-center">
|
||||
<div class="col-md-12">
|
||||
<div class="form-body">
|
||||
<div class="form-group">
|
||||
<label for="eventInput1">Full Name</label>
|
||||
<input type="text" id="eventInput1" class="form-control" placeholder="name"
|
||||
formControlName="fullname">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="eventInput2">Title</label>
|
||||
<input type="text" id="eventInput2" class="form-control" placeholder="title"
|
||||
formControlName="title">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="eventInput3">Company</label>
|
||||
<input type="text" id="eventInput3" class="form-control" placeholder="company"
|
||||
formControlName="company">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="eventInput4">Email</label>
|
||||
<input type="email" id="eventInput4" class="form-control" placeholder="email"
|
||||
formControlName="email">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="eventInput5">Contact Number</label>
|
||||
<input type="tel" id="eventInput5" class="form-control" formControlName="phone"
|
||||
placeholder="contact number">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Existing Customer</label>
|
||||
<div class="input-group">
|
||||
<div class="d-inline-block custom-control custom-radio mr-1">
|
||||
<input type="radio" class="custom-control-input" value="yes2" id="yes2"
|
||||
formControlName="customer2">
|
||||
<label class="custom-control-label" for="yes2">Yes</label>
|
||||
</div>
|
||||
<div class="d-inline-block custom-control custom-radio">
|
||||
<input type="radio" class="custom-control-input" value="no2" id="no2"
|
||||
formControlName="customer2">
|
||||
<label class="custom-control-label" for="no2">No</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-actions text-center">
|
||||
<button type="button" class="btn btn-warning mr-1">
|
||||
<i class="feather ft-x"></i> Cancel
|
||||
</button>
|
||||
<button type="submit" class="btn btn-primary">
|
||||
<i class="la la-check"></i> Save
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- // Basic form layout section end -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- ////////////////////////////////////////////////////////////////////////////-->
|
||||
@@ -0,0 +1,25 @@
|
||||
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
|
||||
|
||||
import { BasicFormsComponent } from './basic-forms.component';
|
||||
|
||||
describe('BasicFormsComponent', () => {
|
||||
let component: BasicFormsComponent;
|
||||
let fixture: ComponentFixture<BasicFormsComponent>;
|
||||
|
||||
beforeEach(waitForAsync(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ BasicFormsComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(BasicFormsComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,173 @@
|
||||
import { Component, OnInit, ViewChild } from '@angular/core';
|
||||
import { FormGroup, FormBuilder, Validators, NgForm } from '@angular/forms';
|
||||
import { NgBlockUI, BlockUI } from 'ng-block-ui';
|
||||
|
||||
@Component({
|
||||
selector: 'app-basic-forms',
|
||||
templateUrl: './basic-forms.component.html',
|
||||
styleUrls: ['./basic-forms.component.css']
|
||||
})
|
||||
export class BasicFormsComponent implements OnInit {
|
||||
|
||||
@ViewChild('f', { read: true }) userProfileForm: NgForm;
|
||||
|
||||
model: any = {};
|
||||
|
||||
@BlockUI('projectInfo') blockUIProjectInfo: NgBlockUI;
|
||||
@BlockUI('userProfile') blockUIUserProfile: NgBlockUI;
|
||||
|
||||
options = {
|
||||
minimize: true,
|
||||
reload: true,
|
||||
expand: true,
|
||||
close: true
|
||||
};
|
||||
public breadcrumb: any;
|
||||
|
||||
projectInfo: FormGroup;
|
||||
userProfile: FormGroup;
|
||||
issueTracking: FormGroup;
|
||||
timeSheet: FormGroup;
|
||||
complaintForm: FormGroup;
|
||||
donation: FormGroup;
|
||||
eventRegistration1: FormGroup;
|
||||
eventRegistration2: FormGroup;
|
||||
|
||||
submitted = false;
|
||||
|
||||
interestedIn = ['design', 'development', 'illustration', 'branding', 'video'];
|
||||
budget = ['less than 5000$', '5000$ - 10000$', '10000$ - 20000$', 'more than 20000$'];
|
||||
priority = ['Low', 'Medium', 'High'];
|
||||
status = ['Not Started', 'Started', 'Fixed'];
|
||||
|
||||
constructor(private formBuilder: FormBuilder) { }
|
||||
|
||||
ngOnInit() {
|
||||
this.breadcrumb = {
|
||||
'mainlabel': 'Basic Forms',
|
||||
'links': [
|
||||
{
|
||||
'name': 'Home',
|
||||
'isLink': true,
|
||||
'link': '/dashboard/sales'
|
||||
},
|
||||
{
|
||||
'name': 'Form Layouts',
|
||||
'isLink': true,
|
||||
'link': '#'
|
||||
},
|
||||
{
|
||||
'name': 'Basic Forms',
|
||||
'isLink': false
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
this.projectInfo = this.formBuilder.group({
|
||||
firstName: ['', Validators.required],
|
||||
lastName: ['', Validators.required],
|
||||
email: ['', [Validators.required, Validators.email]],
|
||||
phone: ['', Validators.required],
|
||||
company: ['', Validators.required],
|
||||
interestedIn: ['', Validators.required],
|
||||
budget: ['', Validators.required],
|
||||
selectFile: [, Validators.required],
|
||||
aboutProject: ['', Validators.required],
|
||||
});
|
||||
|
||||
|
||||
this.issueTracking = this.formBuilder.group({
|
||||
issueTitle: ['', Validators.required],
|
||||
openedBy: ['', Validators.required],
|
||||
dateOpened: ['', Validators.required],
|
||||
dateFixed: ['', Validators.required],
|
||||
priority: ['', Validators.required],
|
||||
status: ['', Validators.required],
|
||||
comment: ['', Validators.required]
|
||||
});
|
||||
|
||||
this.timeSheet = this.formBuilder.group({
|
||||
employeeName: ['', Validators.required],
|
||||
projectname: ['', Validators.required],
|
||||
date: ['', Validators.required],
|
||||
ratePerHour: ['', Validators.required],
|
||||
startTime: ['', Validators.required],
|
||||
endTime: ['', Validators.required],
|
||||
notes: ['', Validators.required]
|
||||
});
|
||||
|
||||
this.complaintForm = this.formBuilder.group({
|
||||
companyName: ['', Validators.required],
|
||||
employeeName: ['', Validators.required],
|
||||
complaintDate: ['', Validators.required],
|
||||
supervisorName: ['', Validators.required],
|
||||
complaintDetails: ['', Validators.required],
|
||||
signature: ['', Validators.required]
|
||||
});
|
||||
|
||||
this.donation = this.formBuilder.group({
|
||||
fullName: ['', Validators.required],
|
||||
email: ['', Validators.required],
|
||||
contact: ['', Validators.required],
|
||||
donationType: ['', Validators.required],
|
||||
amount: ['', Validators.required],
|
||||
comment: ['', Validators.required]
|
||||
});
|
||||
|
||||
this.eventRegistration1 = this.formBuilder.group({
|
||||
fullname: ['', Validators.required],
|
||||
title: ['', Validators.required],
|
||||
company: ['', Validators.required],
|
||||
email: ['', Validators.required],
|
||||
phone: ['', Validators.required],
|
||||
customer: ['', Validators.required]
|
||||
});
|
||||
|
||||
this.eventRegistration2 = this.formBuilder.group({
|
||||
fullname: ['', Validators.required],
|
||||
title: ['', Validators.required],
|
||||
company: ['', Validators.required],
|
||||
email: ['', Validators.required],
|
||||
phone: ['', Validators.required],
|
||||
customer2: ['', Validators.required]
|
||||
});
|
||||
}
|
||||
|
||||
get f() {
|
||||
return this.projectInfo.controls;
|
||||
}
|
||||
|
||||
onProjectInfoSubmit() {
|
||||
this.submitted = true;
|
||||
|
||||
if (this.projectInfo.invalid) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
reloadProjectInfo() {
|
||||
this.blockUIProjectInfo.start('Loading..');
|
||||
|
||||
setTimeout(() => {
|
||||
this.blockUIProjectInfo.stop();
|
||||
}, 2500);
|
||||
}
|
||||
|
||||
reloadUserProfile() {
|
||||
this.blockUIUserProfile.start('Loading..');
|
||||
|
||||
setTimeout(() => {
|
||||
this.blockUIUserProfile.stop();
|
||||
}, 2500);
|
||||
}
|
||||
|
||||
keyPress(event: any) {
|
||||
const pattern = /[0-9\+\-\ ]/;
|
||||
|
||||
const inputChar = String.fromCharCode(event.charCode);
|
||||
if (event.keyCode !== 8 && !pattern.test(inputChar)) {
|
||||
event.preventDefault();
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,141 @@
|
||||
:host ::ng-deep .block-ui-wrapper {
|
||||
background: rgba(255, 249, 249, 0.5) !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .btn-light:not(:disabled):not(.disabled):active {
|
||||
color: unset !important;
|
||||
background-color: unset !important;
|
||||
border-color: #d3d9df !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .btn-light:hover:not(.disabled):active {
|
||||
background-color: #e2e6ea !important;
|
||||
border-color: #dae0e5 !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .btn-light {
|
||||
color: unset !important;
|
||||
background-color: unset !important;
|
||||
border-color: unset !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .bg-primary {
|
||||
background-color: #007bff !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .text-white {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .custom-day {
|
||||
text-align: center;
|
||||
padding: .185rem .25rem;
|
||||
display: inline-block;
|
||||
height: 2rem;
|
||||
width: 2rem;
|
||||
}
|
||||
|
||||
:host ::ng-deep .custom-day:active {
|
||||
color: #6d7183 !important;
|
||||
background-color: #fff !important;
|
||||
border-block-color: rgb(2, 117, 216) !important;
|
||||
|
||||
}
|
||||
|
||||
.bg-light {
|
||||
background-color: #f8f9fa !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .hidden {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.ngb-dp-weekday {
|
||||
color: #17a2b8;
|
||||
}
|
||||
|
||||
.ngb-dp-week-number,
|
||||
.ngb-dp-weekday {
|
||||
line-height: 2rem;
|
||||
text-align: center;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.ngb-datepicker-month-view {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngb-dp-header {
|
||||
background-color: var(--light) !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngb-dp-weekdays {
|
||||
background-color: var(--light);
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngb-dp-month-name {
|
||||
background-color: var(--light);
|
||||
}
|
||||
|
||||
.small {
|
||||
font-size: 80%;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.ngb-dp-day {
|
||||
cursor: pointer !important;
|
||||
}
|
||||
|
||||
.ngb-dp-month {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.btn-light:hover {
|
||||
color: #212529 !important;
|
||||
background-color: #e2e6ea !important;
|
||||
border-color: #dae0e5 !important;
|
||||
}
|
||||
|
||||
.ngb-datepicker-month-view {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.ngb-dp-header {
|
||||
border-bottom: 0;
|
||||
border-radius: .25rem .25rem 0 0;
|
||||
padding-top: .25rem;
|
||||
}
|
||||
|
||||
.ngb-dp-day,
|
||||
.ngb-dp-week-number,
|
||||
.ngb-dp-weekday {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
}
|
||||
|
||||
.custom-day {
|
||||
text-align: center;
|
||||
padding: 0.185rem 0.25rem;
|
||||
display: inline-block;
|
||||
height: 2rem;
|
||||
width: 2rem;
|
||||
}
|
||||
|
||||
.custom-day.focused {
|
||||
background-color: #e6e6e6;
|
||||
}
|
||||
|
||||
.custom-day.range,
|
||||
.custom-day:hover {
|
||||
background-color: rgb(2, 117, 216);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.custom-day.faded {
|
||||
background-color: rgba(2, 117, 216, 0.5);
|
||||
}
|
||||
|
||||
:host ::ng-deep .block-ui-wrapper {
|
||||
background: rgba(255, 249, 249, 0.5) !important;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,425 @@
|
||||
<div class="app-content content">
|
||||
<div class="content-wrapper">
|
||||
<div class="content-header row mb-1">
|
||||
<app-breadcrumb class="col-12" [breadcrumb]="breadcrumb"></app-breadcrumb>
|
||||
</div>
|
||||
<div class="content-body">
|
||||
<!-- Basic form layout section start -->
|
||||
<section id="basic-form-layouts">
|
||||
<div class="row">
|
||||
<div class="col-md-12" *blockUI="'projectInfo'; message: 'Loading'">
|
||||
<m-card [options]="options" (reloadFunction)="reloadProjectInfo($event)">
|
||||
<ng-container mCardHeaderTitle>
|
||||
Project Info
|
||||
</ng-container>
|
||||
<ng-container mCardBody>
|
||||
<div class="card-text">
|
||||
<p>Add <code>.form-bordered</code> to form tag to add border to a form-group. In this example
|
||||
<code>.form-horizontal</code>
|
||||
is used to show the bordered form functionality.</p>
|
||||
</div>
|
||||
<form class="form form-horizontal form-bordered" [formGroup]="projectInfo">
|
||||
<div class="form-body">
|
||||
<h4 class="form-section"><i class="feather ft-user"></i> Personal Info</h4>
|
||||
<div class="form-group row mx-auto">
|
||||
<label class="col-md-3 label-control" for="projectinput1">First Name</label>
|
||||
<div class="col-md-9">
|
||||
<input type="text" id="projectinput1" class="form-control" formControlName="firstName"
|
||||
placeholder="First Name">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row mx-auto">
|
||||
<label class="col-md-3 label-control" for="projectinput2">Last Name</label>
|
||||
<div class="col-md-9">
|
||||
<input type="text" id="projectinput2" class="form-control" formControlName="lastName"
|
||||
placeholder="Last Name">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row mx-auto">
|
||||
<label class="col-md-3 label-control" for="projectinput3">E-mail</label>
|
||||
<div class="col-md-9">
|
||||
<input type="text" id="projectinput3" class="form-control" formControlName="email"
|
||||
placeholder="E-mail">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row mx-auto last">
|
||||
<label class="col-md-3 label-control" for="projectinput4">Contact Number</label>
|
||||
<div class="col-md-9">
|
||||
<input type="text" id="projectinput4" class="form-control" formControlName="phone"
|
||||
placeholder="Phone">
|
||||
</div>
|
||||
</div>
|
||||
<h4 class="form-section"><i class="feather ft-clipboard"></i> Requirements</h4>
|
||||
<div class="form-group row mx-auto">
|
||||
<label class="col-md-3 label-control" for="projectinput5">Company</label>
|
||||
<div class="col-md-9">
|
||||
<input type="text" id="companyName" class="form-control" formControlName="company"
|
||||
placeholder="Company Name">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row mx-auto">
|
||||
<label class="col-md-3 label-control" for="projectinput6">Interested in</label>
|
||||
<div class="col-md-9">
|
||||
<select id="projectinput5" class="form-control" formControlName="interestedIn">
|
||||
<option *ngFor="let interest of interestedIn" [value]="interest">{{interest}}</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row mx-auto">
|
||||
<label class="col-md-3 label-control" for="projectinput7">Budget</label>
|
||||
<div class="col-md-9">
|
||||
<select id="projectinput6" class="form-control" formControlName="budget">
|
||||
<option *ngFor="let range of budget" [value]="range">{{range}}</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row mx-auto">
|
||||
<label class="col-md-3 label-control">Select File</label>
|
||||
<div class="col-md-9">
|
||||
<label id="projectinput8" class="file center-block">
|
||||
<input type="file" id="file" formControlName="selectFile">
|
||||
<span class="file-custom"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row last mx-auto">
|
||||
<label class="col-md-3 label-control" for="projectinput9">About Project</label>
|
||||
<div class="col-md-9">
|
||||
<textarea id="projectinput8" rows="5" class="form-control" formControlName="aboutProject"
|
||||
placeholder="About Project"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-actions">
|
||||
<button type="button" class="btn btn-warning mr-1">
|
||||
<i class="feather ft-x"></i> Cancel
|
||||
</button>
|
||||
<button type="submit" class="btn btn-primary">
|
||||
<i class="la la-check"></i> Save
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</ng-container>
|
||||
</m-card>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-12" *blockUI="'userProfile'; message: 'Loading'">
|
||||
<m-card [options]="options" (reloadFunction)="reloadUserProfile($event)">
|
||||
<ng-container mCardHeaderTitle>
|
||||
User Profile
|
||||
</ng-container>
|
||||
<ng-container mCardBody>
|
||||
<div class="card-text">
|
||||
<p>Add <code>.form-bordered</code> to form tag to add border to a form-group. In this example
|
||||
2-column <code>.form-horizontal</code> is used with primary color bordered form controls to show
|
||||
the bordered form functionality.</p>
|
||||
</div>
|
||||
<form class="form form-horizontal form-bordered" [formGroup]="userProfile">
|
||||
<div class="form-body">
|
||||
<h4 class="form-section"><i class="la la-eye"></i> About User</h4>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="form-group row mx-auto">
|
||||
<label class="col-md-3 label-control" for="userinput1">Fist Name</label>
|
||||
<div class="col-md-9">
|
||||
<input type="text" id="userinput1" class="form-control border-primary"
|
||||
placeholder="First Name" formControlName="firstName">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="form-group row mx-auto">
|
||||
<label class="col-md-3 label-control" for="userinput2">Last Name</label>
|
||||
<div class="col-md-9">
|
||||
<input type="text" id="userinput2" class="form-control border-primary"
|
||||
placeholder="Last Name" formControlName="lastName">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="form-group row last mx-auto">
|
||||
<label class="col-md-3 label-control" for="userinput3">Username</label>
|
||||
<div class="col-md-9">
|
||||
<input type="text" id="userinput3" class="form-control border-primary"
|
||||
placeholder="Username" formControlName="userName">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="form-group row last mx-auto">
|
||||
<label class="col-md-3 label-control" for="userinput4">Nick Name</label>
|
||||
<div class="col-md-9">
|
||||
<input type="text" id="userinput4" class="form-control border-primary"
|
||||
placeholder="Nick Name" formControlName="nickName">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h4 class="form-section"><i class="feather ft-mail"></i> Contact Info & Bio</h4>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="form-group row mx-auto">
|
||||
<label class="col-md-3 label-control" for="userinput5">Email</label>
|
||||
<div class="col-md-9">
|
||||
<input class="form-control border-primary" type="email" placeholder="email" id="userinput5"
|
||||
formControlName="email">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row mx-auto">
|
||||
<label class="col-md-3 label-control" for="userinput6">Website</label>
|
||||
<div class="col-md-9">
|
||||
<input class="form-control border-primary" type="url" placeholder="http://" id="userinput6"
|
||||
formControlName="website">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row mx-auto last">
|
||||
<label class="col-md-3 label-control">Contact Number</label>
|
||||
<div class="col-md-9">
|
||||
<input class="form-control border-primary" id="userinput7" type="tel" formControlName="phone"
|
||||
placeholder="Contact Number">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="form-group row mx-auto last">
|
||||
<label class="col-md-3 label-control" for="userinput8">Bio</label>
|
||||
<div class="col-md-9">
|
||||
<textarea id="userinput8" rows="6" class="form-control border-primary" formControlName="bio"
|
||||
placeholder="Bio"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-actions text-right">
|
||||
<button type="button" class="btn btn-warning mr-1">
|
||||
<i class="feather ft-x"></i> Cancel
|
||||
</button>
|
||||
<button type="submit" class="btn btn-primary">
|
||||
<i class="la la-check"></i> Save
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</ng-container>
|
||||
</m-card>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title" id="bordered-layout-icons">Timesheet</h4>
|
||||
</div>
|
||||
<div class="card-content collpase show">
|
||||
<div class="card-body">
|
||||
|
||||
<div class="card-text">
|
||||
<p>Add <code>.form-bordered</code> to form tag to add border to a form-group. In this example icons
|
||||
are used with form controls to show the bordered form functionality.</p>
|
||||
</div>
|
||||
<form class="form form-horizontal form-bordered" [formGroup]="timeSheet">
|
||||
<div class="form-body">
|
||||
<div class="form-group row mx-auto">
|
||||
<label class="col-md-3 label-control" for="timesheetinput1">Employee Name</label>
|
||||
<div class="col-md-9">
|
||||
<div class="position-relative has-icon-left">
|
||||
<input type="text" id="timesheetinput1" class="form-control" placeholder="employee name"
|
||||
formControlName="employeeName">
|
||||
<div class="form-control-position">
|
||||
<i class="feather ft-user"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row mx-auto">
|
||||
<label class="col-md-3 label-control" for="timesheetinput2">Project Name</label>
|
||||
<div class="col-md-9">
|
||||
<div class="position-relative has-icon-left">
|
||||
<input type="text" id="timesheetinput2" class="form-control" placeholder="project name"
|
||||
formControlName="projectname">
|
||||
<div class="form-control-position">
|
||||
<i class="la la-briefcase"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row mx-auto">
|
||||
<label class="col-md-3 label-control" for="timesheetinput3">Date</label>
|
||||
<div class="col-md-9">
|
||||
<div class="position-relative has-icon-left">
|
||||
<div class="input-group">
|
||||
<input class="form-control" placeholder="yyyy-mm-dd" name="dp"
|
||||
ngbDatepicker #d1="ngbDatepicker">
|
||||
<div class="input-group-append">
|
||||
<div class="input-group-text" (click)="d1.toggle()">
|
||||
<i class="fa fa-calendar" style="cursor: pointer;"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-control-position">
|
||||
<i class="feather ft-message-square"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row mx-auto">
|
||||
<label class="col-md-3 label-control">Rate Per Hour</label>
|
||||
<div class="col-md-9">
|
||||
<div class="input-group mt-0">
|
||||
<div class="input-group-prepend">
|
||||
<span class="input-group-text">$</span>
|
||||
</div>
|
||||
<input type="text" class="form-control" placeholder="Rate Per Hour"
|
||||
formControlName="ratePerHour">
|
||||
<div class="input-group-append">
|
||||
<span class="input-group-text">.00</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row mx-auto">
|
||||
<label class="col-md-3 label-control" for="timesheetinput5">Start Time</label>
|
||||
<div class="col-md-9">
|
||||
<div class="position-relative has-icon-left">
|
||||
<input type="time" id="timesheetinput5" class="form-control" formControlName="startTime">
|
||||
<div class="form-control-position">
|
||||
<i class="feather ft-clock"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row mx-auto">
|
||||
<label class="col-md-3 label-control" for="timesheetinput6">End Time</label>
|
||||
<div class="col-md-9">
|
||||
<div class="position-relative has-icon-left">
|
||||
<input type="time" id="timesheetinput6" class="form-control" formControlName="endTime">
|
||||
<div class="form-control-position">
|
||||
<i class="feather ft-clock"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row mx-auto last">
|
||||
<label class="col-md-3 label-control" for="timesheetinput7">Notes</label>
|
||||
<div class="col-md-9">
|
||||
<div class="position-relative has-icon-left">
|
||||
<textarea id="timesheetinput7" rows="5" class="form-control" formControlName="notes"
|
||||
placeholder="notes"></textarea>
|
||||
<div class="form-control-position">
|
||||
<i class="feather ft-file"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-actions text-right">
|
||||
<button type="button" class="btn btn-warning mr-1">
|
||||
<i class="feather ft-x"></i> Cancel
|
||||
</button>
|
||||
<button type="submit" class="btn btn-primary">
|
||||
<i class="la la-check"></i> Save
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row justify-content-md-center">
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title" id="bordered-layout-card-center">Event Registration</h4>
|
||||
</div>
|
||||
<div class="card-content collpase show">
|
||||
<div class="card-body">
|
||||
|
||||
<div class="card-text">
|
||||
<p>Add <code>.form-bordered</code> to form tag to add border to a form-group. In this example
|
||||
centered card is used to show the bordered form functionality.</p>
|
||||
</div>
|
||||
|
||||
<form class="form form-horizontal form-bordered" [formGroup]="eventRegistration">
|
||||
<div class="form-body">
|
||||
<div class="form-group row mx-auto">
|
||||
<label class="col-md-3 label-control" for="eventRegInput1">Full Name</label>
|
||||
<div class="col-md-9">
|
||||
<input type="text" id="eventInput1" class="form-control" placeholder="name"
|
||||
formControlName="fullname">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group row mx-auto">
|
||||
<label class="col-md-3 label-control" for="eventRegInput2">Title</label>
|
||||
<div class="col-md-9">
|
||||
<input type="text" id="eventInput2" class="form-control" placeholder="title"
|
||||
formControlName="title">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group row mx-auto">
|
||||
<label class="col-md-3 label-control" for="eventRegInput3">Company</label>
|
||||
<div class="col-md-9">
|
||||
<input type="text" id="eventInput3" class="form-control" placeholder="company"
|
||||
formControlName="company">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group row mx-auto">
|
||||
<label class="col-md-3 label-control" for="eventRegInput4">Email</label>
|
||||
<div class="col-md-9">
|
||||
<input type="email" id="eventInput4" class="form-control" placeholder="email"
|
||||
formControlName="email">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group row mx-auto">
|
||||
<label class="col-md-3 label-control" for="eventRegInput5">Contact Number</label>
|
||||
<div class="col-md-9">
|
||||
<input type="tel" id="eventInput5" class="form-control" formControlName="phone"
|
||||
placeholder="contact number">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group row mx-auto last">
|
||||
<label class="col-md-3 label-control">Existing Customer</label>
|
||||
<div class="col-md-9">
|
||||
<div class="input-group col-md-9">
|
||||
<div class="d-inline-block custom-control custom-radio mr-1">
|
||||
<input type="radio" class="custom-control-input" value="yes" id="yes"
|
||||
formControlName="customer1">
|
||||
<label class="custom-control-label" for="yes">Yes</label>
|
||||
</div>
|
||||
<div class="d-inline-block custom-control custom-radio">
|
||||
<input type="radio" class="custom-control-input" value="no" id="no"
|
||||
formControlName="customer1">
|
||||
<label class="custom-control-label" for="no">No</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-actions text-center">
|
||||
<button type="button" class="btn btn-warning mr-1">
|
||||
<i class="feather ft-x"></i> Cancel
|
||||
</button>
|
||||
<button type="submit" class="btn btn-primary">
|
||||
<i class="la la-check"></i> Save
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- // Basic form layout section end -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- ////////////////////////////////////////////////////////////////////////////-->
|
||||
@@ -0,0 +1,25 @@
|
||||
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
|
||||
|
||||
import { BorderedComponent } from './bordered.component';
|
||||
|
||||
describe('BorderedComponent', () => {
|
||||
let component: BorderedComponent;
|
||||
let fixture: ComponentFixture<BorderedComponent>;
|
||||
|
||||
beforeEach(waitForAsync(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ BorderedComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(BorderedComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,112 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { FormGroup, Validators, FormBuilder } from '@angular/forms';
|
||||
import { NgBlockUI, BlockUI } from 'ng-block-ui';
|
||||
|
||||
@Component({
|
||||
selector: 'app-bordered',
|
||||
templateUrl: './bordered.component.html',
|
||||
styleUrls: ['./bordered.component.css']
|
||||
})
|
||||
export class BorderedComponent implements OnInit {
|
||||
|
||||
@BlockUI('projectInfo') blockUIProjectInfo: NgBlockUI;
|
||||
@BlockUI('userProfile') blockUIUserProfile: NgBlockUI;
|
||||
|
||||
public breadcrumb: any;
|
||||
|
||||
options = {
|
||||
close: true,
|
||||
expand: true,
|
||||
minimize: true,
|
||||
reload: true
|
||||
};
|
||||
|
||||
interestedIn = ['design', 'development', 'illustration', 'branding', 'video'];
|
||||
budget = ['less than 5000$', '5000$ - 10000$', '10000$ - 20000$', 'more than 20000$'];
|
||||
|
||||
projectInfo: FormGroup;
|
||||
userProfile: FormGroup;
|
||||
timeSheet: FormGroup;
|
||||
eventRegistration: FormGroup;
|
||||
|
||||
constructor(private formBuilder: FormBuilder) { }
|
||||
|
||||
ngOnInit() {
|
||||
this.breadcrumb = {
|
||||
'mainlabel': 'Bordered Forms',
|
||||
'links': [
|
||||
{
|
||||
'name': 'Home',
|
||||
'isLink': true,
|
||||
'link': '/dashboard/sales'
|
||||
},
|
||||
{
|
||||
'name': 'Form Layouts',
|
||||
'isLink': true,
|
||||
'link': '#'
|
||||
},
|
||||
{
|
||||
'name': 'Bordered Forms',
|
||||
'isLink': true
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
this.projectInfo = this.formBuilder.group({
|
||||
firstName: ['', Validators.required],
|
||||
lastName: ['', Validators.required],
|
||||
email: ['', Validators.required],
|
||||
phone: ['', Validators.required],
|
||||
company: ['', Validators.required],
|
||||
interestedIn: ['', Validators.required],
|
||||
budget: ['', Validators.required],
|
||||
selectFile: ['', Validators.required],
|
||||
aboutProject: ['', Validators.required],
|
||||
});
|
||||
|
||||
this.userProfile = this.formBuilder.group({
|
||||
firstName: ['', Validators.required],
|
||||
lastName: ['', Validators.required],
|
||||
userName: ['', Validators.required],
|
||||
nickName: ['', Validators.required],
|
||||
email: ['', Validators.required],
|
||||
website: ['', Validators.required],
|
||||
phone: ['', Validators.required],
|
||||
bio: ['', Validators.required]
|
||||
});
|
||||
|
||||
this.timeSheet = this.formBuilder.group({
|
||||
employeeName: ['', Validators.required],
|
||||
projectname: ['', Validators.required],
|
||||
date: ['', Validators.required],
|
||||
ratePerHour: ['', Validators.required],
|
||||
startTime: ['', Validators.required],
|
||||
endTime: ['', Validators.required],
|
||||
notes: ['', Validators.required]
|
||||
});
|
||||
this.eventRegistration = this.formBuilder.group({
|
||||
fullname: ['', Validators.required],
|
||||
title: ['', Validators.required],
|
||||
company: ['', Validators.required],
|
||||
email: ['', Validators.required],
|
||||
phone: ['', Validators.required],
|
||||
customer1: ['', Validators.required]
|
||||
});
|
||||
}
|
||||
|
||||
reloadProjectInfo() {
|
||||
this.blockUIProjectInfo.start('Loading..');
|
||||
|
||||
setTimeout(() => {
|
||||
this.blockUIProjectInfo.stop();
|
||||
}, 2500);
|
||||
}
|
||||
|
||||
reloadUserProfile() {
|
||||
this.blockUIUserProfile.start('Loading..');
|
||||
|
||||
setTimeout(() => {
|
||||
this.blockUIUserProfile.stop();
|
||||
}, 2500);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,154 @@
|
||||
:host ::ng-deep .block-ui-wrapper {
|
||||
background: rgba(255, 249, 249, 0.5) !important;
|
||||
}
|
||||
:host ::ng-deep .form-actions.top {
|
||||
border-top: 0 !important;
|
||||
border-bottom: 1px solid #D1D5EA;
|
||||
margin-top: 0 !important;
|
||||
margin-bottom: 20px !important;
|
||||
}
|
||||
:host ::ng-deep .form-actions {
|
||||
padding: 20px 0;
|
||||
margin-top: 20px;
|
||||
}
|
||||
:host ::ng-deep .block-ui-wrapper {
|
||||
background: rgba(255, 249, 249, 0.5) !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .btn-light:not(:disabled):not(.disabled):active {
|
||||
color: unset !important;
|
||||
background-color: unset !important;
|
||||
border-color: #d3d9df !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .btn-light:hover:not(.disabled):active {
|
||||
background-color: #e2e6ea !important;
|
||||
border-color: #dae0e5 !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .btn-light {
|
||||
color: unset !important;
|
||||
background-color: unset !important;
|
||||
border-color: unset !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .bg-primary {
|
||||
background-color: #007bff !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .text-white {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .custom-day {
|
||||
text-align: center;
|
||||
padding: .185rem .25rem;
|
||||
display: inline-block;
|
||||
height: 2rem;
|
||||
width: 2rem;
|
||||
}
|
||||
|
||||
:host ::ng-deep .custom-day:active {
|
||||
color: #6d7183 !important;
|
||||
background-color: #fff !important;
|
||||
border-block-color: rgb(2, 117, 216) !important;
|
||||
|
||||
}
|
||||
|
||||
.bg-light {
|
||||
background-color: #f8f9fa !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .hidden {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.ngb-dp-weekday {
|
||||
color: #17a2b8;
|
||||
}
|
||||
|
||||
.ngb-dp-week-number,
|
||||
.ngb-dp-weekday {
|
||||
line-height: 2rem;
|
||||
text-align: center;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.ngb-datepicker-month-view {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngb-dp-header {
|
||||
background-color: var(--light) !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngb-dp-weekdays {
|
||||
background-color: var(--light);
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngb-dp-month-name {
|
||||
background-color: var(--light);
|
||||
}
|
||||
|
||||
.small {
|
||||
font-size: 80%;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.ngb-dp-day {
|
||||
cursor: pointer !important;
|
||||
}
|
||||
|
||||
.ngb-dp-month {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.btn-light:hover {
|
||||
color: #212529 !important;
|
||||
background-color: #e2e6ea !important;
|
||||
border-color: #dae0e5 !important;
|
||||
}
|
||||
|
||||
.ngb-datepicker-month-view {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.ngb-dp-header {
|
||||
border-bottom: 0;
|
||||
border-radius: .25rem .25rem 0 0;
|
||||
padding-top: .25rem;
|
||||
}
|
||||
|
||||
.ngb-dp-day,
|
||||
.ngb-dp-week-number,
|
||||
.ngb-dp-weekday {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
}
|
||||
|
||||
.custom-day {
|
||||
text-align: center;
|
||||
padding: 0.185rem 0.25rem;
|
||||
display: inline-block;
|
||||
height: 2rem;
|
||||
width: 2rem;
|
||||
}
|
||||
|
||||
.custom-day.focused {
|
||||
background-color: #e6e6e6;
|
||||
}
|
||||
|
||||
.custom-day.range,
|
||||
.custom-day:hover {
|
||||
background-color: rgb(2, 117, 216);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.custom-day.faded {
|
||||
background-color: rgba(2, 117, 216, 0.5);
|
||||
}
|
||||
|
||||
:host ::ng-deep .block-ui-wrapper {
|
||||
background: rgba(255, 249, 249, 0.5) !important;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,803 @@
|
||||
<div class="app-content content">
|
||||
<div class="content-wrapper">
|
||||
<div class="content-header row mb-1">
|
||||
<app-breadcrumb class="col-12" [breadcrumb]="breadcrumb"></app-breadcrumb>
|
||||
</div>
|
||||
<div class="content-body">
|
||||
<!-- Form actions layout section start -->
|
||||
<section id="form-action-layouts">
|
||||
<div class="row" matchHeight="card">
|
||||
<div class="col-md-6" *blockUI="'projectInfo'; message: 'Loading'">
|
||||
<m-card [options]="options" (reloadFunction)="reloadProjectInfo($event)">
|
||||
<ng-container mCardHeaderTitle>
|
||||
Project Info
|
||||
</ng-container>
|
||||
<ng-container mCardBody>
|
||||
<div class="card-text">
|
||||
<ngb-alert *ngIf="!isFormActionInfo1" class="alert-icon-right mb-2" [dismissible]="true"
|
||||
[type]="'info'" (close)="isFormActionInfo1=true" role="alert">
|
||||
<span class="alert-icon"><i class="la la-info"></i></span>
|
||||
<strong>Form Actions On Top Left.</strong>
|
||||
</ngb-alert>
|
||||
<p>To add form actions on top of the form add a div with <code>.form-actions</code> class to begin
|
||||
the form. Add <code>.top</code> class to add border below form actions.</p>
|
||||
</div>
|
||||
<form [formGroup]="projectInfo">
|
||||
<div class="form-actions top">
|
||||
<button type="button" class="btn btn-warning mr-1">
|
||||
<i class="feather ft-x"></i> Cancel
|
||||
</button>
|
||||
<button type="submit" class="btn btn-primary">
|
||||
<i class="la la-check"></i> Save
|
||||
</button>
|
||||
</div>
|
||||
<div class="form-body">
|
||||
<h4 class="form-section"><i class="feather ft-user"></i> Personal Info</h4>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<label for="projectinput1">First Name</label>
|
||||
<input type="text" id="projectinput1" class="form-control" formControlName="firstName"
|
||||
placeholder="First Name">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<label for="projectinput2">Last Name</label>
|
||||
<input type="text" id="projectinput2" class="form-control" formControlName="lastName"
|
||||
placeholder="Last Name">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<label for="projectinput3">E-mail</label>
|
||||
<input type="text" id="projectinput3" class="form-control" formControlName="email"
|
||||
placeholder="E-mail">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<label for="projectinput4">Contact Number</label>
|
||||
<input type="text" id="projectinput4" class="form-control" formControlName="phone"
|
||||
placeholder="Phone">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h4 class="form-section"><i class="la la-paperclip"></i> Requirements</h4>
|
||||
<div class="form-group">
|
||||
<label for="companyName">Company</label>
|
||||
<input type="text" id="companyName" class="form-control" formControlName="company"
|
||||
placeholder="Company Name">
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<label for="projectinput5">Interested in</label>
|
||||
<select id="projectinput5" class="form-control" formControlName="interestedIn">
|
||||
<option *ngFor="let interest of interestedIn" [value]="interest">{{interest}}</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<label for="projectinput6">Budget</label>
|
||||
<select id="projectinput6" class="form-control" formControlName="budget">
|
||||
<option *ngFor="let range of budget" [value]="range">{{range}}</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Select File</label>
|
||||
<label id="projectinput7" class="file center-block">
|
||||
<input type="file" id="file" formControlName="selectFile">
|
||||
<span class="file-custom"></span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="projectinput8">About Project</label>
|
||||
<textarea id="projectinput8" rows="5" class="form-control" formControlName="aboutProject"
|
||||
placeholder="About Project"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</ng-container>
|
||||
</m-card>
|
||||
</div>
|
||||
<div class="col-md-6" *blockUI="'userProfile'; message: 'Loading'">
|
||||
<m-card [options]="options" (reloadFunction)="reloadUserProfile($event)">
|
||||
<ng-container mCardHeaderTitle>
|
||||
User Profile
|
||||
</ng-container>
|
||||
<ng-container mCardBody>
|
||||
<div class="card-text">
|
||||
<ngb-alert *ngIf="!isFormActionInfo2" class="alert-icon-right" [dismissible]="true" [type]="'info'"
|
||||
(close)="isFormActionInfo2=true" role="alert">
|
||||
<span class="alert-icon"><i class="la la-info"></i></span>
|
||||
<strong>Form Actions On Bottom Right.</strong>
|
||||
</ngb-alert>
|
||||
<p>To add form actions on bottom of the form add a div with <code>.form-actions</code> class to end
|
||||
the form. This is the default position for form actions. We have added <code>.right</code> class
|
||||
to move buttons on the right side.</p>
|
||||
</div>
|
||||
<form [formGroup]="userProfile">
|
||||
<div class="form-body">
|
||||
<h4 class="form-section"><i class="la la-eye"></i> About User</h4>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<label for="userinput1">Fist Name</label>
|
||||
<input type="text" id="userinput1" class="form-control border-primary"
|
||||
placeholder="First Name" formControlName="firstName">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<label for="userinput2">Last Name</label>
|
||||
<input type="text" id="userinput2" class="form-control border-primary" placeholder="Last Name"
|
||||
formControlName="lastName">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<label for="userinput3">Username</label>
|
||||
<input type="text" id="userinput3" class="form-control border-primary" placeholder="Username"
|
||||
formControlName="userName">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<label for="userinput4">Nick Name</label>
|
||||
<input type="text" id="userinput4" class="form-control border-primary" placeholder="Nick Name"
|
||||
formControlName="nickName">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h4 class="form-section"><i class="feather ft-mail"></i> Contact Info & Bio</h4>
|
||||
<div class="form-group">
|
||||
<label for="userinput5">Email</label>
|
||||
<input class="form-control border-primary" type="email" placeholder="email" id="userinput5"
|
||||
formControlName="email">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="userinput6">Website</label>
|
||||
<input class="form-control border-primary" type="url" placeholder="http://" id="userinput6"
|
||||
formControlName="website">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Contact Number</label>
|
||||
<input class="form-control border-primary" id="userinput7" type="tel" formControlName="phone"
|
||||
placeholder="Contact Number">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="userinput8">Bio</label>
|
||||
<textarea id="userinput8" rows="5" class="form-control border-primary" formControlName="bio"
|
||||
placeholder="Bio"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-actions text-right">
|
||||
<button type="button" class="btn btn-warning mr-1">
|
||||
<i class="feather ft-x"></i> Cancel
|
||||
</button>
|
||||
<button type="submit" class="btn btn-primary">
|
||||
<i class="la la-check"></i> Save
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</ng-container>
|
||||
</m-card>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" matchHeight="card">
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title" id="from-actions-top-bottom-left">Issue Tracking</h4>
|
||||
</div>
|
||||
<div class="card-content collpase show">
|
||||
<div class="card-body">
|
||||
<div class="card-text">
|
||||
<ngb-alert *ngIf="!isFormActionInfo3" class="alert-icon-right" [dismissible]="true" [type]="'info'"
|
||||
(close)="isFormActionInfo3=true" role="alert">
|
||||
<span class="alert-icon"><i class="la la-info"></i></span>
|
||||
<strong>Form Actions On Top And Bottom Left.</strong>
|
||||
</ngb-alert>
|
||||
<p>To add form actions on top and bottom of the form add a div with <code>.form-actions</code>
|
||||
class to start and end the form.</p>
|
||||
</div>
|
||||
<form [formGroup]="issueTracking">
|
||||
<div class="form-actions top">
|
||||
<button type="button" class="btn btn-warning mr-1">
|
||||
<i class="feather ft-x"></i> Cancel
|
||||
</button>
|
||||
<button type="submit" class="btn btn-primary">
|
||||
<i class="la la-check"></i> Save
|
||||
</button>
|
||||
</div>
|
||||
<div class="form-body">
|
||||
<div class="form-group">
|
||||
<label for="issueinput1">Issue Title</label>
|
||||
<input type="text" id="issueinput1" class="form-control" placeholder="issue title"
|
||||
ngbTooltip="Issue Title" placement="top" formControlName="issueTitle">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="issueinput2">Opened By</label>
|
||||
<input type="text" id="issueinput2" class="form-control" placeholder="opened by"
|
||||
ngbTooltip="Opened By" placement="top" formControlName="openedBy">
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<label for="issueinput3">Date Opened</label>
|
||||
<div class="input-group">
|
||||
<input class="form-control" placeholder="yyyy-mm-dd" name="dp"
|
||||
ngbDatepicker #d1="ngbDatepicker">
|
||||
<div class="input-group-append">
|
||||
<div class="input-group-text" (click)="d1.toggle()">
|
||||
<i class="fa fa-calendar" style="cursor: pointer;"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<label for="issueinput4">Date Fixed</label>
|
||||
<div class="input-group">
|
||||
<input class="form-control" placeholder="yyyy-mm-dd" name="dp"
|
||||
ngbDatepicker #d2="ngbDatepicker">
|
||||
<div class="input-group-append">
|
||||
<div class="input-group-text" (click)="d2.toggle()">
|
||||
<i class="fa fa-calendar" style="cursor: pointer;"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="issueinput5">Priority</label>
|
||||
<select id="issueinput5" class="form-control" ngbTooltip="Priority" placement="top"
|
||||
formControlName="priority">
|
||||
<option *ngFor="let prio of priority" [value]="prio">{{prio}}</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="issueinput6">Status</label>
|
||||
<select id="issueinput6" class="form-control" ngbTooltip="Status" placement="top"
|
||||
formControlName="status">
|
||||
<option *ngFor="let stat of status" [value]="stat">{{stat}}</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="issueinput8">Comments</label>
|
||||
<textarea id="issueinput8" rows="5" class="form-control" placeholder="comments"
|
||||
ngbTooltip="Comments" placement="top" formControlName="comment"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-actions">
|
||||
<button type="button" class="btn btn-warning mr-1">
|
||||
<i class="feather ft-x"></i> Cancel
|
||||
</button>
|
||||
<button type="submit" class="btn btn-primary">
|
||||
<i class="la la-check"></i> Save
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title" id="from-actions-top-bottom-right">Timesheet</h4>
|
||||
</div>
|
||||
<div class="card-content collpase show">
|
||||
<div class="card-body">
|
||||
<div class="card-text">
|
||||
<ngb-alert *ngIf="!isFormActionInfo4" class="alert-icon-right" [dismissible]="true" [type]="'info'"
|
||||
(close)="isFormActionInfo4=true" role="alert">
|
||||
<span class="alert-icon"><i class="la la-info"></i></span>
|
||||
<strong>Form Actions On Top And Bottom Right.</strong>
|
||||
</ngb-alert>
|
||||
<p>To add form actions on top and bottom of the form add a div with <code>.form-actions</code>
|
||||
class to start and end the form. Add <code>.right</code> class to align the form action buttons
|
||||
to right.</p>
|
||||
</div>
|
||||
<form [formGroup]="timeSheet">
|
||||
<div class="form-actions top text-right">
|
||||
<button type="button" class="btn btn-warning mr-1">
|
||||
<i class="feather ft-x"></i> Cancel
|
||||
</button>
|
||||
<button type="submit" class="btn btn-primary">
|
||||
<i class="la la-check"></i> Save
|
||||
</button>
|
||||
</div>
|
||||
<div class="form-body">
|
||||
<div class="form-group">
|
||||
<label for="timesheetinput1">Employee Name</label>
|
||||
<div class="position-relative has-icon-left">
|
||||
<input type="text" id="timesheetinput1" class="form-control" placeholder="employee name"
|
||||
formControlName="employeeName">
|
||||
<div class="form-control-position">
|
||||
<i class="feather ft-user"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="timesheetinput2">Project Name</label>
|
||||
<div class="position-relative has-icon-left">
|
||||
<input type="text" id="timesheetinput2" class="form-control" placeholder="project name"
|
||||
formControlName="projectname">
|
||||
<div class="form-control-position">
|
||||
<i class="la la-briefcase"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="timesheetinput3">Date</label>
|
||||
<div class="position-relative has-icon-left">
|
||||
<div class="input-group">
|
||||
<input class="form-control" placeholder="yyyy-mm-dd" name="dp"
|
||||
ngbDatepicker #d4="ngbDatepicker">
|
||||
<div class="input-group-append">
|
||||
<div class="input-group-text" (click)="d4.toggle()">
|
||||
<i class="fa fa-calendar" style="cursor: pointer;"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-control-position">
|
||||
<i class="feather ft-message-square"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Rate Per Hour</label>
|
||||
<div class="input-group mt-0">
|
||||
<div class="input-group-prepend">
|
||||
<span class="input-group-text">$</span>
|
||||
</div>
|
||||
<input type="text" class="form-control" placeholder="Rate Per Hour"
|
||||
formControlName="ratePerHour">
|
||||
<div class="input-group-append">
|
||||
<span class="input-group-text">.00</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<label for="timesheetinput5">Start Time</label>
|
||||
<div class="position-relative has-icon-left">
|
||||
<input type="time" id="timesheetinput5" class="form-control" formControlName="startTime">
|
||||
<div class="form-control-position">
|
||||
<i class="feather ft-clock"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<label for="timesheetinput6">End Time</label>
|
||||
<div class="position-relative has-icon-left">
|
||||
<input type="time" id="timesheetinput6" class="form-control" formControlName="endTime">
|
||||
<div class="form-control-position">
|
||||
<i class="feather ft-clock"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="timesheetinput7">Notes</label>
|
||||
<div class="position-relative has-icon-left">
|
||||
<textarea id="timesheetinput7" rows="5" class="form-control" formControlName="notes"
|
||||
placeholder="notes"></textarea>
|
||||
<div class="form-control-position">
|
||||
<i class="feather ft-file"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-actions right">
|
||||
<button type="button" class="btn btn-warning mr-1">
|
||||
<i class="feather ft-x"></i> Cancel
|
||||
</button>
|
||||
<button type="submit" class="btn btn-primary">
|
||||
<i class="la la-check"></i> Save
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" matchHeight="card">
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title" id="from-actions-center-dropdown">Complaint Form</h4>
|
||||
<div class="heading-elements">
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-danger">Default</button>
|
||||
<div class="btn-group" ngbDropdown role="group" aria-label="Button group with nested dropdown">
|
||||
<button class="btn btn-danger dropdown-toggle-split" ngbDropdownToggle></button>
|
||||
<div class="dropdown-menu show" ngbDropdownMenu>
|
||||
<button class="dropdown-item">Action - 1</button>
|
||||
<button class="dropdown-item">Another Action</button>
|
||||
<button class="dropdown-item">Something else is here</button>
|
||||
<li class="dropdown-divider"></li>
|
||||
<button class="dropdown-item">Separated link</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<div class="card-text">
|
||||
<ngb-alert *ngIf="!isFormActionInfo5" class="alert-icon-right" [dismissible]="true" [type]="'info'"
|
||||
(close)="isFormActionInfo5=true" role="alert">
|
||||
<span class="alert-icon"><i class="la la-info"></i></span>
|
||||
<strong>Form Actions On Center With Dropdown Form Action.</strong>
|
||||
</ngb-alert>
|
||||
<p>To add form actions on bottom of the form add a div with <code>.form-actions</code> class to end
|
||||
the form. Add <code>.center</code> class to align the form action buttons to center. We can also
|
||||
add more form action using dropdown button to the top right corner of the form.</p>
|
||||
</div>
|
||||
<form [formGroup]="complaintForm">
|
||||
<div class="form-body">
|
||||
<div class="form-group">
|
||||
<label for="complaintinput1">Company Name</label>
|
||||
<input type="text" id="complaintinput1" class="form-control round" placeholder="company name"
|
||||
formControlName="companyName">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="complaintinput2">Employee Name</label>
|
||||
<input type="text" id="complaintinput2" class="form-control round" placeholder="employee name"
|
||||
formControlName="employeeName">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="complaintinput3">Date of Complaint</label>
|
||||
<div class="input-group">
|
||||
<input class="form-control" placeholder="yyyy-mm-dd" name="dp"
|
||||
ngbDatepicker #d3="ngbDatepicker">
|
||||
<div class="input-group-append">
|
||||
<div class="input-group-text" (click)="d3.toggle()">
|
||||
<i class="fa fa-calendar" style="cursor: pointer;"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="complaintinput4">Supervisor's Name</label>
|
||||
<input type="text" id="complaintinput4" class="form-control round" placeholder="supervisor name"
|
||||
formControlName="supervisorName">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="complaintinput5">Complaint Details</label>
|
||||
<textarea id="complaintinput5" rows="5" class="form-control round"
|
||||
formControlName="complaintDetails" placeholder="details"></textarea>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="complaintinput6">Signature</label>
|
||||
<input type="text" id="complaintinput6" class="form-control round" placeholder="signature"
|
||||
formControlName="signature">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-actions text-center">
|
||||
<button type="button" class="btn btn-warning mr-1">
|
||||
<i class="feather ft-x"></i> Cancel
|
||||
</button>
|
||||
<button type="submit" class="btn btn-primary">
|
||||
<i class="la la-check"></i> Save
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title" id="from-actions-center-search">Donation</h4>
|
||||
<div class="heading-elements">
|
||||
<input type="text" class="form-control round" placeholder="search" name="form-search">
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<div class="card-text">
|
||||
<ngb-alert *ngIf="!isFormActionInfo6" class="alert-icon-right" [dismissible]="true" [type]="'info'"
|
||||
(close)="isFormActionInfo6=true" role="alert">
|
||||
<span class="alert-icon"><i class="la la-info"></i></span>
|
||||
<strong>Form Actions On Center With Search Form Action.</strong>
|
||||
</ngb-alert>
|
||||
<p>To add form actions on bottom of the form add a div with <code>.form-actions</code> class to end
|
||||
the form. Add <code>.center</code> class to align the form action buttons to center. We can also
|
||||
search bar action of the form.</p>
|
||||
</div>
|
||||
<form [formGroup]="donation">
|
||||
<div class="form-body">
|
||||
<div class="form-group">
|
||||
<label for="donationinput1">Full Name</label>
|
||||
<input type="text" id="donationinput1" class="form-control square" placeholder="name"
|
||||
formControlName="fullName">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="donationinput2">Email</label>
|
||||
<input type="email" id="donationinput2" class="form-control square" placeholder="email"
|
||||
formControlName="email">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="donationinput3">Contact Number</label>
|
||||
<input type="tel" id="donationinput3" class="form-control square" formControlName="contact">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="donationinput4">Dontaion Type</label>
|
||||
<input type="text" id="donationinput4" class="form-control square"
|
||||
placeholder="type of donation" formControlName="donationType">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Amount</label>
|
||||
<div class="input-group mt-0">
|
||||
<div class="input-group-prepend">
|
||||
<span class="input-group-text">$</span>
|
||||
</div>
|
||||
<input type="text" class="form-control square" placeholder="amount"
|
||||
aria-label="Amount (to the nearest dollar)" formControlName="amount">
|
||||
<div class="input-group-append">
|
||||
<span class="input-group-text">.00</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="donationinput7">Comments</label>
|
||||
<textarea id="donationinput7" rows="5" class="form-control square" formControlName="comment"
|
||||
placeholder="comments"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-actions text-center">
|
||||
<button type="button" class="btn btn-warning mr-1">
|
||||
<i class="feather ft-x"></i> Cancel
|
||||
</button>
|
||||
<button type="submit" class="btn btn-primary">
|
||||
<i class="la la-check"></i> Save
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title" id="from-actions-multiple">Event Registration</h4>
|
||||
</div>
|
||||
<div class="card-content collpase show">
|
||||
<div class="card-body">
|
||||
<div class="card-text">
|
||||
<ngb-alert *ngIf="!isFormActionInfo7" class="alert-icon-right" [dismissible]="true" [type]="'info'"
|
||||
(close)="isFormActionInfo6=true" role="alert">
|
||||
<span class="alert-icon"><i class="la la-info"></i></span>
|
||||
<strong>Multiple Form Actions On Top And Bottom.</strong>
|
||||
</ngb-alert>
|
||||
|
||||
<p>To add form actions on top and bottom of the form add a div with <code>.form-actions</code> class
|
||||
to start
|
||||
and end the form. Add <code>.buttons-group</code> class along with <code>.float-*</code> class to
|
||||
pull the
|
||||
buttons group to either left or right.</p>
|
||||
</div>
|
||||
|
||||
<form class="form" [formGroup]="eventRegistration1">
|
||||
<div class="form-actions top clearfix">
|
||||
<div class="buttons-group float-left mb-1">
|
||||
<button type="button" class="btn btn-warning mr-1">
|
||||
<i class="feather ft-x"></i> Cancel
|
||||
</button>
|
||||
<button type="submit" class="btn btn-primary mr-1">
|
||||
<i class="la la-check"></i> Save
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="buttons-group float-right">
|
||||
<button type="button" class="btn btn-info mr-1">Action 1</button>
|
||||
<button type="submit" class="btn btn-danger mr-1">Action 2</button>
|
||||
<button type="submit" class="btn btn-success">Action 3</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row justify-content-md-center">
|
||||
<div class="col-md-6">
|
||||
<div class="form-body">
|
||||
<div class="row">
|
||||
<div class="form-group col-12 mb-2">
|
||||
<label for="eventRegInput1">Full Name</label>
|
||||
<input type="text" id="eventRegInput1" class="form-control" placeholder="name"
|
||||
formControlName="fullname">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="form-group col-12 mb-2">
|
||||
<label for="eventRegInput2">Title</label>
|
||||
<input type="text" id="eventRegInput2" class="form-control" placeholder="title"
|
||||
formControlName="title">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="form-group col-12 mb-2">
|
||||
<label for="eventRegInput3">Company</label>
|
||||
<input type="text" id="eventRegInput3" class="form-control" placeholder="company"
|
||||
formControlName="company">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="form-group col-12 mb-2">
|
||||
<label for="eventRegInput4">Email</label>
|
||||
<input type="email" id="eventRegInput4" class="form-control" placeholder="email"
|
||||
formControlName="email">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="form-group col-12 mb-2">
|
||||
<label for="eventRegInput5">Contact Number</label>
|
||||
<input type="tel" id="eventRegInput5" class="form-control" formControlName="phone"
|
||||
placeholder="contact number">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="form-group col-12 mb-2">
|
||||
<label>Existing Customer</label>
|
||||
<div class="input-group">
|
||||
<div class="d-inline-block custom-control custom-radio mr-1">
|
||||
<input type="radio" formControlName="customer1" class="custom-control-input"
|
||||
value="yes1" id="yes1">
|
||||
<label class="custom-control-label" for="yes1">Yes</label>
|
||||
</div>
|
||||
<div class="d-inline-block custom-control custom-radio">
|
||||
<input type="radio" formControlName="customer1" class="custom-control-input"
|
||||
value="no1" id="no1">
|
||||
<label class="custom-control-label" for="no1">No</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-actions clearfix">
|
||||
<div class="buttons-group float-left mb-1">
|
||||
<button type="button" class="btn btn-warning mr-1">
|
||||
<i class="feather ft-x"></i> Cancel
|
||||
</button>
|
||||
<button type="submit" class="btn btn-primary mr-1">
|
||||
<i class="la la-check"></i> Save
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="buttons-group float-right">
|
||||
<button type="button" class="btn btn-info mr-1">Action 1</button>
|
||||
<button type="submit" class="btn btn-danger mr-1">Action 2</button>
|
||||
<button type="submit" class="btn btn-success">Action 3</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row justify-content-md-center">
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title" id="from-actions-multiple">Event Registration</h4>
|
||||
</div>
|
||||
<div class="card-content collpase show">
|
||||
<div class="card-body">
|
||||
<div class="card-text">
|
||||
<ngb-alert *ngIf="!isFormActionInfo8" class="alert-icon-right" [dismissible]="true" [type]="'info'"
|
||||
(close)="isFormActionInfo7=true" role="alert">
|
||||
<span class="alert-icon"><i class="la la-info"></i></span>
|
||||
<strong>Multiple Form Actions On Top And Bottom.</strong>
|
||||
</ngb-alert>
|
||||
<p>To add form actions on top and bottom of the form add a div with <code>.form-actions</code>
|
||||
class to start and end the form. Add <code>.buttons-group</code> class along with
|
||||
<code>.float-*</code>
|
||||
class to pull the buttons group to either left or right.</p>
|
||||
</div>
|
||||
<form [formGroup]="eventRegistration2">
|
||||
<div class="form-actions top text-center">
|
||||
<button type="button" class="btn btn-warning mr-1">
|
||||
<i class="feather ft-x"></i> Cancel
|
||||
</button>
|
||||
<button type="submit" class="btn btn-primary">
|
||||
<i class="la la-check"></i> Save
|
||||
</button>
|
||||
</div>
|
||||
<div class="row justify-content-md-center">
|
||||
<div class="col-md-12">
|
||||
<div class="form-body">
|
||||
<div class="form-group">
|
||||
<label for="eventInput1">Full Name</label>
|
||||
<input type="text" id="eventInput1" class="form-control" placeholder="name"
|
||||
formControlName="fullname">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="eventInput2">Title</label>
|
||||
<input type="text" id="eventInput2" class="form-control" placeholder="title"
|
||||
formControlName="title">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="eventInput3">Company</label>
|
||||
<input type="text" id="eventInput3" class="form-control" placeholder="company"
|
||||
formControlName="company">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="eventInput4">Email</label>
|
||||
<input type="email" id="eventInput4" class="form-control" placeholder="email"
|
||||
formControlName="email">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="eventInput5">Contact Number</label>
|
||||
<input type="tel" id="eventInput5" class="form-control" formControlName="phone"
|
||||
placeholder="contact number">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Existing Customer</label>
|
||||
<div class="input-group">
|
||||
<div class="d-inline-block custom-control custom-radio mr-1">
|
||||
<input type="radio" class="custom-control-input" value="yes2" id="yes2"
|
||||
formControlName="customer2">
|
||||
<label class="custom-control-label" for="yes2">Yes</label>
|
||||
</div>
|
||||
<div class="d-inline-block custom-control custom-radio">
|
||||
<input type="radio" class="custom-control-input" value="no2" id="no2"
|
||||
formControlName="customer2">
|
||||
<label class="custom-control-label" for="no2">No</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-actions text-center">
|
||||
<button type="button" class="btn btn-warning mr-1">
|
||||
<i class="feather ft-x"></i> Cancel
|
||||
</button>
|
||||
<button type="submit" class="btn btn-primary">
|
||||
<i class="la la-check"></i> Save
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- // Form actions layout section end -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- ////////////////////////////////////////////////////////////////////////////-->
|
||||
@@ -0,0 +1,25 @@
|
||||
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
|
||||
|
||||
import { FormActionsComponent } from './form-actions.component';
|
||||
|
||||
describe('FormActionsComponent', () => {
|
||||
let component: FormActionsComponent;
|
||||
let fixture: ComponentFixture<FormActionsComponent>;
|
||||
|
||||
beforeEach(waitForAsync(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ FormActionsComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(FormActionsComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,167 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
|
||||
import { NgBlockUI, BlockUI } from 'ng-block-ui';
|
||||
|
||||
@Component({
|
||||
selector: 'app-form-actions',
|
||||
templateUrl: './form-actions.component.html',
|
||||
styleUrls: ['./form-actions.component.css']
|
||||
})
|
||||
export class FormActionsComponent implements OnInit {
|
||||
|
||||
@BlockUI('projectInfo') blockUIProjectInfo: NgBlockUI;
|
||||
@BlockUI('userProfile') blockUIUserProfile: NgBlockUI;
|
||||
|
||||
options = {
|
||||
close: true,
|
||||
expand: true,
|
||||
minimize: true,
|
||||
reload: true
|
||||
};
|
||||
|
||||
projectInfo: FormGroup;
|
||||
userProfile: FormGroup;
|
||||
issueTracking: FormGroup;
|
||||
timeSheet: FormGroup;
|
||||
complaintForm: FormGroup;
|
||||
donation: FormGroup;
|
||||
eventRegistration1: FormGroup;
|
||||
eventRegistration2: FormGroup;
|
||||
|
||||
public isFormActionInfo1 = false;
|
||||
public isFormActionInfo2 = false;
|
||||
public isFormActionInfo3 = false;
|
||||
public isFormActionInfo4 = false;
|
||||
public isFormActionInfo5 = false;
|
||||
public isFormActionInfo6 = false;
|
||||
public isFormActionInfo7 = false;
|
||||
public isFormActionInfo8 = false;
|
||||
|
||||
public breadcrumb: any;
|
||||
|
||||
interestedIn = ['design', 'development', 'illustration', 'branding', 'video'];
|
||||
budget = ['less than 5000$', '5000$ - 10000$', '10000$ - 20000$', 'more than 20000$'];
|
||||
priority = ['Low', 'Medium', 'High'];
|
||||
status = ['Not Started', 'Started', 'Fixed'];
|
||||
|
||||
constructor(private formBuilder: FormBuilder) { }
|
||||
|
||||
ngOnInit() {
|
||||
this.breadcrumb = {
|
||||
'mainlabel': 'Form Actions',
|
||||
'links': [
|
||||
{
|
||||
'name': 'Home',
|
||||
'isLink': true,
|
||||
'link': '/dashboard/sales'
|
||||
},
|
||||
{
|
||||
'name': 'Form Layouts',
|
||||
'isLink': true,
|
||||
'link': '#'
|
||||
},
|
||||
{
|
||||
'name': 'Form Actions',
|
||||
'isLink': true
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
this.projectInfo = this.formBuilder.group({
|
||||
firstName: ['', Validators.required],
|
||||
lastName: ['', Validators.required],
|
||||
email: ['', Validators.required],
|
||||
phone: ['', Validators.required],
|
||||
company: ['', Validators.required],
|
||||
interestedIn: ['', Validators.required],
|
||||
budget: ['', Validators.required],
|
||||
selectFile: ['', Validators.required],
|
||||
aboutProject: ['', Validators.required],
|
||||
});
|
||||
|
||||
this.userProfile = this.formBuilder.group({
|
||||
firstName: ['', Validators.required],
|
||||
lastName: ['', Validators.required],
|
||||
userName: ['', Validators.required],
|
||||
nickName: ['', Validators.required],
|
||||
email: ['', Validators.required],
|
||||
website: ['', Validators.required],
|
||||
phone: ['', Validators.required],
|
||||
bio: ['', Validators.required]
|
||||
});
|
||||
|
||||
this.issueTracking = this.formBuilder.group({
|
||||
issueTitle: ['', Validators.required],
|
||||
openedBy: ['', Validators.required],
|
||||
dateOpened: ['', Validators.required],
|
||||
dateFixed: ['', Validators.required],
|
||||
priority: ['', Validators.required],
|
||||
status: ['', Validators.required],
|
||||
comment: ['', Validators.required]
|
||||
});
|
||||
|
||||
this.timeSheet = this.formBuilder.group({
|
||||
employeeName: ['', Validators.required],
|
||||
projectname: ['', Validators.required],
|
||||
date: ['', Validators.required],
|
||||
ratePerHour: ['', Validators.required],
|
||||
startTime: ['', Validators.required],
|
||||
endTime: ['', Validators.required],
|
||||
notes: ['', Validators.required]
|
||||
});
|
||||
|
||||
this.complaintForm = this.formBuilder.group({
|
||||
companyName: ['', Validators.required],
|
||||
employeeName: ['', Validators.required],
|
||||
complaintDate: ['', Validators.required],
|
||||
supervisorName: ['', Validators.required],
|
||||
complaintDetails: ['', Validators.required],
|
||||
signature: ['', Validators.required]
|
||||
});
|
||||
|
||||
this.donation = this.formBuilder.group({
|
||||
fullName: ['', Validators.required],
|
||||
email: ['', Validators.required],
|
||||
contact: ['', Validators.required],
|
||||
donationType: ['', Validators.required],
|
||||
amount: ['', Validators.required],
|
||||
comment: ['', Validators.required]
|
||||
});
|
||||
|
||||
this.eventRegistration1 = this.formBuilder.group({
|
||||
fullname: ['', Validators.required],
|
||||
title: ['', Validators.required],
|
||||
company: ['', Validators.required],
|
||||
email: ['', Validators.required],
|
||||
phone: ['', Validators.required],
|
||||
customer1: ['', Validators.required]
|
||||
});
|
||||
|
||||
this.eventRegistration2 = this.formBuilder.group({
|
||||
fullname: ['', Validators.required],
|
||||
title: ['', Validators.required],
|
||||
company: ['', Validators.required],
|
||||
email: ['', Validators.required],
|
||||
phone: ['', Validators.required],
|
||||
customer2: ['', Validators.required]
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
reloadProjectInfo() {
|
||||
this.blockUIProjectInfo.start('Loading..');
|
||||
|
||||
setTimeout(() => {
|
||||
this.blockUIProjectInfo.stop();
|
||||
}, 2500);
|
||||
}
|
||||
|
||||
reloadUserProfile() {
|
||||
this.blockUIUserProfile.start('Loading..');
|
||||
|
||||
setTimeout(() => {
|
||||
this.blockUIUserProfile.stop();
|
||||
}, 2500);
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
import { FormLayoutsModule } from './form-layouts.module';
|
||||
|
||||
describe('FormLayoutsModule', () => {
|
||||
let formLayoutsModule: FormLayoutsModule;
|
||||
|
||||
beforeEach(() => {
|
||||
formLayoutsModule = new FormLayoutsModule();
|
||||
});
|
||||
|
||||
it('should create an instance', () => {
|
||||
expect(formLayoutsModule).toBeTruthy();
|
||||
});
|
||||
});
|
||||
70
src/app/content/forms/form-layouts/form-layouts.module.ts
Normal file
70
src/app/content/forms/form-layouts/form-layouts.module.ts
Normal file
@@ -0,0 +1,70 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
|
||||
import { BasicFormsComponent } from './basic-forms/basic-forms.component';
|
||||
import { HorizontalFormsComponent } from './horizontal-forms/horizontal-forms.component';
|
||||
import { HiddenLabelsComponent } from './hidden-labels/hidden-labels.component';
|
||||
import { FormActionsComponent } from './form-actions/form-actions.component';
|
||||
import { RowSeparatorComponent } from './row-separator/row-separator.component';
|
||||
import { BorderedComponent } from './bordered/bordered.component';
|
||||
import { StripedLabelsComponent } from './striped-labels/striped-labels.component';
|
||||
import { StripedRowsComponent } from './striped-rows/striped-rows.component';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { CardModule } from '../../partials/general/card/card.module';
|
||||
import { BreadcrumbModule } from 'src/app/_layout/breadcrumb/breadcrumb.module';
|
||||
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
|
||||
import { BlockUIModule } from 'ng-block-ui';
|
||||
import { BlockTemplateComponent } from '../../../_layout/blockui/block-template.component';
|
||||
import { MatchHeightModule } from '../../partials/general/match-height/match-height.module';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
CardModule,
|
||||
BreadcrumbModule,
|
||||
FormsModule,
|
||||
ReactiveFormsModule,
|
||||
MatchHeightModule,
|
||||
NgbModule,
|
||||
BlockUIModule.forRoot({
|
||||
template: BlockTemplateComponent
|
||||
}),
|
||||
RouterModule.forChild([{
|
||||
path: 'basic-forms',
|
||||
component: BasicFormsComponent
|
||||
},
|
||||
{
|
||||
path: 'horizontal-forms',
|
||||
component: HorizontalFormsComponent
|
||||
},
|
||||
{
|
||||
path: 'hidden-labels',
|
||||
component: HiddenLabelsComponent
|
||||
},
|
||||
{
|
||||
path: 'form-actions',
|
||||
component: FormActionsComponent
|
||||
},
|
||||
{
|
||||
path: 'row-separator',
|
||||
component: RowSeparatorComponent
|
||||
},
|
||||
{
|
||||
path: 'bordered',
|
||||
component: BorderedComponent
|
||||
},
|
||||
{
|
||||
path: 'striped-rows',
|
||||
component: StripedRowsComponent
|
||||
},
|
||||
{
|
||||
path: 'striped-labels',
|
||||
component: StripedLabelsComponent
|
||||
},
|
||||
])
|
||||
],
|
||||
declarations: [BasicFormsComponent, HorizontalFormsComponent, HiddenLabelsComponent, FormActionsComponent,
|
||||
RowSeparatorComponent, BorderedComponent, StripedLabelsComponent, StripedRowsComponent],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class FormLayoutsModule { }
|
||||
@@ -0,0 +1,141 @@
|
||||
:host ::ng-deep .block-ui-wrapper {
|
||||
background: rgba(255, 249, 249, 0.5) !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .btn-light:not(:disabled):not(.disabled):active {
|
||||
color: unset !important;
|
||||
background-color: unset !important;
|
||||
border-color: #d3d9df !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .btn-light:hover:not(.disabled):active {
|
||||
background-color: #e2e6ea !important;
|
||||
border-color: #dae0e5 !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .btn-light {
|
||||
color: unset !important;
|
||||
background-color: unset !important;
|
||||
border-color: unset !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .bg-primary {
|
||||
background-color: #007bff !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .text-white {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .custom-day {
|
||||
text-align: center;
|
||||
padding: .185rem .25rem;
|
||||
display: inline-block;
|
||||
height: 2rem;
|
||||
width: 2rem;
|
||||
}
|
||||
|
||||
:host ::ng-deep .custom-day:active {
|
||||
color: #6d7183 !important;
|
||||
background-color: #fff !important;
|
||||
border-block-color: rgb(2, 117, 216) !important;
|
||||
|
||||
}
|
||||
|
||||
.bg-light {
|
||||
background-color: #f8f9fa !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .hidden {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.ngb-dp-weekday {
|
||||
color: #17a2b8;
|
||||
}
|
||||
|
||||
.ngb-dp-week-number,
|
||||
.ngb-dp-weekday {
|
||||
line-height: 2rem;
|
||||
text-align: center;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.ngb-datepicker-month-view {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngb-dp-header {
|
||||
background-color: var(--light) !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngb-dp-weekdays {
|
||||
background-color: var(--light);
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngb-dp-month-name {
|
||||
background-color: var(--light);
|
||||
}
|
||||
|
||||
.small {
|
||||
font-size: 80%;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.ngb-dp-day {
|
||||
cursor: pointer !important;
|
||||
}
|
||||
|
||||
.ngb-dp-month {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.btn-light:hover {
|
||||
color: #212529 !important;
|
||||
background-color: #e2e6ea !important;
|
||||
border-color: #dae0e5 !important;
|
||||
}
|
||||
|
||||
.ngb-datepicker-month-view {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.ngb-dp-header {
|
||||
border-bottom: 0;
|
||||
border-radius: .25rem .25rem 0 0;
|
||||
padding-top: .25rem;
|
||||
}
|
||||
|
||||
.ngb-dp-day,
|
||||
.ngb-dp-week-number,
|
||||
.ngb-dp-weekday {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
}
|
||||
|
||||
.custom-day {
|
||||
text-align: center;
|
||||
padding: 0.185rem 0.25rem;
|
||||
display: inline-block;
|
||||
height: 2rem;
|
||||
width: 2rem;
|
||||
}
|
||||
|
||||
.custom-day.focused {
|
||||
background-color: #e6e6e6;
|
||||
}
|
||||
|
||||
.custom-day.range,
|
||||
.custom-day:hover {
|
||||
background-color: rgb(2, 117, 216);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.custom-day.faded {
|
||||
background-color: rgba(2, 117, 216, 0.5);
|
||||
}
|
||||
|
||||
:host ::ng-deep .block-ui-wrapper {
|
||||
background: rgba(255, 249, 249, 0.5) !important;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,630 @@
|
||||
<div class="app-content content">
|
||||
<div class="content-wrapper">
|
||||
<div class="content-header row mb-1">
|
||||
<app-breadcrumb class="col-12" [breadcrumb]="breadcrumb"></app-breadcrumb>
|
||||
</div>
|
||||
<div class="content-body">
|
||||
<!-- Hidden label form layout section start -->
|
||||
<section id="hidden-label-form-layouts">
|
||||
<div class="row" matchHeight="card">
|
||||
<div class="col-md-6" *blockUI="'projectInfo'; message: 'Loading'">
|
||||
<m-card [options]="options" (reloadFunction)="reloadProjectInfo($event)">
|
||||
<ng-container mCardHeaderTitle>
|
||||
Project Info
|
||||
</ng-container>
|
||||
<ng-container mCardBody>
|
||||
<div class="card-text">
|
||||
<p>This is the most basic and default form having form sections.To add form section user <code>.form-section</code> class with any
|
||||
heading tags. This form has the buttons on the bottom left corner which is the default position.</p>
|
||||
</div>
|
||||
<form [formGroup]="projectInfo">
|
||||
<div class="form-body">
|
||||
<h4 class="form-section"><i class="feather ft-user"></i> Personal Info</h4>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<input type="text" id="projectinput1" class="form-control" formControlName="firstName"
|
||||
placeholder="First Name">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<input type="text" id="projectinput2" class="form-control" formControlName="lastName"
|
||||
placeholder="Last Name">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<input type="text" id="projectinput3" class="form-control" formControlName="email"
|
||||
placeholder="E-mail">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<input type="text" id="projectinput4" class="form-control" formControlName="phone"
|
||||
placeholder="Phone">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h4 class="form-section"><i class="la la-paperclip"></i> Requirements</h4>
|
||||
<div class="form-group">
|
||||
<input type="text" id="companyName" class="form-control" formControlName="company"
|
||||
placeholder="Company Name">
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<select id="projectinput5" class="form-control" formControlName="interestedIn">
|
||||
<option *ngFor="let interest of interestedIn" [value]="interest">{{interest}}</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<select id="projectinput6" class="form-control" formControlName="budget">
|
||||
<option *ngFor="let range of budget" [value]="range">{{range}}</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label id="projectinput7" class="file center-block">
|
||||
<input type="file" id="file" formControlName="selectFile">
|
||||
<span class="file-custom"></span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<textarea id="projectinput8" rows="5" class="form-control" formControlName="aboutProject"
|
||||
placeholder="About Project"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-actions">
|
||||
<button type="button" class="btn btn-warning mr-1">
|
||||
<i class="feather ft-x"></i> Cancel
|
||||
</button>
|
||||
<button type="submit" class="btn btn-primary">
|
||||
<i class="la la-check"></i> Save
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</ng-container>
|
||||
</m-card>
|
||||
</div>
|
||||
<div class="col-md-6" *blockUI="'userProfile'; message: 'Loading'">
|
||||
<m-card [options]="options" (reloadFunction)="reloadUserProfile($event)">
|
||||
<ng-container mCardHeaderTitle>
|
||||
User Profile
|
||||
</ng-container>
|
||||
<ng-container mCardBody>
|
||||
<div class="card-text">
|
||||
<p>You can always change the border color
|
||||
of the form controls using <code>border-*</code> class. In this example we have user
|
||||
<code>border-primary</code>
|
||||
class for form controls. Form action buttons are on the bottom right position.</p>
|
||||
</div>
|
||||
<form [formGroup]="userProfile">
|
||||
<div class="form-body">
|
||||
<h4 class="form-section"><i class="la la-eye"></i> About User</h4>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<input type="text" id="userinput1" class="form-control border-primary"
|
||||
placeholder="First Name" formControlName="firstName">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<input type="text" id="userinput2" class="form-control border-primary" placeholder="Last Name"
|
||||
formControlName="lastName">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<input type="text" id="userinput3" class="form-control border-primary" placeholder="Username"
|
||||
formControlName="userName">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<input type="text" id="userinput4" class="form-control border-primary" placeholder="Nick Name"
|
||||
formControlName="nickName">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h4 class="form-section"><i class="feather ft-mail"></i> Contact Info & Bio</h4>
|
||||
<div class="form-group">
|
||||
<input class="form-control border-primary" type="email" placeholder="email" id="userinput5"
|
||||
formControlName="email">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<input class="form-control border-primary" type="url" placeholder="http://" id="userinput6"
|
||||
formControlName="website">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<input class="form-control border-primary" id="userinput7" type="tel" formControlName="phone"
|
||||
placeholder="Contact Number">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<textarea id="userinput8" rows="5" class="form-control border-primary" formControlName="bio"
|
||||
placeholder="Bio"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-actions text-right">
|
||||
<button type="button" class="btn btn-warning mr-1">
|
||||
<i class="feather ft-x"></i> Cancel
|
||||
</button>
|
||||
<button type="submit" class="btn btn-primary">
|
||||
<i class="la la-check"></i> Save
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</ng-container>
|
||||
</m-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row" matchHeight="card">
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title" id="hidden-label-tooltips">Issue Tracking</h4>
|
||||
</div>
|
||||
<div class="card-content collpase show">
|
||||
<div class="card-body">
|
||||
<div class="card-text">
|
||||
<p>This form shows tooltips on hover to
|
||||
provide useful information while user is filling the form. Use data attributes like toggle
|
||||
<code>data-toggle</code>,
|
||||
trigger <code>data-trigger</code>, placement <code>data-placement</code>, title
|
||||
<code>data-title</code>
|
||||
to show tooltips on form controls.</p>
|
||||
</div>
|
||||
<form [formGroup]="issueTracking">
|
||||
<div class="form-body">
|
||||
<div class="form-group">
|
||||
<input type="text" id="issueinput1" class="form-control" placeholder="issue title"
|
||||
ngbTooltip="Issue Title" placement="top" formControlName="issueTitle">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<input type="text" id="issueinput2" class="form-control" placeholder="opened by"
|
||||
ngbTooltip="Opened By" placement="top" formControlName="openedBy">
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<div class="input-group">
|
||||
<input class="form-control" placeholder="yyyy-mm-dd" name="dp"
|
||||
ngbDatepicker #d1="ngbDatepicker">
|
||||
<div class="input-group-append">
|
||||
<div class="input-group-text" (click)="d1.toggle()">
|
||||
<i class="fa fa-calendar" style="cursor: pointer;"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<div class="input-group">
|
||||
<input class="form-control" placeholder="yyyy-mm-dd" name="dp"
|
||||
ngbDatepicker #d2="ngbDatepicker">
|
||||
<div class="input-group-append">
|
||||
<div class="input-group-text" (click)="d2.toggle()">
|
||||
<i class="fa fa-calendar" style="cursor: pointer;"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<select id="issueinput5" class="form-control" ngbTooltip="Priority" placement="top"
|
||||
formControlName="priority">
|
||||
<option *ngFor="let prio of priority" [value]="prio">{{prio}}</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<select id="issueinput6" class="form-control" ngbTooltip="Status" placement="top"
|
||||
formControlName="status">
|
||||
<option *ngFor="let stat of status" [value]="stat">{{stat}}</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<textarea id="issueinput8" rows="5" class="form-control" placeholder="comments"
|
||||
ngbTooltip="Comments" placement="top" formControlName="comment"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-actions">
|
||||
<button type="button" class="btn btn-warning mr-1">
|
||||
<i class="feather ft-x"></i> Cancel
|
||||
</button>
|
||||
<button type="submit" class="btn btn-primary">
|
||||
<i class="la la-check"></i> Save
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title" id="hidden-label-icons">Timesheet</h4>
|
||||
</div>
|
||||
<div class="card-content collpase show">
|
||||
<div class="card-body">
|
||||
<div class="card-text">
|
||||
<p>This form shows the use of icons with
|
||||
form controls. Define the position of the icon using <code>has-icon-left</code> or
|
||||
<code>has-icon-right</code>
|
||||
class. Use <code>icon-*</code> class to define the icon for the form control. See Icons sections
|
||||
for the list of icons you can use. </p>
|
||||
</div>
|
||||
<form [formGroup]="timeSheet">
|
||||
<div class="form-body">
|
||||
<div class="form-group">
|
||||
<div class="position-relative has-icon-left">
|
||||
<input type="text" id="timesheetinput1" class="form-control" placeholder="employee name"
|
||||
formControlName="employeeName">
|
||||
<div class="form-control-position">
|
||||
<i class="feather ft-user"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="position-relative has-icon-left">
|
||||
<input type="text" id="timesheetinput2" class="form-control" placeholder="project name"
|
||||
formControlName="projectname">
|
||||
<div class="form-control-position">
|
||||
<i class="la la-briefcase"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="position-relative has-icon-left">
|
||||
<div class="input-group">
|
||||
<input class="form-control" placeholder="yyyy-mm-dd" name="dp"
|
||||
ngbDatepicker #d4="ngbDatepicker">
|
||||
<div class="input-group-append">
|
||||
<div class="input-group-text" (click)="d4.toggle()">
|
||||
<i class="fa fa-calendar" style="cursor: pointer;"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-control-position">
|
||||
<i class="feather ft-message-square"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="input-group mt-0">
|
||||
<div class="input-group-prepend">
|
||||
<span class="input-group-text">$</span>
|
||||
</div>
|
||||
<input type="text" class="form-control" placeholder="Rate Per Hour"
|
||||
formControlName="ratePerHour">
|
||||
<div class="input-group-append">
|
||||
<span class="input-group-text">.00</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<div class="position-relative has-icon-left">
|
||||
<input type="time" id="timesheetinput5" class="form-control" formControlName="startTime">
|
||||
<div class="form-control-position">
|
||||
<i class="feather ft-clock"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<div class="position-relative has-icon-left">
|
||||
<input type="time" id="timesheetinput6" class="form-control" formControlName="endTime">
|
||||
<div class="form-control-position">
|
||||
<i class="feather ft-clock"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="position-relative has-icon-left">
|
||||
<textarea id="timesheetinput7" rows="5" class="form-control" formControlName="notes"
|
||||
placeholder="notes"></textarea>
|
||||
<div class="form-control-position">
|
||||
<i class="feather ft-file"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-actions right">
|
||||
<button type="button" class="btn btn-warning mr-1">
|
||||
<i class="feather ft-x"></i> Cancel
|
||||
</button>
|
||||
<button type="submit" class="btn btn-primary">
|
||||
<i class="la la-check"></i> Save
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row" matchHeight="card">
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title" id="hidden-label-round-controls">Complaint Form</h4>
|
||||
</div>
|
||||
<div class="card-content collpase show">
|
||||
<div class="card-body">
|
||||
<div class="card-text">
|
||||
<p>This is a variation to the default form
|
||||
control styling. In this example all the form controls has round styling. To apply round style
|
||||
add class <code>round</code> to any form control.</p>
|
||||
</div>
|
||||
<form [formGroup]="complaintForm">
|
||||
<div class="form-body">
|
||||
<div class="form-group">
|
||||
<input type="text" id="complaintinput1" class="form-control round" placeholder="company name"
|
||||
formControlName="companyName">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<input type="text" id="complaintinput2" class="form-control round" placeholder="employee name"
|
||||
formControlName="employeeName">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="input-group">
|
||||
<input class="form-control" placeholder="yyyy-mm-dd" name="dp"
|
||||
ngbDatepicker #d3="ngbDatepicker">
|
||||
<div class="input-group-append">
|
||||
<div class="input-group-text" (click)="d3.toggle()">
|
||||
<i class="fa fa-calendar" style="cursor: pointer;"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<input type="text" id="complaintinput4" class="form-control round" placeholder="supervisor name"
|
||||
formControlName="supervisorName">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<textarea id="complaintinput5" rows="5" class="form-control round"
|
||||
formControlName="complaintDetails" placeholder="details"></textarea>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<input type="text" id="complaintinput6" class="form-control round" placeholder="signature"
|
||||
formControlName="signature">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-actions">
|
||||
<button type="button" class="btn btn-warning mr-1">
|
||||
<i class="feather ft-x"></i> Cancel
|
||||
</button>
|
||||
<button type="submit" class="btn btn-primary">
|
||||
<i class="la la-check"></i> Save
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title" id="hidden-label-square-controls">Donation</h4>
|
||||
</div>
|
||||
<div class="card-content collpase show">
|
||||
<div class="card-body">
|
||||
<div class="card-text">
|
||||
<p>This is another variation to the
|
||||
default form control styling. In this example all the form controls has square styling. To apply
|
||||
square style add class <code>square</code> to any form control.</p>
|
||||
</div>
|
||||
<form [formGroup]="donation">
|
||||
<div class="form-body">
|
||||
<div class="form-group">
|
||||
<input type="text" id="donationinput1" class="form-control square" placeholder="name"
|
||||
formControlName="fullName">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<input type="email" id="donationinput2" class="form-control square" placeholder="email"
|
||||
formControlName="email">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<input type="tel" id="donationinput3" class="form-control square" formControlName="contact">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<input type="text" id="donationinput4" class="form-control square"
|
||||
placeholder="type of donation" formControlName="donationType">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="input-group mt-0">
|
||||
<div class="input-group-prepend">
|
||||
<span class="input-group-text">$</span>
|
||||
</div>
|
||||
<input type="text" class="form-control square" placeholder="amount"
|
||||
aria-label="Amount (to the nearest dollar)" formControlName="amount">
|
||||
<div class="input-group-append">
|
||||
<span class="input-group-text">.00</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<textarea id="donationinput7" rows="5" class="form-control square" formControlName="comment"
|
||||
placeholder="comments"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-actions right">
|
||||
<button type="button" class="btn btn-warning mr-1">
|
||||
<i class="feather ft-x"></i> Cancel
|
||||
</button>
|
||||
<button type="submit" class="btn btn-primary">
|
||||
<i class="la la-check"></i> Save
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title" id="hidden-label-form-center">Event Registration</h4>
|
||||
</div>
|
||||
<div class="card-content collpase show">
|
||||
<div class="card-body">
|
||||
<div class="card-text">
|
||||
<p>This example shows a way to center your
|
||||
form in the card. Here we have used <code>col-md-6 ml-auto</code> classes to center the form in a
|
||||
full width card. User can always change those classes according to width and offset requirements.
|
||||
This example also uses form action buttons in the center bottom position of the card.</p>
|
||||
</div>
|
||||
<form [formGroup]="eventRegistration1">
|
||||
<div class="row justify-content-md-center">
|
||||
<div class="col-md-6">
|
||||
<div class="form-body">
|
||||
<div class="form-group">
|
||||
<input type="text" id="eventInput1" class="form-control" placeholder="name"
|
||||
formControlName="fullname">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<input type="text" id="eventInput2" class="form-control" placeholder="title"
|
||||
formControlName="title">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<input type="text" id="eventInput3" class="form-control" placeholder="company"
|
||||
formControlName="company">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<input type="email" id="eventInput4" class="form-control" placeholder="email"
|
||||
formControlName="email">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<input type="tel" id="eventInput5" class="form-control" formControlName="phone"
|
||||
placeholder="contact number">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="input-group">
|
||||
<div class="d-inline-block custom-control custom-radio mr-1">
|
||||
<input type="radio" class="custom-control-input" value="yes" id="yes"
|
||||
formControlName="customer1">
|
||||
<label class="custom-control-label" for="yes">Yes</label>
|
||||
</div>
|
||||
<div class="d-inline-block custom-control custom-radio">
|
||||
<input type="radio" class="custom-control-input" value="no" id="no"
|
||||
formControlName="customer1">
|
||||
<label class="custom-control-label" for="no">No</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-actions text-center">
|
||||
<button type="button" class="btn btn-warning mr-1">
|
||||
<i class="feather ft-x"></i> Cancel
|
||||
</button>
|
||||
<button type="submit" class="btn btn-primary">
|
||||
<i class="la la-check"></i> Save
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row justify-content-md-center">
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title" id="hidden-label-card-center">Event Registration</h4>
|
||||
</div>
|
||||
<div class="card-content collpase show">
|
||||
<div class="card-body">
|
||||
|
||||
<div class="card-text">
|
||||
<p>This example shows a ways to center your
|
||||
card with form. Here we have used <code>col-md-6 ml-auto</code> classes to center the card as its
|
||||
not full width. User can always change those classes according to width and offset requirements.
|
||||
This example also uses form action buttons in the center bottom position of the card.</p>
|
||||
</div>
|
||||
|
||||
<form [formGroup]="eventRegistration2">
|
||||
<div class="row justify-content-md-center">
|
||||
<div class="col-md-12">
|
||||
<div class="form-body">
|
||||
<div class="form-group">
|
||||
<input type="text" id="eventInput1" class="form-control" placeholder="name"
|
||||
formControlName="fullname">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<input type="text" id="eventInput2" class="form-control" placeholder="title"
|
||||
formControlName="title">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<input type="text" id="eventInput3" class="form-control" placeholder="company"
|
||||
formControlName="company">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<input type="email" id="eventInput4" class="form-control" placeholder="email"
|
||||
formControlName="email">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<input type="tel" id="eventInput5" class="form-control" formControlName="phone"
|
||||
placeholder="contact number">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="input-group">
|
||||
<div class="d-inline-block custom-control custom-radio mr-1">
|
||||
<input type="radio" class="custom-control-input" value="yes2" id="yes2"
|
||||
formControlName="customer2">
|
||||
<label class="custom-control-label" for="yes2">Yes</label>
|
||||
</div>
|
||||
<div class="d-inline-block custom-control custom-radio">
|
||||
<input type="radio" class="custom-control-input" value="no2" id="no2"
|
||||
formControlName="customer2">
|
||||
<label class="custom-control-label" for="no2">No</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-actions text-center">
|
||||
<button type="button" class="btn btn-warning mr-1">
|
||||
<i class="feather ft-x"></i> Cancel
|
||||
</button>
|
||||
<button type="submit" class="btn btn-primary">
|
||||
<i class="la la-check"></i> Save
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- // Hidden label form layout section end -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- ////////////////////////////////////////////////////////////////////////////-->
|
||||
@@ -0,0 +1,25 @@
|
||||
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
|
||||
|
||||
import { HiddenLabelsComponent } from './hidden-labels.component';
|
||||
|
||||
describe('HiddenLabelsComponent', () => {
|
||||
let component: HiddenLabelsComponent;
|
||||
let fixture: ComponentFixture<HiddenLabelsComponent>;
|
||||
|
||||
beforeEach(waitForAsync(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ HiddenLabelsComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(HiddenLabelsComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,156 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { FormGroup, Validators, FormBuilder } from '@angular/forms';
|
||||
import { NgBlockUI, BlockUI } from 'ng-block-ui';
|
||||
|
||||
@Component({
|
||||
selector: 'app-hidden-labels',
|
||||
templateUrl: './hidden-labels.component.html',
|
||||
styleUrls: ['./hidden-labels.component.css']
|
||||
})
|
||||
export class HiddenLabelsComponent implements OnInit {
|
||||
|
||||
@BlockUI('projectInfo') blockUIProjectInfo: NgBlockUI;
|
||||
@BlockUI('userProfile') blockUIUserProfile: NgBlockUI;
|
||||
|
||||
public breadcrumb: any;
|
||||
|
||||
options = {
|
||||
close: true,
|
||||
expand: true,
|
||||
minimize: true,
|
||||
reload: true
|
||||
};
|
||||
|
||||
interestedIn = ['design', 'development', 'illustration', 'branding', 'video'];
|
||||
budget = ['less than 5000$', '5000$ - 10000$', '10000$ - 20000$', 'more than 20000$'];
|
||||
priority = ['Low', 'Medium', 'High'];
|
||||
status = ['Not Started', 'Started', 'Fixed'];
|
||||
|
||||
projectInfo: FormGroup;
|
||||
userProfile: FormGroup;
|
||||
issueTracking: FormGroup;
|
||||
timeSheet: FormGroup;
|
||||
complaintForm: FormGroup;
|
||||
donation: FormGroup;
|
||||
eventRegistration1: FormGroup;
|
||||
eventRegistration2: FormGroup;
|
||||
|
||||
constructor(private formBuilder: FormBuilder) { }
|
||||
|
||||
ngOnInit() {
|
||||
this.breadcrumb = {
|
||||
'mainlabel': 'Hidden Label Forms',
|
||||
'links': [
|
||||
{
|
||||
'name': 'Home',
|
||||
'isLink': true,
|
||||
'link': '/dashboard/sales'
|
||||
},
|
||||
{
|
||||
'name': 'Form Layouts',
|
||||
'isLink': true,
|
||||
'link': '#'
|
||||
},
|
||||
{
|
||||
'name': 'Hidden Label Forms',
|
||||
'isLink': true
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
this.projectInfo = this.formBuilder.group({
|
||||
firstName: ['', Validators.required],
|
||||
lastName: ['', Validators.required],
|
||||
email: ['', Validators.required],
|
||||
phone: ['', Validators.required],
|
||||
company: ['', Validators.required],
|
||||
interestedIn: ['', Validators.required],
|
||||
budget: ['', Validators.required],
|
||||
selectFile: ['', Validators.required],
|
||||
aboutProject: ['', Validators.required],
|
||||
});
|
||||
|
||||
this.userProfile = this.formBuilder.group({
|
||||
firstName: ['', Validators.required],
|
||||
lastName: ['', Validators.required],
|
||||
userName: ['', Validators.required],
|
||||
nickName: ['', Validators.required],
|
||||
email: ['', Validators.required],
|
||||
website: ['', Validators.required],
|
||||
phone: ['', Validators.required],
|
||||
bio: ['', Validators.required]
|
||||
});
|
||||
|
||||
this.issueTracking = this.formBuilder.group({
|
||||
issueTitle: ['', Validators.required],
|
||||
openedBy: ['', Validators.required],
|
||||
dateOpened: ['', Validators.required],
|
||||
dateFixed: ['', Validators.required],
|
||||
priority: ['', Validators.required],
|
||||
status: ['', Validators.required],
|
||||
comment: ['', Validators.required]
|
||||
});
|
||||
|
||||
this.timeSheet = this.formBuilder.group({
|
||||
employeeName: ['', Validators.required],
|
||||
projectname: ['', Validators.required],
|
||||
date: ['', Validators.required],
|
||||
ratePerHour: ['', Validators.required],
|
||||
startTime: ['', Validators.required],
|
||||
endTime: ['', Validators.required],
|
||||
notes: ['', Validators.required]
|
||||
});
|
||||
|
||||
this.complaintForm = this.formBuilder.group({
|
||||
companyName: ['', Validators.required],
|
||||
employeeName: ['', Validators.required],
|
||||
complaintDate: ['', Validators.required],
|
||||
supervisorName: ['', Validators.required],
|
||||
complaintDetails: ['', Validators.required],
|
||||
signature: ['', Validators.required]
|
||||
});
|
||||
|
||||
this.donation = this.formBuilder.group({
|
||||
fullName: ['', Validators.required],
|
||||
email: ['', Validators.required],
|
||||
contact: ['', Validators.required],
|
||||
donationType: ['', Validators.required],
|
||||
amount: ['', Validators.required],
|
||||
comment: ['', Validators.required]
|
||||
});
|
||||
|
||||
this.eventRegistration1 = this.formBuilder.group({
|
||||
fullname: ['', Validators.required],
|
||||
title: ['', Validators.required],
|
||||
company: ['', Validators.required],
|
||||
email: ['', Validators.required],
|
||||
phone: ['', Validators.required],
|
||||
customer1: ['', Validators.required]
|
||||
});
|
||||
|
||||
this.eventRegistration2 = this.formBuilder.group({
|
||||
fullname: ['', Validators.required],
|
||||
title: ['', Validators.required],
|
||||
company: ['', Validators.required],
|
||||
email: ['', Validators.required],
|
||||
phone: ['', Validators.required],
|
||||
customer2: ['', Validators.required]
|
||||
});
|
||||
}
|
||||
|
||||
reloadProjectInfo() {
|
||||
this.blockUIProjectInfo.start('Loading..');
|
||||
|
||||
setTimeout(() => {
|
||||
this.blockUIProjectInfo.stop();
|
||||
}, 2500);
|
||||
}
|
||||
|
||||
reloadUserProfile() {
|
||||
this.blockUIUserProfile.start('Loading..');
|
||||
|
||||
setTimeout(() => {
|
||||
this.blockUIUserProfile.stop();
|
||||
}, 2500);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,140 @@
|
||||
:host ::ng-deep .block-ui-wrapper {
|
||||
background: rgba(255, 249, 249, 0.5) !important;
|
||||
}
|
||||
:host ::ng-deep .btn-light:not(:disabled):not(.disabled):active {
|
||||
color: unset !important;
|
||||
background-color: unset !important;
|
||||
border-color: #d3d9df !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .btn-light:hover:not(.disabled):active {
|
||||
background-color: #e2e6ea !important;
|
||||
border-color: #dae0e5 !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .btn-light {
|
||||
color: unset !important;
|
||||
background-color: unset !important;
|
||||
border-color: unset !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .bg-primary {
|
||||
background-color: #007bff !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .text-white {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .custom-day {
|
||||
text-align: center;
|
||||
padding: .185rem .25rem;
|
||||
display: inline-block;
|
||||
height: 2rem;
|
||||
width: 2rem;
|
||||
}
|
||||
|
||||
:host ::ng-deep .custom-day:active {
|
||||
color: #6d7183 !important;
|
||||
background-color: #fff !important;
|
||||
border-block-color: rgb(2, 117, 216) !important;
|
||||
|
||||
}
|
||||
|
||||
.bg-light {
|
||||
background-color: #f8f9fa !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .hidden {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.ngb-dp-weekday {
|
||||
color: #17a2b8;
|
||||
}
|
||||
|
||||
.ngb-dp-week-number,
|
||||
.ngb-dp-weekday {
|
||||
line-height: 2rem;
|
||||
text-align: center;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.ngb-datepicker-month-view {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngb-dp-header {
|
||||
background-color: var(--light) !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngb-dp-weekdays {
|
||||
background-color: var(--light);
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngb-dp-month-name {
|
||||
background-color: var(--light);
|
||||
}
|
||||
|
||||
.small {
|
||||
font-size: 80%;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.ngb-dp-day {
|
||||
cursor: pointer !important;
|
||||
}
|
||||
|
||||
.ngb-dp-month {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.btn-light:hover {
|
||||
color: #212529 !important;
|
||||
background-color: #e2e6ea !important;
|
||||
border-color: #dae0e5 !important;
|
||||
}
|
||||
|
||||
.ngb-datepicker-month-view {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.ngb-dp-header {
|
||||
border-bottom: 0;
|
||||
border-radius: .25rem .25rem 0 0;
|
||||
padding-top: .25rem;
|
||||
}
|
||||
|
||||
.ngb-dp-day,
|
||||
.ngb-dp-week-number,
|
||||
.ngb-dp-weekday {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
}
|
||||
|
||||
.custom-day {
|
||||
text-align: center;
|
||||
padding: 0.185rem 0.25rem;
|
||||
display: inline-block;
|
||||
height: 2rem;
|
||||
width: 2rem;
|
||||
}
|
||||
|
||||
.custom-day.focused {
|
||||
background-color: #e6e6e6;
|
||||
}
|
||||
|
||||
.custom-day.range,
|
||||
.custom-day:hover {
|
||||
background-color: rgb(2, 117, 216);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.custom-day.faded {
|
||||
background-color: rgba(2, 117, 216, 0.5);
|
||||
}
|
||||
|
||||
:host ::ng-deep .block-ui-wrapper {
|
||||
background: rgba(255, 249, 249, 0.5) !important;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,423 @@
|
||||
<div class="app-content content">
|
||||
<div class="content-wrapper">
|
||||
<div class="content-header row mb-1">
|
||||
<app-breadcrumb class="col-12" [breadcrumb]="breadcrumb"></app-breadcrumb>
|
||||
</div>
|
||||
<div class="content-body">
|
||||
<!-- Basic form layout section start -->
|
||||
<section id="horizontal-form-layouts">
|
||||
<div class="row">
|
||||
<div class="col-md-12" *blockUI="'projectInfo'; message: 'Loading'">
|
||||
<m-card [options]="options" (reloadFunction)="reloadProjectInfo($event)">
|
||||
<ng-container mCardHeaderTitle>
|
||||
Project Info
|
||||
</ng-container>
|
||||
<ng-container mCardBody>
|
||||
<div class="card-text">
|
||||
<p>This is the basic horizontal form with labels on left and form controls on right in one line.
|
||||
Add <code>.form-horizontal</code> class to the form tag to have horizontal form styling. To
|
||||
define form sections use <code>form-section</code> class with any heading tags.</p>
|
||||
</div>
|
||||
<form class="form form-horizontal" [formGroup]="projectInfo">
|
||||
<div class="form-body">
|
||||
<h4 class="form-section"><i class="feather ft-user"></i> Personal Info</h4>
|
||||
<div class="form-group row mx-auto">
|
||||
<label class="col-md-3 label-control" for="projectinput1">First Name</label>
|
||||
<div class="col-md-9">
|
||||
<input type="text" id="projectinput1" class="form-control" formControlName="firstName"
|
||||
placeholder="First Name">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row mx-auto">
|
||||
<label class="col-md-3 label-control" for="projectinput2">Last Name</label>
|
||||
<div class="col-md-9">
|
||||
<input type="text" id="projectinput2" class="form-control" formControlName="lastName"
|
||||
placeholder="Last Name">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row mx-auto">
|
||||
<label class="col-md-3 label-control" for="projectinput3">E-mail</label>
|
||||
<div class="col-md-9">
|
||||
<input type="text" id="projectinput3" class="form-control" formControlName="email"
|
||||
placeholder="E-mail">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row mx-auto last">
|
||||
<label class="col-md-3 label-control" for="projectinput4">Contact Number</label>
|
||||
<div class="col-md-9">
|
||||
<input type="text" id="projectinput4" class="form-control" formControlName="phone"
|
||||
placeholder="Phone">
|
||||
</div>
|
||||
</div>
|
||||
<h4 class="form-section"><i class="feather ft-clipboard"></i> Requirements</h4>
|
||||
<div class="form-group row mx-auto">
|
||||
<label class="col-md-3 label-control" for="projectinput5">Company</label>
|
||||
<div class="col-md-9">
|
||||
<input type="text" id="companyName" class="form-control" formControlName="company"
|
||||
placeholder="Company Name">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row mx-auto">
|
||||
<label class="col-md-3 label-control" for="projectinput6">Interested in</label>
|
||||
<div class="col-md-9">
|
||||
<select id="projectinput5" class="form-control" formControlName="interestedIn">
|
||||
<option *ngFor="let interest of interestedIn" [value]="interest">{{interest}}</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row mx-auto">
|
||||
<label class="col-md-3 label-control" for="projectinput7">Budget</label>
|
||||
<div class="col-md-9">
|
||||
<select id="projectinput6" class="form-control" formControlName="budget">
|
||||
<option *ngFor="let range of budget" [value]="range">{{range}}</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row mx-auto">
|
||||
<label class="col-md-3 label-control">Select File</label>
|
||||
<div class="col-md-9">
|
||||
<label id="projectinput8" class="file center-block">
|
||||
<input type="file" id="file" formControlName="selectFile">
|
||||
<span class="file-custom"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row last mx-auto">
|
||||
<label class="col-md-3 label-control" for="projectinput9">About Project</label>
|
||||
<div class="col-md-9">
|
||||
<textarea id="projectinput8" rows="5" class="form-control" formControlName="aboutProject"
|
||||
placeholder="About Project"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-actions">
|
||||
<button type="button" class="btn btn-warning mr-1">
|
||||
<i class="feather ft-x"></i> Cancel
|
||||
</button>
|
||||
<button type="submit" class="btn btn-primary">
|
||||
<i class="la la-check"></i> Save
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</ng-container>
|
||||
</m-card>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-12" *blockUI="'userProfile'; message: 'Loading'">
|
||||
<m-card [options]="options" (reloadFunction)="reloadUserProfile($event)">
|
||||
<ng-container mCardHeaderTitle>
|
||||
User Profile
|
||||
</ng-container>
|
||||
<ng-container mCardBody>
|
||||
<div class="card-text">
|
||||
<p>This is 2-columns horizontal form with labels on left and form controls on right in one line.
|
||||
Add <code>.form-horizontal</code> class to the form tag to have horizontal form styling. User can
|
||||
also change the border color and background color of the form control. Add <code>border-*</code>
|
||||
class to change border color and <code>bg-*</code> class to change background color of the form
|
||||
control.</p>
|
||||
</div>
|
||||
<form class="form form-horizontal" [formGroup]="userProfile">
|
||||
<div class="form-body">
|
||||
<h4 class="form-section"><i class="la la-eye"></i> About User</h4>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="form-group row mx-auto">
|
||||
<label class="col-md-3 label-control" for="userinput1">Fist Name</label>
|
||||
<div class="col-md-9">
|
||||
<input type="text" id="userinput1" class="form-control border-primary"
|
||||
placeholder="First Name" formControlName="firstName">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="form-group row mx-auto">
|
||||
<label class="col-md-3 label-control" for="userinput2">Last Name</label>
|
||||
<div class="col-md-9">
|
||||
<input type="text" id="userinput2" class="form-control border-primary"
|
||||
placeholder="Last Name" formControlName="lastName">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="form-group row last mx-auto">
|
||||
<label class="col-md-3 label-control" for="userinput3">Username</label>
|
||||
<div class="col-md-9">
|
||||
<input type="text" id="userinput3" class="form-control border-primary"
|
||||
placeholder="Username" formControlName="userName">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="form-group row last mx-auto">
|
||||
<label class="col-md-3 label-control" for="userinput4">Nick Name</label>
|
||||
<div class="col-md-9">
|
||||
<input type="text" id="userinput4" class="form-control border-primary"
|
||||
placeholder="Nick Name" formControlName="nickName">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h4 class="form-section"><i class="feather ft-mail"></i> Contact Info & Bio</h4>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="form-group row mx-auto">
|
||||
<label class="col-md-3 label-control" for="userinput5">Email</label>
|
||||
<div class="col-md-9">
|
||||
<input class="form-control border-primary" type="email" placeholder="email" id="userinput5"
|
||||
formControlName="email">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row mx-auto">
|
||||
<label class="col-md-3 label-control" for="userinput6">Website</label>
|
||||
<div class="col-md-9">
|
||||
<input class="form-control border-primary" type="url" placeholder="http://" id="userinput6"
|
||||
formControlName="website">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row mx-auto last">
|
||||
<label class="col-md-3 label-control">Contact Number</label>
|
||||
<div class="col-md-9">
|
||||
<input class="form-control border-primary" id="userinput7" type="tel" formControlName="phone"
|
||||
placeholder="Contact Number">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="form-group row mx-auto last">
|
||||
<label class="col-md-3 label-control" for="userinput8">Bio</label>
|
||||
<div class="col-md-9">
|
||||
<textarea id="userinput8" rows="6" class="form-control border-primary" formControlName="bio"
|
||||
placeholder="Bio"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-actions text-right">
|
||||
<button type="button" class="btn btn-warning mr-1">
|
||||
<i class="feather ft-x"></i> Cancel
|
||||
</button>
|
||||
<button type="submit" class="btn btn-primary">
|
||||
<i class="la la-check"></i> Save
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</ng-container>
|
||||
</m-card>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title" id="horz-layout-icons">Timesheet</h4>
|
||||
</div>
|
||||
<div class="card-content collpase show">
|
||||
<div class="card-body">
|
||||
<div class="card-text">
|
||||
<p>Add <code>.form-horizontal</code> class to the form tag to have horizontal form styling. This
|
||||
horizontal form shows the use of icons with form controls. Define the position of the icon using
|
||||
<code>has-icon-left</code> or <code>has-icon-right</code> class. Use <code>icon-*</code> class to
|
||||
define the icon for the form control. See Icons sections for the list of icons you can use. </p>
|
||||
</div>
|
||||
<form class="form form-horizontal" [formGroup]="timeSheet">
|
||||
<div class="form-body">
|
||||
<div class="form-group row mx-auto">
|
||||
<label class="col-md-3 label-control" for="timesheetinput1">Employee Name</label>
|
||||
<div class="col-md-9">
|
||||
<div class="position-relative has-icon-left">
|
||||
<input type="text" id="timesheetinput1" class="form-control" placeholder="employee name"
|
||||
formControlName="employeeName">
|
||||
<div class="form-control-position">
|
||||
<i class="feather ft-user"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row mx-auto">
|
||||
<label class="col-md-3 label-control" for="timesheetinput2">Project Name</label>
|
||||
<div class="col-md-9">
|
||||
<div class="position-relative has-icon-left">
|
||||
<input type="text" id="timesheetinput2" class="form-control" placeholder="project name"
|
||||
formControlName="projectname">
|
||||
<div class="form-control-position">
|
||||
<i class="la la-briefcase"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row mx-auto">
|
||||
<label class="col-md-3 label-control" for="timesheetinput3">Date</label>
|
||||
<div class="col-md-9">
|
||||
<div class="position-relative has-icon-left">
|
||||
<div class="input-group">
|
||||
<input class="form-control" placeholder="yyyy-mm-dd" name="dp"
|
||||
ngbDatepicker #d1="ngbDatepicker">
|
||||
<div class="input-group-append">
|
||||
<div class="input-group-text" (click)="d1.toggle()">
|
||||
<i class="fa fa-calendar" style="cursor: pointer;"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-control-position">
|
||||
<i class="feather ft-message-square"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row mx-auto">
|
||||
<label class="col-md-3 label-control">Rate Per Hour</label>
|
||||
<div class="col-md-9">
|
||||
<div class="input-group mt-0">
|
||||
<div class="input-group-prepend">
|
||||
<span class="input-group-text">$</span>
|
||||
</div>
|
||||
<input type="text" class="form-control" placeholder="Rate Per Hour"
|
||||
formControlName="ratePerHour">
|
||||
<div class="input-group-append">
|
||||
<span class="input-group-text">.00</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row mx-auto">
|
||||
<label class="col-md-3 label-control" for="timesheetinput5">Start Time</label>
|
||||
<div class="col-md-9">
|
||||
<div class="position-relative has-icon-left">
|
||||
<input type="time" id="timesheetinput5" class="form-control" formControlName="startTime">
|
||||
<div class="form-control-position">
|
||||
<i class="feather ft-clock"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row mx-auto">
|
||||
<label class="col-md-3 label-control" for="timesheetinput6">End Time</label>
|
||||
<div class="col-md-9">
|
||||
<div class="position-relative has-icon-left">
|
||||
<input type="time" id="timesheetinput6" class="form-control" formControlName="endTime">
|
||||
<div class="form-control-position">
|
||||
<i class="feather ft-clock"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row mx-auto last">
|
||||
<label class="col-md-3 label-control" for="timesheetinput7">Notes</label>
|
||||
<div class="col-md-9">
|
||||
<div class="position-relative has-icon-left">
|
||||
<textarea id="timesheetinput7" rows="5" class="form-control" formControlName="notes"
|
||||
placeholder="notes"></textarea>
|
||||
<div class="form-control-position">
|
||||
<i class="feather ft-file"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-actions text-right">
|
||||
<button type="button" class="btn btn-warning mr-1">
|
||||
<i class="feather ft-x"></i> Cancel
|
||||
</button>
|
||||
<button type="submit" class="btn btn-primary">
|
||||
<i class="la la-check"></i> Save
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row justify-content-md-center">
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title" id="horz-layout-card-center">Event Registration</h4>
|
||||
</div>
|
||||
<div class="card-content collpase show">
|
||||
<div class="card-body">
|
||||
<div class="card-text">
|
||||
<p>Add <code>.form-horizontal</code> class to the form tag to have horizontal form styling. This is
|
||||
horizontal form demo with centered card. Here we have used <code>col-md-6 ml-auto</code> classes
|
||||
to center the card as its not full width. User can always change those classes according to width
|
||||
and offset requirements.</p>
|
||||
</div>
|
||||
<form class="form form-horizontal" [formGroup]="eventRegistration">
|
||||
<div class="form-body">
|
||||
<div class="form-group row mx-auto">
|
||||
<label class="col-md-3 label-control" for="eventRegInput1">Full Name</label>
|
||||
<div class="col-md-9">
|
||||
<input type="text" id="eventInput1" class="form-control" placeholder="name"
|
||||
formControlName="fullname">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row mx-auto">
|
||||
<label class="col-md-3 label-control" for="eventRegInput2">Title</label>
|
||||
<div class="col-md-9">
|
||||
<input type="text" id="eventInput2" class="form-control" placeholder="title"
|
||||
formControlName="title">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row mx-auto">
|
||||
<label class="col-md-3 label-control" for="eventRegInput3">Company</label>
|
||||
<div class="col-md-9">
|
||||
<input type="text" id="eventInput3" class="form-control" placeholder="company"
|
||||
formControlName="company">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row mx-auto">
|
||||
<label class="col-md-3 label-control" for="eventRegInput4">Email</label>
|
||||
<div class="col-md-9">
|
||||
<input type="email" id="eventInput4" class="form-control" placeholder="email"
|
||||
formControlName="email">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row mx-auto">
|
||||
<label class="col-md-3 label-control" for="eventRegInput5">Contact Number</label>
|
||||
<div class="col-md-9">
|
||||
<input type="tel" id="eventInput5" class="form-control" formControlName="phone"
|
||||
placeholder="contact number">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row mx-auto last">
|
||||
<label class="col-md-3 label-control">Existing Customer</label>
|
||||
<div class="col-md-9">
|
||||
<div class="input-group col-md-9">
|
||||
<div class="d-inline-block custom-control custom-radio mr-1">
|
||||
<input type="radio" class="custom-control-input" value="yes" id="yes"
|
||||
formControlName="customer1">
|
||||
<label class="custom-control-label" for="yes">Yes</label>
|
||||
</div>
|
||||
<div class="d-inline-block custom-control custom-radio">
|
||||
<input type="radio" class="custom-control-input" value="no" id="no"
|
||||
formControlName="customer1">
|
||||
<label class="custom-control-label" for="no">No</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-actions text-center">
|
||||
<button type="button" class="btn btn-warning mr-1">
|
||||
<i class="feather ft-x"></i> Cancel
|
||||
</button>
|
||||
<button type="submit" class="btn btn-primary">
|
||||
<i class="la la-check"></i> Save
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- // Basic form layout section end -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- ////////////////////////////////////////////////////////////////////////////-->
|
||||
@@ -0,0 +1,25 @@
|
||||
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
|
||||
|
||||
import { HorizontalFormsComponent } from './horizontal-forms.component';
|
||||
|
||||
describe('HorizontalFormsComponent', () => {
|
||||
let component: HorizontalFormsComponent;
|
||||
let fixture: ComponentFixture<HorizontalFormsComponent>;
|
||||
|
||||
beforeEach(waitForAsync(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ HorizontalFormsComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(HorizontalFormsComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,114 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { FormGroup, Validators, FormBuilder } from '@angular/forms';
|
||||
import { NgBlockUI, BlockUI } from 'ng-block-ui';
|
||||
|
||||
@Component({
|
||||
selector: 'app-horizontal-forms',
|
||||
templateUrl: './horizontal-forms.component.html',
|
||||
styleUrls: ['./horizontal-forms.component.css']
|
||||
})
|
||||
export class HorizontalFormsComponent implements OnInit {
|
||||
|
||||
@BlockUI('projectInfo') blockUIProjectInfo: NgBlockUI;
|
||||
@BlockUI('userProfile') blockUIUserProfile: NgBlockUI;
|
||||
|
||||
public breadcrumb: any;
|
||||
|
||||
options = {
|
||||
close: true,
|
||||
expand: true,
|
||||
minimize: true,
|
||||
reload: true
|
||||
};
|
||||
|
||||
interestedIn = ['design', 'development', 'illustration', 'branding', 'video'];
|
||||
budget = ['less than 5000$', '5000$ - 10000$', '10000$ - 20000$', 'more than 20000$'];
|
||||
|
||||
projectInfo: FormGroup;
|
||||
userProfile: FormGroup;
|
||||
timeSheet: FormGroup;
|
||||
eventRegistration: FormGroup;
|
||||
|
||||
constructor(private formBuilder: FormBuilder) { }
|
||||
|
||||
ngOnInit() {
|
||||
this.breadcrumb = {
|
||||
'mainlabel': 'Horizontal Forms',
|
||||
'links': [
|
||||
{
|
||||
'name': 'Home',
|
||||
'isLink': true,
|
||||
'link': '/dashboard/sales'
|
||||
},
|
||||
{
|
||||
'name': 'Form Layouts',
|
||||
'isLink': true,
|
||||
'link': '#'
|
||||
},
|
||||
{
|
||||
'name': 'Horizontal Forms',
|
||||
'isLink': true
|
||||
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
this.projectInfo = this.formBuilder.group({
|
||||
firstName: ['', Validators.required],
|
||||
lastName: ['', Validators.required],
|
||||
email: ['', Validators.required],
|
||||
phone: ['', Validators.required],
|
||||
company: ['', Validators.required],
|
||||
interestedIn: ['', Validators.required],
|
||||
budget: ['', Validators.required],
|
||||
selectFile: ['', Validators.required],
|
||||
aboutProject: ['', Validators.required],
|
||||
});
|
||||
|
||||
this.userProfile = this.formBuilder.group({
|
||||
firstName: ['', Validators.required],
|
||||
lastName: ['', Validators.required],
|
||||
userName: ['', Validators.required],
|
||||
nickName: ['', Validators.required],
|
||||
email: ['', Validators.required],
|
||||
website: ['', Validators.required],
|
||||
phone: ['', Validators.required],
|
||||
bio: ['', Validators.required]
|
||||
});
|
||||
|
||||
this.timeSheet = this.formBuilder.group({
|
||||
employeeName: ['', Validators.required],
|
||||
projectname: ['', Validators.required],
|
||||
date: ['', Validators.required],
|
||||
ratePerHour: ['', Validators.required],
|
||||
startTime: ['', Validators.required],
|
||||
endTime: ['', Validators.required],
|
||||
notes: ['', Validators.required]
|
||||
});
|
||||
this.eventRegistration = this.formBuilder.group({
|
||||
fullname: ['', Validators.required],
|
||||
title: ['', Validators.required],
|
||||
company: ['', Validators.required],
|
||||
email: ['', Validators.required],
|
||||
phone: ['', Validators.required],
|
||||
customer1: ['', Validators.required]
|
||||
});
|
||||
}
|
||||
|
||||
reloadProjectInfo() {
|
||||
this.blockUIProjectInfo.start('Loading..');
|
||||
|
||||
setTimeout(() => {
|
||||
this.blockUIProjectInfo.stop();
|
||||
}, 2500);
|
||||
}
|
||||
|
||||
reloadUserProfile() {
|
||||
this.blockUIUserProfile.start('Loading..');
|
||||
|
||||
setTimeout(() => {
|
||||
this.blockUIUserProfile.stop();
|
||||
}, 2500);
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,142 @@
|
||||
|
||||
:host ::ng-deep .block-ui-wrapper {
|
||||
background: rgba(255, 249, 249, 0.5) !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .btn-light:not(:disabled):not(.disabled):active {
|
||||
color: unset !important;
|
||||
background-color: unset !important;
|
||||
border-color: #d3d9df !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .btn-light:hover:not(.disabled):active {
|
||||
background-color: #e2e6ea !important;
|
||||
border-color: #dae0e5 !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .btn-light {
|
||||
color: unset !important;
|
||||
background-color: unset !important;
|
||||
border-color: unset !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .bg-primary {
|
||||
background-color: #007bff !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .text-white {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .custom-day {
|
||||
text-align: center;
|
||||
padding: .185rem .25rem;
|
||||
display: inline-block;
|
||||
height: 2rem;
|
||||
width: 2rem;
|
||||
}
|
||||
|
||||
:host ::ng-deep .custom-day:active {
|
||||
color: #6d7183 !important;
|
||||
background-color: #fff !important;
|
||||
border-block-color: rgb(2, 117, 216) !important;
|
||||
|
||||
}
|
||||
|
||||
.bg-light {
|
||||
background-color: #f8f9fa !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .hidden {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.ngb-dp-weekday {
|
||||
color: #17a2b8;
|
||||
}
|
||||
|
||||
.ngb-dp-week-number,
|
||||
.ngb-dp-weekday {
|
||||
line-height: 2rem;
|
||||
text-align: center;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.ngb-datepicker-month-view {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngb-dp-header {
|
||||
background-color: var(--light) !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngb-dp-weekdays {
|
||||
background-color: var(--light);
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngb-dp-month-name {
|
||||
background-color: var(--light);
|
||||
}
|
||||
|
||||
.small {
|
||||
font-size: 80%;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.ngb-dp-day {
|
||||
cursor: pointer !important;
|
||||
}
|
||||
|
||||
.ngb-dp-month {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.btn-light:hover {
|
||||
color: #212529 !important;
|
||||
background-color: #e2e6ea !important;
|
||||
border-color: #dae0e5 !important;
|
||||
}
|
||||
|
||||
.ngb-datepicker-month-view {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.ngb-dp-header {
|
||||
border-bottom: 0;
|
||||
border-radius: .25rem .25rem 0 0;
|
||||
padding-top: .25rem;
|
||||
}
|
||||
|
||||
.ngb-dp-day,
|
||||
.ngb-dp-week-number,
|
||||
.ngb-dp-weekday {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
}
|
||||
|
||||
.custom-day {
|
||||
text-align: center;
|
||||
padding: 0.185rem 0.25rem;
|
||||
display: inline-block;
|
||||
height: 2rem;
|
||||
width: 2rem;
|
||||
}
|
||||
|
||||
.custom-day.focused {
|
||||
background-color: #e6e6e6;
|
||||
}
|
||||
|
||||
.custom-day.range,
|
||||
.custom-day:hover {
|
||||
background-color: rgb(2, 117, 216);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.custom-day.faded {
|
||||
background-color: rgba(2, 117, 216, 0.5);
|
||||
}
|
||||
|
||||
:host ::ng-deep .block-ui-wrapper {
|
||||
background: rgba(255, 249, 249, 0.5) !important;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,416 @@
|
||||
<div class="app-content content">
|
||||
<div class="content-wrapper">
|
||||
<div class="content-header row mb-1">
|
||||
<app-breadcrumb class="col-12" [breadcrumb]="breadcrumb"></app-breadcrumb>
|
||||
</div>
|
||||
<div class="content-body">
|
||||
<!-- Row separator layout section start -->
|
||||
<section id="row-separator-form-layouts">
|
||||
<div class="row">
|
||||
<div class="col-md-12" *blockUI="'projectInfo'; message: 'Loading'">
|
||||
<m-card [options]="options" (reloadFunction)="reloadProjectInfo($event)">
|
||||
<ng-container mCardHeaderTitle>
|
||||
Project Info
|
||||
</ng-container>
|
||||
<ng-container mCardBody>
|
||||
<div class="card-text">
|
||||
<p>Add <code>.row-separator</code> to form tag to add border bottom to a form-group. In this
|
||||
example <code>.form-horizontal</code> is used to show the row separator functionality.</p>
|
||||
</div>
|
||||
<form class="form form-horizontal row-separator" [formGroup]="projectInfo">
|
||||
<div class="form-body">
|
||||
<h4 class="form-section"><i class="feather ft-user"></i> Personal Info</h4>
|
||||
<div class="form-group row mx-auto">
|
||||
<label class="col-md-3 label-control" for="projectinput1">First Name</label>
|
||||
<div class="col-md-9">
|
||||
<input type="text" id="projectinput1" class="form-control" formControlName="firstName"
|
||||
placeholder="First Name">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row mx-auto">
|
||||
<label class="col-md-3 label-control" for="projectinput2">Last Name</label>
|
||||
<div class="col-md-9">
|
||||
<input type="text" id="projectinput2" class="form-control" formControlName="lastName"
|
||||
placeholder="Last Name">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row mx-auto">
|
||||
<label class="col-md-3 label-control" for="projectinput3">E-mail</label>
|
||||
<div class="col-md-9">
|
||||
<input type="text" id="projectinput3" class="form-control" formControlName="email"
|
||||
placeholder="E-mail">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row mx-auto last">
|
||||
<label class="col-md-3 label-control" for="projectinput4">Contact Number</label>
|
||||
<div class="col-md-9">
|
||||
<input type="text" id="projectinput4" class="form-control" formControlName="phone"
|
||||
placeholder="Phone">
|
||||
</div>
|
||||
</div>
|
||||
<h4 class="form-section"><i class="feather ft-clipboard"></i> Requirements</h4>
|
||||
<div class="form-group row mx-auto">
|
||||
<label class="col-md-3 label-control" for="projectinput5">Company</label>
|
||||
<div class="col-md-9">
|
||||
<input type="text" id="companyName" class="form-control" formControlName="company"
|
||||
placeholder="Company Name">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row mx-auto">
|
||||
<label class="col-md-3 label-control" for="projectinput6">Interested in</label>
|
||||
<div class="col-md-9">
|
||||
<select id="projectinput5" class="form-control" formControlName="interestedIn">
|
||||
<option *ngFor="let interest of interestedIn" [value]="interest">{{interest}}</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row mx-auto">
|
||||
<label class="col-md-3 label-control" for="projectinput7">Budget</label>
|
||||
<div class="col-md-9">
|
||||
<select id="projectinput6" class="form-control" formControlName="budget">
|
||||
<option *ngFor="let range of budget" [value]="range">{{range}}</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row mx-auto">
|
||||
<label class="col-md-3 label-control">Select File</label>
|
||||
<div class="col-md-9">
|
||||
<label id="projectinput8" class="file center-block">
|
||||
<input type="file" id="file" formControlName="selectFile">
|
||||
<span class="file-custom"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row last mx-auto">
|
||||
<label class="col-md-3 label-control" for="projectinput9">About Project</label>
|
||||
<div class="col-md-9">
|
||||
<textarea id="projectinput8" rows="5" class="form-control" formControlName="aboutProject"
|
||||
placeholder="About Project"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-actions">
|
||||
<button type="button" class="btn btn-warning mr-1">
|
||||
<i class="feather ft-x"></i> Cancel
|
||||
</button>
|
||||
<button type="submit" class="btn btn-primary">
|
||||
<i class="la la-check"></i> Save
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</ng-container>
|
||||
</m-card>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-12" *blockUI="'userProfile'; message: 'Loading'">
|
||||
<m-card [options]="options" (reloadFunction)="reloadUserProfile($event)">
|
||||
<ng-container mCardHeaderTitle>
|
||||
User Profile
|
||||
</ng-container>
|
||||
<ng-container mCardBody>
|
||||
<div class="card-text">
|
||||
<p>Add <code>.row-separator</code> to form tag to add border bottom to a form-group. In this
|
||||
example 2-column <code>.form-horizontal</code> is used with primary color bordered form controls
|
||||
to show the row separator functionality.</p>
|
||||
</div>
|
||||
<form class="form form-horizontal row-separator" [formGroup]="userProfile">
|
||||
<div class="form-body">
|
||||
<h4 class="form-section"><i class="la la-eye"></i> About User</h4>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="form-group row mx-auto">
|
||||
<label class="col-md-3 label-control" for="userinput1">Fist Name</label>
|
||||
<div class="col-md-9">
|
||||
<input type="text" id="userinput1" class="form-control border-primary"
|
||||
placeholder="First Name" formControlName="firstName">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="form-group row mx-auto">
|
||||
<label class="col-md-3 label-control" for="userinput2">Last Name</label>
|
||||
<div class="col-md-9">
|
||||
<input type="text" id="userinput2" class="form-control border-primary"
|
||||
placeholder="Last Name" formControlName="lastName">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="form-group row last mx-auto">
|
||||
<label class="col-md-3 label-control" for="userinput3">Username</label>
|
||||
<div class="col-md-9">
|
||||
<input type="text" id="userinput3" class="form-control border-primary"
|
||||
placeholder="Username" formControlName="userName">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="form-group row last mx-auto">
|
||||
<label class="col-md-3 label-control" for="userinput4">Nick Name</label>
|
||||
<div class="col-md-9">
|
||||
<input type="text" id="userinput4" class="form-control border-primary"
|
||||
placeholder="Nick Name" formControlName="nickName">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h4 class="form-section"><i class="feather ft-mail"></i> Contact Info & Bio</h4>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="form-group row mx-auto">
|
||||
<label class="col-md-3 label-control" for="userinput5">Email</label>
|
||||
<div class="col-md-9">
|
||||
<input class="form-control border-primary" type="email" placeholder="email" id="userinput5"
|
||||
formControlName="email">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row mx-auto">
|
||||
<label class="col-md-3 label-control" for="userinput6">Website</label>
|
||||
<div class="col-md-9">
|
||||
<input class="form-control border-primary" type="url" placeholder="http://" id="userinput6"
|
||||
formControlName="website">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row mx-auto last">
|
||||
<label class="col-md-3 label-control">Contact Number</label>
|
||||
<div class="col-md-9">
|
||||
<input class="form-control border-primary" id="userinput7" type="tel" formControlName="phone"
|
||||
placeholder="Contact Number">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="form-group row mx-auto last">
|
||||
<label class="col-md-3 label-control" for="userinput8">Bio</label>
|
||||
<div class="col-md-9">
|
||||
<textarea id="userinput8" rows="6" class="form-control border-primary" formControlName="bio"
|
||||
placeholder="Bio"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-actions text-right">
|
||||
<button type="button" class="btn btn-warning mr-1">
|
||||
<i class="feather ft-x"></i> Cancel
|
||||
</button>
|
||||
<button type="submit" class="btn btn-primary">
|
||||
<i class="la la-check"></i> Save
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</ng-container>
|
||||
</m-card>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title" id="row-separator-icons">Timesheet</h4>
|
||||
</div>
|
||||
<div class="card-content collapse show">
|
||||
<div class="card-body">
|
||||
<div class="card-text">
|
||||
<p>Add <code>.row-separator</code> to form tag to add border bottom to a form-group. In this
|
||||
example icons are used with form controls to show the row separator functionality.</p>
|
||||
</div>
|
||||
<form class="form form-horizontal row-separator" [formGroup]="timeSheet">
|
||||
<div class="form-body">
|
||||
<div class="form-group row mx-auto">
|
||||
<label class="col-md-3 label-control" for="timesheetinput1">Employee Name</label>
|
||||
<div class="col-md-9">
|
||||
<div class="position-relative has-icon-left">
|
||||
<input type="text" id="timesheetinput1" class="form-control" placeholder="employee name"
|
||||
formControlName="employeeName">
|
||||
<div class="form-control-position">
|
||||
<i class="feather ft-user"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row mx-auto">
|
||||
<label class="col-md-3 label-control" for="timesheetinput2">Project Name</label>
|
||||
<div class="col-md-9">
|
||||
<div class="position-relative has-icon-left">
|
||||
<input type="text" id="timesheetinput2" class="form-control" placeholder="project name"
|
||||
formControlName="projectname">
|
||||
<div class="form-control-position">
|
||||
<i class="la la-briefcase"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row mx-auto">
|
||||
<label class="col-md-3 label-control" for="timesheetinput3">Date</label>
|
||||
<div class="col-md-9">
|
||||
<div class="position-relative has-icon-left">
|
||||
<div class="input-group">
|
||||
<input class="form-control" placeholder="yyyy-mm-dd" name="dp"
|
||||
ngbDatepicker #d1="ngbDatepicker">
|
||||
<div class="input-group-append">
|
||||
<div class="input-group-text" (click)="d1.toggle()">
|
||||
<i class="fa fa-calendar" style="cursor: pointer;"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-control-position">
|
||||
<i class="feather ft-message-square"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row mx-auto">
|
||||
<label class="col-md-3 label-control">Rate Per Hour</label>
|
||||
<div class="col-md-9">
|
||||
<div class="input-group mt-0">
|
||||
<div class="input-group-prepend">
|
||||
<span class="input-group-text">$</span>
|
||||
</div>
|
||||
<input type="text" class="form-control" placeholder="Rate Per Hour"
|
||||
formControlName="ratePerHour">
|
||||
<div class="input-group-append">
|
||||
<span class="input-group-text">.00</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row mx-auto">
|
||||
<label class="col-md-3 label-control" for="timesheetinput5">Start Time</label>
|
||||
<div class="col-md-9">
|
||||
<div class="position-relative has-icon-left">
|
||||
<input type="time" id="timesheetinput5" class="form-control" formControlName="startTime">
|
||||
<div class="form-control-position">
|
||||
<i class="feather ft-clock"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row mx-auto">
|
||||
<label class="col-md-3 label-control" for="timesheetinput6">End Time</label>
|
||||
<div class="col-md-9">
|
||||
<div class="position-relative has-icon-left">
|
||||
<input type="time" id="timesheetinput6" class="form-control" formControlName="endTime">
|
||||
<div class="form-control-position">
|
||||
<i class="feather ft-clock"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row mx-auto last">
|
||||
<label class="col-md-3 label-control" for="timesheetinput7">Notes</label>
|
||||
<div class="col-md-9">
|
||||
<div class="position-relative has-icon-left">
|
||||
<textarea id="timesheetinput7" rows="5" class="form-control" formControlName="notes"
|
||||
placeholder="notes"></textarea>
|
||||
<div class="form-control-position">
|
||||
<i class="feather ft-file"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-actions text-right">
|
||||
<button type="button" class="btn btn-warning mr-1">
|
||||
<i class="feather ft-x"></i> Cancel
|
||||
</button>
|
||||
<button type="submit" class="btn btn-primary">
|
||||
<i class="la la-check"></i> Save
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6 offset-md-3">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title" id="row-separator-card-center">Event Registration</h4>
|
||||
</div>
|
||||
<div class="card-content collapse show">
|
||||
<div class="card-body">
|
||||
<div class="card-text">
|
||||
<p>Add <code>.row-separator</code> to form tag to add border bottom to a form-group. In this
|
||||
example centered card is used to show the row separator functionality.</p>
|
||||
</div>
|
||||
<form class="form form-horizontal row-separator" [formGroup]="eventRegistration">
|
||||
<div class="form-body">
|
||||
<div class="form-group row mx-auto">
|
||||
<label class="col-md-3 label-control" for="eventRegInput1">Full Name</label>
|
||||
<div class="col-md-9">
|
||||
<input type="text" id="eventInput1" class="form-control" placeholder="name"
|
||||
formControlName="fullname">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row mx-auto">
|
||||
<label class="col-md-3 label-control" for="eventRegInput2">Title</label>
|
||||
<div class="col-md-9">
|
||||
<input type="text" id="eventInput2" class="form-control" placeholder="title"
|
||||
formControlName="title">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row mx-auto">
|
||||
<label class="col-md-3 label-control" for="eventRegInput3">Company</label>
|
||||
<div class="col-md-9">
|
||||
<input type="text" id="eventInput3" class="form-control" placeholder="company"
|
||||
formControlName="company">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row mx-auto">
|
||||
<label class="col-md-3 label-control" for="eventRegInput4">Email</label>
|
||||
<div class="col-md-9">
|
||||
<input type="email" id="eventInput4" class="form-control" placeholder="email"
|
||||
formControlName="email">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row mx-auto">
|
||||
<label class="col-md-3 label-control" for="eventRegInput5">Contact Number</label>
|
||||
<div class="col-md-9">
|
||||
<input type="tel" id="eventInput5" class="form-control" formControlName="phone"
|
||||
placeholder="contact number">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row mx-auto last">
|
||||
<label class="col-md-3 label-control">Existing Customer</label>
|
||||
<div class="col-md-9">
|
||||
<div class="input-group col-md-9">
|
||||
<div class="d-inline-block custom-control custom-radio mr-1">
|
||||
<input type="radio" class="custom-control-input" value="yes" id="yes"
|
||||
formControlName="customer1">
|
||||
<label class="custom-control-label" for="yes">Yes</label>
|
||||
</div>
|
||||
<div class="d-inline-block custom-control custom-radio">
|
||||
<input type="radio" class="custom-control-input" value="no" id="no"
|
||||
formControlName="customer1">
|
||||
<label class="custom-control-label" for="no">No</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-actions text-center">
|
||||
<button type="button" class="btn btn-warning mr-1">
|
||||
<i class="feather ft-x"></i> Cancel
|
||||
</button>
|
||||
<button type="submit" class="btn btn-primary">
|
||||
<i class="la la-check"></i> Save
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- // Row separator layout section end -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- ////////////////////////////////////////////////////////////////////////////-->
|
||||
@@ -0,0 +1,25 @@
|
||||
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
|
||||
|
||||
import { RowSeparatorComponent } from './row-separator.component';
|
||||
|
||||
describe('RowSeparatorComponent', () => {
|
||||
let component: RowSeparatorComponent;
|
||||
let fixture: ComponentFixture<RowSeparatorComponent>;
|
||||
|
||||
beforeEach(waitForAsync(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ RowSeparatorComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(RowSeparatorComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,112 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { FormGroup, Validators, FormBuilder } from '@angular/forms';
|
||||
import { NgBlockUI, BlockUI } from 'ng-block-ui';
|
||||
|
||||
@Component({
|
||||
selector: 'app-row-separator',
|
||||
templateUrl: './row-separator.component.html',
|
||||
styleUrls: ['./row-separator.component.css']
|
||||
})
|
||||
export class RowSeparatorComponent implements OnInit {
|
||||
|
||||
@BlockUI('projectInfo') blockUIProjectInfo: NgBlockUI;
|
||||
@BlockUI('userProfile') blockUIUserProfile: NgBlockUI;
|
||||
|
||||
public breadcrumb: any;
|
||||
|
||||
options = {
|
||||
close: true,
|
||||
expand: true,
|
||||
minimize: true,
|
||||
reload: true
|
||||
};
|
||||
|
||||
interestedIn = ['design', 'development', 'illustration', 'branding', 'video'];
|
||||
budget = ['less than 5000$', '5000$ - 10000$', '10000$ - 20000$', 'more than 20000$'];
|
||||
|
||||
projectInfo: FormGroup;
|
||||
userProfile: FormGroup;
|
||||
timeSheet: FormGroup;
|
||||
eventRegistration: FormGroup;
|
||||
|
||||
constructor(private formBuilder: FormBuilder) { }
|
||||
|
||||
ngOnInit() {
|
||||
this.breadcrumb = {
|
||||
'mainlabel': 'Row Reparator Forms',
|
||||
'links': [
|
||||
{
|
||||
'name': 'Home',
|
||||
'isLink': true,
|
||||
'link': '/dashboard/sales'
|
||||
},
|
||||
{
|
||||
'name': 'Form Layouts',
|
||||
'isLink': true,
|
||||
'link': '#'
|
||||
},
|
||||
{
|
||||
'name': 'Row Reparator Forms',
|
||||
'isLink': true
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
this.projectInfo = this.formBuilder.group({
|
||||
firstName: ['', Validators.required],
|
||||
lastName: ['', Validators.required],
|
||||
email: ['', Validators.required],
|
||||
phone: ['', Validators.required],
|
||||
company: ['', Validators.required],
|
||||
interestedIn: ['', Validators.required],
|
||||
budget: ['', Validators.required],
|
||||
selectFile: ['', Validators.required],
|
||||
aboutProject: ['', Validators.required],
|
||||
});
|
||||
|
||||
this.userProfile = this.formBuilder.group({
|
||||
firstName: ['', Validators.required],
|
||||
lastName: ['', Validators.required],
|
||||
userName: ['', Validators.required],
|
||||
nickName: ['', Validators.required],
|
||||
email: ['', Validators.required],
|
||||
website: ['', Validators.required],
|
||||
phone: ['', Validators.required],
|
||||
bio: ['', Validators.required]
|
||||
});
|
||||
|
||||
this.timeSheet = this.formBuilder.group({
|
||||
employeeName: ['', Validators.required],
|
||||
projectname: ['', Validators.required],
|
||||
date: ['', Validators.required],
|
||||
ratePerHour: ['', Validators.required],
|
||||
startTime: ['', Validators.required],
|
||||
endTime: ['', Validators.required],
|
||||
notes: ['', Validators.required]
|
||||
});
|
||||
this.eventRegistration = this.formBuilder.group({
|
||||
fullname: ['', Validators.required],
|
||||
title: ['', Validators.required],
|
||||
company: ['', Validators.required],
|
||||
email: ['', Validators.required],
|
||||
phone: ['', Validators.required],
|
||||
customer1: ['', Validators.required]
|
||||
});
|
||||
}
|
||||
|
||||
reloadProjectInfo() {
|
||||
this.blockUIProjectInfo.start('Loading..');
|
||||
|
||||
setTimeout(() => {
|
||||
this.blockUIProjectInfo.stop();
|
||||
}, 2500);
|
||||
}
|
||||
|
||||
reloadUserProfile() {
|
||||
this.blockUIUserProfile.start('Loading..');
|
||||
|
||||
setTimeout(() => {
|
||||
this.blockUIUserProfile.stop();
|
||||
}, 2500);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,148 @@
|
||||
:host ::ng-deep .block-ui-wrapper {
|
||||
background: rgba(255, 249, 249, 0.5) !important;
|
||||
}
|
||||
|
||||
form.striped-labels .form-group .form-bordered {
|
||||
border-left: 1px solid #E9EBF5 !important;
|
||||
border-bottom: 1px solid #E9EBF5 !important;
|
||||
}
|
||||
form.striped-labels .form-group .form-borderedmr-1 {
|
||||
border-left: 1px solid #E9EBF5 !important;
|
||||
}
|
||||
:host ::ng-deep .btn-light:not(:disabled):not(.disabled):active {
|
||||
color: unset !important;
|
||||
background-color: unset !important;
|
||||
border-color: #d3d9df !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .btn-light:hover:not(.disabled):active {
|
||||
background-color: #e2e6ea !important;
|
||||
border-color: #dae0e5 !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .btn-light {
|
||||
color: unset !important;
|
||||
background-color: unset !important;
|
||||
border-color: unset !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .bg-primary {
|
||||
background-color: #007bff !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .text-white {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .custom-day {
|
||||
text-align: center;
|
||||
padding: .185rem .25rem;
|
||||
display: inline-block;
|
||||
height: 2rem;
|
||||
width: 2rem;
|
||||
}
|
||||
|
||||
:host ::ng-deep .custom-day:active {
|
||||
color: #6d7183 !important;
|
||||
background-color: #fff !important;
|
||||
border-block-color: rgb(2, 117, 216) !important;
|
||||
|
||||
}
|
||||
|
||||
.bg-light {
|
||||
background-color: #f8f9fa !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .hidden {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.ngb-dp-weekday {
|
||||
color: #17a2b8;
|
||||
}
|
||||
|
||||
.ngb-dp-week-number,
|
||||
.ngb-dp-weekday {
|
||||
line-height: 2rem;
|
||||
text-align: center;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.ngb-datepicker-month-view {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngb-dp-header {
|
||||
background-color: var(--light) !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngb-dp-weekdays {
|
||||
background-color: var(--light);
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngb-dp-month-name {
|
||||
background-color: var(--light);
|
||||
}
|
||||
|
||||
.small {
|
||||
font-size: 80%;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.ngb-dp-day {
|
||||
cursor: pointer !important;
|
||||
}
|
||||
|
||||
.ngb-dp-month {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.btn-light:hover {
|
||||
color: #212529 !important;
|
||||
background-color: #e2e6ea !important;
|
||||
border-color: #dae0e5 !important;
|
||||
}
|
||||
|
||||
.ngb-datepicker-month-view {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.ngb-dp-header {
|
||||
border-bottom: 0;
|
||||
border-radius: .25rem .25rem 0 0;
|
||||
padding-top: .25rem;
|
||||
}
|
||||
|
||||
.ngb-dp-day,
|
||||
.ngb-dp-week-number,
|
||||
.ngb-dp-weekday {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
}
|
||||
|
||||
.custom-day {
|
||||
text-align: center;
|
||||
padding: 0.185rem 0.25rem;
|
||||
display: inline-block;
|
||||
height: 2rem;
|
||||
width: 2rem;
|
||||
}
|
||||
|
||||
.custom-day.focused {
|
||||
background-color: #e6e6e6;
|
||||
}
|
||||
|
||||
.custom-day.range,
|
||||
.custom-day:hover {
|
||||
background-color: rgb(2, 117, 216);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.custom-day.faded {
|
||||
background-color: rgba(2, 117, 216, 0.5);
|
||||
}
|
||||
|
||||
:host ::ng-deep .block-ui-wrapper {
|
||||
background: rgba(255, 249, 249, 0.5) !important;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,311 @@
|
||||
<div class="app-content content">
|
||||
<div class="content-wrapper">
|
||||
<div class="content-header row mb-1">
|
||||
<app-breadcrumb class="col-12" [breadcrumb]="breadcrumb"></app-breadcrumb>
|
||||
</div>
|
||||
<div class="content-body">
|
||||
<!-- Striped label form layout section start -->
|
||||
<section id="striped-label-form-layouts">
|
||||
<div class="row">
|
||||
<div class="col-md-12" *blockUI="'projectInfo'; message: 'Loading'">
|
||||
<m-card [options]="options" (reloadFunction)="reloadProjectInfo($event)">
|
||||
<ng-container mCardHeaderTitle>
|
||||
Project Info
|
||||
</ng-container>
|
||||
<ng-container mCardBody>
|
||||
<div class="card-text">
|
||||
<p>Add <code>.striped-labels</code> to form tag to add striped labels. In this example
|
||||
<code>.form-horizontal</code>
|
||||
and <code>.form-bordered</code> is used to show the striped labels functionality.</p>
|
||||
</div>
|
||||
<form class="form form-horizontal striped-labels form-bordered" [formGroup]="projectInfo">
|
||||
<div class="form-body">
|
||||
<h4 class="form-section"><i class="feather ft-user"></i> Personal Info</h4>
|
||||
<div class="form-group row mx-auto">
|
||||
<label class="col-md-3 label-control" for="projectinput1">First Name</label>
|
||||
<div class="col-md-9">
|
||||
<input type="text" id="projectinput1" class="form-control" formControlName="firstName"
|
||||
placeholder="First Name">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row mx-auto">
|
||||
<label class="col-md-3 label-control" for="projectinput2">Last Name</label>
|
||||
<div class="col-md-9 timesheetinput5">
|
||||
<input type="text" id="projectinput2" class="form-control" formControlName="lastName"
|
||||
placeholder="Last Name">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row mx-auto">
|
||||
<label class="col-md-3 label-control" for="projectinput3">E-mail</label>
|
||||
<div class="col-md-9">
|
||||
<input type="text" id="projectinput3" class="form-control" formControlName="email"
|
||||
placeholder="E-mail">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row mx-auto last">
|
||||
<label class="col-md-3 label-control" for="projectinput4">Contact Number</label>
|
||||
<div class="col-md-9mr-1">
|
||||
<input type="text" id="projectinput4" class="form-control" formControlName="phone"
|
||||
placeholder="Phone">
|
||||
</div>
|
||||
</div>
|
||||
<h4 class="form-section"><i class="feather ft-clipboard"></i> Requirements</h4>
|
||||
<div class="form-group row mx-auto">
|
||||
<label class="col-md-3 label-control" for="projectinput5">Company</label>
|
||||
<div class="col-md-9">
|
||||
<input type="text" id="companyName" class="form-control" formControlName="company"
|
||||
placeholder="Company Name">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row mx-auto">
|
||||
<label class="col-md-3 label-control" for="projectinput6">Interested in</label>
|
||||
<div class="col-md-9">
|
||||
<select id="projectinput5" class="form-control" formControlName="interestedIn">
|
||||
<option *ngFor="let interest of interestedIn" [value]="interest">{{interest}}</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row mx-auto">
|
||||
<label class="col-md-3 label-control" for="projectinput7">Budget</label>
|
||||
<div class="col-md-9">
|
||||
<select id="projectinput6" class="form-control" formControlName="budget">
|
||||
<option *ngFor="let range of budget" [value]="range">{{range}}</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row mx-auto">
|
||||
<label class="col-md-3 label-control">Select File</label>
|
||||
<div class="col-md-9">
|
||||
<label id="projectinput8" class="file center-block">
|
||||
<input type="file" id="file" formControlName="selectFile">
|
||||
<span class="file-custom"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row last mx-auto">
|
||||
<label class="col-md-3 label-control" for="projectinput9">About Project</label>
|
||||
<div class="col-md-9mr-1">
|
||||
<textarea id="projectinput8" rows="5" class="form-control" formControlName="aboutProject"
|
||||
placeholder="About Project"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-actions">
|
||||
<button type="button" class="btn btn-warning mr-1">
|
||||
<i class="feather ft-x"></i> Cancel
|
||||
</button>
|
||||
<button type="submit" class="btn btn-primary">
|
||||
<i class="la la-check"></i> Save
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</ng-container>
|
||||
</m-card>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-12" *blockUI="'timesheet'; message: 'Loading'">
|
||||
<m-card [options]="options" (reloadFunction)="reloadTimesheet($event)">
|
||||
<ng-container mCardHeaderTitle>
|
||||
Timesheet
|
||||
</ng-container>
|
||||
<ng-container mCardBody>
|
||||
<div class="card-text">
|
||||
<p>Add <code>.striped-labels</code> to form tag to add striped labels. In this example icons are
|
||||
used with form controls to show the striped labels functionality.</p>
|
||||
</div>
|
||||
<form class="form form-horizontal striped-labels form-bordered" [formGroup]="timeSheet">
|
||||
<div class="form-body">
|
||||
<div class="form-group row mx-auto">
|
||||
<label class="col-md-3 label-control" for="timesheetinput1">Employee Name</label>
|
||||
<div class="col-md-9">
|
||||
<div class="position-relative has-icon-left">
|
||||
<input type="text" id="timesheetinput1" class="form-control" placeholder="employee name"
|
||||
formControlName="employeeName">
|
||||
<div class="form-control-position">
|
||||
<i class="feather ft-user"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row mx-auto">
|
||||
<label class="col-md-3 label-control" for="timesheetinput2">Project Name</label>
|
||||
<div class="col-md-9">
|
||||
<div class="position-relative has-icon-left">
|
||||
<input type="text" id="timesheetinput2" class="form-control" placeholder="project name"
|
||||
formControlName="projectname">
|
||||
<div class="form-control-position">
|
||||
<i class="la la-briefcase"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row mx-auto">
|
||||
<label class="col-md-3 label-control" for="timesheetinput3">Date</label>
|
||||
<div class="col-md-9">
|
||||
<div class="position-relative has-icon-left">
|
||||
<div class="input-group">
|
||||
<input class="form-control" placeholder="yyyy-mm-dd" name="dp"
|
||||
ngbDatepicker #d1="ngbDatepicker">
|
||||
<div class="input-group-append">
|
||||
<div class="input-group-text" (click)="d1.toggle()">
|
||||
<i class="fa fa-calendar" style="cursor: pointer;"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-control-position">
|
||||
<i class="feather ft-message-square"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row mx-auto">
|
||||
<label class="col-md-3 label-control">Rate Per Hour</label>
|
||||
<div class="col-md-9">
|
||||
<div class="input-group mt-0">
|
||||
<div class="input-group-prepend">
|
||||
<span class="input-group-text">$</span>
|
||||
</div>
|
||||
<input type="text" class="form-control" placeholder="Rate Per Hour"
|
||||
formControlName="ratePerHour">
|
||||
<div class="input-group-append">
|
||||
<span class="input-group-text">.00</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row mx-auto">
|
||||
<label class="col-md-3 label-control" for="timesheetinput5">Start Time</label>
|
||||
<div class="col-md-9">
|
||||
<div class="position-relative has-icon-left">
|
||||
<input type="time" id="timesheetinput5" class="form-control" formControlName="startTime">
|
||||
<div class="form-control-position">
|
||||
<i class="feather ft-clock"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row mx-auto">
|
||||
<label class="col-md-3 label-control" for="timesheetinput6">End Time</label>
|
||||
<div class="col-md-9">
|
||||
<div class="position-relative has-icon-left">
|
||||
<input type="time" id="timesheetinput6" class="form-control" formControlName="endTime">
|
||||
<div class="form-control-position">
|
||||
<i class="feather ft-clock"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row mx-auto last">
|
||||
<label class="col-md-3 label-control" for="timesheetinput7">Notes</label>
|
||||
<div class="col-md-9mr-1">
|
||||
<div class="position-relative has-icon-left">
|
||||
<textarea id="timesheetinput7" rows="5" class="form-control" formControlName="notes"
|
||||
placeholder="notes"></textarea>
|
||||
<div class="form-control-position">
|
||||
<i class="feather ft-file"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-actions text-right">
|
||||
<button type="button" class="btn btn-warning mr-1">
|
||||
<i class="feather ft-x"></i> Cancel
|
||||
</button>
|
||||
<button type="submit" class="btn btn-primary">
|
||||
<i class="la la-check"></i> Save
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</ng-container>
|
||||
</m-card>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6 offset-md-3">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title" id="striped-label-layout-card-center">Event Registration</h4>
|
||||
</div>
|
||||
<div class="card-content collapse show">
|
||||
<div class="card-body">
|
||||
<div class="card-text">
|
||||
<p>Add <code>.striped-labels</code> to form tag to add striped labels. In this example centered
|
||||
card is used to show the striped labels functionality.</p>
|
||||
</div>
|
||||
<form class="form form-horizontal striped-labels" [formGroup]="eventRegistration">
|
||||
<div class="form-body">
|
||||
<div class="form-group row mx-auto">
|
||||
<label class="col-md-3 label-control" for="eventRegInput1">Full Name</label>
|
||||
<div class="col-md-9">
|
||||
<input type="text" id="eventInput1" class="form-control" placeholder="name"
|
||||
formControlName="fullname">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row mx-auto">
|
||||
<label class="col-md-3 label-control" for="eventRegInput2">Title</label>
|
||||
<div class="col-md-9">
|
||||
<input type="text" id="eventInput2" class="form-control" placeholder="title"
|
||||
formControlName="title">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row mx-auto">
|
||||
<label class="col-md-3 label-control" for="eventRegInput3">Company</label>
|
||||
<div class="col-md-9">
|
||||
<input type="text" id="eventInput3" class="form-control" placeholder="company"
|
||||
formControlName="company">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row mx-auto">
|
||||
<label class="col-md-3 label-control" for="eventRegInput4">Email</label>
|
||||
<div class="col-md-9">
|
||||
<input type="email" id="eventInput4" class="form-control" placeholder="email"
|
||||
formControlName="email">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row mx-auto">
|
||||
<label class="col-md-3 label-control" for="eventRegInput5">Contact Number</label>
|
||||
<div class="col-md-9">
|
||||
<input type="tel" id="eventInput5" class="form-control" formControlName="phone"
|
||||
placeholder="contact number">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row mx-auto last">
|
||||
<label class="col-md-3 label-control">Existing Customer</label>
|
||||
<div class="col-md-9">
|
||||
<div class="input-group col-md-9">
|
||||
<div class="d-inline-block custom-control custom-radio mr-1">
|
||||
<input type="radio" class="custom-control-input" value="yes" id="yes"
|
||||
formControlName="customer1">
|
||||
<label class="custom-control-label" for="yes">Yes</label>
|
||||
</div>
|
||||
<div class="d-inline-block custom-control custom-radio">
|
||||
<input type="radio" class="custom-control-input" value="no" id="no"
|
||||
formControlName="customer1">
|
||||
<label class="custom-control-label" for="no">No</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-actions text-center">
|
||||
<button type="button" class="btn btn-warning mr-1">
|
||||
<i class="feather ft-x"></i> Cancel
|
||||
</button>
|
||||
<button type="submit" class="btn btn-primary">
|
||||
<i class="la la-check"></i> Save
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- // Striped label form layout section end -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- ////////////////////////////////////////////////////////////////////////////-->
|
||||
@@ -0,0 +1,25 @@
|
||||
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
|
||||
|
||||
import { StripedLabelsComponent } from './striped-labels.component';
|
||||
|
||||
describe('StripedLabelsComponent', () => {
|
||||
let component: StripedLabelsComponent;
|
||||
let fixture: ComponentFixture<StripedLabelsComponent>;
|
||||
|
||||
beforeEach(waitForAsync(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ StripedLabelsComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(StripedLabelsComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,99 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
|
||||
import { NgBlockUI, BlockUI } from 'ng-block-ui';
|
||||
|
||||
@Component({
|
||||
selector: 'app-striped-labels',
|
||||
templateUrl: './striped-labels.component.html',
|
||||
styleUrls: ['./striped-labels.component.css']
|
||||
})
|
||||
export class StripedLabelsComponent implements OnInit {
|
||||
|
||||
@BlockUI('projectInfo') blockUIProjectInfo: NgBlockUI;
|
||||
@BlockUI('timesheet') blockUITimesheet: NgBlockUI;
|
||||
|
||||
public breadcrumb: any;
|
||||
customer1 = 'yes';
|
||||
options = {
|
||||
close: true,
|
||||
expand: true,
|
||||
minimize: true,
|
||||
reload: true
|
||||
};
|
||||
|
||||
projectInfo: FormGroup;
|
||||
timeSheet: FormGroup;
|
||||
eventRegistration: FormGroup;
|
||||
interestedIn = ['design', 'development', 'illustration', 'branding', 'video'];
|
||||
budget = ['less than 5000$', '5000$ - 10000$', '10000$ - 20000$', 'more than 20000$'];
|
||||
|
||||
constructor(private formBuilder: FormBuilder) { }
|
||||
|
||||
ngOnInit() {
|
||||
this.breadcrumb = {
|
||||
'mainlabel': 'Striped Label Forms',
|
||||
'links': [
|
||||
{
|
||||
'name': 'Home',
|
||||
'isLink': true,
|
||||
'link': '/dashboard/sales'
|
||||
},
|
||||
{
|
||||
'name': 'Form Layouts',
|
||||
'isLink': true,
|
||||
'link': '#'
|
||||
},
|
||||
{
|
||||
'name': 'Striped Label Forms',
|
||||
'isLink': true
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
this.projectInfo = this.formBuilder.group({
|
||||
firstName: ['', Validators.required],
|
||||
lastName: ['', Validators.required],
|
||||
email: ['', Validators.required],
|
||||
phone: ['', Validators.required],
|
||||
company: ['', Validators.required],
|
||||
interestedIn: ['', Validators.required],
|
||||
budget: ['', Validators.required],
|
||||
selectFile: ['', Validators.required],
|
||||
aboutProject: ['', Validators.required],
|
||||
});
|
||||
|
||||
this.timeSheet = this.formBuilder.group({
|
||||
employeeName: ['', Validators.required],
|
||||
projectname: ['', Validators.required],
|
||||
date: ['', Validators.required],
|
||||
ratePerHour: ['', Validators.required],
|
||||
startTime: ['', Validators.required],
|
||||
endTime: ['', Validators.required],
|
||||
notes: ['', Validators.required]
|
||||
});
|
||||
this.eventRegistration = this.formBuilder.group({
|
||||
fullname: ['', Validators.required],
|
||||
title: ['', Validators.required],
|
||||
company: ['', Validators.required],
|
||||
email: ['', Validators.required],
|
||||
phone: ['', Validators.required],
|
||||
customer1: ['', Validators.required]
|
||||
});
|
||||
}
|
||||
|
||||
reloadProjectInfo() {
|
||||
this.blockUIProjectInfo.start('Loading..');
|
||||
|
||||
setTimeout(() => {
|
||||
this.blockUIProjectInfo.stop();
|
||||
}, 2500);
|
||||
}
|
||||
|
||||
reloadTimesheet() {
|
||||
this.blockUITimesheet.start('Loading..');
|
||||
|
||||
setTimeout(() => {
|
||||
this.blockUITimesheet.stop();
|
||||
}, 2500);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,145 @@
|
||||
:host ::ng-deep .block-ui-wrapper {
|
||||
background: rgba(255, 249, 249, 0.5) !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .block-ui-wrapper {
|
||||
background: rgba(255, 249, 249, 0.5) !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .btn-light:not(:disabled):not(.disabled):active {
|
||||
color: unset !important;
|
||||
background-color: unset !important;
|
||||
border-color: #d3d9df !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .btn-light:hover:not(.disabled):active {
|
||||
background-color: #e2e6ea !important;
|
||||
border-color: #dae0e5 !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .btn-light {
|
||||
color: unset !important;
|
||||
background-color: unset !important;
|
||||
border-color: unset !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .bg-primary {
|
||||
background-color: #007bff !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .text-white {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .custom-day {
|
||||
text-align: center;
|
||||
padding: .185rem .25rem;
|
||||
display: inline-block;
|
||||
height: 2rem;
|
||||
width: 2rem;
|
||||
}
|
||||
|
||||
:host ::ng-deep .custom-day:active {
|
||||
color: #6d7183 !important;
|
||||
background-color: #fff !important;
|
||||
border-block-color: rgb(2, 117, 216) !important;
|
||||
|
||||
}
|
||||
|
||||
.bg-light {
|
||||
background-color: #f8f9fa !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .hidden {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.ngb-dp-weekday {
|
||||
color: #17a2b8;
|
||||
}
|
||||
|
||||
.ngb-dp-week-number,
|
||||
.ngb-dp-weekday {
|
||||
line-height: 2rem;
|
||||
text-align: center;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.ngb-datepicker-month-view {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngb-dp-header {
|
||||
background-color: var(--light) !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngb-dp-weekdays {
|
||||
background-color: var(--light);
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngb-dp-month-name {
|
||||
background-color: var(--light);
|
||||
}
|
||||
|
||||
.small {
|
||||
font-size: 80%;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.ngb-dp-day {
|
||||
cursor: pointer !important;
|
||||
}
|
||||
|
||||
.ngb-dp-month {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.btn-light:hover {
|
||||
color: #212529 !important;
|
||||
background-color: #e2e6ea !important;
|
||||
border-color: #dae0e5 !important;
|
||||
}
|
||||
|
||||
.ngb-datepicker-month-view {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.ngb-dp-header {
|
||||
border-bottom: 0;
|
||||
border-radius: .25rem .25rem 0 0;
|
||||
padding-top: .25rem;
|
||||
}
|
||||
|
||||
.ngb-dp-day,
|
||||
.ngb-dp-week-number,
|
||||
.ngb-dp-weekday {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
}
|
||||
|
||||
.custom-day {
|
||||
text-align: center;
|
||||
padding: 0.185rem 0.25rem;
|
||||
display: inline-block;
|
||||
height: 2rem;
|
||||
width: 2rem;
|
||||
}
|
||||
|
||||
.custom-day.focused {
|
||||
background-color: #e6e6e6;
|
||||
}
|
||||
|
||||
.custom-day.range,
|
||||
.custom-day:hover {
|
||||
background-color: rgb(2, 117, 216);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.custom-day.faded {
|
||||
background-color: rgba(2, 117, 216, 0.5);
|
||||
}
|
||||
|
||||
:host ::ng-deep .block-ui-wrapper {
|
||||
background: rgba(255, 249, 249, 0.5) !important;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,309 @@
|
||||
<div class="app-content content">
|
||||
<div class="content-wrapper">
|
||||
<div class="content-header row mb-1">
|
||||
<app-breadcrumb class="col-12" [breadcrumb]="breadcrumb"></app-breadcrumb>
|
||||
</div>
|
||||
<div class="content-body">
|
||||
<!-- Striped row layout section start -->
|
||||
<section id="striped-row-form-layouts">
|
||||
<div class="row">
|
||||
<div class="col-md-12" *blockUI="'projectInfo'; message: 'Loading'">
|
||||
<m-card [options]="options" (reloadFunction)="reloadProjectInfo($event)">
|
||||
<ng-container mCardHeaderTitle>
|
||||
Project Info
|
||||
</ng-container>
|
||||
<ng-container mCardBody>
|
||||
<div class="card-text">
|
||||
<p>Add <code>.striped-rows</code> to form tag to add striped rows. In this example
|
||||
<code>.form-horizontal</code>
|
||||
and <code>.form-bordered</code> is used to show the striped rows functionality.</p>
|
||||
</div>
|
||||
<form class="form form-horizontal striped-rows form-bordered" [formGroup]="projectInfo">
|
||||
<div class="form-body">
|
||||
<h4 class="form-section"><i class="feather ft-user"></i> Personal Info</h4>
|
||||
<div class="form-group row mx-auto">
|
||||
<label class="col-md-3 label-control" for="projectinput1">First Name</label>
|
||||
<div class="col-md-9">
|
||||
<input type="text" id="projectinput1" class="form-control" formControlName="firstName"
|
||||
placeholder="First Name">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row mx-auto">
|
||||
<label class="col-md-3 label-control" for="projectinput2">Last Name</label>
|
||||
<div class="col-md-9">
|
||||
<input type="text" id="projectinput2" class="form-control" formControlName="lastName"
|
||||
placeholder="Last Name">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row mx-auto">
|
||||
<label class="col-md-3 label-control" for="projectinput3">E-mail</label>
|
||||
<div class="col-md-9">
|
||||
<input type="text" id="projectinput3" class="form-control" formControlName="email"
|
||||
placeholder="E-mail">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row mx-auto last">
|
||||
<label class="col-md-3 label-control" for="projectinput4">Contact Number</label>
|
||||
<div class="col-md-9">
|
||||
<input type="text" id="projectinput4" class="form-control" formControlName="phone"
|
||||
placeholder="Phone">
|
||||
</div>
|
||||
</div>
|
||||
<h4 class="form-section"><i class="feather ft-clipboard"></i> Requirements</h4>
|
||||
<div class="form-group row mx-auto">
|
||||
<label class="col-md-3 label-control" for="projectinput5">Company</label>
|
||||
<div class="col-md-9">
|
||||
<input type="text" id="companyName" class="form-control" formControlName="company"
|
||||
placeholder="Company Name">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row mx-auto">
|
||||
<label class="col-md-3 label-control" for="projectinput6">Interested in</label>
|
||||
<div class="col-md-9">
|
||||
<select id="projectinput5" class="form-control" formControlName="interestedIn">
|
||||
<option *ngFor="let interest of interestedIn" [value]="interest">{{interest}}</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row mx-auto">
|
||||
<label class="col-md-3 label-control" for="projectinput7">Budget</label>
|
||||
<div class="col-md-9">
|
||||
<select id="projectinput6" class="form-control" formControlName="budget">
|
||||
<option *ngFor="let range of budget" [value]="range">{{range}}</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row mx-auto">
|
||||
<label class="col-md-3 label-control">Select File</label>
|
||||
<div class="col-md-9">
|
||||
<label id="projectinput8" class="file center-block">
|
||||
<input type="file" id="file" formControlName="selectFile">
|
||||
<span class="file-custom"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row last mx-auto">
|
||||
<label class="col-md-3 label-control" for="projectinput9">About Project</label>
|
||||
<div class="col-md-9">
|
||||
<textarea id="projectinput8" rows="5" class="form-control" formControlName="aboutProject"
|
||||
placeholder="About Project"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-actions">
|
||||
<button type="button" class="btn btn-warning mr-1">
|
||||
<i class="feather ft-x"></i> Cancel
|
||||
</button>
|
||||
<button type="submit" class="btn btn-primary">
|
||||
<i class="la la-check"></i> Save
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</ng-container>
|
||||
</m-card>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-12" *blockUI="'timesheet'; message: 'Loading'">
|
||||
<m-card [options]="options" (reloadFunction)="reloadTimesheet($event)">
|
||||
<ng-container mCardHeaderTitle>
|
||||
Timesheet
|
||||
</ng-container>
|
||||
<ng-container mCardBody>
|
||||
<div class="card-text">
|
||||
<p>Add <code>.striped-rows</code> to form tag to add striped rows. In this example icons are used
|
||||
with form controls to show the striped rows functionality.</p>
|
||||
</div>
|
||||
<form class="form form-horizontal striped-rows form-bordered" [formGroup]="timeSheet">
|
||||
<div class="form-body">
|
||||
<div class="form-group row mx-auto">
|
||||
<label class="col-md-3 label-control" for="timesheetinput1">Employee Name</label>
|
||||
<div class="col-md-9">
|
||||
<div class="position-relative has-icon-left">
|
||||
<input type="text" id="timesheetinput1" class="form-control" placeholder="employee name"
|
||||
formControlName="employeeName">
|
||||
<div class="form-control-position">
|
||||
<i class="feather ft-user"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row mx-auto">
|
||||
<label class="col-md-3 label-control" for="timesheetinput2">Project Name</label>
|
||||
<div class="col-md-9">
|
||||
<div class="position-relative has-icon-left">
|
||||
<input type="text" id="timesheetinput2" class="form-control" placeholder="project name"
|
||||
formControlName="projectname">
|
||||
<div class="form-control-position">
|
||||
<i class="la la-briefcase"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row mx-auto">
|
||||
<label class="col-md-3 label-control" for="timesheetinput3">Date</label>
|
||||
<div class="col-md-9">
|
||||
<div class="position-relative has-icon-left">
|
||||
<div class="input-group">
|
||||
<input class="form-control" placeholder="yyyy-mm-dd" name="dp"
|
||||
ngbDatepicker #d1="ngbDatepicker">
|
||||
<div class="input-group-append">
|
||||
<div class="input-group-text" (click)="d1.toggle()">
|
||||
<i class="fa fa-calendar" style="cursor: pointer;"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-control-position">
|
||||
<i class="feather ft-message-square"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row mx-auto">
|
||||
<label class="col-md-3 label-control">Rate Per Hour</label>
|
||||
<div class="col-md-9">
|
||||
<div class="input-group mt-0">
|
||||
<div class="input-group-prepend">
|
||||
<span class="input-group-text">$</span>
|
||||
</div>
|
||||
<input type="text" class="form-control" placeholder="Rate Per Hour"
|
||||
formControlName="ratePerHour">
|
||||
<div class="input-group-append">
|
||||
<span class="input-group-text">.00</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row mx-auto">
|
||||
<label class="col-md-3 label-control" for="timesheetinput5">Start Time</label>
|
||||
<div class="col-md-9">
|
||||
<div class="position-relative has-icon-left">
|
||||
<input type="time" id="timesheetinput5" class="form-control" formControlName="startTime">
|
||||
<div class="form-control-position">
|
||||
<i class="feather ft-clock"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row mx-auto">
|
||||
<label class="col-md-3 label-control" for="timesheetinput6">End Time</label>
|
||||
<div class="col-md-9">
|
||||
<div class="position-relative has-icon-left">
|
||||
<input type="time" id="timesheetinput6" class="form-control" formControlName="endTime">
|
||||
<div class="form-control-position">
|
||||
<i class="feather ft-clock"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row mx-auto last">
|
||||
<label class="col-md-3 label-control" for="timesheetinput7">Notes</label>
|
||||
<div class="col-md-9">
|
||||
<div class="position-relative has-icon-left">
|
||||
<textarea id="timesheetinput7" rows="5" class="form-control" formControlName="notes"
|
||||
placeholder="notes"></textarea>
|
||||
<div class="form-control-position">
|
||||
<i class="feather ft-file"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-actions text-right">
|
||||
<button type="button" class="btn btn-warning mr-1">
|
||||
<i class="feather ft-x"></i> Cancel
|
||||
</button>
|
||||
<button type="submit" class="btn btn-primary">
|
||||
<i class="la la-check"></i> Save
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</ng-container>
|
||||
</m-card>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row justify-content-md-center">
|
||||
<div class="col-md-6">
|
||||
<m-card>
|
||||
<ng-container mCardHeaderTitle>
|
||||
Event Registration
|
||||
</ng-container>
|
||||
<ng-container mCardBody>
|
||||
<div class="card-text">
|
||||
<p>Add <code>.striped-rows</code> to form tag to add striped rows. In this example centered card is
|
||||
used to show the striped rows functionality.</p>
|
||||
</div>
|
||||
<form class="form form-horizontal striped-rows form-bordered" [formGroup]="eventRegistration">
|
||||
<div class="form-body">
|
||||
<div class="form-group row mx-auto">
|
||||
<label class="col-md-3 label-control" for="eventRegInput1">Full Name</label>
|
||||
<div class="col-md-9">
|
||||
<input type="text" id="eventInput1" class="form-control" placeholder="name"
|
||||
formControlName="fullname">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row mx-auto">
|
||||
<label class="col-md-3 label-control" for="eventRegInput2">Title</label>
|
||||
<div class="col-md-9">
|
||||
<input type="text" id="eventInput2" class="form-control" placeholder="title"
|
||||
formControlName="title">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row mx-auto">
|
||||
<label class="col-md-3 label-control" for="eventRegInput3">Company</label>
|
||||
<div class="col-md-9">
|
||||
<input type="text" id="eventInput3" class="form-control" placeholder="company"
|
||||
formControlName="company">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row mx-auto">
|
||||
<label class="col-md-3 label-control" for="eventRegInput4">Email</label>
|
||||
<div class="col-md-9">
|
||||
<input type="email" id="eventInput4" class="form-control" placeholder="email"
|
||||
formControlName="email">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row mx-auto">
|
||||
<label class="col-md-3 label-control" for="eventRegInput5">Contact Number</label>
|
||||
<div class="col-md-9">
|
||||
<input type="tel" id="eventInput5" class="form-control" formControlName="phone"
|
||||
placeholder="contact number">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row mx-auto last">
|
||||
<label class="col-md-3 label-control">Existing Customer</label>
|
||||
<div class="col-md-9">
|
||||
<div class="input-group col-md-9">
|
||||
<div class="d-inline-block custom-control custom-radio mr-1">
|
||||
<input type="radio" class="custom-control-input" value="yes" id="yes"
|
||||
formControlName="customer1">
|
||||
<label class="custom-control-label" for="yes">Yes</label>
|
||||
</div>
|
||||
<div class="d-inline-block custom-control custom-radio">
|
||||
<input type="radio" class="custom-control-input" value="no" id="no"
|
||||
formControlName="customer1">
|
||||
<label class="custom-control-label" for="no">No</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-actions text-center">
|
||||
<button type="button" class="btn btn-warning mr-1">
|
||||
<i class="feather ft-x"></i> Cancel
|
||||
</button>
|
||||
<button type="submit" class="btn btn-primary">
|
||||
<i class="la la-check"></i> Save
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</ng-container>
|
||||
</m-card>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- // Striped row layout section end -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- ////////////////////////////////////////////////////////////////////////////-->
|
||||
@@ -0,0 +1,25 @@
|
||||
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
|
||||
|
||||
import { StripedRowsComponent } from './striped-rows.component';
|
||||
|
||||
describe('StripedRowsComponent', () => {
|
||||
let component: StripedRowsComponent;
|
||||
let fixture: ComponentFixture<StripedRowsComponent>;
|
||||
|
||||
beforeEach(waitForAsync(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ StripedRowsComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(StripedRowsComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,99 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
|
||||
import { NgBlockUI, BlockUI } from 'ng-block-ui';
|
||||
|
||||
@Component({
|
||||
selector: 'app-striped-rows',
|
||||
templateUrl: './striped-rows.component.html',
|
||||
styleUrls: ['./striped-rows.component.css']
|
||||
})
|
||||
export class StripedRowsComponent implements OnInit {
|
||||
|
||||
@BlockUI('projectInfo') blockUIProjectInfo: NgBlockUI;
|
||||
@BlockUI('timesheet') blockUITimesheet: NgBlockUI;
|
||||
|
||||
public breadcrumb: any;
|
||||
|
||||
options = {
|
||||
close: true,
|
||||
expand: true,
|
||||
minimize: true,
|
||||
reload: true
|
||||
};
|
||||
|
||||
projectInfo: FormGroup;
|
||||
timeSheet: FormGroup;
|
||||
eventRegistration: FormGroup;
|
||||
|
||||
interestedIn = ['design', 'development', 'illustration', 'branding', 'video'];
|
||||
budget = ['less than 5000$', '5000$ - 10000$', '10000$ - 20000$', 'more than 20000$'];
|
||||
|
||||
constructor(private formBuilder: FormBuilder) { }
|
||||
|
||||
ngOnInit() {
|
||||
this.breadcrumb = {
|
||||
'mainlabel': 'Striped Row Forms',
|
||||
'links': [
|
||||
{
|
||||
'name': 'Home',
|
||||
'isLink': true,
|
||||
'link': '/dashboard/sales'
|
||||
},
|
||||
{
|
||||
'name': 'Form Layouts',
|
||||
'isLink': true,
|
||||
'link': '#'
|
||||
},
|
||||
{
|
||||
'name': 'Striped Row Forms',
|
||||
'isLink': true
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
this.projectInfo = this.formBuilder.group({
|
||||
firstName: ['', Validators.required],
|
||||
lastName: ['', Validators.required],
|
||||
email: ['', Validators.required],
|
||||
phone: ['', Validators.required],
|
||||
company: ['', Validators.required],
|
||||
interestedIn: ['', Validators.required],
|
||||
budget: ['', Validators.required],
|
||||
selectFile: ['', Validators.required],
|
||||
aboutProject: ['', Validators.required],
|
||||
});
|
||||
|
||||
this.timeSheet = this.formBuilder.group({
|
||||
employeeName: ['', Validators.required],
|
||||
projectname: ['', Validators.required],
|
||||
date: ['', Validators.required],
|
||||
ratePerHour: ['', Validators.required],
|
||||
startTime: ['', Validators.required],
|
||||
endTime: ['', Validators.required],
|
||||
notes: ['', Validators.required]
|
||||
});
|
||||
this.eventRegistration = this.formBuilder.group({
|
||||
fullname: ['', Validators.required],
|
||||
title: ['', Validators.required],
|
||||
company: ['', Validators.required],
|
||||
email: ['', Validators.required],
|
||||
phone: ['', Validators.required],
|
||||
customer1: ['', Validators.required]
|
||||
});
|
||||
}
|
||||
reloadProjectInfo() {
|
||||
this.blockUIProjectInfo.start('Loading..');
|
||||
|
||||
setTimeout(() => {
|
||||
this.blockUIProjectInfo.stop();
|
||||
}, 2500);
|
||||
}
|
||||
|
||||
reloadTimesheet() {
|
||||
this.blockUITimesheet.start('Loading..');
|
||||
|
||||
setTimeout(() => {
|
||||
this.blockUITimesheet.stop();
|
||||
}, 2500);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user