add tag display in several views

- call list sorting
- category sorting
- motion list
This commit is contained in:
Maximilian Krambach 2019-04-12 16:30:14 +02:00
parent 2b9f1a21a9
commit 9cdeaf9245
6 changed files with 74 additions and 5 deletions

View File

@ -53,6 +53,12 @@ class Movement {
styleUrls: ['./sorting-tree.component.scss']
})
export class SortingTreeComponent<T extends Identifiable & Displayable> implements OnInit, OnDestroy {
/**
* Declare the templateRef to coexist between parent in child
*/
@ContentChild(TemplateRef)
public templateRef: TemplateRef<T>;
/**
* The data to build the tree
*/

View File

@ -26,7 +26,17 @@
(hasChanged)="receiveChanges($event)"
[model]="motionsObservable">
<ng-template #innerNode let-item="item">
<span>{{ item.getTitle() }}</span>
<div class="line">
<div class="left">
{{ item.getTitle() }}
</div>
<div class="right">
<span *ngFor="let tag of getTags(item)">
<mat-icon inline>local_offer</mat-icon>
{{ tag.getTitle() }}
</span>
</div>
</div>
</ng-template>
</os-sorting-tree>
</mat-card>

View File

@ -0,0 +1,22 @@
// TODO: partial duplicate of sorting-list
.line {
display: table;
width: 100%;
font-size: 14px;
min-height: 50px;
margin-bottom: 5px;
.left {
display: table-cell;
vertical-align: middle;
max-width: 100%;
}
.right {
display: table-cell;
padding-right: 10px;
vertical-align: middle;
width: auto;
white-space: nowrap;
}
}

View File

@ -7,19 +7,22 @@ import { Observable } from 'rxjs';
import { MotionRepositoryService } from 'app/core/repositories/motions/motion-repository.service';
import { BaseViewComponent } from 'app/site/base/base-view';
import { CanComponentDeactivate } from 'app/shared/utils/watch-sorting-tree.guard';
import { FlatNode } from 'app/core/ui-services/tree.service';
import { MotionCsvExportService } from 'app/site/motions/services/motion-csv-export.service';
import { MotionPdfExportService } from 'app/site/motions/services/motion-pdf-export.service';
import { PromptService } from 'app/core/ui-services/prompt.service';
import { SortingTreeComponent } from 'app/shared/components/sorting-tree/sorting-tree.component';
import { ViewMotion } from 'app/site/motions/models/view-motion';
import { PromptService } from 'app/core/ui-services/prompt.service';
import { CanComponentDeactivate } from 'app/shared/utils/watch-sorting-tree.guard';
import { ViewTag } from 'app/site/tags/models/view-tag';
/**
* Sort view for the call list.
*/
@Component({
selector: 'os-call-list',
templateUrl: './call-list.component.html'
templateUrl: './call-list.component.html',
styleUrls: ['./call-list.component.scss']
})
export class CallListComponent extends BaseViewComponent implements CanComponentDeactivate {
/**
@ -124,4 +127,15 @@ export class CallListComponent extends BaseViewComponent implements CanComponent
}
return true;
}
/**
* Get the tags associated with the motion of a sorting item
*
* @param item A FlatNode from a OsSortignTree
* @returns An array of ViewTags (or an empty adrray)
*/
public getTags(item: FlatNode<ViewMotion>): ViewTag[] {
const motion = this.motionRepo.getViewModel(item.id);
return motion ? motion.tags : [];
}
}

View File

@ -20,5 +20,15 @@
>
<span translate>Number motions</span>
</button>
<os-sorting-list [input]="motionObservable" #sorter></os-sorting-list>
<os-sorting-list [input]="motionObservable" #sorter>
<!-- implicit motion references into the component using ng-template slot -->
<ng-template let-motion>
<div class="ellipsis-overflow small" *ngIf="motion.tags && motion.tags.length">
<span *ngFor="let tag of motion.tags">
<mat-icon inline>local_offer</mat-icon>
{{ tag.getTitle() }}
</span>
</div>
</ng-template>
</os-sorting-list>
</mat-card>

View File

@ -113,6 +113,13 @@
<mat-icon>widgets</mat-icon>
{{ motion.motion_block.title }}
</div>
<div class="small ellipsis-overflow" *ngIf="motion.tags && motion.tags.length">
<mat-icon>local_offer</mat-icon>
<span *ngFor="let tag of motion.tags; let last = last">
{{ tag.getTitle() }}
<span *ngIf="!last">,&nbsp;</span>
</span>
</div>
</div>
</mat-cell>
</ng-container>