Merge pull request #588 from qor5/feat-ui-reborn

style: style adjusting
qor5 · Sep 23, 2024 · d2bde63 · d2bde63
2 parents ef91d0c + 33a383f
commit d2bde63
Show file tree

Hide file tree

Showing 11 changed files with 142 additions and 103 deletions.
diff --git a/docs/docsrc/examples/examples_presets/detailing.go b/docs/docsrc/examples/examples_presets/detailing.go
@@ -7,6 +7,7 @@ import (
 
 	"github.com/qor5/admin/v3/presets"
 	"github.com/qor5/admin/v3/presets/actions"
+	"github.com/qor5/admin/v3/utils"
 	"github.com/qor5/web/v3"
 	. "github.com/qor5/x/v3/ui/vuetify"
 	vx "github.com/qor5/x/v3/ui/vuetifyx"
@@ -343,3 +344,28 @@ func PresetsDetailAfterTitle(b *presets.Builder, db *gorm.DB) (
 	})
 	return
 }
+
+func PresetsUtilsDialog(b *presets.Builder, db *gorm.DB) (
+	cust *presets.ModelBuilder,
+	cl *presets.ListingBuilder,
+	ce *presets.EditingBuilder,
+	dp *presets.DetailingBuilder,
+) {
+	cust, cl, ce, dp = PresetsHelloWorld(b, db)
+
+	dp = cust.RightDrawerWidth("800").Detailing("tab").Drawer(true)
+
+	dp.Only("Delected Dialog")
+	dp.Field("Delected Dialog").ComponentFunc(func(obj interface{}, field *presets.FieldContext, ctx *web.EventContext) h.HTMLComponent {
+		dialogPayload := utils.UtilDialogPayloadType{
+			Title:     "Confirm",
+			TypeField: "error",
+			ContentEl: h.Div(h.Text("are you sure?")),
+			Msgr:      utils.MustGetMessages(ctx.R),
+		}
+
+		return utils.CustomDialog(dialogPayload)
+	})
+
+	return
+}
diff --git a/docs/docsrc/examples/examples_presets/dialog_test.go b/docs/docsrc/examples/examples_presets/dialog_test.go
@@ -0,0 +1,36 @@
+package examples_presets
+
+import (
+	"net/http"
+	"testing"
+
+	"github.com/qor5/admin/v3/presets"
+	"github.com/qor5/admin/v3/presets/gorm2op"
+	"github.com/qor5/web/v3/multipartestutils"
+	// "github.com/theplant/gofixtures"
+)
+
+func TestPresetsUtilsDialog(t *testing.T) {
+	pb := presets.New().DataOperator(gorm2op.DataOperator(TestDB))
+	PresetsUtilsDialog(pb, TestDB)
+
+	cases := []multipartestutils.TestCase{
+		{
+			Name:  "show vx dialog",
+			Debug: true,
+			ReqFunc: func() *http.Request {
+				customerData.TruncatePut(SqlDB)
+				return multipartestutils.NewMultipartBuilder().
+					PageURL("/customers?__execute_event__=presets_DetailingDrawer&id=1&var_current_active=__current_active_of_c512ed84__").
+					BuildEventFuncRequest()
+			},
+			ExpectPageBodyContainsInOrder: []string{"vx-dialog", "type='error'", "title='Confirm'", "are you sure?"},
+		},
+	}
+
+	for _, c := range cases {
+		t.Run(c.Name, func(t *testing.T) {
+			multipartestutils.RunCase(t, c, pb)
+		})
+	}
+}
diff --git a/docs/docsrc/examples/examples_presets/mux.go b/docs/docsrc/examples/examples_presets/mux.go
@@ -54,6 +54,7 @@ func SamplesHandler(mux examples.Muxer) {
 	addExample(mux, db, PresetsDetailInlineEditValidate)
 	addExample(mux, db, PresetsDetailSimple)
 	addExample(mux, db, PresetsDetailListSection)
+	addExample(mux, db, PresetsUtilsDialog)
 	return
 }
 

