lib/common/src/ui-components/action-buttons/action-button.component.ts
encapsulation | ViewEncapsulation.None |
selector | rcc-action-button |
styleUrls | ./action-button.component.css |
templateUrl | ./action-button.component.html |
Properties |
|
Methods |
|
Inputs |
Accessors |
constructor(rccToastController: RccToastController, rccAlertController: RccAlertController)
|
|||||||||
Parameters :
|
action | |
Type : Action | null
|
|
Public Async execute | ||||||
execute(action: HandlerAction)
|
||||||
Parameters :
Returns :
Promise<void>
|
Public getDataString | ||||||
getDataString(action: DownloadAction)
|
||||||
Parameters :
Returns :
string
|
hasChildComponent | ||||||
hasChildComponent(action: Action | null)
|
||||||
Parameters :
|
hasDescription | ||||||
hasDescription(action: Action | null)
|
||||||
Parameters :
|
isDownloadAction | ||||||
isDownloadAction(action: Action | null)
|
||||||
Parameters :
Returns :
DownloadAction
|
isHandlerAction | ||||||
isHandlerAction(action: Action | null)
|
||||||
Parameters :
Returns :
HandlerAction
|
isPathAction | ||||||
isPathAction(action: Action | null)
|
||||||
Parameters :
Returns :
PathAction
|
ngOnDestroy |
ngOnDestroy()
|
Returns :
void
|
Protected _action |
Type : Action | null
|
Protected notificationSub |
Type : Subscription
|
Public notificationValue |
Type : boolean | number
|
Default value : false
|
Public rccAlertController |
Type : RccAlertController
|
Public rccToastController |
Type : RccToastController
|
action | ||||||
getaction()
|
||||||
setaction(action: Action | null)
|
||||||
Parameters :
Returns :
void
|
import {
Component,
Input,
ViewEncapsulation,
OnDestroy
} from '@angular/core'
import {
b64EncodeUnicode
} from '@rcc/core'
import {
Subscription
} from 'rxjs'
import {
Action,
PathAction,
HandlerAction,
DownloadAction,
isPathAction,
isHandlerAction,
isDownloadAction,
hasNotification,
WithChildComponent,
WithDescription,
} from '../../actions'
import {
RccToastController,
RccAlertController
} from '../../modals-provider'
@Component({
selector: 'rcc-action-button',
templateUrl: './action-button.component.html',
styleUrls: ['./action-button.component.css'],
encapsulation: ViewEncapsulation.None
})
export class RccActionButtonComponent implements OnDestroy {
public notificationValue : boolean | number = false
protected notificationSub : Subscription
protected _action : Action | null
constructor(
public rccToastController: RccToastController,
public rccAlertController: RccAlertController
){}
@Input()
set action(action: Action | null) {
this.notificationSub?.unsubscribe()
this.notificationValue = null
this._action = null
if(!action) return;
this._action = action
if(!hasNotification(action)) return;
this.notificationSub = action.notification.subscribe( value => this.notificationValue = value)
}
get action(): Action | null { return this._action }
public async execute(action: HandlerAction): Promise<void> {
if(action.confirmMessage) await this.rccAlertController.confirm(action.confirmMessage)
try {
action.handler()
action.successMessage && void this.rccToastController.success(action.successMessage)
}catch(e){
action.failureMessage && void this.rccToastController.failure(action.failureMessage)
}
}
public getDataString(action:DownloadAction) : string {
const base64Data = b64EncodeUnicode(action.data)
return "data:text/plain;base64,"+ base64Data
}
isPathAction(action: Action | null) : action is PathAction {
if(!action) return false
return isPathAction(action)
}
isHandlerAction(action: Action | null) : action is HandlerAction {
if(!action) return false
return isHandlerAction(action)
}
isDownloadAction(action:Action | null) : action is DownloadAction {
if(!action) return false
return isDownloadAction(action)
}
hasDescription(action: Action | null) : action is Action & WithDescription {
if(!action) return false
return 'description' in action
}
hasChildComponent(action: Action | null) : action is Action & WithChildComponent {
if(!action) return false
return 'WithChildComponent' in action
}
ngOnDestroy() : void {
this.notificationSub?.unsubscribe()
}
}
<ng-container *ngIf = "action">
<ion-item
class = "ion-padding-horizontal"
*ngIf = "isPathAction(action)"
[button] = "true"
[disabled] = "action.disabled && action.disabled()"
[routerLink] = "action.path"
>
<ng-container [ngTemplateOutlet] = "innerItem"></ng-container>
</ion-item>
<ion-item
class = "ion-padding-horizontal"
*ngIf = "isHandlerAction(action)"
[button] = "true"
(click) = "execute(action)"
[disabled] = "action.disabled && action.disabled()"
>
<ng-container [ngTemplateOutlet] = "innerItem"></ng-container>
</ion-item>
<ion-item
class = "ion-padding-horizontal"
*ngIf = "isDownloadAction(action)"
[button] = "true"
[disabled] = "action.disabled && action.disabled()"
[download] = "action.filename"
[href] = "getDataString(action)"
target = "_blank"
>
<ng-container [ngTemplateOutlet] = "innerItem"></ng-container>
</ion-item>
<ng-template #innerItem>
<div slot ="start" class ="fab-wrapper">
<ion-fab-button color = "primary">
<ion-icon [name] = "action.icon | rccIcon"></ion-icon>
</ion-fab-button>
<ion-badge *ngIf = "notificationValue" color="secondary" slot = "end"> {{ notificationValue === true ? '!' : notificationValue }} </ion-badge>
</div>
<ion-label>
<h3 [id] = "action.label | toID:'rcc-e2e'">{{ action.label | translate}}</h3>
<p
class = "ion-text-wrap"
*ngIf = "hasDescription(action)"
[id] = "action.description | toID:'rcc-e2e'"
>
{{ action.description | translate }}
</p>
<p
class = "ion-text-wrap"
*ngIf = "hasChildComponent(action)"
>
<ng-container
[ngComponentOutlet] = "action.childComponent"
[class] = "action.description | toID:'rcc-e2e'"
></ng-container>
</p>
</ion-label>
</ng-template>
</ng-container>
./action-button.component.css
rcc-action-button .fab-wrapper{
position: relative;
padding-left: var(--ion-padding, 16px);
padding-top: var(--ion-padding, 16px);
padding-bottom: var(--ion-padding, 16px);
}
rcc-action-button .fab-wrapper ion-badge {
position: absolute;
top: 0.5em;
right: 0;
min-width: 1em;
}