feat(): update ui permissions

Author: develite98

apps/mix-cms/src/app/pages/portal/database/components/database-permission/database-permission.component.html

@@ -0,0 +1,23 @@
+<div class="mt-1 mb-2 notification --info">
+  Type and press enter to input permission key(s):
+</div>
+
+<div class="mb-2">
+  <div class="mb-1 text-500">Read Permission(s)</div>
+  <mix-input-tag></mix-input-tag>
+</div>
+
+<div class="mb-2">
+  <div class="mb-1 text-500">Create Permission(s)</div>
+  <mix-input-tag></mix-input-tag>
+</div>
+
+<div class="mb-2">
+  <div class="mb-1 text-500">Update Permission(s)</div>
+  <mix-input-tag></mix-input-tag>
+</div>
+
+<div class="mb-2">
+  <div class="mb-1 text-500">Delete Permission(s)</div>
+  <mix-input-tag></mix-input-tag>
+</div>

apps/mix-cms/src/app/pages/portal/database/components/database-permission/database-permission.component.scss

@@ -0,0 +1,13 @@
+import { CommonModule } from '@angular/common';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { MixInputTagComponent } from '@mixcore/ui/input-tag';
+
+@Component({
+  selector: 'mix-database-permission',
+  standalone: true,
+  imports: [CommonModule, MixInputTagComponent],
+  templateUrl: './database-permission.component.html',
+  styleUrl: './database-permission.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class DatabasePermissionComponent {}

apps/mix-cms/src/app/pages/portal/database/components/database-permission/database-permission.component.ts

@@ -106,6 +106,20 @@
           <div class="mix-progress-bar-value"></div>
         </div>
         }
+
+        <!-- Permissions -->
+        @defer(when activeTabIndex === 3) {
+        <div
+          class="data-detail-page__main-content"
+          [class.d-none]="activeTabIndex !== 3"
+        >
+          <mix-database-permission></mix-database-permission>
+        </div>
+        } @loading (after 100ms; minimum 1s) {
+        <div class="mix-progress-bar">
+          <div class="mix-progress-bar-value"></div>
+        </div>
+        }
       </div>
     </tui-loader>
   </div>

apps/mix-cms/src/app/pages/portal/database/database-detail/database-detail.component.html

@@ -34,26 +34,28 @@ import { DetailPageKit } from '../../../../shares/kits/page-detail-base-kit.comp
 import { DatabaseStore } from '../../../../stores/database.store';
 import { DatabaseEntityComponent } from '../components/database-entity/database-entity.component';
 import { DatabaseInfoComponent } from '../components/database-info/database-info.component';
+import { DatabasePermissionComponent } from '../components/database-permission/database-permission.component';
 import { DatabaseRelationshipComponent } from '../components/database-relationship/database-relationship.component';
 
 @Component({
   selector: 'mix-database-detail',
   standalone: true,
   imports: [
     CommonModule,
-    MixInputComponent,
+    ReactiveFormsModule,
     TuiTabsModule,
-    MixButtonComponent,
     TuiLoaderModule,
-    ReactiveFormsModule,
+    MixInputComponent,
+    MixButtonComponent,
     MixSelectComponent,
-    EntityFormComponent,
     MixFormErrorComponent,
+    MixInlineInputComponent,
     DatabaseSelectComponent,
+    EntityFormComponent,
     DatabaseRelationshipComponent,
     DatabaseEntityComponent,
     DatabaseInfoComponent,
-    MixInlineInputComponent,
+    DatabasePermissionComponent,
   ],
   templateUrl: './database-detail.component.html',
   styleUrls: ['./database-detail.component.scss'],

apps/mix-cms/src/app/pages/portal/database/database-detail/database-detail.component.ts

@@ -0,0 +1 @@
+export * from './input-tag.component';

libs/mix-ui/src/input-tag/index.ts

@@ -0,0 +1,8 @@
+<tui-input-tag
+  [formControl]="control"
+  [tuiTextfieldLabelOutside]="true"
+  [tuiTextfieldCleaner]="closable"
+  [tuiTextfieldSize]="size"
+>
+  {{ placeHolder }}
+</tui-input-tag>

libs/mix-ui/src/input-tag/input-tag.component.html

@@ -0,0 +1,4 @@
+:host {
+  display: block;
+  width: 100%;
+}

libs/mix-ui/src/input-tag/input-tag.component.scss

@@ -0,0 +1,35 @@
+import { CommonModule } from '@angular/common';
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import {
+  ControlValueAccessor,
+  FormControl,
+  ReactiveFormsModule,
+} from '@angular/forms';
+import { TuiTextfieldControllerModule } from '@taiga-ui/core';
+import { TuiInputTagModule } from '@taiga-ui/kit';
+import { BaseTextControl } from '../base';
+
+@Component({
+  selector: 'mix-input-tag',
+  templateUrl: './input-tag.component.html',
+  styleUrls: ['./input-tag.component.scss'],
+  standalone: true,
+  imports: [
+    CommonModule,
+    TuiInputTagModule,
+    TuiTextfieldControllerModule,
+    ReactiveFormsModule,
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MixInputTagComponent
+  extends BaseTextControl<string[]>
+  implements ControlValueAccessor
+{
+  override defaultValue = [];
+  override defaultControl = new FormControl([]);
+
+  @Input() override placeHolder = 'Type';
+  @Input() size: 'm' | 's' | 'l' = 'm';
+  @Input() closable = true;
+}

libs/mix-ui/src/input-tag/input-tag.component.ts

@@ -0,0 +1,5 @@
+{
+  "lib": {
+    "entryFile": "index.ts"
+  }
+}