Format all files with prettier

.eslintrc.json

@@ -1,21 +1,14 @@
 {
   "root": true,
-  "ignorePatterns": [
-    "projects/**/*"
-  ],
+  "ignorePatterns": ["projects/**/*"],
   "env": {
     "es6": true
   },
   "overrides": [
     {
-      "files": [
-        "*.ts"
-      ],
+      "files": ["*.ts"],
       "parserOptions": {
-        "project": [
-          "tsconfig.json",
-          "e2e/tsconfig.json"
-        ],
+        "project": ["tsconfig.json", "e2e/tsconfig.json"],
         "createDefaultProgram": true
       },
       "extends": [
@@ -74,14 +67,8 @@
             }
           }
         ],
-        "@typescript-eslint/semi": [
-          "off",
-          null
-        ],
-        "brace-style": [
-          "error",
-          "1tbs"
-        ],
+        "@typescript-eslint/semi": ["off", null],
+        "brace-style": ["error", "1tbs"],
         "id-blacklist": "off",
         "id-match": "off",
         "max-len": [
@@ -96,12 +83,8 @@
       }
     },
     {
-      "files": [
-        "*.html"
-      ],
-      "extends": [
-        "plugin:@angular-eslint/template/recommended"
-      ],
+      "files": ["*.html"],
+      "extends": ["plugin:@angular-eslint/template/recommended"],
       "rules": {}
     }
   ]

.github/pull_request_template.md

@@ -7,4 +7,5 @@
 ### Fixed
 
 ---
+
 Ticket:

.prettierrc

@@ -1,3 +1,3 @@
 {
   "singleQuote": true
-}
+}

angular.json

@@ -17,20 +17,15 @@
             "main": "src/main.ts",
             "tsConfig": "src/tsconfig.app.json",
             "polyfills": "src/polyfills.ts",
-            "assets": [
-              "src/assets",
-              "src/favicon.ico"
-            ],
-            "styles": [
-              "src/styles/style.scss"
-            ],
+            "assets": ["src/assets", "src/favicon.ico"],
+            "styles": ["src/styles/style.scss"],
             "scripts": [],
             "allowedCommonJsDependencies": [
               "lodash",
               "urijs",
               "rxjs/Subject",
               "ng2-dragula"
-           ]
+            ]
           },
           "configurations": {
             "production": {
@@ -102,10 +97,7 @@
         "lint": {
           "builder": "@angular-eslint/builder:lint",
           "options": {
-            "lintFilePatterns": [
-              "src/**/*.ts",
-              "src/**/*.html"
-            ]
+            "lintFilePatterns": ["src/**/*.ts", "src/**/*.html"]
           }
         }
       }
@@ -125,12 +117,8 @@
         "lint": {
           "builder": "@angular-devkit/build-angular:tslint",
           "options": {
-            "tsConfig": [
-              "e2e/tsconfig.e2e.json"
-            ],
-            "exclude": [
-              "**/node_modules/**/*"
-            ]
+            "tsConfig": ["e2e/tsconfig.e2e.json"],
+            "exclude": ["**/node_modules/**/*"]
           }
         }
       }

docs/adding-widgets.md

@@ -7,24 +7,29 @@ In the application widget builder, users can choose from a variety of widget typ
 - An icon
 
 These elements are tied together by registering the widget in the widgetTypeRegistry.
- 
+
 ## Widget class
- The widget class must at least implement the `Widget` (core/widget/widgets/widget.ts) interface. If no custom implementation of the widget is needed, extending the abstract `AbstractWidget` class is the easy way to go forward.
-
+
+The widget class must at least implement the `Widget` (core/widget/widgets/widget.ts) interface. If no custom implementation of the widget is needed, extending the abstract `AbstractWidget` class is the easy way to go forward.
+
 ## Widget edit component
- Every widget needs an edit form component. This can be easily done by creating an new Angular component in the `widget-builder/components/widgets` directory and extending the `AbstractWidgetEditDirective` component class.
- This component should provide the form via the Angular form builder in the buildForm method. By overriding the applyValuesToModel method, you gain control over how the form changes are applied back to the (widget) model.
+
+Every widget needs an edit form component. This can be easily done by creating an new Angular component in the `widget-builder/components/widgets` directory and extending the `AbstractWidgetEditDirective` component class.
+This component should provide the form via the Angular form builder in the buildForm method. By overriding the applyValuesToModel method, you gain control over how the form changes are applied back to the (widget) model.
 
 ## Icon
- An icon should be placed in the `assets/widgets` folder and named in the following pattern: [widget-type]-widget.svg`
+
+An icon should be placed in the `assets/widgets` folder and named in the following pattern: [widget-type]-widget.svg`
 
 ## Registering the widget
