feat: add remove button zombie keys

romanrostislavovich · Feb 2, 2021 · 1b57b47 · 1b57b47
1 parent 8d2ea3f
commit 1b57b47
Show file tree

Hide file tree

Showing 5 changed files with 76 additions and 27 deletions.
diff --git a/src/app/modules/project/project-create-key-dialog/project-create-key-dialog.component.scss b/src/app/modules/project/project-create-key-dialog/project-create-key-dialog.component.scss
@@ -0,0 +1,3 @@
+.project-create-dialog_form-field {
+  width: 100%;
+}
diff --git a/src/app/modules/project/project-item/project-item.component.html b/src/app/modules/project/project-item/project-item.component.html
@@ -51,8 +51,9 @@
                       <span class="project-item-content_key-name">{{ key.name }}</span>
                       <mat-icon color="warn" class="project-item-content_key-icon" (click)="removeKeyAction(key)">delete</mat-icon>
                     </div>
+
                     <div *ngFor="let lang of key.languages; index as i">
-                      <mat-form-field class="project-item-content_key-input">
+                      <mat-form-field class="project-item-content_key-input" appearance="outline">
                         <mat-label>{{ lang.name }}</mat-label>
                         <input matInput formControlName="{{ i + key.name}}">
                       </mat-form-field>
@@ -61,16 +62,21 @@
                 </div>
               </div>
 
-            <mat-card class="project-item-footer" *ngIf="project.lintResult.errors.length !== 0">
-              <div *ngFor="let error of project.lintResult.errors" class="project-item-footer_error">
-                <mat-icon *ngIf="error.errorType === 'error'" color="warn">error</mat-icon>
-                <mat-icon *ngIf="error.errorType === 'warning'" color="primary">warning</mat-icon>
-                <span *ngIf="error.errorFlow === 'views'"  class="project-item-footer_error-text">Missed key: </span>
-                <span *ngIf="error.errorFlow === 'zombie'" class="project-item-footer_error-text">Zombie key: </span>
-                <span *ngIf="error.errorFlow === 'misprint'" class="project-item-footer_error-text">Misprint key: </span>
-                <span class="project-item-footer_error-key">{{ error.value }}</span>
-              </div>
-            </mat-card>
+              <mat-card class="project-item-footer" *ngIf="project.lintResult.errors.length !== 0">
+                <div *ngFor="let error of project.lintResult.errors" class="project-item-footer_error">
+                  <button mat-icon-button color="primary" class="project-item-footer_error-button" *ngIf="error.errorFlow === 'views'" (click)="createKeyByNameAction(error.value)">
+                    <mat-icon>vpn_key</mat-icon>
+                  </button>
+                  <button mat-icon-button color="accent"  class="project-item-footer_error-button" *ngIf="error.errorFlow === 'zombie'" (click)="removeKeyByNameAction(error.value)">
+                    <mat-icon>delete</mat-icon>
+                  </button>
+
+                  <span *ngIf="error.errorFlow === 'views'"  class="project-item-footer_error-text">Missed key: </span>
+                  <span *ngIf="error.errorFlow === 'zombie'" class="project-item-footer_error-text">Zombie key: </span>
+                  <span *ngIf="error.errorFlow === 'misprint'" class="project-item-footer_error-text">Misprint key: </span>
+                  <span class="project-item-footer_error-key">{{ error.value }}</span>
+                </div>
+              </mat-card>
 
           </div>
         </form>

diff --git a/src/app/modules/project/project-item/project-item.component.scss b/src/app/modules/project/project-item/project-item.component.scss
@@ -1,7 +1,12 @@
 .project-item {
+  height: 100%;
   &_flex {
     display: flex;
   }
+  &-container {
+    height: 100%;
+  }
+
   &-sidenav-content_settings {
     background: #fff;
     color: gray;
@@ -86,14 +91,24 @@
     max-width: 500px;
 
     &_error {
-      line-height: 30px;
+      line-height: 40px;
       display: flex;
       word-break: break-all;
+      min-height: 40px;
+      margin: 10px 0;
     }
 
     &_error-text {
       padding: 0 10px;
       width: 100px;
+      min-width: 100px;
+    }
+
+    &_error-button {
+      margin: 0 10px;
+      border: 1px solid;
+      width: 40px !important;
+      height: 40px !important;
     }
 
     &_error-key {

diff --git a/src/app/modules/project/project-item/project-item.component.ts b/src/app/modules/project/project-item/project-item.component.ts
@@ -56,6 +56,8 @@ export class ProjectItemComponent implements OnInit {
 
   public removeKeyAction(key: KeyModelWithLanguages): void {
     this.projectKeys = this.project.keysModel.filter(x => x.name !== key.name);
+    this.saveProject();
+    this.updateProject();
   }
 
   public saveProjectLintingSettingsAction($event: ProjectMainSettingModel): void {
@@ -67,22 +69,20 @@ export class ProjectItemComponent implements OnInit {
     this.removeProjectEmitter.emit(this.project);
   }
 
+  public removeKeyByNameAction(key: string): void {
+    this.projectKeys = this.project.keysModel.filter(x => x.name !== key);
+    this.saveProject();
+    this.updateProject();
+  }
+
+  public createKeyByNameAction(key: string): void {
+    const keyModel = new KeyModelWithLanguages(key, this.getProjectLanguages());
+    this.createNewKeyDialog(keyModel);
+  }
+
   public openAddNewKeyDialogAction(): void {
     const keyModel = new KeyModelWithLanguages("", this.getProjectLanguages());
-    const dialogRef = this.dialog.open(ProjectCreateKeyDialogComponent, {
-      width: '550px',
-      data: keyModel
-    });
-
-    dialogRef.afterClosed().subscribe((result: KeyModelWithLanguages) => {
-      if (result && result.name) {
-        const keyModel = new KeyModelWithLanguages(result.name, this.getProjectLanguages());
-        this.projectKeys.unshift(keyModel);
-        keyModel.languages.forEach((lang, index) => {
-          this.projectItemKeysForm.addControl(index + result.name, new FormControl(lang.keyValue || ""));
-        });
-      }
-    });
+    this.createNewKeyDialog(keyModel);
   }
 
   public refreshProjectAction(): void {
@@ -96,9 +96,30 @@ export class ProjectItemComponent implements OnInit {
   }
 
   public saveProjectAction(): void {
+    this.saveProject();
+    this.updateProject();
+  }
+
+  private saveProject(): void {
     this.project.keysModel = this.projectKeys;
     this.fileService.saveFiles(this.project);
-    this.updateProject();
+  }
+
+  private createNewKeyDialog(keyModel: KeyModelWithLanguages): void {
+    const dialogRef = this.dialog.open(ProjectCreateKeyDialogComponent, {
+      width: '550px',
+      data: keyModel
+    });
+
+    dialogRef.afterClosed().subscribe((result: KeyModelWithLanguages) => {
+      if (result && result.name) {
+        const keyModel = new KeyModelWithLanguages(result.name, this.getProjectLanguages());
+        this.projectKeys.unshift(keyModel);
+        keyModel.languages.forEach((lang, index) => {
+          this.projectItemKeysForm.addControl(index + result.name, new FormControl(lang.keyValue || ""));
+        });
+      }
+    });
   }
 
   private updateProject(): void {

diff --git a/src/styles.scss b/src/styles.scss
@@ -5,3 +5,7 @@ html, body {
 
   height: 100%;
 }
+
+.mat-tab-body-wrapper {
+  height: 100% !important;
+}