Set up v2

.eslintrc.json

@@ -0,0 +1,24 @@
+{
+  "overrides": [
+    {
+      "extends": [
+        "eslint:recommended",
+        "plugin:@angular-eslint/recommended",
+        "plugin:@angular-eslint/template/process-inline-templates",
+        "plugin:@typescript-eslint/recommended-type-checked",
+        "plugin:@typescript-eslint/stylistic-type-checked"
+      ],
+      "files": "*.ts",
+      "parserOptions": {
+        "project": true
+      },
+      "plugins": ["@angular-eslint", "@typescript-eslint"]
+    },
+    {
+      "extends": "plugin:@angular-eslint/template/recommended",
+      "files": "*.html",
+      "plugins": ["@angular-eslint/template"]
+    }
+  ],
+  "root": true
+}

.github/workflows/pull-request.yml

@@ -0,0 +1,11 @@
+jobs:
+  pull-request:
+    container: node@sha256:cbdfb793208fd6e63664b4d4e1a539a8b69e7c1f69c49dd55ca6e016074744fd
+    runs-on: ubuntu-22.04
+    steps:
+      - uses: actions/checkout@v4
+      - uses: npm ci
+      - uses: npx eslint .
+      - uses: npx prettier -c .
+
+on: pull_request

.prettierignore

@@ -0,0 +1 @@
+.angular

README.md

@@ -2,73 +2,43 @@
 
 ## Welcome
 
-Hi, and thanks for applying for the __Elimity Frontend Developer Intern__ position with the Elimity Engineering team.
+Hi, and thanks for applying for the __Elimity Frontend Developer Intern__ position at the Elimity Engineering team.
 
