Merge branch 'release/4.0.0-alpha.4'

.github/pull_request_template.md

@@ -4,6 +4,15 @@
 
 ## How can it be tested?
 
+## Impacted packages
+
+Check the packages that require a new publication or release:
+
+- [ ] @mnfst/manifest
+- [ ] @mnfst/types
+- [ ] @mnfst/admin
+- [ ] doc
+
 ## Check list before submitting
 
 - [ ] I have performed a self-review of my code (no debugs, no commented code, good naming, etc.)

.github/workflows/ci-cd.yml

@@ -20,6 +20,10 @@ jobs:
       - name: Install dependencies
         run: npm ci
         working-directory: ./packages/core/manifest
+      # Enure that we are using the latest version of the types package (even if it is not published yet).
+      - name: Link local types
+        run: npm run link-local-types
+        working-directory: ./packages/core/manifest
       - name: Build App
         run: npm run build
         working-directory: ./packages/core/manifest

.vscode/settings.json

@@ -34,6 +34,7 @@
     "metas",
     "mnfst",
     "nestjs",
+    "openapi",
     "typeorm",
     "uniqid"
   ],

packages/core/admin/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mnfst/admin",
-  "version": "0.1.0-alpha.4",
+  "version": "0.1.0-alpha.5",
   "homepage": "https://manifest.build",
   "keywords": [
     "admin",
@@ -28,7 +28,8 @@
     "start": "ng serve",
     "build": "ng build --configuration production",
     "watch": "ng build --watch --configuration development",
-    "test": "ng test"
+    "test": "ng test",
+    "link-local-types": "cd ../types && npm install && npm run build && npm link && cd ../manifest && npm link @mnfst/types"
   },
   "private": false,
   "license": "MIT",
@@ -42,7 +43,7 @@
     "@angular/platform-browser-dynamic": "^17.3.1",
     "@angular/router": "^17.3.1",
     "@auth0/angular-jwt": "^5.2.0",
-    "@mnfst/types": "^0.1.0-alpha.3",
+    "@mnfst/types": "^0.1.0-alpha.4",
     "bulma": "^0.9.4",
     "bulma-tooltip": "^3.0.2",
     "rxjs": "~7.5.0",

packages/core/admin/src/app/modules/shared/inputs/input.component.ts

@@ -21,6 +21,7 @@ import { SelectInputComponent } from './select-input/select-input.component'
 import { TextInputComponent } from './text-input/text-input.component'
 import { TextareaInputComponent } from './textarea-input/textarea-input.component'
 import { UrlInputComponent } from './url-input/url-input.component'
