Merge remote-tracking branch 'origin/css-issues'
This commit is contained in:
Dan Percic
commit
74fcbf080b
@ -20,6 +20,7 @@ import { PageHeaderComponent } from './page-header/page-header.component';
|
||||
import { IqserButtonsModule } from '../buttons';
|
||||
import { IqserHelpModeModule } from '../help-mode';
|
||||
import { TableContentComponent } from './table-content/table-content.component';
|
||||
import { TableItemComponent } from './table-content/table-item/table-item.component';
|
||||
|
||||
const matModules = [MatTooltipModule];
|
||||
const components = [
|
||||
@ -46,7 +47,7 @@ const modules = [
|
||||
const utils = [SyncWidthDirective];
|
||||
|
||||
@NgModule({
|
||||
declarations: [...components, ...utils, TableContentComponent],
|
||||
declarations: [...components, ...utils, TableContentComponent, TableItemComponent],
|
||||
exports: [...components, ...utils],
|
||||
imports: [CommonModule, ...modules, ...matModules],
|
||||
})
|
||||
|
||||
@ -5,7 +5,7 @@ import { FilterService, getFilteredEntities } from '../../filtering';
|
||||
import { SearchService } from '../../search';
|
||||
import { IListable } from '../models';
|
||||
import { EntitiesService } from './entities.service';
|
||||
import { getLength, shareDistinctLast, shareLast } from '../../utils';
|
||||
import { any, getLength, shareDistinctLast, shareLast } from '../../utils';
|
||||
|
||||
@Injectable()
|
||||
export class ListingService<E extends IListable> {
|
||||
@ -92,7 +92,15 @@ export class ListingService<E extends IListable> {
|
||||
}
|
||||
|
||||
isSelected(entity: E): boolean {
|
||||
return this.selected.indexOf(entity) !== -1;
|
||||
console.log('is selected');
|
||||
return this.selectedIds.indexOf(entity.id) !== -1;
|
||||
}
|
||||
|
||||
isSelected$(entity: E): Observable<boolean> {
|
||||
return this._selected$.pipe(
|
||||
any(selectedId => selectedId === entity.id),
|
||||
shareDistinctLast(),
|
||||
);
|
||||
}
|
||||
|
||||
selectAll(): void {
|
||||
|
||||
@ -15,23 +15,13 @@
|
||||
[ngClass]="getTableItemClasses(entity)"
|
||||
[routerLink]="entity.routerLink"
|
||||
>
|
||||
<ng-container *ngTemplateOutlet="tableItem; context: { entity: entity }"></ng-container>
|
||||
<iqser-table-item [entity]="entity" [selectionEnabled]="selectionEnabled"></iqser-table-item>
|
||||
</div>
|
||||
|
||||
<ng-template #withoutMouseEvents>
|
||||
<div [ngClass]="getTableItemClasses(entity)" [routerLink]="entity.routerLink">
|
||||
<ng-container *ngTemplateOutlet="tableItem; context: { entity: entity }"></ng-container>
|
||||
<iqser-table-item [entity]="entity" [selectionEnabled]="selectionEnabled"></iqser-table-item>
|
||||
</div>
|
||||
</ng-template>
|
||||
</ng-container>
|
||||
</cdk-virtual-scroll-viewport>
|
||||
|
||||
<ng-template #tableItem let-entity="entity">
|
||||
<div (click)="listingComponent.toggleEntitySelected($event, entity)" *ngIf="selectionEnabled" class="selection-column">
|
||||
<iqser-round-checkbox [active]="listingService.isSelected(entity)"></iqser-round-checkbox>
|
||||
</div>
|
||||
|
||||
<ng-container *ngTemplateOutlet="listingComponent.tableItemTemplate; context: { entity: entity }"></ng-container>
|
||||
|
||||
<div class="scrollbar-placeholder"></div>
|
||||
</ng-template>
|
||||
|
||||
@ -20,53 +20,7 @@
|
||||
.table-item {
|
||||
display: contents;
|
||||
|
||||
> *:not(.selection-column):not(.scrollbar-placeholder) {
|
||||
display: contents;
|
||||
}
|
||||
|
||||
> div,
|
||||
.cell {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
border-bottom: 1px solid var(--iqser-separator);
|
||||
height: var(--itemSize);
|
||||
padding: 0 10px;
|
||||
|
||||
&.center {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.cell {
|
||||
min-width: 110px;
|
||||
|
||||
&:first-of-type {
|
||||
padding: 0 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.selection-column {
|
||||
padding-right: 0 !important;
|
||||
|
||||
iqser-round-checkbox .wrapper {
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s;
|
||||
|
||||
&.active {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
& + * > .cell:first-of-type {
|
||||
padding: 0 10px;
|
||||
}
|
||||
}
|
||||
|
||||
&.disabled > div,
|
||||
&.disabled > iqser-table-item > div,
|
||||
&.disabled .cell {
|
||||
background-color: var(--iqser-grey-2);
|
||||
color: var(--iqser-disabled);
|
||||
@ -76,36 +30,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.table-item-title {
|
||||
font-weight: 600;
|
||||
@include mixins.line-clamp(1);
|
||||
width: fit-content;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
position: absolute;
|
||||
display: none;
|
||||
right: -11px;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: fit-content;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding-left: 100px;
|
||||
padding-right: 21px;
|
||||
z-index: 1;
|
||||
background: linear-gradient(to right, rgba(244, 245, 247, 0) 0%, var(--iqser-grey-2) 35%);
|
||||
|
||||
mat-icon {
|
||||
width: 14px;
|
||||
}
|
||||
|
||||
iqser-circle-button:not(:last-child) {
|
||||
margin-right: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
input,
|
||||
mat-select {
|
||||
margin-top: 0;
|
||||
@ -117,12 +41,12 @@
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
display: flex !important;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover:not(.disabled) {
|
||||
> div,
|
||||
.cell,
|
||||
> * > div {
|
||||
background-color: var(--iqser-not-disabled-table-item);
|
||||
}
|
||||
@ -133,16 +57,14 @@
|
||||
&:hover {
|
||||
overflow-y: auto !important;
|
||||
|
||||
&.has-scrollbar {
|
||||
.table-item {
|
||||
.action-buttons {
|
||||
right: 0;
|
||||
padding-right: 13px;
|
||||
}
|
||||
&.has-scrollbar .table-item::ng-deep {
|
||||
.action-buttons {
|
||||
right: 0;
|
||||
padding-right: 13px;
|
||||
}
|
||||
|
||||
.scrollbar-placeholder {
|
||||
display: none;
|
||||
}
|
||||
.scrollbar-placeholder {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -0,0 +1,7 @@
|
||||
<div (click)="listingComponent.toggleEntitySelected($event, entity)" *ngIf="selectionEnabled" class="selection-column">
|
||||
<iqser-round-checkbox [active]="isSelected$ | async"></iqser-round-checkbox>
|
||||
</div>
|
||||
|
||||
<ng-container *ngTemplateOutlet="listingComponent.tableItemTemplate; context: { entity: entity }"></ng-container>
|
||||
|
||||
<div class="scrollbar-placeholder"></div>
|
||||
@ -0,0 +1,82 @@
|
||||
@use '../../../../assets/styles/common-mixins' as mixins;
|
||||
|
||||
:host::ng-deep {
|
||||
display: contents;
|
||||
|
||||
> *:not(.selection-column):not(.scrollbar-placeholder) {
|
||||
display: contents;
|
||||
}
|
||||
|
||||
> div,
|
||||
.cell {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
border-bottom: 1px solid var(--iqser-separator);
|
||||
height: var(--itemSize);
|
||||
padding: 0 10px;
|
||||
|
||||
&.center {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.cell {
|
||||
min-width: 110px;
|
||||
|
||||
&:first-of-type {
|
||||
padding: 0 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.selection-column {
|
||||
padding-right: 0 !important;
|
||||
|
||||
iqser-round-checkbox .wrapper {
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s;
|
||||
|
||||
&.active {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
& + * > .cell:first-of-type {
|
||||
padding: 0 10px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.table-item-title {
|
||||
font-weight: 600;
|
||||
@include mixins.line-clamp(1);
|
||||
width: fit-content;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
position: absolute;
|
||||
display: none !important;
|
||||
right: -11px;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: fit-content;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding-left: 100px;
|
||||
padding-right: 21px;
|
||||
z-index: 1;
|
||||
background: linear-gradient(to right, rgba(244, 245, 247, 0) 0%, var(--iqser-grey-2) 35%);
|
||||
|
||||
mat-icon {
|
||||
width: 14px;
|
||||
}
|
||||
|
||||
iqser-circle-button:not(:last-child) {
|
||||
margin-right: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,25 @@
|
||||
import { ChangeDetectionStrategy, Component, forwardRef, Inject, Input, OnInit } from '@angular/core';
|
||||
import { IListable, ListingComponent, ListingService } from '@iqser/common-ui';
|
||||
import { Observable } from 'rxjs';
|
||||
|
||||
@Component({
|
||||
selector: 'iqser-table-item',
|
||||
templateUrl: './table-item.component.html',
|
||||
styleUrls: ['./table-item.component.scss'],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
})
|
||||
export class TableItemComponent<T extends IListable> implements OnInit {
|
||||
@Input() entity!: T;
|
||||
@Input() selectionEnabled = false;
|
||||
|
||||
isSelected$!: Observable<boolean>;
|
||||
|
||||
constructor(
|
||||
@Inject(forwardRef(() => ListingComponent)) readonly listingComponent: ListingComponent<T>,
|
||||
readonly listingService: ListingService<T>,
|
||||
) {}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.isSelected$ = this.listingService.isSelected$(this.entity);
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user