Coding Assignment

.gitignore

@@ -39,3 +39,4 @@ testem.log
 Thumbs.db
 
 .angular
+*/.nx/cache

README.md

@@ -1,4 +1,7 @@
 # Angular Coding Assignment
+
+> Notice: To see my solution to the problem described below [follow this URL](https://github.com/medynski/coding-assignment-angular/pull/1)
+
 The goal of this assignment is to test your coding style, ability to work with libraries/frameworks documentation and to develop features using Angular.
 
 After task completion we will discuss your solution together during the interview and talk about the decisions you have made and solutions you proposed.
@@ -70,68 +73,3 @@ You do not have time to implement everything so pick most important requirements
 
 
 # *********** END OF TASK ***********
-
-
-# AngularMonorepo - default nx starter
-
-<a alt="Nx logo" href="https://nx.dev" target="_blank" rel="noreferrer"><img src="https://raw.githubusercontent.com/nrwl/nx/master/images/nx-logo.png" width="45"></a>
-
-✨ **This workspace has been generated by [Nx, a Smart, fast and extensible build system.](https://nx.dev)** ✨
-
-
-## Start the app
-
-To start the development server run `nx serve location-app`. Open your browser and navigate to http://localhost:4200/. Happy coding!
-
-
-## Generate code
-
-If you happen to use Nx plugins, you can leverage code generators that might come with it.
-
-Run `nx list` to get a list of available plugins and whether they have generators. Then run `nx list <plugin-name>` to see what generators are available.
-
-Learn more about [Nx generators on the docs](https://nx.dev/plugin-features/use-code-generators).
-
-## Running tasks
-
-To execute tasks with Nx use the following syntax:
-
-```
-nx <target> <project> <...options>
-```
-
-You can also run multiple targets:
-
-```
-nx run-many -t <target1> <target2>
-```
-
-..or add `-p` to filter specific projects
-
-```
-nx run-many -t <target1> <target2> -p <proj1> <proj2>
-```
-
-Targets can be defined in the `package.json` or `projects.json`. Learn more [in the docs](https://nx.dev/core-features/run-tasks).
-
-## Want better Editor Integration?
-
-Have a look at the [Nx Console extensions](https://nx.dev/nx-console). It provides autocomplete support, a UI for exploring and running tasks & generators, and more! Available for VSCode, IntelliJ and comes with a LSP for Vim users.
-
-## Ready to deploy?
-
-Just run `nx build demoapp` to build the application. The build artifacts will be stored in the `dist/` directory, ready to be deployed.
-
-## Set up CI!
-
-Nx comes with local caching already built-in (check your `nx.json`). On CI you might want to go a step further.
-
-- [Set up remote caching](https://nx.dev/core-features/share-your-cache)
-- [Set up task distribution across multiple machines](https://nx.dev/core-features/distribute-task-execution)
-- [Learn more how to setup CI](https://nx.dev/recipes/ci)
-
-## Connect with us!
-
-- [Join the community](https://nx.dev/community)
-- [Subscribe to the Nx Youtube Channel](https://www.youtube.com/@nxdevtools)
-- [Follow us on Twitter](https://twitter.com/nxdevtools)

angular-monorepo/apps/location-app/project.json

@@ -59,18 +59,18 @@
       "executor": "@angular-devkit/build-angular:dev-server",
       "configurations": {
         "production": {
-          "browserTarget": "location-app:build:production"
+          "buildTarget": "location-app:build:production"
         },
         "development": {
-          "browserTarget": "location-app:build:development"
+          "buildTarget": "location-app:build:development"
         }
       },
       "defaultConfiguration": "development"
     },
     "extract-i18n": {
       "executor": "@angular-devkit/build-angular:extract-i18n",
       "options": {
-        "browserTarget": "location-app:build"
+        "buildTarget": "location-app:build"
       }
     },
     "lint": {

angular-monorepo/apps/location-app/src/app/app.component.ts

@@ -2,41 +2,60 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'angular-monorepo-root',
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss'],
+  template: ` <div class="flex flex-col h-screen">
+    <div class="flex justify-between items-center bg-slate-400 p-4">
+      <h2 routerLink="/" class="cursor-pointer font-bold">
+        Great Location App
+      </h2>
+      <div class="relative">
+        <img
+          class="w-10 h-10 rounded"
+          src="https://flowbite.com/docs/images/people/profile-picture-5.jpg"
+          alt=""
+        />
+        <span
+          class="absolute top-0 left-8 transform -translate-y-1/2 w-3.5 h-3.5 bg-red-400 border-2 border-slate-400 rounded-full"
+        ></span>
+      </div>
+    </div>
+    <div class="lg:flex h-full">
+      <div class="lg:mr-2.5">
+        <p-panelMenu [model]="items"></p-panelMenu>
+      </div>
+      <div class="p-5">
+        <router-outlet></router-outlet>
+      </div>
+    </div>
+  </div>`,
 })
 export class AppComponent {
-
-  title = 'location-app';
-
   items = [
     {
-        label: 'Entities',
-        icon: 'pi pi-fw pi-compass',
-        items: [
-          {
-            label: 'Homepage',
-            icon: 'pi pi-fw pi-bookmark',
-            routerLink: 'entity/homepage'
-          },
-          {
-              label: 'List',
-              icon: 'pi pi-fw pi-list',
-              routerLink: 'entity/list'
-          },
-        ]
+      label: 'Entities',
+      icon: 'pi pi-fw pi-compass',
+      items: [
+        {
+          label: 'Homepage',
+          icon: 'pi pi-fw pi-bookmark',
+          routerLink: 'entity/homepage',
+        },
+        {
+          label: 'List',
+          icon: 'pi pi-fw pi-list',
+          routerLink: 'entity/list',
+        },
+      ],
     },
     {
-        label: 'Dashboards',
-        icon: 'pi pi-fw pi-chart-bar',
-        items: [
-            {
-                label: 'Location Dashboard',
-                icon: 'pi pi-fw pi-chart-line',
-                routerLink: 'dashboards/location'
-            },
-        ]
+      label: 'Dashboards',
+      icon: 'pi pi-fw pi-chart-bar',
+      items: [
+        {
+          label: 'Location Dashboard',
+          icon: 'pi pi-fw pi-chart-line',
+          routerLink: 'dashboards/location',
+        },
+      ],
     },
   ];
-
 }

angular-monorepo/apps/location-app/src/app/app.module.ts

@@ -1,23 +1,75 @@
+import { EntitiesDataRepositoryModule } from '@angular-monorepo/entities/data-repository';
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
-import { RouterModule } from '@angular/router';
-import { AppComponent } from './app.component';
-import { appRoutes } from './app.routes';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { Route, RouterModule } from '@angular/router';
 import { AvatarModule } from 'primeng/avatar';
-import { PanelMenuModule } from 'primeng/panelmenu';
-import { BadgeModule } from 'primeng/badge';
 import { AvatarGroupModule } from 'primeng/avatargroup';
-import { EntitiesFeatureHomepageModule } from '@angular-monorepo/entities/feature-homepage';
+import { BadgeModule } from 'primeng/badge';
+import { PanelMenuModule } from 'primeng/panelmenu';
+import { AppComponent } from './app.component';
+
+export const appRoutes: Route[] = [
+  {
+    path: '',
+    pathMatch: 'full',
+    redirectTo: 'entity/homepage',
+  },
+  {
+    path: 'entity',
+    children: [
+      {
+        path: 'homepage',
+        loadComponent: () =>
+          import('@angular-monorepo/entities/feature-homepage').then(
+            (mod) => mod.EntitiesFeatureHomepageComponent,
+          ),
+      },
+      {
+        path: 'list',
+        loadComponent: () =>
+          import('@angular-monorepo/entities/feature-list').then(
+            (mod) => mod.EntitiesFeatureListComponent,
+          ),
+      },
+
+      {
+        path: 'detail/:id',
+        loadComponent: () =>
+          import('@angular-monorepo/entities/feature-entity-details').then(
+            (mod) => mod.EntitiesFeatureEntityDetailsComponent,
+          ),
+      },
+    ],
+  },
+  {
+    path: 'dashboards',
+    children: [
+      {
+        path: 'location',
+        loadComponent: () =>
+          import('@angular-monorepo/entities/feature-location-dashboard').then(
+            (mod) => mod.EntitiesFeatureLocationDashboardComponent,
+          ),
+      },
+    ],
+  },
+  {
+    path: '**',
+    redirectTo: '',
+  },
+];
 
 @NgModule({
   declarations: [AppComponent],
   imports: [
-    BrowserModule,
+    AvatarGroupModule,
     AvatarModule,
-    PanelMenuModule,
     BadgeModule,
-    AvatarGroupModule,
-    EntitiesFeatureHomepageModule,
+    BrowserAnimationsModule,
+    BrowserModule,
+    EntitiesDataRepositoryModule,
+    PanelMenuModule,
     RouterModule.forRoot(appRoutes, { initialNavigation: 'enabledBlocking' }),
   ],
   providers: [],

angular-monorepo/apps/location-app/src/styles.scss

@@ -1,5 +1,10 @@
-/* You can add global styles to this file, and also import other style files */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+@import "primeng/resources/themes/lara-light-blue/theme.css";
+@import "primeng/resources/primeng.css";
 
 body {
-    margin: 0px;
+  margin: 0px;
 }
+

angular-monorepo/apps/location-app/tailwind.config.js

@@ -0,0 +1,15 @@
+const { createGlobPatternsForDependencies } = require('@nx/angular/tailwind');
+const { join } = require('path');
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    join(__dirname, 'src/**/!(*.stories|*.spec).{ts,html}'),
+    join(__dirname, './../../libs/**/!(*.stories|*.spec).{ts,html}'),
+    ...createGlobPatternsForDependencies(__dirname),
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};

angular-monorepo/libs/entities/data-repository/src/index.ts

@@ -1 +1,5 @@
 export * from './lib/entities-data-repository.module';
+export * from './lib/model/model';
+export * from './lib/services/entity.service';
+export * from './lib/types/nullable';
+export * from './lib/utils/handleError';