+import { TimestampInputComponent } from './timestamp-input/timestamp-input.component'
 
 @Component({
   selector: 'app-input',
@@ -30,6 +31,7 @@ import { UrlInputComponent } from './url-input/url-input.component'
     BooleanInputComponent,
     CurrencyInputComponent,
     DateInputComponent,
+    TimestampInputComponent,
     EmailInputComponent,
     UrlInputComponent,
     MultiSelectInputComponent,
@@ -111,6 +113,14 @@ import { UrlInputComponent } from './url-input/url-input.component'
       *ngIf="prop?.type === PropType.Date"
     >
     </app-date-input>
+    <app-timestamp-input
+      [prop]="prop"
+      [value]="value"
+      [isError]="isError"
+      (valueChanged)="onChange($event)"
+      *ngIf="prop?.type === PropType.Timestamp"
+    >
+    </app-timestamp-input>
     <app-password-input
       [prop]="prop"
       [value]="value"

packages/core/admin/src/app/modules/shared/inputs/timestamp-input/timestamp-input.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TimestampInputComponent } from './timestamp-input.component';
+
+describe('TimestampInputComponent', () => {
+  let component: TimestampInputComponent;
+  let fixture: ComponentFixture<TimestampInputComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TimestampInputComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(TimestampInputComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

packages/core/admin/src/app/modules/shared/inputs/timestamp-input/timestamp-input.component.ts

@@ -0,0 +1,44 @@
+import { NgClass } from '@angular/common'
+import {
+  Component,
+  ElementRef,
+  EventEmitter,
+  Input,
+  Output,
+  ViewChild
+} from '@angular/core'
+import { PropertyManifest } from '@mnfst/types'
+
+@Component({
+  selector: 'app-timestamp-input',
+  standalone: true,
+  imports: [NgClass],
+  template: `<label [for]="prop.name">{{ prop.name }}</label>
+    <input
+      class="input"
+      [ngClass]="{ 'is-danger': isError }"
+      type="datetime-local"
+      [value]="value"
+      (change)="onChange($event)"
+      #input
+    />`
+})
+export class TimestampInputComponent {
+  @Input() prop: PropertyManifest
+  @Input() value: string
+  @Input() isError: boolean
+
+  @Output() valueChanged: EventEmitter<number> = new EventEmitter()
+
+  @ViewChild('input', { static: true }) input: ElementRef
+
+  ngOnInit(): void {
+    if (this.value !== undefined) {
+      this.input.nativeElement.value = this.value
+    }
+  }
+
+  onChange(event: any) {
+    this.valueChanged.emit(event.target.value)
+  }
+}

packages/core/admin/src/app/modules/shared/yields/date-yield/date-yield.component.ts

@@ -1,10 +1,10 @@
-import { CommonModule } from '@angular/common'
+import { DatePipe, NgIf } from '@angular/common'
 import { Component, Input } from '@angular/core'
 
 @Component({
   selector: 'app-date-yield',
   standalone: true,
-  imports: [CommonModule],
+  imports: [DatePipe, NgIf],
   template: `<span class="is-nowrap">{{ value | date : 'MM/dd/yy' }}</span>
     <span class="is-nowrap" *ngIf="!value"> - </span> `,
   styleUrls: ['./date-yield.component.scss']

packages/core/admin/src/app/modules/shared/yields/timestamp-yield/timestamp-yield.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TimestampYieldComponent } from './timestamp-yield.component';
+
+describe('TimestampYieldComponent', () => {
+  let component: TimestampYieldComponent;
+  let fixture: ComponentFixture<TimestampYieldComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TimestampYieldComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(TimestampYieldComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

packages/core/admin/src/app/modules/shared/yields/timestamp-yield/timestamp-yield.component.ts

@@ -0,0 +1,14 @@
+import { DatePipe } from '@angular/common'
+import { Component, Input } from '@angular/core'
+
+@Component({
+  selector: 'app-timestamp-yield',
+  standalone: true,
+  imports: [DatePipe],
+  template: `<span class="is-nowrap">{{
+    value | date : 'yyyy-MM-dd HH:mm:ss'
+  }}</span>`
+})
+export class TimestampYieldComponent {
+  @Input() value: string
+}

packages/core/admin/src/app/modules/shared/yields/yield.component.ts

@@ -13,6 +13,7 @@ import { LocationYieldComponent } from './location-yield/location-yield.componen
 import { NumberYieldComponent } from './number-yield/number-yield.component'
 import { ProgressBarYieldComponent } from './progress-bar-yield/progress-bar-yield.component'
 import { TextYieldComponent } from './text-yield/text-yield.component'
+import { TimestampYieldComponent } from './timestamp-yield/timestamp-yield.component'
 
 @Component({
   selector: 'app-yield',
@@ -22,6 +23,7 @@ import { TextYieldComponent } from './text-yield/text-yield.component'
     BooleanYieldComponent,
     CurrencyYieldComponent,
     DateYieldComponent,
+    TimestampYieldComponent,
     EmailYieldComponent,
     NumberYieldComponent,
     LinkYieldComponent,
@@ -45,22 +47,23 @@ import { TextYieldComponent } from './text-yield/text-yield.component'
       [value]="value"
       [compact]="compact"
     ></app-link-yield>
-
     <app-boolean-yield
       *ngIf="prop.type === PropType.Boolean"
       [value]="value"
     ></app-boolean-yield>
-
     <app-currency-yield
       *ngIf="prop.type === PropType.Money"
       [currency]="prop.options?.['currency']"
       [value]="value"
     ></app-currency-yield>
-
     <app-date-yield
       *ngIf="prop.type === PropType.Date"
       [value]="value"
     ></app-date-yield>
+    <app-timestamp-yield
+      *ngIf="prop.type === PropType.Timestamp"
+      [value]="value"
+    ></app-timestamp-yield>
     <app-email-yield
       *ngIf="prop.type === PropType.Email"
       [value]="value"

packages/core/admin/src/styles/components/_forms.scss

@@ -19,6 +19,11 @@
   color: $input-placeholder-color !important;
 }
 
+input[type="datetime-local"] {
+  display: block;
+  padding-right: 12px;
+}
+
 label:not(.file-label):not(.checkbox):not(.image-label):not(.is-boxed) {
   font-size: $size-6;
   font-weight: $weight-bold;

packages/core/manifest/e2e/assets/mock-backend.yml

@@ -6,9 +6,22 @@ entities:
       - { name: email, type: email }
 
   Dog:
+    # Testing all property types.
     properties:
       - name
+      - { name: description, type: text }
       - { name: age, type: number }
+      - { name: website, type: link }
+      - { name: price, type: money, options: { currency: EUR } }
       - { name: birthdate, type: date }
+      - { name: isGoodBoy, type: boolean }
+      - { name: acquiredAt, type: timestamp }
+      - { name: password, type: password }
+      - { name: email, type: email }
+      - {
+          name: favoriteToy,
+          type: choice,
+          options: { values: [ball, bone, frisbee] }
+        }
     belongsTo:
       - Owner

packages/core/manifest/e2e/jest.setup.ts

@@ -5,6 +5,8 @@ import { INestApplication } from '@nestjs/common'
 import supertest from 'supertest'
 import { load } from 'js-yaml'
 import fs from 'fs'
+import { SwaggerModule } from '@nestjs/swagger'
+import { OpenApiService } from '../src/open-api/services/open-api.service'
 
 let app: INestApplication
 
@@ -35,6 +37,10 @@ beforeAll(async () => {
   // Store request object in global scope to use in tests.
   global.request = supertest(app.getHttpServer())
 
+  // Set the SwaggerModule to serve the OpenAPI doc.
+  const openApiService = app.get(OpenApiService)
+  SwaggerModule.setup('api', app, openApiService.generateOpenApiObject())
+
   await app.init()
 })