From cd63f7072aade2b99d0ebad0a6eb53a665e923d1 Mon Sep 17 00:00:00 2001 From: Harshita Poojary Date: Thu, 13 Jun 2024 13:13:50 -0700 Subject: [PATCH] fix: DatePicker component --- zero_true/__init__.py | 3 +- zt_backend/models/components/date_picker.py | 76 +++++++++++++++++ zt_backend/models/generate_schema.py | 4 +- zt_backend/models/notebook.py | 2 + .../src/components/ComponentWrapper.vue | 2 + zt_frontend/src/types/date_picker.d.ts | 84 +++++++++++++++++++ 6 files changed, 169 insertions(+), 2 deletions(-) create mode 100644 zt_backend/models/components/date_picker.py create mode 100644 zt_frontend/src/types/date_picker.d.ts diff --git a/zero_true/__init__.py b/zero_true/__init__.py index 778ab9e1..54ac65bf 100644 --- a/zero_true/__init__.py +++ b/zero_true/__init__.py @@ -19,4 +19,5 @@ from zt_backend.models.components.html import HTML, pygwalker from zt_backend.models.state.state import state from zt_backend.models.state.state import global_state -from zt_backend.models.components.chat_ui import chat_ui \ No newline at end of file +from zt_backend.models.components.chat_ui import chat_ui +from zt_backend.models.components.date_picker import DatePicker \ No newline at end of file diff --git a/zt_backend/models/components/date_picker.py b/zt_backend/models/components/date_picker.py new file mode 100644 index 00000000..80714416 --- /dev/null +++ b/zt_backend/models/components/date_picker.py @@ -0,0 +1,76 @@ +from pydantic import Field, validator, constr, field_validator +from pydantic.types import Literal +from zt_backend.models.components.zt_component import ZTComponent +from zt_backend.models.state.user_state import UserContext +from typing import List, Optional, Union +from datetime import datetime, date + + +type_str = "date" +month_var = "month" + +''' +today_date = datetime.today().date().isoformat() +today_date_obj = datetime.strptime(today_date, "%Y-%m-%d").date() +# Get the current date and time +now = datetime.now() + +# Extract the current month and year +current_month = now.month - 1 # 0-12 for months +current_year = now.year + +print(today_date) +print(type(today_date)) +print(type(today_date_obj)) +''' + + +class DatePicker(ZTComponent): + """Date Picker component allows a user to select a date""" + component: str = Field("v-date-picker", description="Vue component name") + hide_weekdays: Optional[bool] = Field(False, description="Hide the days of the week letters in the calendar view") + landscape: Optional[bool] = Field(False, description="Puts the Date Picker component into landscape mode.") + next_icon: str = Field('$next', description="Sets the icon for next month/year button in the Date Picker Component") + prev_icon: str = Field('$prev', description="Sets the icon for prev month/year button in the Date Picker Component") + view_mode: Literal[f'{month_var}', 'months', 'year'] = Field('month', description="Determines which picker is being displayed. Allowed values: 'month', 'months', 'year'") + weekdays: Optional[List[int]] = Field([0, 1, 2, 3, 4, 5, 6], description="An array of weekdays to display") + disabled: Optional[bool] = Field(False, description="Determines if the Date Picker component is disabled") + color: Optional[str] = Field('primary', pre=True, description="Color of the Calendar. Can be custom or standard Material color") + width: Optional[int] = Field(100, description="Width of the Date Picker component") + height: Optional[int] = Field(100, description="Height of the Date Picker component") + triggerEvent: str = Field('update:modelValue', description="Trigger event for when to run based on the selected value") + + ''' + type: Literal[f'{type_str}'] = Field('date', description="Type of the value in date picker") # Non-editable field + # value: datetime = Field(datetime.today().date().isoformat(), description="Selected date value") + value: str = Field(today_date, description="Selected date value") + month: Union[int, str] = Field(f'{current_month}', description="The current month number to show in the Date picker view")#change + year: int = Field(current_year, description="The current year number to show") + ''' + + ''' + @validator('weekdays', always=True) + def validate_weekdays(cls, v): + if all(isinstance(day, int) and 0 <= day <= 6 for day in v): + return v + else: + raise ValueError("All items in weekdays must be integers between 0 and 6 inclusive") + + @field_validator('value', mode="before") + def validate_iso_date(cls, v): + if v is None: + return v + return validate_iso_date_format(v) + + @validator('value', always=True) + def get_value_from_global_state(cls, value, values): + id = values.get('id') # Get the id if it exists in the field values + execution_state = UserContext.get_state() + try: + if execution_state and id and id in execution_state.component_values: # Check if id exists in global_state + return execution_state.component_values[id] # Return the value associated with id in global_state + except Exception as e: + e + return value # If id doesn't exist in global_state, return the original value + ''' + diff --git a/zt_backend/models/generate_schema.py b/zt_backend/models/generate_schema.py index 27ce4147..b8a54147 100644 --- a/zt_backend/models/generate_schema.py +++ b/zt_backend/models/generate_schema.py @@ -20,6 +20,7 @@ from .components.timer import Timer from .components.iframe import iFrame from .components.html import HTML +from .components.date_picker import DatePicker import json def generate_json(model, name): @@ -62,4 +63,5 @@ def generate_schema(): generate_json(Text,'text') generate_json(Timer,'timer') generate_json(iFrame,'iframe') - generate_json(HTML,'html') \ No newline at end of file + generate_json(HTML,'html') + generate_json(DatePicker, 'date_picker') \ No newline at end of file diff --git a/zt_backend/models/notebook.py b/zt_backend/models/notebook.py index 3e85c52d..38f4eb3a 100644 --- a/zt_backend/models/notebook.py +++ b/zt_backend/models/notebook.py @@ -18,6 +18,7 @@ from zt_backend.models.components.autocomplete import Autocomplete from zt_backend.models.components.card import Card from zt_backend.models.components.timer import Timer +from zt_backend.models.components.date_picker import DatePicker def deserialize_component(data: Dict[str, Any]) -> ZTComponent: component_map = { @@ -34,6 +35,7 @@ def deserialize_component(data: Dict[str, Any]) -> ZTComponent: "v-autocomplete": Autocomplete, "v-card": Card, "v-timer": Timer, + "v-date-picker": DatePicker, "plotly-plot": PlotlyComponent # add other component types here } diff --git a/zt_frontend/src/components/ComponentWrapper.vue b/zt_frontend/src/components/ComponentWrapper.vue index bef19b42..6981c62a 100644 --- a/zt_frontend/src/components/ComponentWrapper.vue +++ b/zt_frontend/src/components/ComponentWrapper.vue @@ -48,6 +48,7 @@ import { VImg, VAutocomplete, VCard, + VDatePicker } from "vuetify/lib/components/index.mjs"; import { VDataTable } from "vuetify/components/VDataTable"; import TextComponent from "@/components/TextComponent.vue"; @@ -68,6 +69,7 @@ export default { "v-autocomplete": VAutocomplete, "v-card": VCard, "v-text": TextComponent, + "v-date-picker": VDatePicker, "plotly-plot": PlotlyPlot, }, emits: ["runCode"], diff --git a/zt_frontend/src/types/date_picker.d.ts b/zt_frontend/src/types/date_picker.d.ts new file mode 100644 index 00000000..0bb0f023 --- /dev/null +++ b/zt_frontend/src/types/date_picker.d.ts @@ -0,0 +1,84 @@ +/* eslint-disable */ +/** + * This file was automatically generated by json-schema-to-typescript. + * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file, + * and run json-schema-to-typescript to regenerate this file. + */ + +/** + * Unique id for a component + */ +export type Id = string; +/** + * Optional variable name associated with a component + */ +export type VariableName = string; +/** + * Vue component name + */ +export type Component = string; +/** + * Hide the days of the week letters in the calendar view + */ +export type HideWeekdays = boolean | null; +/** + * Puts the Date Picker component into landscape mode. + */ +export type Landscape = boolean | null; +/** + * Sets the icon for next month/year button in the Date Picker Component + */ +export type NextIcon = string; +/** + * Sets the icon for prev month/year button in the Date Picker Component + */ +export type PrevIcon = string; +/** + * Determines which picker is being displayed. Allowed values: 'month', 'months', 'year' + */ +export type ViewMode = "month" | "months" | "year"; +/** + * An array of weekdays to display + */ +export type Weekdays = number[] | null; +/** + * Determines if the Date Picker component is disabled + */ +export type Disabled = boolean | null; +/** + * Color of the Calendar. Can be custom or standard Material color + */ +export type Color = string | null; +/** + * Width of the Date Picker component + */ +export type Width = number | null; +/** + * Height of the Date Picker component + */ +export type Height = number | null; +/** + * Trigger event for when to run based on the selected value + */ +export type Triggerevent = string; + +/** + * Date Picker component allows a user to select a date + */ +export interface DatePicker { + id: Id; + variable_name?: VariableName; + component?: Component; + hide_weekdays?: HideWeekdays; + landscape?: Landscape; + next_icon?: NextIcon; + prev_icon?: PrevIcon; + view_mode?: ViewMode; + weekdays?: Weekdays; + disabled?: Disabled; + color?: Color; + width?: Width; + height?: Height; + triggerEvent?: Triggerevent; + [k: string]: unknown; +}