diff --git a/server/schemas/new/questions.json b/server/schemas/new/questions.json index 1baa1dc..d6616b5 100644 --- a/server/schemas/new/questions.json +++ b/server/schemas/new/questions.json @@ -409,6 +409,122 @@ } ] }, + { + "prpId": 3, + "title": "todayButton", + "sectionId": 2, + "parts": [ + { + "part": 1, + "viewType": "select", + "fixValues": [ + { + "id": 0, + "value": "false" + }, + { + "id": 1, + "value": "true" + } + ] + } + ] + }, + { + "prpId": 4, + "title": "yearsList", + "sectionId": 2, + "parts": [ + { + "part": 1, + "viewType": "select", + "fixValues": [ + { + "id": 0, + "value": "false" + }, + { + "id": 1, + "value": "true" + } + ] + } + ] + }, + { + "prpId": 5, + "title": "monthList", + "sectionId": 2, + "parts": [ + { + "part": 1, + "viewType": "select", + "fixValues": [ + { + "id": 0, + "value": "false" + }, + { + "id": 1, + "value": "true" + } + ] + } + ] + }, + { + "prpId": 6, + "title": "rangeDates", + "sectionId": 2, + "parts": [ + { + "part": 1, + "viewType": "select", + "fixValues": [ + { + "id": 0, + "value": "false" + }, + { + "id": 1, + "value": "true" + } + ] + } + ] + }, + { + "prpId": 7, + "title": "switchType", + "sectionId": 2, + "parts": [ + { + "part": 1, + "viewType": "select", + "fixValues": [ + { + "id": 0, + "value": "false" + }, + { + "id": 1, + "value": "true" + } + ] + } + ] + }, + { + "prpId": 8, + "title": "style", + "sectionId": 2, + "parts": [ + { + "part": 1, + "viewType": "text" + } + ] + }, { "prpId": 3001, "title": "required", @@ -435,6 +551,91 @@ { "id": 1, "title": "Validations" + }, + { + "id": 2, + "title": "Options" + } + ] + }, + { + "schemaId": "TimePicker", + "paramUrl": "TimePicker", + "schemaType": "part", + "title": "TimePicker", + "image": "/assets/images/time.png", + "questions": [ + { + "prpId": 1, + "title": "Caption", + "parts": [ + { + "part": 1, + "viewType": "text" + } + ] + }, + { + "prpId": 2, + "title": "Css Class", + "parts": [ + { + "part": 1, + "viewType": "text" + } + ] + }, + { + "prpId": 3, + "title": "clockType", + "sectionId": 2, + "parts": [ + { + "part": 1, + "viewType": "select", + "fixValues": [ + { + "id": 0, + "value": "12h" + }, + { + "id": 1, + "value": "24h" + } + ] + } + ] + }, + { + "prpId": 3001, + "title": "required", + "sectionId": 1, + "parts": [ + { + "part": 1, + "viewType": "select", + "fixValues": [ + { + "id": 0, + "value": "No" + }, + { + "id": 1, + "value": "Yes" + } + ] + } + ] + } + ], + "sections": [ + { + "id": 1, + "title": "Validations" + }, + { + "id": 2, + "title": "Options" } ] }, diff --git a/server/schemas/newSchema/questions.json b/server/schemas/newSchema/questions.json index 51e4ae1..ddd6cc9 100644 --- a/server/schemas/newSchema/questions.json +++ b/server/schemas/newSchema/questions.json @@ -387,6 +387,203 @@ } ] }, + { + "prpId": 3, + "title": "todayButton", + "sectionId": 2, + "parts": [ + { + "part": 1, + "viewType": "select", + "fixValues": [ + { + "id": 0, + "value": "false" + }, + { + "id": 1, + "value": "true" + } + ] + } + ] + }, + { + "prpId": 4, + "title": "yearsList", + "sectionId": 2, + "parts": [ + { + "part": 1, + "viewType": "select", + "fixValues": [ + { + "id": 0, + "value": "false" + }, + { + "id": 1, + "value": "true" + } + ] + } + ] + }, + { + "prpId": 5, + "title": "monthList", + "sectionId": 2, + "parts": [ + { + "part": 1, + "viewType": "select", + "fixValues": [ + { + "id": 0, + "value": "false" + }, + { + "id": 1, + "value": "true" + } + ] + } + ] + }, + { + "prpId": 6, + "title": "rangeDates", + "sectionId": 2, + "parts": [ + { + "part": 1, + "viewType": "select", + "fixValues": [ + { + "id": 0, + "value": "false" + }, + { + "id": 1, + "value": "true" + } + ] + } + ] + }, + { + "prpId": 7, + "title": "switchType", + "sectionId": 2, + "parts": [ + { + "part": 1, + "viewType": "select", + "fixValues": [ + { + "id": 0, + "value": "false" + }, + { + "id": 1, + "value": "true" + } + ] + } + ] + }, + { + "prpId": 8, + "title": "style", + "sectionId": 2, + "parts": [ + { + "part": 1, + "viewType": "text" + } + ] + }, + { + "prpId": 3001, + "title": "required", + "sectionId": 1, + "parts": [ + { + "part": 1, + "viewType": "select", + "fixValues": [ + { + "id": 0, + "value": "No" + }, + { + "id": 1, + "value": "Yes" + } + ] + } + ] + } + ], + "sections": [ + { + "id": 1, + "title": "Validations" + }, + { + "id": 2, + "title": "Options" + } + ] + }, + { + "schemaId": "timepicker", + "paramUrl": "timepicker", + "schemaType": "part", + "title": "TimePicker", + "image": "/assets/images/time.png", + "questions": [ + { + "prpId": 1, + "title": "Caption", + "parts": [ + { + "part": 1, + "viewType": "text" + } + ] + }, + { + "prpId": 2, + "title": "Css Class", + "parts": [ + { + "part": 1, + "viewType": "text" + } + ] + }, + { + "prpId": 3, + "title": "clockType", + "sectionId": 2, + "parts": [ + { + "part": 1, + "viewType": "select", + "fixValues": [ + { + "id": 0, + "value": "12h" + }, + { + "id": 1, + "value": "24h" + } + ] + } + ] + }, { "prpId": 3001, "title": "required", @@ -413,6 +610,10 @@ { "id": 1, "title": "Validations" + }, + { + "id": 2, + "title": "Options" } ] }, diff --git a/src/SchemaUtil.ts b/src/SchemaUtil.ts index 52ee2cf..da7bc63 100644 --- a/src/SchemaUtil.ts +++ b/src/SchemaUtil.ts @@ -144,7 +144,7 @@ export default class SchemaUtil { part: 1, values: [ { - id : 1, + id: 1, value: innerValue, }, ], @@ -550,6 +550,7 @@ export default class SchemaUtil { propId: number ): IFixValue[] { const retVal = values ? [...values] : []; + console.log("alireza",result,values,propId) const property = result.properties.find((x) => x.propId == propId); if (property) { if (property.edited) { diff --git a/src/components/modules/ModuleFactory.ts b/src/components/modules/ModuleFactory.ts index 4a0387f..d1fdabd 100644 --- a/src/components/modules/ModuleFactory.ts +++ b/src/components/modules/ModuleFactory.ts @@ -14,6 +14,7 @@ import DatePickerModule from "./text-base/date-picker/DatePickerModule"; import IModuleFactory from "./IModuleFactory"; import QuestionModule from "./question/QuestionModule"; import SectionModule from "./section/SectionModule"; +import TimePickerModule from "./text-base/timePicker/TimePickerModule"; export default class ModuleFactory implements IModuleFactory { public create( @@ -78,6 +79,10 @@ export default class ModuleFactory implements IModuleFactory { module = new DatePickerModule(owner, container, isABuiltIn, model); break; } + case "timepicker": { + module = new TimePickerModule(owner, container, isABuiltIn, model); + break; + } } return module; diff --git a/src/components/modules/text-base/ITextBaseModuleDataModel.ts b/src/components/modules/text-base/ITextBaseModuleDataModel.ts index 7948d00..ca1286e 100644 --- a/src/components/modules/text-base/ITextBaseModuleDataModel.ts +++ b/src/components/modules/text-base/ITextBaseModuleDataModel.ts @@ -1,4 +1,7 @@ import IPartBaseModuleDataModel from "../IPartBaseModuleDataModel"; +import IDatepickerOptions from "./date-picker/DatePickerOptions"; export default interface ITextBaseModuleDataModel - extends IPartBaseModuleDataModel {} + extends IPartBaseModuleDataModel { + options?: Partial +} diff --git a/src/components/modules/text-base/date-picker/DatePickerModule.ts b/src/components/modules/text-base/date-picker/DatePickerModule.ts index 63c16fe..ab6241a 100644 --- a/src/components/modules/text-base/date-picker/DatePickerModule.ts +++ b/src/components/modules/text-base/date-picker/DatePickerModule.ts @@ -1,16 +1,96 @@ -import { IQuestionPart } from "basiscore"; +import SchemaUtil from "../../../../SchemaUtil"; import IWorkspaceComponent from "../../../workspace/IWorkspaceComponent"; import TextBaseModule from "../TextBaseModule"; import layout from "./assets/layout.html"; import "./assets/style.css"; +import IDateQuestionPart from "./IDateQuestionPart"; +import { + IFixValue, + IQuestionPart, + ViewType, + IAnswerSchema, + IUserActionResult, +} from "basiscore"; export default class DatePickerModule extends TextBaseModule { + private readonly TODAY_BUTTON_ID = 3; + private readonly YEARS_LIST_ID = 4; + private readonly MONTH_LIST_ID = 5; + protected readonly RANGE_DATES_ID = 6; + protected readonly SWITCH_TYPE_ID = 7; + protected readonly STYLE_ID = 8; + constructor( owner: HTMLElement, component: IWorkspaceComponent, isABuiltIn: boolean, - model: IQuestionPart + questionPart: IDateQuestionPart ) { - super(layout, owner, component, "Datepicker", isABuiltIn, model); + super(layout, owner, component, "Datepicker", isABuiltIn, questionPart); + if (questionPart) { + this.data.options = { + todayButton: questionPart.todayButton, + yearsList: questionPart.yearsList, + monthList: questionPart.monthList, + rangeDates: questionPart.rangeDates, + switchType: questionPart.switchType, + style: questionPart.style, + }; + } + } + + protected getAnswerSchema(): IAnswerSchema { + if(!this.data.options){ + this.data.options = {} + } + var ans = super.getAnswerSchema(); + SchemaUtil.addSimpleValueProperty( + ans, + this.data.options.todayButton == true ? 1 : 0, + this.TODAY_BUTTON_ID + ); + SchemaUtil.addSimpleValueProperty( + ans, + this.data.options.yearsList == true ? 1 : 0, + this.YEARS_LIST_ID + ); + SchemaUtil.addSimpleValueProperty( + ans, + this.data.options.yearsList == true ? 1 : 0, + this.MONTH_LIST_ID + ); + SchemaUtil.addSimpleValueProperty( + ans, + this.data.options.rangeDates == true ? 1 : 0, + this.RANGE_DATES_ID + ); + SchemaUtil.addSimpleValueProperty( + ans, + this.data.options.switchType == true ? 1 : 0, + this.SWITCH_TYPE_ID + ); + SchemaUtil.addSimpleValueProperty( + ans, + this.data.options.style, + this.STYLE_ID + ); + return ans; + } + public update(userAction: IUserActionResult): void { + super.update(userAction); + if(!this.data.options){ + this.data.options = {}; + } + this.data.options.monthList = SchemaUtil.getPropertyValue(userAction,this.MONTH_LIST_ID) == 1 + this.data.options.yearsList = SchemaUtil.getPropertyValue(userAction,this.YEARS_LIST_ID) == 1 + this.data.options.rangeDates = SchemaUtil.getPropertyValue(userAction,this.RANGE_DATES_ID) == 1 + this.data.options.todayButton = SchemaUtil.getPropertyValue(userAction,this.TODAY_BUTTON_ID) == 1 + this.data.options.switchType = SchemaUtil.getPropertyValue(userAction,this.SWITCH_TYPE_ID) == 1 + this.data.options.style= SchemaUtil.getPropertyValue(userAction,this.SWITCH_TYPE_ID) + } + public getPartSchema(part: number): IQuestionPart { + const retVal = super.getPartSchema(part) + retVal.options = this.data.options + return retVal } } diff --git a/src/components/modules/text-base/date-picker/DatePickerOptions.ts b/src/components/modules/text-base/date-picker/DatePickerOptions.ts new file mode 100644 index 0000000..0a14015 --- /dev/null +++ b/src/components/modules/text-base/date-picker/DatePickerOptions.ts @@ -0,0 +1,9 @@ +export default interface IDatepickerOptions { + todayButton: boolean; + yearsList: boolean; + monthList: boolean; + rangeDates: boolean; + switchType: boolean; + style: string; + clockType: "24h" | "12h"; +} diff --git a/src/components/modules/text-base/date-picker/IDateQuestionPart.ts b/src/components/modules/text-base/date-picker/IDateQuestionPart.ts new file mode 100644 index 0000000..71a46c5 --- /dev/null +++ b/src/components/modules/text-base/date-picker/IDateQuestionPart.ts @@ -0,0 +1,10 @@ +import { IQuestionPart } from "basiscore"; + +export default interface IDateQuestionPart extends IQuestionPart { + todayButton: boolean; + yearsList: boolean; + monthList: boolean; + rangeDates: boolean; + switchType: boolean; + style: string; +} diff --git a/src/components/modules/text-base/timePicker/ITimeQuestionPart.ts b/src/components/modules/text-base/timePicker/ITimeQuestionPart.ts new file mode 100644 index 0000000..73d1f56 --- /dev/null +++ b/src/components/modules/text-base/timePicker/ITimeQuestionPart.ts @@ -0,0 +1,5 @@ +import { IQuestionPart } from "basiscore"; + +export default interface ITimeQuestionPart extends IQuestionPart { + clockType: "24h" | "12h"; +} diff --git a/src/components/modules/text-base/timePicker/TimePickerModule.ts b/src/components/modules/text-base/timePicker/TimePickerModule.ts new file mode 100644 index 0000000..5f33673 --- /dev/null +++ b/src/components/modules/text-base/timePicker/TimePickerModule.ts @@ -0,0 +1,51 @@ +import SchemaUtil from "../../../../SchemaUtil"; +import IWorkspaceComponent from "../../../workspace/IWorkspaceComponent"; +import TextBaseModule from "../TextBaseModule"; +import layout from "./assets/layout.html"; +import "./assets/style.css"; +import ITimeQuestionPart from "./ITimeQuestionPart"; +import { IQuestionPart, IAnswerSchema, IUserActionResult } from "basiscore"; + +export default class TimePickerModule extends TextBaseModule { + private readonly CLOCK_TYPE_ID = 3; + constructor( + owner: HTMLElement, + component: IWorkspaceComponent, + isABuiltIn: boolean, + questionPart: ITimeQuestionPart + ) { + super(layout, owner, component, "Timepicker", isABuiltIn, questionPart); + if (!this.data.options) { + this.data.options = {}; + } + if (questionPart) { + this.data.options.clockType = questionPart.clockType; + } + } + + protected getAnswerSchema(): IAnswerSchema { + if (!this.data.options) { + this.data.options = {}; + } + var ans = super.getAnswerSchema(); + SchemaUtil.addSimpleValueProperty( + ans, + this.data.options.clockType == "24h" ? 1 : 0, + this.CLOCK_TYPE_ID + ); + return ans; + } + public update(userAction: IUserActionResult): void { + super.update(userAction); + if (!this.data.options) { + this.data.options = {}; + } + this.data.options.clockType = + SchemaUtil.getPropertyValue(userAction, this.CLOCK_TYPE_ID) == 1 ? "24h" : "12h"; + } + public getPartSchema(part: number): IQuestionPart { + const retVal = super.getPartSchema(part); + retVal.options = this.data.options; + return retVal; + } +} diff --git a/src/components/modules/text-base/timePicker/assets/layout.html b/src/components/modules/text-base/timePicker/assets/layout.html new file mode 100644 index 0000000..6ba1ad1 --- /dev/null +++ b/src/components/modules/text-base/timePicker/assets/layout.html @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/modules/text-base/timePicker/assets/style.css b/src/components/modules/text-base/timePicker/assets/style.css new file mode 100644 index 0000000..8671f13 --- /dev/null +++ b/src/components/modules/text-base/timePicker/assets/style.css @@ -0,0 +1,24 @@ +[data-bc-sm-board] [data-input] { + pointer-events: none; +} + +[data-bc-sm-question-module] input[type="time"][data-input] { + padding: 0.1em 0.4em; + display: inline-block; + border: 1px solid #c7d6db; + background: #f5f8f9; + border-radius: 4px; + transition: border 0.3s linear 0s; + box-sizing: border-box; + width: 100%; + font-size: 12px; + color: #555; + height: 30px; +} + +[data-bc-sm-question-module] input[type="time"][data-input]:focus { + border-color: #66afe9; + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(102, 175, 233, 0.6); + outline: 0 none; + background: #fff8ee; +} \ No newline at end of file diff --git a/wwwroot/assets/images/time.png b/wwwroot/assets/images/time.png new file mode 100644 index 0000000..b750fa3 Binary files /dev/null and b/wwwroot/assets/images/time.png differ