Making entity birthday optionalble

back/app/entity/models.py

@@ -23,10 +23,9 @@ class Individual(EntityType):
         props={"items-per-row": "4", "numbered": True},
         title="Surnoms"
     )
-    day_of_birth: date = Field(title='Date de naissance')
+    day_of_birth: date = Field(default=None, title='Date de naissance')
     place_of_birth: str = Field(default="", title='Lieu de naissance')
 
-
     @property
     def label(self) -> str:
         if len(self.surnames) > 0:

front/app/src/common/crud/types/date.type.ts

@@ -1,7 +1,6 @@
-
+import { Component, OnInit } from '@angular/core';
-import { Component, ElementRef, OnInit, ViewChild} from '@angular/core';
 import { formatDate } from "@angular/common";
-import { NgbDateStruct, NgbTimeStruct } from '@ng-bootstrap/ng-bootstrap';
+import { NgbDateStruct } from '@ng-bootstrap/ng-bootstrap';
 import { FieldType, FieldTypeConfig } from '@ngx-formly/core';
 
 
@@ -15,12 +14,13 @@ import { FieldType, FieldTypeConfig } from '@ngx-formly/core';
     <div class="alert alert-danger" role="alert" *ngIf="showError && formControl.errors">
         <formly-validation-message [field]="field"></formly-validation-message>
     </div>
+    <input type="hidden" 
+           [formControl]="formControl" 
+           [formlyAttributes]="field"
+           [class.is-invalid]="showError"
+    />
     <div class="input-group" *ngIf="! this.field.props.readonly">
-        <input type="hidden" 
+        <button class="btn btn-outline-secondary" (click)="d.toggle()" type="button"><i-bs name="calendar-date-fill"></i-bs></button>
-               [formControl]="formControl" 
-               [formlyAttributes]="field"
-               [class.is-invalid]="showError"
-        />
         <input
             class="form-control"
             placeholder="yyyy-mm-dd"
@@ -30,22 +30,20 @@ import { FieldType, FieldTypeConfig } from '@ngx-formly/core';
             ngbDatepicker
             #d="ngbDatepicker"
         />
-        <button class="btn btn-outline-secondary" (click)="d.toggle()" type="button"><i-bs name="calendar-date-fill"></i-bs></button>
     </div>
     <div class="input-group" *ngIf="this.field.props.readonly">
