oip-common 0.10.0 → 0.11.0

package/fesm2022/oip-common.mjs

@@ -411,6 +411,7 @@ class LayoutService {
             return ngDateFormat;
         }, ...(ngDevMode ? [{ debugName: "monthFormat" }] : []));
         this.timeZone = computed(() => this.layoutConfig().timeZone, ...(ngDevMode ? [{ debugName: "timeZone" }] : []));
+        this.firstDayOfWeek = computed(() => this.layoutConfig().firstDayOfWeek ?? 1, ...(ngDevMode ? [{ debugName: "firstDayOfWeek" }] : []));
         this.adminMode = computed(() => this.layoutConfig().adminMode ?? false, ...(ngDevMode ? [{ debugName: "adminMode" }] : []));
         this.transitionComplete = signal(false, ...(ngDevMode ? [{ debugName: "transitionComplete" }] : []));
         /**
@@ -443,6 +444,7 @@ class LayoutService {
         if (appConfigUiString != null) {
             const config = JSON.parse(appConfigUiString);
             config.timeZone ??= Intl.DateTimeFormat().resolvedOptions().timeZone;
+            config.firstDayOfWeek ??= 1;
             return config;
         }
         return {
@@ -456,6 +458,7 @@ class LayoutService {
             timeFormat: 'HH:mm:ss',
             dateTimeFormat: 'yyyy-MM-dd HH:mm:ss',
             timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+            firstDayOfWeek: 1,
             adminMode: false
         };
     }
@@ -810,6 +813,8 @@ class L10nService {
         // Global dictionaries are available before the first `use()` call, so TranslateHttpLoader is never asked for them.
         L10nService.registerTranslations(globalTranslations);
         Object.entries(globalTranslations).forEach(([lang, translations]) => this.mergeTranslation(lang, translations));
+        // The first day of the week is a user setting, it overrides the value of the language dictionary.
+        effect(() => this.primeNg.setTranslation({ firstDayOfWeek: this.layoutService.firstDayOfWeek() }));
         // Static translations are merged once per language, so they have to be re-merged on every language change.
         this.translateService.onLangChange.subscribe((event) => {
             L10nService.staticTranslations.forEach((byLang) => {
@@ -904,7 +909,7 @@ class L10nService {
         if (key) {
             this.get(key);
         }
-        this.translateService.use(selectedLanguage);
+        this.translateService.use(selectedLanguage).subscribe(() => this.applyPrimeNgTranslation());
     }
     init(languages) {
         this.availableLanguages = languages;
@@ -913,9 +918,17 @@ class L10nService {
         this.translateService.setDefaultLang(lang);
         this.translateService.use(lang).subscribe(() => {
             this.loadComponentTranslations('app-info');
-            this.translateService.get('primeng').subscribe((res) => this.primeNg.setTranslation(res));
+            this.applyPrimeNgTranslation();
         });
     }
+    /**
+     * Passes the PrimeNG dictionary of the current language to PrimeNG, keeping the user's first day of the week
+     */
+    applyPrimeNgTranslation() {
+        this.translateService
+            .get('primeng')
+            .subscribe((res) => this.primeNg.setTranslation({ ...res, firstDayOfWeek: this.layoutService.firstDayOfWeek() }));
+    }
     instant(key, interpolateParams) {
         return this.translateService.instant(key, interpolateParams);
     }
@@ -4037,6 +4050,13 @@ class MenuApi extends HttpClient {
             secure: true,
             ...params,
         });
