richeditor/media_box: add ErrorMessages and Disabled

media/media_box.go

@@ -90,7 +90,8 @@
 			Label(field.Label).
 			Config(cfg).
 			Disabled(field.Disabled).
-			Readonly(readonly)
+			Readonly(readonly).
+			ErrorMessages(field.Errors...)
 	}
 }
 
@@ -114,13 +115,14 @@
 }
 
 type QMediaBoxBuilder struct {
-	fieldName string
-	label     string
-	value     *media_library.MediaBox
-	config    *media_library.MediaBoxConfig
-	db        *gorm.DB
-	disabled  bool
-	readonly  bool
+	fieldName     string
+	label         string
+	value         *media_library.MediaBox
+	config        *media_library.MediaBoxConfig
+	db            *gorm.DB
+	disabled      bool
+	readonly      bool
+	errorMessages []string
 }
 
 func QMediaBox(db *gorm.DB) (r *QMediaBoxBuilder) {
@@ -160,6 +162,11 @@
 	return b
 }
 
+func (b *QMediaBoxBuilder) ErrorMessages(v ...string) (r *QMediaBoxBuilder) {
+	b.errorMessages = v
+	return b
+}
+
 func (b *QMediaBoxBuilder) MarshalHTML(c context.Context) (r []byte, err error) {
 	if b.fieldName == "" {
 		panic("FieldName required")
@@ -181,6 +188,15 @@
 				mediaBoxThumbnails(ctx, b.value, b.fieldName, b.config, b.disabled, b.readonly),
 			).Name(mediaBoxThumbnailsPortalName(b.fieldName)),
 			web.Portal().Name(portalName),
+			h.Iff(len(b.errorMessages) > 0, func() h.HTMLComponent {
+				var compos []h.HTMLComponent
+				for _, errMsg := range b.errorMessages {
+					compos = append(compos, h.Div().Attr("v-pre", true).Text(errMsg))
+				}
+				return h.Div().Class("d-flex flex-column ps-4 py-1 ga-1 text-caption").
+					ClassIf("text-error", len(b.errorMessages) > 0 && !b.disabled).
+					ClassIf("text-grey", b.disabled).Children(compos...)
+			}),
 		).Class("pb-4").
 			Rounded(true),
 	).MarshalHTML(c)

richeditor/redactor/redactor.custom.css

@@ -1,7 +1,27 @@
 .redactor-toolbar {
   z-index: 5;
 }
+
 .redactor-styles {
   max-height: 50vh;
   overflow-y: auto;
 }
+
+.redactor-error .redactor-box.redactor-styles-on {
+  border: 1px solid rgb(var(--v-theme-error));
+}
+
+.reactor-disable .redactor-box.redactor-styles-on {
+  border: 1px solid rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
+}
+
+.redactor-disable-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.05);
+  pointer-events: all;
+  z-index: 6;
+}

richeditor/richeditor.go

@@ -27,14 +27,16 @@
 )
 
 type RichEditorBuilder struct {
-	db          *gorm.DB
-	name        string
-	value       string
-	label       string
-	placeholder string
-	plugins     []string
-	setPlugins  bool
-	rawConfig   interface{}
+	db            *gorm.DB
+	name          string
+	value         string
+	label         string
+	placeholder   string
+	plugins       []string
+	setPlugins    bool
+	rawConfig     interface{}
+	errorMessages []string
+	disabled      bool
 }
 
 func RichEditor(db *gorm.DB, name string) (r *RichEditorBuilder) {
@@ -69,6 +71,16 @@
 	return b
 }
 
+func (b *RichEditorBuilder) ErrorMessages(errMsgs ...string) (r *RichEditorBuilder) {
+	b.errorMessages = errMsgs
+	return b
+}
+
+func (b *RichEditorBuilder) Disabled(disabled bool) (r *RichEditorBuilder) {
+	b.disabled = disabled
+	return b
+}
+
 func (b *RichEditorBuilder) MarshalHTML(ctx context.Context) ([]byte, error) {
 	p := Plugins
 	if b.setPlugins {
@@ -80,16 +92,34 @@
 	} else {
 		redactorB.Config(redactor.Config{Plugins: p})
 	}
+
 	r := h.Components(
 		v.VSheet(
 			h.Label(b.label).Class("v-label theme--light"),
-			redactorB,
+			h.Div().Style("position:relative").
+				ClassIf("redactor-error", len(b.errorMessages) > 0 && !b.disabled).
+				ClassIf("redactor-disable", b.disabled).
+				Children(
+					redactorB,
+					h.Iff(b.disabled, func() h.HTMLComponent {
+						return h.Div().Class("redactor-disable-overlay")
+					}),
+				),
 			h.Div(
 				media.QMediaBox(b.db).FieldName(fmt.Sprintf("%s_richeditor_medialibrary", b.name)).
 					Value(&media_library.MediaBox{}).Config(&media_library.MediaBoxConfig{
 					AllowType: "image",
 				}),
 			).Class("hidden-screen-only"),
+			h.Iff(len(b.errorMessages) > 0, func() h.HTMLComponent {
+				var compos []h.HTMLComponent
+				for _, errMsg := range b.errorMessages {
+					compos = append(compos, h.Div().Attr("v-pre", true).Text(errMsg))
+				}
+				return h.Div().Class("d-flex flex-column ps-4 py-1 ga-1 text-caption").
+					ClassIf("text-error", len(b.errorMessages) > 0 && !b.disabled).
+					ClassIf("text-grey", b.disabled).Children(compos...)
+			}),
 		).Class("pb-4").Rounded(true).Attr("data-type", "redactor").Attr("style", "position: relative; z-index:1;"),
 	)
 	return r.MarshalHTML(ctx)