-        <input class="form-control" value="{{ this.datetime.toLocaleString() }}" disabled=""/>
+        <input class="form-control" value="{{ this.datetime ? this.datetime.toLocaleString() : '' }}" disabled=""/>
     </div>
   `,
 })
 export class DateTypeComponent extends FieldType<FieldTypeConfig> implements OnInit
 {
-    public date : NgbDateStruct;
+    public date : NgbDateStruct | null = null;
-    public datetime : Date = new Date();
+    public datetime : Date | null = null;
 
 
     constructor() {
         super();
-        this.date = this.getDateStruct(new Date());
     }
 
     ngOnInit() {
@@ -54,8 +52,13 @@ export class DateTypeComponent extends FieldType<FieldTypeConfig> implements OnI
         }
 
         this.formControl.valueChanges.subscribe(value => {
-            this.datetime = new Date(value)
+            if (value) {
-            this.date = this.getDateStruct(this.datetime);
+                this.datetime = new Date(value);
+                this.date = this.getDateStruct(this.datetime);
+            } else {
+                this.datetime = null;
+                this.date = null;
+            }
         })
     }
 
@@ -68,12 +71,21 @@ export class DateTypeComponent extends FieldType<FieldTypeConfig> implements OnI
     }
 
     changeDatetime(event: any) {
-        this.datetime.setFullYear(this.date.year)
+        if (this.date) {
-        this.datetime.setMonth(this.date.month - 1)
+            if (!this.datetime) {
-        this.datetime.setDate(this.date.day)
+                this.datetime = new Date();
+            }
+            this.datetime.setFullYear(this.date.year)
+            this.datetime.setMonth(this.date.month - 1)
+            this.datetime.setDate(this.date.day)
 
-        this.formControl.setValue(
+            this.formControl.setValue(
-            formatDate(this.datetime, 'YYYY-MM-dd', 'EN_US', 'CET')
+                formatDate(this.datetime, 'YYYY-MM-dd', 'EN_US', 'CET')
-        )
+            )
+        } else {
+            this.datetime = null;
+            this.date = null;
+            this.formControl.setValue('')
+        }
     }
 }

front/app/src/common/crud/types/datetime.type.ts

@@ -1,5 +1,4 @@
-
+import { Component, OnInit } from '@angular/core';
-import { Component, ElementRef, OnInit, ViewChild} from '@angular/core';
 import { formatDate } from "@angular/common";
 import { NgbDateStruct, NgbTimeStruct } from '@ng-bootstrap/ng-bootstrap';
 import { FieldType, FieldTypeConfig } from '@ngx-formly/core';
@@ -12,12 +11,13 @@ import { FieldType, FieldTypeConfig } from '@ngx-formly/core';
          class="form-label">{{ props.label }}
         <span *ngIf="props.required && props['hideRequiredMarker'] !== true" aria-hidden="true">*</span>
     </label>
+    <input type="hidden" 
+           [formControl]="formControl" 
+           [formlyAttributes]="field"
+           [class.is-invalid]="showError"
+    />
     <div class="input-group" *ngIf="! this.field.props.readonly">
-        <input type="hidden" 
+        <button class="btn btn-outline-secondary bi bi-calendar3" (click)="d.toggle()" type="button"></button>
-               [formControl]="formControl" 
-               [formlyAttributes]="field"
-               [class.is-invalid]="showError"
-        />
         <input
             class="form-control"
             placeholder="yyyy-mm-dd"
@@ -27,7 +27,6 @@ import { FieldType, FieldTypeConfig } from '@ngx-formly/core';
             ngbDatepicker
             #d="ngbDatepicker"
         />
-        <button class="btn btn-outline-secondary bi bi-calendar3" (click)="d.toggle()" type="button"></button>
         <ngb-timepicker 
                 (ngModelChange)="changeDatetime($event)"
                 [(ngModel)]="time" 
@@ -35,15 +34,15 @@ import { FieldType, FieldTypeConfig } from '@ngx-formly/core';
         </ngb-timepicker>
     </div>
     <div class="input-group" *ngIf="this.field.props.readonly">
-        <input class="form-control" value="{{ this.datetime.toLocaleString() }}" disabled=""/>
+        <input class="form-control" value="{{ this.datetime ? this.datetime.toLocaleString() : '' }}" disabled=""/>
     </div>
   `,
 })
 export class DatetimeTypeComponent extends FieldType<FieldTypeConfig> implements OnInit
 {
-    public time : NgbTimeStruct;
+    public time : NgbTimeStruct | null = null;
-    public date : NgbDateStruct;
+    public date : NgbDateStruct | null = null;
-    public datetime : Date = new Date()
+    public datetime : Date | null = null;
 
 
     constructor() {
@@ -58,9 +57,15 @@ export class DatetimeTypeComponent extends FieldType<FieldTypeConfig> implements
         }
 
         this.formControl.valueChanges.subscribe(value => {
-            this.datetime = new Date(value)
+            if (value) {
-            this.date = this.getDateStruct(this.datetime);
+                this.datetime = new Date(value);
-            this.time = this.getTimeStruct(this.datetime);
+                this.date = this.getDateStruct(this.datetime);
+                this.time = this.getTimeStruct(this.datetime);
+            } else {
+                this.datetime = null;
+                this.date = null;
+                this.time = null;
+            }
         })
     }
 
@@ -81,15 +86,25 @@ export class DatetimeTypeComponent extends FieldType<FieldTypeConfig> implements
     }
 
     changeDatetime(event: any) {
-        this.datetime.setFullYear(this.date.year)
+        if (this.date && this.time) {
-        this.datetime.setMonth(this.date.month - 1)
+            if (!this.datetime) {
-        this.datetime.setDate(this.date.day)
+                this.datetime = new Date();
-        this.datetime.setHours(this.time.hour)
+            }
-        this.datetime.setMinutes(this.time.minute)
+            this.datetime.setFullYear(this.date.year)
-        this.datetime.setSeconds(this.time.second)
+            this.datetime.setMonth(this.date.month - 1)
+            this.datetime.setDate(this.date.day)
+            this.datetime.setHours(this.time.hour)
+            this.datetime.setMinutes(this.time.minute)
+            this.datetime.setSeconds(this.time.second)
 
-        this.formControl.setValue(
+            this.formControl.setValue(
-            formatDate(this.datetime, 'YYYY-MM-ddTHH:mm:ss.SSS', 'EN_US', 'CET')
+                formatDate(this.datetime, 'YYYY-MM-ddTHH:mm:ss.SSS', 'EN_US', 'CET')
-        )
+            )
+        } else {
+            this.datetime = null;
+            this.date = null;
+            this.time = null;
+            this.formControl.setValue('')
+        }
     }
 }