oip-common 0.0.1

package/src/components/config.component.ts

@@ -0,0 +1,131 @@
+import { Component, inject, OnInit } from '@angular/core';
+import { ProfileComponent } from './profile.component';
+import { Fluid } from 'primeng/fluid';
+import { Tooltip } from 'primeng/tooltip';
+import { FormsModule } from '@angular/forms';
+import { Select } from 'primeng/select';
+import { TableModule } from 'primeng/table';
+import { LayoutService } from '../services/app.layout.service';
+import { UserService } from '../services/user.service';
+import { ToggleSwitchModule } from 'primeng/toggleswitch';
+import { RouterLink } from '@angular/router';
+import { SecurityService } from '../services/security.service';
+import { MenuService } from '../services/app.menu.service';
+import { Button } from 'primeng/button';
+import { L10nService } from '../services/l10n.service';
+import { SelectItem } from 'primeng/api';
+
+interface L10n {
+  menu: string;
+  all: string;
+  profile: string;
+  photo: string;
+  usePhoto256x256Pixel: string;
+  selectLanguage: string;
+  moduleManagement: string;
+  localization: string;
+  goTo: string;
+}
+
+@Component({
+  selector: 'app-config',
+  template: `
+    <p-fluid>
+      <div class="flex flex-col md:flex-row gap-4">
+        <div class="md:w-1/2">
+          <div class="card flex flex-col gap-4">
+            <div class="font-semibold text-xl">{{ l10n.profile }}</div>
+            <div class="flex justify-content-end flex-wrap">
+              {{ userService.userName }}
+            </div>
+            <label>
+              {{ l10n.photo }}
+              <span
+                class="pi pi-question-circle"
+                pTooltip="{{ l10n.usePhoto256x256Pixel }}"
+                tooltipPosition="right"></span>
+            </label>
+            <div class="flex justify-content-end flex-wrap">
+              <user-profile></user-profile>
+            </div>
+          </div>
+        </div>
+        <div class="md:w-1/2">
+          <div class="card flex flex-col gap-4">
+            <div class="font-semibold text-xl">{{ l10n.localization }}</div>
+            <label> {{ l10n.selectLanguage }} </label>
+            <div class="flex justify-content-end flex-wrap">
+              <p-select
+                class="w-full md:w-56"
+                id="oip-app-config-language-select"
+                optionLabel="label"
+                optionValue="value"
+                [options]="languages"
+                [(ngModel)]="selectedLanguage"
+                (onChange)="changeLanguage()" />
+            </div>
+          </div>
+        </div>
+        @if (securityService.isAdmin) {
+          <div class="md:w-1/2">
+            <div class="card flex flex-col gap-4">
+              <div class="font-semibold text-xl">{{ l10n.menu }}</div>
+              <div class="flex items-center gap-2">
+                <label for="oip-app-config-admin-mode">{{ l10n.all }}</label>
+                <p-toggle-switch
+                  id="oip-app-config-admin-mode"
+                  [(ngModel)]="menuService.adminMode"
+                  (onChange)="onSwitchChange()"></p-toggle-switch>
+              </div>
+              <div class="flex items-center gap-2">
+                <label for="oip-app-config-admin-mode">{{ l10n.moduleManagement }}</label>
+                <p-button icon="pi pi-cog" label="{{ l10n.goTo }}" routerLink="/modules" />
+              </div>
+            </div>
+          </div>
+        }
+      </div>
+    </p-fluid>
+  `,
+  imports: [ProfileComponent, Fluid, Tooltip, FormsModule, Select, TableModule, ToggleSwitchModule, RouterLink, Button]
+})
+export class ConfigComponent implements OnInit {
+  private readonly layoutService = inject(LayoutService);
+  private readonly l10nService = inject(L10nService);
+  protected readonly userService = inject(UserService);
+  protected readonly securityService = inject(SecurityService);
+  protected readonly menuService = inject(MenuService);
+  protected l10n = {} as L10n;
+
+  selectedLanguage: string;
+  languages: SelectItem<string>[] = [
+    { value: 'en', label: 'English' },
+    { value: 'ru', label: 'Русский' }
+  ];
+
+  constructor() {
+    this.selectedLanguage = this.layoutService.language();
+  }
+
+  async ngOnInit() {
+    (await this.l10nService.get('config')).subscribe((l10n) => {
+      this.l10n = l10n;
+    });
+  }
+
+  /**
+   * Changes the application's language.
+   * @return {void}
+   */
+  changeLanguage(): void {
+    this.layoutService.layoutConfig.update((config) => ({
+      ...config,
+      language: this.selectedLanguage
+    }));
+    this.l10nService.use(this.selectedLanguage);
+  }
+
+  async onSwitchChange(): Promise<void> {
+    await this.menuService.loadMenu();
+  }
+}

