first commit
This commit is contained in:
@@ -0,0 +1,55 @@
|
||||
.right-checkbox input[type='checkbox'],
|
||||
.right-checkbox .custom-control-indicator,
|
||||
.right-checkbox input[type='radio'],
|
||||
.right-radio input[type='checkbox'],
|
||||
.right-radio .custom-control-indicator,
|
||||
.right-radio input[type='radio'] {
|
||||
left: auto;
|
||||
top: auto;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.right-checkbox input[type='checkbox'],
|
||||
.right-checkbox .custom-control-label::before,
|
||||
.right-checkbox .custom-control-label::after,
|
||||
.right-checkbox input[type='radio'],
|
||||
.right-radio input[type='checkbox'],
|
||||
.right-radio .custom-control-label::before,
|
||||
.right-radio .custom-control-label::after,
|
||||
.right-radio input[type='radio'] {
|
||||
left: auto;
|
||||
right: 2%;
|
||||
}
|
||||
|
||||
.radio.right-radio label {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
/* iCheck */
|
||||
.skin [class*='icheckbox_'],
|
||||
.skin [class*='iradio_'],
|
||||
.icheck_square [class*='icheckbox_'],
|
||||
.icheck_square [class*='iradio_'] {
|
||||
margin-right: 0.6rem;
|
||||
}
|
||||
|
||||
.skin [class*='icheckbox_line'],
|
||||
.skin [class*='iradio_line'] {
|
||||
margin-bottom: 0.6rem;
|
||||
}
|
||||
|
||||
.state[class*='icheckbox_']:hover,
|
||||
.state[class*='iradio_']:hover {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/* Image Checkbox selected*/
|
||||
input[type='checkbox']:checked+img.img-thumbnail {
|
||||
background-color: #666EE8;
|
||||
color: #999966;
|
||||
border-color: #666EE8;
|
||||
}
|
||||
|
||||
:host ::ng-deep .block-ui-wrapper {
|
||||
background: rgba(255, 249, 249, 0.5) !important;
|
||||
}
|
||||
@@ -0,0 +1,598 @@
|
||||
<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 Checkbox start -->
|
||||
<section class="basic-checkbox" id="basic-checkbox">
|
||||
<div class="row">
|
||||
<div class="col-12 mt-3 mb-1">
|
||||
<h4 class="text-uppercase">Simple Checkboxes</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" matchHeight="card">
|
||||
<div class="col-xl-6 col-lg-12" *blockUI="'basicTable'; message: 'Loading'">
|
||||
<m-card [options]="options" (reloadFunction)="reloadBasicTable($event)">
|
||||
<ng-container mCardHeaderTitle>
|
||||
Basic Table
|
||||
</ng-container>
|
||||
<ng-container mCardBody>
|
||||
<div class="checkboxsas">
|
||||
<label>
|
||||
<input type="checkbox" value="">
|
||||
I am unchecked Checkbox
|
||||
</label>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<label>
|
||||
<input type="checkbox" value="" checked>
|
||||
I am checked Checkbox
|
||||
</label>
|
||||
</div>
|
||||
<div class="checkbox disabled">
|
||||
<label>
|
||||
<input type="checkbox" value="" disabled>
|
||||
I am disabled Checkbox
|
||||
</label>
|
||||
</div>
|
||||
<div class="checkbox disabled">
|
||||
<label>
|
||||
<input type="checkbox" value="" disabled checked>
|
||||
I am checked & disabled Checkbox
|
||||
</label>
|
||||
</div>
|
||||
</ng-container>
|
||||
</m-card>
|
||||
</div>
|
||||
<div class="col-xl-6 col-lg-12" *blockUI="'basicRightCheckbox'; message: 'Loading'">
|
||||
<m-card [options]="options" (reloadFunction)="reloadBasicRightCheckbox($event)">
|
||||
<ng-container mCardHeaderTitle>
|
||||
Basic Right Checkbox
|
||||
</ng-container>
|
||||
<ng-container mCardBody>
|
||||
<p> Simple Right side checkboxes with <code>.right-checkbox</code> wrapper class.</p>
|
||||
<div class="right-checkbox">
|
||||
<label>
|
||||
<input type="checkbox" value="">
|
||||
I am unchecked Checkbox
|
||||
</label>
|
||||
</div>
|
||||
<div class="right-checkbox">
|
||||
<label>
|
||||
<input type="checkbox" value="" checked>
|
||||
I am checked Checkbox
|
||||
</label>
|
||||
</div>
|
||||
<div class="right-checkbox disabled">
|
||||
<label>
|
||||
<input type="checkbox" value="" disabled>
|
||||
I am disabled Checkbox
|
||||
</label>
|
||||
</div>
|
||||
<div class="right-checkbox disabled">
|
||||
<label>
|
||||
<input type="checkbox" value="" disabled checked>
|
||||
I am checked & disabled Checkbox
|
||||
</label>
|
||||
</div>
|
||||
</ng-container>
|
||||
</m-card>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" matchHeight="card">
|
||||
<div class="col-xl-6 col-lg-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Custom Checkbox</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<p>Add <code>.custom-input.custom-checkbox</code> as a single wrapper & add
|
||||
<code><span class="custom-control-indicator"></span></code>
|
||||
for better output. Also use <code>.custom-control-description</code> class for checkbox
|
||||
description.</p>
|
||||
<div>
|
||||
<div class="custom-control custom-checkbox">
|
||||
<input type="checkbox" class="custom-control-input" name="customCheck" id="customCheck1">
|
||||
<label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="custom-control custom-checkbox">
|
||||
<input type="checkbox" class="custom-control-input" checked name="customCheck" id="customCheck2">
|
||||
<label class="custom-control-label" for="customCheck2">Custom checkbox checked</label>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="custom-control custom-checkbox">
|
||||
<input type="checkbox" class="custom-control-input" name="customCheck" disabled id="customCheck3">
|
||||
<label class="custom-control-label" for="customCheck3">Custom checkbox disabled</label>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="custom-control custom-checkbox">
|
||||
<input type="checkbox" class="custom-control-input" checked name="customCheck4" id="customCheck4"
|
||||
disabled>
|
||||
<label class="custom-control-label" for="fixed-layout">Custom checkbox checked &
|
||||
disabled</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-6 col-lg-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Custom Right Checkbox</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<p>Add <code>.custom-input.custom-checkbox</code> as a single wrapper & add
|
||||
<code><span class="custom-control-indicator"></span></code>
|
||||
for better output & wrap with <code>right-checkbox</code> for right aligned checkbox.</p>
|
||||
<div class="right-checkbox">
|
||||
<div class="custom-control custom-checkbox pl-0">
|
||||
<input type="checkbox" class="custom-control-input" name="customCheckRight"
|
||||
id="customCheckRight1">
|
||||
<label class="custom-control-label w-100" for="customCheckRight1">Custom checkbox</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-checkbox">
|
||||
<div class="custom-control custom-checkbox pl-0">
|
||||
<input type="checkbox" class="custom-control-input" name="customCheckRight" id="customCheckRight2"
|
||||
checked>
|
||||
<label class="custom-control-label w-100" for="customCheckRight2">Custom checkbox checked</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-checkbox disabled">
|
||||
<div class="custom-control custom-checkbox pl-0">
|
||||
<input type="checkbox" class="custom-control-input" name="customCheckRight" id="customCheckRight3"
|
||||
disabled>
|
||||
<label class="custom-control-label w-100" for="customCheckRight3">Custom checkbox disabled</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-checkbox disabled">
|
||||
<div class="custom-control custom-checkbox pl-0">
|
||||
<input type="checkbox" class="custom-control-input" checked name="customCheckRight"
|
||||
id="customCheckRight4" disabled="">
|
||||
<label class="custom-control-label w-100" for="customCheckRight4">Custom checkbox checked &
|
||||
disabled</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Basic Checkbox end -->
|
||||
|
||||
<!-- Basic Radio Buttons start -->
|
||||
<section class="basic-radios" id="basic-radios">
|
||||
<div class="row">
|
||||
<div class="col-12 mt-3 mb-1">
|
||||
<h4 class="text-uppercase">Simple Radio Buttons</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" matchHeight="card">
|
||||
<div class="col-xl-6 col-lg-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Basic Radio Buttons</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<div class="radio">
|
||||
<label>
|
||||
<input type="radio" name="radio" value="">
|
||||
I am unchecked Radio Button
|
||||
</label>
|
||||
</div>
|
||||
<div class="radio">
|
||||
<label>
|
||||
<input type="radio" name="radio" value="" checked>
|
||||
I am checked Radio Button
|
||||
</label>
|
||||
</div>
|
||||
<div class="radio disabled">
|
||||
<label>
|
||||
<input type="radio" name="radio" value="" disabled>
|
||||
I am disabled Radio Button
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-6 col-lg-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Basic Right Radio Buttons</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<p>Simple Radio Button with right align using <code>.right-radio</code> class.</p>
|
||||
<div class="right-radio">
|
||||
<label>
|
||||
<input type="radio" name="radio1" value="">
|
||||
I am unchecked Radio Button
|
||||
</label>
|
||||
</div>
|
||||
<div class="right-radio">
|
||||
<label>
|
||||
<input type="radio" name="radio1" value="" checked>
|
||||
I am checked Radio Button
|
||||
</label>
|
||||
</div>
|
||||
<div class="right-radio disabled">
|
||||
<label>
|
||||
<input type="radio" name="radio1" value="" disabled>
|
||||
I am disabled Radio Button
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" matchHeight="card">
|
||||
<div class="col-xl-6 col-lg-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Custom Radio Buttons</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<p>Add <code>.custom-input.custom-radio</code> as a single wrapper & add
|
||||
<code><span class="custom-control-indicator"></span></code>
|
||||
for better output. Also use <code>.custom-control-description</code> class for radio description.
|
||||
</p>
|
||||
<div>
|
||||
<div class="custom-control custom-radio">
|
||||
<input type="radio" class="custom-control-input" name="customRadio" id="customRadio1">
|
||||
<label class="custom-control-label" for="customRadio1">Toggle this custom radio</label>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="custom-control custom-radio">
|
||||
<input type="radio" class="custom-control-input" name="customRadio" id="customRadio2" checked>
|
||||
<label class="custom-control-label" for="customRadio2">Or toggle this other custom radio</label>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="custom-control custom-radio">
|
||||
<input type="radio" class="custom-control-input" name="customRadio" id="customRadio3" disabled>
|
||||
<label class="custom-control-label" for="customRadio3">Or toggle this other custom radio</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-6 col-lg-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Custom Right Radio Buttons</h4>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<p>Add <code>.c-input.c-radio</code> as a single wrapper & add
|
||||
<code><span class="c-indicator"></span></code>
|
||||
for better output & wrap with <code>right-radio</code> for right aligned radio.</p>
|
||||
<div class="right-radio">
|
||||
<div class="custom-control custom-radio pl-0">
|
||||
<input type="radio" class="custom-control-input" name="customRadioRight" id="customRadioRight1">
|
||||
<label class="custom-control-label w-100" for="customRadioRight1">Toggle this custom radio</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-radio">
|
||||
<div class="custom-control custom-radio pl-0">
|
||||
<input type="radio" class="custom-control-input" name="customRadioRight" id="customRadioRight2"
|
||||
checked>
|
||||
<label class="custom-control-label w-100" for="customRadioRight2">Or toggle this other custom
|
||||
radio</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-radio disabled">
|
||||
<div class="custom-control custom-radio pl-0">
|
||||
<input type="radio" class="custom-control-input" name="customRadioRight" id="customRadioRight3"
|
||||
disabled>
|
||||
<label class="custom-control-label w-100" for="customRadioRight3">Or toggle this other custom
|
||||
radio</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Basic Radio Buttons end -->
|
||||
|
||||
<!-- Color Checkboxes start -->
|
||||
<section class="input-type-options">
|
||||
<div class="row">
|
||||
<div class="col-12 mt-3 mb-1">
|
||||
<h4 class="text-uppercase">Color Checkboxes</h4>
|
||||
<p>Add <code>.bg-COLOR</code> to span to set according to theme color.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" matchHeight="card">
|
||||
<div class="col-xl-6 col-lg-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Template Color Checkbox</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<div>
|
||||
<div class="d-inline-block custom-control custom-checkbox mr-1">
|
||||
<input type="checkbox" class="custom-control-input bg-primary" name="colorCheck" id="colorCheck1">
|
||||
<label class="custom-control-label" for="colorCheck1">Primary Checkbox</label>
|
||||
</div>
|
||||
<div class="d-inline-block custom-control custom-checkbox mr-1">
|
||||
<input type="checkbox" class="custom-control-input bg-success" name="colorCheck" id="colorCheck2"
|
||||
checked>
|
||||
<label class="custom-control-label" for="colorCheck2">Success Checkbox</label>
|
||||
</div>
|
||||
<div class="d-inline-block custom-control custom-checkbox mr-1">
|
||||
<input type="checkbox" class="custom-control-input bg-danger" name="colorCheck" id="colorCheck3">
|
||||
<label class="custom-control-label" for="colorCheck3">Danger Checkbox</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-6 col-lg-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Another Template color checkbox example</h4>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<div>
|
||||
<div class="d-inline-block custom-control custom-checkbox mr-1">
|
||||
<input type="checkbox" class="custom-control-input bg-info" name="colorCheck" id="colorCheck4"
|
||||
checked>
|
||||
<label class="custom-control-label" for="colorCheck4">Information Checkbox</label>
|
||||
</div>
|
||||
<div class="d-inline-block custom-control custom-checkbox mr-1">
|
||||
<input type="checkbox" class="custom-control-input bg-warning" name="colorCheck" id="colorCheck5">
|
||||
<label class="custom-control-label" for="colorCheck5">Warning Checkbox</label>
|
||||
</div>
|
||||
<div class="d-inline-block custom-control custom-checkbox mr-1">
|
||||
<input type="checkbox" class="custom-control-input bg-purple" name="colorCheck" id="colorCheck6">
|
||||
<label class="custom-control-label" for="colorCheck6">Custom color purple</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Color Checkboxes end -->
|
||||
|
||||
<!-- Color Radio start -->
|
||||
<section class="color-radio">
|
||||
<div class="row">
|
||||
<div class="col-12 mt-3 mb-1">
|
||||
<h4 class="text-uppercase">Custom Bootstrap Color Radio Buttons</h4>
|
||||
<p>Add <code>.bg-COLOR</code> to span to set according to theme color.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" matchHeight="card">
|
||||
<div class="col-xl-6 col-lg-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Template color Radio Button</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<div>
|
||||
<div class="d-inline-block custom-control custom-radio mr-1">
|
||||
<input type="radio" class="custom-control-input bg-primary" name="colorRadio" id="colorRadio1">
|
||||
<label class="custom-control-label" for="colorRadio1">Primary Radio</label>
|
||||
</div>
|
||||
<div class="d-inline-block custom-control custom-radio mr-1">
|
||||
<input type="radio" class="custom-control-input bg-success" name="colorRadio" id="colorRadio2">
|
||||
<label class="custom-control-label" for="colorRadio2">Success Radio</label>
|
||||
</div>
|
||||
<div class="d-inline-block custom-control custom-radio mr-1">
|
||||
<input type="radio" class="custom-control-input bg-danger" name="colorRadio" id="colorRadio3">
|
||||
<label class="custom-control-label" for="colorRadio3">Danger Radio</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-6 col-lg-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Another Template color Radio example</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<div>
|
||||
<div class="d-inline-block custom-control custom-radio mr-1">
|
||||
<input type="radio" class="custom-control-input bg-info" name="colorRadio" id="colorRadio4">
|
||||
<label class="custom-control-label" for="colorRadio4">Information Radiobox</label>
|
||||
</div>
|
||||
<div class="d-inline-block custom-control custom-radio mr-1">
|
||||
<input type="radio" class="custom-control-input bg-warning" checked name="colorRadio"
|
||||
id="colorRadio5">
|
||||
<label class="custom-control-label" for="colorRadio5">Warning Radiobox</label>
|
||||
</div>
|
||||
<div class="d-inline-block custom-control custom-radio mr-1">
|
||||
<input type="radio" class="custom-control-input bg-pink" name="colorRadio" id="colorRadio6">
|
||||
<label class="custom-control-label" for="colorRadio6">Custom color pink</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Color Radio end -->
|
||||
|
||||
<!-- Inline Checkbox start -->
|
||||
<section class="inline-checkbox">
|
||||
<div class="row">
|
||||
<div class="col-12 mt-3 mb-1">
|
||||
<h4 class="text-uppercase">Inline Checkboxes</h4>
|
||||
<p>Add <code>.inline</code> class to the checkbox wrapper for inline checkbox.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Custom Inline Checkboxes</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<div class="d-inline-block custom-control custom-checkbox mr-1">
|
||||
<input type="checkbox" class="custom-control-input" name="colorCheck" id="checkbox1">
|
||||
<label class="custom-control-label" for="checkbox1">Unchecked custom checkbox</label>
|
||||
</div>
|
||||
<div class="d-inline-block custom-control custom-checkbox mr-1">
|
||||
<input type="checkbox" class="custom-control-input" name="colorCheck" checked id="checkbox2">
|
||||
<label class="custom-control-label" for="checkbox2">Checked custom checkbox</label>
|
||||
</div>
|
||||
<div class="d-inline-block custom-control custom-checkbox mr-1">
|
||||
<input type="checkbox" class="custom-control-input" name="colorCheck" id="checkbox3" disabled>
|
||||
<label class="custom-control-label" for="checkbox3">Disabled custom checkbox</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Inline Checkbox end -->
|
||||
|
||||
<!-- Inline Radio start -->
|
||||
<section class="inline-radio">
|
||||
<div class="row">
|
||||
<div class="col-12 mt-3 mb-1">
|
||||
<h4 class="text-uppercase">Inline Radio Buttons</h4>
|
||||
<p>Add <code>.inline</code> class to the radio wrapper.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" matchHeight="card">
|
||||
<div class="col-lg-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Custom Inline Radio</h4>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<div class="d-inline-block custom-control custom-radio mr-1">
|
||||
<input type="radio" class="custom-control-input" name="colorRadio" id="radio1">
|
||||
<label class="custom-control-label" for="radio1">Unchecked custom radio</label>
|
||||
</div>
|
||||
<div class="d-inline-block custom-control custom-radio mr-1">
|
||||
<input type="radio" class="custom-control-input" name="colorRadio" id="radio2" checked>
|
||||
<label class="custom-control-label" for="radio2" checked>Checked custom radio</label>
|
||||
</div>
|
||||
<div class="d-inline-block custom-control custom-radio mr-1">
|
||||
<input type="radio" class="custom-control-input" name="colorRadio" id="radio3" disabled>
|
||||
<label class="custom-control-label" for="radio3" disabled>Disabled custom radio</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Inline Radio end -->
|
||||
|
||||
<!-- Image Checkbox start -->
|
||||
<section class="image-checkbox">
|
||||
<div class="row">
|
||||
<div class="col-12 mt-3 mb-1">
|
||||
<h4 class="text-uppercase">Image Checkbox</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xl-6 col-lg-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Default Image Checkbox</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<p>Add <code>.img-thumbnail</code> class to <img> tag after input type checkbox.</p>
|
||||
<div class="form-group">
|
||||
<label class="btn">
|
||||
<input type="checkbox" name="chk1" id="item1" value="val1" class="hidden">
|
||||
<img src="../../../assets/images/portrait/small/avatar-s-1.png" alt="..."
|
||||
class="check img-thumbnail">
|
||||
</label>
|
||||
<label class="btn">
|
||||
<input type="checkbox" name="chk2" id="item2" value="val2" class="hidden" checked>
|
||||
<img src="../../../assets/images/portrait/small/avatar-s-2.png" alt="..." class="img-thumbnail">
|
||||
</label>
|
||||
<label class="btn">
|
||||
<input type="checkbox" name="chk3" id="item3" value="val3" class="hidden">
|
||||
<img src="../../../assets/images/portrait/small/avatar-s-3.png" alt="..."
|
||||
class="check img-thumbnail">
|
||||
</label>
|
||||
<label class="btn">
|
||||
<input type="checkbox" name="chk4" id="item4" value="val4" class="hidden">
|
||||
<img src="../../../assets/images/portrait/small/avatar-s-4.png" alt="..." class="img-thumbnail">
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-6 col-lg-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Basic Image Checkbox</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<p>Add <code>.btn-COLORNAME</code> class to wrapper to use theme colors.</p>
|
||||
<div class="form-group">
|
||||
<label class="btn">
|
||||
<input type="checkbox" name="chk5" id="item5" value="val1" class="hidden">
|
||||
<img src="../../../assets/images/portrait/small/avatar-s-5.png" alt="..." class="img-thumbnail">
|
||||
</label>
|
||||
<label class="btn">
|
||||
<input type="checkbox" name="chk6" id="item6" value="val2" class="hidden">
|
||||
<img src="../../../assets/images/portrait/small/avatar-s-6.png" alt="..."
|
||||
class="check img-thumbnail">
|
||||
</label>
|
||||
<label class="btn">
|
||||
<input type="checkbox" name="chk7" id="item7" value="val3" class="hidden" checked>
|
||||
<img src="../../../assets/images/portrait/small/avatar-s-7.png" alt="..." class="img-thumbnail">
|
||||
</label>
|
||||
<label class="btn">
|
||||
<input type="checkbox" name="chk8" id="item8" value="val4" class="hidden">
|
||||
<img src="../../../assets/images/portrait/small/avatar-s-8.png" alt="..." class="img-thumbnail">
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Image Checkbox end -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- ////////////////////////////////////////////////////////////////////////////-->
|
||||
@@ -0,0 +1,25 @@
|
||||
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
|
||||
|
||||
import { CheckboxesRadiosComponent } from './checkboxes-radios.component';
|
||||
|
||||
describe('CheckboxesRadiosComponent', () => {
|
||||
let component: CheckboxesRadiosComponent;
|
||||
let fixture: ComponentFixture<CheckboxesRadiosComponent>;
|
||||
|
||||
beforeEach(waitForAsync(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ CheckboxesRadiosComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(CheckboxesRadiosComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,63 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { NgBlockUI, BlockUI } from 'ng-block-ui';
|
||||
|
||||
@Component({
|
||||
selector: 'app-checkboxes-radios',
|
||||
templateUrl: './checkboxes-radios.component.html',
|
||||
styleUrls: ['./checkboxes-radios.component.css']
|
||||
})
|
||||
export class CheckboxesRadiosComponent implements OnInit {
|
||||
|
||||
@BlockUI('basicTable') blockUIBasicTable: NgBlockUI;
|
||||
@BlockUI('basicRightCheckbox') blockUIBasicRightCheckbox: NgBlockUI;
|
||||
|
||||
public breadcrumb: any;
|
||||
|
||||
options = {
|
||||
close: true,
|
||||
expand: true,
|
||||
minimize: true,
|
||||
reload: true
|
||||
};
|
||||
constructor() { }
|
||||
|
||||
ngOnInit() {
|
||||
this.breadcrumb = {
|
||||
'mainlabel': 'Checkboxes and Radio Buttons',
|
||||
'links': [
|
||||
{
|
||||
'name': 'Home',
|
||||
'isLink': true,
|
||||
'link': '/dashboard/sales'
|
||||
},
|
||||
{
|
||||
'name': 'Form',
|
||||
'isLink': true,
|
||||
'link': '#'
|
||||
},
|
||||
{
|
||||
'name': 'Checkboxes and Radio Buttons',
|
||||
'isLink': false
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
|
||||
reloadBasicTable() {
|
||||
this.blockUIBasicTable.start('Loading..');
|
||||
|
||||
setTimeout(() => {
|
||||
this.blockUIBasicTable.stop();
|
||||
}, 2500);
|
||||
}
|
||||
|
||||
reloadBasicRightCheckbox() {
|
||||
this.blockUIBasicRightCheckbox.start('Loading..');
|
||||
|
||||
setTimeout(() => {
|
||||
this.blockUIBasicRightCheckbox.stop();
|
||||
}, 2500);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -0,0 +1,139 @@
|
||||
: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;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
: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);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,194 @@
|
||||
<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">
|
||||
<!-- Input Mask start -->
|
||||
<section class="inputmask" id="inputmask">
|
||||
<div class="row">
|
||||
<div class="col-12" *blockUI="'inputMask'; message: 'Loading'">
|
||||
<m-card [options]="options" (reloadFunction)="reloadInputMask($event)">
|
||||
<ng-container mCardHeaderTitle>
|
||||
Input Mask
|
||||
</ng-container>
|
||||
<ng-container mCardBody>
|
||||
<form (ngSubmit)="onCustomFormSubmit()" #vform="ngForm">
|
||||
<div class="row">
|
||||
<div class="col-xl-6 col-lg-12">
|
||||
<div class="form-group">
|
||||
<h5 for="date">Date</h5>
|
||||
<div class="input-group">
|
||||
<input class="form-control" placeholder="yyyy-mm-dd" name="dp" [(ngModel)]="popupModel"
|
||||
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>
|
||||
<!-- <small class="form-text text-muted danger" *ngIf="date.errors?.date">date error</small> -->
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<h5 for="dateISO">DateISO</h5>
|
||||
<input type="text" class="form-control date-inputmask" ngModel name="dateISO"
|
||||
#dateISO="ngModel" placeholder="dateISO" dateISO />
|
||||
<small class="form-text text-muted danger" *ngIf="dateISO.errors?.dateISO">dateISO
|
||||
error</small>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<h5 for="maxDate">MaxDate(2019-06-11)</h5>
|
||||
<div class="input-group">
|
||||
<input class="form-control" placeholder="maxDate 2019-06-11" name="dp" ngModel name="maxDate"
|
||||
#maxDate="ngModel" placeholder="maxDate 2019-06-11" maxDate="2019-06-11"
|
||||
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>
|
||||
<small class="form-text text-muted danger" *ngIf="maxDate.errors?.maxDate">maxDate
|
||||
error</small>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<h5 for="minDate">MinDate(2019-06-11)</h5>
|
||||
<div class="input-group">
|
||||
<input class="form-control" placeholder="minDate 2019-06-11" name="dp" ngModel name="minDate"
|
||||
#minDate="ngModel" placeholder="minDate 2019-06-11" minDate="2019-06-11"
|
||||
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>
|
||||
<small class="form-text text-muted danger" *ngIf="minDate.errors?.minDate">minDate
|
||||
error</small>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<h5 for="required">Required</h5>
|
||||
<input type="text" class="form-control date-inputmask" ngModel name="required"
|
||||
#required="ngModel" required placeholder="required" />
|
||||
<small class="form-text text-muted danger" *ngIf="required.errors?.required">required
|
||||
error</small>
|
||||
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<h5 for="minlength">Minlength</h5>
|
||||
<input type="text" class="form-control date-inputmask" ngModel name="minlength"
|
||||
#minlength="ngModel" placeholder="minlength 5" minlength="5" />
|
||||
<small class="form-text text-muted danger" *ngIf="minlength.errors?.minlength">minlength
|
||||
error</small>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<h5 for="maxlength">Maxlength</h5>
|
||||
<input type="text" class="form-control date-inputmask" ngModel name="maxlength"
|
||||
#maxlength="ngModel" placeholder="maxlength 5" maxlength="5" />
|
||||
<small class="form-text text-muted danger" *ngIf="maxlength.errors?.maxlength">required
|
||||
error</small>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<h5 for="rangelength">Rangelength</h5>
|
||||
<input type="text" class="form-control date-inputmask" ngModel name="rangelength"
|
||||
#rangelength="ngModel" placeholder="rangeLength [5, 9]" [rangeLength]="[5, 9]" />
|
||||
<small class="form-text text-muted danger" *ngIf="rangelength.errors?.rangeLength">rangelength
|
||||
error</small>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<h5 for="number">Number</h5>
|
||||
<input type="text" class="form-control date-inputmask" ngModel name="number" #number="ngModel"
|
||||
placeholder="number" number />
|
||||
<small class="form-text text-muted danger" *ngIf="number.errors?.number">number error</small>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<h5 for="max">Max</h5>
|
||||
<input type="text" class="form-control date-inputmask" ngModel name="max" #max="ngModel"
|
||||
placeholder="max 10" max="10" />
|
||||
<small class="form-text text-muted danger" *ngIf="max.errors?.max">max error</small>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<h5 for="min">Min</h5>
|
||||
<input type="text" class="form-control date-inputmask" ngModel name="min" #min="ngModel"
|
||||
placeholder="min 10" min="10" />
|
||||
<small class="form-text text-muted danger" *ngIf="min.errors?.min">min error</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-6 col-lg-12">
|
||||
<div class="form-group">
|
||||
<h5 for="pattern">Pattern</h5>
|
||||
<input type="text" class="form-control date-inputmask" ngModel name="pattern"
|
||||
#pattern="ngModel" placeholder="[a-z]{6}" pattern="[a-z]{6}" />
|
||||
<small class="form-text text-muted danger" *ngIf="pattern.errors?.pattern">pattern
|
||||
error</small>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<h5 for="email">Email</h5>
|
||||
<input type="text" class="form-control date-inputmask" ngModel name="email" #email="ngModel"
|
||||
placeholder="email" email />
|
||||
<small class="form-text text-muted danger" *ngIf="email.errors?.email">email error</small>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="equal">equal</label>
|
||||
<input type="text" class="form-control" ngModel name="equal" #equal="ngModel" placeholder="equal to name" equal="name" />
|
||||
<small class="form-text text-muted danger" *ngIf="equal.errors?.equal">equal error</small>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="notEqual">notEqual</label>
|
||||
<input type="text" class="form-control" ngModel name="notEqual" #notEqual="ngModel" placeholder="not equal to name" notEqual="name"
|
||||
/>
|
||||
<small class="form-text text-muted danger" *ngIf="notEqual.errors?.notEqual">notEqual error</small>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="password">equalTo</label>
|
||||
<input type="text" class="form-control" ngModel name="password" #password="ngModel" placeholder="password" required />
|
||||
<small class="form-text text-muted danger" *ngIf="password.errors?.required">required error</small>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<input type="text" class="form-control" ngModel name="equalTo" #equalTo="ngModel" placeholder="confirm password" [equalTo]="password"
|
||||
/>
|
||||
<small class="form-text text-muted danger" *ngIf="equalTo.errors?.equalTo">equalTo error</small>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="oldPassword">notEqualTo</label>
|
||||
<input type="text" class="form-control" ngModel name="oldPassword" #oldPassword="ngModel" placeholder="password" required
|
||||
/>
|
||||
<small class="form-text text-muted danger" *ngIf="oldPassword.errors?.required">required error</small>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<input type="text" class="form-control" ngModel name="notEqualTo" #notEqualTo="ngModel" placeholder="confirm password" [notEqualTo]="oldPassword"
|
||||
/>
|
||||
<small class="form-text text-muted danger" *ngIf="notEqualTo.errors?.notEqualTo">notEqualTo error</small>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<h5 for="gt">Gt</h5>
|
||||
<input type="text" class="form-control date-inputmask" ngModel name="gt" #gt="ngModel"
|
||||
placeholder="gt 20" gt="20" />
|
||||
<small class="form-text text-muted danger" *ngIf="gt.errors?.gt">gt error</small>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<h5 for="lt">Lt</h5>
|
||||
<input type="text" class="form-control date-inputmask" ngModel name="lt" #lt="ngModel"
|
||||
placeholder="lt 10" lt="10" />
|
||||
<small class="form-text text-muted danger" *ngIf="lt.errors?.lt">lt error</small>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<h5 for="url">Url</h5>
|
||||
<input type="text" class="form-control date-inputmask" ngModel name="url" #url="ngModel"
|
||||
placeholder="url" url />
|
||||
<small class="form-text text-muted danger" *ngIf="url.errors?.url">url error</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</ng-container>
|
||||
</m-card>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,25 @@
|
||||
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
|
||||
|
||||
import { ExtendedinputsComponent } from './extendedinputs.component';
|
||||
|
||||
describe('ExtendedinputsComponent', () => {
|
||||
let component: ExtendedinputsComponent;
|
||||
let fixture: ComponentFixture<ExtendedinputsComponent>;
|
||||
|
||||
beforeEach(waitForAsync(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ ExtendedinputsComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(ExtendedinputsComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,75 @@
|
||||
import { Component, OnInit, ViewChild } from '@angular/core';
|
||||
import { FormControl, FormGroup, Validators, NgForm } from '@angular/forms';
|
||||
import { BlockUI, NgBlockUI } from 'ng-block-ui';
|
||||
import { NgbDateStruct, NgbTimeStruct, NgbDate } from '@ng-bootstrap/ng-bootstrap';
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'app-extendedinputs',
|
||||
templateUrl: './extendedinputs.component.html',
|
||||
styleUrls: ['./extendedinputs.component.css']
|
||||
})
|
||||
export class ExtendedinputsComponent implements OnInit {
|
||||
@BlockUI('inputMask') blockUIInputMask: NgBlockUI;
|
||||
|
||||
public breadcrumb: any;
|
||||
|
||||
options = {
|
||||
close: true,
|
||||
expand: true,
|
||||
minimize: true,
|
||||
reload: true
|
||||
};
|
||||
d3: any;
|
||||
d2: any;
|
||||
d1: any;
|
||||
|
||||
model: NgbDateStruct;
|
||||
popupModel;
|
||||
|
||||
@ViewChild('f', { read: true }) floatingLabelForm: NgForm;
|
||||
@ViewChild('vform', { read: true }) validationForm: FormGroup;
|
||||
inputForm: FormGroup;
|
||||
constructor() { }
|
||||
|
||||
ngOnInit() {
|
||||
this.inputForm = new FormGroup({
|
||||
'email': new FormControl(null, [Validators.required, Validators.email]),
|
||||
'password': new FormControl(null, [Validators.required, Validators.minLength(4), Validators.maxLength(24)]),
|
||||
'textArea': new FormControl(null, [Validators.required]),
|
||||
'radioOption': new FormControl('Option one is this')
|
||||
}, { updateOn: 'blur' });
|
||||
|
||||
this.breadcrumb = {
|
||||
'mainlabel': 'Extended Inputs',
|
||||
'links': [
|
||||
{
|
||||
'name': 'Home',
|
||||
'isLink': true,
|
||||
'link': '/dashboard/sales'
|
||||
},
|
||||
{
|
||||
'name': 'Extra Components',
|
||||
'isLink': true,
|
||||
'link': '#'
|
||||
},
|
||||
{
|
||||
'name': 'Extended Inputs',
|
||||
'isLink': false
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
|
||||
onCustomFormSubmit() {
|
||||
this.validationForm.reset();
|
||||
}
|
||||
|
||||
reloadInputMask() {
|
||||
this.blockUIInputMask.start('Loading..');
|
||||
|
||||
setTimeout(() => {
|
||||
this.blockUIInputMask.stop();
|
||||
}, 2500);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
import { FormElementsModule } from './form-elements.module';
|
||||
|
||||
describe('FormElementsModule', () => {
|
||||
let formElementsModule: FormElementsModule;
|
||||
|
||||
beforeEach(() => {
|
||||
formElementsModule = new FormElementsModule();
|
||||
});
|
||||
|
||||
it('should create an instance', () => {
|
||||
expect(formElementsModule).toBeTruthy();
|
||||
});
|
||||
});
|
||||
74
src/app/content/forms/form-elements/form-elements.module.ts
Normal file
74
src/app/content/forms/form-elements/form-elements.module.ts
Normal file
@@ -0,0 +1,74 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { FormInputsComponent } from './form-inputs/form-inputs.component';
|
||||
import { InputGroupsComponent } from './input-groups/input-groups.component';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
|
||||
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
|
||||
import { UiSwitchModule } from 'ngx-ui-switch';
|
||||
import { InputGridComponent } from './input-grid/input-grid.component';
|
||||
import { CheckboxesRadiosComponent } from './checkboxes-radios/checkboxes-radios.component';
|
||||
import { SwitchComponent } from './switch/switch.component';
|
||||
import { SelectComponent } from './select/select.component';
|
||||
import { NgMultiSelectDropDownModule } from 'ng-multiselect-dropdown';
|
||||
import { CardModule } from '../../partials/general/card/card.module';
|
||||
import { BreadcrumbModule } from 'src/app/_layout/breadcrumb/breadcrumb.module';
|
||||
import { NgSelectModule } from '@ng-select/ng-select';
|
||||
import { BlockUIModule } from 'ng-block-ui';
|
||||
import { CustomFormsModule } from 'ngx-custom-validators';
|
||||
import { BlockTemplateComponent } from '../../../_layout/blockui/block-template.component';
|
||||
import { MatchHeightModule } from '../../partials/general/match-height/match-height.module';
|
||||
import { ExtendedinputsComponent } from './extendedinputs/extendedinputs.component';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
FormsModule,
|
||||
CardModule,
|
||||
UiSwitchModule,
|
||||
MatchHeightModule,
|
||||
NgSelectModule,
|
||||
BreadcrumbModule,
|
||||
NgbModule,
|
||||
CustomFormsModule,
|
||||
ReactiveFormsModule,
|
||||
BlockUIModule.forRoot({
|
||||
template: BlockTemplateComponent
|
||||
}),
|
||||
NgMultiSelectDropDownModule.forRoot(),
|
||||
RouterModule.forChild([
|
||||
{
|
||||
path: 'form-inputs',
|
||||
component: FormInputsComponent
|
||||
},
|
||||
{
|
||||
path: 'input-groups',
|
||||
component: InputGroupsComponent
|
||||
},
|
||||
{
|
||||
path: 'input-grid',
|
||||
component: InputGridComponent
|
||||
},
|
||||
{
|
||||
path: 'checkboxes-radios',
|
||||
component: CheckboxesRadiosComponent
|
||||
},
|
||||
{
|
||||
path: 'switch',
|
||||
component: SwitchComponent
|
||||
},
|
||||
{
|
||||
path: 'select',
|
||||
component: SelectComponent
|
||||
},
|
||||
{
|
||||
path: 'extendedinputs',
|
||||
component: ExtendedinputsComponent
|
||||
},
|
||||
])
|
||||
],
|
||||
declarations: [FormInputsComponent, InputGroupsComponent, InputGridComponent,
|
||||
CheckboxesRadiosComponent, SwitchComponent, SelectComponent, ExtendedinputsComponent],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class FormElementsModule { }
|
||||
@@ -0,0 +1,143 @@
|
||||
: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;
|
||||
}
|
||||
|
||||
select.form-control:not([size]):not([multiple]).input-sm {
|
||||
padding: unset !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;
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,25 @@
|
||||
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
|
||||
|
||||
import { FormInputsComponent } from './form-inputs.component';
|
||||
|
||||
describe('FormInputsComponent', () => {
|
||||
let component: FormInputsComponent;
|
||||
let fixture: ComponentFixture<FormInputsComponent>;
|
||||
|
||||
beforeEach(waitForAsync(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ FormInputsComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(FormInputsComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,63 @@
|
||||
import { Component, ElementRef, OnDestroy, OnInit, ViewChild } from '@angular/core';
|
||||
import { FormControl, FormGroup, Validators } from '@angular/forms';
|
||||
|
||||
declare var require: any;
|
||||
const formInputData = require('../../../../../assets/data/forms/form-elements/form-inputs.json');
|
||||
|
||||
@Component({
|
||||
selector: 'app-form-inputs',
|
||||
templateUrl: './form-inputs.component.html',
|
||||
styleUrls: ['./form-inputs.component.css']
|
||||
})
|
||||
export class FormInputsComponent implements OnInit {
|
||||
|
||||
@ViewChild('labelImport', { static: true })
|
||||
labelImport: ElementRef;
|
||||
|
||||
formImport: FormGroup;
|
||||
fileToUpload: File = null;
|
||||
|
||||
public breadcrumb: any;
|
||||
multipleMultiSelect: any;
|
||||
public multipleSelectArray = formInputData.multipleSelectArray;
|
||||
public focucedElement = '';
|
||||
|
||||
constructor() {
|
||||
this.formImport = new FormGroup({
|
||||
importFile: new FormControl('', Validators.required)
|
||||
});
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.breadcrumb = {
|
||||
'mainlabel': 'Form Basic Elements',
|
||||
'links': [
|
||||
{
|
||||
'name': 'Home',
|
||||
'isLink': true,
|
||||
'link': '/dashboard/sales'
|
||||
},
|
||||
{
|
||||
'name': 'Form',
|
||||
'isLink': true,
|
||||
'link': '#'
|
||||
},
|
||||
{
|
||||
'name': 'Basic Elements',
|
||||
'isLink': false
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
|
||||
focusElement(focucedElement: any) {
|
||||
this.focucedElement = focucedElement;
|
||||
}
|
||||
|
||||
onFileChange(files: FileList) {
|
||||
this.labelImport.nativeElement.innerText = Array.from(files)
|
||||
.map(f => f.name)
|
||||
.join(', ');
|
||||
this.fileToUpload = files.item(0);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
:host ::ng-deep .block-ui-wrapper {
|
||||
background: rgba(255, 249, 249, 0.5) !important;
|
||||
}
|
||||
:host ::ng-deep .btn-warning {
|
||||
border-color: #ff7216 !important;
|
||||
background-color: #ff9149 !important;
|
||||
color: #FFFFFF;
|
||||
margin-left: 4px;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,25 @@
|
||||
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
|
||||
|
||||
import { InputGridComponent } from './input-grid.component';
|
||||
|
||||
describe('InputGridComponent', () => {
|
||||
let component: InputGridComponent;
|
||||
let fixture: ComponentFixture<InputGridComponent>;
|
||||
|
||||
beforeEach(waitForAsync(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ InputGridComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(InputGridComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,62 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { NgBlockUI, BlockUI } from 'ng-block-ui';
|
||||
|
||||
@Component({
|
||||
selector: 'app-input-grid',
|
||||
templateUrl: './input-grid.component.html',
|
||||
styleUrls: ['./input-grid.component.css']
|
||||
})
|
||||
export class InputGridComponent implements OnInit {
|
||||
|
||||
@BlockUI('horizontalGrid') blockUIHorizontalGrid: NgBlockUI;
|
||||
@BlockUI('gridWithRowLabel') blockUIGridWithRowLabel: NgBlockUI;
|
||||
|
||||
public breadcrumb: any;
|
||||
options = {
|
||||
close: true,
|
||||
expand: true,
|
||||
minimize: true,
|
||||
reload: true
|
||||
};
|
||||
constructor() { }
|
||||
|
||||
ngOnInit() {
|
||||
this.breadcrumb = {
|
||||
'mainlabel': 'Input Grid',
|
||||
'links': [
|
||||
{
|
||||
'name': 'Home',
|
||||
'isLink': true,
|
||||
'link': '/dashboard/sales'
|
||||
},
|
||||
{
|
||||
'name': 'Form',
|
||||
'isLink': true,
|
||||
'link': '#'
|
||||
},
|
||||
{
|
||||
'name': 'Input Grid',
|
||||
'isLink': false
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
|
||||
reloadHorizontalGrid() {
|
||||
this.blockUIHorizontalGrid.start('Loading..');
|
||||
|
||||
setTimeout(() => {
|
||||
this.blockUIHorizontalGrid.stop();
|
||||
}, 2500);
|
||||
}
|
||||
|
||||
reloadGridWithRowLabel() {
|
||||
this.blockUIGridWithRowLabel.start('Loading..');
|
||||
|
||||
setTimeout(() => {
|
||||
this.blockUIGridWithRowLabel.stop();
|
||||
}, 2500);
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
.btn {
|
||||
border-radius: 0rem !important;
|
||||
}
|
||||
.buttons-border-dropdown {
|
||||
border-right: none !important;
|
||||
}
|
||||
.input-group > .form-control {
|
||||
height: 40px;
|
||||
}
|
||||
:host ::ng-deep .dropdown .dropdown-menu {
|
||||
margin: -0.1rem -3.7rem 0 !important;
|
||||
}
|
||||
:host ::ng-deep .custom-checkbox {
|
||||
margin-bottom: 3px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
:host ::ng-deep .custom-control {
|
||||
margin-bottom: 3px;
|
||||
min-height: auto;
|
||||
margin-left: 5px;
|
||||
}
|
||||
:host ::ng-deep .switch.switch-small small {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
margin-right: 1px;
|
||||
margin-top: 1px;
|
||||
}
|
||||
:host ::ng-deep .input-group-prepend {
|
||||
height: 40px;
|
||||
}
|
||||
:host ::ng-deep .input-group-height{
|
||||
|
||||
height: 50px !important;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,25 @@
|
||||
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
|
||||
|
||||
import { InputGroupsComponent } from './input-groups.component';
|
||||
|
||||
describe('InputGroupsComponent', () => {
|
||||
let component: InputGroupsComponent;
|
||||
let fixture: ComponentFixture<InputGroupsComponent>;
|
||||
|
||||
beforeEach(waitForAsync(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ InputGroupsComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(InputGroupsComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,36 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-input-groups',
|
||||
templateUrl: './input-groups.component.html',
|
||||
styleUrls: ['./input-groups.component.css']
|
||||
})
|
||||
export class InputGroupsComponent implements OnInit {
|
||||
|
||||
public breadcrumb: any;
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngOnInit() {
|
||||
this.breadcrumb = {
|
||||
'mainlabel': 'Input Groups',
|
||||
'links': [
|
||||
{
|
||||
'name': 'Home',
|
||||
'isLink': true,
|
||||
'link': '/dashboard/sales'
|
||||
},
|
||||
{
|
||||
'name': 'Form',
|
||||
'isLink': true,
|
||||
'link': '#'
|
||||
},
|
||||
{
|
||||
'name': 'Input Groups',
|
||||
'isLink': false
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
:host ::ng-deep .block-ui-wrapper {
|
||||
background: rgba(255, 249, 249, 0.5) !important;
|
||||
}
|
||||
295
src/app/content/forms/form-elements/select/select.component.html
Normal file
295
src/app/content/forms/form-elements/select/select.component.html
Normal file
@@ -0,0 +1,295 @@
|
||||
<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 Select start -->
|
||||
<section class="basic-select2">
|
||||
<div class="row" matchHeight="card">
|
||||
<div class="col-xl-6 col-lg-12" *blockUI="'singleSelect'; message: 'Loading'">
|
||||
<m-card [options]="options" (reloadFunction)="reloadSingleSelect($event)">
|
||||
<ng-container mCardHeaderTitle>
|
||||
Single Select
|
||||
</ng-container>
|
||||
<ng-container mCardBody>
|
||||
<p>Select can take a regular select box with search options within the Select control.</p>
|
||||
<div class="form-group">
|
||||
<div class="text-bold-600 font-medium-2">
|
||||
Basic Select
|
||||
</div>
|
||||
<p>Use <code>ng-select</code> for basic select control.</p>
|
||||
<ng-select [items]="singleSelectArray" [searchable]="true" bindLabel="item_text"
|
||||
placeholder="Select city" [(ngModel)]="singlebasicSelected">
|
||||
</ng-select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="text-bold-600 font-medium-2">
|
||||
Disabled Mode
|
||||
</div>
|
||||
<p>Select will respond to the <code>disabled</code> attribute on <code><ng-select></code>
|
||||
elements. You can also initialize Select with <code>[disabled]: true</code> to get the same
|
||||
effect.</p>
|
||||
<ng-select [items]="singleSelectArray" [disabled]="true" bindLabel="item_text"
|
||||
placeholder="Select city" [(ngModel)]="singleDisableMode">
|
||||
</ng-select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="text-bold-600 font-medium-2">
|
||||
Hiding the search box
|
||||
</div>
|
||||
<p>Select allows you to hide the search box depending on the number of options which are
|
||||
displayed. In this example, we use the value <code>[searchable]="false"</code> to tell Select to never
|
||||
display the search box.</p>
|
||||
<ng-select [items]="singleSelectArray" [searchable]="false" bindLabel="item_text"
|
||||
placeholder="Select city" [(ngModel)]="singleHideSearch">
|
||||
</ng-select>
|
||||
</div>
|
||||
</ng-container>
|
||||
</m-card>
|
||||
</div>
|
||||
<div class="col-xl-6 col-lg-12" *blockUI="'multipleSelect'; message: 'Loading'">
|
||||
<m-card [options]="options" (reloadFunction)="reloadMultipleSelect($event)">
|
||||
<ng-container mCardHeaderTitle>
|
||||
Multiple Select
|
||||
</ng-container>
|
||||
<ng-container mCardBody>
|
||||
<p>Select also supports multi-value select boxes. The select below is declared with the
|
||||
<code>multiple</code>
|
||||
attribute.</p>
|
||||
<div class="form-group">
|
||||
<div class="text-bold-600 font-medium-2">
|
||||
Basic Multi Select
|
||||
</div>
|
||||
<p>Use <code>ng-select</code> for basic select control. Use <code>[multiple]="true"</code>
|
||||
attribute for multiple select box.</p>
|
||||
<ng-select [items]="multipleSelectArray" [multiple]="true" bindLabel="item_text"
|
||||
placeholder="Select cities" [(ngModel)]="multipleMultiSelect">
|
||||
</ng-select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="text-bold-600 font-medium-2">
|
||||
Disabled Mode
|
||||
</div>
|
||||
<p>Select will respond to the <code>disabled</code> attribute on <code><ng-select></code>
|
||||
elements. You can also initialize Select with <code>[disabled]: true</code> to get the same
|
||||
effect.</p>
|
||||
<ng-select [items]="multipleSelectArray" [disabled]="true" bindLabel="item_text" [multiple]="true"
|
||||
placeholder="Select cities" [(ngModel)]="multipleDisableMode">
|
||||
</ng-select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="text-bold-600 font-medium-2">
|
||||
Multi Select with Label
|
||||
</div>
|
||||
<p>Select multi-value select boxes can set restrictions regarding the maximum number of options
|
||||
selected. The select below is declared with the <code>[multiple]="true"</code> attribute with
|
||||
<code>maxSelectedItems</code>
|
||||
in the select options.</p>
|
||||
<ng-select [items]="multipleSelectArray" bindLabel="item_text" [multiple]="true"
|
||||
placeholder="Select cities" [(ngModel)]="multipleWithlabel" maxSelectedItems="2">
|
||||
</ng-select>
|
||||
</div>
|
||||
</ng-container>
|
||||
</m-card>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Basic Select end -->
|
||||
|
||||
|
||||
|
||||
<!-- Programmatic control start -->
|
||||
<section class="programmatic-control">
|
||||
<div class="col-12 mt-3 mb-1">
|
||||
<h4 class="text-uppercase">Programmatic control</h4>
|
||||
</div>
|
||||
<div class="row" matchHeight="card">
|
||||
<div class="col-xl-6 col-lg-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">DOM Events</h4>
|
||||
</div>
|
||||
<div class="card-content collapse show">
|
||||
<div class="card-body">
|
||||
<p>Select will trigger some events on the original select element, allowing you to integrate it with
|
||||
other components.</p>
|
||||
<div class="form-group">
|
||||
<div class="text-bold-600 font-medium-2">
|
||||
DOM Single
|
||||
</div>
|
||||
<ng-select [items]="eventArray" placeholder="Select city" bindLabel="item_text"
|
||||
[(ngModel)]="singleEvent" (open)="openSingleEvent()" (close)="closeSingleEvent()"
|
||||
(change)="onChange()">
|
||||
</ng-select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="text-bold-600 font-medium-2">
|
||||
DOM Multiple
|
||||
</div>
|
||||
<ng-select [items]="eventArray" placeholder="Select city" [multiple]="true" bindLabel="item_text"
|
||||
[(ngModel)]="multipleEvent" (open)="openSingleEvent()" (close)="closeSingleEvent()"
|
||||
(change)="onChange()">
|
||||
</ng-select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-6 col-lg-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Programmatic access</h4>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="card-content collapse show">
|
||||
<div class="card-body">
|
||||
<p>Select supports methods that allow programmatic control of the component.</p>
|
||||
<div class="form-group">
|
||||
<div class="text-bold-600 font-medium-2">
|
||||
Programmatic Single
|
||||
</div>
|
||||
<ng-select #ngSelect [items]="programmaticArray" [searchable]="true" bindLabel="item_text"
|
||||
placeholder="Select city" [(ngModel)]="programmaticSingle">
|
||||
</ng-select>
|
||||
</div>
|
||||
<div class="btn-toolbar" role="toolbar" aria-label="Programmatic control">
|
||||
<div class="btn-group btn-group-sm" aria-label="Set Select option">
|
||||
<button class="js-programmatic-set-val btn btn-outline-primary" (click)="setCalifornia()">
|
||||
Set "California"
|
||||
</button>
|
||||
</div>
|
||||
<div class="btn-group btn-group-sm" role="group" aria-label="Open and close">
|
||||
<button class="js-programmatic-open btn btn-outline-primary" (click)="ngSelect.toggle()">
|
||||
Open
|
||||
</button>
|
||||
<button class="js-programmatic-close btn btn-outline-primary" (click)="ngSelect.close()">
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group mt-1">
|
||||
<div class="text-bold-600 font-medium-2">
|
||||
Programmatic Multiple
|
||||
</div>
|
||||
<ng-select [items]="multipleSelectArray" [multiple]="true" bindLabel="item_text"
|
||||
placeholder="Programmatic Events" [(ngModel)]="programmaticMultiple">
|
||||
</ng-select>
|
||||
</div>
|
||||
<div class="btn-group btn-group-sm" role="group"
|
||||
aria-label="Programmatic setting and clearing Select options">
|
||||
<button type="button" class="js-programmatic-multi-set-val btn btn-outline-primary"
|
||||
(click)="setCaliforniaAlabama()">
|
||||
Set to California and Alabama
|
||||
</button>
|
||||
<button type="button" class="js-programmatic-multi-clear btn btn-outline-primary"
|
||||
(click)="programmaticMultipleClear()">
|
||||
Clear
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Programmatic control end -->
|
||||
|
||||
|
||||
|
||||
<!-- Advance Options start -->
|
||||
<section class="advance-options">
|
||||
<div class="row">
|
||||
<div class="col-12 mt-3 mb-1">
|
||||
<h4 class="text-uppercase">Advance Options</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" matchHeight="card">
|
||||
<div class="col-xl-6 col-lg-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Single Select Options</h4>
|
||||
</div>
|
||||
<div class="card-content collapse show">
|
||||
<div class="card-body">
|
||||
<div class="form-group">
|
||||
<div class="text-bold-600 font-medium-2">
|
||||
Loading Array Data
|
||||
</div>
|
||||
<p>Select provides a way to load the data from a local array. You can provide initial selections
|
||||
with array data by providing the option tag for the selected values, similar to how it would be
|
||||
done for a standard select.</p>
|
||||
<ng-select [items]="loadArray" [searchable]="true" bindLabel="item_text" placeholder="Select city"
|
||||
[(ngModel)]="loadData">
|
||||
</ng-select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<div class="text-bold-600 font-medium-2">
|
||||
Templating
|
||||
</div>
|
||||
<p>Various display options of the Select component can be changed: You can access the
|
||||
<code><ng-select ></code>
|
||||
element and any attributes on those elements using .element.
|
||||
Templating is primarily controlled by the
|
||||
<code>ng-template</code>
|
||||
options.</p>
|
||||
<ng-select [items]="templatingArray" [searchable]="true" bindLabel="item_text" bindValue="item_text"
|
||||
placeholder="Select city" [(ngModel)]="template">
|
||||
<ng-template ng-label-tmp let-item="item">
|
||||
<img height="15" width="15" [src]="item.avtar" />
|
||||
<b>{{item.item_text}}</b>
|
||||
</ng-template>
|
||||
<ng-template ng-option-tmp let-item="item" let-index="index">
|
||||
<img height="15" width="15" [src]="item.avtar" />
|
||||
<b>{{item.item_text}}</b>
|
||||
</ng-template>
|
||||
</ng-select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-6 col-lg-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Multiple Select Options</h4>
|
||||
</div>
|
||||
<div class="card-content collapse show">
|
||||
<div class="card-body">
|
||||
<div class="form-group">
|
||||
<div class="text-bold-600 font-medium-2">
|
||||
Tagging Support
|
||||
</div>
|
||||
<p>Select can be used to quickly set up fields used for tagging. That when
|
||||
tagging is enabled the user can select from pre-existing options or create a new tag by picking
|
||||
the first choice, which is what the user has typed into the search box so far.></p>
|
||||
<ng-select [items]="taggingSupportArray" [addTag]="true" bindLabel="item_text" bindValue="item_id"
|
||||
[multiple]="true" placeholder="Select city or add custom tag" [(ngModel)]="selectedTag">
|
||||
</ng-select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<div class="text-bold-600 font-medium-2">
|
||||
Customizing How Results Are Matched
|
||||
</div>
|
||||
<p>Unlike other dropdowns on this page, this one matches options only if the term appears in the
|
||||
beginning of the string as opposed to anywhere: This custom matcher uses a compatibility module
|
||||
that is only bundled in the full version of Select. You also have the option of using a more
|
||||
complex matcher.</p>
|
||||
<ng-select [items]="matchedResultArray" [loading]="cityLoading" [searchable]="true"
|
||||
bindLabel="item_text" placeholder="Search by 'a'" [searchFn]="customSearchFn">
|
||||
</ng-select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Advance Options end -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- ////////////////////////////////////////////////////////////////////////////-->
|
||||
@@ -0,0 +1,25 @@
|
||||
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
|
||||
|
||||
import { SelectComponent } from './select.component';
|
||||
|
||||
describe('SelectComponent', () => {
|
||||
let component: SelectComponent;
|
||||
let fixture: ComponentFixture<SelectComponent>;
|
||||
|
||||
beforeEach(waitForAsync(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ SelectComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(SelectComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
160
src/app/content/forms/form-elements/select/select.component.ts
Normal file
160
src/app/content/forms/form-elements/select/select.component.ts
Normal file
@@ -0,0 +1,160 @@
|
||||
import { Component, OnInit, ViewChild } from '@angular/core';
|
||||
import { NgSelectDataService, City } from '../../../../_services/ng-select-data.service';
|
||||
import { NgBlockUI, BlockUI } from 'ng-block-ui';
|
||||
|
||||
declare var require: any;
|
||||
const selectData = require('../../../../../assets/data/forms/form-elements/select.json');
|
||||
|
||||
@Component({
|
||||
selector: 'app-select',
|
||||
templateUrl: './select.component.html',
|
||||
styleUrls: ['./select.component.css']
|
||||
})
|
||||
export class SelectComponent implements OnInit {
|
||||
|
||||
@ViewChild('ng-select') ngSelect;
|
||||
@BlockUI('singleSelect') blockUISingleSelect: NgBlockUI;
|
||||
@BlockUI('multipleSelect') blockUIMultipleSelect: NgBlockUI;
|
||||
|
||||
public breadcrumb: any;
|
||||
options = {
|
||||
close: true,
|
||||
expand: true,
|
||||
minimize: true,
|
||||
reload: true
|
||||
};
|
||||
|
||||
singlebasicSelected: any;
|
||||
singleDisableMode: any;
|
||||
singleHideSearch: any;
|
||||
|
||||
multipleMultiSelect: any;
|
||||
multipleDisableMode: any;
|
||||
multipleWithlabel: any;
|
||||
|
||||
singleEvent: any;
|
||||
multipleEvent: any;
|
||||
|
||||
programmaticSingle: any;
|
||||
programmaticMultiple: any;
|
||||
|
||||
loadData: any;
|
||||
|
||||
template: any;
|
||||
|
||||
singleSelectBackgroundColor: any;
|
||||
singleSelectMenuBackgroundColor: any;
|
||||
|
||||
selectedTag: number[];
|
||||
|
||||
matchedResultArray: City[] = [];
|
||||
cityLoading = false;
|
||||
|
||||
public singleSelectArray = selectData.singleSelectArray;
|
||||
public multipleSelectArray = selectData.multipleSelectArray;
|
||||
public eventArray = selectData.eventArray;
|
||||
public programmaticArray = selectData.programmaticArray;
|
||||
public loadArray = selectData.loadArray;
|
||||
public templatingArray = selectData.templatingArray;
|
||||
public singleSelect = selectData.singleSelect;
|
||||
public taggingSupportArray = selectData.taggingSupportArray;
|
||||
|
||||
|
||||
constructor(private dataService: NgSelectDataService) { }
|
||||
|
||||
ngOnInit() {
|
||||
this.breadcrumb = {
|
||||
'mainlabel': 'Select',
|
||||
'links': [
|
||||
{
|
||||
'name': 'Home',
|
||||
'isLink': true,
|
||||
'link': '/dashboard/sales'
|
||||
},
|
||||
{
|
||||
'name': 'Form',
|
||||
'isLink': true,
|
||||
'link': '#'
|
||||
},
|
||||
{
|
||||
'name': 'Select',
|
||||
'isLink': false
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
this.singlebasicSelected = this.singleSelectArray[0].item_text;
|
||||
this.singleDisableMode = this.singleSelectArray[0].item_text;
|
||||
this.singleHideSearch = this.singleSelectArray[0].item_text;
|
||||
|
||||
this.multipleMultiSelect = [{ item_id: 1, item_text: 'Alaska' }, { item_id: 2, item_text: 'California' }];
|
||||
this.multipleDisableMode = [{ item_id: 1, item_text: 'Alaska' }, { item_id: 2, item_text: 'California' }];
|
||||
this.multipleWithlabel = [];
|
||||
|
||||
this.singleEvent = this.eventArray[0].item_text;
|
||||
this.multipleEvent = [];
|
||||
|
||||
this.programmaticSingle = this.programmaticArray[0].item_text;
|
||||
this.programmaticMultiple = [];
|
||||
|
||||
this.loadData = this.loadArray[2].item_text;
|
||||
|
||||
this.template = this.templatingArray[0].item_text;
|
||||
|
||||
this.singleSelectBackgroundColor = this.singleSelect[0].item_text;
|
||||
this.singleSelectMenuBackgroundColor = this.singleSelect[0].item_text;
|
||||
|
||||
this.loadCity();
|
||||
}
|
||||
|
||||
openSingleEvent() {
|
||||
window.alert('Open Event Fired.');
|
||||
}
|
||||
closeSingleEvent() {
|
||||
window.alert('Close Event Fired.');
|
||||
}
|
||||
onChange() {
|
||||
window.alert('Select Event Fired');
|
||||
}
|
||||
|
||||
setCalifornia() {
|
||||
this.programmaticSingle = this.programmaticArray[1].item_text;
|
||||
}
|
||||
|
||||
setCaliforniaAlabama() {
|
||||
this.programmaticMultiple = [{ item_id: 2, item_text: 'California' }, { item_id: 5, item_text: 'Alabama' }];
|
||||
}
|
||||
programmaticMultipleClear() {
|
||||
this.programmaticMultiple = [];
|
||||
}
|
||||
|
||||
customSearchFn(term: string, item: City) {
|
||||
term = term.toLocaleLowerCase();
|
||||
return item.item_text.toLocaleLowerCase().indexOf(term) > -1;
|
||||
}
|
||||
|
||||
loadCity() {
|
||||
this.cityLoading = true;
|
||||
this.dataService.getPeople().subscribe(x => {
|
||||
this.matchedResultArray = x;
|
||||
this.cityLoading = false;
|
||||
});
|
||||
}
|
||||
|
||||
reloadSingleSelect() {
|
||||
this.blockUISingleSelect.start('Loading..');
|
||||
|
||||
setTimeout(() => {
|
||||
this.blockUISingleSelect.stop();
|
||||
}, 2500);
|
||||
}
|
||||
|
||||
reloadMultipleSelect() {
|
||||
this.blockUIMultipleSelect.start('Loading..');
|
||||
|
||||
setTimeout(() => {
|
||||
this.blockUIMultipleSelect.stop();
|
||||
}, 2500);
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
:host ::ng-deep .block-ui-wrapper {
|
||||
background: rgba(255, 249, 249, 0.5) !important;
|
||||
}
|
||||
:host ::ng-deep .ml-2{
|
||||
margin-top: 3px;
|
||||
}
|
||||
:host ::ng-deep .ls-1{
|
||||
margin-top: 10px;
|
||||
}
|
||||
:host ::ng-deep .ds-1{
|
||||
margin-top: 6px;
|
||||
}
|
||||
:host ::ng-deep .switch-medium .switch.switch-medium {
|
||||
height: 30px;
|
||||
border-radius: 30px;
|
||||
top: 8px;
|
||||
}
|
||||
:host ::ng-deep .switch-large .switch.switch-large {
|
||||
height: 40px;
|
||||
border-radius: 40px;
|
||||
top: 15px;
|
||||
}
|
||||
:host ::ng-deep .switch-small .switch.switch-small {
|
||||
height: 20px;
|
||||
border-radius: 20px;
|
||||
top: 4px;
|
||||
}
|
||||
285
src/app/content/forms/form-elements/switch/switch.component.html
Normal file
285
src/app/content/forms/form-elements/switch/switch.component.html
Normal file
@@ -0,0 +1,285 @@
|
||||
<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">
|
||||
<!-- Switchery Switch start -->
|
||||
<section class="switchery-toggle" id="switchery-toggle">
|
||||
<div class="row">
|
||||
<div class="col-12 mt-3 mb-1">
|
||||
<h4 class="text-uppercase">Switchery Toggle</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" matchHeight="card">
|
||||
<div class="col-lg-6 col-md-12" *blockUI="'basicSwitcheryToggle'; message: 'Loading'">
|
||||
<m-card [options]="options" (reloadFunction)="reloadBasicSwitcheryToggle($event)">
|
||||
<ng-container mCardHeaderTitle>
|
||||
Basic Switchery Toggle
|
||||
</ng-container>
|
||||
<ng-container mCardBody>
|
||||
<p>To set Switchery toggle, add <code>.switchery</code> class to checkbox.</p>
|
||||
<div class="form-group pb-1">
|
||||
<div class="float-left">
|
||||
<ui-switch class="switchery" switchColor="white" color="rgb(55, 188, 155)" checked></ui-switch>
|
||||
</div>
|
||||
<label class="font-medium-2 text-bold-600 ml-1 ml-2">Switchery Default</label>
|
||||
</div>
|
||||
<div class="form-group pb-1">
|
||||
<div class="float-left">
|
||||
<ui-switch class="switchery" switchColor="white" color="rgb(55, 188, 155)"></ui-switch>
|
||||
</div>
|
||||
<label class="font-medium-2 text-bold-600 ml-1">Switchery Unchecked</label>
|
||||
</div>
|
||||
<div class="form-group pb-1">
|
||||
<div class="float-left">
|
||||
<ui-switch class="switchery" switchColor="white" color="rgb(55, 188, 155)" disabled checked>
|
||||
</ui-switch>
|
||||
</div>
|
||||
<label class="font-medium-2 text-bold-600 ml-1">Switchery Checked & Disabled</label>
|
||||
</div>
|
||||
<div class="form-group pb-1">
|
||||
<div class="float-left">
|
||||
<ui-switch class="switchery" switchColor="white" color="rgb(55, 188, 155)" disabled></ui-switch>
|
||||
</div>
|
||||
<label class="font-medium-2 text-bold-600 ml-1">Switchery Disable</label>
|
||||
</div>
|
||||
</ng-container>
|
||||
</m-card>
|
||||
</div>
|
||||
<div class="col-lg-6 col-md-12" *blockUI="'rightSwitcheryToggle'; message: 'Loading'">
|
||||
<m-card [options]="options" (reloadFunction)="reloadRightSwitcheryToggle($event)">
|
||||
<ng-container mCardHeaderTitle>
|
||||
Right Switchery Toggle
|
||||
</ng-container>
|
||||
<ng-container mCardBody>
|
||||
<p> To set Switchery toggle to right, wrap checkbox with <code>.float-right</code> class.</p>
|
||||
<div class="form-group pb-1">
|
||||
<div class="float-right">
|
||||
<ui-switch class="switchery" switchColor="white" color="rgb(55, 188, 155)" checked></ui-switch>
|
||||
</div>
|
||||
<label for="switchery0" class="font-medium-2 text-bold-600">Switchery Default</label>
|
||||
</div>
|
||||
<div class="form-group pb-1">
|
||||
<div class="float-right">
|
||||
<ui-switch class="switchery" switchColor="white" color="rgb(55, 188, 155)"></ui-switch>
|
||||
</div>
|
||||
<label for="switchery01" class="font-medium-2 text-bold-600">Switchery Unchecked</label>
|
||||
</div>
|
||||
<div class="form-group pb-1">
|
||||
<div class="float-right">
|
||||
<ui-switch class="switchery" switchColor="white" color="rgb(55, 188, 155)" checked disabled>
|
||||
</ui-switch>
|
||||
</div>
|
||||
<label for="switchery02" class="font-medium-2 text-bold-600">Switchery Checked & Disabled</label>
|
||||
</div>
|
||||
<div class="form-group pb-1">
|
||||
<div class="float-right">
|
||||
<ui-switch class="switchery" switchColor="white" color="rgb(55, 188, 155)" disabled>
|
||||
</ui-switch>
|
||||
</div>
|
||||
<label for="switchery03" class="font-medium-2 text-bold-600">Switchery Disabled</label>
|
||||
</div>
|
||||
</ng-container>
|
||||
</m-card>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" matchHeight="card">
|
||||
<div class="col-lg-6 col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Switchery Sizes</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<div class="form-group pb-1">
|
||||
<p class="text-muted"> To set Large Switchery toggle, add <code>data-size="lg"</code> to checkbox
|
||||
with <code>.switchery</code> class.</p>
|
||||
<div class="float-left">
|
||||
<ui-switch class="switchery" switchColor="white" size="large" color="rgb(55, 188, 155)" checked>
|
||||
</ui-switch>
|
||||
</div>
|
||||
<label for="switcherySize" class="font-medium-2 text-bold-600 ml-1 ls-1">Large Switchery</label>
|
||||
</div>
|
||||
<div class="form-group mt-1 pb-1">
|
||||
<p class="text-muted"> To set Default Switchery toggle, add <code>.switchery</code> class to
|
||||
checkbox.</p>
|
||||
<div class="float-left">
|
||||
<ui-switch class="switchery" switchColor="white" color="rgb(55, 188, 155)" checked></ui-switch>
|
||||
</div>
|
||||
<label for="switcherySize1" class="font-medium-2 text-bold-600 ml-1 ds-1">Default Switchery</label>
|
||||
</div>
|
||||
<div class="form-group mt-1 pb-1">
|
||||
<p class="text-muted"> To set Small Switchery toggle, add <code>data-size="sm"</code> to checkbox
|
||||
with <code>.switchery</code> class.</p>
|
||||
<div class="float-left">
|
||||
<ui-switch class="switchery" switchColor="white" size="small" color="rgb(55, 188, 155)" checked>
|
||||
</ui-switch>
|
||||
</div>
|
||||
<label for="switcherySize2" class="font-medium-2 text-bold-600 ml-1">Small Switchery</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6 col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Switchery Labels on both sides</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<div class="form-group pb-1">
|
||||
|
||||
<label for="switcherySize10" class="font-medium-2 text-bold-600 mr-1">Left Label</label>
|
||||
<ui-switch class="switchery switch-large" switchColor="white" size="large" color="rgb(55, 188, 155)" checked>
|
||||
</ui-switch>
|
||||
<label for="switcherySize10" class="font-medium-2 text-bold-600 ml-1">Right Label</label>
|
||||
</div>
|
||||
<div class="form-group mt-1 pb-1">
|
||||
<label for="switcherySize11" class="font-medium-2 text-bold-600 mr-1">Left Label</label>
|
||||
<ui-switch class="switchery switch-medium" switchColor="white" color="rgb(55, 188, 155)" checked></ui-switch>
|
||||
<label for="switcherySize11" class="font-medium-2 text-bold-600 ml-1">Right Label</label>
|
||||
</div>
|
||||
<div class="form-group mt-1 pb-1">
|
||||
<label for="switcherySize12" class="font-medium-2 text-bold-600 mr-1">Left Label</label>
|
||||
<ui-switch class="switchery switch-small" switchColor="white" size="small" color="rgb(55, 188, 155)" checked>
|
||||
</ui-switch>
|
||||
<label for="switcherySize12" class="font-medium-2 text-bold-600 ml-1">Right Label</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Template Color Switchery start -->
|
||||
<section class="theme-switchery" id="theme-switchery">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<h4>Template Color Switchery</h4>
|
||||
<hr>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" matchHeight="card">
|
||||
<div class="col-lg-6 col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Color Switchery</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<div class="form-group pb-1">
|
||||
<div class="float-left">
|
||||
<ui-switch class="switchery" switchColor="white" color="rgb(150, 122, 220)" checked></ui-switch>
|
||||
</div>
|
||||
<label for="switcheryColor" class="card-title ml-1 ds-1">Primary Color Switchery</label>
|
||||
</div>
|
||||
<div class="form-group mt-1 pb-1">
|
||||
<div class="float-left">
|
||||
<ui-switch class="switchery" switchColor="white" color="rgb(55, 188, 155)" checked></ui-switch>
|
||||
</div>
|
||||
<label for="switcheryColor4" class="card-title ml-1 ds-1">Success Switchery</label>
|
||||
</div>
|
||||
<div class="form-group mt-1 pb-1">
|
||||
<div class="float-left">
|
||||
<ui-switch class="switchery" switchColor="white" color="rgb(218, 68, 83)" checked></ui-switch>
|
||||
</div>
|
||||
<label for="switcheryColor3" class="card-title ml-1 ds-1">Danger Switchery</label>
|
||||
</div>
|
||||
<div class="form-group mt-1 pb-1">
|
||||
<div class="float-left">
|
||||
<ui-switch class="switchery" switchColor="white" color="rgb(59, 175, 218)" checked></ui-switch>
|
||||
</div>
|
||||
<label for="switcheryColor2" class="card-title ml-1 ds-1">Info Switchery</label>
|
||||
</div>
|
||||
<div class="form-group mt-1 pb-1">
|
||||
<div class="float-left">
|
||||
<ui-switch class="switchery" switchColor="white" color="rgb(246, 187, 66)" checked></ui-switch>
|
||||
</div>
|
||||
<label for="switcheryColor1" class="card-title ml-1 ds-1">Warning Switchery</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6 col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">COLOR SWITCHERY WITH LABELS ON BOTH SIDES</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<div class="form-group row overflow-hidden">
|
||||
<div class="col-sm-4 col-5">
|
||||
<label for="switcheryColor10" class="card-title primary ">Primary Color Label &
|
||||
Switchery</label>
|
||||
</div>
|
||||
<div class="col-sm-4 col-2 text-center mb-1">
|
||||
<ui-switch class="switchery" switchColor="white" color="rgb(150, 122, 220)" checked></ui-switch>
|
||||
</div>
|
||||
<div class="col-sm-4 col-5">
|
||||
<label for="switcheryColor10" class="card-title primary ">Primary Color Label &
|
||||
Switchery</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row overflow-hidden mt-1">
|
||||
<div class="col-sm-4 col-5">
|
||||
<label for="switcheryColor14" class="card-title success">Success Color Label &
|
||||
Switchery</label>
|
||||
</div>
|
||||
<div class="col-sm-4 col-2 text-center mb-1">
|
||||
<ui-switch class="switchery" switchColor="white" color="rgb(55, 188, 155)" checked></ui-switch>
|
||||
</div>
|
||||
<div class="col-sm-4 col-5">
|
||||
<label for="switcheryColor14" class="card-title success">Success Color Label &
|
||||
Switchery</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row overflow-hidden mt-1">
|
||||
<div class="col-sm-4 col-5">
|
||||
<label for="switcheryColor13" class="card-title danger">Danger Color Label & Switchery</label>
|
||||
</div>
|
||||
<div class="col-sm-4 col-2 text-center mb-1">
|
||||
<ui-switch class="switchery" switchColor="white" color="rgb(218, 68, 83)" checked></ui-switch>
|
||||
</div>
|
||||
<div class="col-sm-4 col-5">
|
||||
<label for="switcheryColor13" class="card-title danger">Danger Color Label & Switchery</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row overflow-hidden mt-1">
|
||||
<div class="col-sm-4 col-5">
|
||||
<label for="switcheryColor12" class="card-title info">Info Color Label & Switchery</label>
|
||||
</div>
|
||||
<div class="col-sm-4 col-2 text-center mb-1">
|
||||
<ui-switch class="switchery" switchColor="white" color="rgb(59, 175, 218)" checked></ui-switch>
|
||||
</div>
|
||||
<div class="col-sm-4 col-5">
|
||||
<label for="switcheryColor12" class="card-title info">Info Color Label & Switchery</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row mt-1">
|
||||
<div class="col-sm-4 col-5">
|
||||
<label for="switcheryColor11" class="card-title warning">Warning Color Label &
|
||||
Switchery</label>
|
||||
</div>
|
||||
<div class="col-sm-4 col-2 text-center overflow-hidden mb-1">
|
||||
<ui-switch class="switchery" switchColor="white" color="rgb(246, 187, 66)" checked></ui-switch>
|
||||
</div>
|
||||
<div class="col-sm-4 col-5">
|
||||
<label for="switcheryColor11" class="card-title warning">Warning Color Label &
|
||||
Switchery</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Template Color Switchery end-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- ////////////////////////////////////////////////////////////////////////////-->
|
||||
@@ -0,0 +1,25 @@
|
||||
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
|
||||
|
||||
import { SwitchComponent } from './switch.component';
|
||||
|
||||
describe('SwitchComponent', () => {
|
||||
let component: SwitchComponent;
|
||||
let fixture: ComponentFixture<SwitchComponent>;
|
||||
|
||||
beforeEach(waitForAsync(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ SwitchComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(SwitchComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,62 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { NgBlockUI, BlockUI } from 'ng-block-ui';
|
||||
|
||||
@Component({
|
||||
selector: 'app-switch',
|
||||
templateUrl: './switch.component.html',
|
||||
styleUrls: ['./switch.component.css']
|
||||
})
|
||||
export class SwitchComponent implements OnInit {
|
||||
|
||||
@BlockUI('basicSwitcheryToggle') blockUIBasicSwitcheryToggle: NgBlockUI;
|
||||
@BlockUI('rightSwitcheryToggle') blockUIRightSwitcheryToggle: NgBlockUI;
|
||||
|
||||
public breadcrumb: any;
|
||||
|
||||
options = {
|
||||
close: true,
|
||||
expand: true,
|
||||
minimize: true,
|
||||
reload: true
|
||||
};
|
||||
constructor() { }
|
||||
|
||||
ngOnInit() {
|
||||
this.breadcrumb = {
|
||||
'mainlabel': 'Switch',
|
||||
'links': [
|
||||
{
|
||||
'name': 'Home',
|
||||
'isLink': true,
|
||||
'link': '/dashboard/sales'
|
||||
},
|
||||
{
|
||||
'name': 'Form',
|
||||
'isLink': true,
|
||||
'link': '#'
|
||||
},
|
||||
{
|
||||
'name': 'Switch',
|
||||
'isLink': false
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
|
||||
reloadBasicSwitcheryToggle() {
|
||||
this.blockUIBasicSwitcheryToggle.start('Loading..');
|
||||
|
||||
setTimeout(() => {
|
||||
this.blockUIBasicSwitcheryToggle.stop();
|
||||
}, 2500);
|
||||
}
|
||||
|
||||
reloadRightSwitcheryToggle() {
|
||||
this.blockUIRightSwitcheryToggle.start('Loading..');
|
||||
|
||||
setTimeout(() => {
|
||||
this.blockUIRightSwitcheryToggle.stop();
|
||||
}, 2500);
|
||||
}
|
||||
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
:host ::ng-deep .block-ui-wrapper {
|
||||
background: rgba(255, 249, 249, 0.5) !important;
|
||||
}
|
||||
205
src/app/content/forms/form-repeater/form-repeater.component.html
Normal file
205
src/app/content/forms/form-repeater/form-repeater.component.html
Normal file
@@ -0,0 +1,205 @@
|
||||
<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 repeater section start -->
|
||||
<section id="form-repeater">
|
||||
<div class="row">
|
||||
<div class="col-12" *blockUI="'repeatingForms'; message: 'Loading'">
|
||||
<m-card [options]="options" (reloadFunction)="reloadRepeatingForms($event)">
|
||||
<ng-container mCardHeaderTitle>
|
||||
Repeating Forms
|
||||
</ng-container>
|
||||
<ng-container mCardBody>
|
||||
<form [formGroup]="repeatForm">
|
||||
<div class="card-body" formArrayName="repeatArray">
|
||||
<div class="row">
|
||||
<div class="col-12" *ngFor="let repeatForm of repeatFormGroup.controls; let i = index;">
|
||||
<div class="repeater-default">
|
||||
<div [formGroupName]="i" class="row">
|
||||
<div class="form-group mb-1 col-sm-12 col-md-2">
|
||||
<label for="email-addr">Email address</label>
|
||||
<br>
|
||||
<input type="email" formControlName="email" class="form-control" id="email-addr"
|
||||
placeholder="Enter email">
|
||||
</div>
|
||||
<div class="form-group mb-1 col-sm-12 col-md-2">
|
||||
<label for="pass">Password</label>
|
||||
<br>
|
||||
<input type="password" formControlName="password" class="form-control" id="pass"
|
||||
placeholder="Password">
|
||||
</div>
|
||||
<div class="form-group mb-1 col-sm-12 col-md-2">
|
||||
<label for="bio" class="cursor-pointer">Bio</label>
|
||||
<br>
|
||||
<textarea class="form-control" formControlName="bio" id="bio" rows="2"></textarea>
|
||||
</div>
|
||||
<div class="skin skin-flat form-group mb-1 col-sm-12 col-md-2">
|
||||
<label for="tel-input">phone</label>
|
||||
<br>
|
||||
<input class="form-control" formControlName="phone" type="tel" value="1-(555)-555-5555"
|
||||
id="tel-input">
|
||||
</div>
|
||||
<div class="form-group mb-1 col-sm-12 col-md-2">
|
||||
<label for="profession">Profession</label>
|
||||
<br>
|
||||
<select class="form-control" id="profession" formControlName="profession">
|
||||
<option *ngFor="let prof of professions" [value]="prof">{{prof}}</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group col-sm-12 col-md-2 text-center mt-2">
|
||||
<button type="button" class="btn btn-danger" (click)="removeRepeat(i)"><i
|
||||
class="feather ft-x"></i>
|
||||
Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="form-group overflow-hidden">
|
||||
<div class="col-12">
|
||||
<button data-repeater-create class="btn btn-primary" (click)="addRepeat()">
|
||||
<i class="feather ft-plus"></i> Add
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
</m-card>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- // Form repeater section end -->
|
||||
|
||||
<!-- Form control repeater section start -->
|
||||
<section id="form-control-repeater">
|
||||
<div class="row">
|
||||
<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>
|
||||
<form [formGroup]="projectInfoForm" class="form row">
|
||||
<div class="form-group col-md-6 mb-2">
|
||||
<input type="text" class="form-control" formControlName="name" placeholder="Name" name="name">
|
||||
</div>
|
||||
<div class="form-group col-md-6 mb-2">
|
||||
<input type="text" class="form-control" formControlName="company" placeholder="Company"
|
||||
name="company">
|
||||
</div>
|
||||
<div class="form-group col-md-6 mb-2">
|
||||
<input type="text" class="form-control" formControlName="email" placeholder="E-mail" name="email">
|
||||
</div>
|
||||
<div class="form-group col-md-6 mb-2">
|
||||
<input type="text" class="form-control" formControlName="phone" placeholder="Phone" name="phone">
|
||||
</div>
|
||||
|
||||
<div class="form-group col-md-6 mb-2">
|
||||
<select name="interested" class="form-control" formControlName="hobby">
|
||||
<option *ngFor="let interest of hobby" [value]="interest">{{interest}}</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group col-md-6 mb-2">
|
||||
<select name="budget" class="form-control" formControlName="budget">
|
||||
<option *ngFor="let range of budget" [value]="range">{{range}}</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group col-12 mb-2 file-repeater">
|
||||
<div class="" formArrayName="projectArray">
|
||||
<div class="row">
|
||||
<div class="col-12" *ngFor="let projectForm of projectFormGroup.controls; let i = index;">
|
||||
<div class="repeater-default">
|
||||
<div [formGroupName]="i" class="">
|
||||
<div class="row mb-1">
|
||||
<div class="col-9 col-xl-10">
|
||||
<label class="file center-block">
|
||||
<input type="file" id="file" formControlName="file" (change)="onFileChange($event)">
|
||||
<span class="file-custom"></span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="col-2 col-xl-2">
|
||||
<button type="button" class="btn btn-icon btn-danger mr-1" (click)="removeFile(i)"><i
|
||||
class="feather ft-x"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button type="button" class="btn btn-primary" (click)="addFile()">
|
||||
<i class="feather ft-plus"></i> Add new file
|
||||
</button>
|
||||
</div>
|
||||
<div class="form-group col-12 mb-2">
|
||||
<textarea rows="5" class="form-control" formControlName="comment" name="comment"
|
||||
placeholder="About Project"></textarea>
|
||||
</div>
|
||||
</form>
|
||||
</ng-container>
|
||||
</m-card>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title" id="tel-repeater">User Profile</h4>
|
||||
</div>
|
||||
<div class="card-content collapse show">
|
||||
<div class="card-body">
|
||||
<form [formGroup]="userProfileForm" class="row">
|
||||
<div class="form-group col-md-6 mb-2">
|
||||
<input type="text" class="form-control" formControlName="name" placeholder="Name" name="name">
|
||||
</div>
|
||||
<div class="form-group col-md-6 mb-2">
|
||||
<input type="text" class="form-control" formControlName="company" placeholder="Company"
|
||||
name="company">
|
||||
</div>
|
||||
<div class="form-group col-12 mb-2">
|
||||
<input type="text" class="form-control" formControlName="email" placeholder="E-mail" name="email">
|
||||
</div>
|
||||
<div class="form-group col-12 mb-2 contact-repeater">
|
||||
<div class="" formArrayName="userArray">
|
||||
<div class="" *ngFor="let userForm of userFormGroup.controls; let i = index;">
|
||||
<div [formGroupName]="i" class="">
|
||||
<div class="input-group mb-1">
|
||||
<input type="tel" placeholder="Telephone" formControlName="phone" class="form-control"
|
||||
id="example-tel-input">
|
||||
<button class="btn btn-danger" type="button" (click)="removePhone(i)"><i
|
||||
class="feather ft-x"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" class="btn btn-primary" (click)="addPhone()">
|
||||
<i class="feather ft-plus"></i> Add new telephone number
|
||||
</button>
|
||||
</div>
|
||||
<div class="form-group col-12 mb-2">
|
||||
<input type="text" class="form-control" formControlName="occuption" placeholder="Occuption"
|
||||
name="occuption">
|
||||
</div>
|
||||
<div class="form-group col-12 mb-2">
|
||||
<textarea rows="5" class="form-control" formControlName="bio" name="bio"
|
||||
placeholder="Bio"></textarea>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- // Form control repeater section end -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- ////////////////////////////////////////////////////////////////////////////-->
|
||||
@@ -0,0 +1,25 @@
|
||||
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
|
||||
|
||||
import { FormRepeaterComponent } from './form-repeater.component';
|
||||
|
||||
describe('FormRepeaterComponent', () => {
|
||||
let component: FormRepeaterComponent;
|
||||
let fixture: ComponentFixture<FormRepeaterComponent>;
|
||||
|
||||
beforeEach(waitForAsync(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ FormRepeaterComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(FormRepeaterComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
173
src/app/content/forms/form-repeater/form-repeater.component.ts
Normal file
173
src/app/content/forms/form-repeater/form-repeater.component.ts
Normal file
@@ -0,0 +1,173 @@
|
||||
import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
|
||||
import { FormBuilder, FormGroup, Validators, FormArray } from '@angular/forms';
|
||||
import { NgBlockUI, BlockUI } from 'ng-block-ui';
|
||||
|
||||
@Component({
|
||||
selector: 'app-form-repeater',
|
||||
templateUrl: './form-repeater.component.html',
|
||||
styleUrls: ['./form-repeater.component.css']
|
||||
})
|
||||
export class FormRepeaterComponent implements OnInit {
|
||||
|
||||
@BlockUI('repeatingForms') blockUIRepeatingForms: NgBlockUI;
|
||||
@BlockUI('projectInfo') blockUIProjectInfo: NgBlockUI;
|
||||
|
||||
options = {
|
||||
minimize: true,
|
||||
reload: true,
|
||||
expand: true,
|
||||
close: true
|
||||
};
|
||||
|
||||
repeatForm: FormGroup;
|
||||
projectInfoForm: FormGroup;
|
||||
userProfileForm: FormGroup;
|
||||
public repeatList: FormArray;
|
||||
public projectList: FormArray;
|
||||
public userList: FormArray;
|
||||
|
||||
professions = ['Option 1', 'Option 2', 'Option 3', 'Option 4', 'Option 5'];
|
||||
hobby = ['design', 'development', 'illustration', 'branding', 'video'];
|
||||
budget = ['Budget', 'less than 5000$', '5000$ - 10000$', '10000$ - 20000$', 'more than 20000$'];
|
||||
|
||||
public breadcrumb: any;
|
||||
|
||||
get repeatFormGroup() {
|
||||
return this.repeatForm.get('repeatArray') as FormArray;
|
||||
}
|
||||
get projectFormGroup() {
|
||||
return this.projectInfoForm.get('projectArray') as FormArray;
|
||||
}
|
||||
get userFormGroup() {
|
||||
return this.userProfileForm.get('userArray') as FormArray;
|
||||
}
|
||||
|
||||
constructor(private formBuilder: FormBuilder, private cd: ChangeDetectorRef) { }
|
||||
|
||||
ngOnInit() {
|
||||
this.breadcrumb = {
|
||||
'mainlabel': 'Form Repeater',
|
||||
'links': [
|
||||
{
|
||||
'name': 'Home',
|
||||
'isLink': true,
|
||||
'link': '/dashboard/sales'
|
||||
},
|
||||
{
|
||||
'name': 'Form Repeater',
|
||||
'isLink': true,
|
||||
'link': '#'
|
||||
},
|
||||
]
|
||||
};
|
||||
|
||||
this.repeatForm = this.formBuilder.group({
|
||||
repeatArray: this.formBuilder.array([this.createRepeat()])
|
||||
});
|
||||
|
||||
this.repeatList = this.repeatForm.get('repeatArray') as FormArray;
|
||||
|
||||
this.projectInfoForm = this.formBuilder.group({
|
||||
name: ['', Validators.required],
|
||||
company: ['', Validators.required],
|
||||
email: ['', Validators.required],
|
||||
phone: ['', Validators.required],
|
||||
hobby: ['', Validators.required],
|
||||
budget: ['', Validators.required],
|
||||
projectArray: this.formBuilder.array([this.createFile()]),
|
||||
comment: ['', Validators.required]
|
||||
});
|
||||
|
||||
this.projectList = this.projectInfoForm.get('projectArray') as FormArray;
|
||||
|
||||
this.userProfileForm = this.formBuilder.group({
|
||||
name: ['', Validators.required],
|
||||
company: ['', Validators.required],
|
||||
email: ['', Validators.required],
|
||||
userArray: this.formBuilder.array([this.createPhone()]),
|
||||
occuption: ['', Validators.required],
|
||||
bio: ['', Validators.required],
|
||||
});
|
||||
|
||||
this.userList = this.userProfileForm.get('userArray') as FormArray;
|
||||
}
|
||||
|
||||
createRepeat(): FormGroup {
|
||||
return this.formBuilder.group({
|
||||
email: ['', Validators.required],
|
||||
password: ['', Validators.required],
|
||||
bio: ['', Validators.required],
|
||||
phone: ['', Validators.required],
|
||||
profession: ['', Validators.required],
|
||||
});
|
||||
}
|
||||
createFile(): FormGroup {
|
||||
return this.formBuilder.group({
|
||||
file: ['', Validators.required]
|
||||
});
|
||||
}
|
||||
createPhone(): FormGroup {
|
||||
return this.formBuilder.group({
|
||||
phone: ['', Validators.required]
|
||||
});
|
||||
}
|
||||
addRepeat() {
|
||||
this.repeatList.push(this.createRepeat());
|
||||
}
|
||||
addFile() {
|
||||
this.projectList.push(this.createFile());
|
||||
}
|
||||
addPhone() {
|
||||
this.userList.push(this.createPhone());
|
||||
}
|
||||
removeRepeat(index) {
|
||||
this.repeatList.removeAt(index);
|
||||
}
|
||||
removeFile(index) {
|
||||
this.projectList.removeAt(index);
|
||||
}
|
||||
removePhone(index) {
|
||||
this.userList.removeAt(index);
|
||||
}
|
||||
getRepeatFormGroup(index): FormGroup {
|
||||
const formGroup = this.repeatList.controls[index] as FormGroup;
|
||||
return formGroup;
|
||||
}
|
||||
getProjectFormGroup(index): FormGroup {
|
||||
const formGroup = this.projectList.controls[index] as FormGroup;
|
||||
return formGroup;
|
||||
}
|
||||
getUserFormGroup(index): FormGroup {
|
||||
const formGroup = this.userList.controls[index] as FormGroup;
|
||||
return formGroup;
|
||||
}
|
||||
onFileChange(event) {
|
||||
const reader = new FileReader();
|
||||
if (event.target.files && event.target.files.length) {
|
||||
const [file] = event.target.files;
|
||||
reader.readAsDataURL(file);
|
||||
reader.onload = () => {
|
||||
this.projectInfoForm.patchValue({
|
||||
file: reader.result
|
||||
});
|
||||
this.cd.markForCheck();
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
reloadRepeatingForms() {
|
||||
this.blockUIRepeatingForms.start('Loading..');
|
||||
|
||||
setTimeout(() => {
|
||||
this.blockUIRepeatingForms.stop();
|
||||
}, 2500);
|
||||
}
|
||||
|
||||
reloadProjectInfo() {
|
||||
this.blockUIProjectInfo.start('Loading..');
|
||||
|
||||
setTimeout(() => {
|
||||
this.blockUIProjectInfo.stop();
|
||||
}, 2500);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
import { FormRepeaterModule } from './form-repeater.module';
|
||||
|
||||
describe('FormRepeaterModule', () => {
|
||||
let formRepeaterModule: FormRepeaterModule;
|
||||
|
||||
beforeEach(() => {
|
||||
formRepeaterModule = new FormRepeaterModule();
|
||||
});
|
||||
|
||||
it('should create an instance', () => {
|
||||
expect(formRepeaterModule).toBeTruthy();
|
||||
});
|
||||
});
|
||||
33
src/app/content/forms/form-repeater/form-repeater.module.ts
Normal file
33
src/app/content/forms/form-repeater/form-repeater.module.ts
Normal file
@@ -0,0 +1,33 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { FormRepeaterComponent } from './form-repeater.component';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
|
||||
import { CardModule } from '../../partials/general/card/card.module';
|
||||
import { BreadcrumbModule } from 'src/app/_layout/breadcrumb/breadcrumb.module';
|
||||
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,
|
||||
MatchHeightModule,
|
||||
ReactiveFormsModule,
|
||||
FormsModule,
|
||||
BlockUIModule.forRoot({
|
||||
template: BlockTemplateComponent
|
||||
}),
|
||||
RouterModule.forChild([
|
||||
{
|
||||
path: '',
|
||||
component: FormRepeaterComponent
|
||||
},
|
||||
])
|
||||
],
|
||||
declarations: [FormRepeaterComponent],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class FormRepeaterModule { }
|
||||
13
src/app/content/forms/form-wizard/form-wizard.module.spec.ts
Normal file
13
src/app/content/forms/form-wizard/form-wizard.module.spec.ts
Normal file
@@ -0,0 +1,13 @@
|
||||
import { FormWizardModule } from './form-wizard.module';
|
||||
|
||||
describe('FormWizardModule', () => {
|
||||
let formWizardModule: FormWizardModule;
|
||||
|
||||
beforeEach(() => {
|
||||
formWizardModule = new FormWizardModule();
|
||||
});
|
||||
|
||||
it('should create an instance', () => {
|
||||
expect(formWizardModule).toBeTruthy();
|
||||
});
|
||||
});
|
||||
37
src/app/content/forms/form-wizard/form-wizard.module.ts
Normal file
37
src/app/content/forms/form-wizard/form-wizard.module.ts
Normal file
@@ -0,0 +1,37 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { CardModule } from '../../partials/general/card/card.module';
|
||||
import { ArchwizardModule } from 'angular-archwizard';
|
||||
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
|
||||
import { NgbDatepickerModule } from '@ng-bootstrap/ng-bootstrap';
|
||||
import { BreadcrumbModule } from 'src/app/_layout/breadcrumb/breadcrumb.module';
|
||||
import { BlockUIModule } from 'ng-block-ui';
|
||||
import { BlockTemplateComponent } from '../../../_layout/blockui/block-template.component';
|
||||
import { MatchHeightModule } from '../../partials/general/match-height/match-height.module';
|
||||
import { FormwizardComponent } from './formwizard/formwizard.component';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
CardModule,
|
||||
ReactiveFormsModule,
|
||||
BreadcrumbModule,
|
||||
MatchHeightModule,
|
||||
FormsModule,
|
||||
NgbDatepickerModule,
|
||||
ArchwizardModule,
|
||||
BlockUIModule.forRoot({
|
||||
template: BlockTemplateComponent
|
||||
}),
|
||||
RouterModule.forChild([
|
||||
{
|
||||
path: '',
|
||||
component: FormwizardComponent
|
||||
},
|
||||
])
|
||||
],
|
||||
declarations: [FormwizardComponent],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class FormWizardModule { }
|
||||
@@ -0,0 +1,329 @@
|
||||
.tab-content .tab-pane {
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.alert {
|
||||
padding: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.form-control.is-invalid {
|
||||
border-color: #CACFE7;
|
||||
background-image: none !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .block-ui-wrapper {
|
||||
background: rgba(255, 249, 249, 0.5) !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .wizard-steps.vertical {
|
||||
width: 90%;
|
||||
|
||||
}
|
||||
|
||||
:host ::ng-deep .vertical .large-filled-symbols {
|
||||
width: 10;
|
||||
|
||||
}
|
||||
|
||||
@media screen and (max-width: 480px) {
|
||||
.wizard-steps.vertical {
|
||||
width: 80% !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 480px) {
|
||||
.vertical .large-filled-symbols {
|
||||
width: 20% !important;
|
||||
}
|
||||
}
|
||||
|
||||
:host ::ng-deep .horizontal.large-filled-symbols ul.steps-indicator li .step-indicator {
|
||||
color: #999;
|
||||
font-size: 19px;
|
||||
text-align: center;
|
||||
border: 5px solid #f4f5fa;
|
||||
background-color: #fff;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
:host ::ng-deep .horizontal.large-filled-symbols ul.steps-indicator li.editing:after {
|
||||
color: #e6e6e6;
|
||||
border: 3px solid #e6e6e6 !important;
|
||||
background-color: #fff;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
:host ::ng-deep .horizontal.large-filled-symbols ul.steps-indicator li.editing1:after {
|
||||
color: #666EE8;
|
||||
border: 5px solid #666EE8 !important;
|
||||
background-color: #fff;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
:host ::ng-deep.horizontal.large-filled-symbols ul.steps-indicator li.done .step-indicator {
|
||||
color: #fff;
|
||||
border: 5px solid #666EE8;
|
||||
background-color: #666EE8;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
:host ::ng-deep .horizontal.large-filled-symbols ul.steps-indicator li:not(:last-child):before {
|
||||
background-color: #e6e6e6;
|
||||
content: '';
|
||||
position: absolute;
|
||||
height: 5px !important;
|
||||
width: calc(100% - 50px);
|
||||
top: -25px;
|
||||
left: calc(50% + 25px);
|
||||
}
|
||||
|
||||
:host ::ng-deep .horizontal.large-filled-symbols ul.steps-indicator li.done:before {
|
||||
background-color: #666EE8;
|
||||
content: '';
|
||||
position: absolute;
|
||||
height: 5px !important;
|
||||
width: calc(100% - 50px);
|
||||
top: -25px;
|
||||
left: calc(50% + 25px);
|
||||
}
|
||||
|
||||
:host ::ng-deep :host ::ng-deep .vertical.large-filled-symbols ul.steps-indicator li.done:not(:last-child):before {
|
||||
background-color: #f4f5fa;
|
||||
height: 10px;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
:host ::ng-deep .vertical.large-filled-symbols ul.steps-indicator li.done:not(:last-child):before {
|
||||
background-color: #666EE8;
|
||||
height: 5px;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
:host ::ng-deep .vertical.large-filled-symbols ul.steps-indicator li .step-indicator {
|
||||
color: #999;
|
||||
font-size: 18px;
|
||||
border: 5px solid #f4f5fa;
|
||||
background-color: #fff;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
:host ::ng-deep .vertical.large-filled-symbols ul.steps-indicator li.editing:after {
|
||||
color: #666EE8;
|
||||
border: 5px solid #666EE8 !important;
|
||||
background-color: #fff;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
:host ::ng-deep .vertical.large-filled-symbols ul.steps-indicator li.current .step-indicator {
|
||||
color: #666EE8;
|
||||
border: 5px solid #666EE8;
|
||||
background-color: #fff;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
:host ::ng-deep .vertical.large-filled-symbols ul.steps-indicator li.done .step-indicator {
|
||||
color: #fff;
|
||||
border: 5px solid #666EE8;
|
||||
background-color: #666EE8;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
:host ::ng-deep .vertical.large-filled-symbols ul.steps-indicator li:not(:last-child):before {
|
||||
background-color: #f4f5fa;
|
||||
height: 10px;
|
||||
line-height: 10px;
|
||||
}
|
||||
|
||||
:host ::ng-deep .vertical.large-filled-symbols ul.steps-indicator li.navigable.done a:hover .step-indicator {
|
||||
background-color: #666EE8;
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
:host ::ng-deep .vertical.large-filled-symbols ul.steps-indicator li:not(:last-child):after {
|
||||
background-color: #666EE8;
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: -25px;
|
||||
top: 50px;
|
||||
height: 10px;
|
||||
width: 1px;
|
||||
}
|
||||
|
||||
:host ::ng-deep .vertical.large-filled-symbols ul.steps-indicator li.current:after {
|
||||
color: #666EE8;
|
||||
border: 1px solid #f4f5fa;
|
||||
background-color: #fff;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
:host ::ng-deep .vertical.large-filled-symbols ul.steps-indicator li.editing:after {
|
||||
color: #e6e6e6;
|
||||
border: 1px solid #e6e6e6 !important;
|
||||
background-color: #fff;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
:host ::ng-deep .horizontal.large-filled-symbols ul.steps-indicator li.done.step:after {
|
||||
background-color: #666EE8;
|
||||
border-color: #666EE8;
|
||||
color: #FFF;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
:host ::ng-deep .horizontal ul.steps-indicator li .step-indicator {
|
||||
position: relative;
|
||||
margin: 0px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
:host ::ng-deep .horizontal.large-filled-symbols ul.steps-indicator li.navigable.done a:hover .step-indicator {
|
||||
background-color: #666EE8;
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
: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;
|
||||
}
|
||||
|
||||
:host ::ng-deep .horizontal.large-filled-symbols ul.steps-indicator li.current .step-indicator {
|
||||
color: #666EE8;
|
||||
border: 5px solid #666EE8;
|
||||
background-color: #fff;
|
||||
line-height: 40px;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,25 @@
|
||||
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
|
||||
|
||||
import { FormwizardComponent } from './formwizard.component';
|
||||
|
||||
describe('FormwizardComponent', () => {
|
||||
let component: FormwizardComponent;
|
||||
let fixture: ComponentFixture<FormwizardComponent>;
|
||||
|
||||
beforeEach(waitForAsync(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ FormwizardComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(FormwizardComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,239 @@
|
||||
import { Component, OnInit, ViewChild } from '@angular/core';
|
||||
import { FormControl, FormGroup, FormBuilder, Validators, NgForm } from '@angular/forms';
|
||||
import { BlockUI, NgBlockUI } from 'ng-block-ui';
|
||||
import { NgbDateStruct, NgbTimeStruct, NgbDate } from '@ng-bootstrap/ng-bootstrap';
|
||||
|
||||
@Component({
|
||||
selector: 'app-formwizard',
|
||||
templateUrl: './formwizard.component.html',
|
||||
styleUrls: ['./formwizard.component.css']
|
||||
})
|
||||
export class FormwizardComponent implements OnInit {
|
||||
@BlockUI('numberTabs') blockUINumberTabs: NgBlockUI;
|
||||
@BlockUI('iconTabs') blockUIIconTabs: NgBlockUI;
|
||||
|
||||
options = {
|
||||
minimize: true,
|
||||
reload: true,
|
||||
expand: true,
|
||||
close: true
|
||||
};
|
||||
d2: any;
|
||||
d3: any;
|
||||
d4: any;
|
||||
d5: any;
|
||||
model: NgbDateStruct;
|
||||
popupModel;
|
||||
numberTab: FormGroup;
|
||||
iconTab: FormGroup;
|
||||
verticalTab: FormGroup;
|
||||
|
||||
stepOneForm: FormGroup;
|
||||
stepTwoForm: FormGroup;
|
||||
stepThreeForm: FormGroup;
|
||||
stepFourForm: FormGroup;
|
||||
|
||||
displayMonthsForStep1 = 1;
|
||||
|
||||
displayMonthsForStep3 = 1;
|
||||
navigation = 'select';
|
||||
showWeekNumbers = false;
|
||||
outsideDays = 'visible';
|
||||
isStepFourReached = false;
|
||||
isStepThreeReached = false;
|
||||
isStepTwoReached = false;
|
||||
isStepOneReached = false;
|
||||
|
||||
|
||||
countries = ['Amsterdam', 'Berlin', 'Frankfurt'];
|
||||
eventType = ['Banquet', 'Fund Raiser', 'Dinner Party', 'Wedding'];
|
||||
eventLocation = ['Amsterdam', 'Berlin', 'Frankfurt'];
|
||||
eventStatus = ['Planning', 'In Progress', 'Finished'];
|
||||
requirements1 = [{ id: 1, name: 'Staffing' }, { id: 2, name: 'Catering' }];
|
||||
requirements2 = [{ id: 3, name: 'Staffing' }, { id: 4, name: 'Catering' }];
|
||||
requirements3 = [{ id: 5, name: 'Staffing' }, { id: 6, name: 'Catering' }];
|
||||
requirements4 = [{ id: 7, name: 'Staffing' }, { id: 8, name: 'Catering' }];
|
||||
agendaItems1 = [{ id: 1, name: '1st item', idName: 'item1' }, { id: 2, name: '2st item', idName: 'item2'},
|
||||
{ id: 3, name: '3st item', idName: 'item3' }, { id: 4, name: '4st item', idName: 'item4' },
|
||||
{ id: 5, name: '5st item', idName: 'item5' }];
|
||||
agendaItems2 = [{ id: 6, name: '1st item', idName: 'item6' }, { id: 7, name: '2st item', idName: 'item7'},
|
||||
{ id: 8, name: '3st item', idName: 'item8' }, { id: 9, name: '4st item', idName: 'item9' },
|
||||
{ id: 10, name: '5st item', idName: 'item10' }];
|
||||
agendaItems3 = [{ id: 11, name: '1st item', idName: 'item11' }, { id: 12, name: '2st item', idName: 'item12'},
|
||||
{ id: 13, name: '3st item', idName: 'item13' }, { id: 14, name: '4st item', idName: 'item14' },
|
||||
{ id: 15, name: '5st item', idName: 'item15' }];
|
||||
agendaItems4 = [{ id: 16, name: '1st item', idName: 'item16' }, { id: 17, name: '2st item', idName: 'item17'},
|
||||
{ id: 18, name: '3st item', idName: 'item18' }, { id: 19, name: '4st item', idName: 'item19' },
|
||||
{ id: 20, name: '5st item', idName: 'item20' }];
|
||||
|
||||
public breadcrumb: any;
|
||||
|
||||
constructor(private formBuilder: FormBuilder) { }
|
||||
|
||||
ngOnInit() {
|
||||
this.breadcrumb = {
|
||||
'mainlabel': 'Circle Style',
|
||||
'links': [
|
||||
{
|
||||
'name': 'Home',
|
||||
'isLink': true,
|
||||
'link': '/dashboard/sales'
|
||||
},
|
||||
{
|
||||
'name': 'Form Wizard',
|
||||
'isLink': true,
|
||||
'link': '#'
|
||||
},
|
||||
{
|
||||
'name': 'Form Wizard Circle Steps',
|
||||
'isLink': false
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
this.numberTab = this.formBuilder.group({
|
||||
firstName: ['', Validators.required],
|
||||
lastName: ['', Validators.required],
|
||||
email: ['', [Validators.required, Validators.email]],
|
||||
country: ['', [Validators.required]],
|
||||
phone: ['', [Validators.required]],
|
||||
birthDate1: ['', [Validators.required]],
|
||||
proposalTitle: ['', Validators.required],
|
||||
jobTitle: ['', Validators.required],
|
||||
email2: ['', [Validators.required, Validators.email]],
|
||||
description: ['', [Validators.required]],
|
||||
videoURL: ['', [Validators.required]],
|
||||
eventName: ['', Validators.required],
|
||||
eventType: ['', Validators.required],
|
||||
eventLocation: ['', Validators.required],
|
||||
eventDate: ['', [Validators.required]],
|
||||
eventStatus: ['', [Validators.required]],
|
||||
requirementsArray: this.formBuilder.array(['', [Validators.required]]),
|
||||
meetingName: ['', Validators.required],
|
||||
location: ['', Validators.required],
|
||||
participantName: ['', Validators.required],
|
||||
decisionsReached: ['', Validators.required],
|
||||
agendaItems: this.formBuilder.array(['', [Validators.required]])
|
||||
});
|
||||
this.iconTab = this.formBuilder.group({
|
||||
firstName: ['', Validators.required],
|
||||
lastName: ['', Validators.required],
|
||||
email: ['', [Validators.required, Validators.email]],
|
||||
country: ['', [Validators.required]],
|
||||
phone: ['', [Validators.required]],
|
||||
birthDate2: ['', [Validators.required]],
|
||||
proposalTitle: ['', Validators.required],
|
||||
jobTitle: ['', Validators.required],
|
||||
email2: ['', [Validators.required, Validators.email]],
|
||||
description: ['', [Validators.required]],
|
||||
videoURL: ['', [Validators.required]],
|
||||
eventName: ['', Validators.required],
|
||||
eventType: ['', Validators.required],
|
||||
eventLocation: ['', Validators.required],
|
||||
eventDate: ['', [Validators.required]],
|
||||
eventStatus: ['', [Validators.required]],
|
||||
requirementsArray: this.formBuilder.array(['', [Validators.required]]),
|
||||
meetingName: ['', Validators.required],
|
||||
location: ['', Validators.required],
|
||||
participantName: ['', Validators.required],
|
||||
decisionsReached: ['', Validators.required],
|
||||
agendaItems: this.formBuilder.array(['', [Validators.required]])
|
||||
});
|
||||
|
||||
this.verticalTab = this.formBuilder.group({
|
||||
firstName: ['', Validators.required],
|
||||
lastName: ['', Validators.required],
|
||||
email: ['', [Validators.required, Validators.email]],
|
||||
country: ['', [Validators.required]],
|
||||
phone: ['', [Validators.required]],
|
||||
birthDate4: ['', [Validators.required]],
|
||||
proposalTitle: ['', Validators.required],
|
||||
jobTitle: ['', Validators.required],
|
||||
email2: ['', [Validators.required, Validators.email]],
|
||||
description: ['', [Validators.required]],
|
||||
videoURL: ['', [Validators.required]],
|
||||
eventName: ['', Validators.required],
|
||||
eventType: ['', Validators.required],
|
||||
eventLocation: ['', Validators.required],
|
||||
eventDate: ['', [Validators.required]],
|
||||
eventStatus: ['', [Validators.required]],
|
||||
requirementsArray: this.formBuilder.array(['', [Validators.required]]),
|
||||
meetingName: ['', Validators.required],
|
||||
location: ['', Validators.required],
|
||||
participantName: ['', Validators.required],
|
||||
decisionsReached: ['', Validators.required],
|
||||
agendaItems: this.formBuilder.array(['', [Validators.required]])
|
||||
});
|
||||
|
||||
|
||||
this.stepOneForm = this.formBuilder.group({
|
||||
firstName: ['', Validators.required],
|
||||
lastName: ['', Validators.required],
|
||||
email: ['', [Validators.required, Validators.email]],
|
||||
country: ['', [Validators.required]],
|
||||
phone: ['', [Validators.required]],
|
||||
birthDate3: ['']
|
||||
});
|
||||
|
||||
this.stepTwoForm = this.formBuilder.group({
|
||||
proposalTitle: ['', Validators.required],
|
||||
jobTitle: ['', Validators.required],
|
||||
email2: ['', [Validators.required, Validators.email]],
|
||||
description: ['', [Validators.required]],
|
||||
videoURL: ['', [Validators.required]],
|
||||
});
|
||||
|
||||
this.stepThreeForm = this.formBuilder.group({
|
||||
eventName: ['', Validators.required],
|
||||
eventType: ['', Validators.required],
|
||||
eventLocation: ['', Validators.required],
|
||||
eventDate: [''],
|
||||
eventStatus: ['', [Validators.required]],
|
||||
requirementsArray: this.formBuilder.array(['', [Validators.required]])
|
||||
});
|
||||
|
||||
this.stepFourForm = this.formBuilder.group({
|
||||
meetingName: ['', Validators.required],
|
||||
location: ['', Validators.required],
|
||||
participantName: ['', Validators.required],
|
||||
decisionsReached: ['', Validators.required],
|
||||
agendaItems: this.formBuilder.array(['', [Validators.required]])
|
||||
});
|
||||
}
|
||||
|
||||
public previousFourthStep() {
|
||||
this.isStepFourReached = true;
|
||||
}
|
||||
get f() {
|
||||
return this.stepOneForm.controls;
|
||||
}
|
||||
get i() {
|
||||
return this.stepTwoForm.controls;
|
||||
}
|
||||
get j() {
|
||||
return this.stepThreeForm.controls;
|
||||
}
|
||||
get k() {
|
||||
return this.stepFourForm.controls;
|
||||
}
|
||||
submit() {
|
||||
window.alert('Form submitted.');
|
||||
}
|
||||
|
||||
reloadNumberTabs() {
|
||||
this.blockUINumberTabs.start('Loading..');
|
||||
|
||||
setTimeout(() => {
|
||||
this.blockUINumberTabs.stop();
|
||||
}, 2500);
|
||||
}
|
||||
|
||||
reloadIconTabs() {
|
||||
this.blockUIIconTabs.start('Loading..');
|
||||
|
||||
setTimeout(() => {
|
||||
this.blockUIIconTabs.stop();
|
||||
}, 2500);
|
||||
}
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user