diff --git a/VDSSample/ViewControllers/DatePickerViewController.swift b/VDSSample/ViewControllers/DatePickerViewController.swift index 7590e02..72a5a8e 100644 --- a/VDSSample/ViewControllers/DatePickerViewController.swift +++ b/VDSSample/ViewControllers/DatePickerViewController.swift @@ -7,9 +7,11 @@ import Foundation import VDS +import UIKit class DatePickerViewController: BaseViewController { + // Datepicker var label = Label() var disabledSwitch = Toggle() var requiredSwitch = Toggle() @@ -28,11 +30,50 @@ class DatePickerViewController: BaseViewController { items: DatePicker.DateFormat.allCases ) }() + // Calendar + //props + var indicators: [CalendarBase.CalendarIndicatorModel] = [] + var activeDates: [Date] = [] + var inactiveDates: [Date] = [] + var minDate: Date = Date().startOfMonth + var maxDate: Date = Date().endOfMonth + + //form + var containerBorderSwitch = Toggle() + var hideCurrentDateIndicatorSwitch = Toggle() + var indicatorOneSwitch = Toggle() + var indicatorTwoSwitch = Toggle() + var indicatorThreeSwitch = Toggle() + var clearActiveDatesSwitch = Toggle() + var clearInactiveDatesSwitch = Toggle() + var activeDatesField = TextField() + var inactiveDatesField = TextField() + var legendOneField = TextField() + var legendTwoField = TextField() + var legendThreeField = TextField() + + private var minDatePicker: UIDatePicker = UIDatePicker() + private var maxDatePicker: UIDatePicker = UIDatePicker() + private var indicatorOnePicker: UIDatePicker = UIDatePicker() + private var indicatorTwoPicker: UIDatePicker = UIDatePicker() + private var indicatorThreePicker: UIDatePicker = UIDatePicker() + private var activeDatePicker: UIDatePicker = UIDatePicker().with { $0.datePickerMode = .date } + private var inactiveDatePicker: UIDatePicker = UIDatePicker().with { $0.datePickerMode = .date } + + let indicatorOnePickerTag = 1 + let indicatorTwoPickerTag = 2 + let indicatorThreePickerTag = 3 + let minDatePickerTag = 4 + let maxDatePickerTag = 5 + let activeDatePickerTag = 6 + let inactiveDatePickerTag = 7 + override func viewDidLoad() { super.viewDidLoad() addContentTopView(view: component) setupModel() setupPicker() + setupCalendar() } override func setupForm(){ @@ -49,7 +90,7 @@ class DatePickerViewController: BaseViewController { addFormRow(label: "Error Text", view: errorTextField) addFormRow(label: "ToolTip Title", view: tooltipTitleTextField) addFormRow(label: "ToolTip Content", view: tooltipContentTextField) - + append(section: getCalendarSection()) disabledSwitch.onChange = { [weak self] sender in self?.component.isEnabled = !sender.isOn } @@ -153,3 +194,248 @@ class DatePickerViewController: BaseViewController { content: content) : nil } } + +extension DatePickerViewController { + + func getCalendarSection() -> FormSection { + let section = FormSection() + section.title = "Calendar Options" + section.addFormRow(label: "Hide Container Border", view: containerBorderSwitch) + section.addFormRow(label: "Hide Current Date Indicator", view: hideCurrentDateIndicatorSwitch) + section.addFormRow(label: "Min Date", view: minDatePicker) + section.addFormRow(label: "Max Date", view: maxDatePicker) + section.addFormRow(label: "Active Dates", view: activeDatesField) + section.addFormRow(label: "Select ActiveDate", view: activeDatePicker) + section.addFormRow(label: "Clear Active Dates", view: clearActiveDatesSwitch) + section.addFormRow(label: "Inactive Dates", view: inactiveDatesField) + section.addFormRow(label: "Select InActiveDate", view: inactiveDatePicker) + section.addFormRow(label: "Clear Inactive Dates", view: clearInactiveDatesSwitch) + section.addFormRow(label: "Indicator One", view: indicatorOneSwitch) + section.addFormRow(label: "Indicator Two", view: indicatorTwoSwitch) + section.addFormRow(label: "Indicator Three", view: indicatorThreeSwitch) + section.addFormRow(label: "Legend One", view: legendOneField) + section.addFormRow(label: "Legend Two", view: legendTwoField) + section.addFormRow(label: "Legend Three", view: legendThreeField) + section.addFormRow(label: "Indicator One Date", view: indicatorOnePicker) + section.addFormRow(label: "Indicator Two Date", view: indicatorTwoPicker) + section.addFormRow(label: "Indicator Three Date", view: indicatorThreePicker) + + + containerBorderSwitch.onChange = { [weak self] sender in + self?.updateCalendarModel() + } + + hideCurrentDateIndicatorSwitch.onChange = { [weak self] sender in + self?.updateCalendarModel() + } + + clearActiveDatesSwitch.onChange = { [weak self] sender in + self?.updateCalendarModel() + } + + clearInactiveDatesSwitch.onChange = { [weak self] sender in + self?.updateCalendarModel() + } + + legendOneField + .textPublisher + .sink { + [weak self] text in + self?.updateIndicatorData(label: text, date: self?.indicatorOnePicker.date, index: 0) + }.store(in: &subscribers) + + legendTwoField + .textPublisher + .sink { + [weak self] text in + self?.updateIndicatorData(label: text, date: self?.indicatorTwoPicker.date, index: 1) + }.store(in: &subscribers) + + legendThreeField + .textPublisher + .sink { + [weak self] text in + self?.updateIndicatorData(label: text, date: self?.indicatorThreePicker.date, index: 2) + }.store(in: &subscribers) + + indicatorOneSwitch.onChange = { [weak self] sender in + guard let self else { return } + if !sender.isOn { + self.indicators.removeAll() + } else { + self.setIndicatorsData() + } + self.updateCalendarModel() + } + + indicatorTwoSwitch.onChange = { [weak self] sender in + guard let self else { return } + if !sender.isOn { + if self.indicators.count > 2 { + self.indicators.removeLast() + self.indicators.removeLast() + } else if self.indicators.count == 2 { + self.indicators.removeLast() + } + } else { + self.setIndicatorsData() + } + self.updateCalendarModel() + } + + indicatorThreeSwitch.onChange = { [weak self] sender in + guard let self else { return } + if !sender.isOn { + if self.indicators.count > 2 { + self.indicators.removeLast() + } + } else { + self.setIndicatorsData() + } + self.updateCalendarModel() + } + + return section + } + + func updateCalendarModel() { + component.calendarModel = .init(surface: component.surface, + hideContainerBorder: containerBorderSwitch.isOn, + hideCurrentDateIndicator: hideCurrentDateIndicatorSwitch.isOn, + activeDates: activeDates, + inactiveDates: inactiveDates, + minDate: minDate, + maxDate: maxDate, + indicators: indicators) + } + + func setupCalendar() { + configurePicker(indicatorOnePicker) + indicatorOnePicker.tag = indicatorOnePickerTag + configurePicker(indicatorTwoPicker) + indicatorTwoPicker.tag = indicatorTwoPickerTag + configurePicker(indicatorThreePicker) + indicatorThreePicker.tag = indicatorThreePickerTag + configurePicker(minDatePicker) + minDatePicker.tag = minDatePickerTag + configurePicker(maxDatePicker) + maxDatePicker.tag = maxDatePickerTag + configurePicker(activeDatePicker) + activeDatePicker.tag = activeDatePickerTag + configurePicker(inactiveDatePicker) + inactiveDatePicker.tag = inactiveDatePickerTag + indicators = [ + .init(label: "Due Date", date: indicatorOnePicker.date), + .init(label: "Auto Pay", date: indicatorTwoPicker.date), + .init(label: "Scheduled", date: indicatorThreePicker.date) + ] + + let calendar = Calendar.current + let indicatorDate = calendar.startOfDay(for: calendar.date(byAdding: .day, value: 1, to: Date())!) + legendOneField.text = "Due Date" + legendTwoField.text = "Auto Pay" + legendThreeField.text = "Scheduled" + indicatorOneSwitch.isOn = true + indicatorTwoSwitch.isOn = true + indicatorThreeSwitch.isOn = true + hideCurrentDateIndicatorSwitch.isOn = false + indicatorOnePicker.date = indicatorDate + indicatorTwoPicker.date = indicatorDate + indicatorThreePicker.date = indicatorDate + updateIndicatorData(label: legendOneField.text ?? "", date: indicatorOnePicker.date, index: 0) + updateIndicatorData(label: legendTwoField.text ?? "", date: indicatorTwoPicker.date, index: 1) + updateIndicatorData(label: legendThreeField.text ?? "", date: indicatorThreePicker.date, index: 2) + + activeDatesField.isUserInteractionEnabled = false + inactiveDatesField.isUserInteractionEnabled = false + activeDatesField.isEnabled = false + inactiveDatesField.isEnabled = false + + minDatePicker.date = minDate + maxDatePicker.date = maxDate + + updateCalendarModel() + } + + func updateIndicatorData(label: String = "", date: Date?, index:Int) { + indicators[index].label = label + indicators[index].date = date ?? Date() + updateCalendarModel() + } + + func setIndicatorsData() { + if indicatorOneSwitch.isOn && indicatorTwoSwitch.isOn && indicatorThreeSwitch.isOn { + indicators = [ + .init(label: self.legendOneField.text ?? "", date: indicatorOnePicker.date), + .init(label: self.legendTwoField.text ?? "", date: indicatorTwoPicker.date), + .init(label: self.legendThreeField.text ?? "", date: indicatorThreePicker.date) + ] + } else if indicatorOneSwitch.isOn && indicatorTwoSwitch.isOn && !indicatorThreeSwitch.isOn { + indicators = [ + .init(label: self.legendOneField.text ?? "", date: indicatorOnePicker.date), + .init(label: self.legendTwoField.text ?? "", date: indicatorTwoPicker.date), + ] + + } else if indicatorOneSwitch.isOn && !indicatorTwoSwitch.isOn { + indicators = [ + .init(label: self.legendOneField.text ?? "", date: indicatorOnePicker.date), + ] + } + } + + func configurePicker(_ sender:UIDatePicker) { + // Set some of UIDatePicker properties + sender.timeZone = NSTimeZone.local + sender.backgroundColor = UIColor.white + + // Add an event to call onDidChangeDate function when value is changed. + sender.addTarget(self, action: #selector(self.datePickerValueChanged(_:)), for: .valueChanged) + } + + @objc func datePickerValueChanged(_ sender: UIDatePicker){ + + switch sender.tag { + case indicatorOnePickerTag: + updateIndicatorData(label: legendOneField.text ?? "", date: sender.date, index: 0) + case indicatorTwoPickerTag: + updateIndicatorData(label: legendTwoField.text ?? "", date: sender.date, index: 1) + case indicatorThreePickerTag: + updateIndicatorData(label: legendThreeField.text ?? "", date: sender.date, index: 2) + case minDatePickerTag: + minDate = sender.date + case maxDatePickerTag: + maxDate = sender.date + case activeDatePickerTag: + activeDates.append(sender.date) + var text = activeDatesField.text + if let textEmpty = text?.isEmpty, textEmpty == true { + text?.append("") + } else { + text?.append(", ") + } + text?.append("\(self.getSelectedDate(with: sender.date))") + clearActiveDatesSwitch.isOn = false + activeDatesField.text = text + case inactiveDatePickerTag: + inactiveDates.append(sender.date) + var text = inactiveDatesField.text + if let textEmpty = text?.isEmpty, textEmpty == true { + text?.append("") + } else { + text?.append(", ") + } + text?.append("\(self.getSelectedDate(with: sender.date))") + clearInactiveDatesSwitch.isOn = false + inactiveDatesField.text = text + default: break + } + } + + func getSelectedDate(with date:Date) -> String { + let dateFormatter: DateFormatter = DateFormatter() + dateFormatter.dateFormat = "MM/dd/yyyy" + let day: String = dateFormatter.string(from: date) + return day + } + +} diff --git a/VDSSample/ViewControllers/MenuViewController.swift b/VDSSample/ViewControllers/MenuViewController.swift index 197db25..9ec0747 100644 --- a/VDSSample/ViewControllers/MenuViewController.swift +++ b/VDSSample/ViewControllers/MenuViewController.swift @@ -74,12 +74,12 @@ class MenuViewController: UITableViewController, TooltipLaunchable { MenuComponent(title: "Button", completed: true, viewController: ButtonViewController.self), MenuComponent(title: "ButtonGroup", completed: true, viewController: ButtonGroupViewController.self), MenuComponent(title: "ButtonIcon", completed: true, viewController: ButtonIconViewController.self), - MenuComponent(title: "Calendar", completed: false, viewController: CalendarViewController.self), + MenuComponent(title: "Calendar", completed: true, viewController: CalendarViewController.self), MenuComponent(title: "Carousel Scrollbar", completed: true, viewController: CarouselScrollbarViewConttroller.self), MenuComponent(title: "Checkbox", completed: true, viewController: CheckboxViewController.self), MenuComponent(title: "CheckboxItem", completed: true, viewController: CheckboxItemViewController.self), MenuComponent(title: "CheckboxGroup", completed: true, viewController: CheckboxGroupViewController.self), - MenuComponent(title: "DatePicker", completed: false, viewController: DatePickerViewController.self), + MenuComponent(title: "DatePicker", completed: true, viewController: DatePickerViewController.self), MenuComponent(title: "DropdownSelect", completed: true, viewController: DropdownSelectViewController.self), MenuComponent(title: "Icon", completed: true, viewController: IconViewController.self), MenuComponent(title: "InputField", completed: true, viewController: InputFieldViewController.self),