File

lib/common/src/ui-components/action-buttons/action-button.component.ts

Implements

OnDestroy

Metadata

Index

Properties
Methods
Inputs
Accessors

Constructor

constructor(rccToastController: RccToastController, rccAlertController: RccAlertController)
Parameters :
Name Type Optional
rccToastController RccToastController No
rccAlertController RccAlertController No

Inputs

action
Type : Action | null

Methods

Public Async execute
execute(action: HandlerAction)
Parameters :
Name Type Optional
action HandlerAction No
Returns : Promise<void>
Public getDataString
getDataString(action: DownloadAction)
Parameters :
Name Type Optional
action DownloadAction No
Returns : string
hasChildComponent
hasChildComponent(action: Action | null)
Parameters :
Name Type Optional
action Action | null No
hasDescription
hasDescription(action: Action | null)
Parameters :
Name Type Optional
action Action | null No
isDownloadAction
isDownloadAction(action: Action | null)
Parameters :
Name Type Optional
action Action | null No
Returns : DownloadAction
isHandlerAction
isHandlerAction(action: Action | null)
Parameters :
Name Type Optional
action Action | null No
Returns : HandlerAction
isPathAction
isPathAction(action: Action | null)
Parameters :
Name Type Optional
action Action | null No
Returns : PathAction
ngOnDestroy
ngOnDestroy()
Returns : void

Properties

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

Accessors

action
getaction()
setaction(action: Action | null)
Parameters :
Name Type Optional
action Action | null No
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;
}
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""