Sineedge/sparqsineedge
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

form Alignment fixed

Browse Source
This commit is contained in:
bitbucket 2022-01-24 14:56:45 +05:30
parent 594bbaa33d
commit f6db4a59c4
27 changed files with 88 additions and 337 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms-dynamic/dynamic-form/dynamic-form/dynamic-form.component.html
View File

@ -156,33 +156,4 @@
</div>
</form>
</div>
<!-- <mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
<mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle matTreeNodePadding>
<button mat-icon-button disabled></button>
<mat-checkbox class="checklist-leaf-node"
[checked]="checklistSelection.isSelected(node)"
(change)="todoLeafItemSelectionToggle(node)">{{node.item}}</mat-checkbox>
</mat-tree-node>
<mat-tree-node *matTreeNodeDef="let node; when: hasNoContent" matTreeNodePadding>
<button mat-icon-button disabled></button>
<mat-form-field>
<input matInput #itemValue placeholder="New item...">
</mat-form-field>
<button mat-button (click)="saveNode(node, itemValue.value)">Save</button>
</mat-tree-node>
<mat-tree-node *matTreeNodeDef="let node; when: hasChild" matTreeNodePadding>
<button mat-icon-button matTreeNodeToggle
[attr.aria-label]="'toggle ' + node.filename">
<mat-icon class="mat-icon-rtl-mirror">
{{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
</mat-icon>
</button>
<mat-checkbox [checked]="descendantsAllSelected(node)"
[indeterminate]="descendantsPartiallySelected(node)"
(change)="todoItemSelectionToggle(node)">{{node.item}}</mat-checkbox>
<button mat-icon-button (click)="addNewItem(node)"><mat-icon>add</mat-icon></button>
</mat-tree-node>
</mat-tree> -->

308
ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms-dynamic/dynamic-form/dynamic-form/dynamic-form.component.ts
View File

@ -10,180 +10,15 @@ import {MatTreeFlatDataSource, MatTreeFlattener} from '@angular/material/tree';
import {BehaviorSubject} from 'rxjs';
import { PdTrigerService } from 'app/personal-discussion/pd-service/pd-triger.service';
/**
* Node for to-do item
*/
export class TodoItemNode {
children: TodoItemNode[];
item: string;
}
/** Flat to-do item node with expandable and level information */
export class TodoItemFlatNode {
item: string;
level: number;
expandable: boolean;
}
/**
* The Json object for to-do list data.
*/
/**
* Checklist database, it can build a tree structured Json object.
* Each node in Json object represents a to-do item or a category.
* If a node is a category, it has children items and new items can be added under the category.
*/
@Injectable()
export class ChecklistDatabase {
dataChange = new BehaviorSubject<TodoItemNode[]>([]);
commonFormGroup: FormGroup;
questions_JSON: any = {questions:[],section_name:''};
val: any;
get data(): TodoItemNode[] { return this.dataChange.value; }
constructor( private questionService:QuesFormService) {
this.questionService.currentMessageSubscriber.subscribe((data : any)=>{
console.log(data)
this.val = data
})
this.initialize()
}
initialize() {
// Build the tree nodes from Json object. The result is a list of `TodoItemNode` with nested
// file node as children.
let TREE_DATA;
if(this.val.questions[0].question instanceof Array){
let tmp =[]
this.val.questions[0].question.forEach(element => {
console.log( element.question)
tmp.push(element.question)
});
TREE_DATA = {
Group_Questions: tmp,
Questions:[this.val.questions[1].question],
};
}else{
let tmp =[]
this.val.questions.forEach(element => {
console.log( element.question)
tmp.push(element.question)
});
TREE_DATA = {
Questions:tmp,
};
}
console.log( this.val)
// console.log( this.val.questions[0].group_questions)
console.log( this.val.questions[0].question)
console.log( this.val.questions[1].question)
// console.log(tmp)
// this.val.forEach(element => {
// element.questions.forEach(e => {
// e.question.forEach(s => {
// console.log( s.question)
// });
// });
// });
const data = this.buildFileTree(TREE_DATA, 0);
console.log(TREE_DATA)
console.log(data)
// Notify the change.
this.dataChange.next(data);
}
/**
* Build the file structure tree. The `value` is the Json object, or a sub-tree of a Json object.
* The return value is the list of `TodoItemNode`.
*/
buildFileTree(obj: {[key: string]: any}, level: number): TodoItemNode[] {
return Object.keys(obj).reduce<TodoItemNode[]>((accumulator, key) => {
const value = obj[key];
const node = new TodoItemNode();
node.item = key;
if (value != null) {
if (typeof value === 'object') {
node.children = this.buildFileTree(value, level + 1);
} else {
node.item = value;
}
}
return accumulator.concat(node);
}, []);
}
/** Add an item to to-do list */
insertItem(parent: TodoItemNode, name: string) {
if (parent.children) {
parent.children.push({item: name} as TodoItemNode);
this.dataChange.next(this.data);
}
}
updateItem(node: TodoItemNode, name: string) {
node.item = name;
this.dataChange.next(this.data);
}
}
/**
* @title Tree with checkboxes
*/
@Component({
selector: 'app-dynamic-form',
templateUrl: './dynamic-form.component.html',
styleUrls: ['./dynamic-form.component.scss'],
providers: [ChecklistDatabase]
})
export class DynamicFormComponent {
/** Map from flat node to nested node. This helps us finding the nested node to be modified */
flatNodeMap = new Map<TodoItemFlatNode, TodoItemNode>();
/** Map from nested node to flattened node. This helps us to keep the same object for selection */
nestedNodeMap = new Map<TodoItemNode, TodoItemFlatNode>();
/** A selected parent node to be inserted */
selectedParent: TodoItemFlatNode | null = null;
/** The new item's name */
newItemName = '';
treeControl: FlatTreeControl<TodoItemFlatNode>;
treeFlattener: MatTreeFlattener<TodoItemNode, TodoItemFlatNode>;
dataSource: MatTreeFlatDataSource<TodoItemNode, TodoItemFlatNode>;
/** The selection for checklist */
checklistSelection = new SelectionModel<TodoItemFlatNode>(true /* multiple */);
// form_group_name: FormGroup;
@Input() form_group_name:FormGroup;
@Input() questions_JSON:any;
@Input() json_answers:any;
@ -194,17 +29,8 @@ export class DynamicFormComponent {
@ViewChild('mapanel') matExpansionPanel:MatExpansionPanel
@ViewChild('accordion') Accordion: MatAccordion
vr: boolean = false;
constructor(private _fb:FormBuilder,private questionService:QuesFormService,private database: ChecklistDatabase) {
this.treeFlattener = new MatTreeFlattener(this.transformer, this.getLevel,
this.isExpandable, this.getChildren);
this.treeControl = new FlatTreeControl<TodoItemFlatNode>(this.getLevel, this.isExpandable);
this.dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);
console.log(this.dataSource)
database.dataChange.subscribe(data => {
this.dataSource.data = data;
console.log(this.dataSource)
});
constructor(private _fb:FormBuilder,private questionService:QuesFormService ) {
this.questionService.currentMessageSubscriber.subscribe((data : any)=>{
console.log(data)
@ -443,124 +269,18 @@ updateAllComplete(a,b){
}
}
getLevel = (node: TodoItemFlatNode) => node.level;
isExpandable = (node: TodoItemFlatNode) => node.expandable;
getChildren = (node: TodoItemNode): TodoItemNode[] => node.children;
hasChild = (_: number, _nodeData: TodoItemFlatNode) => _nodeData.expandable;
hasNoContent = (_: number, _nodeData: TodoItemFlatNode) => _nodeData.item === '';
/**
* Transformer to convert nested node to flat node. Record the nodes in maps for later use.
*/
transformer = (node: TodoItemNode, level: number) => {
const existingNode = this.nestedNodeMap.get(node);
const flatNode = existingNode && existingNode.item === node.item
? existingNode
: new TodoItemFlatNode();
flatNode.item = node.item;
flatNode.level = level;
flatNode.expandable = !!node.children;
this.flatNodeMap.set(flatNode, node);
this.nestedNodeMap.set(node, flatNode);
return flatNode;
}
/** Whether all the descendants of the node are selected. */
descendantsAllSelected(node: TodoItemFlatNode): boolean {
const descendants = this.treeControl.getDescendants(node);
const descAllSelected = descendants.every(child =>
this.checklistSelection.isSelected(child)
);
return descAllSelected;
}
/** Whether part of the descendants are selected */
descendantsPartiallySelected(node: TodoItemFlatNode): boolean {
const descendants = this.treeControl.getDescendants(node);
const result = descendants.some(child => this.checklistSelection.isSelected(child));
return result && !this.descendantsAllSelected(node);
}
/** Toggle the to-do item selection. Select/deselect all the descendants node */
todoItemSelectionToggle(node: TodoItemFlatNode): void {
this.checklistSelection.toggle(node);
const descendants = this.treeControl.getDescendants(node);
this.checklistSelection.isSelected(node)
? this.checklistSelection.select(...descendants)
: this.checklistSelection.deselect(...descendants);
// Force update for the parent
descendants.every(child =>
this.checklistSelection.isSelected(child)
);
this.checkAllParentsSelection(node);
}
/** Toggle a leaf to-do item selection. Check all the parents to see if they changed */
todoLeafItemSelectionToggle(node: TodoItemFlatNode): void {
this.checklistSelection.toggle(node);
this.checkAllParentsSelection(node);
}
/* Checks all the parents when a leaf node is selected/unselected */
checkAllParentsSelection(node: TodoItemFlatNode): void {
let parent: TodoItemFlatNode | null = this.getParentNode(node);
while (parent) {
this.checkRootNodeSelection(parent);
parent = this.getParentNode(parent);
}
}
/** Check root node checked state and change it accordingly */
checkRootNodeSelection(node: TodoItemFlatNode): void {
const nodeSelected = this.checklistSelection.isSelected(node);
const descendants = this.treeControl.getDescendants(node);
const descAllSelected = descendants.every(child =>
this.checklistSelection.isSelected(child)
);
if (nodeSelected && !descAllSelected) {
this.checklistSelection.deselect(node);
} else if (!nodeSelected && descAllSelected) {
this.checklistSelection.select(node);
}
}
/* Get the parent node of a node */
getParentNode(node: TodoItemFlatNode): TodoItemFlatNode | null {
const currentLevel = this.getLevel(node);
if (currentLevel < 1) {
return null;
}
const startIndex = this.treeControl.dataNodes.indexOf(node) - 1;
for (let i = startIndex; i >= 0; i--) {
const currentNode = this.treeControl.dataNodes[i];
if (this.getLevel(currentNode) < currentLevel) {
return currentNode;
}
}
return null;
}
/** Select the category so we can insert the new item. */
addNewItem(node: TodoItemFlatNode) {
const parentNode = this.flatNodeMap.get(node);
this.database.insertItem(parentNode!, '');
this.treeControl.expand(node);
}
/** Save the node to database */
saveNode(node: TodoItemFlatNode, itemValue: string) {
const nestedNode = this.flatNodeMap.get(node);
this.database.updateItem(nestedNode!, itemValue);
console.log(this.dataSource)
}
}

4
ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/address/address.component.scss
View File

@ -8,7 +8,9 @@
.mat-card-actions {
background-color: white;
}
form{
display: grid !important
}
mat-form-field {
margin: 0 2%;
}

4
ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/assets-info/assets-info.component.scss
View File

@ -14,7 +14,9 @@
::ng-deep .cdk-global-overlay-wrapper{
justify-content: center !important;
}
form{
display: grid !important
}
.top .thumbnail .date {
position: absolute;
top: 4px;

3
ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/banking-details/banking-details.component.scss
View File

@ -103,3 +103,6 @@ $product-bg-color-hover: rgba(103, 58, 183, 0.7);
}
}
form{
display: grid !important
}

3
ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/business-assets-info/business-assets-info.component.scss
View File

@ -99,6 +99,9 @@ mat-form-field {
}
}
form{
display: grid !important
}
// .loading {
// position: fixed;

4
ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/business-banking-details/business-banking-details.component.scss
View File

@ -103,4 +103,6 @@
}
}
form{
display: grid !important
}

3
ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/business-info-group/business-info-group.component.scss
View File

@ -31,4 +31,7 @@ mat-card .child_mat_card > mat-card {
box-shadow: 5px 20px 30px rgba(0, 0, 0, 0.2);
}
}
form{
display: grid !important
}

