Initial Commit on git.saherelm.ir ...
This commit is contained in:
@@ -0,0 +1,804 @@
|
||||
import {
|
||||
nameof,
|
||||
assign,
|
||||
XParam,
|
||||
isFunction,
|
||||
XResourceIDs,
|
||||
XModelProperty,
|
||||
XModalButtonRole,
|
||||
XModelKeyProvider,
|
||||
isNullOrUndefined,
|
||||
isNullOrEmptyString,
|
||||
} from 'x-framework-core';
|
||||
import { Subject } from 'rxjs';
|
||||
import {
|
||||
XListItem,
|
||||
XIconNames,
|
||||
XPopoverComponent,
|
||||
XListItemSlideOption,
|
||||
XModelPresenterAction,
|
||||
XModelPresenterActionModel,
|
||||
} from 'x-framework-components';
|
||||
import { Component } from '@angular/core';
|
||||
import { XMarkdownMode } from 'x-framework-components';
|
||||
import { VPageComponent } from '../../../views/v-page/v-page.component';
|
||||
import { AppResourceIDs } from 'src/app/config/app.localization.config';
|
||||
|
||||
export interface DataMODEL {
|
||||
firstName: string;
|
||||
lastName: string;
|
||||
email: string;
|
||||
contacts: Array<{
|
||||
type: 'mobile' | 'phone';
|
||||
title: string;
|
||||
number: string;
|
||||
}>;
|
||||
checkList: {
|
||||
todo1: boolean;
|
||||
todo2: boolean;
|
||||
todo3: boolean;
|
||||
todo4: Array<{
|
||||
action: string;
|
||||
dueData: Date;
|
||||
}>;
|
||||
};
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'app-model-presenter',
|
||||
templateUrl: './model-presenter.page.html',
|
||||
styleUrls: ['./model-presenter.page.scss'],
|
||||
})
|
||||
// tslint:disable-next-line:component-class-suffix
|
||||
export class ModelPresenterPage extends VPageComponent {
|
||||
//
|
||||
//#region Props ...
|
||||
//
|
||||
//#region Page Props ...
|
||||
titleRes = AppResourceIDs.model_presenter;
|
||||
toolbarTitle = this.resourceProvider(this.titleRes);
|
||||
toolbarSubTitle = this.resourceProvider(
|
||||
AppResourceIDs.model_presenter_description
|
||||
);
|
||||
toolbarShowSubTitle = true;
|
||||
//#endregion
|
||||
|
||||
//
|
||||
// Prepare All Resource IDs ...
|
||||
readonly ResourceIDs = Object.assign(
|
||||
Object.assign({}, XResourceIDs),
|
||||
AppResourceIDs
|
||||
) as any;
|
||||
|
||||
//
|
||||
readonly IconNames = Object.assign({}, XIconNames);
|
||||
//#endregion
|
||||
|
||||
//
|
||||
readonly MarkdownModes = Object.assign({}, XMarkdownMode);
|
||||
|
||||
//
|
||||
//#region Model Presenter ...
|
||||
dataModel: DataMODEL = {
|
||||
firstName: 'Hadi',
|
||||
lastName: 'Khazaee Asl',
|
||||
email: 'hadi_khazaee_asl@yahoo.com',
|
||||
contacts: [
|
||||
{
|
||||
type: 'mobile',
|
||||
title: 'Personal',
|
||||
number: '09121694056',
|
||||
},
|
||||
{
|
||||
type: 'phone',
|
||||
title: 'saherelm office',
|
||||
number: '02632757987',
|
||||
},
|
||||
],
|
||||
checkList: {
|
||||
todo1: true,
|
||||
todo2: false,
|
||||
todo3: true,
|
||||
todo4: [
|
||||
{
|
||||
action: 'start',
|
||||
dueData: new Date(),
|
||||
},
|
||||
{
|
||||
action: 'end',
|
||||
dueData: new Date(),
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
actionProvider = new Subject<XModelPresenterActionModel>();
|
||||
|
||||
availableModelKeys: string[] = [
|
||||
nameof<DataMODEL>('lastName'),
|
||||
nameof<DataMODEL>('firstName'),
|
||||
nameof<DataMODEL>('email'),
|
||||
nameof<DataMODEL>('contacts'),
|
||||
nameof<DataMODEL>('checkList'),
|
||||
|
||||
//
|
||||
// Contacts ...
|
||||
// `${nameof<DataMODEL>('contacts')}.type`,
|
||||
`${nameof<DataMODEL>('contacts')}.title`,
|
||||
// `${nameof<DataMODEL>('contacts')}.number`,
|
||||
|
||||
//
|
||||
// Checklist ...
|
||||
`${nameof<DataMODEL>('checkList')}.todo1`,
|
||||
`${nameof<DataMODEL>('checkList')}.todo2`,
|
||||
`${nameof<DataMODEL>('checkList')}.todo3`,
|
||||
`${nameof<DataMODEL>('checkList')}.todo4`,
|
||||
|
||||
//
|
||||
`${nameof<DataMODEL>('checkList')}.todo4.action`,
|
||||
`${nameof<DataMODEL>('checkList')}.todo4.dueData`,
|
||||
];
|
||||
|
||||
hiddenModelKeys: string[] = [`${nameof<DataMODEL>('contacts')}.type`];
|
||||
|
||||
hiddenLabelModelKeys: string[] = [`${nameof<DataMODEL>('contacts')}.number`];
|
||||
|
||||
//
|
||||
sortOrederModelKeys: string[] = [
|
||||
nameof<DataMODEL>('firstName'),
|
||||
nameof<DataMODEL>('lastName'),
|
||||
nameof<DataMODEL>('email'),
|
||||
nameof<DataMODEL>('contacts'),
|
||||
nameof<DataMODEL>('checkList'),
|
||||
|
||||
//
|
||||
// Contacts ...
|
||||
`${nameof<DataMODEL>('contacts')}.number`,
|
||||
`${nameof<DataMODEL>('contacts')}.title`,
|
||||
|
||||
//
|
||||
// Checklist ...
|
||||
`${nameof<DataMODEL>('checkList')}.todo4.dueData`,
|
||||
`${nameof<DataMODEL>('checkList')}.todo4.action`,
|
||||
];
|
||||
|
||||
//
|
||||
modelKeyProvider: XModelKeyProvider<any> = (key) => {
|
||||
//
|
||||
let result = key as string;
|
||||
|
||||
//
|
||||
switch (key) {
|
||||
//
|
||||
case nameof<DataMODEL>('firstName'):
|
||||
result = this.resourceProvider(this.AppResourceIDs.first_name);
|
||||
break;
|
||||
|
||||
//
|
||||
case nameof<DataMODEL>('lastName'):
|
||||
result = this.resourceProvider(this.AppResourceIDs.last_name);
|
||||
break;
|
||||
|
||||
//
|
||||
case nameof<DataMODEL>('contacts'):
|
||||
result = this.resourceProvider(this.AppResourceIDs.content);
|
||||
break;
|
||||
|
||||
//
|
||||
default:
|
||||
result = key as string;
|
||||
break;
|
||||
}
|
||||
|
||||
//
|
||||
return result;
|
||||
};
|
||||
//#endregion
|
||||
|
||||
//
|
||||
// Content ...
|
||||
readonly contentFa = `
|
||||
# ${this.toolbarTitle}
|
||||
این مولفه جهت نمایش و ویرایش یک شی یا مدل در نمایی ساختار یافته بکار می رود.
|
||||
`;
|
||||
|
||||
readonly contentEn = `
|
||||
# ${this.toolbarTitle}
|
||||
this component used to view and edit data models in an structural view.
|
||||
`;
|
||||
|
||||
//
|
||||
readonly sample1 =
|
||||
'```html' +
|
||||
`
|
||||
<x-model-presenter
|
||||
class="v-card"
|
||||
[isInPage]="true"
|
||||
[model]="dataModel"
|
||||
[wrapWithCard]="true"
|
||||
[color]="ColorNames.Light"
|
||||
[cardTitle]="'Object Editor'"
|
||||
[cardColor]="ColorNames.Light"
|
||||
[valueColor]="ColorNames.Dark"
|
||||
[startupState]="'collapse-all'"
|
||||
[headerColor]="ColorNames.Light"
|
||||
[actionProvider]="actionProvider"
|
||||
[hiddenModelKeys]="hiddenModelKeys"
|
||||
[modelKeyProvider]="modelKeyProvider"
|
||||
[labelColor]="ColorNames.TertiaryShade"
|
||||
[availableModelKeys]="availableModelKeys"
|
||||
[sortOrderModelKeys]="sortOrederModelKeys"
|
||||
[propertyActionTemplate]="propertyActionRef"
|
||||
[hiddenLabelModelKeys]="hiddenLabelModelKeys"
|
||||
(onModelChanged)="handleModelChanged($event)"
|
||||
[headerHighlightColor]="ColorNames.WarningTint"
|
||||
></x-model-presenter>
|
||||
` +
|
||||
'```';
|
||||
|
||||
readonly sample2 =
|
||||
'```html' +
|
||||
`
|
||||
<!-- Property Action Template -->
|
||||
<ng-template
|
||||
#propertyActionRef
|
||||
let-key="key"
|
||||
let-prefix="prefix"
|
||||
let-value="value"
|
||||
>
|
||||
<!-- is Small Screen -->
|
||||
<ng-container *ngIf="isMobileUi$ | async">
|
||||
<!-- Property Selector -->
|
||||
<x-icon
|
||||
[clickable]="true"
|
||||
[foregroundColor]="true"
|
||||
[color]="ColorNames.Dark"
|
||||
[name]="IconNames.menu_vertical"
|
||||
(clicked)="handlePropertyActionMenuClicked(key, prefix, value)"
|
||||
></x-icon>
|
||||
</ng-container>
|
||||
|
||||
<!-- is Big Screen -->
|
||||
<ng-container *ngIf="isNotMobileUi$ | async">
|
||||
<!-- Property Selector -->
|
||||
<x-icon
|
||||
[clickable]="true"
|
||||
[foregroundColor]="true"
|
||||
[name]="IconNames.edit"
|
||||
(clicked)="handlePropertyEdit(key, prefix, value)"
|
||||
[color]="(notNullOrUndefinedValue(value) | async) ? ColorNames.Tertiary : ColorNames.Danger"
|
||||
></x-icon>
|
||||
|
||||
<!-- Property Clear -->
|
||||
<x-icon
|
||||
[clickable]="true"
|
||||
[foregroundColor]="true"
|
||||
[name]="IconNames.clear"
|
||||
[color]="ColorNames.Danger"
|
||||
[uiDisabled]="nullOrUndefinedValue(value) | async"
|
||||
(clicked)="handlePropertyClear(key, prefix, value)"
|
||||
></x-icon>
|
||||
</ng-container>
|
||||
</ng-template>
|
||||
` +
|
||||
'```';
|
||||
|
||||
readonly sample3 =
|
||||
'```javascript' +
|
||||
`
|
||||
export interface DataMODEL {
|
||||
firstName: string;
|
||||
lastName: string;
|
||||
email: string;
|
||||
contacts: Array<{
|
||||
type: 'mobile' | 'phone';
|
||||
title: string;
|
||||
number: string;
|
||||
}>;
|
||||
checkList: {
|
||||
todo1: boolean;
|
||||
todo2: boolean;
|
||||
todo3: boolean;
|
||||
todo4: Array<{
|
||||
action: string;
|
||||
dueData: Date;
|
||||
}>;
|
||||
};
|
||||
}
|
||||
` +
|
||||
'```';
|
||||
|
||||
readonly sample4 =
|
||||
'```javascript' +
|
||||
`
|
||||
dataModel: DataMODEL = {
|
||||
firstName: 'Hadi',
|
||||
lastName: 'Khazaee Asl',
|
||||
email: 'hadi_khazaee_asl@yahoo.com',
|
||||
contacts: [
|
||||
{
|
||||
type: 'mobile',
|
||||
title: 'Personal',
|
||||
number: '09121694056',
|
||||
},
|
||||
{
|
||||
type: 'phone',
|
||||
title: 'saherelm office',
|
||||
number: '02632757987',
|
||||
},
|
||||
],
|
||||
checkList: {
|
||||
todo1: true,
|
||||
todo2: false,
|
||||
todo3: true,
|
||||
todo4: [
|
||||
{
|
||||
action: 'start',
|
||||
dueData: new Date(),
|
||||
},
|
||||
{
|
||||
action: 'end',
|
||||
dueData: new Date(),
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
actionProvider = new Subject<XModelPresenterActionModel>();
|
||||
|
||||
availableModelKeys: string[] = [
|
||||
nameof<DataMODEL>('lastName'),
|
||||
nameof<DataMODEL>('firstName'),
|
||||
nameof<DataMODEL>('email'),
|
||||
nameof<DataMODEL>('contacts'),
|
||||
nameof<DataMODEL>('checkList'),
|
||||
|
||||
//
|
||||
// Contacts ...
|
||||
\`\${nameof<DataMODEL>('contacts')}.type\`,
|
||||
\`\${nameof<DataMODEL>('contacts')}.title\`,
|
||||
\`\${nameof<DataMODEL>('contacts')}.number\`,
|
||||
|
||||
//
|
||||
// Checklist ...
|
||||
\`\${nameof<DataMODEL>('checkList')}.todo1\`,
|
||||
\`\${nameof<DataMODEL>('checkList')}.todo2\`,
|
||||
\`\${nameof<DataMODEL>('checkList')}.todo3\`,
|
||||
\`\${nameof<DataMODEL>('checkList')}.todo4\`,
|
||||
|
||||
//
|
||||
\`\${nameof<DataMODEL>('checkList')}.todo4.action\`,
|
||||
\`\${nameof<DataMODEL>('checkList')}.todo4.dueData\`,
|
||||
];
|
||||
|
||||
hiddenModelKeys: string[] = [\`\${nameof<DataMODEL>('contacts')}.type\`];
|
||||
|
||||
hiddenLabelModelKeys: string[] = [\`\${nameof<DataMODEL>('contacts')}.number\`];
|
||||
|
||||
//
|
||||
sortOrederModelKeys: string[] = [
|
||||
nameof<DataMODEL>('firstName'),
|
||||
nameof<DataMODEL>('lastName'),
|
||||
nameof<DataMODEL>('email'),
|
||||
nameof<DataMODEL>('contacts'),
|
||||
nameof<DataMODEL>('checkList'),
|
||||
|
||||
//
|
||||
// Contacts ...
|
||||
\`\${nameof<DataMODEL>('contacts')}.number\`,
|
||||
\`\${nameof<DataMODEL>('contacts')}.title\`,
|
||||
|
||||
//
|
||||
// Checklist ...
|
||||
\`\${nameof<DataMODEL>('checkList')}.todo4.dueData\`,
|
||||
\`\${nameof<DataMODEL>('checkList')}.todo4.action\`,
|
||||
];
|
||||
|
||||
//
|
||||
modelKeyProvider: XModelPresenterModelKeyProvider<any> = (key) => {
|
||||
//
|
||||
let result = key as string;
|
||||
|
||||
//
|
||||
switch (key) {
|
||||
//
|
||||
case nameof<DataMODEL>('firstName'):
|
||||
result = this.resourceProvider(this.AppResourceIDs.first_name);
|
||||
break;
|
||||
|
||||
//
|
||||
case nameof<DataMODEL>('lastName'):
|
||||
result = this.resourceProvider(this.AppResourceIDs.last_name);
|
||||
break;
|
||||
|
||||
//
|
||||
case nameof<DataMODEL>('contacts'):
|
||||
result = this.resourceProvider(this.AppResourceIDs.content);
|
||||
break;
|
||||
|
||||
//
|
||||
default:
|
||||
result = key as string;
|
||||
break;
|
||||
}
|
||||
|
||||
//
|
||||
return result;
|
||||
};
|
||||
` +
|
||||
'```';
|
||||
|
||||
readonly sample5 =
|
||||
'```javascript' +
|
||||
`
|
||||
async handlePropertyActionMenuClicked(
|
||||
key: string,
|
||||
prefix: string,
|
||||
value: any
|
||||
) {
|
||||
//
|
||||
if (isNullOrEmptyString(key)) {
|
||||
return;
|
||||
}
|
||||
|
||||
//
|
||||
const onlyIcon = false;
|
||||
const slideOptions: XListItemSlideOption[] = [];
|
||||
|
||||
//
|
||||
// Edit ...
|
||||
slideOptions.push({
|
||||
id: 'property_edit',
|
||||
icon: this.IconNames.edit,
|
||||
title: this.ResourceIDs.edit,
|
||||
color: isNullOrUndefined(value)
|
||||
? this.ColorNames.Danger
|
||||
: this.ColorNames.Tertiary,
|
||||
slot: 'start',
|
||||
onlyIcon,
|
||||
handler: async () => {
|
||||
await this.handlePropertyEdit(key, prefix, value);
|
||||
},
|
||||
});
|
||||
|
||||
//
|
||||
// Clear ...
|
||||
slideOptions.push({
|
||||
id: 'property_clear',
|
||||
icon: this.IconNames.clear,
|
||||
title: this.ResourceIDs.clear,
|
||||
color: this.ColorNames.Danger,
|
||||
slot: 'start',
|
||||
disabled: isNullOrUndefined(value),
|
||||
onlyIcon,
|
||||
handler: async () => {
|
||||
await this.handlePropertyClear(key, prefix, value);
|
||||
},
|
||||
});
|
||||
|
||||
//
|
||||
// Menu Items ...
|
||||
const item: XListItem<any> = {
|
||||
data: '',
|
||||
slideOptions,
|
||||
};
|
||||
|
||||
//
|
||||
const popOver = await this.managerService.dialogService.presentPopover({
|
||||
component: XPopoverComponent,
|
||||
componentProps: assign({}, { key: XParam.Item, value: item }),
|
||||
translucent: true,
|
||||
showBackdrop: true,
|
||||
event,
|
||||
});
|
||||
|
||||
//
|
||||
const { data } = await popOver.onWillDismiss();
|
||||
if (!data || !data.id || !data.data) {
|
||||
return;
|
||||
}
|
||||
|
||||
//
|
||||
const optionId = data.id.toString() as string;
|
||||
const option =
|
||||
item && item.slideOptions
|
||||
? item.slideOptions.find((so) => so.id === optionId)
|
||||
: null;
|
||||
if (!option) {
|
||||
return;
|
||||
}
|
||||
|
||||
//
|
||||
const handler = option.handler;
|
||||
if (!handler || !isFunction(handler)) {
|
||||
return;
|
||||
}
|
||||
|
||||
//
|
||||
// Run Handler ...
|
||||
await handler();
|
||||
}
|
||||
|
||||
async handlePropertyEdit(key: string, prefix: string, value: any) {
|
||||
//
|
||||
if (isNullOrEmptyString(key)) {
|
||||
return;
|
||||
}
|
||||
|
||||
//
|
||||
await this.managerService.dialogService.presentAlert({
|
||||
header: 'Change Value:',
|
||||
message: 'Enter new Value:',
|
||||
inputs: [
|
||||
{
|
||||
type: 'text',
|
||||
name: 'value',
|
||||
label: 'Value',
|
||||
placeholder: isNullOrUndefined(value) ? '' : \`\${value.toString()}\`,
|
||||
},
|
||||
],
|
||||
buttons: [
|
||||
{
|
||||
text: 'Change',
|
||||
role: XModalButtonRole.Selected,
|
||||
cssClass: ['btn-selected'],
|
||||
handler: async (value) => {
|
||||
//
|
||||
let newValue = '';
|
||||
if (value && value.value) {
|
||||
newValue = value.value;
|
||||
}
|
||||
|
||||
//
|
||||
console.log('new value to set: ', newValue);
|
||||
|
||||
//
|
||||
this.actionProvider.next({
|
||||
action: XModelPresenterAction.SetProperty,
|
||||
payload: {
|
||||
key: key,
|
||||
value: newValue,
|
||||
keyPrefix: prefix,
|
||||
} as XModelPresenterProperty,
|
||||
});
|
||||
},
|
||||
},
|
||||
{
|
||||
text: 'Cancel',
|
||||
role: XModalButtonRole.Cancel,
|
||||
cssClass: ['btn-cancel'],
|
||||
},
|
||||
],
|
||||
});
|
||||
}
|
||||
|
||||
async handlePropertyClear(key: string, prefix: string, value: any) {
|
||||
//
|
||||
if (isNullOrEmptyString(key) || isNullOrUndefined(value)) {
|
||||
return;
|
||||
}
|
||||
|
||||
//
|
||||
await this.managerService.dialogService.presentAreYouSureYesNoDialog(() => {
|
||||
//
|
||||
this.actionProvider.next({
|
||||
action: XModelPresenterAction.ClearProperty,
|
||||
payload: {
|
||||
key,
|
||||
keyPrefix: prefix,
|
||||
} as XModelPresenterProperty,
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
async handleModelChanged(event: any) {
|
||||
console.log('handle model changed: ', event);
|
||||
}
|
||||
` +
|
||||
'```';
|
||||
|
||||
// readonly sample3 =
|
||||
// '```html' +
|
||||
// `
|
||||
// ` +
|
||||
// '```';
|
||||
|
||||
//
|
||||
//#region UI Providers ...
|
||||
//
|
||||
// Provide content based on current locale ...
|
||||
getContent(title: string) {
|
||||
//
|
||||
if (isNullOrEmptyString(title)) {
|
||||
return '';
|
||||
}
|
||||
|
||||
//
|
||||
const currentLocale = this.managerService.currentLocale;
|
||||
|
||||
//
|
||||
const varName =
|
||||
title +
|
||||
(currentLocale === 'en-US'
|
||||
? 'En'
|
||||
: currentLocale === 'fa-IR'
|
||||
? 'Fa'
|
||||
: '');
|
||||
|
||||
const result = this[`${varName}`];
|
||||
|
||||
//
|
||||
return result || '';
|
||||
}
|
||||
//#endregion
|
||||
|
||||
//
|
||||
//#region UI Handlers ...
|
||||
//
|
||||
//#region Model Presenter Handlers ...
|
||||
async handlePropertyActionMenuClicked(
|
||||
key: string,
|
||||
prefix: string,
|
||||
value: any
|
||||
) {
|
||||
//
|
||||
if (isNullOrEmptyString(key)) {
|
||||
return;
|
||||
}
|
||||
|
||||
//
|
||||
const onlyIcon = false;
|
||||
const slideOptions: XListItemSlideOption[] = [];
|
||||
|
||||
//
|
||||
// Edit ...
|
||||
slideOptions.push({
|
||||
id: 'property_edit',
|
||||
icon: this.IconNames.edit,
|
||||
title: this.ResourceIDs.edit,
|
||||
color: isNullOrUndefined(value)
|
||||
? this.ColorNames.Danger
|
||||
: this.ColorNames.Tertiary,
|
||||
slot: 'start',
|
||||
onlyIcon,
|
||||
handler: async () => {
|
||||
await this.handlePropertyEdit(key, prefix, value);
|
||||
},
|
||||
});
|
||||
|
||||
//
|
||||
// Clear ...
|
||||
slideOptions.push({
|
||||
id: 'property_clear',
|
||||
icon: this.IconNames.clear,
|
||||
title: this.ResourceIDs.clear,
|
||||
color: this.ColorNames.Danger,
|
||||
slot: 'start',
|
||||
disabled: isNullOrUndefined(value),
|
||||
onlyIcon,
|
||||
handler: async () => {
|
||||
await this.handlePropertyClear(key, prefix, value);
|
||||
},
|
||||
});
|
||||
|
||||
//
|
||||
// Menu Items ...
|
||||
const item: XListItem<any> = {
|
||||
data: '',
|
||||
slideOptions,
|
||||
};
|
||||
|
||||
//
|
||||
const popOver = await this.managerService.dialogService.presentPopover({
|
||||
component: XPopoverComponent,
|
||||
componentProps: assign({}, { key: XParam.Item, value: item }),
|
||||
translucent: true,
|
||||
showBackdrop: true,
|
||||
event,
|
||||
});
|
||||
|
||||
//
|
||||
const { data } = await popOver.onWillDismiss();
|
||||
if (!data || !data.id || !data.data) {
|
||||
return;
|
||||
}
|
||||
|
||||
//
|
||||
const optionId = data.id.toString() as string;
|
||||
const option =
|
||||
item && item.slideOptions
|
||||
? item.slideOptions.find((so) => so.id === optionId)
|
||||
: null;
|
||||
if (!option) {
|
||||
return;
|
||||
}
|
||||
|
||||
//
|
||||
const handler = option.handler;
|
||||
if (!handler || !isFunction(handler)) {
|
||||
return;
|
||||
}
|
||||
|
||||
//
|
||||
// Run Handler ...
|
||||
await handler();
|
||||
}
|
||||
|
||||
async handlePropertyEdit(key: string, prefix: string, value: any) {
|
||||
//
|
||||
if (isNullOrEmptyString(key)) {
|
||||
return;
|
||||
}
|
||||
|
||||
//
|
||||
await this.managerService.dialogService.presentAlert({
|
||||
header: 'Change Value:',
|
||||
message: 'Enter new Value:',
|
||||
inputs: [
|
||||
{
|
||||
type: 'text',
|
||||
name: 'value',
|
||||
label: 'Value',
|
||||
placeholder: isNullOrUndefined(value) ? '' : `${value.toString()}`,
|
||||
},
|
||||
],
|
||||
buttons: [
|
||||
{
|
||||
text: 'Change',
|
||||
role: XModalButtonRole.Selected,
|
||||
cssClass: ['btn-selected'],
|
||||
handler: async (value) => {
|
||||
//
|
||||
let newValue = '';
|
||||
if (value && value.value) {
|
||||
newValue = value.value;
|
||||
}
|
||||
|
||||
//
|
||||
console.log('new value to set: ', newValue);
|
||||
|
||||
//
|
||||
this.actionProvider.next({
|
||||
action: XModelPresenterAction.SetProperty,
|
||||
payload: {
|
||||
prefix,
|
||||
key: key,
|
||||
value: newValue,
|
||||
} as XModelProperty,
|
||||
});
|
||||
},
|
||||
},
|
||||
{
|
||||
text: 'Cancel',
|
||||
role: XModalButtonRole.Cancel,
|
||||
cssClass: ['btn-cancel'],
|
||||
},
|
||||
],
|
||||
});
|
||||
}
|
||||
|
||||
async handlePropertyClear(key: string, prefix: string, value: any) {
|
||||
//
|
||||
if (isNullOrEmptyString(key) || isNullOrUndefined(value)) {
|
||||
return;
|
||||
}
|
||||
|
||||
//
|
||||
await this.managerService.dialogService.presentAreYouSureYesNoDialog(() => {
|
||||
//
|
||||
this.actionProvider.next({
|
||||
action: XModelPresenterAction.ClearProperty,
|
||||
payload: {
|
||||
key,
|
||||
prefix,
|
||||
} as XModelProperty,
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
async handleModelChanged(event: any) {
|
||||
console.log('handle model changed: ', event);
|
||||
}
|
||||
//#endregion
|
||||
//#endregion
|
||||
}
|
||||
Reference in New Issue
Block a user