Marmelator/common-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

pls fix css

Browse Source
This commit is contained in:
Dan Percic 2021-11-17 15:51:20 +02:00
parent 2b73cfcc8b
commit d5652d5ef7
7 changed files with 93 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/lib/listing/listing.module.ts
View File

@ -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],
})

13
src/lib/listing/services/listing.service.ts
View File

@ -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, log, shareDistinctLast, shareLast } from '../../utils';
@Injectable()
export class ListingService<E extends IListable> {
@ -92,7 +92,16 @@ 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),
log(),
shareDistinctLast(),
);
}
selectAll(): void {

14
src/lib/listing/table-content/table-content.component.html
View File

@ -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]="listingComponent.isSelected(entity)"></iqser-round-checkbox>
</div>
<ng-container *ngTemplateOutlet="listingComponent.tableItemTemplate; context: { entity: entity }"></ng-container>
<div class="scrollbar-placeholder"></div>
</ng-template>

43
src/lib/listing/table-content/table-content.component.scss
View File

@ -24,48 +24,7 @@
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;
}
}
> iqser-table-item
&.disabled > div,
&.disabled .cell {
background-color: var(--iqser-grey-2);

7
src/lib/listing/table-content/table-item/table-item.component.html Normal file
View File

@ -0,0 +1,7 @@
<div (click)="listingComponent.toggleEntitySelected($event, entity)" *ngIf="selectionEnabled" class="selec tion-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>

45
src/lib/listing/table-content/table-item/table-item.component.scss Normal file
View File

@ -0,0 +1,45 @@
:host {
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;
}
}

25
src/lib/listing/table-content/table-item/table-item.component.ts Normal file
View File

@ -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);
}
}