package/src/components/db-migration/db-migration.component.ts

@@ -0,0 +1,162 @@
+import { Component, inject, OnDestroy, OnInit } from '@angular/core';
+import { BaseModuleComponent, NoSettingsDto, SecurityComponent } from 'oip-common';
+import { TagModule } from 'primeng/tag';
+import { ConfirmationService, SharedModule } from 'primeng/api';
+import { TableModule } from 'primeng/table';
+import { InputTextModule } from 'primeng/inputtext';
+import { TextareaModule } from 'primeng/textarea';
+import { ButtonModule } from 'primeng/button';
+import { FormsModule } from '@angular/forms';
+import { ConfirmDialog } from 'primeng/confirmdialog';
+import { NgIf } from '@angular/common';
+import { Tooltip } from 'primeng/tooltip';
+import { ActivatedRoute } from '@angular/router';
+
+export interface MigrationDto {
+  name: string;
+  applied: boolean;
+  pending: boolean;
+  exist: boolean;
+}
+
+export interface ApplyMigrationRequest {
+  name: string;
+}
+
+@Component({
+  imports: [
+    TableModule,
+    SharedModule,
+    TagModule,
+    InputTextModule,
+    TextareaModule,
+    ButtonModule,
+    FormsModule,
+    ConfirmDialog,
+    NgIf,
+    SecurityComponent,
+    Tooltip
+  ],
+  selector: 'crypt',
+  template: `
+    <div *ngIf="isContent" class="card" style="height: 100%">
+      <p-confirmDialog />
+      <div>
+        <h5>Migration manager</h5>
+        <div class="flex flex-row gap-2">
+          <p-button
+            icon="pi pi-refresh"
+            pTooltip="Refresh"
+            severity="secondary"
+            tooltipPosition="bottom"
+            [outlined]="true"
+            (click)="refreshAction()" />
+          <p-button
+            icon="pi pi-filter-slash"
+            pTooltip="Clean filter"
+            severity="secondary"
+            tooltipPosition="bottom"
+            [outlined]="true"
+            (click)="dt.clear()" />
+        </div>
+        <div>
+          <p-table #dt dataKey="name" editMode="row" size="small" [scrollable]="true" [value]="data">
+            <ng-template let-columns pTemplate="header">
+              <tr>
+                <th pSortableColumn="name" scope="col">
+                  Migration name
+                  <p-columnFilter display="menu" field="name" type="text" />
+                </th>
+                <th scope="col">Applied</th>
+                <th scope="col">Exist</th>
+                <th>Pending</th>
+                <th scope="col"></th>
+              </tr>
+            </ng-template>
+
+            <ng-template #body let-columns="columns" let-editing="editing" let-ri="rowIndex" let-rowData>
+              <tr [pEditableRow]="rowData">
+                <td>
+                  {{ rowData.name }}
+                </td>
+                <td>
+                  <p-button
+                    *ngIf="rowData.applied"
+                    icon="pi pi-check"
+                    severity="success"
+                    [rounded]="true"
+                    [text]="true">
+                  </p-button>
+                </td>
+                <td>
+                  <p-button *ngIf="rowData.exist" icon="pi pi-check" severity="success" [rounded]="true" [text]="true">
+                  </p-button>
+                </td>
+                <td>
+                  <p-button
+                    *ngIf="rowData.pending"
+                    icon="pi pi-check"
+                    severity="success"
+                    [rounded]="true"
+                    [text]="true">
+                  </p-button>
+                </td>
+                <td>
+                  <p-button
+                    icon="pi pi-bolt"
+                    pCancelEditableRow
+                    pTooltip="Apply migration"
+                    severity="secondary"
+                    tooltipPosition="left"
+                    [rounded]="true"
+                    [text]="true"
+                    (click)="applyMigration(rowData)">
+                  </p-button>
+                </td>
+              </tr>
+            </ng-template>
+          </p-table>
+        </div>
+      </div>
+    </div>
+    <security *ngIf="isSecurity" [controller]="controller" [id]="id"></security>
+  `,
+  providers: [ConfirmationService]
+})
+export class DbMigrationComponent
+  extends BaseModuleComponent<NoSettingsDto, NoSettingsDto>
+  implements OnInit, OnDestroy
+{
+  private readonly activatedRoute = inject(ActivatedRoute);
+  controller: string = '';
+  data: MigrationDto[];
+
+  async ngOnInit() {
+    this.activatedRoute.url.subscribe((url) => {
+      this.controller = url[0].toString();
+    });
+    this.appTitleService.setTitle('Db Migration');
+    await super.ngOnInit();
+    await this.refreshAction();
+  }
+
+  async refreshAction() {
+    this.getData()
+      .then((response) => {
+        this.data = response;
+      })
+      .catch((error) => {
+        console.log(error);
+        this.msgService.error('Error refreshing database');
+      });
+  }
+
+  async getData() {
+    return this.baseDataService.sendRequest<MigrationDto[]>(`api/${this.controller}/get-migrations`, 'GET');
+  }
+
+  async applyMigration(rowData: MigrationDto) {
+    const request = { name: rowData.name } as ApplyMigrationRequest;
+    return this.baseDataService.sendRequest(`api/${this.controller}/apply-migration`, 'POST', request);
+  }
+}

