Fixed api key permission descriptions

web/src/app/model/entities/api-key.ts

@@ -1,9 +1,10 @@
-import { DbModel } from "src/app/model/entities/db-model";
-import { Permission } from "src/app/model/entities/role";
+import { DbModel } from 'src/app/model/entities/db-model';
+import { Permission } from 'src/app/model/entities/role';
 
 export interface ApiKey extends DbModel {
   identifier?: string;
   key?: string;
+  description?: string;
   permissions?: Permission[];
 }
 

web/src/app/modules/admin/administration/api-keys/api-keys.data.service.ts

@@ -91,14 +91,16 @@ export class ApiKeysDataService
       .query<{ apiKeys: QueryResult<ApiKey> }>({
         query: gql`
           query getApiKey($id: Int) {
-            apiKey(filter: { id: { equal: $id } }) {
-              id
-              identifier
-              permissions {
-                name
-              }
+            apiKeys(filter: { id: { equal: $id } }) {
+              nodes {
+                id
+                identifier
+                permissions {
+                  name
+                }
 
-              ...DB_MODEL
+                ...DB_MODEL
+              }
             }
           }
 

web/src/app/modules/admin/administration/api-keys/form-page/api-key-form-page.component.html

@@ -1,63 +1,65 @@
 <app-form-page
-  *ngIf="node"
-  [formGroup]="form"
-  [isUpdate]="isUpdate"
-  (onSave)="save()"
-  (onClose)="close()">
-  <ng-template formPageHeader let-isUpdate>
-    <h2>
-      {{ 'common.api_key' | translate }}
-      {{
-        (isUpdate ? 'sidebar.header.update' : 'sidebar.header.create')
-          | translate
-      }}
-    </h2>
-  </ng-template>
+        *ngIf="node"
+        [formGroup]="form"
+        [isUpdate]="isUpdate"
+        (onSave)="save()"
+        (onClose)="close()">
+    <ng-template formPageHeader let-isUpdate>
+        <h2>
+            {{ 'common.role' | translate }}
+            {{
+                (isUpdate ? 'sidebar.header.update' : 'sidebar.header.create')
+                    | translate
+            }}
+        </h2>
+    </ng-template>
 
-  <ng-template formPageContent>
-    <div class="form-page-input">
-      <p class="label">{{ 'common.id' | translate }}</p>
-      <input pInputText class="value" type="number" formControlName="id" />
-    </div>
-    <div class="form-page-input">
-      <p class="label">{{ 'common.identifier' | translate }}</p>
-      <input
-        pInputText
-        class="value"
-        type="text"
-        formControlName="identifier" />
-    </div>
-    <div class="divider"></div>
-
-    <div class="flex flex-col gap-5">
-      <div *ngFor="let group of Object.keys(permissionGroups)">
-        <div class="flex flex-col">
-          <div class="flex justify-between">
-            <label class="flex-1" for="apiKeys.permission_groups.{{ group }}">
-              <h3>
-                {{ 'permissions.' + group | translate }}
-              </h3>
-            </label>
-            <form #form="ngForm">
-              <p-inputSwitch
-                name="apiKeys.permission_groups.{{ group }}"
-                (onChange)="toggleGroup($event, group)"
-                [ngModel]="isGroupChecked(group)"></p-inputSwitch>
-            </form>
-          </div>
-
-          <div
-            *ngFor="let permission of permissionGroups[group]"
-            class="flex items-center justify-between w-full">
-            <label class="flex-1" for="{{ permission.name }}">
-              {{ 'permissions.' + permission.name | translate }}
-            </label>
-            <p-inputSwitch [formControlName]="permission.name">
-              >
-            </p-inputSwitch>
-          </div>
+    <ng-template formPageContent>
+        <div class="form-page-input">
+            <p class="label">{{ 'common.id' | translate }}</p>
+            <input pInputText class="value" type="number" formControlName="id"/>
         </div>
-      </div>
-    </div>
-  </ng-template>
+        <div class="form-page-input">
+            <p class="label">{{ 'common.identifier' | translate }}</p>
+            <input pInputText class="value" type="text" formControlName="identifier"/>
+        </div>
+        <div class="divider"></div>
+
+        <div class="flex flex-col gap-5">
+            <div *ngFor="let group of Object.keys(permissionGroups)">
+                <div class="flex flex-col gap-2">
+                    <div class="flex justify-between">
+                        <label class="flex-1" for="roles.permission_groups.{{ group }}">
+                            <h3>
+                                {{ 'permissions.' + group | translate }}
+                            </h3>
+                        </label>
+                        <form #form="ngForm">
+                            <p-inputSwitch
+                                    name="roles.permission_groups.{{ group }}"
+                                    (onChange)="toggleGroup($event, group)"
+                                    [ngModel]="isGroupChecked(group)"></p-inputSwitch>
+                        </form>
+                    </div>
+
+                    <div
+                            *ngFor="let permission of permissionGroups[group]"
+                            class="flex flex-col">
+                        <div class="flex items-center justify-between w-full">
+                            <label class="flex-1" for="{{ permission.name }}">
+                                {{ 'permissions.' + permission.name | translate }}
+                            </label>
+                            <p-inputSwitch class="flex items-center justify-center" [formControlName]="permission.name">
+                            </p-inputSwitch>
+                        </div>
+                        <div *ngIf="permission.description">
+                            <p class="text-sm text-gray-500">
+                                {{ permission.description }}
+                            </p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </ng-template>
 </app-form-page>

web/src/app/modules/admin/administration/api-keys/form-page/api-key-form-page.component.ts

@@ -11,6 +11,7 @@ import {
   ApiKeyUpdateInput,
 } from 'src/app/model/entities/api-key';
 import { ApiKeysDataService } from 'src/app/modules/admin/administration/api-keys/api-keys.data.service';
+import { TranslateService } from '@ngx-translate/core';
 
 @Component({
   selector: 'app-api-key-form-page',
@@ -26,7 +27,10 @@ export class ApiKeyFormPageComponent extends FormPageBase<
   permissionGroups: { [key: string]: Permission[] } = {};
   allPermissions: Permission[] = [];
 
-  constructor(private toast: ToastService) {
+  constructor(
+    private toast: ToastService,
+    private translate: TranslateService
+  ) {
     super();
     this.initializePermissions().then(() => {
       if (!this.nodeId) {
@@ -36,12 +40,10 @@ export class ApiKeyFormPageComponent extends FormPageBase<
         return;
       }
 
-      this.dataService
-        .load([{ id: { equal: this.nodeId } }])
-        .subscribe(apiKey => {
-          this.node = apiKey.nodes[0];
-          this.setForm(this.node);
-        });
+      this.dataService.loadById(this.nodeId).subscribe(apiKey => {
+        this.node = apiKey;
+        this.setForm(this.node);
+      });
     });
   }
 
@@ -49,7 +51,12 @@ export class ApiKeyFormPageComponent extends FormPageBase<
     const permissions = await firstValueFrom(
       this.dataService.getAllPermissions()
     );
-    this.allPermissions = permissions;
+    this.allPermissions = permissions.map(x => {
+      const key = `permission_descriptions.${x.name}`;
+      const description = this.translate.instant(key);
+      x.description = description === key ? undefined : description;
+      return x;
+    });
     this.permissionGroups = permissions.reduce(
       (acc, p) => {
         const group = p.name.includes('.') ? p.name.split('.')[0] : p.name;

web/src/assets/i18n/de.json

@@ -101,6 +101,10 @@
     "ip_list.create": "Erstellen",
     "ip_list.delete": "Löschen",
     "ip_list.update": "Bearbeiten",
+    "news": "Nachrichten",
+    "news.create": "Erstellen",
+    "news.delete": "Löschen",
+    "news.update": "Bearbeiten",
     "roles": "Rollen",
     "roles.create": "Erstellen",
     "roles.delete": "Löschen",

web/src/assets/i18n/en.json

@@ -101,6 +101,10 @@
     "ip_list.create": "Create",
     "ip_list.delete": "Delete",
     "ip_list.update": "Update",
+    "news": "News",
+    "news.create": "Create",
+    "news.delete": "Delete",
+    "news.update": "Update",
     "roles": "Roles",
     "roles.create": "Create",
     "roles.delete": "Delete",