fix: DatePicker component

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
+from zt_backend.models.components.chat_ui import chat_ui
+from zt_backend.models.components.date_picker import DatePicker

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
+    '''
+

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')
+    generate_json(HTML,'html')
+    generate_json(DatePicker, 'date_picker')

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
     }

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"],

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;
+}