TECH-66: Fix Monaco editor config (#419)

Author: A77AY

apps/control-center/src/app/app.module.ts

@@ -62,7 +62,14 @@ registerLocaleData(localeRu);
         SidenavInfoComponent,
         ToolbarComponent,
         NavComponent,
-        MonacoEditorModule.forRoot(),
+        MonacoEditorModule.forRoot({
+            requireConfig: {
+                paths: {
+                    // TODO: https://github.com/microsoft/monaco-editor/issues/4778
+                    vs: window.location.origin + '/assets/monaco/min/vs',
+                },
+            },
+        }),
         // TODO: hack for metadata datetime 😡
         MatDatepickerModule,
         // TODO: hack for cash field 😡

apps/control-center/src/app/shared/components/thrift-viewer/thrift-viewer.component.html

@@ -1,19 +1,19 @@
-<div
-    *ngIf="progress; else loaded"
-    style="display: flex; justify-content: center; flex-direction: row"
->
-    <mat-spinner></mat-spinner>
-</div>
-<ng-template #loaded>
+@if (progress) {
+    <div style="display: flex; justify-content: center; flex-direction: row">
+        <mat-spinner></mat-spinner>
+    </div>
+} @else {
     <div class="wrapper">
-        <ngx-monaco-diff-editor
-            *ngIf="isDiff; else standard"
-            [modifiedModel]="comparedFile$ | async"
-            [options]="{ renderSideBySide: true, readOnly: true }"
-            [originalModel]="valueFile$ | async"
-            class="monaco-editor"
-        ></ngx-monaco-diff-editor>
-        <ng-template #standard>
+        @let valueFile = valueFile$ | async;
+
+        @if (isDiff) {
+            <ngx-monaco-diff-editor
+                [modifiedModel]="comparedFile$ | async"
+                [options]="{ renderSideBySide: true, readOnly: true }"
+                [originalModel]="valueFile"
+                class="monaco-editor"
+            ></ngx-monaco-diff-editor>
+        } @else {
             <cc-json-viewer
                 *ngIf="kind === 'component'"
                 [extensions]="extensions"
@@ -24,17 +24,23 @@
             ></cc-json-viewer>
             <ngx-monaco-editor
                 *ngIf="kind === 'editor'"
-                [ngModel]="(valueFile$ | async).code"
-                [options]="{ readOnly: true, language: (valueFile$ | async).language }"
+                [ngModel]="valueFile.code"
+                [options]="{ readOnly: true, language: valueFile.language }"
                 class="monaco-editor"
             >
             </ngx-monaco-editor>
             <div class="actions">
                 <button color="primary" mat-icon-button (click)="toggleKind()">
-                    <mat-icon *ngIf="kind === 'component'">code_blocks</mat-icon>
-                    <mat-icon *ngIf="kind === 'editor'">view_comfy_alt</mat-icon>
+                    @switch (kind) {
+                        @case ('component') {
+                            <mat-icon>code_blocks</mat-icon>
+                        }
+                        @case ('editor') {
+                            <mat-icon>view_comfy_alt</mat-icon>
+                        }
+                    }
                 </button>
             </div>
-        </ng-template>
+        }
     </div>
-</ng-template>
+}

libs/matez/src/lib/components/table/components/dnd-column.component.ts

@@ -0,0 +1,45 @@
+import { CommonModule } from '@angular/common';
+import { ChangeDetectionStrategy, Component, output } from '@angular/core';
+import { MatIconModule } from '@angular/material/icon';
+import { MatTableModule } from '@angular/material/table';
+
+import { BaseColumnComponent } from './base-column.component';
+
+@Component({
+    selector: 'v-dnd-column',
+    template: `
+        <ng-container [matColumnDef]="name()" [sticky]="true">
+            @let columnClasses = 'column';
+            <th *matHeaderCellDef [class]="columnClasses" mat-header-cell></th>
+            <td *matCellDef="let row" [class]="columnClasses" mat-cell>
+                <div class="position">
+                    <mat-icon class="dragCursor" (mousedown)="dragged.emit()">reorder</mat-icon>
+                    <!-- <span>{{ index + 1 }}</span>-->
+                </div>
+            </td>
+            <td *matFooterCellDef [class]="columnClasses" mat-footer-cell>
+                <div class="position">
+                    <mat-icon class="dragCursor">reorder</mat-icon>
+                </div>
+            </td>
+        </ng-container>
+    `,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    imports: [CommonModule, MatTableModule, MatIconModule],
+    styles: `
+        .column {
+            .position {
+                display: flex;
+                align-items: center;
+                gap: 8px;
+
+                .dragCursor {
+                    cursor: move;
+                }
+            }
+        }
+    `,
+})
+export class DndColumnComponent extends BaseColumnComponent {
+    dragged = output();
+}

libs/matez/src/lib/components/table/components/select-column.component.ts

@@ -7,7 +7,6 @@ import {
     OnChanges,
     OnDestroy,
     OnInit,
-    booleanAttribute,
     input,
     model,
 } from '@angular/core';
@@ -29,9 +28,7 @@ import { BaseColumnComponent } from './base-column.component';
             <th *matHeaderCellDef [class]="columnClasses" mat-header-cell>
                 <mat-checkbox
                     [checked]="selection.hasValue() && (isAllSelected$ | async)"
-                    [disabled]="
-                        !!progress() || !data()?.length || (filtered() && !(isAllSelected$ | async))
-                    "
+                    [disabled]="!!progress() || !data()?.length"
                     [indeterminate]="selection.hasValue() && !(isAllSelected$ | async)"
                     (change)="$event ? toggleAllRows() : null"
                 >
@@ -72,10 +69,6 @@ export class SelectColumnComponent<T>
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     data = input<T[], ArrayAttributeTransform<any>>([], { transform: arrayAttribute });
     progress = input<boolean | number | null | undefined>(false);
-    /**
-     * @deprecated
-     */
-    filtered = input<boolean, unknown>(false, { transform: booleanAttribute });
 
     selection = new SelectionModel<T>(true, []);
     isAllSelected$ = combineLatest([

libs/matez/src/lib/components/table/table.component.html

@@ -43,18 +43,15 @@
             (cdkDropListDropped)="drop($event)"
             (matSortChange)="sort.set($event)"
         >
-            <ng-container [matColumnDef]="columnDefs.drag" [sticky]="true">
-                <th *matHeaderCellDef mat-header-cell></th>
-                <td *matCellDef="let row; let index = index" mat-cell>
-                    <div class="position">
-                        <mat-icon class="dragCursor" (mousedown)="dragDisabled = false"
-                            >reorder</mat-icon
-                        >
-                        <!-- <span>{{ index + 1 }}</span>-->
-                    </div>
-                </td>
-            </ng-container>
-            @if (rowSelectable()) {
+            @let displayedColumns = (displayedColumns$ | async) || [];
+
+            @if (displayedColumns.includes(columnDefs.drag)) {
+                <v-dnd-column
+                    [name]="columnDefs.drag"
+                    (dragged)="dragDisabled = false"
+                ></v-dnd-column>
+            }
+            @if (displayedColumns.includes(columnDefs.select)) {
                 <v-select-column
                     [(selected)]="rowSelected"
                     [data]="displayedData$ | async"

libs/matez/src/lib/components/table/table.component.scss

@@ -33,16 +33,6 @@ table,
         background: #eee;
     }
 
-    .position {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-
-        .dragCursor {
-            cursor: move;
-        }
-    }
-
     .column {
         max-width: max(20px, 30vw);
 

libs/matez/src/lib/components/table/table.module.ts

@@ -19,6 +19,7 @@ import { TagModule } from '../tag';
 import { ValueComponent, ValueListComponent } from '../value';
 
 import { CustomizeComponent } from './components/customize/customize.component';
+import { DndColumnComponent } from './components/dnd-column.component';
 import { InfinityScrollDirective } from './components/infinity-scroll.directive';
 import { NoRecordsComponent } from './components/no-records.component';
 import { SelectColumnComponent } from './components/select-column.component';
@@ -55,6 +56,7 @@ import { TableComponent } from './table.component';
         MatBadgeModule,
         ReactiveFormsModule,
         TagModule,
+        DndColumnComponent,
     ],
     declarations: [
         CustomizeComponent,