-This exercise is designed to give you an opportunity to show off programming skills that would be relevant to work on [Elimity](https://www.elimity.com/) and to give you an idea what type of work you would be doing during your internship.
+This exercise is designed to give you an opportunity to show off programming skills that would be relevant to work at
+[Elimity](https://www.elimity.com/) and to give you an idea what type of work you would be doing during your internship.
 
-## Exercise instructions
-Please use this repository to develop a simple application that allows users to view a list of projects. You can find the code to start from in `src/app`. Implement your solution by extending this starter code. The starter code contains a basic app structure and a predefined list of projects you can use to display in your final solution.
-
-### Prerequisites
-Install Angular by following these instructions: https://angular.io/guide/setup-local. You do not need to create a new Angular app since we already provided this for you in this repository.
-
-After you have installed Angular you can run the starter code from inside the repository folder:
-1. Install the dependencies: run `npm install`.
-2. Start the application by running `ng serve`.
-
-### Exercise requirements
-#### End result (example)
-![image](https://user-images.githubusercontent.com/3659344/86251016-9e708080-bbb1-11ea-8131-4c67a3f6e1da.png)
+## Installation
 
-#### 1. Create a project component
-- Create a new component that displays project info in a card. You can use [`mat-card`](https://material.angular.io/components/select/overview) for this from the angular material library.
-- This component shows a button to show or hide a list of the project tasks.
-- If the project has no tasks, an apropriate message is shown: `No tasks`.
-- This component has two input parameters: 
-  1. `project` of type `Project`: the project to be displayed in the card.
-  2. `showTasks` of type `boolean`: whether or not the project tasks should be shown.
-- This component has one output parameter:
-  1. `showTasksChange` which emits a `boolean`. Each time the HIDE TASKS button is clicked, `showTasksChange` emits `false`. Each time the SHOW TASKS button is clicked, `showTasksChange` emits `true`.
-- This component shows the four properties of a project: owner, priority, due date and the number of tasks.
-- This component also shows a list of the project tasks if `showTasks` is `true` and hide the tasks if it is `false`.
-- See the screenshot above for how this component could look like (as an example, you can use your own layout if you prefer this).
+The only prerequisite for installing this application is [Docker Compose](https://docs.docker.com/compose/). You can
+run the development container and open a shell in it by running the following commands:
 
-#### 2. Use the project component to display the list of projects
-Use the component created in the first step to display all projects.
+```console
+$ docker compose up -d
+$ docker compose exec node bash
+```
 
-#### 3. Add a dropdown menu to show/hide all tasks for all projects
-- Add a dropdown menu above the list of projects showing following options: `Show all`, `Hide all` and `Separate`. You can use [`mat-select`](https://material.angular.io/components/select/overview) for this from the angular material library.
-- When `Show all`  is selected, all tasks of all projects should be displayed.
-- When `Hide all` is selected, all tasks of all projects should be hidden.
-- When `Separate` is selected no action is needed. This option should be automatically set when one of the project cards show/hide tasks button is clicked.
+To start the application itself, run the following commands in the newly opened shell:
 
-### Useful resources:
-- [Tour of heroes tutorial (Create a feature component)](https://angular.io/tutorial/toh-pt3): explains how to create a component in angular.
-- [Introduction to angular concepts](https://angular.io/guide/architecture): learn about the design concepts and architecture of Angular apps.
-- [Angular docs](https://angular.io/docs): general docs where you can find everything.
-- [Angular material components](https://material.angular.io/components/categories): the library we use for our basic building blocks. It provides reusable material design components for angular.
-- [`mat-select`](https://material.angular.io/components/select/overview): you can use this in your solution for the project cards.
-- [`mat-card`](https://material.angular.io/components/card/overview): you use this in your solution for the drop down menu.
+```console
+$ npm i
+$ npx ng s
+```
 
-## Evaluation
+You can now use the application by visiting http://localhost:4200 on your machine.
 
-Your submission will be evaluated against the following criteria:
-
-* Meets the stated requirements.
-* Consistency with the existing code.
-* Understanding of Angular fundamentals.
-* Adherence to Elimity's style guidelines:
-  * Strong types over implicit assumptions.
-  * Immutability over mutability.
-  * Simple over clever.
+## Exercise instructions
+This repository implements a simple todo application with Angular 17. However, it currently uses a somewhat outdated
+version of the Angular Material library, which provides some good-looking components out of the box. Your task is to
+update this dependency from version 16 to 17. More specifically, your solution should fulfill these requirements:
 
+1. The application should depend on `@angular/material@^17.2.2` instead of `@angular/material@^16.2.14`.
+2. There shouldn't be any big changes to application's UI or functionality.
+3. The resulting code should pass the linter and formatting checks defined in
+   [.github/workflows/pull-request.yml](.github/workflows/pull-request.yml).
 
 ## Practicalities
+You can hand in your solution via one of these channels:
 
-- These practices are important on the job, but won't affect your grades:
-  - proper version control
-  - testing
-
-## Submission
-
-To submit your work, email us the link to your repository containing your implementation.
+1. Create a public fork of this repository, make a PR in that repository with your changes and send us a link to the PR 
+   at [email protected].
+2. Clone this repository, apply your changes locally and send us a ZIP file at [email protected].

angular.json

@@ -1,130 +1,39 @@
 {
-  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
-  "version": 1,
-  "newProjectRoot": "projects",
   "projects": {
-    "frontend-exercise": {
-      "projectType": "application",
-      "schematics": {},
-      "root": "",
-      "sourceRoot": "src",
-      "prefix": "app",
+    "project": {
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "@angular-devkit/build-angular:application",
           "options": {
-            "outputPath": "dist/frontend-exercise",
+            "browser": "src/main.ts",
             "index": "src/index.html",
-            "main": "src/main.ts",
-            "polyfills": "src/polyfills.ts",
-            "tsConfig": "tsconfig.app.json",
-            "aot": true,
-            "assets": [
-              "src/favicon.ico",
-              "src/assets"
-            ],
+            "outputPath": "dist",
+            "polyfills": ["zone.js"],
             "styles": [
-              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
-              "src/styles.css"
+              "@angular/material/legacy-prebuilt-themes/deeppurple-amber.css",
+              "bootstrap/dist/css/bootstrap.css"
             ],
-            "scripts": []
-          },
-          "configurations": {
-            "production": {
-              "fileReplacements": [
-                {
-                  "replace": "src/environments/environment.ts",
-                  "with": "src/environments/environment.prod.ts"
-                }
-              ],
-              "optimization": true,
-              "outputHashing": "all",
-              "sourceMap": false,
-              "extractCss": true,
-              "namedChunks": false,
-              "extractLicenses": true,
-              "vendorChunk": false,
-              "buildOptimizer": true,
-              "budgets": [
-                {
-                  "type": "initial",
-                  "maximumWarning": "2mb",
-                  "maximumError": "5mb"
-                },
-                {
-                  "type": "anyComponentStyle",
-                  "maximumWarning": "6kb",
-                  "maximumError": "10kb"
-                }
-              ]
-            }
+            "tsConfig": "tsconfig.json"
           }
         },
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
-          "options": {
-            "browserTarget": "frontend-exercise:build"
-          },
           "configurations": {
-            "production": {
-              "browserTarget": "frontend-exercise:build:production"
+            "configuration": {
+              "buildTarget": "project:build"
             }
-          }
-        },
-        "extract-i18n": {
-          "builder": "@angular-devkit/build-angular:extract-i18n",
-          "options": {
-            "browserTarget": "frontend-exercise:build"
-          }
-        },
-        "test": {
-          "builder": "@angular-devkit/build-angular:karma",
-          "options": {
-            "main": "src/test.ts",
-            "polyfills": "src/polyfills.ts",
-            "tsConfig": "tsconfig.spec.json",
-            "karmaConfig": "karma.conf.js",
-            "assets": [
-              "src/favicon.ico",
-              "src/assets"
-            ],
-            "styles": [
-              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
-              "src/styles.css"
-            ],
-            "scripts": []
-          }
-        },
-        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
-          "options": {
-            "tsConfig": [
-              "tsconfig.app.json",
-              "tsconfig.spec.json",
-              "e2e/tsconfig.json"
-            ],
-            "exclude": [
-              "**/node_modules/**"
-            ]
-          }
-        },
-        "e2e": {
-          "builder": "@angular-devkit/build-angular:protractor",
-          "options": {
-            "protractorConfig": "e2e/protractor.conf.js",
-            "devServerTarget": "frontend-exercise:serve"
           },
-          "configurations": {
-            "production": {
-              "devServerTarget": "frontend-exercise:serve:production"
-            }
+          "defaultConfiguration": "configuration",
+          "options": {
+            "host": "0.0.0.0"
           }
         }
-      }
+      },
+      "root": ""
     }
   },
-  "defaultProject": "frontend-exercise",
+  "version": 1,
   "cli": {
     "analytics": false
   }
-}
+}

docker-compose.yml

@@ -0,0 +1,10 @@
+services:
+  node:
+    entrypoint: sleep infinity
+    image: node:20
+    init: true
+    ports:
+      - 127.0.0.1:4200:4200
+    volumes:
+      - .:/app
+    working_dir: /app