5
ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/business-info/business-info.component.scss
View File

@ -156,4 +156,7 @@ mat-header-cell mat-cell {
line-height: 1.2;
text-align: center;
font-size: 11px;
}
}
form{
display: grid !important
}

5
ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/client-info/client-info.component.scss
View File

@ -89,4 +89,7 @@
}
}
}
}
form{
display: grid !important
}

3
ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/current-loan/current-loan.component.scss
View File

@ -115,4 +115,7 @@ $product-bg-color-hover: rgba(103, 58, 183, 0.7);
}
}
}
form{
display: grid !important
}

3
ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/employment-info/employment-info.component.scss
View File

@ -110,3 +110,6 @@ $product-bg-color-hover: rgba(103, 58, 183, 0.7);
}
}
form{
display: grid !important
}

3
ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/family-details/family-details.component.scss
View File

@ -112,4 +112,7 @@ $product-bg-color-hover: rgba(103, 58, 183, 0.7);
}
}
}
form{
display: grid !important
}

4
ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/final-remarks/final-remarks.component.scss
View File

@ -30,7 +30,9 @@
::ng-deep .cdk-global-overlay-wrapper{
justify-content: center !important;
}
form{
display: grid !important;
}
mat-form-field {
margin: 0 2%;
}

4
ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/financial-info/financial-info.component.scss
View File