package/src/components/db-migration.component.ts

@@ -0,0 +1,154 @@
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { BaseModuleComponent, NoSettingsDto, SecurityComponent } from 'oip-common';
+import { TagModule } from 'primeng/tag';
+import { ConfirmationService, SharedModule } from 'primeng/api';
+import { TableModule } from 'primeng/table';
+import { InputTextModule } from 'primeng/inputtext';
+import { TextareaModule } from 'primeng/textarea';
+import { ButtonModule } from 'primeng/button';
+import { FormsModule } from '@angular/forms';
+import { ConfirmDialog } from 'primeng/confirmdialog';
+import { NgIf } from '@angular/common';
+import { Tooltip } from 'primeng/tooltip';
+
+export interface MigrationDto {
+  name: string;
+  applied: boolean;
+  pending: boolean;
+  exist: boolean;
+}
+
+export interface ApplyMigrationRequest {
+  name: string;
+}
+
+@Component({
+  imports: [
+    TableModule,
+    SharedModule,
+    TagModule,
+    InputTextModule,
+    TextareaModule,
+    ButtonModule,
+    FormsModule,
+    ConfirmDialog,
+    NgIf,
+    SecurityComponent,
+    Tooltip
+  ],
+  selector: 'db-migration',
+  template: `
+    <div *ngIf="isContent" class="card" style="height: 100%">
+      <p-confirmDialog />
+      <div>
+        <h5>Migration manager</h5>
+        <div class="flex flex-row gap-2">
+          <p-button
+            icon="pi pi-refresh"
+            pTooltip="Refresh"
+            severity="secondary"
+            tooltipPosition="bottom"
+            [outlined]="true"
+            (click)="refreshAction()" />
+          <p-button
+            icon="pi pi-filter-slash"
+            pTooltip="Clean filter"
+            severity="secondary"
+            tooltipPosition="bottom"
+            [outlined]="true"
+            (click)="dt.clear()" />
+        </div>
+        <div>
+          <p-table #dt dataKey="name" editMode="row" size="small" [scrollable]="true" [value]="data">
+            <ng-template let-columns pTemplate="header">
+              <tr>
+                <th pSortableColumn="name" scope="col">
+                  Migration name
+                  <p-columnFilter display="menu" field="name" type="text" />
+                </th>
+                <th scope="col">Applied</th>
+                <th scope="col">Exist</th>
+                <th>Pending</th>
+                <th scope="col"></th>
+              </tr>
+            </ng-template>
+
+            <ng-template #body let-columns="columns" let-editing="editing" let-ri="rowIndex" let-rowData>
+              <tr [pEditableRow]="rowData">
+                <td>
+                  {{ rowData.name }}
+                </td>
+                <td>
+                  <p-button
+                    *ngIf="rowData.applied"
+                    icon="pi pi-check"
+                    severity="success"
+                    [rounded]="true"
+                    [text]="true">
+                  </p-button>
+                </td>
+                <td>
+                  @if (rowData.exist) {
+                    <p-button icon="pi pi-check" severity="success" [rounded]="true" [text]="true" />
+                  }
+                </td>
+                <td>
+                  @if (rowData.pending) {
+                    <p-button icon="pi pi-check" severity="success" [rounded]="true" [text]="true"></p-button>
+                  }
+                </td>
+                <td>
+                  <p-button
+                    icon="pi pi-bolt"
+                    pCancelEditableRow
+                    pTooltip="Apply migration"
+                    severity="secondary"
+                    tooltipPosition="left"
+                    [rounded]="true"
+                    [text]="true"
+                    (click)="applyMigration(rowData)">
+                  </p-button>
+                </td>
+              </tr>
+            </ng-template>
+          </p-table>
+        </div>
+      </div>
+    </div>
+    @if (isSecurity) {
+      <security [controller]="controller" [id]="id" />
+    }
+  `,
+  providers: [ConfirmationService]
+})
+export class DbMigrationComponent
+  extends BaseModuleComponent<NoSettingsDto, NoSettingsDto>
+  implements OnInit, OnDestroy
+{
+  data: MigrationDto[];
+
+  async ngOnInit() {
+    await super.ngOnInit();
+    await this.refreshAction();
+  }
+
+  async refreshAction() {
+    this.getData()
+      .then((response) => {
+        this.data = response;
+      })
+      .catch((error) => {
+        console.log(error);
+        this.msgService.error('Error refreshing database');
+      });
+  }
+
+  async getData() {
+    return this.baseDataService.sendRequest<MigrationDto[]>(`api/${this.controller}/get-migrations`, 'GET');
+  }
+
+  async applyMigration(rowData: MigrationDto) {
+    const request = { name: rowData.name } as ApplyMigrationRequest;
+    return this.baseDataService.sendRequest(`api/${this.controller}/apply-migration`, 'POST', request);
+  }
+}

