feat(career-feature-page): adiciona página pública de vagas

closed #78

apps/devmx/src/app/app.routes.ts

@@ -2,6 +2,13 @@ import { NotFoundContainer } from './containers';
 import { Route } from '@angular/router';
 
 export const appRoutes: Route[] = [
+  {
+    path: 'vagas',
+    loadChildren: () =>
+      import('@devmx/career-feature-page').then(
+        (m) => m.careerFeaturePageRoutes
+      ),
+  },
   {
     path: 'sobre',
     loadChildren: () =>

apps/devmx/src/index.html

@@ -92,6 +92,5 @@
     <noscript
       >Please enable JavaScript to continue using this application.</noscript
     >
-    <script src="//unpkg.com/@ungap/custom-elements"></script>
   </body>
 </html>

packages/career/feature-page/.eslintrc.json

@@ -0,0 +1,42 @@
+{
+  "extends": ["../../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts"],
+      "extends": [
+        "plugin:@nx/angular",
+        "plugin:@angular-eslint/template/process-inline-templates"
+      ],
+      "rules": {
+        "@angular-eslint/directive-selector": [
+          "error",
+          {
+            "type": "attribute",
+            "prefix": "devmx",
+            "style": "camelCase"
+          }
+        ],
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "type": "element",
+            "prefix": "devmx",
+            "style": "kebab-case"
+          }
+        ],
+        "@angular-eslint/component-class-suffix": [
+          "error",
+          {
+            "suffixes": ["Component", "Container", "Dialog"]
+          }
+        ]
+      }
+    },
+    {
+      "files": ["*.html"],
+      "extends": ["plugin:@nx/angular-template"],
+      "rules": {}
+    }
+  ]
+}

packages/career/feature-page/README.md

@@ -0,0 +1,7 @@
+# career-feature-page
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test career-feature-page` to execute the unit tests.

packages/career/feature-page/jest.config.ts

@@ -0,0 +1,21 @@
+export default {
+  displayName: 'career-feature-page',
+  preset: '../../../jest.preset.js',
+  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+  coverageDirectory: '../../../coverage/packages/career/feature-page',
+  transform: {
+    '^.+\\.(ts|mjs|js|html)$': [
+      'jest-preset-angular',
+      {
+        tsconfig: '<rootDir>/tsconfig.spec.json',
+        stringifyContentPathRegex: '\\.(html|svg)$',
+      },
+    ],
+  },
+  transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],
+  snapshotSerializers: [
+    'jest-preset-angular/build/serializers/no-ng-attributes',
+    'jest-preset-angular/build/serializers/ng-snapshot',
+    'jest-preset-angular/build/serializers/html-comment',
+  ],
+};

packages/career/feature-page/project.json

@@ -0,0 +1,20 @@
+{
+  "name": "career-feature-page",
+  "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "packages/career/feature-page/src",
+  "prefix": "devmx",
+  "projectType": "library",
+  "tags": ["type:feature"],
+  "targets": {
+    "test": {
+      "executor": "@nx/jest:jest",
+      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+      "options": {
+        "jestConfig": "packages/career/feature-page/jest.config.ts"
+      }
+    },
+    "lint": {
+      "executor": "@nx/eslint:lint"
+    }
+  }
+}

packages/career/feature-page/src/index.ts

@@ -0,0 +1,3 @@
+export * from './lib/career-feature-page.routes';
+
+export * from './lib/career-feature-page.component';

packages/career/feature-page/src/lib/career-feature-page.component.ts

@@ -0,0 +1,65 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { AppShellComponent } from '@devmx/shared-ui-global/shell';
+import { RouterModule } from '@angular/router';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { IconComponent } from '@devmx/shared-ui-global/icon';
+
+@Component({
+  selector: 'devmx-career-feature-page',
+  template: `
+    <devmx-app-shell>
+      <mat-toolbar class="app-toolbar">
+        <a routerLink="/" class="app-logo">
+          <img src="devmx.svg" height="48" alt="DevMX" />
+        </a>
+
+        <h1 class="app-title">Vagas</h1>
+
+        <span class="spacer"></span>
+
+        <a
+          target="_blank"
+          rel="noreferrer"
+          title="Github"
+          href="https://github.com/DeveloperParana/devmx"
+        >
+          <devmx-icon name="github" />
+        </a>
+      </mat-toolbar>
+      <router-outlet />
+    </devmx-app-shell>
+  `,
+  styles: `
+    :host {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+
+      .app-toolbar {
+        display: flex;
+        gap: 0.4em;
+      }
+
+      .app-logo {
+        img {
+          max-height: 48px;
+        }
+      }
+
+      .app-title {
+        margin-right: 1em;
+        font-size: 0.9em;
+        font-weight: 500;
+        opacity: 0.4;
+        margin: 0;
+      }
+
+      .spacer {
+        flex: 1 1 auto;
+      }
+    }
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [RouterModule, MatToolbarModule, AppShellComponent, IconComponent],
+})
+export class CareerFeaturePageComponent {}

packages/career/feature-page/src/lib/career-feature-page.routes.ts

@@ -0,0 +1,17 @@
+import { CareerFeaturePageComponent } from './career-feature-page.component';
+import { JobOpeningsContainer } from './containers';
+import { Route } from '@angular/router';
+
+export const careerFeaturePageRoutes: Route[] = [
+  {
+    path: '',
+    title: 'Vagas',
+    component: CareerFeaturePageComponent,
+    children: [
+      {
+        path: '',
+        component: JobOpeningsContainer,
+      },
+    ],
+  },
+];