- All the above elements are tied together in the application by registering the new widget type in the `WidgetTypeRegistry` in the AppModule constructor.
-
- When registering the widget type, provide the following parameters:
- - type
- - label
- - widget class
- - widget edit component
-
- `widgetTypeRegistry.register('search-form', 'Search form', SearchFormWidget, SearchFormWidgetEditComponent);`
+
+All the above elements are tied together in the application by registering the new widget type in the `WidgetTypeRegistry` in the AppModule constructor.
+
+When registering the widget type, provide the following parameters:
+
+- type
+- label
+- widget class
+- widget edit component
+
+`widgetTypeRegistry.register('search-form', 'Search form', SearchFormWidget, SearchFormWidgetEditComponent);`

package.json

@@ -6,6 +6,7 @@
     "ng": "ng",
     "start": "ng serve",
     "build": "ng build",
+    "format": "prettier . --write --ignore-path .gitignore",
     "lint": "eslint . --fix --ignore-path .gitignore --quiet"
   },
   "private": true,

src/app/app-routing.module.ts

@@ -9,13 +9,13 @@ const routes: Routes = [
     component: ProjectNoAccessComponent,
   },
   {
-      path: '**',
-      component: PageNotFoundComponent
-  }
+    path: '**',
+    component: PageNotFoundComponent,
+  },
 ];
 
 @NgModule({
   imports: [RouterModule.forRoot(routes, { relativeLinkResolution: 'legacy' })],
-  exports: [RouterModule]
+  exports: [RouterModule],
 })
-export class AppRoutingModule { }
+export class AppRoutingModule {}

src/app/app.component.html

@@ -3,15 +3,15 @@
 
 <!-- Confirmation modal !-->
 <ng-template confirmation>
-    <app-confirmation-modal></app-confirmation-modal>
+  <app-confirmation-modal></app-confirmation-modal>
 </ng-template>
 
 <app-topbar></app-topbar>
 
 <div class="widget-loader" *ngIf="loading">
-    <div class="widget-loader--wrapper">
-        <div class="widget-loader--block"></div>
-    </div>
+  <div class="widget-loader--wrapper">
+    <div class="widget-loader--block"></div>
+  </div>
 </div>
 
 <router-outlet></router-outlet>

src/app/app.component.ts

@@ -1,6 +1,12 @@
 import { Component, OnInit } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
-import { NavigationCancel, NavigationEnd, NavigationError, NavigationStart, Router } from '@angular/router';
+import {
+  NavigationCancel,
+  NavigationEnd,
+  NavigationError,
+  NavigationStart,
+  Router,
+} from '@angular/router';
 import { TopbarService } from './core/topbar/services/topbar.service';
 import { environment } from '../environments/environment';
 
@@ -9,17 +15,20 @@ import { environment } from '../environments/environment';
   templateUrl: './app.component.html',
 })
 export class AppComponent implements OnInit {
-
   // Sets initial value to true to show loading spinner on first load
-  loading = true
+  loading = true;
 
   /**
    * AppComponent constructor
    * @param {TranslateService} translate
    * @param router
    * @param topbarService
    */
-  constructor(private translate: TranslateService, private router: Router, private topbarService: TopbarService) {
+  constructor(
+    private translate: TranslateService,
+    private router: Router,
+    private topbarService: TopbarService
+  ) {
     // Set fallback language + current language to nl.
     translate.setDefaultLang('nl');
     translate.use('nl');
@@ -29,8 +38,11 @@ export class AppComponent implements OnInit {
    * @inheritDoc
    */
   public ngOnInit() {
-
-    document.querySelector('head').innerHTML += '<link rel="stylesheet" href="' + environment.apiUrl + 'assets/css/cn_widget_styling.css' + '" type="text/css"/>';
+    document.querySelector('head').innerHTML +=
+      '<link rel="stylesheet" href="' +
+      environment.apiUrl +
+      'assets/css/cn_widget_styling.css' +
+      '" type="text/css"/>';
 
     this.router.events.subscribe((event) => {
       this.interceptNavigation(event);
@@ -42,25 +54,23 @@ export class AppComponent implements OnInit {
    * @param event
    */
   private interceptNavigation(event) {
-
     // Show loading state when a navigation event is starting.
     if (event instanceof NavigationStart) {
-      this.loading = true
+      this.loading = true;
     }
 
     // Set loading state to false in both of the below events to hide the spinner in case a request fails
     if (event instanceof NavigationCancel) {
-      this.loading = false
+      this.loading = false;
     }
     if (event instanceof NavigationError) {
-      this.loading = false
+      this.loading = false;
     }
 
     // Clear all topbar dynamic components on navigation end, so the loaded component can add its own
     if (event instanceof NavigationEnd) {
       this.topbarService.clearComponents();
-      this.loading = false
+      this.loading = false;
     }
   }
-
 }