docs/docsrc/examples/e10_vuetify_autocomplete/page.go

package e10_vuetify_autocomplete

// @snippet_begin(VuetifyAutoCompleteSample)

import (
	"fmt"

	"github.com/qor5/admin/presets"
	"github.com/qor5/admin/presets/gorm2op"
	. "github.com/qor5/ui/vuetify"
	"github.com/qor5/ui/vuetifyx"
	"github.com/qor5/web"
	h "github.com/theplant/htmlgo"
	"gorm.io/driver/sqlite"
	"gorm.io/gorm"
)

type (
	User struct {
		Login string
		Name  string
	}

	UserIcons struct {
		Login string `json:"text"`
		Name  string `json:"value"`
		Icon  string `json:"icon"`
	}

	Product struct {
		ID   uint `gorm:"primarykey"`
		Name string
	}
)

var (
	options = []*User{
		{Login: "sam", Name: "Sam"},
		{Login: "john", Name: "John"},
		{Login: "charles", Name: "Charles"},
	}

	iconOptions = []*UserIcons{
		{Login: "sam", Name: "Sam", Icon: "https://cdn.vuetifyjs.com/images/lists/1.jpg"},
		{Login: "john", Name: "John", Icon: "https://cdn.vuetifyjs.com/images/lists/2.jpg"},
		{Login: "charles", Name: "Charles", Icon: "https://cdn.vuetifyjs.com/images/lists/3.jpg"},
	}

	loadMoreRes   *vuetifyx.AutocompleteDataSource
	pagingRes     *vuetifyx.AutocompleteDataSource
	ExamplePreset *presets.Builder
)

func init() {
	db, err := gorm.Open(sqlite.Open("/tmp/my.db"), &gorm.Config{})
	if err != nil {
		panic(err)
	}

	db.AutoMigrate(&Product{})
	db.Where("1=1").Delete(&Product{})

	for i := 1; i < 300; i++ {
		db.Create(&Product{Name: fmt.Sprintf("Product %d", i)})
	}

	ExamplePreset = presets.New()
	ExamplePreset.URIPrefix(VuetifyAutoCompletePresetPath).DataOperator(gorm2op.DataOperator(db))
	listing := ExamplePreset.Model(&Product{}).Listing()
	loadMoreRes = listing.ConfigureAutocompleteDataSource(
		&presets.AutocompleteDataSourceConfig{
			OptionValue: "ID",
			OptionText:  "Name",
			OptionIcon: func(product interface{}) string {
				return fmt.Sprintf("https://cdn.vuetifyjs.com/images/lists/%d.jpg", product.(*Product).ID%4+1)
			},
			KeywordColumns: []string{
				"Name",
			},
			PerPage: 50,
		},
		"loadMore",
	)

	pagingRes = listing.ConfigureAutocompleteDataSource(
		&presets.AutocompleteDataSourceConfig{
			OptionValue: "ID",
			OptionText:  "Name",
			OptionIcon: func(product interface{}) string {
				return fmt.Sprintf("https://cdn.vuetifyjs.com/images/lists/%d.jpg", product.(*Product).ID%4+1)
			},
			KeywordColumns: []string{
				"Name",
			},
			PerPage:  20,
			IsPaging: true,
			OrderBy:  "Name",
		},
		"paging",
	)

}

func VuetifyAutocomplete(ctx *web.EventContext) (pr web.PageResponse, err error) {
	pr.Body = VContainer(
		h.H1("Select many (default)"),
		vuetifyx.VXAutocomplete().
			Label("Load options from a list").
			Items(options).
			FieldName("Values1").
			ItemText("Name").
			ItemValue("Login"),

		h.H1("Select one"),
		vuetifyx.VXAutocomplete().
			FieldName("Values2").
			Label("Load options from a list").
			Items(options).
			ItemText("Name").
			ItemValue("Login").
			Multiple(false),

		h.H1("Has icon"),
		vuetifyx.VXAutocomplete().
			Label("Load options from a list").
			Items(iconOptions).
			HasIcon(true),

		h.H1("Load more from remote resource"),
		vuetifyx.VXAutocomplete().
			FieldName("Values2").
			Label("Load options from data source").
			SetDataSource(loadMoreRes),

		h.H1("Paging with remote resource"),
		vuetifyx.VXAutocomplete().
			FieldName("Values2").
			Label("Load options from data source").
			SetDataSource(pagingRes),

		h.H1("Sorting"),
		vuetifyx.VXAutocomplete().
			FieldName("Values2").
			Label("Load options from data source").
			Sorting(true).
			SetDataSource(pagingRes).ChipColor("red"),
	)
	return
}

var VuetifyAutocompletePB = web.Page(VuetifyAutocomplete)

const VuetifyAutoCompletePath = "/samples/vuetify-auto-complete"
const VuetifyAutoCompletePresetPath = "/samples/vuetify-auto-complete-preset"

// @snippet_end