Added ImageInput and replaced ImageField with it in the create and update forms (#31)

Author: Antonio171003

spra-web/src/main/scala/net/wiringbits/spra/ui/web/components/CreateGuesser.scala

@@ -29,7 +29,7 @@ object CreateGuesser {
             case ColumnType.Email =>
               TextInput(source = field.name, isRequired = isRequired, validate = required)
             case ColumnType.Image =>
-              ImageField(source = field.name, isRequired = isRequired, validate = required)
+              ImageInput(source = field.name, isRequired = isRequired, validate = required)(ImageField(source = "src"))
             case ColumnType.Number =>
               NumberInput(source = field.name, isRequired = isRequired, validate = required)
             case ColumnType.Reference(reference, source) =>

spra-web/src/main/scala/net/wiringbits/spra/ui/web/components/EditGuesser.scala

@@ -33,7 +33,7 @@ object EditGuesser {
           case ColumnType.Date => DateTimeInput(source = field.name, disabled = field.disabled)
           case ColumnType.Text => TextInput(source = field.name, disabled = field.disabled)
           case ColumnType.Email => TextInput(source = field.name, disabled = field.disabled)
-          case ColumnType.Image => ImageField(source = field.name)
+          case ColumnType.Image => ImageInput(source = field.name)(ImageField(source = "src"))
           case ColumnType.Number => NumberInput(source = field.name, disabled = field.disabled)
           case ColumnType.Reference(reference, source) =>
             ReferenceInput(

spra-web/src/main/scala/net/wiringbits/spra/ui/web/facades/reactadmin/ImageField.scala

@@ -8,20 +8,20 @@ import scala.scalajs.js.|
 object ImageField extends ExternalComponent {
   case class Props(
       source: String,
+      title: String,
+      sortable: Boolean = false,
       disabled: Boolean = false,
-      sx: js.Dynamic = js.Dynamic.literal(),
-      isRequired: Boolean = false,
-      validate: js.UndefOr[js.Any] = js.undefined
+      sx: js.Dynamic = js.Dynamic.literal()
   )
 
   def apply(
       source: String,
+      title: String = "title",
+      sortable: Boolean = false,
       disabled: Boolean = false,
-      sx: js.Dynamic = js.Dynamic.literal(),
-      isRequired: Boolean = false,
-      validate: js.UndefOr[js.Any] = js.undefined
+      sx: js.Dynamic = js.Dynamic.literal()
   ): BuildingComponent[_, _] = {
-    super.apply(Props(source, disabled, sx, isRequired, validate))
+    super.apply(Props(source, title, sortable, disabled, sx))
   }
 
   override val component: String | js.Object = ReactAdmin.ImageField

spra-web/src/main/scala/net/wiringbits/spra/ui/web/facades/reactadmin/ImageInput.scala

@@ -0,0 +1,29 @@
+package net.wiringbits.spra.ui.web.facades.reactadmin
+
+import slinky.core.{BuildingComponent, ExternalComponent}
+import scala.scalajs.js
+import scala.scalajs.js.|
+
+// https://marmelab.com/react-admin/ImageInput.html
+object ImageInput extends ExternalComponent {
+  case class Props(
+      source: String,
+      disabled: Boolean = false,
+      sx: js.Dynamic = js.Dynamic.literal(),
+      isRequired: Boolean = false,
+      validate: js.UndefOr[js.Any] = js.undefined
+  )
+
+  def apply(
+      source: String,
+      disabled: Boolean = false,
+      sx: js.Dynamic = js.Dynamic.literal(),
+      isRequired: Boolean = false,
+      validate: js.UndefOr[js.Any] = js.undefined,
+      onDrop: js.UndefOr[js.Function2[js.Array[js.Any], js.Function1[js.Array[js.Object], Unit], Unit]] = js.undefined
+  ): BuildingComponent[_, _] = {
+    super.apply(Props(source, disabled, sx, isRequired, validate))
+  }
+
+  override val component: String | js.Object = ReactAdmin.ImageInput
+}

spra-web/src/main/scala/net/wiringbits/spra/ui/web/facades/reactadmin/package.scala

@@ -14,7 +14,7 @@ package object reactadmin {
     val Admin, Resource, EditGuesser, ListGuesser, TextInput, ImageField, NumberInput, DateTimeInput, ReferenceInput,
         SelectInput, Button, DeleteButton, SaveButton, TopToolbar, Toolbar, Edit, SimpleForm, DateField, TextField,
         EmailField, NumberField, ReferenceField, DateInput, FilterButton, ExportButton, List, Datagrid, Create,
-        CreateButton: js.Object =
+        CreateButton, ImageInput: js.Object =
       js.native
   }
 }