diff --git a/go.mod b/go.mod
@@ -27,7 +27,7 @@ require (
 	github.com/qor/oss v0.0.0-20240729105053-88484a799a79
 	github.com/qor5/web v1.3.2
 	github.com/qor5/web/v3 v3.0.8
-	github.com/qor5/x/v3 v3.0.10-0.20240920065245-da883a8dc1d0
+	github.com/qor5/x/v3 v3.0.10-0.20240923055518-106596f5c644
 	github.com/samber/lo v1.47.0
 	github.com/shurcooL/sanitized_anchor_name v1.0.0
 	github.com/spf13/cast v1.6.0

diff --git a/go.sum b/go.sum
@@ -319,10 +319,10 @@ github.com/qor5/web v1.3.2 h1:zw796YJeDLe8vRwGR1cM+uS1ZuSkPutchBEXv2GgOhI=
 github.com/qor5/web v1.3.2/go.mod h1:LszskQJbFQDJwOeZC6j6afOiHxxyjrzz8B3zuBwfgKQ=
 github.com/qor5/web/v3 v3.0.8 h1:Fgr36QtGTK9Sb0YXU705a+oL7UoybfeBQ8FESXnTDSk=
 github.com/qor5/web/v3 v3.0.8/go.mod h1:32vdHHcZb2JimlcaclW9hLUyimdXjrllZDHTh3rl6d0=
-github.com/qor5/x/v3 v3.0.10-0.20240920030826-1b464ffd2613 h1:abpJE7KHhAbssCSPJ2YHCVPOKSGgdyN3MR+Fa7b0PPM=
-github.com/qor5/x/v3 v3.0.10-0.20240920030826-1b464ffd2613/go.mod h1:ebg7TORMQLVRlZyDyZbAsxbQoiN4wMBVhyFHdYxv6Tw=
-github.com/qor5/x/v3 v3.0.10-0.20240920065245-da883a8dc1d0 h1:SYj9aNlftQkBJ559hfsTC+5LEgy66LHjJIezLYo5JVE=
-github.com/qor5/x/v3 v3.0.10-0.20240920065245-da883a8dc1d0/go.mod h1:ebg7TORMQLVRlZyDyZbAsxbQoiN4wMBVhyFHdYxv6Tw=
+github.com/qor5/x/v3 v3.0.10-0.20240923031926-4715a7497269 h1:4CS1Fug99k+kyjfULtIQ05ROtPcJLQJS9Cr2bX6jedI=
+github.com/qor5/x/v3 v3.0.10-0.20240923031926-4715a7497269/go.mod h1:ebg7TORMQLVRlZyDyZbAsxbQoiN4wMBVhyFHdYxv6Tw=
+github.com/qor5/x/v3 v3.0.10-0.20240923055518-106596f5c644 h1:J0E/cE5nLtS4/tR9o+eHlww6wvCsxfaS0Tb4Nv024ZU=
+github.com/qor5/x/v3 v3.0.10-0.20240923055518-106596f5c644/go.mod h1:ebg7TORMQLVRlZyDyZbAsxbQoiN4wMBVhyFHdYxv6Tw=
 github.com/robfig/cron/v3 v3.0.1/go.mod h1:eQICP3HwyT7UooqI/z+Ov+PtYAWygg1TEWWzGIFLtro=
 github.com/rogpeppe/go-internal v1.3.0/go.mod h1:M8bDsm7K2OlrFYOpmOWEs/qY81heoFRclV5y23lUDJ4=
 github.com/rogpeppe/go-internal v1.12.0 h1:exVL4IDcn6na9z1rAb56Vxr+CgyK3nn3O+epU5NdKM8=

diff --git a/presets/detailing.go b/presets/detailing.go
@@ -252,7 +252,7 @@ func (b *DetailingBuilder) defaultPageFunc(ctx *web.EventContext) (r web.PageRes
 
 	r.Body = VContainer().Children(
 		notice,
-		h.Div().Class("d-flex flex-column ga-10", strings.Join(layoutClass, ", ")).Children(
+		h.Div().Class("d-flex flex-column", strings.Join(layoutClass, ", ")).Children(
 			actionButtonsCompo,
 			tabsContent,
 		),

diff --git a/presets/field.go b/presets/field.go
@@ -814,7 +814,7 @@ func (b *FieldsBuilder) toComponentWithFormValueKey(info *ModelInfo, obj interfa
 				comp = h.Div(
 					h.Div(titleComp).Class("section-title-wrap"),
 					h.Div(
-						v.VCard(rowsComp...).Variant(v.VariantFlat).Class("mx-0 mt-1 mb-4 px-4 pb-0 pt-4 section-body"),
+						v.VCard(rowsComp...).Variant(v.VariantFlat).Class("mx-0 mt-1  px-4 pb-0 pt-4 section-body"),
 					).Class("section-body border-b"),
 				).Class("section-wrap")
 			}

diff --git a/presets/presets.go b/presets/presets.go
@@ -830,27 +830,15 @@ func (b *Builder) openConfirmDialog(ctx *web.EventContext) (er web.EventResponse
 
 	er.UpdatePortals = append(er.UpdatePortals, &web.PortalUpdate{
 		Name: portal,
-		Body: web.Scope(VDialog(
-			VCard(
-				VCardTitle(h.Text(promptText)).Class("pa-6"),
-				VCardActions(
-					VSpacer(),
-					VBtn(cancelText).
-						Size(SizeSmall).
-						Variant(VariantOutlined).
-						Class("ml-2").
-						On("click", "locals.show = false"),
-
-					VBtn(okText).
-						Size(SizeSmall).
-						Color("primary").
-						Variant(VariantFlat).
-						Theme(ThemeLight).
-						Attr("@click", fmt.Sprintf("%s; locals.show = false", confirmEvent)),
-				).Class("pb-6 px-6"),
-			),
-		).MaxWidth("400px").Class("common-dialog").
-			Attr("v-model", "locals.show"),
+		Body: web.Scope(
+			vuetifyx.VXDialog().
+				Size(vuetifyx.DialogSizeDefault).
+				Title("Confirm").
+				Text(promptText).
+				CancelText(cancelText).
+				OkText(okText).
+				Attr("@click:ok", fmt.Sprintf("%s; locals.show = false", confirmEvent)).
+				Attr("v-model", "locals.show"),
 		).VSlot("{ locals }").Init("{show: true}"),
 	})
 

diff --git a/publish/version_compo.go b/publish/version_compo.go
@@ -74,10 +74,15 @@ func DefaultVersionComponentFunc(mb *presets.ModelBuilder, cfg ...VersionCompone
 		slug := primarySlugger.PrimarySlug()
 
 		div := h.Div().Class("tagList-bar-warp")
+
+		confirmDialogPayload := utils.UtilDialogPayloadType{
+			Text:     msgr.Areyousure,
+			OkAction: web.Plaid().EventFunc(web.Var("locals.action")).Query(presets.ParamID, slug).Go(),
+			Msgr:     utilsMsgr,
+		}
+
 		div.AppendChildren(
-			utils.ConfirmDialog(msgr.Areyousure, web.Plaid().EventFunc(web.Var("locals.action")).
-				Query(presets.ParamID, slug).Go(),
-				utilsMsgr),
+			utils.ConfirmDialog(confirmDialogPayload),
 		)
 
 		if !config.Top {

diff --git a/utils/confirm_dialog.go b/utils/confirm_dialog.go
@@ -6,13 +6,25 @@ import (
 	"github.com/qor5/admin/v3/presets"
 	"github.com/qor5/web/v3"
 	"github.com/qor5/x/v3/i18n"
-	. "github.com/qor5/x/v3/ui/vuetify"
+	vx "github.com/qor5/x/v3/ui/vuetifyx"
 	h "github.com/theplant/htmlgo"
 	"golang.org/x/text/language"
 )
 
 const I18nUtilsKey i18n.ModuleKey = "I18nUtilsKey"
 
+type UtilDialogPayloadType struct {
+	Title        string
+	TypeField    vx.VXDialogType
+	Size         vx.VXDialogSize
+	Text         string
+	ContentEl    h.HTMLComponent
+	OkAction     string
+	CancelAction string
+	HideClose    bool
+	Msgr         *Messages
+}
+
 func Install(b *presets.Builder) {
 	b.GetI18n().
 		RegisterForModule(language.English, I18nUtilsKey, Messages_en_US).
@@ -24,81 +36,48 @@ func MustGetMessages(r *http.Request) *Messages {
 	return i18n.MustGetModuleMessages(r, I18nUtilsKey, Messages_en_US).(*Messages)
 }
 
-func ConfirmDialog(msg string, okAction string, msgr *Messages) h.HTMLComponent {
-	return VDialog(
-		VCard(
-			VCardTitle(h.Text(msg)),
-			VCardActions(
-				VSpacer(),
-				VBtn(msgr.Cancel).
-					Variant(VariantFlat).
-					Class("ml-2").
-					On("click", "locals.commonConfirmDialog = false"),
+func ConfirmDialog(payload UtilDialogPayloadType) h.HTMLComponent {
+	if payload.Title == "" {
+		payload.Title = payload.Msgr.ModalTitleConfirm
+	}
 
-				VBtn(msgr.OK).
-					Color("primary").
-					Variant(VariantFlat).
-					Theme(ThemeDark).
-					Attr("@click", okAction),
-			),
-		),
-	).MaxWidth("600px").
+	return vx.VXDialog().
+		Title(payload.Title).
+		Text(payload.Text).
+		HideClose(true).
+		OkText(payload.Msgr.OK).
+		CancelText(payload.Msgr.Cancel).
+		Attr("@click:ok", payload.OkAction).
 		Attr("v-model", "locals.commonConfirmDialog")
 }
 
 func DeleteDialog(msg string, okAction string, msgr *Messages) h.HTMLComponent {
 	return web.Scope(
-		VDialog(
-			VCard(
-				VCardTitle(h.Text(msg)),
-				VCardActions(
-					VSpacer(),
-					VBtn(msgr.Cancel).
-						Variant(VariantFlat).
-						Class("ml-2").
-						On("click", "locals.deleteConfirmation = false"),
-
-					VBtn(msgr.OK).
-						Color("primary").
-						Variant(VariantFlat).
-						Theme(ThemeDark).
-						Attr("@click", okAction),
-				),
-			),
-		).MaxWidth("600px").
+		vx.VXDialog().
+			Title(msgr.ModalTitleConfirm).
+			Text(msg).
+			HideClose(true).
+			OkText(msgr.OK).
+			CancelText(msgr.Cancel).
+			Attr("@click:ok", okAction).
 			Attr("v-model", "locals.deleteConfirmation"),
 	).VSlot(" { locals }").Init(`{deleteConfirmation: true}`)
 }
 
-const CloseCustomDialog = "locals.customConfirmationDialog = false"
-
-func CustomDialog(title h.HTMLComponent, content h.HTMLComponent, okAction string, msgr *Messages) h.HTMLComponent {
-	Vcard := VCard()
-	if title != nil {
-		Vcard.AppendChildren(VCardTitle(title))
-	}
-	if content != nil {
-		Vcard.AppendChildren(VCardText(content))
+func CustomDialog(payload UtilDialogPayloadType) h.HTMLComponent {
+	if payload.Size == "" {
+		payload.Size = vx.DialogSizeLarge
 	}
-	Vcard.AppendChildren(
-		VCardActions(
-			VSpacer(),
-			VBtn(msgr.Cancel).
-				Variant(VariantFlat).
-				Class("ml-2").
-				On("click", CloseCustomDialog),
 
-			VBtn(msgr.OK).
-				Color("primary").
-				Variant(VariantFlat).
-				Theme(ThemeDark).
-				Attr("@click", okAction),
-		),
-	)
 	return web.Scope(
-		VDialog(
-			Vcard,
-		).MaxWidth("600px").
-			Attr("v-model", "locals.customConfirmationDialog"),
+		vx.VXDialog(
+			payload.ContentEl,
+		).Size(payload.Size).
+			Type(payload.TypeField).
+			Title(payload.Title).
+			OkText(payload.Msgr.OK).
+			CancelText(payload.Msgr.Cancel).
+			Attr("v-model", "locals.customConfirmationDialog").
+			Attr("@click:ok", payload.OkAction),
 	).VSlot(" { locals }").Init(`{ customConfirmationDialog: true }`)
 }
diff --git a/utils/messages.go b/utils/messages.go
@@ -1,21 +1,25 @@
 package utils
 
 type Messages struct {
-	OK     string
-	Cancel string
+	OK                string
+	Cancel            string
+	ModalTitleConfirm string
 }
 
 var Messages_en_US = &Messages{
-	OK:     "OK",
-	Cancel: "Cancel",
+	OK:                "OK",
+	Cancel:            "Cancel",
+	ModalTitleConfirm: "Confirm",
 }
 
 var Messages_zh_CN = &Messages{
-	OK:     "确定",
-	Cancel: "取消",
+	OK:                "确定",
+	Cancel:            "取消",
+	ModalTitleConfirm: "确认",
 }
 
 var Messages_ja_JP = &Messages{
-	OK:     "OK",
-	Cancel: "キャンセル",
+	OK:                "OK",
+	Cancel:            "キャンセル",
+	ModalTitleConfirm: "確認",
 }