Add ext children to sidebar

cjmalloy · Dec 13, 2024 · 5c763dc · 5c763dc
1 parent d6299c3
commit 5c763dc
Show file tree

Hide file tree

Showing 5 changed files with 228 additions and 153 deletions.
diff --git a/src/app/component/ext/ext-list/ext-list.component.html b/src/app/component/ext/ext-list/ext-list.component.html
@@ -1,13 +1,17 @@
 <div class="list-container">
-  <ng-container *ngFor="let ext of page?.content; let i = index">
+  @for (ext of page?.content; track ext; let i = $index) {
     <div class="list-number">{{ i + page!.page.number * page!.page.size + 1 }}</div>
     <app-ext [ext]="ext"></app-ext>
-  </ng-container>
+  }
 </div>
-<app-loading *ngIf="!page"></app-loading>
-<app-page-controls *ngIf="page && page.content.length"
-                   [page]="page"></app-page-controls>
-
-<p class="no-results" *ngIf="page && !page.content.length" i18n>
-  No results found
-</p>
+@if (page) {
+  @if (page.content.length) {
+    <app-page-controls [page]="page"></app-page-controls>
+  } @else {
+    <p class="no-results" i18n>
+      No results found
+    </p>
+  }
+} @else {
+  <app-loading></app-loading>
+}
diff --git a/src/app/component/ext/ext.component.html b/src/app/component/ext/ext.component.html
@@ -5,54 +5,68 @@
 </div>
 <div class="stack">
   <div class="info">
-    <ng-container *ngIf="ext.modified else notSubmitted">
+    @if (ext.modified) {
       <span [title]="ext.modified.toISO()" i18n>modified {{ ext.modified.toRelative() }}</span>
-    </ng-container>
-    <ng-template #notSubmitted>
+    } @else {
       <span i18n>not found</span>
-    </ng-template>
-    <ng-container *ngFor="let icon of icons">
+    }
+    @for (icon of icons; track icon) {
       <span class="icon" (click)="bookmarks.toggleTag(icon.tag)" [title]="icon.tag">{{ icon.config!.view! }}</span>
-    </ng-container>
-    <ng-container *ngIf="!local" i18n>
-      on <a [routerLink]="['/tag', ext.origin]">{{ ext.origin || 'default' }}</a>
-    </ng-container>
+    }
+    @if (!local) {
+      <span i18n>on</span> <a [routerLink]="['/tag', ext.origin]">{{ ext.origin || 'default' }}</a>
+    }
   </div>
   <div class="actions">
-    <ng-container *ngIf="!ext.upload">
-      <a *ngIf="parent" [routerLink]="['/tags', parent]" i18n>parent</a>
+    @if (!ext.upload) {
+      @if (parent) {
+        <a [routerLink]="['/tags', parent]" i18n>parent</a>
+      }
       <a [routerLink]="['/tags', extLink]" i18n>tags</a>
-      <a *ngIf="!local" class="fake-link" (click)="copy()" i18n>copy</a>
-      <a *ngIf="local && writeAccess else source" class="fake-link" (click)="editing = !editing" i18n>edit</a>
-      <ng-template #source>
-        <a *ngIf="!local" class="fake-link" (click)="editing = !editing" i18n>diff</a>
-        <a *ngIf="local" class="fake-link" (click)="viewSource = !viewSource" i18n>source</a>
-      </ng-template>
+      @if (!local) {
+        <a class="fake-link" (click)="copy()" i18n>copy</a>
+      }
+      @if (local && writeAccess) {
+        @if (useEditPage) {
+          <a [routerLink]="['/ext/', ext.tag]" i18n>edit</a>
+        } @else {
+          <a class="fake-link" (click)="editing = !editing" i18n>edit</a>
+        }
+      } @else if (useEditPage) {
+        <a [routerLink]="['/ext/', ext.tag]" i18n>source</a>
+      } @else {
+        <a class="fake-link" (click)="viewSource = !viewSource" i18n>source</a>
+      }
       <a class="fake-link" (click)="download()" i18n>download</a>
-      <app-confirm-action #action *ngIf="store.account.mod || writeAccess" [action]="delete$" i18n>delete</app-confirm-action>
-    </ng-container>
-    <ng-container *ngIf="store.account.user && ext.upload">
+      @if (store.account.mod || writeAccess) {
+        <app-confirm-action #action [action]="delete$" i18n>delete</app-confirm-action>
+      }
+    }
+    @if (store.account.user && ext.upload) {
       <a class="fake-link" (click)="upload()" i18n>upload</a>
-      <a *ngIf="parent" [routerLink]="['/tags', parent]" i18n>parent</a>
+      @if (parent) {
+        <a [routerLink]="['/tags', parent]" i18n>parent</a>
+      }
       <a [routerLink]="['/tags', ext.tag]" i18n>tags</a>
       <a class="fake-link" (click)="editing = !editing" i18n>edit</a>
       <a class="fake-link" (click)="download()" i18n>download</a>
       <app-confirm-action #action [action]="delete$" i18n>delete</app-confirm-action>
-    </ng-container>
+    }
   </div>
 </div>
 
-<form *ngIf="editing else showErrors" class="form" [formGroup]="editForm" (ngSubmit)="save()">
+@if (editing) {
+  <form class="form" [formGroup]="editForm" (ngSubmit)="save()">
 
-  <app-ext-form [group]="editForm"></app-ext-form>
+    <app-ext-form [group]="editForm"></app-ext-form>
 
-  @for (e of serverError; track e) {
-    <span><!-- Unexpected Error --></span>
-    <div class="error">{{ e }}</div>
-  }
+    @for (e of serverError; track e) {
+      <span><!-- Unexpected Error --></span>
+      <div class="error">{{ e }}</div>
+    }
 
-  <span><!-- Buttons --></span>
-  <span class="buttons right">
+    <span><!-- Buttons --></span>
+    <span class="buttons right">
     <div *ngIf="invalid && !force" class="overwrite warning" i18n-title title="Will drop all unknown configs.">
       <input id="overwrite" type="checkbox" [(ngModel)]="overwrite" [ngModelOptions]="{standalone: true}">
       <label for="overwrite" i18n>Overwrite</label>
@@ -64,14 +78,13 @@
     <button type="submit" [disabled]="submitted && !editForm.valid" i18n>save</button>
     <button type="button" (click)="editing = false" i18n>cancel</button>
   </span>
-</form>
-
-<form *ngIf="viewSource" class="form" [formGroup]="editForm">
-  <app-ext-form [group]="editForm"></app-ext-form>
-</form>
-
-<ng-template #showErrors>
+  </form>
+} @else if (viewSource) {
+  <form class="form" [formGroup]="editForm">
+    <app-ext-form [group]="editForm"></app-ext-form>
+  </form>
+} @else {
   @for (e of serverError; track e) {
     <div class="error">{{ e }}</div>
   }
-</ng-template>
+}
diff --git a/src/app/component/ext/ext.component.ts b/src/app/component/ext/ext.component.ts
@@ -49,6 +49,8 @@ export class ExtComponent implements OnChanges, HasChanges {
 
   @Input()
   ext!: Ext;
+  @Input()
+  useEditPage = false;
 
   editForm!: UntypedFormGroup;
   submitted = false;