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 myFormValue struct {
	Values1 []string
	Values2 []string
	Value3  string
}

type User struct {
	Login string
	Name  string
}

var selectedItems1 = []*User{
	{Login: "sam", Name: "Sam"},
	{Login: "charles", Name: "Charles"},
}

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

var selectedItems2 = []*User{
	{Login: "charles", Name: "Charles"},
}

var selectedItems3 = []*User{
	{Login: "charles", Name: "Charles"},
}

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

var globalState = &myFormValue{
	Values1: []string{
		"sam",
		"charles",
	},
	Values2: []string{
		"charles",
	},
	Value3: "charles",
}

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

var loadMoreRes *vuetifyx.AutocompleteDataSource
var pagingRes *vuetifyx.AutocompleteDataSource
var 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",
			KeywordColumns: []string{
				"Name",
			},
			PerPage: 50,
		},
		"loadMore",
	)

	pagingRes = listing.ConfigureAutocompleteDataSource(
		&presets.AutocompleteDataSourceConfig{
			OptionValue: "ID",
			OptionText:  "Name",
			KeywordColumns: []string{
				"Name",
			},
			PerPage:  20,
			IsPaging: true,
			OrderBy:  "Name",
		},
		"paging",
	)

}

func VuetifyAutocomplete(ctx *web.EventContext) (pr web.PageResponse, err error) {
	result := h.Ul()
	for _, v := range globalState.Values1 {
		result.AppendChildren(h.Li().Text(v))
	}
	pr.Body = VContainer(
		h.H1("An auto complete that you can select multiple options with static data"),
		VAutocomplete().
			Items(options1).
			FieldName("Values1").
			ItemText("Name").
			ItemValue("Login").
			Label("Static Options").
			Value(globalState.Values1),
		result,

		h.H1("An auto complete that you can select multiple options from data source by loading more"),
		vuetifyx.VXAutocomplete().
			FieldName("Values2").
			Label("Load options from data source").
			SetDataSource(loadMoreRes),

		h.H1("An auto complete that you can select multiple options from data source resource by paging"),
		vuetifyx.VXAutocomplete().
			FieldName("Values2").
			Label("Load options from data source").
			SetDataSource(pagingRes),

		h.H1("VSelect"),
		VSelect().
			Items(options1).    // Items is the data source
			ItemText("Name").   // ItemText is the value that would be displayed to user. the argument is the corresponding field name in the Items. here is user.Name
			ItemValue("Login"). // ItemValue is the value that will be passed with the form. same with ItemText, here is user.Login
			FieldName("Value3").
			Solo(true).
			Value(globalState.Value3),
		h.Pre(globalState.Value3),
		VBtn("Update").
			Color("success").
			OnClick("update"),
	)
	return
}

func update(ctx *web.EventContext) (r web.EventResponse, err error) {
	globalState = &myFormValue{}
	ctx.MustUnmarshalForm(globalState)

	selectedItems1 = []*User{}
	for _, login := range globalState.Values1 {
		for _, u := range options1 {
			if u.Login == login {
				selectedItems1 = append(selectedItems1, u)
			}
		}
	}

	selectedItems2 = []*User{}
	for _, login := range globalState.Values2 {
		for _, u := range options2 {
			if u.Login == login {
				selectedItems2 = append(selectedItems2, u)
			}
		}
	}

	selectedItems3 = []*User{}
	for _, u := range options1 {
		if u.Login == globalState.Value3 {
			selectedItems3 = append(selectedItems3, u)
		}
	}
	r.Reload = true

	return
}

var VuetifyAutocompletePB = web.Page(VuetifyAutocomplete).
	EventFunc("update", update)

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

// @snippet_end