feat(ui, rest): manage resource releases

AMW_angular/io/src/app/resources/contexts-list/contexts-list.component.ts

@@ -9,6 +9,7 @@ import { map } from 'rxjs/operators';
 
 @Component({
   selector: 'app-contexts-list',
+  standalone: true,
   imports: [NgClass, UpperCasePipe],
   templateUrl: './contexts-list.component.html',
   styleUrl: './contexts-list.component.scss',

AMW_angular/io/src/app/resources/resource-edit/resource-edit.component.html

@@ -37,6 +37,12 @@
         <app-contexts-list></app-contexts-list>
       </div>
       <div class="flex-grow-1">
+        <app-resource-releases
+          [id]="id()"
+          [releases]="releases()"
+          [contextId]="contextId()"
+          [resource]="resource()"
+        ></app-resource-releases>
         <app-resource-properties [contextId]="contextId()"></app-resource-properties>
         <app-resource-templates-list [resource]="resource()" [contextId]="contextId()"></app-resource-templates-list>
         <app-resource-functions-list [resource]="resource()" [contextId]="contextId()"></app-resource-functions-list>

AMW_angular/io/src/app/resources/resource-edit/resource-edit.component.ts

@@ -14,6 +14,7 @@ import { ButtonComponent } from '../../shared/button/button.component';
 import { NgbDropdown, NgbDropdownItem, NgbDropdownMenu, NgbDropdownToggle } from '@ng-bootstrap/ng-bootstrap';
 import { ContextsListComponent } from '../contexts-list/contexts-list.component';
 import { ResourcePropertiesComponent } from './resource-properties/resource-properties.component';
+import { ResourceReleasesComponent } from './resource-releases/resource-releases.component';
 
 @Component({
   selector: 'app-resource-edit',
@@ -30,6 +31,7 @@ import { ResourcePropertiesComponent } from './resource-properties/resource-prop
     NgbDropdownItem,
     ContextsListComponent,
     ResourcePropertiesComponent,
+    ResourceReleasesComponent,
   ],
   templateUrl: './resource-edit.component.html',
   styleUrl: './resource-edit.component.scss',

AMW_angular/io/src/app/resources/resource-edit/resource-properties/resource-properties.component.ts

@@ -69,7 +69,7 @@ export class ResourcePropertiesComponent {
   permissions = computed(() => {
     if (this.authService.restrictions().length > 0) {
       return {
-        canAddProperty: this.authService.hasPermission('RESOURCE', 'UPDATE', null, null, this.context().name),
+        canAddProperty: this.authService.hasPermission('RESOURCE', 'UPDATE', null, null, this.context()?.name),
       };
     } else {
       return { canAddProperty: false };

AMW_angular/io/src/app/resources/resource-edit/resource-releases/resource-releases.component.html

@@ -0,0 +1,157 @@
+<app-loading-indicator [isLoading]="isLoading()"></app-loading-indicator>
+<app-tile-component
+  [title]="'Releases'"
+  [actionName]="'New Release'"
+  [canAction]="permissions().canAddRelease"
+  [isVisible]="true"
+  (tileAction)="addRelease()"
+  [noContent]="false"
+  [notAllowed]="false"
+>
+  @if (!releases() || releases().length < 1) {
+    <div class="no-content">
+      <span>No Release for this resource</span>
+    </div>
+  } @else {
+    <table class="table table-borderless">
+      <tbody>
+        @for (release of releases(); track release) {
+          <tr
+            style="cursor: pointer"
+            [routerLink]="['/resource/edit']"
+            [queryParams]="{ ctx: contextId(), id: release.id, selectedResourceTypeId: resource().resourceTypeId }"
+          >
+            <td [class.fw-bold]="release.id === id()">
+              {{ release.name }}
+            </td>
+            <td class="text-end">
+              @if (release.id === id() && permissions().canChangeRelease) {
+                <app-button
+                  title="Change Release"
+                  [size]="'sm'"
+                  [variant]="'link'"
+                  [additionalClasses]="'p-0 link-secondary me-2'"
+                  (click)="showChangeReleaseModal(release); $event.stopPropagation(); $event.preventDefault()"
+                >
+                  <app-icon icon="pencil"></app-icon>
+                </app-button>
+              }
+              @if (permissions().canDeleteRelease) {
+                <app-button
+                  title="Delete"
+                  [size]="'sm'"
+                  [variant]="'link'"
+                  [additionalClasses]="'p-0 link-danger'"
+                  (click)="
+                    showDeleteConfirmation(deleteReleaseConfirmation, release);
+                    $event.stopPropagation();
+                    $event.preventDefault()
+                  "
+                >
+                  <app-icon icon="trash"></app-icon>
+                </app-button>
+              }
+            </td>
+          </tr>
+        }
+      </tbody>
+    </table>
+  }
+</app-tile-component>
+
+<ng-template #deleteReleaseConfirmation let-modal>
+  <app-modal-header
+    [title]="'Delete release ' + releaseToDelete()?.name"
+    (cancel)="modal.dismiss('Cross click')"
+  ></app-modal-header>
+  <div class="modal-body">
+    <p class="text-warning-2">Are you sure that you want to delete this release?</p>
+  </div>
+  <div class="modal-footer">
+    <app-button [variant]="'secondary'" (click)="modal.dismiss('Cancel click')">Cancel</app-button>
+    <app-button [variant]="'danger'" (click)="modal.close('Confirm click')" ngbAutofocus>Delete</app-button>
+  </div>
+</ng-template>
+
+<ng-template #createReleaseModal let-modal>
+  <app-modal-header [title]="'Create New Release'" (cancel)="modal.dismiss('Cross click')"></app-modal-header>
+  <div class="modal-body">
+    @if (availableReleases().length === 0) {
+      <p>No available releases to create.</p>
+    } @else {
+      <div class="mb-3">
+        <label for="releaseSelect" class="form-label">Select Release</label>
+        <select
+          id="releaseSelect"
+          class="form-select"
+          [ngModel]="selectedReleaseId()"
+          (ngModelChange)="selectedReleaseId.set($event)"
+          [disabled]="isCreatingRelease()"
+        >
+          <option [ngValue]="null">Select Release</option>
+          @for (release of availableReleases(); track release.id) {
+            <option [ngValue]="release.id">{{ release.name }}</option>
+          }
+        </select>
+      </div>
+    }
+  </div>
+  <div class="modal-footer">
+    <app-button [variant]="'secondary'" (click)="modal.dismiss('Cancel click')" [disabled]="isCreatingRelease()">
+      Cancel
+    </app-button>
+    <app-button
+      [variant]="'primary'"
+      (click)="modal.close('Create click')"
+      [disabled]="!selectedReleaseId() || isCreatingRelease()"
+      ngbAutofocus
+    >
+      Create
+    </app-button>
+  </div>
+</ng-template>
+
+<ng-template #changeReleaseModal let-modal>
+  <app-modal-header
+    [title]="'Change Release for ' + releaseToChange()?.name"
+    (cancel)="modal.dismiss('Cross click')"
+  ></app-modal-header>
+  <div class="modal-body">
+    @if (availableReleases().length === 0) {
+      <p>No available releases to change to.</p>
+    } @else {
+      <div class="mb-3">
+        <label for="changeReleaseSelect" class="form-label">Select New Release</label>
+        <select
+          id="changeReleaseSelect"
+          class="form-select"
+          [ngModel]="selectedReleaseId()"
+          (ngModelChange)="selectedReleaseId.set($event)"
+          [disabled]="isChangingRelease()"
+        >
+          <option [ngValue]="null">Select Release</option>
+          @for (release of availableReleases(); track release.id) {
+            <option [ngValue]="release.id">{{ release.name }}</option>
+          }
+        </select>
+      </div>
+      <p class="text-muted small">
+        This will move the current resource to the selected release. The resource will keep its properties and
+        relations.
+      </p>
+    }
+  </div>
+  <div class="modal-footer">
+    <app-button [variant]="'secondary'" (click)="modal.dismiss('Cancel click')" [disabled]="isChangingRelease()">
+      Cancel
+    </app-button>
+    <app-button
+      [variant]="'primary'"
+      (click)="modal.close('Change click')"
+      [disabled]="!selectedReleaseId() || isChangingRelease()"
+      ngbAutofocus
+    >
+      Save
+    </app-button>
+  </div>
+</ng-template>