feat - add "cancel" to bookmarks & snippets update forms

Author: 4drianMatei

docker-compose.yml

@@ -23,7 +23,7 @@ services:
       POSTGRES_PASSWORD: password
   keycloak:
     container_name: codever-keycloak
-    image: jboss/keycloak:6.0.1
+    image: jboss/keycloak:7.0.0
     networks:
       - backend
     environment:

frontend/src/app/my-bookmarks/save-bookmark-form/save-bookmark-form.component.html

@@ -173,6 +173,9 @@
     <button type="submit" class="btn btn-primary" [disabled]="!bookmarkForm.valid || personalBookmarkPresent">
       Save bookmark
     </button>
+    <button type="button" class="btn btn-secondary ml-2" (click)="cancelUpdate()">
+      Cancel <i class="far fa-times-circle"></i>
+    </button>
   </form>
 </div>
 

frontend/src/app/my-bookmarks/save-bookmark-form/save-bookmark-form.component.ts

@@ -35,6 +35,7 @@ import { textSizeValidator } from '../../core/validators/text-size.validator';
 import { StackoverflowHelper } from '../../core/helper/stackoverflow.helper';
 import { UserDataPinnedStore } from '../../core/user/userdata.pinned.store';
 import { MatChipInputEvent } from '@angular/material/chips';
+import { Location } from '@angular/common';
 import { MatAutocompleteActivatedEvent, MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
 import iziToast, { IziToastSettings } from 'izitoast';
 
@@ -118,6 +119,7 @@ export class SaveBookmarkFormComponent implements OnInit {
     private userDataPinnedStore: UserDataPinnedStore,
     private stackoverflowHelper: StackoverflowHelper,
     private datePipe: DatePipe,
+    private _location: Location,
     private logger: Logger,
     private router: Router,
     private route: ActivatedRoute,
@@ -584,6 +586,11 @@ export class SaveBookmarkFormComponent implements OnInit {
     const link = [`./my-bookmarks/${this.existingPersonalBookmark._id}/edit`];
     this.router.navigate(link, {state: {bookmark: this.existingPersonalBookmark}});
   }
+
+  cancelUpdate() {
+    this._location.back();
+    console.log('goBAck()...');
+  }
 }
 
 

frontend/src/app/my-snippets/create-snippet-form/create-snippet-form.component.html

@@ -59,8 +59,9 @@
         <div class="form-group mb-0">
           <div class="form-group">
             <label for="comment-{{i}}">Comment before (optional) - <i class="fab fa-markdown"></i> <a
-              class="markdown-link" href="https://daringfireball.net/projects/markdown/" target="_blank">Markdown is
-              supported</a></label>
+              class="markdown-link" href="https://daringfireball.net/projects/markdown/" target="_blank">Markdown
+              support
+            </a></label>
             <textarea class="form-control"
                       style="height: 5rem"
                       id="comment-{{i}}"
@@ -83,8 +84,8 @@
           </div>
           <div class="form-group">
             <label for="commentAfter-{{i}}">Comment after (optional) - <i class="fab fa-markdown"></i> <a
-              class="markdown-link" href="https://daringfireball.net/projects/markdown/" target="_blank">Markdown is
-              supported</a></label>
+              class="markdown-link" href="https://daringfireball.net/projects/markdown/" target="_blank">Markdown
+              support</a></label>
             <textarea class="form-control"
                       style="height: 5rem"
                       id="commentAfter-{{i}}"

frontend/src/app/my-snippets/update-snippet-form/update-snippet-form.component.html

@@ -58,8 +58,8 @@
         <div class="form-group mb-0">
           <div class="form-group">
             <label for="comment-{{i}}">Comment before (optional)- <i class="fab fa-markdown"></i> <a
-              class="markdown-link" href="https://daringfireball.net/projects/markdown/" target="_blank">Markdown is
-              supported</a></label>
+              class="markdown-link" href="https://daringfireball.net/projects/markdown/" target="_blank">Markdown
+              support</a></label>
             <textarea class="form-control"
                       style="height: 5rem"
                       id="comment-{{i}}"
@@ -116,7 +116,7 @@
                 title="Remove code section"
                 [disabled]="codeSnippetsFormArray.controls.length < 2"
                 (click)="removeCodeSnippet(i)">
-          <i class="far fa-trash-alt"></i> Remove
+          <i class="far fa-trash-alt"></i> Remove code section
         </button>
       </div>
 
@@ -157,8 +157,11 @@
         </ng-template>
       </button>
     </ng-template>
-    <button type="button" class="btn btn-danger" (click)="openDeleteDialog()">
-      Delete <i class="far fa-trash-alt"></i>
+    <button type="button" class="btn btn-secondary" title="Cancel update" (click)="cancelUpdate()">
+      Cancel <i class="far fa-times-circle"></i>
+    </button>
+    <button type="button" class="btn btn-danger float-right" title="Delete snippet" (click)="openDeleteDialog()">
+      Delete <i class="fas fa-trash-alt"></i>
     </button>
   </form>
 </div>

frontend/src/app/my-snippets/update-snippet-form/update-snippet-form.component.ts

@@ -12,6 +12,7 @@ import { DeleteSnippetDialogComponent } from '../delete-snippet-dialog/delete-sn
 import { MatDialog, MatDialogConfig } from '@angular/material/dialog';
 import { PublicSnippetsService } from '../../public/snippets/public-snippets.service';
 import { SnippetFormBaseComponent } from '../snippet-form-base/snippet-form.base.component';
+import { Location } from '@angular/common';
 
 @Component({
   selector: 'app-update-snippet-form',
@@ -46,7 +47,8 @@ export class UpdateSnippetFormComponent extends SnippetFormBaseComponent impleme
     protected router: Router,
     private route: ActivatedRoute,
     protected errorService: ErrorService,
-    private deleteDialog: MatDialog
+    private deleteDialog: MatDialog,
+    private _location: Location
   ) {
     super(formBuilder, personalSnippetsService, suggestedTagsStore, userInfoStore, router, errorService);
   }
@@ -149,6 +151,10 @@ export class UpdateSnippetFormComponent extends SnippetFormBaseComponent impleme
     });
   }
 
+  cancelUpdate() {
+    this._location.back();
+    console.log('goBAck()...');
+  }
 }
 
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "Codever",
-  "version": "4.10.2",
+  "version": "5.1.0",
   "description": "Codever - bookmarks and snippets manager for developers & co",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",