package/src/components/footer.component.ts

@@ -0,0 +1,17 @@
+import { Component } from '@angular/core';
+import { LogoComponent } from './logo.component';
+
+@Component({
+  selector: 'app-footer',
+  template: `
+    <div class="layout-footer">
+      <logo class="mr-2" height="18" width="18"></logo>
+      <span class="font-medium">OIP</span>
+    </div>
+  `,
+  standalone: true,
+  imports: [LogoComponent]
+})
+export class FooterComponent {
+  constructor() {}
+}

package/src/components/logo.component.ts

@@ -0,0 +1,34 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'logo',
+  standalone: true,
+  template: `
+    <svg
+      viewBox="0.8516 1.7159 60.0074 64.7142"
+      xmlns="http://www.w3.org/2000/svg"
+      [attr.height]="height + 'px'"
+      [attr.width]="width + 'px'">
+      <path
+        class="primary-logo-color"
+        d="M -130.45 -104.78 C -130.45 -105.9 -130.43 -107.01 -130.45 -108.13 C -130.49 -108.52 -130.28 -108.9 -129.92 -109.07 C -125.87 -111.4 -121.82 -113.74 -117.77 -116.08 C -115.7 -117.26 -113.63 -118.45 -111.58 -119.67 C -111.26 -119.89 -110.83 -119.89 -110.51 -119.67 C -101.66 -114.53 -92.787 -109.41 -83.915 -104.29 C -83.752 -104.2 -83.479 -104.16 -83.475 -103.94 C -83.472 -103.72 -83.766 -103.65 -83.947 -103.54 C -86.326 -102.16 -88.716 -100.79 -91.092 -99.39 C -91.377 -99.18 -91.761 -99.18 -92.046 -99.39 C -98.211 -102.98 -104.38 -106.55 -110.56 -110.12 C -110.85 -110.33 -111.23 -110.33 -111.52 -110.12 C -114.88 -108.16 -118.25 -106.22 -121.63 -104.28 C -122.01 -104.11 -122.24 -103.71 -122.2 -103.3 C -122.18 -101.11 -122.2 -98.922 -122.2 -96.736 C -122.19 -95.98 -122.21 -95.98 -122.84 -96.335 C -125.2 -97.7 -127.57 -99.07 -129.93 -100.42 C -130.27 -100.57 -130.49 -100.92 -130.46 -101.3 C -130.43 -102.46 -130.45 -103.62 -130.45 -104.78 Z"
+        transform="matrix(1, 0, 0, 1, 131.35482788085938, 125.0257797241211)" />
+      <path
+        class="primary-logo-color"
+        d="M -70.504 -100.94 L -70.504 -90.438 C -70.447 -89.98 -70.692 -89.537 -71.11 -89.342 C -78.942 -84.839 -86.769 -80.325 -94.592 -75.8 C -95.635 -75.2 -96.684 -74.612 -97.713 -73.988 C -98.17 -73.708 -98.255 -73.846 -98.255 -74.314 L -98.255 -82.785 C -98.268 -83.116 -98.07 -83.419 -97.762 -83.541 C -92.003 -86.86 -86.269 -90.236 -80.468 -93.47 C -79.181 -94.179 -78.667 -94.934 -78.731 -96.441 C -78.869 -99.76 -78.791 -103.09 -78.755 -106.42 C -78.694 -107 -79.02 -107.56 -79.56 -107.8 C -81.436 -108.83 -83.28 -109.93 -85.138 -110.99 C -85.734 -111.34 -85.734 -111.34 -85.113 -111.7 C -82.748 -113.07 -80.379 -114.43 -78.021 -115.82 C -77.707 -116.05 -77.283 -116.06 -76.957 -115.84 C -74.962 -114.66 -72.953 -113.5 -70.929 -112.37 C -70.62 -112.19 -70.456 -111.84 -70.521 -111.49 C -70.514 -107.99 -70.508 -104.48 -70.504 -100.94 Z"
+        transform="matrix(1, 0, 0, 1, 131.35482788085938, 125.0257797241211)" />
+      <path
+        class="primary-logo-color"
+        d="M -108.68 -85.743 L -108.68 -75.169 C -108.72 -74.754 -108.5 -74.358 -108.12 -74.179 C -104.77 -72.267 -101.44 -70.339 -98.117 -68.396 C -97.762 -68.141 -97.284 -68.141 -96.929 -68.396 C -95.028 -69.527 -93.096 -70.598 -91.195 -71.725 C -90.667 -72.041 -90.581 -71.892 -90.581 -71.371 C -90.596 -68.591 -90.596 -65.811 -90.581 -63.03 C -90.551 -62.7 -90.729 -62.386 -91.028 -62.243 C -93.083 -61.073 -95.13 -59.891 -97.17 -58.697 C -97.436 -58.537 -97.775 -58.569 -98.007 -58.775 C -102.74 -61.517 -107.47 -64.254 -112.22 -66.984 C -113.63 -67.796 -115.01 -68.615 -116.42 -69.406 C -116.77 -69.561 -116.97 -69.913 -116.94 -70.286 C -116.93 -80.555 -116.93 -90.823 -116.94 -101.09 C -116.94 -101.63 -116.86 -101.75 -116.35 -101.44 C -113.98 -100.05 -111.59 -98.667 -109.19 -97.303 C -108.84 -97.135 -108.62 -96.76 -108.66 -96.367 C -108.68 -92.833 -108.69 -89.291 -108.68 -85.743 Z"
+        transform="matrix(1, 0, 0, 1, 131.35482788085938, 125.0257797241211)" />
+      <path
+        class="secondary-logo-color"
+        d="M -122.18 -85.807 L -122.18 -82.129 C -122.18 -81.637 -122.34 -81.615 -122.72 -81.839 C -125.16 -83.257 -127.6 -84.667 -130.05 -86.069 C -130.35 -86.219 -130.53 -86.535 -130.5 -86.867 L -130.5 -94.09 C -130.5 -94.64 -130.34 -94.679 -129.89 -94.417 C -127.49 -92.998 -125.09 -91.607 -122.67 -90.243 C -122.35 -90.103 -122.15 -89.772 -122.18 -89.42 C -122.21 -88.214 -122.18 -87.012 -122.18 -85.807 Z M -82.688 -119.15 C -83.954 -118.41 -85.17 -117.7 -86.365 -117.02 C -87.748 -116.22 -89.138 -115.44 -90.514 -114.63 C -90.761 -114.45 -91.093 -114.45 -91.34 -114.63 C -93.432 -115.86 -95.535 -117.07 -97.649 -118.27 C -98.053 -118.5 -98.191 -118.63 -97.67 -118.93 C -95.216 -120.32 -92.776 -121.74 -90.337 -123.15 C -90.134 -123.33 -89.845 -123.36 -89.61 -123.23 L -82.918 -119.33 C -82.862 -119.28 -82.812 -119.24 -82.688 -119.15 Z M -85.365 -65.616 L -85.365 -72.062 L -85.365 -74.622 C -85.403 -74.928 -85.24 -75.223 -84.961 -75.353 C -82.886 -76.534 -80.83 -77.736 -78.77 -78.931 C -78.174 -79.286 -78.135 -79.257 -78.135 -78.576 L -78.135 -70.303 C -78.135 -69.991 -78.135 -69.711 -78.468 -69.52 C -80.656 -68.275 -82.833 -67.013 -85.014 -65.761 C -85.127 -65.704 -85.245 -65.655 -85.365 -65.616 Z"
+        transform="matrix(1, 0, 0, 1, 131.35482788085938, 125.0257797241211)" />
+    </svg>
+  `
+})
+export class LogoComponent {
+  @Input() width: number;
+  @Input() height: number;
+}

