Merge branch 'maker-checker' into dev
Brings in the UI side of maker-checker for users and roles: a Pending User Edits tab with a compare dialog, user/role create-edit-view wired to the pending-request flow, plus keyboard shortcuts and inline-create dialogs. Both conflicts resolved in dev's favour: .env.ts — auto-generated build stamp; dev's (260901) is the newer one. share-product-general-tab.component.html — dev had deliberately removed the per-product Dividends button, leaving a comment explaining that dividends are declared society-wide from Share Products -> Dividends because the board resolves one rate for the year rather than one per product. The branch simply predates that change, so taking its side would have resurrected a button that was removed on purpose. checker-inbox-and-tasks.component.html and tasks-routing.module.ts auto-merged cleanly, with both the new Pending User Edits tab and the existing Closure Requests tab intact. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Claude Opus 5
+197
-29
@@ -6,37 +6,205 @@
|
||||
file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
-->
|
||||
|
||||
<h1 mat-dialog-title>{{ 'labels.heading.Keyboard Shortcuts' | translate }}</h1>
|
||||
<div class="ks-header">
|
||||
<h1 mat-dialog-title class="ks-title">{{ 'labels.heading.Configure Keyboard Shortcuts' | translate }}</h1>
|
||||
<button mat-icon-button (click)="openUsagePopup()" matTooltip="Shortcut Usage">
|
||||
<mat-icon>analytics</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div mat-dialog-content>
|
||||
<div class="layout-column gap-2px">
|
||||
@for (item of buttonConfig.buttonCombinations; track item) {
|
||||
<mat-divider [inset]="true"></mat-divider>
|
||||
<div class="flex-fill flex-50">
|
||||
<span class="flex-50">
|
||||
@if (item.ctrlKey) {
|
||||
<span>
|
||||
<span class="modifier-key">{{ 'labels.inputs.Ctrl' | translate }}</span> +
|
||||
</span>
|
||||
@if (validationError) {
|
||||
<div class="alert error margin-b-10">
|
||||
{{ validationError }}
|
||||
</div>
|
||||
}
|
||||
|
||||
<table class="ks-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>{{ 'labels.inputs.Shortcut Name' | translate }}</th>
|
||||
<th>{{ 'Key Combination' }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@for (item of shortcuts; track item) {
|
||||
<tr style="cursor: pointer" (click)="showShortcutDetails(item)">
|
||||
<td [attr.colspan]="editingShortcutId === item.id || (!item.id && editingShortcutId === item.title) ? 2 : 1">
|
||||
@if (editingShortcutId === item.id || (!item.id && editingShortcutId === item.title)) {
|
||||
<!-- Edit Mode -->
|
||||
<div class="layout-row-wrap layout-lt-md-column gap-2percent padding-y-10">
|
||||
<h4 class="flex-100 margin-0 margin-b-10">Edit Shortcut</h4>
|
||||
|
||||
<mat-form-field class="ks-field flex-48">
|
||||
<mat-label>Shortcut Name</mat-label>
|
||||
<input matInput [(ngModel)]="editingShortcutData.title" [disabled]="!item.custom" />
|
||||
</mat-form-field>
|
||||
|
||||
@if (item.custom || item.route) {
|
||||
<mat-form-field class="ks-field flex-48">
|
||||
<mat-label>URL / Route</mat-label>
|
||||
<input matInput [(ngModel)]="editingShortcutData.route" [disabled]="!item.custom" />
|
||||
</mat-form-field>
|
||||
}
|
||||
|
||||
@if (item.custom) {
|
||||
<mat-form-field class="ks-field flex-48">
|
||||
<mat-label>Action</mat-label>
|
||||
<mat-select [(ngModel)]="editingShortcutData.action">
|
||||
<mat-option value="navigate">Navigate</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
}
|
||||
|
||||
<mat-form-field class="ks-field flex-48">
|
||||
<mat-label>Key Combination</mat-label>
|
||||
<input
|
||||
matInput
|
||||
readonly
|
||||
[value]="formatShortcut(editingShortcutData)"
|
||||
(keydown)="onKeyDown($event, editingShortcutData, true)"
|
||||
placeholder="Press keys..."
|
||||
/>
|
||||
</mat-form-field>
|
||||
|
||||
<div class="flex-100 layout-row justify-content-end gap-10px">
|
||||
<button mat-stroked-button class="ks-actions__cancel" (click)="cancelEditShortcut()">Cancel</button>
|
||||
<button
|
||||
mat-flat-button
|
||||
class="ks-actions__confirm ks-actions__confirm--basic"
|
||||
(click)="saveEditShortcut()"
|
||||
>
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
} @else {
|
||||
<!-- View Mode -->
|
||||
<span style="text-transform: capitalize; padding: 8px 0; display: inline-block">{{ item.title }}</span>
|
||||
}
|
||||
</td>
|
||||
|
||||
@if (!(editingShortcutId === item.id || (!item.id && editingShortcutId === item.title))) {
|
||||
<td (click)="$event.stopPropagation()">
|
||||
<mat-form-field class="ks-field" subscriptSizing="dynamic" style="width: 250px">
|
||||
<input
|
||||
matInput
|
||||
readonly
|
||||
[value]="formatShortcut(item)"
|
||||
(keydown)="onKeyDown($event, item)"
|
||||
(focus)="activeInputItem = item"
|
||||
(blur)="activeInputItem = null"
|
||||
placeholder="Click and press keys..."
|
||||
matTooltip="Click here and press your desired key combination"
|
||||
/>
|
||||
</mat-form-field>
|
||||
</td>
|
||||
}
|
||||
@if (item.shiftKey) {
|
||||
<span>
|
||||
<span class="modifier-key">{{ 'labels.inputs.Shift' | translate }}</span> +
|
||||
</span>
|
||||
}
|
||||
@if (item.altKey) {
|
||||
<span>
|
||||
<span class="modifier-key">{{ 'labels.inputs.Alt' | translate }}</span> +
|
||||
</span>
|
||||
}
|
||||
@if (item.key) {
|
||||
<span>
|
||||
<span class="modifier-key">{{ item.key }}</span></span
|
||||
>
|
||||
}
|
||||
</span>
|
||||
<span class="flex-50">{{ item.title }}</span>
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
@if (isAddingNew) {
|
||||
<div
|
||||
class="layout-row-wrap layout-lt-md-column gap-2percent padding-20 mat-elevation-z1 margin-t-10"
|
||||
style="background-color: white; border-radius: 4px"
|
||||
>
|
||||
<h4 class="flex-100 margin-0 margin-b-10">Add Custom Shortcut</h4>
|
||||
|
||||
<mat-form-field class="ks-field flex-48">
|
||||
<mat-label>Shortcut Name</mat-label>
|
||||
<input matInput [(ngModel)]="newShortcut.title" placeholder="e.g. Share Holder" />
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field class="ks-field flex-48">
|
||||
<mat-label>URL / Route</mat-label>
|
||||
<input matInput [(ngModel)]="newShortcut.route" placeholder="e.g. /shares/share-holders" />
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field class="ks-field flex-48">
|
||||
<mat-label>Action</mat-label>
|
||||
<mat-select [(ngModel)]="newShortcut.action">
|
||||
<mat-option value="navigate">Navigate</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field class="ks-field flex-48">
|
||||
<mat-label>Key Combination</mat-label>
|
||||
<input
|
||||
matInput
|
||||
readonly
|
||||
[value]="formatShortcut(newShortcut)"
|
||||
(keydown)="onKeyDown($event, newShortcut, true)"
|
||||
placeholder="Press keys..."
|
||||
/>
|
||||
</mat-form-field>
|
||||
|
||||
<div class="flex-100 layout-row justify-content-end gap-10px">
|
||||
<button mat-stroked-button class="ks-actions__cancel" (click)="cancelAddShortcut()">Cancel</button>
|
||||
<button mat-flat-button class="ks-actions__confirm ks-actions__confirm--basic" (click)="saveNewShortcut()">
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
} @else {
|
||||
<div class="margin-t-10">
|
||||
<button mat-button color="primary" (click)="startAddShortcut()"><mat-icon>add</mat-icon> Add Shortcut</button>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
<mat-dialog-actions class="ks-actions">
|
||||
<button mat-flat-button class="ks-actions__confirm ks-actions__confirm--warn" (click)="resetToDefaults()">
|
||||
Reset to Defaults
|
||||
</button>
|
||||
<div class="ks-actions__right">
|
||||
<button mat-stroked-button class="ks-actions__cancel" (click)="cancel()">
|
||||
{{ 'labels.button.cancel' | translate }}
|
||||
</button>
|
||||
<button
|
||||
mat-flat-button
|
||||
class="ks-actions__confirm ks-actions__confirm--basic"
|
||||
(click)="save()"
|
||||
[disabled]="validationError !== null"
|
||||
>
|
||||
{{ 'labels.button.save' | translate }}
|
||||
</button>
|
||||
</div>
|
||||
</mat-dialog-actions>
|
||||
|
||||
<ng-template #shortcutDetailsTemplate let-data>
|
||||
<h2 mat-dialog-title style="text-transform: capitalize">{{ data.title }}</h2>
|
||||
<div mat-dialog-content>
|
||||
<div class="layout-column gap-10px padding-y-10" style="font-size: 14px">
|
||||
<div>
|
||||
<strong>Shortcut Name:</strong> <br />
|
||||
<span style="text-transform: capitalize">{{ data.title }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<strong>Key Combination:</strong> <br />
|
||||
{{ formatShortcut(data) }}
|
||||
</div>
|
||||
<div>
|
||||
<strong>Action:</strong> <br />
|
||||
{{ data.action === 'navigate' ? 'Navigate' : data.action || data.id || 'Predefined' }}
|
||||
</div>
|
||||
@if (data.route) {
|
||||
<div>
|
||||
<strong>URL / Route:</strong> <br />
|
||||
{{ data.route }}
|
||||
</div>
|
||||
}
|
||||
<div>
|
||||
<strong>Description:</strong> <br />
|
||||
{{ getShortcutDescription(data) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<mat-dialog-actions align="end">
|
||||
<button mat-button color="primary" (click)="startEditShortcut(data)">Edit</button>
|
||||
<button mat-button color="warn" (click)="deleteShortcut(data)">Delete</button>
|
||||
<button mat-button mat-dialog-close>Close</button>
|
||||
</mat-dialog-actions>
|
||||
</ng-template>
|
||||
|
||||
@@ -6,15 +6,157 @@
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
*/
|
||||
|
||||
.modifier-key {
|
||||
border: 1px solid #0000004d;
|
||||
padding: 0.3rem;
|
||||
background: #f8f8f8;
|
||||
color: #00000086;
|
||||
font-weight: bold;
|
||||
border-radius: 0.3rem;
|
||||
}
|
||||
$primary: #1a73e8;
|
||||
$gray-50: #f8f9fa;
|
||||
$gray-100: #f1f3f4;
|
||||
$gray-200: #e8eaed;
|
||||
$gray-500: #9aa0a6;
|
||||
$gray-700: #5f6368;
|
||||
$gray-900: #202124;
|
||||
$red: #ef4444;
|
||||
$navy: #0d1b2a;
|
||||
$white: #fff;
|
||||
|
||||
.mat-divider.mat-divider-inset {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
/* --- Header (from form-dialog) --- */
|
||||
.ks-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px 24px 12px;
|
||||
border-bottom: 1px solid $gray-200;
|
||||
}
|
||||
|
||||
.ks-title {
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
font-size: 17px !important;
|
||||
font-weight: 600 !important;
|
||||
color: $gray-900;
|
||||
letter-spacing: -0.2px;
|
||||
}
|
||||
|
||||
/* --- Table Rows (from bank-calendar) --- */
|
||||
.ks-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 12.5px;
|
||||
|
||||
thead th {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
background: #f1f5f9;
|
||||
color: #475569;
|
||||
text-align: left;
|
||||
padding: 10px 14px;
|
||||
font-size: 10.5px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
border-bottom: 1px solid #e2e8f0;
|
||||
}
|
||||
|
||||
tbody td {
|
||||
padding: 9px 14px;
|
||||
border-bottom: 1px solid #f1f5f9;
|
||||
vertical-align: middle;
|
||||
color: $navy;
|
||||
}
|
||||
|
||||
tbody tr {
|
||||
transition: background 0.12s;
|
||||
|
||||
&:hover {
|
||||
background: #f8fafc;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* --- Inputs/Forms (from form-dialog) --- */
|
||||
.ks-field {
|
||||
min-width: 0;
|
||||
|
||||
::ng-deep {
|
||||
.mat-mdc-form-field {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mat-mdc-text-field-wrapper {
|
||||
background: $gray-50;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.mdc-text-field--outlined .mdc-notched-outline__leading,
|
||||
.mdc-text-field--outlined .mdc-notched-outline__trailing,
|
||||
.mdc-text-field--outlined .mdc-notched-outline__notch {
|
||||
border-color: $gray-200;
|
||||
}
|
||||
|
||||
.mdc-text-field--outlined:not(.mdc-text-field--disabled):hover .mdc-notched-outline__leading,
|
||||
.mdc-text-field--outlined:not(.mdc-text-field--disabled):hover .mdc-notched-outline__trailing,
|
||||
.mdc-text-field--outlined:not(.mdc-text-field--disabled):hover .mdc-notched-outline__notch {
|
||||
border-color: $primary;
|
||||
}
|
||||
|
||||
.mat-mdc-floating-label {
|
||||
font-size: 13px;
|
||||
color: $gray-700;
|
||||
}
|
||||
|
||||
input.mat-mdc-input-element {
|
||||
font-size: 14px;
|
||||
color: $gray-900;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* --- Dialog Footer & Buttons (from confirmation-dialog) --- */
|
||||
.ks-actions {
|
||||
padding: 14px 24px 20px !important;
|
||||
border-top: 1px solid $gray-200;
|
||||
margin: 0 !important;
|
||||
display: flex !important;
|
||||
justify-content: space-between !important;
|
||||
align-items: center !important;
|
||||
gap: 10px !important;
|
||||
|
||||
.ks-actions__right {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&__cancel {
|
||||
border-radius: 8px !important;
|
||||
font-size: 13px !important;
|
||||
font-weight: 600 !important;
|
||||
padding: 0 20px !important;
|
||||
height: 38px !important;
|
||||
color: $gray-700 !important;
|
||||
border-color: $gray-200 !important;
|
||||
}
|
||||
|
||||
&__confirm {
|
||||
border-radius: 8px !important;
|
||||
font-size: 13px !important;
|
||||
font-weight: 600 !important;
|
||||
padding: 0 24px !important;
|
||||
height: 38px !important;
|
||||
letter-spacing: 0.2px;
|
||||
color: $white !important;
|
||||
|
||||
&--basic {
|
||||
background: $primary !important;
|
||||
box-shadow: 0 1px 3px rgb(26 115 232 / 30%) !important;
|
||||
}
|
||||
|
||||
&--warn {
|
||||
background: $red !important;
|
||||
box-shadow: 0 1px 3px rgb(239 68 68 / 30%) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -6,16 +6,31 @@
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
*/
|
||||
|
||||
/** Angular Imports */
|
||||
import { Component, OnInit, inject } from '@angular/core';
|
||||
import { MatDialogRef, MAT_DIALOG_DATA, MatDialogTitle, MatDialogContent } from '@angular/material/dialog';
|
||||
import { KeyboardShortcutsConfiguration } from '../../keyboards-shortcut-config';
|
||||
import { Component, OnInit, inject, ViewChild } from '@angular/core';
|
||||
import {
|
||||
MatDialogRef,
|
||||
MatDialogTitle,
|
||||
MatDialogContent,
|
||||
MatDialogActions,
|
||||
MatDialog,
|
||||
MatDialogClose,
|
||||
MAT_DIALOG_DATA
|
||||
} from '@angular/material/dialog';
|
||||
import { CdkScrollable } from '@angular/cdk/scrolling';
|
||||
import { MatDivider } from '@angular/material/divider';
|
||||
import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
|
||||
/**
|
||||
* Delete dialog component.
|
||||
*/
|
||||
import { KeyboardShortcutService, ShortcutItem } from '../../core/services/keyboard-shortcut.service';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { NgClass } from '@angular/common';
|
||||
import { MatButton } from '@angular/material/button';
|
||||
import { ConfirmationDialogComponent } from '../confirmation-dialog/confirmation-dialog.component';
|
||||
import { ShortcutUsageDialogComponent } from '../shortcut-usage-dialog/shortcut-usage-dialog.component';
|
||||
import { MatIcon } from '@angular/material/icon';
|
||||
import { MatFormField, MatLabel } from '@angular/material/form-field';
|
||||
import { MatInput } from '@angular/material/input';
|
||||
import { MatSelect } from '@angular/material/select';
|
||||
import { MatOption } from '@angular/material/core';
|
||||
|
||||
@Component({
|
||||
selector: 'mifosx-keyboard-shortcuts-dialog',
|
||||
templateUrl: './keyboard-shortcuts-dialog.component.html',
|
||||
@@ -25,16 +40,293 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
|
||||
MatDialogTitle,
|
||||
CdkScrollable,
|
||||
MatDialogContent,
|
||||
MatDivider
|
||||
MatDialogActions,
|
||||
MatDialogClose,
|
||||
MatDivider,
|
||||
MatButton,
|
||||
FormsModule,
|
||||
NgClass,
|
||||
MatIcon,
|
||||
MatFormField,
|
||||
MatLabel,
|
||||
MatInput,
|
||||
MatSelect,
|
||||
MatOption
|
||||
]
|
||||
})
|
||||
export class KeyboardShortcutsDialogComponent implements OnInit {
|
||||
dialogRef = inject<MatDialogRef<KeyboardShortcutsDialogComponent>>(MatDialogRef);
|
||||
private keyboardShortcutService = inject(KeyboardShortcutService);
|
||||
public data = inject(MAT_DIALOG_DATA, { optional: true });
|
||||
|
||||
buttonConfig: KeyboardShortcutsConfiguration;
|
||||
shortcuts: ShortcutItem[] = [];
|
||||
validationError: string | null = null;
|
||||
activeInputItem: ShortcutItem | null = null;
|
||||
displayedColumns: string[] = [
|
||||
'title',
|
||||
'keyCombination'
|
||||
];
|
||||
|
||||
isAddingNew = false;
|
||||
newShortcut: Partial<ShortcutItem> = {};
|
||||
activeNewInput = false;
|
||||
|
||||
editingShortcutId: string | null = null;
|
||||
editingShortcutData: Partial<ShortcutItem> = {};
|
||||
activeEditInput = false;
|
||||
|
||||
ngOnInit() {
|
||||
this.dialogRef.updateSize(`800px`);
|
||||
this.buttonConfig = new KeyboardShortcutsConfiguration();
|
||||
this.dialogRef.updateSize('800px');
|
||||
this.keyboardShortcutService.activeShortcuts$.subscribe((shortcuts) => {
|
||||
// Deep copy to allow editing without affecting the global state immediately
|
||||
this.shortcuts = JSON.parse(JSON.stringify(shortcuts));
|
||||
});
|
||||
|
||||
if (this.data && this.data.prefill) {
|
||||
this.startAddShortcut();
|
||||
this.newShortcut = {
|
||||
...this.newShortcut,
|
||||
...this.data.prefill
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
formatShortcut(item: Partial<ShortcutItem>): string {
|
||||
if (!item || (!item.key && !item.ctrlKey && !item.shiftKey && !item.altKey)) return '';
|
||||
const parts = [];
|
||||
if (item.ctrlKey) parts.push('Ctrl');
|
||||
if (item.shiftKey) parts.push('Shift');
|
||||
if (item.altKey) parts.push('Alt');
|
||||
if (item.key) parts.push(item.key.toUpperCase());
|
||||
return parts.join(' + ');
|
||||
}
|
||||
|
||||
onKeyDown(event: KeyboardEvent, item: Partial<ShortcutItem>, isNewOrEdit: boolean = false) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
|
||||
// Ignore if only modifier keys are pressed
|
||||
if ([
|
||||
'Control',
|
||||
'Shift',
|
||||
'Alt',
|
||||
'Meta'
|
||||
].includes(event.key)) {
|
||||
return;
|
||||
}
|
||||
|
||||
item.ctrlKey = event.ctrlKey;
|
||||
item.shiftKey = event.shiftKey;
|
||||
item.altKey = event.altKey;
|
||||
item.key = event.key.toLowerCase();
|
||||
|
||||
if (!isNewOrEdit) {
|
||||
this.activeInputItem = null;
|
||||
this.validateShortcuts();
|
||||
} else {
|
||||
this.activeNewInput = false;
|
||||
this.activeEditInput = false;
|
||||
}
|
||||
}
|
||||
|
||||
validateShortcuts() {
|
||||
this.validationError = null;
|
||||
const seen = new Set<string>();
|
||||
|
||||
for (const item of this.shortcuts) {
|
||||
if (!item.key) {
|
||||
this.validationError = `Invalid shortcut for ${item.title}: Key is required`;
|
||||
return;
|
||||
}
|
||||
|
||||
const keyStr = `${!!item.ctrlKey}-${!!item.shiftKey}-${!!item.altKey}-${item.key.toLowerCase()}`;
|
||||
if (seen.has(keyStr)) {
|
||||
this.validationError = `Duplicate shortcut detected: ${this.formatShortcut(item)}`;
|
||||
return;
|
||||
}
|
||||
seen.add(keyStr);
|
||||
}
|
||||
}
|
||||
|
||||
startAddShortcut() {
|
||||
this.isAddingNew = true;
|
||||
this.newShortcut = {
|
||||
title: '',
|
||||
route: '',
|
||||
key: '',
|
||||
ctrlKey: false,
|
||||
shiftKey: false,
|
||||
altKey: false,
|
||||
action: 'navigate',
|
||||
custom: true,
|
||||
id: 'custom_' + Date.now()
|
||||
};
|
||||
this.validationError = null;
|
||||
}
|
||||
|
||||
cancelAddShortcut() {
|
||||
this.isAddingNew = false;
|
||||
this.validationError = null;
|
||||
}
|
||||
|
||||
private dialog = inject(MatDialog);
|
||||
|
||||
@ViewChild('shortcutDetailsTemplate') shortcutDetailsTemplate: any;
|
||||
private detailsDialogRef: MatDialogRef<any> | null = null;
|
||||
|
||||
showShortcutDetails(item: ShortcutItem) {
|
||||
this.detailsDialogRef = this.dialog.open(this.shortcutDetailsTemplate, {
|
||||
data: item,
|
||||
width: '400px'
|
||||
});
|
||||
}
|
||||
|
||||
openUsagePopup() {
|
||||
this.dialog.open(ShortcutUsageDialogComponent, {
|
||||
width: '600px'
|
||||
});
|
||||
}
|
||||
|
||||
getShortcutDescription(item: Partial<ShortcutItem>): string {
|
||||
if (item.custom) {
|
||||
if (item.action === 'navigate') {
|
||||
return `Navigates to the ${item.title} page.`;
|
||||
}
|
||||
return `Executes the ${item.action} action.`;
|
||||
} else {
|
||||
switch (item.id) {
|
||||
case 'logout':
|
||||
return 'Logs you out of the application securely.';
|
||||
case 'help':
|
||||
return 'Opens the user manual and help documentation.';
|
||||
case 'runReport':
|
||||
return 'Executes the currently selected report.';
|
||||
case 'cancel':
|
||||
return 'Cancels the current operation or form.';
|
||||
case 'submit':
|
||||
return 'Submits the current form or dialog.';
|
||||
default:
|
||||
return `Navigates to the predefined ${item.title} feature.`;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
saveNewShortcut() {
|
||||
if (this.newShortcut.action === 'navigate' && this.newShortcut.route) {
|
||||
this.newShortcut.route = this.keyboardShortcutService.normalizeRouteStr(this.newShortcut.route);
|
||||
}
|
||||
if (this.validateSingleShortcut(this.newShortcut, null)) {
|
||||
this.shortcuts.push(this.newShortcut as ShortcutItem);
|
||||
this.isAddingNew = false;
|
||||
this.validateShortcuts();
|
||||
if (!this.validationError) {
|
||||
this.keyboardShortcutService.updateShortcuts(this.shortcuts);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
startEditShortcut(item: ShortcutItem) {
|
||||
if (this.detailsDialogRef) {
|
||||
this.detailsDialogRef.close();
|
||||
this.detailsDialogRef = null;
|
||||
}
|
||||
this.editingShortcutId = item.id || null;
|
||||
this.editingShortcutData = { ...item };
|
||||
this.validationError = null;
|
||||
}
|
||||
|
||||
cancelEditShortcut() {
|
||||
this.editingShortcutId = null;
|
||||
this.validationError = null;
|
||||
}
|
||||
|
||||
saveEditShortcut() {
|
||||
if (this.editingShortcutData.action === 'navigate' && this.editingShortcutData.route) {
|
||||
this.editingShortcutData.route = this.keyboardShortcutService.normalizeRouteStr(this.editingShortcutData.route);
|
||||
}
|
||||
if (this.validateSingleShortcut(this.editingShortcutData, this.editingShortcutId)) {
|
||||
const index = this.shortcuts.findIndex((s) => s.id === this.editingShortcutId);
|
||||
if (index > -1) {
|
||||
this.shortcuts[index] = { ...this.editingShortcutData } as ShortcutItem;
|
||||
}
|
||||
this.editingShortcutId = null;
|
||||
this.validateShortcuts();
|
||||
if (!this.validationError) {
|
||||
this.keyboardShortcutService.updateShortcuts(this.shortcuts);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
deleteShortcut(item: ShortcutItem) {
|
||||
if (this.detailsDialogRef) {
|
||||
this.detailsDialogRef.close();
|
||||
this.detailsDialogRef = null;
|
||||
}
|
||||
this.shortcuts = this.shortcuts.filter((s) => (s.id ? s.id !== item.id : s.title !== item.title));
|
||||
this.validateShortcuts();
|
||||
if (!this.validationError) {
|
||||
this.keyboardShortcutService.updateShortcuts(this.shortcuts);
|
||||
}
|
||||
}
|
||||
|
||||
validateSingleShortcut(item: Partial<ShortcutItem>, excludeId: string | null): boolean {
|
||||
if (!item.title || item.title.trim() === '') {
|
||||
this.validationError = 'Shortcut Name is required';
|
||||
return false;
|
||||
}
|
||||
if (!item.key) {
|
||||
this.validationError = 'Key combination is required';
|
||||
return false;
|
||||
}
|
||||
if (item.action === 'navigate' && (!item.route || item.route.trim() === '')) {
|
||||
this.validationError = 'URL / Route is required';
|
||||
return false;
|
||||
}
|
||||
|
||||
const keyStr = `${!!item.ctrlKey}-${!!item.shiftKey}-${!!item.altKey}-${item.key.toLowerCase()}`;
|
||||
const seen = new Set<string>();
|
||||
|
||||
for (const s of this.shortcuts) {
|
||||
if (excludeId && s.id === excludeId) continue;
|
||||
seen.add(`${!!s.ctrlKey}-${!!s.shiftKey}-${!!s.altKey}-${s.key.toLowerCase()}`);
|
||||
}
|
||||
|
||||
if (seen.has(keyStr)) {
|
||||
this.validationError = `Duplicate shortcut detected: ${this.formatShortcut(item)}`;
|
||||
return false;
|
||||
}
|
||||
|
||||
this.validationError = null;
|
||||
return true;
|
||||
}
|
||||
|
||||
save() {
|
||||
this.validateShortcuts();
|
||||
if (!this.validationError) {
|
||||
this.keyboardShortcutService.updateShortcuts(this.shortcuts);
|
||||
this.dialogRef.close(true);
|
||||
}
|
||||
}
|
||||
|
||||
resetToDefaults() {
|
||||
const dialogRef = this.dialog.open(ConfirmationDialogComponent, {
|
||||
data: {
|
||||
heading: 'Reset Keyboard Shortcuts',
|
||||
dialogContext:
|
||||
'Are you sure you want to reset all keyboard shortcuts to their default configuration? This will remove all custom shortcuts and restore default keys.',
|
||||
type: 'Warn'
|
||||
}
|
||||
});
|
||||
|
||||
dialogRef.afterClosed().subscribe((confirm: boolean) => {
|
||||
if (confirm) {
|
||||
this.keyboardShortcutService.resetToDefaults();
|
||||
this.dialogRef.close(true);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
cancel() {
|
||||
this.dialogRef.close(false);
|
||||
}
|
||||
}
|
||||
|
||||
+22
@@ -0,0 +1,22 @@
|
||||
<!--
|
||||
Copyright since 2025 Mifos Initiative
|
||||
|
||||
This Source Code Form is subject to the terms of the Mozilla Public
|
||||
License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
-->
|
||||
|
||||
<div class="suggestion-container">
|
||||
<div class="suggestion-text">
|
||||
<strong
|
||||
>💡 You frequently use <span style="text-transform: capitalize">{{ data.pageName }}</span></strong
|
||||
><br />
|
||||
Would you like to create a keyboard shortcut for faster access?
|
||||
</div>
|
||||
<div class="suggestion-actions margin-t-10" style="display: flex; justify-content: flex-end; gap: 8px">
|
||||
<button mat-button style="color: #bbb" (click)="dismiss()">Not Now</button>
|
||||
<button mat-button style="color: #fff; background-color: rgba(255, 255, 255, 0.1)" (click)="createShortcut()">
|
||||
Create Shortcut
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
+19
@@ -0,0 +1,19 @@
|
||||
/**
|
||||
* Copyright since 2025 Mifos Initiative
|
||||
*
|
||||
* This Source Code Form is subject to the terms of the Mozilla Public
|
||||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
*/
|
||||
|
||||
.suggestion-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.suggestion-text {
|
||||
font-size: 14px;
|
||||
line-height: 1.4;
|
||||
color: #fff;
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
/**
|
||||
* Copyright since 2025 Mifos Initiative
|
||||
*
|
||||
* This Source Code Form is subject to the terms of the Mozilla Public
|
||||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
*/
|
||||
|
||||
import { Component, inject } from '@angular/core';
|
||||
import { MAT_SNACK_BAR_DATA, MatSnackBarRef } from '@angular/material/snack-bar';
|
||||
import { MatButton } from '@angular/material/button';
|
||||
import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
|
||||
|
||||
@Component({
|
||||
selector: 'mifosx-shortcut-suggestion-snackbar',
|
||||
templateUrl: './shortcut-suggestion-snackbar.component.html',
|
||||
styleUrls: ['./shortcut-suggestion-snackbar.component.scss'],
|
||||
imports: [
|
||||
...STANDALONE_SHARED_IMPORTS,
|
||||
MatButton
|
||||
]
|
||||
})
|
||||
export class ShortcutSuggestionSnackbarComponent {
|
||||
snackBarRef = inject(MatSnackBarRef<ShortcutSuggestionSnackbarComponent>);
|
||||
data: { pageName: string; route: string } = inject(MAT_SNACK_BAR_DATA);
|
||||
|
||||
createShortcut() {
|
||||
this.snackBarRef.dismissWithAction();
|
||||
}
|
||||
|
||||
dismiss() {
|
||||
this.snackBarRef.dismiss();
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,55 @@
|
||||
<!--
|
||||
Copyright since 2025 Mifos Initiative
|
||||
|
||||
This Source Code Form is subject to the terms of the Mozilla Public
|
||||
License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
-->
|
||||
|
||||
<div class="ks-header">
|
||||
<h1 mat-dialog-title class="ks-title">Create Shortcut</h1>
|
||||
</div>
|
||||
|
||||
<div mat-dialog-content>
|
||||
@if (validationError) {
|
||||
<div class="alert error margin-b-10" style="color: #ef4444; margin-bottom: 15px; font-size: 13px">
|
||||
{{ validationError }}
|
||||
</div>
|
||||
}
|
||||
|
||||
<div class="layout-column gap-10px" style="padding-top: 10px">
|
||||
<mat-form-field class="ks-field" style="width: 100%">
|
||||
<mat-label>Shortcut Name</mat-label>
|
||||
<input matInput [(ngModel)]="newShortcut.title" />
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field class="ks-field" style="width: 100%">
|
||||
<mat-label>Key Combination</mat-label>
|
||||
<input
|
||||
matInput
|
||||
readonly
|
||||
[value]="formatShortcut(newShortcut)"
|
||||
(keydown)="onKeyDown($event)"
|
||||
placeholder="Click and press keys..."
|
||||
/>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field class="ks-field" style="width: 100%">
|
||||
<mat-label>Route</mat-label>
|
||||
<input matInput [ngModel]="newShortcut.route" disabled="true" />
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field class="ks-field" style="width: 100%">
|
||||
<mat-label>Action</mat-label>
|
||||
<input matInput [ngModel]="'Navigate'" disabled="true" />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<mat-dialog-actions class="ks-actions">
|
||||
<div style="flex: 1"></div>
|
||||
<div class="ks-actions__right">
|
||||
<button mat-stroked-button class="ks-actions__cancel" (click)="cancel()">Cancel</button>
|
||||
<button mat-flat-button class="ks-actions__confirm ks-actions__confirm--basic" (click)="save()">Save</button>
|
||||
</div>
|
||||
</mat-dialog-actions>
|
||||
@@ -0,0 +1,129 @@
|
||||
/**
|
||||
* Copyright since 2025 Mifos Initiative
|
||||
*
|
||||
* This Source Code Form is subject to the terms of the Mozilla Public
|
||||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
*/
|
||||
|
||||
import { Component, inject } from '@angular/core';
|
||||
import {
|
||||
MAT_DIALOG_DATA,
|
||||
MatDialogRef,
|
||||
MatDialogTitle,
|
||||
MatDialogContent,
|
||||
MatDialogActions
|
||||
} from '@angular/material/dialog';
|
||||
import { KeyboardShortcutService, ShortcutItem } from '../../core/services/keyboard-shortcut.service';
|
||||
import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { MatButton } from '@angular/material/button';
|
||||
import { MatFormField, MatLabel, MatError } from '@angular/material/form-field';
|
||||
import { MatInput } from '@angular/material/input';
|
||||
import { take } from 'rxjs/operators';
|
||||
|
||||
@Component({
|
||||
selector: 'mifosx-inline-create-shortcut-dialog',
|
||||
templateUrl: './inline-create-shortcut-dialog.component.html',
|
||||
styleUrls: ['../keyboard-shortcuts-dialog/keyboard-shortcuts-dialog.component.scss'],
|
||||
imports: [
|
||||
...STANDALONE_SHARED_IMPORTS,
|
||||
MatDialogTitle,
|
||||
MatDialogContent,
|
||||
MatDialogActions,
|
||||
MatButton,
|
||||
FormsModule,
|
||||
MatFormField,
|
||||
MatLabel,
|
||||
MatInput,
|
||||
MatError
|
||||
]
|
||||
})
|
||||
export class InlineCreateShortcutDialogComponent {
|
||||
dialogRef = inject<MatDialogRef<InlineCreateShortcutDialogComponent>>(MatDialogRef);
|
||||
data = inject(MAT_DIALOG_DATA);
|
||||
private keyboardShortcutService = inject(KeyboardShortcutService);
|
||||
|
||||
newShortcut: Partial<ShortcutItem> = {
|
||||
title: this.data.pageName,
|
||||
route: this.data.route,
|
||||
action: 'navigate',
|
||||
key: '',
|
||||
ctrlKey: false,
|
||||
shiftKey: false,
|
||||
altKey: false,
|
||||
custom: true,
|
||||
id: 'custom_' + Date.now()
|
||||
};
|
||||
|
||||
validationError: string | null = null;
|
||||
|
||||
formatShortcut(item: Partial<ShortcutItem>): string {
|
||||
if (!item || (!item.key && !item.ctrlKey && !item.shiftKey && !item.altKey)) return '';
|
||||
const parts = [];
|
||||
if (item.ctrlKey) parts.push('Ctrl');
|
||||
if (item.shiftKey) parts.push('Shift');
|
||||
if (item.altKey) parts.push('Alt');
|
||||
if (item.key) parts.push(item.key.toUpperCase());
|
||||
return parts.join(' + ');
|
||||
}
|
||||
|
||||
onKeyDown(event: KeyboardEvent) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
|
||||
// Ignore if only modifier keys are pressed
|
||||
if ([
|
||||
'Control',
|
||||
'Shift',
|
||||
'Alt',
|
||||
'Meta'
|
||||
].includes(event.key)) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.newShortcut.ctrlKey = event.ctrlKey;
|
||||
this.newShortcut.shiftKey = event.shiftKey;
|
||||
this.newShortcut.altKey = event.altKey;
|
||||
this.newShortcut.key = event.key.toLowerCase();
|
||||
this.validationError = null;
|
||||
}
|
||||
|
||||
save() {
|
||||
if (!this.newShortcut.title || this.newShortcut.title.trim() === '') {
|
||||
this.validationError = 'Shortcut Name is required';
|
||||
return;
|
||||
}
|
||||
if (!this.newShortcut.key) {
|
||||
this.validationError = 'Key combination is required';
|
||||
return;
|
||||
}
|
||||
|
||||
const keyStr = `${!!this.newShortcut.ctrlKey}-${!!this.newShortcut.shiftKey}-${!!this.newShortcut.altKey}-${this.newShortcut.key.toLowerCase()}`;
|
||||
|
||||
this.keyboardShortcutService.activeShortcuts$.pipe(take(1)).subscribe((shortcuts) => {
|
||||
// Check for duplicates
|
||||
const seen = new Set<string>();
|
||||
for (const s of shortcuts) {
|
||||
seen.add(`${!!s.ctrlKey}-${!!s.shiftKey}-${!!s.altKey}-${s.key.toLowerCase()}`);
|
||||
}
|
||||
|
||||
if (seen.has(keyStr)) {
|
||||
this.validationError = `Duplicate shortcut detected: ${this.formatShortcut(this.newShortcut)}`;
|
||||
return;
|
||||
}
|
||||
|
||||
// Add and save
|
||||
if (this.newShortcut.route) {
|
||||
this.newShortcut.route = this.keyboardShortcutService.normalizeRouteStr(this.newShortcut.route);
|
||||
}
|
||||
shortcuts.push(this.newShortcut as ShortcutItem);
|
||||
this.keyboardShortcutService.updateShortcuts(shortcuts);
|
||||
this.dialogRef.close(true);
|
||||
});
|
||||
}
|
||||
|
||||
cancel() {
|
||||
this.dialogRef.close(false);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,58 @@
|
||||
<!--
|
||||
Copyright since 2025 Mifos Initiative
|
||||
|
||||
This Source Code Form is subject to the terms of the Mozilla Public
|
||||
License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
-->
|
||||
|
||||
<h1 mat-dialog-title>Shortcut Usage</h1>
|
||||
|
||||
<div mat-dialog-content>
|
||||
<table mat-table [dataSource]="usageData" class="mat-elevation-z1" style="width: 100%; margin-top: 10px">
|
||||
<!-- Page Column -->
|
||||
<ng-container matColumnDef="page">
|
||||
<th mat-header-cell *matHeaderCellDef>Page</th>
|
||||
<td mat-cell *matCellDef="let item">
|
||||
<div>{{ item.pageName }}</div>
|
||||
<div style="font-size: 11px; color: #888">{{ item.route }}</div>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<!-- Visits Column -->
|
||||
<ng-container matColumnDef="visits">
|
||||
<th mat-header-cell *matHeaderCellDef style="text-align: center">Visits</th>
|
||||
<td mat-cell *matCellDef="let item" style="text-align: center">
|
||||
<span style="font-weight: 500">{{ item.visits }}</span>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<!-- Status / Action Column -->
|
||||
<ng-container matColumnDef="status">
|
||||
<th mat-header-cell *matHeaderCellDef style="text-align: right">Status / Action</th>
|
||||
<td mat-cell *matCellDef="let item" style="text-align: right">
|
||||
@if (item.hasShortcut) {
|
||||
<span style="color: #4caf50; font-size: 13px; font-weight: 500">✓ Shortcut exists</span>
|
||||
} @else if (item.visits >= 5) {
|
||||
<span style="color: #ff9800; font-size: 12px; margin-right: 10px; font-weight: 500">Frequently Used</span>
|
||||
<button mat-button color="primary" (click)="createShortcut(item)">Create Shortcut</button>
|
||||
} @else {
|
||||
<span style="color: #aaa; font-size: 12px">Not enough visits</span>
|
||||
}
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
|
||||
</table>
|
||||
|
||||
@if (usageData.length === 0) {
|
||||
<div style="padding: 20px; text-align: center; color: #888; border: 1px solid #eee; border-top: none">
|
||||
No usage data collected yet.
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
<mat-dialog-actions align="end">
|
||||
<button mat-button mat-dialog-close>Close</button>
|
||||
</mat-dialog-actions>
|
||||
@@ -0,0 +1,9 @@
|
||||
/**
|
||||
* Copyright since 2025 Mifos Initiative
|
||||
*
|
||||
* This Source Code Form is subject to the terms of the Mozilla Public
|
||||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
*/
|
||||
|
||||
// Usage dialog styling
|
||||
@@ -0,0 +1,92 @@
|
||||
/**
|
||||
* Copyright since 2025 Mifos Initiative
|
||||
*
|
||||
* This Source Code Form is subject to the terms of the Mozilla Public
|
||||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
*/
|
||||
|
||||
import { Component, OnInit, inject } from '@angular/core';
|
||||
import {
|
||||
MatDialogRef,
|
||||
MatDialogTitle,
|
||||
MatDialogContent,
|
||||
MatDialogActions,
|
||||
MatDialogClose,
|
||||
MatDialog
|
||||
} from '@angular/material/dialog';
|
||||
import { ShortcutSuggestionService } from '../../core/services/shortcut-suggestion.service';
|
||||
import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
|
||||
import { MatButton } from '@angular/material/button';
|
||||
import {
|
||||
MatTable,
|
||||
MatColumnDef,
|
||||
MatHeaderCellDef,
|
||||
MatHeaderCell,
|
||||
MatCellDef,
|
||||
MatCell,
|
||||
MatHeaderRowDef,
|
||||
MatHeaderRow,
|
||||
MatRowDef,
|
||||
MatRow
|
||||
} from '@angular/material/table';
|
||||
import { InlineCreateShortcutDialogComponent } from './inline-create-shortcut-dialog.component';
|
||||
|
||||
@Component({
|
||||
selector: 'mifosx-shortcut-usage-dialog',
|
||||
templateUrl: './shortcut-usage-dialog.component.html',
|
||||
styleUrls: ['./shortcut-usage-dialog.component.scss'],
|
||||
imports: [
|
||||
...STANDALONE_SHARED_IMPORTS,
|
||||
MatDialogTitle,
|
||||
MatDialogContent,
|
||||
MatDialogActions,
|
||||
MatDialogClose,
|
||||
MatButton,
|
||||
MatTable,
|
||||
MatColumnDef,
|
||||
MatHeaderCellDef,
|
||||
MatHeaderCell,
|
||||
MatCellDef,
|
||||
MatCell,
|
||||
MatHeaderRowDef,
|
||||
MatHeaderRow,
|
||||
MatRowDef,
|
||||
MatRow
|
||||
]
|
||||
})
|
||||
export class ShortcutUsageDialogComponent implements OnInit {
|
||||
dialogRef = inject<MatDialogRef<ShortcutUsageDialogComponent>>(MatDialogRef);
|
||||
private shortcutSuggestionService = inject(ShortcutSuggestionService);
|
||||
private dialog = inject(MatDialog);
|
||||
|
||||
usageData: { route: string; pageName: string; visits: number; hasShortcut: boolean }[] = [];
|
||||
displayedColumns: string[] = [
|
||||
'page',
|
||||
'visits',
|
||||
'status'
|
||||
];
|
||||
|
||||
ngOnInit() {
|
||||
this.refreshData();
|
||||
}
|
||||
|
||||
refreshData() {
|
||||
this.usageData = this.shortcutSuggestionService.getUsageData();
|
||||
}
|
||||
|
||||
createShortcut(item: { pageName: string; route: string }) {
|
||||
const inlineDialogRef = this.dialog.open(InlineCreateShortcutDialogComponent, {
|
||||
data: item,
|
||||
width: '400px',
|
||||
disableClose: true
|
||||
});
|
||||
|
||||
inlineDialogRef.afterClosed().subscribe((saved) => {
|
||||
if (saved) {
|
||||
this.shortcutSuggestionService.markAsDismissed(item.route);
|
||||
this.refreshData(); // update the table so the checkmark appears!
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user