From 8e8d14152dd6d7315f5a856918933dd119afb912 Mon Sep 17 00:00:00 2001 From: RenzoPrats Date: Wed, 12 Jun 2024 09:50:00 -0300 Subject: [PATCH 1/5] feat: started to create date range question type --- .../form-builder/form-builder.component.ts | 1 + .../src/lib/survey/components/daterange.ts | 91 +++++++++++++++++++ .../src/lib/survey/custom-question-types.ts | 7 ++ 3 files changed, 99 insertions(+) create mode 100644 libs/shared/src/lib/survey/components/daterange.ts diff --git a/libs/shared/src/lib/components/form-builder/form-builder.component.ts b/libs/shared/src/lib/components/form-builder/form-builder.component.ts index ab76ea446f..c080c5ce3f 100644 --- a/libs/shared/src/lib/components/form-builder/form-builder.component.ts +++ b/libs/shared/src/lib/components/form-builder/form-builder.component.ts @@ -58,6 +58,7 @@ const QUESTION_TYPES = [ 'multipletext', 'panel', 'paneldynamic', + 'teste', ]; /** diff --git a/libs/shared/src/lib/survey/components/daterange.ts b/libs/shared/src/lib/survey/components/daterange.ts new file mode 100644 index 0000000000..f15b9bb890 --- /dev/null +++ b/libs/shared/src/lib/survey/components/daterange.ts @@ -0,0 +1,91 @@ +import { + ComponentCollection, + JsonMetadata, + Serializer, + SvgRegistry, +} from 'survey-core'; +import { Question } from '../types'; +import { GeospatialMapComponent } from '../../components/geospatial-map/geospatial-map.component'; +import { DomService } from '../../services/dom/dom.service'; +import { CustomPropertyGridComponentTypes } from './utils/components.enum'; +import { registerCustomPropertyEditor } from './utils/component-register'; +import { getGeoFields } from './utils/get-geospatial-fields'; + +/** + * Inits the geospatial component. + * + * @param domService DOM service. + * @param componentCollectionInstance ComponentCollection + */ +export const init = ( + domService: DomService, + componentCollectionInstance: ComponentCollection +): void => { + // registers icon-geospatial in the SurveyJS library + SvgRegistry.registerIconFromSvg( + 'geospatial', + ' ' + ); + + const component = { + name: 'daterange', + title: 'Date Range', + iconName: 'icon-geospatial', + questionJSON: { + name: 'geospatial', + type: 'text', + }, + category: 'Custom Questions', + onInit: (): void => { + const serializer: JsonMetadata = Serializer; + // Geospatial type + serializer.addProperty('daterange', { + name: 'geometry', + type: 'dropdown', + category: 'general', + isRequired: true, + default: 'Point', + choices: ['Point'], + }); + // Display geofields + serializer.addProperty('daterange', { + name: 'geoFields', + category: 'Map Properties', + type: CustomPropertyGridComponentTypes.geospatialListbox, + visibleIndex: 2, + // dependsOn: ['geometry'], + // visibleIf: (obj: null | any) => !!obj && obj.geometry === 'POINT', + }); + // Tagbox + registerCustomPropertyEditor( + CustomPropertyGridComponentTypes.geospatialListbox + ); + }, + onAfterRender: (question: Question, el: HTMLElement): void => { + // hides the input element + const element = el.getElementsByTagName('input')[0].parentElement; + if (element) element.style.display = 'none'; + + // render the GeospatialMapComponent + const map = domService.appendComponentToBody(GeospatialMapComponent, el); + const instance: GeospatialMapComponent = map.instance; + + // inits the map with the value of the question + if (question.value) instance.data = question.value; + + // Set geo fields + instance.fields = getGeoFields(question); + + // Listen to change on geofields + question.registerFunctionOnPropertyValueChanged('geoFields', () => { + instance.fields = question.geoFields; + }); + + // updates the question value when the map changes + instance.mapChange.subscribe((res) => { + question.value = res; + }); + }, + }; + componentCollectionInstance.add(component); +}; diff --git a/libs/shared/src/lib/survey/custom-question-types.ts b/libs/shared/src/lib/survey/custom-question-types.ts index 5cdacb6793..160f350724 100644 --- a/libs/shared/src/lib/survey/custom-question-types.ts +++ b/libs/shared/src/lib/survey/custom-question-types.ts @@ -6,6 +6,7 @@ import * as ResourcesComponent from './components/resources'; import * as OwnerComponent from './components/owner'; import * as UsersComponent from './components/users'; import * as GeospatialComponent from './components/geospatial'; +import * as DateRangeComponent from './components/daterange'; import { Apollo } from 'apollo-angular'; /** @@ -17,6 +18,7 @@ export enum CustomQuestionTypes { OWNER = 'owner', USERS = 'users', GEO_SPATIAL = 'geoSpatial', + TESTE = 'teste', } /** Custom question options */ @@ -56,4 +58,9 @@ export const InitCustomQuestionComponent: { const domService = injector.get(DomService); GeospatialComponent.init(domService, instance); }, + teste: (options) => { + const { injector, instance } = options; + const domService = injector.get(DomService); + DateRangeComponent.init(domService, instance); + }, }; From 774a2df21a29e45775caadab1143d0eea6df6f76 Mon Sep 17 00:00:00 2001 From: RenzoPrats Date: Thu, 20 Jun 2024 10:32:58 -0300 Subject: [PATCH 2/5] feat: started improve daterange questions --- .../form-builder/form-builder.component.ts | 1 - .../src/lib/survey/components/daterange.ts | 76 +++++++++---------- .../src/lib/survey/components/resource.ts | 1 + .../src/lib/survey/custom-question-types.ts | 4 +- 4 files changed, 41 insertions(+), 41 deletions(-) diff --git a/libs/shared/src/lib/components/form-builder/form-builder.component.ts b/libs/shared/src/lib/components/form-builder/form-builder.component.ts index c080c5ce3f..ab76ea446f 100644 --- a/libs/shared/src/lib/components/form-builder/form-builder.component.ts +++ b/libs/shared/src/lib/components/form-builder/form-builder.component.ts @@ -58,7 +58,6 @@ const QUESTION_TYPES = [ 'multipletext', 'panel', 'paneldynamic', - 'teste', ]; /** diff --git a/libs/shared/src/lib/survey/components/daterange.ts b/libs/shared/src/lib/survey/components/daterange.ts index f15b9bb890..41cbcc6b83 100644 --- a/libs/shared/src/lib/survey/components/daterange.ts +++ b/libs/shared/src/lib/survey/components/daterange.ts @@ -5,11 +5,9 @@ import { SvgRegistry, } from 'survey-core'; import { Question } from '../types'; -import { GeospatialMapComponent } from '../../components/geospatial-map/geospatial-map.component'; import { DomService } from '../../services/dom/dom.service'; import { CustomPropertyGridComponentTypes } from './utils/components.enum'; import { registerCustomPropertyEditor } from './utils/component-register'; -import { getGeoFields } from './utils/get-geospatial-fields'; /** * Inits the geospatial component. @@ -23,7 +21,7 @@ export const init = ( ): void => { // registers icon-geospatial in the SurveyJS library SvgRegistry.registerIconFromSvg( - 'geospatial', + 'daterange', ' ' ); @@ -32,59 +30,61 @@ export const init = ( title: 'Date Range', iconName: 'icon-geospatial', questionJSON: { - name: 'geospatial', + name: 'daterange', type: 'text', + inputType: 'range', + step: 0.5, }, category: 'Custom Questions', onInit: (): void => { const serializer: JsonMetadata = Serializer; - // Geospatial type + // initial date serializer.addProperty('daterange', { - name: 'geometry', - type: 'dropdown', - category: 'general', - isRequired: true, - default: 'Point', - choices: ['Point'], + name: 'dateMin', + type: CustomPropertyGridComponentTypes.dateTypeDisplayer, + category: 'Custom Questions', + visibleIndex: 8, + dependsOn: 'inputType', + onPropertyEditorUpdate: (obj: any, propertyEditor: any) => { + if (!!obj && !!obj.inputType) { + propertyEditor.inputType = obj.inputType; + } + }, + onSetValue: (obj: any, value: any) => { + obj.setPropertyValue('dateMin', value); + obj.setPropertyValue('min', value); + }, }); - // Display geofields - serializer.addProperty('daterange', { - name: 'geoFields', - category: 'Map Properties', - type: CustomPropertyGridComponentTypes.geospatialListbox, - visibleIndex: 2, - // dependsOn: ['geometry'], - // visibleIf: (obj: null | any) => !!obj && obj.geometry === 'POINT', - }); - // Tagbox registerCustomPropertyEditor( - CustomPropertyGridComponentTypes.geospatialListbox + CustomPropertyGridComponentTypes.dateTypeDisplayer ); }, onAfterRender: (question: Question, el: HTMLElement): void => { + console.log(question); + console.log(el); // hides the input element - const element = el.getElementsByTagName('input')[0].parentElement; - if (element) element.style.display = 'none'; + // const element = el.getElementsByTagName('input')[0].parentElement; + // if (element) element.style.display = 'none'; // render the GeospatialMapComponent - const map = domService.appendComponentToBody(GeospatialMapComponent, el); - const instance: GeospatialMapComponent = map.instance; + // const map = domService.appendComponentToBody(GeospatialMapComponent, el); + // const instance: GeospatialMapComponent = map.instance; - // inits the map with the value of the question - if (question.value) instance.data = question.value; + // // inits the map with the value of the question + // if (question.value) instance.data = question.value; - // Set geo fields - instance.fields = getGeoFields(question); + // // Set geo fields + // instance.fields = getGeoFields(question); - // Listen to change on geofields - question.registerFunctionOnPropertyValueChanged('geoFields', () => { - instance.fields = question.geoFields; - }); + // // Listen to change on geofields + // question.registerFunctionOnPropertyValueChanged('geoFields', () => { + // instance.fields = question.geoFields; + // }); - // updates the question value when the map changes - instance.mapChange.subscribe((res) => { - question.value = res; - }); + // // updates the question value when the map changes + // instance.mapChange.subscribe((res) => { + // question.value = res; + // }); }, }; componentCollectionInstance.add(component); diff --git a/libs/shared/src/lib/survey/components/resource.ts b/libs/shared/src/lib/survey/components/resource.ts index 707876ed86..ec8f81052b 100644 --- a/libs/shared/src/lib/survey/components/resource.ts +++ b/libs/shared/src/lib/survey/components/resource.ts @@ -633,6 +633,7 @@ export const init = ( }, // Display of add button for resource question ans set placeholder, if any onAfterRender: (question: QuestionResource, el: HTMLElement): void => { + console.log(question); const survey: SurveyModel = question.survey as SurveyModel; survey.loadedRecords = loadedRecords; diff --git a/libs/shared/src/lib/survey/custom-question-types.ts b/libs/shared/src/lib/survey/custom-question-types.ts index 160f350724..b52cc6fac9 100644 --- a/libs/shared/src/lib/survey/custom-question-types.ts +++ b/libs/shared/src/lib/survey/custom-question-types.ts @@ -18,7 +18,7 @@ export enum CustomQuestionTypes { OWNER = 'owner', USERS = 'users', GEO_SPATIAL = 'geoSpatial', - TESTE = 'teste', + DATE_RANGE = 'dateRange', } /** Custom question options */ @@ -58,7 +58,7 @@ export const InitCustomQuestionComponent: { const domService = injector.get(DomService); GeospatialComponent.init(domService, instance); }, - teste: (options) => { + dateRange: (options) => { const { injector, instance } = options; const domService = injector.get(DomService); DateRangeComponent.init(domService, instance); From 756efa6cc6ba35c0132c9646564baa2d6f2cb7d6 Mon Sep 17 00:00:00 2001 From: RenzoPrats Date: Fri, 28 Jun 2024 18:03:54 -0300 Subject: [PATCH 3/5] started to deal with minDate and maxDate to range --- .../src/lib/survey/components/daterange.ts | 82 +++++++++++-------- .../src/lib/survey/custom-question-types.ts | 1 + .../src/lib/survey/widgets/text-widget.ts | 2 + 3 files changed, 51 insertions(+), 34 deletions(-) diff --git a/libs/shared/src/lib/survey/components/daterange.ts b/libs/shared/src/lib/survey/components/daterange.ts index 41cbcc6b83..8a8ebe7dc2 100644 --- a/libs/shared/src/lib/survey/components/daterange.ts +++ b/libs/shared/src/lib/survey/components/daterange.ts @@ -2,9 +2,10 @@ import { ComponentCollection, JsonMetadata, Serializer, + SurveyError, SvgRegistry, } from 'survey-core'; -import { Question } from '../types'; +import { Question, QuestionText } from '../types'; import { DomService } from '../../services/dom/dom.service'; import { CustomPropertyGridComponentTypes } from './utils/components.enum'; import { registerCustomPropertyEditor } from './utils/component-register'; @@ -14,6 +15,7 @@ import { registerCustomPropertyEditor } from './utils/component-register'; * * @param domService DOM service. * @param componentCollectionInstance ComponentCollection + * @param translateService Angular translate service */ export const init = ( domService: DomService, @@ -33,58 +35,70 @@ export const init = ( name: 'daterange', type: 'text', inputType: 'range', - step: 0.5, + step: 1, + default: 1, + min: 1, }, category: 'Custom Questions', onInit: (): void => { const serializer: JsonMetadata = Serializer; - // initial date + // min date serializer.addProperty('daterange', { name: 'dateMin', type: CustomPropertyGridComponentTypes.dateTypeDisplayer, - category: 'Custom Questions', - visibleIndex: 8, - dependsOn: 'inputType', - onPropertyEditorUpdate: (obj: any, propertyEditor: any) => { - if (!!obj && !!obj.inputType) { - propertyEditor.inputType = obj.inputType; - } + category: 'Custom questions', + visibleIndex: 1, + isRequired: true, + onPropertyEditorUpdate: (obj: QuestionText, propertyEditor: any) => { + propertyEditor.inputType = 'date'; }, - onSetValue: (obj: any, value: any) => { + onSetValue: (obj: QuestionText, value: any) => { obj.setPropertyValue('dateMin', value); - obj.setPropertyValue('min', value); + // obj.addError(new SurveyError('This is a custom error message')); + // console.log(obj.hasErrors()); }, }); + // max date + serializer.addProperty('daterange', { + name: 'dateMax', + type: CustomPropertyGridComponentTypes.dateTypeDisplayer, + category: 'Custom questions', + visibleIndex: 2, + isRequired: true, + onPropertyEditorUpdate: (obj: QuestionText, propertyEditor: any) => { + propertyEditor.inputType = 'date'; + }, + onSetValue: (obj: QuestionText, value: any) => { + obj.setPropertyValue('dateMax', value); + }, + }); + // register the editor for type "date" with kendo date picker registerCustomPropertyEditor( CustomPropertyGridComponentTypes.dateTypeDisplayer ); }, onAfterRender: (question: Question, el: HTMLElement): void => { - console.log(question); - console.log(el); - // hides the input element - // const element = el.getElementsByTagName('input')[0].parentElement; - // if (element) element.style.display = 'none'; - - // render the GeospatialMapComponent - // const map = domService.appendComponentToBody(GeospatialMapComponent, el); - // const instance: GeospatialMapComponent = map.instance; - - // // inits the map with the value of the question - // if (question.value) instance.data = question.value; + const data = question.toJSON(); + // console.log(data); + const dateMin = data.dateMin; + const date = new Date(dateMin); // Parse the ISO string to a Date object + // console.log('date = ', date); + const milliseconds = date.getTime(); // Get the time in milliseconds since the Unix epoch + const minutes = Math.floor(milliseconds / (1000 * 60)); // Convert milliseconds to minutes - // // Set geo fields - // instance.fields = getGeoFields(question); + const dateMax = data.dateMax; + const date2 = new Date(dateMax); // Parse the ISO string to a Date object + // console.log('date2 = ', date2); + const milliseconds2 = date2.getTime(); // Get the time in milliseconds since the Unix epoch + const minutes2 = Math.floor(milliseconds2 / (1000 * 60)); // Convert milliseconds to minutes - // // Listen to change on geofields - // question.registerFunctionOnPropertyValueChanged('geoFields', () => { - // instance.fields = question.geoFields; - // }); + const diff = (minutes2 - minutes) / (60 * 24) + 1; - // // updates the question value when the map changes - // instance.mapChange.subscribe((res) => { - // question.value = res; - // }); + // Set the max property dynamically + const inputElement = el.querySelector('input[type="range"]'); + if (inputElement) { + inputElement.setAttribute('max', diff.toString()); + } }, }; componentCollectionInstance.add(component); diff --git a/libs/shared/src/lib/survey/custom-question-types.ts b/libs/shared/src/lib/survey/custom-question-types.ts index b52cc6fac9..841b94af31 100644 --- a/libs/shared/src/lib/survey/custom-question-types.ts +++ b/libs/shared/src/lib/survey/custom-question-types.ts @@ -8,6 +8,7 @@ import * as UsersComponent from './components/users'; import * as GeospatialComponent from './components/geospatial'; import * as DateRangeComponent from './components/daterange'; import { Apollo } from 'apollo-angular'; +import { TranslateService } from '@ngx-translate/core'; /** * Custom question types for the survey creator toolbox diff --git a/libs/shared/src/lib/survey/widgets/text-widget.ts b/libs/shared/src/lib/survey/widgets/text-widget.ts index fd8214e86d..13d05f653f 100644 --- a/libs/shared/src/lib/survey/widgets/text-widget.ts +++ b/libs/shared/src/lib/survey/widgets/text-widget.ts @@ -64,6 +64,7 @@ export const init = ( obj.inputType || '' ), onPropertyEditorUpdate: (obj: QuestionText, propertyEditor: any) => { + console.log(obj.inputType); if (!!obj && !!obj.inputType) { propertyEditor.inputType = obj.inputType; } @@ -134,6 +135,7 @@ export const init = ( question.inputType ) ) { + console.log(question.inputType); pickerDiv = document.createElement('div'); pickerDiv.classList.add('flex', 'min-h-[36px]'); const pickerInstance = createPickerInstance( From 955fcbcadb9f284ed8be53aa843d2906d4f33926 Mon Sep 17 00:00:00 2001 From: RenzoPrats Date: Mon, 1 Jul 2024 18:16:35 -0300 Subject: [PATCH 4/5] feat: created date range custom question --- .../date-range/date-range.component.html | 18 +++++ .../date-range/date-range.component.scss | 0 .../date-range/date-range.component.spec.ts | 22 ++++++ .../date-range/date-range.component.ts | 77 +++++++++++++++++++ .../src/lib/survey/components/daterange.ts | 51 ++++++------ 5 files changed, 145 insertions(+), 23 deletions(-) create mode 100644 libs/shared/src/lib/survey/components/date-range/date-range.component.html create mode 100644 libs/shared/src/lib/survey/components/date-range/date-range.component.scss create mode 100644 libs/shared/src/lib/survey/components/date-range/date-range.component.spec.ts create mode 100644 libs/shared/src/lib/survey/components/date-range/date-range.component.ts diff --git a/libs/shared/src/lib/survey/components/date-range/date-range.component.html b/libs/shared/src/lib/survey/components/date-range/date-range.component.html new file mode 100644 index 0000000000..d73d3ad0e3 --- /dev/null +++ b/libs/shared/src/lib/survey/components/date-range/date-range.component.html @@ -0,0 +1,18 @@ +
+
+ {{ dateMin | date : 'yyyy-MM-dd' }} + + {{ dateMax | date : 'yyyy-MM-dd' }} +
+
+ {{ data }} +
+
diff --git a/libs/shared/src/lib/survey/components/date-range/date-range.component.scss b/libs/shared/src/lib/survey/components/date-range/date-range.component.scss new file mode 100644 index 0000000000..e69de29bb2 diff --git a/libs/shared/src/lib/survey/components/date-range/date-range.component.spec.ts b/libs/shared/src/lib/survey/components/date-range/date-range.component.spec.ts new file mode 100644 index 0000000000..b25c4bf54a --- /dev/null +++ b/libs/shared/src/lib/survey/components/date-range/date-range.component.spec.ts @@ -0,0 +1,22 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { DateRangeComponent } from './date-range.component'; + +describe('DateRangeComponent', () => { + let component: DateRangeComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [DateRangeComponent], + }).compileComponents(); + + fixture = TestBed.createComponent(DateRangeComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/libs/shared/src/lib/survey/components/date-range/date-range.component.ts b/libs/shared/src/lib/survey/components/date-range/date-range.component.ts new file mode 100644 index 0000000000..eb4a698a44 --- /dev/null +++ b/libs/shared/src/lib/survey/components/date-range/date-range.component.ts @@ -0,0 +1,77 @@ +import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core'; +import { FormsModule, ReactiveFormsModule } from '@angular/forms'; // Required for ngModel +import { CommonModule } from '@angular/common'; +import { DatePipe } from '@angular/common'; + +/** + * Component for displaying the date range question + */ +@Component({ + selector: 'shared-date-range', + standalone: true, + imports: [CommonModule, FormsModule, ReactiveFormsModule], + templateUrl: './date-range.component.html', + styleUrls: ['./date-range.component.scss'], + providers: [DatePipe], +}) +export class DateRangeComponent implements OnInit { + /** Date minimum of the range */ + @Input() dateMin!: string; // Format: 'YYYY-MM-DD' + /** Date maximum of the range */ + @Input() dateMax!: string; // Format: 'YYYY-MM-DD' + /** Data to display on the date range */ + @Input() data!: string; + /** Output for the date change */ + @Output() dateChange = new EventEmitter(); + /** Max value for the range question */ + public max = 1; + /** Range question value */ + public rangeValue = 1; + + /** + * Component for displaying the date range question + * + * @param datePipe Angular date pipe + */ + constructor(private datePipe: DatePipe) {} + + ngOnInit() { + this.buildDateRange(); + } + + /** build date range question */ + private buildDateRange() { + const dateMinFormatted = new Date(this.dateMin); // Parse the ISO string to a Date object + const dateMinMilliseconds = dateMinFormatted.getTime(); // Get the time in milliseconds since the Unix epoch + const dateMinMinutes = Math.floor(dateMinMilliseconds / (1000 * 60)); // Convert milliseconds to minutes + + const dateMaxFormatted = new Date(this.dateMax); // Parse the ISO string to a Date object + const dateMaxMilliseconds = dateMaxFormatted.getTime(); // Get the time in milliseconds since the Unix epoch + const dateMaxMinutes = Math.floor(dateMaxMilliseconds / (1000 * 60)); // Convert milliseconds to minutes + + // set the max value for the range input taking account the window of dates in dateMin and dateMax + this.max = (dateMaxMinutes - dateMinMinutes) / (60 * 24); // convert to days + + if (this.data) { + const currentDateFormatted = new Date(this.data); // Parse the ISO string to a Date object + const currentDateMilliseconds = currentDateFormatted.getTime(); // Get the time in milliseconds since the Unix epoch + const currentDateMinutes = Math.floor( + currentDateMilliseconds / (1000 * 60) + ); // Convert milliseconds to minutes + // set the value in the range input too + this.rangeValue = (currentDateMinutes - dateMinMinutes) / (60 * 24); // convert to days + } + } + + /** On change range */ + public onRangeChange() { + // format date min + const dateMinFormatted = new Date(this.dateMin); + // add range to the date + dateMinFormatted.setDate(dateMinFormatted.getDate() + this.rangeValue); + // transform to the format yyyy-MM-dd + this.data = this.datePipe.transform(dateMinFormatted, 'yyyy-MM-dd') ?? ''; + // emit current value + this.dateChange.emit(this.data); + } +} diff --git a/libs/shared/src/lib/survey/components/daterange.ts b/libs/shared/src/lib/survey/components/daterange.ts index 8a8ebe7dc2..bdd56e6066 100644 --- a/libs/shared/src/lib/survey/components/daterange.ts +++ b/libs/shared/src/lib/survey/components/daterange.ts @@ -2,13 +2,13 @@ import { ComponentCollection, JsonMetadata, Serializer, - SurveyError, SvgRegistry, } from 'survey-core'; import { Question, QuestionText } from '../types'; import { DomService } from '../../services/dom/dom.service'; import { CustomPropertyGridComponentTypes } from './utils/components.enum'; import { registerCustomPropertyEditor } from './utils/component-register'; +import { DateRangeComponent } from './date-range/date-range.component'; /** * Inits the geospatial component. @@ -34,10 +34,6 @@ export const init = ( questionJSON: { name: 'daterange', type: 'text', - inputType: 'range', - step: 1, - default: 1, - min: 1, }, category: 'Custom Questions', onInit: (): void => { @@ -54,8 +50,6 @@ export const init = ( }, onSetValue: (obj: QuestionText, value: any) => { obj.setPropertyValue('dateMin', value); - // obj.addError(new SurveyError('This is a custom error message')); - // console.log(obj.hasErrors()); }, }); // max date @@ -78,26 +72,37 @@ export const init = ( ); }, onAfterRender: (question: Question, el: HTMLElement): void => { + // hides the input element + const element = el.getElementsByTagName('input')[0].parentElement; + if (element) element.style.display = 'none'; + const data = question.toJSON(); - // console.log(data); - const dateMin = data.dateMin; - const date = new Date(dateMin); // Parse the ISO string to a Date object - // console.log('date = ', date); - const milliseconds = date.getTime(); // Get the time in milliseconds since the Unix epoch - const minutes = Math.floor(milliseconds / (1000 * 60)); // Convert milliseconds to minutes - const dateMax = data.dateMax; - const date2 = new Date(dateMax); // Parse the ISO string to a Date object - // console.log('date2 = ', date2); - const milliseconds2 = date2.getTime(); // Get the time in milliseconds since the Unix epoch - const minutes2 = Math.floor(milliseconds2 / (1000 * 60)); // Convert milliseconds to minutes + // check if it has date min and date max before render + if (data.dateMin && data.dateMax) { + const dateMinMilliseconds = new Date(data.dateMin).getTime(); // Get the time in milliseconds since the Unix epoch + const dateMaxMilliseconds = new Date(data.dateMax).getTime(); // Get the time in milliseconds since the Unix epoch + + // check if date max is later than date min + if (dateMaxMilliseconds > dateMinMilliseconds) { + // render the DateRangeComponent + const daterange = domService.appendComponentToBody( + DateRangeComponent, + el + ); + const instance: DateRangeComponent = daterange.instance; + + instance.dateMin = data.dateMin; + instance.dateMax = data.dateMax; - const diff = (minutes2 - minutes) / (60 * 24) + 1; + // inits the map with the value of the question + if (question.value) instance.data = question.value; - // Set the max property dynamically - const inputElement = el.querySelector('input[type="range"]'); - if (inputElement) { - inputElement.setAttribute('max', diff.toString()); + // updates the question value when the range changes + instance.dateChange.subscribe((res) => { + question.value = res; + }); + } } }, }; From 9a7a14ccc6a171640c87257ca1118267f3035038 Mon Sep 17 00:00:00 2001 From: RenzoPrats Date: Tue, 2 Jul 2024 18:09:54 -0300 Subject: [PATCH 5/5] feat: added default value, added icon, removed console logs --- .../src/lib/survey/components/daterange.ts | 24 +++++++++++++++---- .../src/lib/survey/components/resource.ts | 1 - .../src/lib/survey/custom-question-types.ts | 1 - .../src/lib/survey/widgets/text-widget.ts | 2 -- 4 files changed, 20 insertions(+), 8 deletions(-) diff --git a/libs/shared/src/lib/survey/components/daterange.ts b/libs/shared/src/lib/survey/components/daterange.ts index bdd56e6066..52edbe8658 100644 --- a/libs/shared/src/lib/survey/components/daterange.ts +++ b/libs/shared/src/lib/survey/components/daterange.ts @@ -21,16 +21,16 @@ export const init = ( domService: DomService, componentCollectionInstance: ComponentCollection ): void => { - // registers icon-geospatial in the SurveyJS library + // registers icon-daterange in the SurveyJS library SvgRegistry.registerIconFromSvg( - 'daterange', - ' ' + 'icon-daterange', + '' ); const component = { name: 'daterange', title: 'Date Range', - iconName: 'icon-geospatial', + iconName: 'icon-daterange', questionJSON: { name: 'daterange', type: 'text', @@ -71,6 +71,22 @@ export const init = ( CustomPropertyGridComponentTypes.dateTypeDisplayer ); }, + /** + * Set default date min and date max + * + * @param question The current resource question + */ + onLoaded(question: Question): void { + const data = question.toJSON(); + if (!data.dateMin) { + question.dateMin = new Date(); + } + + if (!data.dateMax) { + question.dateMax = new Date(new Date().getTime() + 24 * 60 * 60 * 1000); // one day later before the current + question.update; + } + }, onAfterRender: (question: Question, el: HTMLElement): void => { // hides the input element const element = el.getElementsByTagName('input')[0].parentElement; diff --git a/libs/shared/src/lib/survey/components/resource.ts b/libs/shared/src/lib/survey/components/resource.ts index ec8f81052b..707876ed86 100644 --- a/libs/shared/src/lib/survey/components/resource.ts +++ b/libs/shared/src/lib/survey/components/resource.ts @@ -633,7 +633,6 @@ export const init = ( }, // Display of add button for resource question ans set placeholder, if any onAfterRender: (question: QuestionResource, el: HTMLElement): void => { - console.log(question); const survey: SurveyModel = question.survey as SurveyModel; survey.loadedRecords = loadedRecords; diff --git a/libs/shared/src/lib/survey/custom-question-types.ts b/libs/shared/src/lib/survey/custom-question-types.ts index 841b94af31..b52cc6fac9 100644 --- a/libs/shared/src/lib/survey/custom-question-types.ts +++ b/libs/shared/src/lib/survey/custom-question-types.ts @@ -8,7 +8,6 @@ import * as UsersComponent from './components/users'; import * as GeospatialComponent from './components/geospatial'; import * as DateRangeComponent from './components/daterange'; import { Apollo } from 'apollo-angular'; -import { TranslateService } from '@ngx-translate/core'; /** * Custom question types for the survey creator toolbox diff --git a/libs/shared/src/lib/survey/widgets/text-widget.ts b/libs/shared/src/lib/survey/widgets/text-widget.ts index 13d05f653f..fd8214e86d 100644 --- a/libs/shared/src/lib/survey/widgets/text-widget.ts +++ b/libs/shared/src/lib/survey/widgets/text-widget.ts @@ -64,7 +64,6 @@ export const init = ( obj.inputType || '' ), onPropertyEditorUpdate: (obj: QuestionText, propertyEditor: any) => { - console.log(obj.inputType); if (!!obj && !!obj.inputType) { propertyEditor.inputType = obj.inputType; } @@ -135,7 +134,6 @@ export const init = ( question.inputType ) ) { - console.log(question.inputType); pickerDiv = document.createElement('div'); pickerDiv.classList.add('flex', 'min-h-[36px]'); const pickerInstance = createPickerInstance(