/* eslint-disable ts/no-use-before-define */ /* eslint-disable no-alert */ /* eslint-disable no-console -- this file is the dropdown/component sandbox; log statements demonstrate event flow */ import type { BreadcrumbItem } from '../app/breadcrumb'; import type { AppMenuItem } from '../app/menu'; import type { CardHeaderDropdownArgs } from '../card/card-header-with-options'; import type { DropdownListOption } from '../dropdown'; import type { ImageDropdownDataItem } from '../dropdown/image-dropdown'; import type { SmartDropdownCategoryItem, SmartDropdownSearchResultItem } from '../dropdown/smart-dropdown'; import type { TimegridCalendarAddClickedArgs, TimegridCalendarEvent } from '../fullcalendar/timegrid-calendar'; import { Prop, toNative } from 'vue-facing-decorator'; import { globalState } from '../../app/global-state'; import TsxComponent, { Component } from '../../app/vuetsx'; import { PowerduckViewModelBase } from '../../common/base-component'; import Accordion from '../accordion/accordion'; import { AccordionPage } from '../accordion/accordion-page'; import BootstrapToggle, { BootstrapToggleSize } from '../bootstrap-toggle'; import Button from '../button/button'; import { ButtonLayout, ButtonSize } from '../button/button-layout'; import TextButton from '../button/text-button'; import Card from '../card/card'; import CardBody from '../card/card-body'; import CardHeader from '../card/card-header'; import CardHeaderWithOptions from '../card/card-header-with-options'; import DataTableStatic from '../datatable/datatable-static'; import DropdownList, { MultiselectMode } from '../dropdown'; import DropdownButton from '../dropdown-button/dropdown-button'; import DropdownButtonItem from '../dropdown-button/dropdown-button-item'; import DropdownButtonSeparator from '../dropdown-button/dropdown-button-separator'; import CountryDropdown from '../dropdown/country-dropdown'; import ImageDropdown from '../dropdown/image-dropdown'; import SmartDropdown from '../dropdown/smart-dropdown'; import Fieldset from '../form/fieldset'; import FlexContainer from '../form/flex-container'; import FooterButtons from '../form/footer-buttons'; import FlexFormItem from '../form/form-item-flex'; import Separator from '../form/separator'; import ValidationResultDisplayer from '../form/validation-result-displayer'; import FullCalendarDraggableEvent from '../fullcalendar/fullcalendar-draggable-event'; import HtmlLiteral from '../html-literal/html-literal'; import UploadImageAndCropButton from '../image-crop/upload-and-crop'; import CheckBox from '../input/checkbox'; import ColorPicker from '../input/color-picker'; import DaterangePicker from '../input/daterange-picker'; import DatetimePicker from '../input/datetime-picker'; import NumericInput, { NumericInputMode } from '../input/numeric-input'; import TextBox from '../input/textbox'; import WysiwygEditor from '../input/wysiwig'; import ModalSection from '../modal-wrap/modal-section'; import ModalSectionWrapper from '../modal-wrap/modal-section-wrapper'; import Modal, { ModalSize } from '../modal/modal'; import ModalBody from '../modal/modal-body'; import ModalFooter from '../modal/modal-footer'; interface TagItem { id: string; text: string; } @Component class TestAllComponentsPageComponent extends PowerduckViewModelBase { name: string = null; // Needs to have =null suffixed so that TS compiler takes it into account boolValue: boolean = null; selectedOptions: any = null; timeViewType: string = 'resourceTimeline'; timeEvents: TimegridCalendarEvent[] = []; blockModal: boolean = false; color: string = '#FF00FF'; numberVal: number = 1; tags: TagItem[] = []; selectedTagIds: string[] = []; count: number = 0; selectedImageDropdownItems: ImageDropdownDataItem[] = null; date: Temporal.PlainDateTime = Temporal.PlainDateTime.from('2026-04-04'); dateRange: any = null; selectedCountry: string = 'SVK'; selectedCountries: string[] = ['SVK', 'CZE']; protected get breadcrumbItems(): BreadcrumbItem[] { return [ { text: 'Home', url: '/', icon: 'icon-direction', }, { text: 'Hello world', url: null, }, ]; } protected get menuItems(): AppMenuItem[] { return []; } mounted() { globalState._helloInstance = this; } getLineChartHeaderOptions(): CardHeaderDropdownArgs[] { const retVal: CardHeaderDropdownArgs[] = []; retVal.push({ text: 'Jedna moznosti', icon: 'fas fa-download', clicked: () => alert('jedna'), }); retVal.push({ text: 'Dva moznostka', icon: 'fas fa-sync-alt', clicked: () => alert('dva'), }); return retVal; } getDummyDropdownOptions(): DropdownListOption[] { return [ { id: '1', someSpecific: true, text: 'Moznost 1' } as any, { id: '2', text: 'Moznost 2' }, ]; } addTimeEvent(e: TimegridCalendarAddClickedArgs) { const startTime = e.defaultDate; const endTime = startTime.add({ hours: 1 }); this.timeEvents.push({ id: `idd${Math.random() * (999999999 - 1)}${1}`, dataRow: { jedna: 'sdfsd', druha: 'sdfsdfsd' }, resourceId: e.resource != null ? e.resource.id : prompt('Room a or b?', 'a'), title: `Event cislo ${this.timeEvents.length}${1}`, start: startTime, end: endTime, }); } getImageDropdownSource(): ImageDropdownDataItem[] { return [ { id: 1, text: 'Kazuyoshi Funaki', subtitle: 'Nagano 98', imageUrl: 'https://upload.wikimedia.org/wikipedia/commons/6/69/Kazuyoshi_Funaki_%28JAP%29_2014.jpg' }, { id: 2, text: 'Masahiko Harada', subtitle: 'Nagano 98', imageUrl: 'https://img.olympics.com/images/image/private/t_1-1_300/f_auto/primary/kvwgfkitbetfq96l0jcd' }, ]; } getTagDropdown(): typeof DropdownList.prototype { return this.$refs.tagsDropdown as typeof DropdownList.prototype; } fireChangedEvent(e: string[]) { this.$nextTick(() => { this.getTagDropdown().close(); this.$nextTick(() => { this.selectedTagIds = e; }); }); } // 1. Static Categories categories: SmartDropdownCategoryItem[] = [ { id: 101, text: 'Skipass' }, { id: 102, text: 'Výlet lanovkou' }, { id: 103, text: 'Aquapass' }, { id: 104, text: 'Ubytovanie' }, { id: 105, text: 'Parkovanie' }, { id: 106, text: 'Eventy' }, { id: 107, text: 'Zazitky' }, { id: 108, text: 'Ine srandy' }, { id: 109, text: 'Vouchery' }, { id: 110, text: 'Pokemony' }, { id: 111, text: 'Kino' }, { id: 112, text: 'Restauracie' }, { id: 113, text: 'Este insie srandy' }, { id: 114, text: 'Sranda banda' }, ]; // 2. Selected State selectedItems: (SmartDropdownCategoryItem | SmartDropdownSearchResultItem)[] = []; // 3. Search Data Logic (Simulated Backend) async fetchSmartDropdownSearchData(query: string): Promise { console.log('Fetching for:', query); // Simulate network delay await new Promise(resolve => setTimeout(resolve, 500)); // 500ms delay const mockDb: SmartDropdownSearchResultItem[] = [ { id: 1, text: 'Hotel Grand Jasná', subtitle: 'Ubytovanie • Jasná', imageUrl: 'https://picsum.photos/200' }, { id: 2, text: 'Celosezónny Skipass', subtitle: 'Produkt • Nízke Tatry', imageUrl: 'https://picsum.photos/200' }, { id: 3, text: 'Hotel Rotunda', subtitle: 'Ubytovanie • Chopok', imageUrl: 'https://picsum.photos/200' }, { id: 4, text: 'Fresh Track', subtitle: 'Zážitok • Lomnica' }, { id: 5, text: 'Wellness Hotel', subtitle: 'Ubytovanie • Bešeňová' }, ]; return mockDb.filter(item => item.text.toLowerCase().includes(query.toLowerCase())); } // 4. Handle Change onSmartDropdownSelectionChange(newSelection: any[]) { console.log('Selection updated:', newSelection); this.selectedItems = newSelection; } // 2. Custom Sections (History & Inspiration) get customSections() { return [ { id: 'history', title: 'Nedávne vyhľadávania', items: [ { id: 'h1', text: 'Jasná', type: 'history' }, { id: 'h2', text: 'Vysoké Tatry', type: 'history' }, ], }, { id: 'inspiration', title: 'Váhate, kam cestovať najbližšie?', items: [ { id: 'insp1', text: 'Zadajte Kamkoľvek', type: 'special', icon: 'pin' }, { id: 'insp2', text: 'V mojej lokalite', type: 'special', icon: 'target' }, ], }, ]; } // 4. Custom Handler for History Delete removeSmartDropdownHistory(e: Event, id: string | number) { e.stopPropagation(); console.log('Removing history', id); // logic to remove from customSections... } render(h) { return (

Hello world from the boilerplate

{`Your name is: ${this.name?.length > 0 ? this.name : 'Not specified'}`}

{ this.name = e; }} subtitle="Some additional info about the field" /> { this.name = e; }} appendIcon="fas fa-user" /> { this.name = e; }} prependIcon="fas fa-user" /> { }} validationState={{ errorMessage: 'Unable to proceed, error...', mandatory: true, valid: false, validationDeclaration: null, }} /> { this.boolValue = e; }} /> { this.color = e; }} /> { this.dateRange = e; }} /> { this.date = e; }} /> { this.numberVal = e; }} /> { this.numberVal = e; }} /> { }} /> {/* Tu je tab usera Tu je tab settings Tu je tab usera Tu je tab settings */}

{/* Tu je tab usera Tu je tab settings */}

{ this.boolValue = e; }} /> { this.boolValue = e; }} />
); } } interface FormArgs { text: string; } @Component class CustomDropdownItemComponent extends TsxComponent implements FormArgs { count: number = 0; @Prop() text: string; render(h) { return (
{ // alert('wtf?'); this.count += 1; }} > {this.text} {' '} dpc count {this.count}
); } } const CustomDropdownItem = toNative(CustomDropdownItemComponent); const TestAllComponentsPage = toNative(TestAllComponentsPageComponent); export default TestAllComponentsPage;