packages/career/feature-page/src/lib/containers/index.ts

@@ -0,0 +1 @@
+export * from './job-openings/job-openings.container';

packages/career/feature-page/src/lib/containers/job-openings/job-openings.container.html

@@ -0,0 +1,36 @@
+<header>
+  <devmx-job-opening-experience-filter
+  (filterChange)="onExperienceFilterChange($event)"
+  />
+  <devmx-job-opening-mode-filter
+  (filterChange)="onModeFilterChange($event)"
+  />
+</header>
+
+<!--  -->
+@if (jobOpeningFacade.response$ | async; as response) {
+
+<div class="job-openings-container">
+  @for (jobOpening of response.data; track jobOpening.id) {
+  <!--  -->
+  @defer (on viewport) {
+  <a [routerLink]="['/', 'carreiras', { outlets: { right: [jobOpening.id] }}]">
+    <devmx-job-opening-card class="job-opening-card" [data]="jobOpening" />
+  </a>
+  } @placeholder {
+  <devmx-skeleton [rows]="3" />
+  }
+  <!--  -->
+  }
+</div>
+
+<div class="spacer"></div>
+
+<footer>
+  <devmx-paginator
+    [size]="10"
+    [items]="response.items"
+    (pageChange)="onPageChange($event)"
+  />
+</footer>
+}

packages/career/feature-page/src/lib/containers/job-openings/job-openings.container.scss

@@ -0,0 +1,50 @@
+:host {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  background-color: white;
+
+  header {
+    display: flex;
+    flex-flow: row wrap;
+    // justify-content: space-between;
+    padding: 0.4em 0.8em;
+    gap: 1em;
+  }
+
+  .job-openings-container {
+    gap: 1em;
+    padding: 1em;
+    display: grid;
+    grid-auto-flow: dense;
+
+    grid-template-columns: repeat(4, 1fr);
+
+    @media (max-width: 1918px) {
+      grid-template-columns: repeat(3, 1fr);
+    }
+
+    @media (max-width: 1278px) {
+      grid-template-columns: repeat(2, 1fr);
+    }
+
+    @media (max-width: 767px) {
+      grid-template-columns: repeat(1, 1fr);
+    }
+
+    .job-opening-card {
+      width: 100%;
+      max-width: 100%;
+      box-sizing: border-box;
+    }
+  }
+
+  .spacer {
+    flex: 1;
+  }
+
+  footer {
+    display: flex;
+    justify-content: flex-end;
+  }
+}

packages/career/feature-page/src/lib/containers/job-openings/job-openings.container.ts

@@ -0,0 +1,71 @@
+import { ActivatedRoute, Params, Router, RouterModule } from '@angular/router';
+import { inject, Component, ChangeDetectionStrategy } from '@angular/core';
+import { PageParams, PaginatorComponent } from '@devmx/shared-ui-global';
+import { SkeletonComponent } from '@devmx/shared-ui-global/skeleton';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { JobOpeningFacade } from '@devmx/career-data-access';
+import { AsyncPipe } from '@angular/common';
+import {
+  JobOpeningCardComponent,
+  JobOpeningModeFilterComponent,
+  JobOpeningExperienceFilterComponent,
+} from '@devmx/career-ui-shared';
+
+@Component({
+  selector: 'devmx-job-openings',
+  templateUrl: './job-openings.container.html',
+  styleUrl: './job-openings.container.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    JobOpeningExperienceFilterComponent,
+    JobOpeningModeFilterComponent,
+    JobOpeningCardComponent,
+    PaginatorComponent,
+    SkeletonComponent,
+    RouterModule,
+    AsyncPipe,
+  ]
+})
+export class JobOpeningsContainer {
+  jobOpeningFacade = inject(JobOpeningFacade);
+
+  router = inject(Router);
+
+  route = inject(ActivatedRoute);
+
+  constructor() {
+    this.route.queryParams
+      .pipe(takeUntilDestroyed())
+      .subscribe(this.onQueryParams);
+  }
+
+  onQueryParams = (params: Params) => {
+    const { page = 0, size = 10 } = params;
+
+    const { experience = '', mode = '' } = params;
+
+    const filter = { experience, mode };
+
+    this.jobOpeningFacade.setParams({ page, size, filter });
+
+    this.jobOpeningFacade.load();
+  };
+
+  onExperienceFilterChange(experience: string) {
+    const queryParams = this.mergeParams({ experience });
+    this.router.navigate([], { queryParams });
+  }
+
+  onModeFilterChange(mode: string) {
+    const queryParams = this.mergeParams({ mode });
+    this.router.navigate([], { queryParams });
+  }
+
+  mergeParams(params: Params) {
+    return { ...this.route.snapshot.queryParams, ...params };
+  }
+
+  onPageChange(queryParams: PageParams) {
+    this.router.navigate([], { queryParams });
+  }
+}

packages/career/feature-page/src/test-setup.ts

@@ -0,0 +1,8 @@
+// @ts-expect-error https://thymikee.github.io/jest-preset-angular/docs/getting-started/test-environment
+globalThis.ngJest = {
+  testEnvironmentOptions: {
+    errorOnUnknownElements: true,
+    errorOnUnknownProperties: true,
+  },
+};
+import 'jest-preset-angular/setup-jest';