@ -140,4 +140,6 @@ $product-bg-color-hover: rgba(103, 58, 183, 0.7);
::ng-deep.mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle {
border-color:#f376688f!important; /*outer ring color change*/
}
form{
display: grid !important
}

5
ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/future-plans-and-business-environment/future-plans-and-business-environment.component.scss
View File

@ -17,4 +17,7 @@
}
mat-form-field {
margin: 0 2%;
}
}
form{
display: grid !important
}

3
ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/lender-representative/lender-representative.component.scss
View File

@ -17,6 +17,9 @@
top: 4px;
right: -10px;
}
form{
display: grid !important
}
// .notificard{
// width: 25%;
// margin-top: -66px;

3
ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/loan-details/loan-details.component.scss
View File

@ -121,4 +121,7 @@ $product-bg-color-hover: rgba(103, 58, 183, 0.7);
}
}
}
form{
display: grid !important
}

3
ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/neighbour-hood/neighbour-hood.component.scss
View File

@ -25,4 +25,7 @@
}
::ng-deep .cdk-global-overlay-wrapper{
justify-content: center !important;
}
form{
display: grid !important
}

3
ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/other-income/other-income.component.scss
View File

@ -111,4 +111,7 @@ $product-bg-color-hover: rgba(103, 58, 183, 0.7);
}
}
form{
display: grid !important
}

