refactor: snippet edit modal

snypy · Mar 10, 2023 · 5e270cd · 5e270cd
1 parent e31c68b
commit 5e270cd
Show file tree

Hide file tree

Showing 5 changed files with 80 additions and 28 deletions.
diff --git a/src/app/app.module.ts b/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: [
     {

diff --git a/src/app/modals/snippet-modal/snippet-modal.component.html b/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,7 +12,7 @@ <h4 class="modal-title" *ngIf="snippet">Edit snippet</h4>
         <input anglifyInput name="title" formControlName="title" />
       </anglify-text-field>
 
-      <ng-container *ngIf="labels?.length">
+      <!-- <ng-container *ngIf="labels?.length">
         <span>Labels</span>
         <ng-select
           style="padding-bottom: 10px"
@@ -26,20 +25,46 @@ <h4 class="modal-title" *ngIf="snippet">Edit snippet</h4>
           [errors]="snippetForm.get('snippetRequest.labels').errors"
         >
         </ng-select>
+      </ng-container> -->
+
+      <ng-container *ngIf="labels$ | async as labels">
+        <anglify-select
+          [multiple]="true"
+          label="Labels"
+          appearance="outlined"
+          [items]="labels"
+          itemTextKey="name"
+          itemValueKey="pk"
+          formControlName="labels"
+          [clearable]="true"
+        >
+          <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"
         [items]="visibilities"
         formControlName="visibility"
-      ></ng-select>
+      ></ng-select> -->
+
+      <anglify-select
+        label="Visibility"
+        appearance="outlined"
+        [items]="visibilities"
+        itemTextKey="name"
+        itemValueKey="key"
+        formControlName="visibility"
+      ></anglify-select>
 
       <div
         *ngFor="let file of snippetForm.get('snippetRequest.files')['controls']; let i = index"
@@ -52,37 +77,52 @@ <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
+                    <!-- <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-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)">
+                    <!-- <span class="btn btn-link text-danger" (click)="removeFile(i)">
                       <fa-icon class="float-end" icon="trash"></fa-icon>
-                    </span>
+                    </span> -->
+                    <button anglifyButton appearance="icon" aria-label="Close" (click)="removeFile(i)">
+                      <anglify-icon icon="mdi-delete" size="small"></anglify-icon>
+                    </button>
                   </div>
                 </div>
               </div>
             </div>
-            <div *ngIf="(languages | filterBy : ['pk'] : file.get('language').value : [true]).length">
+            <div *ngIf="(languages | filterBy: ['pk']:file.get('language').value:[true]).length">
               <ngx-monaco-editor
                 style="height: 400px"
                 [options]="{
                   theme: 'vs-dark',
-                  language: (languages | filterBy : ['pk'] : file.get('language').value : [true])[0].name,
+                  language: (languages | filterBy: ['pk']:file.get('language').value:[true])[0].name,
                   scrollBeyondLastLine: false,
                   scrollbar: { alwaysConsumeMouseWheel: false }
                 }"
@@ -94,13 +134,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>
diff --git a/src/app/modals/snippet-modal/snippet-modal.component.scss b/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;
     }
-}
+  }
+}
diff --git a/src/app/modals/snippet-modal/snippet-modal.component.ts b/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(

diff --git a/src/styles.scss b/src/styles.scss
@@ -21,4 +21,8 @@
   .modal-content {
     border-radius: 0px;
   }
+
+  anglify-legacy-menu .dropdown-menu {
+    display: block;
+  }
 }