I have a (grid) component witch is used many times. The problem is it is to large, and it's ~70% could be dynamically generated - I think, but there are many way to solve, which is the best?
The html file:
<div class="items containerX" fxLayout="column" fxFlexFill>
<!--Operations-->
<div class="operations">
<div class="mobile-operations" fxShow.xs="true" fxHide.gt-xs="true">
<div fxLayout="row" fxFlex>
<div fxFlex="90" class="buttons">
<button type="button" class="adminButton" (click)="onAdd();">
<span class="fa fa-plus"></span> Add
</button>
<button type="button" class="adminButton" (click)="onDelete();" [disabled]='!hasSelectedSong'>
<span class="fa fa-times"></span> Remove
</button>
<button type="button" class="adminButton" (click)="onEdit();" [disabled]='!hasSelectedSong'>
<span class="fa fa-edit"></span> Edit
</button>
</div>
<div fxFlex="10" class="buttons" (click)="searchToggle = !searchToggle;" >
<span class="fa fa-search fa-lg searchButton"></span>
</div>
</div>
<div class="searchbar" *ngIf="searchToggle" fxFlex fxHide.gt-xs="true">
<form [formGroup]="simpleForm" fxFlex>
<input class="searchfield" type="text" placeholder="..." formControlName="simple" fxFlex>
</form>
</div>
</div>
<div class="operations" fxLayout="row" fxHide.lt-sm="true">
<div fxFlex class="buttons">
<button type="button" class="adminButton" (click)="onAdd();">
<span class="fa fa-plus"></span> <span fxHide.lt-md="true"> Add</span>
</button>
<button type="button" class="adminButton" (click)="onDelete();" [disabled]='!hasSelectedSong'>
<span class="fa fa-times"></span> <span fxHide.lt-md="true"> Remove</span>
</button>
<button type="button" class="adminButton" (click)="onEdit();" [disabled]='!hasSelectedSong'>
<span class="fa fa-edit"></span> <span fxHide.lt-md="true"> Edit</span>
</button>
</div>
<div fxFlex class="buttons">
<button type="button" class="adminButton" (click)="paginator.first()">
<span class="fa fa-caret-left"></span>
<span class="fa fa-caret-left"></span>
<span fxHide.lt-md="true">First</span>
</button>
<button type="button" class="adminButton" (click)="paginator.prev()">
<span class="fa fa-caret-left"></span>
<span fxHide.lt-md="true">Prev</span>
</button>
<span class="page-number">{{paginator.page}}</span>
<button type="button" class="adminButton" (click)="paginator.next()">
<span fxHide.lt-md="true">Next</span>
<span class="fa fa-caret-right"></span>
</button>
<button type="button" class="adminButton" (click)="paginator.last()">
<span fxHide.lt-md="true">Last</span>
<span class="fa fa-caret-right"></span>
<span class="fa fa-caret-right"></span>
</button>
</div>
<div fxFlex class="buttons">
<form [formGroup]="simpleForm">
<input class="globalSearch" type="text" placeholder="..." formControlName="simple">
<button type="button" (click)="onSearch();" class="searchButton">
<span class="fa fa-search"></span>
</button>
</form>
</div>
</div>
</div>
<div class="itemView">
<!--Header-->
<div class="header" fxLayout="row" [ngClass.xs]="{'search-open' : searchToggle, 'mobile-header' : true}">
<div fxFlex="100px" fxFlex.lt-sm="75px">
<span class="fa fa-hashtag" aria-hidden="true" (click)="paginator.reset()"></span>
</div>
<div fxFlex>
<div fxFlex="75px" fxHide.lt-sm="true" [ngClass]="{'sortBy' : sort == 'code'}">
<span class="item" (click)="onSortBy('code');">
Type <span *ngIf="sort == 'code'" class="fa" [ngClass]="getDirection('code')"></span>
</span>
</div>
<div fxFlex [ngClass]="{'sortBy' : sort == 'artist'}">
<span class="item" (click)="onSortBy('artist');">
Level <span *ngIf="sort == 'artist'" class="fa" [ngClass]="getDirection('artist')"></span>
</span>
</div>
<div fxFlex [ngClass]="{'sortBy' : sort == 'title'}">
<span class="item" (click)="onSortBy('title');">
Stat <span *ngIf="sort == 'title'" class="fa" [ngClass]="getDirection('title')"></span>
</span>
</div>
<div class="listLast" fxFlex="30px" fxHide.lt-sm="true"></div>
</form>
</div>
<!--items-->
<div class="items dd-list">
<div class="item" fxLayout="row" *ngFor="let item of items; let i = index;" [ngClass.xs]="{'search-open' : searchToggle}">
<div class="listFirst" scope="row" fxFlex="100px" fxFlex.lt-sm="75px">
<span fxFlex="25px" class="form-check-label adminCheckbox tools" (click)="selectItem(item._id);">
<i class="fa" aria-hidden="true" [ngClass]="{'fa-check-square': isSelected(item._id), 'fa-square': !isSelected(item._id)}"></i>
</span>
<span class="index" fxFlex>{{(i+1*paginator.page)}}</span>
<span class="tools" fxFlex="25px">
<a fxHide.lt-sm="true" (click)="onEdit(item._id)" class="fa fa-edit" aria-hidden="true"></a>
</span>
</div>
<div fxFlex>
<div class="listMiddle" fxFlex="75px" fxHide.lt-sm="true">{{item.type}}</div>
<div class="listMiddle artist" fxFlex title={{item.level}}>{{item.level}}</div>
<div class="listMiddle title" fxFlex title={{item.stats}}>{{item.stats | json}}</div>
</div>
<div class="tools listLast" fxFlex="30px" fxHide.lt-sm="true">
<a fxHide.lt-sm="true" (click)="onDelete(item._id);" class="fa fa-times " aria-hidden="true"></a>
</div>
</div>
</div>
</div>
</div>
<!--Popups-->
<popup name="removeItemAlert" type="alert">
<div popup-body>
Are you sure?
</div>
</popup>
As you can see I only have to change the columns name, search input names, items fields and dom element attributes (class, fxFlex) - to be responsive. What is the best practice (separated components, template, directive) to compress the content, but keep easily usable?
(The number fields of the item object varies).
Additional info:
Basic methods implemented in ItemsComponent, and this way I can overwrite them is required.
import { Component, OnInit, OnDestroy } from '@angular/core';
import { Router } from '@angular/router';
import {
FormGroup,
FormControl,
Validators,
FormBuilder,
FormArray
} from "@angular/forms";
import {
StorageService,
SystemService,
RequestService,
PopupService,
PaginatorService
} from '../_shared';
import {
ItemsComponent
} from '../_generals';
@Component({
selector: 'app-basic-characters',
templateUrl: './basic-characters.component.html',
styleUrls: ['./basic-characters.component.scss'],
providers: [PaginatorService]
})
export class BasicCharactersComponent extends ItemsComponent implements OnInit {
public item: string = "basicCharacters";
public class: string = 'BasicCharactersComponent';
constructor(
router: Router,
paginator: PaginatorService,
popup: PopupService,
storage: StorageService,
request: RequestService
) {
super(router, paginator, popup, storage, request);
}
public ngOnInit() {
super.ngOnInit();
// console.log('child init');
}
public newSearchForm(){
return new FormGroup({
'type': new FormControl(''),
'level': new FormControl(''),
'stats': new FormControl(''),
});
}
public newSimpleForm(){
return new FormGroup({
'simple': new FormControl('')
});
}
}