package/src/components/menu/menu-item-create-dialog.component.ts

@@ -0,0 +1,119 @@
+import { Component, EventEmitter, inject, Input, OnInit, Output } from '@angular/core';
+import { ButtonModule } from 'primeng/button';
+import { DialogModule } from 'primeng/dialog';
+import { InputTextModule } from 'primeng/inputtext';
+import { SelectModule } from 'primeng/select';
+import { FormsModule } from '@angular/forms';
+import { MenuService } from 'oip-common';
+import { TranslatePipe } from '@ngx-translate/core';
+import { AddModuleInstanceDto, IntKeyValueDto } from '../../api/data-contracts';
+import { Menu } from '../../api/Menu';
+
+@Component({
+  selector: 'menu-item-create-dialog',
+  standalone: true,
+  imports: [ButtonModule, DialogModule, InputTextModule, SelectModule, FormsModule, TranslatePipe],
+  template: `
+    <p-dialog
+      header="{{ 'menuItemCreateDialogComponent.header' | translate }}"
+      [modal]="true"
+      [style]="{ width: '40rem' }"
+      [(visible)]="visible">
+      @if (menuService.contextMenuItem) {
+        <div class="flex items-center gap-4 mb-4 mt-1">
+          <label class="font-semibold w-1/3" for="oip-menu-item-create-dialog-parent-input">
+            {{ 'menuItemCreateDialogComponent.parentLabel' | translate }}
+          </label>
+          <input
+            autocomplete="off"
+            class="flex-auto"
+            id="oip-menu-item-create-dialog-parent-input"
+            pInputText
+            readonly
+            [ngModel]="menuService.contextMenuItem?.label" />
+        </div>
+      }
+      <div class="flex items-center gap-4 mb-4">
+        <label class="font-semibold w-1/3" for="oip-menu-item-create-label">
+          {{ 'menuItemCreateDialogComponent.label' | translate }}
+        </label>
+        <input autocomplete="off" class="flex-auto" id="oip-menu-item-create-label" pInputText [(ngModel)]="label" />
+      </div>
+      <div class="flex items-center gap-4 mb-4">
+        <label class="font-semibold w-1/3" for="oip-menu-item-create-module">
+          {{ 'menuItemCreateDialogComponent.module' | translate }}
+        </label>
+        <p-select
+          appendTo="body"
+          class="flex-auto"
+          id="oip-menu-item-create-module"
+          optionLabel="value"
+          optionValue="key"
+          placeholder="{{ 'menuItemCreateDialogComponent.selectModule' | translate }}"
+          [options]="modules"
+          [(ngModel)]="selectModule" />
+      </div>
+      <div class="flex items-center gap-4 mb-4">
+        <label class="font-semibold w-1/3" for="oip-menu-item-create-dialog-icon">
+          {{ 'menuItemCreateDialogComponent.icon' | translate }}
+        </label>
+        <i class="{{ selectIcon }}"></i>
+        <input class="flex-auto" id="oip-menu-item-create-dialog-icon" pInputText [(ngModel)]="selectIcon" />
+      </div>
+      <div class="flex justify-end gap-2">
+        <p-button
+          id="oip-menu-item-create-cancel"
+          label="{{ 'menuItemCreateDialogComponent.cancel' | translate }}"
+          severity="secondary"
+          (click)="changeVisible()"
+          (keydown)="changeVisible()" />
+        <p-button
+          id="oip-menu-item-create-save"
+          label="{{ 'menuItemCreateDialogComponent.save' | translate }}"
+          (click)="save()"
+          (keydown)="save()" />
+      </div>
+    </p-dialog>
+  `
+})
+export class MenuItemCreateDialogComponent implements OnInit {
+  menuService = inject(MenuService);
+  protected readonly menu = inject(Menu);
+  @Input() visible!: boolean;
+  @Output() visibleChange = new EventEmitter<boolean>();
+  modules: IntKeyValueDto[] = [];
+  selectModule: any;
+  label: string;
+  selectIcon: string = 'pi pi-box';
+
+  async ngOnInit() {
+    this.modules = await this.menu.menuGetModules();
+  }
+
+  changeVisible() {
+    this.visible = !this.visible;
+    this.visibleChange.emit(this.visible);
+  }
+
+  async save() {
+    const item: AddModuleInstanceDto = {
+      moduleId: this.selectModule,
+      label: this.label,
+      icon: this.selectIcon,
+      parentId: this.menuService.contextMenuItem?.moduleInstanceId
+    };
+    await this.menuService.addModuleInstance(item);
+    await this.menuService.loadMenu();
+    this.hide();
+  }
+
+  hide() {
+    this.visible = false;
+    this.visibleChange.emit(this.visible);
+  }
+
+  showDialog() {
+    this.visible = true;
+    this.visibleChange.emit(this.visible);
+  }
+}