fix: fix resetting config and other minor issues

Start9Labs · Jan 24, 2025 · a1d88fb · a1d88fb
1 parent e6f02bf
commit a1d88fb
Show file tree

Hide file tree

Showing 10 changed files with 194 additions and 156 deletions.
diff --git a/web/package-lock.json b/web/package-lock.json
diff --git a/web/package.json b/web/package.json
@@ -47,18 +47,19 @@
     "@noble/hashes": "^1.4.0",
     "@start9labs/argon2": "^0.2.2",
     "@start9labs/start-sdk": "file:../sdk/baseDist",
-    "@taiga-ui/addon-charts": "4.16.0",
-    "@taiga-ui/addon-commerce": "4.16.0",
-    "@taiga-ui/addon-mobile": "4.16.0",
-    "@taiga-ui/cdk": "4.16.0",
-    "@taiga-ui/core": "4.16.0",
+    "@taiga-ui/addon-charts": "4.21.0",
+    "@taiga-ui/addon-commerce": "4.21.0",
+    "@taiga-ui/addon-mobile": "4.21.0",
+    "@taiga-ui/addon-table": "4.21.0",
+    "@taiga-ui/cdk": "4.21.0",
+    "@taiga-ui/core": "4.21.0",
     "@taiga-ui/event-plugins": "4.3.1",
-    "@taiga-ui/icons": "4.16.0",
-    "@taiga-ui/kit": "4.16.0",
-    "@taiga-ui/layout": "4.16.0",
-    "@taiga-ui/legacy": "4.16.0",
-    "@taiga-ui/polymorpheus": "4.7.4",
-    "@taiga-ui/styles": "4.16.0",
+    "@taiga-ui/icons": "4.21.0",
+    "@taiga-ui/kit": "4.21.0",
+    "@taiga-ui/layout": "4.21.0",
+    "@taiga-ui/legacy": "4.21.0",
+    "@taiga-ui/polymorpheus": "4.8.0",
+    "@taiga-ui/styles": "4.21.0",
     "@tinkoff/ng-dompurify": "4.0.0",
     "ansi-to-html": "^0.7.2",
     "base64-js": "^1.5.1",

diff --git a/web/projects/ui/src/app/app.providers.ts b/web/projects/ui/src/app/app.providers.ts
@@ -20,7 +20,7 @@ import {
 } from '@taiga-ui/kit'
 import { tuiTextfieldOptionsProvider } from '@taiga-ui/legacy'
 import { PatchDB } from 'patch-db-client'