+        this.copyModuleInstance = ({ id, ...query }, params = {}) => this.request({
+            path: `/api/menu/copy-module-instance/${id}`,
+            method: "POST",
+            secure: true,
+            format: "json",
+            ...params,
+        });
         this.changeOrder = (query, params = {}) => this.request({
             path: `/api/menu/change-order`,
             method: "POST",
@@ -4191,9 +4211,9 @@ class StartPageService {
             if (item.separator) {
                 continue;
             }
-            if (item.items?.length) {
+            if (item.isFolder || item.items?.length) {
                 // A folder is never a landing page itself, its children are.
-                result.push(...this.collectNavigableLeaves(item.items));
+                result.push(...this.collectNavigableLeaves(item.items ?? []));
                 continue;
             }
             // A module without a real route would resolve back to the empty path and loop.
@@ -4318,13 +4338,22 @@ class MenuItemComponent {
             {
                 label: this.localization.new,
                 icon: PrimeIcons.PLUS,
-                command: (event) => this.newClick(event)
+                command: (event) => this.newClick(event),
+                // Only a folder can have child items.
+                visible: !!item.isFolder
             },
             {
                 label: this.localization.edit,
                 icon: PrimeIcons.FILE_EDIT,
                 command: (event) => this.editClick(event)
             },
+            {
+                label: this.localization.copy,
+                icon: PrimeIcons.COPY,
+                command: () => this.copyItem(item),
+                // Only a leaf instance can be copied, folders with children are not supported.
+                visible: !item.items?.length
+            },
             { separator: true },
             {
                 label: this.localization.delete,
@@ -4356,10 +4385,10 @@ class MenuItemComponent {
         this.contextMenu.show($event);
     }
     /**
-     * Builds the start page entries of the context menu. Only a navigable leaf can be a start page.
+     * Builds the start page entries of the context menu. Only a navigable non-folder item can be a start page.
      */
     getStartModuleItems(item) {
-        if (!item?.routerLink || item.items?.length) {
+        if (!item?.routerLink || item.isFolder || item.items?.length) {
             return [];
         }
         return item.isStart
@@ -4388,6 +4417,11 @@ class MenuItemComponent {
         this.msgService.success(this.localization.unsetStartModuleSuccessMessage);
         await this.menuService.loadMenu();
     }
+    async copyItem(item) {
+        await this.menuDataService.copyModuleInstance({ id: item.moduleInstanceId });
+        this.msgService.success(this.localization.copyItemSuccessMessage);
+        await this.menuService.loadMenu();
+    }
     deleteItem(event) {
         this.confirmationService.confirm({
             header: this.localization.deleteItemConfirmHeader,
@@ -4677,6 +4711,7 @@ class MenuItemCreateDialogComponent {
         this.msgService = inject(MsgService);
         this.visibleChange = new EventEmitter();
         this.modules = [];
+        this.moduleOptions = [];
         this.iconOptions = Object.values(PrimeIcons)
             .filter((icon) => typeof icon === 'string')
             .map((icon) => ({
@@ -4684,14 +4719,35 @@ class MenuItemCreateDialogComponent {
             value: icon
         }))
             .sort((left, right) => left.label.localeCompare(right.label));
-        this.selectIcon = 'pi pi-box';
+        this.selectIcon = MenuItemCreateDialogComponent.defaultIcon;
         this.saving = false;
     }
+    static { this.defaultIcon = 'pi pi-box'; }
     get canSave() {
         return !this.saving && !!this.selectModule;
     }
     async ngOnInit() {
         this.modules = await this.menu.getModules();
+        this.updateModuleOptions();
+    }
+    /**
+     * Restricts the module list to the folder when the item is created at the menu root,
+     * since only a folder can be placed there.
+     */
+    updateModuleOptions() {
+        const isRoot = !this.menuService.contextMenuItem;
+        this.moduleOptions = isRoot ? this.modules.filter((module) => module.isFolder) : this.modules;
+        if (isRoot && this.moduleOptions.length === 1) {
+            this.selectModule = this.moduleOptions[0].key;
+            this.onModuleChange(this.selectModule);
+        }
+        else if (!this.moduleOptions.some((module) => module.key === this.selectModule)) {
+            this.selectModule = undefined;
+        }
+    }
+    onModuleChange(moduleId) {
+        const module = this.modules.find((item) => item.key === moduleId);
+        this.selectIcon = module?.icon || MenuItemCreateDialogComponent.defaultIcon;
     }
     changeVisible() {
         this.visible = !this.visible;
@@ -4728,6 +4784,7 @@ class MenuItemCreateDialogComponent {
         this.visibleChange.emit(this.visible);
     }
     showDialog() {
+        this.updateModuleOptions();
         this.visible = true;
         this.visibleChange.emit(this.visible);
     }
@@ -4774,8 +4831,9 @@ class MenuItemCreateDialogComponent {
           placeholder="{{ 'menuItemCreateDialogComponent.selectModule' | translate }}"
           scrollHeight="18rem"
           [filter]="true"
-          [options]="modules"
-          [(ngModel)]="selectModule" />
+          [options]="moduleOptions"
+          [(ngModel)]="selectModule"
+          (ngModelChange)="onModuleChange($event)" />
       </div>
       <div class="flex items-center gap-4 mb-4">
         <label class="font-semibold w-1/3" for="oip-menu-item-create-dialog-icon">
@@ -4871,8 +4929,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
           placeholder="{{ 'menuItemCreateDialogComponent.selectModule' | translate }}"
           scrollHeight="18rem"
           [filter]="true"
-          [options]="modules"
-          [(ngModel)]="selectModule" />
+          [options]="moduleOptions"
+          [(ngModel)]="selectModule"
+          (ngModelChange)="onModuleChange($event)" />
       </div>
       <div class="flex items-center gap-4 mb-4">
         <label class="font-semibold w-1/3" for="oip-menu-item-create-dialog-icon">
@@ -5197,6 +5256,8 @@ var menuComponent$1 = {
 var menuItemComponent$1 = {
 	"new": "Add",
 	edit: "Edit",
+	copy: "Copy",
+	copyItemSuccessMessage: "Copied successfully",
 	"delete": "Delete",
 	deleteItemConfirmHeader: "Delete",
 	deleteItemConfirmMessage: "Are you sure you want to delete the item?",
@@ -5246,6 +5307,8 @@ var menuComponent = {
 var menuItemComponent = {
 	"new": "Добавить",
 	edit: "Редактировать",
+	copy: "Копировать",
+	copyItemSuccessMessage: "Успешно скопировано",
 	"delete": "Удалить",
 	deleteItemConfirmHeader: "Удаление",
 	deleteItemConfirmMessage: "Вы уверены что хотите удалить элемент?",
@@ -6544,6 +6607,7 @@ var config$1 = {
 	applicationManagement: "Application management",
 	dateFormat: "Date format",
 	dateTimeFormat: "Date and time format:",
+	firstDayOfWeek: "First day of the week",
 	goTo: "Go to",
 	localization: "Localization",
 	menu: "Menu",
@@ -6565,6 +6629,7 @@ var config = {
 	applicationManagement: "Управление приложениями",
 	dateFormat: "Формат даты",
 	dateTimeFormat: "Формат даты и времени:",
+	firstDayOfWeek: "Первый день недели",
 	goTo: "Перейти",
 	localization: "Локализация",
 	menu: "Меню",
@@ -6593,10 +6658,20 @@ class ConfigComponent {
         this.timeFormats = ['HH:mm:ss', 'HH:mm'];
         // @ts-ignore
         this.allTimeZones = Intl.supportedValuesOf('timeZone');
+        /** Days of the week starting from Monday, named in the current language. */
+        this.weekDays = computed(() => {
+            const format = new Intl.DateTimeFormat(this.layoutService.language() ?? 'en', { weekday: 'long' });
+            // 1 January 2024 is a Monday, so day N of that week falls on N January (Sunday - on 7 January).
+            return [1, 2, 3, 4, 5, 6, 0].map((day) => {
+                const name = format.format(new Date(2024, 0, day || 7));
+                return { value: day, label: name.charAt(0).toUpperCase() + name.slice(1) };
+            });
+        }, ...(ngDevMode ? [{ debugName: "weekDays" }] : []));
         this.selectedLanguage = this.layoutService.language();
         this.selectedDateFormat = this.layoutService.dateFormat();
         this.selectedTimeFormat = this.layoutService.timeFormat();
         this.selectedTimeZone = this.layoutService.timeZone();
+        this.selectedFirstDayOfWeek = this.layoutService.firstDayOfWeek();
     }
     changeLanguage() {
         this.layoutService.layoutConfig.update((config) => ({
@@ -6611,6 +6686,9 @@ class ConfigComponent {
     changeTimeFormat() {
         this.layoutService.layoutConfig.update((config) => ({ ...config, timeFormat: this.selectedTimeFormat }));
     }
+    changeFirstDayOfWeek() {
+        this.layoutService.layoutConfig.update((config) => ({ ...config, firstDayOfWeek: this.selectedFirstDayOfWeek }));
+    }
     changeTimeZone() {
         this.layoutService.layoutConfig.update((config) => ({ ...config, timeZone: this.selectedTimeZone }));
     }
@@ -6681,6 +6759,16 @@ class ConfigComponent {
               [placeholder]="'config.timeFormat' | translate"
               [(ngModel)]="selectedTimeFormat"
               (onChange)="changeTimeFormat()" />
+            <div class="mt-5">{{ 'config.firstDayOfWeek' | translate }}</div>
+            <p-select
+              class="w-full md:w-56"
+              optionLabel="label"
+              optionValue="value"
+              qa-id="oip-app-config-first-day-of-week-select"
+              [options]="weekDays()"
+              [placeholder]="'config.firstDayOfWeek' | translate"
+              [(ngModel)]="selectedFirstDayOfWeek"
+              (onChange)="changeFirstDayOfWeek()" />
             <div class="mt-5">{{ 'config.timeZone' | translate }}</div>
             <p-select
               class="w-full md:w-56"
@@ -6799,6 +6887,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
               [placeholder]="'config.timeFormat' | translate"
               [(ngModel)]="selectedTimeFormat"
               (onChange)="changeTimeFormat()" />
+            <div class="mt-5">{{ 'config.firstDayOfWeek' | translate }}</div>
+            <p-select
+              class="w-full md:w-56"
+              optionLabel="label"
+              optionValue="value"
+              qa-id="oip-app-config-first-day-of-week-select"
+              [options]="weekDays()"
+              [placeholder]="'config.firstDayOfWeek' | translate"
+              [(ngModel)]="selectedFirstDayOfWeek"
+              (onChange)="changeFirstDayOfWeek()" />
             <div class="mt-5">{{ 'config.timeZone' | translate }}</div>
             <p-select
               class="w-full md:w-56"