File
Implements
|
viewOnly
|
Type : boolean
|
Default value : false
|
|
|
Outputs
|
eventAction
|
Type : EventEmitter
|
|
|
Methods
|
deleteConfirmation
|
deleteConfirmation(index, attachment)
|
|
|
Parameters :
| Name |
Optional |
| index |
No
|
| attachment |
No
|
|
|
viewDocument
|
viewDocument(attachment)
|
|
|
Parameters :
| Name |
Optional |
| attachment |
No
|
|
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'app-attachment-lists',
templateUrl: './attachment-lists.component.html',
styleUrls: ['./attachment-lists.component.scss'],
})
export class AttachmentListsComponent implements OnInit {
@Input() attachments: any;
@Input() title: any;
@Input() type: any;
@Input() viewOnly:boolean = false;
@Output() eventAction = new EventEmitter();
constructor() {}
ngOnInit() {}
deleteConfirmation(index,attachment) {
let params = {
index: index,
action: "delete",
attachment:attachment
}
this.eventAction.emit(params);
}
viewDocument(attachment) {
let params = {
attachment: attachment,
action: "view"
}
this.eventAction.emit(params);
}
}
<ion-card class="attachments-card" *ngIf="attachments?.length">
<ion-card-header class="project-card _capitalize">
{{title | titlecase}}
</ion-card-header>
<ion-card-content>
<ion-list *ngFor="let attachment of attachments; let i = index" (click)="viewDocument(attachment)"
class="attachment-list">
<h5>
<ion-icon class="prefix-attachment" *ngIf="type == 'application/pdf'" name="document" slot="start">
</ion-icon>
<ion-icon class="prefix-attachment" *ngIf="type == 'link'" name="link-outline" slot="start"></ion-icon>
<ion-icon class="prefix-attachment" *ngIf="type == 'video/mp4'" name="videocam" slot="start"></ion-icon>
<span>{{attachment.name}} </span>
</h5>
<button slot="icon-only" *ngIf="!viewOnly" (click)="$event.stopPropagation();deleteConfirmation(i,attachment)">
<ion-icon name="close-circle" slot="end"></ion-icon>
<p class="card-text">{{'REMOVE_ACTIVITY'| translate}}
</p>
</button>
</ion-list>
</ion-card-content>
</ion-card>
@import "../../../../../assets/styles/variables";
.attachments-card{
border-radius: 16px;
background: $white-color;
margin: 0 0 10px 0;
ion-card-header{
font-size: 1rem;
border-bottom: 1px solid $gray-200;
padding: 10px;
font-weight:900;
margin-bottom: 15px;
}
}
.attachment-list{
border-radius: 8px;
color: var(--blue);
padding: 5px 5px;
display: flex;
margin: 10px 0px;
justify-content: space-between;
span{
margin-left: 30px;
word-break: break-all;
}
button{
background: transparent;
box-shadow: none !important;
/* margin-top: -7px; */
color: var(--blue);
font-size: 0.75rem;
p{
margin-bottom: 0px;
font-size: 0.5rem !important;
margin-top: -5px;
text-align: center;
font-weight: 600;
}
ion-icon{
font-size: 1.25rem;
}
}
.prefix-attachment{
font-size: 1.25rem;
position: absolute;
}
}
Legend
Html element with directive