-import { filter, pairwise } from 'rxjs'
+import { filter, of, pairwise } from 'rxjs'
 import {
   PATCH_CACHE,
   PatchDbSource,
@@ -52,10 +52,10 @@ export const APP_PROVIDERS: Provider[] = [
   tuiDropdownOptionsProvider({ appearance: 'start-os' }),
   {
     provide: TUI_DATE_FORMAT,
-    useValue: {
+    useValue: of({
       mode: 'MDY',
       separator: '/',
-    },
+    }),
   },
   {
     provide: TUI_DATE_VALUE_TRANSFORMER,

diff --git a/web/projects/ui/src/app/routes/portal/components/form.component.ts b/web/projects/ui/src/app/routes/portal/components/form.component.ts
@@ -121,10 +121,7 @@ export class FormComponent<T extends Record<string, any>> implements OnInit {
   }
 
   onReset() {
-    const { value } = this.form
-
     this.form = this.formService.createForm(this.spec)
-    this.process(compare(this.form.value, value))
     tuiMarkControlAsTouchedAndValidate(this.form)
     this.markAsDirty()
   }

diff --git a/web/projects/ui/src/app/routes/portal/components/header/navigation.component.ts b/web/projects/ui/src/app/routes/portal/components/header/navigation.component.ts
@@ -49,11 +49,24 @@ import { getMenu } from 'src/app/utils/system-utilities'
       @import '@taiga-ui/core/styles/taiga-ui-local';
 
       :host {
+        position: relative;
         display: flex;
-        backdrop-filter: blur(1rem);
         border-radius: inherit;
         margin-inline-end: 0.875rem;
         isolation: isolate;
+
+        &::before {
+          content: '';
+          position: absolute;
+          top: 0;
+          left: -1rem;
+          right: -0.5rem;
+          bottom: 0;
+          transform: skewX(30deg);
+          border-radius: var(--bumper);
+          z-index: -1;
+          backdrop-filter: blur(1rem);
+        }
       }
 
       .link {

diff --git a/web/projects/ui/src/app/routes/portal/routes/service/dashboard/dashboard.component.ts b/web/projects/ui/src/app/routes/portal/routes/service/dashboard/dashboard.component.ts
@@ -1,26 +1,36 @@
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core'
 import { toSignal } from '@angular/core/rxjs-interop'
-import { TuiIcon } from '@taiga-ui/core'
+import { TuiComparator, TuiTable } from '@taiga-ui/addon-table'
 import { ToManifestPipe } from 'src/app/routes/portal/pipes/to-manifest'
 import { DepErrorService } from 'src/app/services/dep-error.service'
+import { PackageDataEntry } from 'src/app/services/patch-db/data-model'
+import { getInstalledPrimaryStatus } from 'src/app/services/pkg-status-rendering.service'
+import { getManifest } from 'src/app/utils/get-package-data'
 import { ServiceComponent } from './service.component'
 import { ServicesService } from './services.service'
 
 @Component({
   standalone: true,
   template: `
-    <table>
+    <table tuiTable [(sorter)]="sorter">
       <thead>
         <tr>
           <th [style.width.rem]="3"></th>
-          <th>Name</th>
-          <th>Version</th>
-          <th [style.width.rem]="13">Status</th>
+          <th tuiTh [requiredSort]="true" [sorter]="name">Name</th>
+          <th tuiTh>Version</th>
+          <th
+            tuiTh
+            [requiredSort]="true"
+            [sorter]="status"
+            [style.width.rem]="13"
+          >
+            Status
+          </th>
           <th [style.width.rem]="8" [style.text-indent.rem]="1.5">Controls</th>
         </tr>
       </thead>
       <tbody>
-        @for (pkg of services(); track $index) {
+        @for (pkg of services() | tuiTableSort; track $index) {
           <tr
             appService
             [pkg]="pkg"
@@ -39,15 +49,12 @@ import { ServicesService } from './services.service'
   styles: `
     :host {
       position: relative;
-      max-width: 64rem;
-      margin: 0 auto;
       font-size: 1rem;
       overflow: hidden;
     }
 
     table {
-      width: calc(100% - 4rem);
-      margin: 2rem;
+      width: 100%;
     }
 
     tr:not(:last-child) {
@@ -57,6 +64,8 @@ import { ServicesService } from './services.service'
     th {
       text-transform: uppercase;
       color: var(--tui-text-secondary);
+      background: none;
+      border: none;
       font: var(--tui-font-text-s);
       font-weight: bold;
       text-align: left;
@@ -69,22 +78,25 @@ import { ServicesService } from './services.service'
     }
 
     :host-context(tui-root._mobile) {
-      height: calc(100vh - 7.375rem);
-
-      table {
-        width: 100%;
-        margin: 0;
-      }
-
       thead {
         display: none;
       }
     }
   `,
-  imports: [TuiIcon, ServiceComponent, ToManifestPipe],
+  imports: [ServiceComponent, ToManifestPipe, TuiTable],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DashboardComponent {
   readonly services = toSignal(inject(ServicesService))
   readonly errors = toSignal(inject(DepErrorService).depErrors$)
+
+  readonly name: TuiComparator<PackageDataEntry> = (a, b) =>
+    getManifest(b).title.toLowerCase() > getManifest(a).title.toLowerCase()
+      ? -1
+      : 1
+
+  readonly status: TuiComparator<PackageDataEntry> = (a, b) =>
+    getInstalledPrimaryStatus(b) > getInstalledPrimaryStatus(a) ? -1 : 1
+
+  sorter = this.name
 }
diff --git a/web/projects/ui/src/app/routes/portal/routes/service/modals/action-input.component.ts b/web/projects/ui/src/app/routes/portal/routes/service/modals/action-input.component.ts
@@ -172,7 +172,8 @@ export class ActionInputModal {
 
   async execute(input: object) {
     if (await this.checkConflicts(input)) {
-      return this.actionService.execute(this.pkgInfo.id, this.actionId, input)
+      await this.actionService.execute(this.pkgInfo.id, this.actionId, input)
+      this.context.$implicit.complete()
     }
   }
 

diff --git a/web/projects/ui/src/app/routes/portal/routes/system/marketplace/components/tile.component.ts b/web/projects/ui/src/app/routes/portal/routes/system/marketplace/components/tile.component.ts
@@ -81,6 +81,7 @@ import { MarketplaceControlsComponent } from './controls.component'
 
       .preview-wrapper {
         overflow-y: auto;
+        height: 100%;
         max-width: 100%;
 
         @media (min-width: 768px) {

diff --git a/web/projects/ui/src/app/services/pkg-status-rendering.service.ts b/web/projects/ui/src/app/services/pkg-status-rendering.service.ts
@@ -27,16 +27,15 @@ export function renderPkgStatus(
   return { primary, dependency, health }
 }
 
-function getInstalledPrimaryStatus(pkg: T.PackageDataEntry): PrimaryStatus {
-  if (
-    Object.values(pkg.requestedActions).some(
-      r => r.active && r.request.severity === 'critical',
-    )
-  ) {
-    return 'actionRequired'
-  } else {
-    return pkg.status.main
-  }
+export function getInstalledPrimaryStatus({
+  requestedActions,
+  status,
+}: T.PackageDataEntry): PrimaryStatus {
+  return Object.values(requestedActions).some(
+    r => r.active && r.request.severity === 'critical',
+  )
+    ? 'actionRequired'
+    : status.main
 }
 
 function getDependencyStatus(depErrors: PkgDependencyErrors): DependencyStatus {

diff --git a/web/projects/ui/src/app/utils/dep-info.ts b/web/projects/ui/src/app/utils/dep-info.ts
@@ -8,7 +8,7 @@ export function getDepDetails(
   allPkgs: AllPackageData,
   depId: string,
 ) {
-  const { title, icon, versionRange } = pkg.currentDependencies[depId]
+  const { title, icon, versionRange } = pkg.currentDependencies[depId] || {}
 
   if (
     allPkgs[depId] &&