refactor: snippet edit modal

src/app/app.module.ts

@@ -1,7 +1,10 @@
 import {
   ButtonComponent,
+  ChipComponent,
   IconComponent,
   InputDirective,
+  MenuComponent as AnglifyMenuComponent,
+  SelectComponent,
   SlotDirective,
   TextAreaComponent,
   TextFieldComponent,
@@ -205,6 +208,9 @@ export function apiConfigFactory(): Configuration {
     TextAreaComponent,
     SlotDirective,
     TooltipDirective,
+    SelectComponent,
+    AnglifyMenuComponent,
+    ChipComponent,
   ],
   providers: [
     {

src/app/modals/snippet-modal/snippet-modal.component.html

@@ -1,10 +1,9 @@
 <div class="modal-header">
   <h4 class="modal-title" *ngIf="!snippet">Add snippet</h4>
   <h4 class="modal-title" *ngIf="snippet">Edit snippet</h4>
-
-  <div class="close" aria-label="Close" (click)="closeAction('Cross click')">
-    <span aria-hidden="true">&times;</span>
-  </div>
+  <button anglifyButton appearance="icon" aria-label="Close" (click)="closeAction('Cross click')">
+    <anglify-icon icon="mdi-close" size="small"></anglify-icon>
+  </button>
 </div>
 <div class="modal-body">
   <form [formGroup]="snippetForm">
@@ -13,33 +12,35 @@ <h4 class="modal-title" *ngIf="snippet">Edit snippet</h4>
         <input anglifyInput name="title" formControlName="title" />
       </anglify-text-field>
 
-      <ng-container *ngIf="labels?.length">
-        <span>Labels</span>
-        <ng-select
-          style="padding-bottom: 10px"
-          bindLabel="name"
-          bindValue="pk"
-          [items]="labels"
+      <ng-container *ngIf="labels$ | async as labels">
+        <anglify-select
           [multiple]="true"
+          label="Labels"
+          appearance="outlined"
+          [items]="labels"
+          itemTextKey="name"
+          itemValueKey="pk"
           formControlName="labels"
-          *ngIf="scope && (scope.area === 'team' || scope.area === 'user')"
-          [errors]="snippetForm.get('snippetRequest.labels').errors"
+          [clearable]="true"
         >
-        </ng-select>
+          <ng-template slot="selection" let-context>
+            <anglify-chip *ngFor="let item of context.selectedItems">{{ item.name }}</anglify-chip>
+          </ng-template>
+        </anglify-select>
       </ng-container>
 
       <anglify-text-area label="Description" appearance="outlined">
         <textarea anglifyInput name="description" formControlName="description"></textarea>
       </anglify-text-area>
 
-      <span>Visibility</span>
-      <ng-select
-        style="padding-bottom: 10px"
-        bindLabel="name"
-        bindValue="key"
+      <anglify-select
+        label="Visibility"
+        appearance="outlined"
         [items]="visibilities"
+        itemTextKey="name"
+        itemValueKey="key"
         formControlName="visibility"
-      ></ng-select>
+      ></anglify-select>
 
       <div
         *ngFor="let file of snippetForm.get('snippetRequest.files')['controls']; let i = index"
@@ -52,27 +53,29 @@ <h4 class="modal-title" *ngIf="snippet">Edit snippet</h4>
               <div class="row">
                 <div class="col-4">
                   <div class="form-group" style="margin: 0.75rem">
-                    <input
-                      formControlName="name"
-                      type="text"
-                      class="form-control"
-                      [id]="'input-title-' + i"
-                      aria-describedby="Name"
-                      placeholder="Name"
-                    />
+                    <anglify-text-field appearance="outlined">
+                      <input anglifyInput formControlName="name" [id]="'input-title-' + i" />
+                    </anglify-text-field>
                   </div>
                 </div>
                 <div class="col-4">
                   <div class="form-group" style="margin: 0.75rem">
-                    <ng-select formControlName="language" [items]="languages" bindLabel="name" bindValue="pk" [clearable]="false">
-                    </ng-select>
+                    <ng-container *ngIf="languages$ | async as languages"
+                      ><anglify-select
+                        appearance="outlined"
+                        [items]="languages"
+                        itemTextKey="name"
+                        itemValueKey="pk"
+                        formControlName="language"
+                      ></anglify-select
+                    ></ng-container>
                   </div>
                 </div>
                 <div class="col-4 text-end">
                   <div class="form-group" style="margin: 0.75rem">
-                    <span class="btn btn-link text-danger" (click)="removeFile(i)">
-                      <fa-icon class="float-end" icon="trash"></fa-icon>
-                    </span>
+                    <button anglifyButton appearance="icon" aria-label="Close" (click)="removeFile(i)">
+                      <anglify-icon icon="mdi-delete" size="small"></anglify-icon>
+                    </button>
                   </div>
                 </div>
               </div>
@@ -94,13 +97,13 @@ <h4 class="modal-title" *ngIf="snippet">Edit snippet</h4>
       </div>
 
       <div style="margin-top: 0.75rem">
-        <span class="btn btn-success" (click)="addFile()">Add code</span>
+        <button anglifyButton appearance="text" (click)="addFile()">Add code</button>
       </div>
     </ng-container>
   </form>
 </div>
 <div class="modal-footer">
-  <button type="button" class="btn btn-outline-dark" (click)="closeAction('Cancel click')">Cancel</button>
-  <button type="button" class="btn btn-primary btn-outline-dark" (click)="confirmAction(false)">Save</button>
-  <button type="button" class="btn btn-primary btn-outline-dark" (click)="confirmAction(true)">Save & Close</button>
+  <button anglifyButton appearance="text" (click)="closeAction('Cancel click')">Cancel</button>
+  <button anglifyButton (click)="confirmAction(false)">Save</button>
+  <button anglifyButton (click)="confirmAction(true)">Save & Close</button>
 </div>

src/app/modals/snippet-modal/snippet-modal.component.scss

@@ -1,7 +1,7 @@
 anx-forms-input-textarea {
-    ::ng-deep {
-        textarea {
-            height: 150px;
-        }
+  ::ng-deep {
+    textarea {
+      height: 150px;
     }
-}
+  }
+}

src/app/modals/snippet-modal/snippet-modal.component.ts

@@ -4,12 +4,11 @@ import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { SelectSnapshot } from '@ngxs-labs/select-snapshot';
 import { Select, Store } from '@ngxs/store';
-import { Team } from '@snypy/rest-client';
+import { Label, Language, Snippet, SnippetService, Team } from '@snypy/rest-client';
 import { ToastrService } from 'ngx-toastr';
 import { firstValueFrom, Observable } from 'rxjs';
 import { filter, map, take } from 'rxjs/operators';
-import { Label } from '@snypy/rest-client';
-import { Language, Snippet, SnippetService } from '@snypy/rest-client';
+import { mapFormErrors } from '../../helpers/form-error-mapper';
 import { UpdateLabels } from '../../state/label/label.actions';
 import { LabelState } from '../../state/label/label.state';
 import { UpdateLanguages } from '../../state/language/language.actions';
@@ -18,7 +17,6 @@ import { ScopeModel } from '../../state/scope/scope.model';
 import { ScopeState } from '../../state/scope/scope.state';
 import { SetActiveSnippet } from '../../state/snippet/snippet.actions';
 import { SnippetState } from '../../state/snippet/snippet.state';
-import { mapFormErrors } from '../../helpers/form-error-mapper';
 
 @UntilDestroy()
 @Component({
@@ -41,6 +39,10 @@ export class SnippetModalComponent implements OnInit {
   @SelectSnapshot(LabelState)
   public labels: Label[];
 
+  @Select(LabelState) public readonly labels$!: Observable<Label[]>;
+
+  @Select(LanguageState) public readonly languages$!: Observable<Language[]>;
+
   @Select(SnippetState.getFilter) private readonly filter$!: Observable<Record<string, unknown>>;
 
   private readonly activeLabel$ = this.filter$.pipe(

src/styles.scss

@@ -21,4 +21,8 @@
   .modal-content {
     border-radius: 0px;
   }
+
+  anglify-legacy-menu .dropdown-menu {
+    display: block;
+  }
 }