3
ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/personal-info/personal-info.component.scss
View File

@ -85,4 +85,7 @@ $product-bg-color-hover: rgba(103, 58, 183, 0.7);
}
}
form{
display: grid !important
}

4
ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/queries-docs/queries-docs.component.scss
View File

@ -9,7 +9,9 @@
input{
height:40px;
}
form{
display: grid !important
}
.mat-form-field-label {
white-space: normal;
}

3
ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/stock/stock.component.scss
View File

@ -110,4 +110,7 @@ $product-bg-color-hover: rgba(103, 58, 183, 0.7);
right: -10px;
}
}
form{
display: grid !important
}

5
ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/supplier-info/supplier-info.component.scss
View File

@ -97,4 +97,7 @@
top: 4px;
right: -10px;
}
}
}
form{
display: grid !important
}

2
ng6-seed/src/app/personal-discussion/manage-pd/list-pd/view-pd/view-pd.component.html
View File

@ -222,7 +222,7 @@
<span *ngIf="userRoleID == 2 || userRoleID == 3 || userRoleID == 10"><button *ngIf="roleAccessDetails.allocate && addresses.assigned_pd && master.pd_type_name && currentPDStatus!=pdStatusCheck.DRAFT && currentPDStatus!=pdStatusCheck.COMPLETED && master.pd_status!=pdStatusCheck.ADD_ON_PENDING && currentPDStatus!=pdStatusCheck.QC_COMPLETED" mat-raised-button mat-button-md mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Allocate" matTooltipPosition="above" (click)="pdAllocationTo(master,addresses)"><mat-icon>verified_user</mat-icon></button></span>
<span *ngIf="userRoleID == 2 || userRoleID == 3 || userRoleID == 4 || userRoleID == 5 || userRoleID == 10"><button *ngIf="roleAccessDetails.schedule && addresses.assigned_pd && master.pd_type_name && currentPDStatus!=pdStatusCheck.DRAFT && currentPDStatus!=pdStatusCheck.COMPLETED && master.pd_status!=pdStatusCheck.ADD_ON_PENDING && currentPDStatus!=pdStatusCheck.QC_COMPLETED" mat-raised-button mat-button-md mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Schedule" matTooltipPosition="above" (click)="scheduleDetails(master,addresses)"><mat-icon>schedule</mat-icon></button></span>
<span *ngIf="userRoleID == 2 || userRoleID == 3 || userRoleID == 4 || userRoleID == 5 || userRoleID == 10"><button *ngIf="roleAccessDetails.discussions && addresses.assigned_pd && master.pd_type_name && currentPDStatus!=pdStatusCheck.DRAFT && currentPDStatus!=pdStatusCheck.TRIGGERED && currentPDStatus!=pdStatusCheck.ALLOCATED_TO_FIA && master.pd_status!=pdStatusCheck.CANCELLED && enableStartPD" mat-raised-button mat-button-md mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Discussion" matTooltipPosition="above" (click)="getPDStart(addresses,master.pd_status)"><mat-icon>question_answer</mat-icon></button></span>
<span *ngIf="userRoleID == 2 || userRoleID == 3 || userRoleID == 4 || userRoleID == 5 || userRoleID == 10"><button *ngIf="roleAccessDetails.discussions && addresses.assigned_pd && master.pd_type_name && currentPDStatus!=pdStatusCheck.DRAFT && currentPDStatus!=pdStatusCheck.TRIGGERED && currentPDStatus!=pdStatusCheck.ALLOCATED_TO_FIA && master.pd_status!=pdStatusCheck.CANCELLED && enableStartPD" mat-raised-button mat-button-md mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Discussion v2.0" matTooltipPosition="above" (click)="getPDStart2(addresses,master.pd_status)"><mat-icon>comment</mat-icon></button></span>
<!-- <span *ngIf="userRoleID == 2 || userRoleID == 3 || userRoleID == 4 || userRoleID == 5 || userRoleID == 10"><button *ngIf="roleAccessDetails.discussions && addresses.assigned_pd && master.pd_type_name && currentPDStatus!=pdStatusCheck.DRAFT && currentPDStatus!=pdStatusCheck.TRIGGERED && currentPDStatus!=pdStatusCheck.ALLOCATED_TO_FIA && master.pd_status!=pdStatusCheck.CANCELLED && enableStartPD" mat-raised-button mat-button-md mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Discussion v2.0" matTooltipPosition="above" (click)="getPDStart2(addresses,master.pd_status)"><mat-icon>comment</mat-icon></button></span> -->
</div>
</div>
</div>

2
ng6-seed/src/app/shared/menu-items/horizontal-menu-items.ts
View File

@ -51,7 +51,7 @@ const HORIZONTALMENUITEMS = [
{state:'setting/pdteamlist',name:'PD Team'},
// {state:'template/questions', name: 'Questions'},
{state:'template/templates', name: 'Templates'},
{state:'template2', name: 'Templates 2.0'},
// {state:'template2', name: 'Templates 2.0'},
]
},

2
ng6-seed/src/app/shared/menu-items/menu-items.ts
View File

@ -83,7 +83,7 @@ const MENUITEMS : Menu[] = [
{state:'setting/pdteamlist',name:'PD Team'},
// {state:'template/questions', name: 'Questions'},
{state:'template/templates', name: 'Templates'},
{state:'template2/template2', name: 'Templates 2.0'},
// {state:'template2/template2', name: 'Templates 2.0'},
]
},
{