NikolaySav / nova-json-schema-field

Laravel Nova field for displaying JSON schema data
https://novapackages.com/packages/nsavinov/nova-json-schema-field
26 stars 1 forks source link

Support for multiple html input types #5

Open rsubr opened 3 years ago

rsubr commented 3 years ago

@NikolaySav thanks a ton for this project.

In the edit form, all input fields are rendered as text. This makes it inconvenient for numeric fields and dates.

A single line fix to FormField.vue opens up this field to multiple HTML input types.

Original (lines 24-26):

  <div class="w-1/2 py-6">
      <input :id="key" type="text"
             class="w-full form-control form-input form-input-bordered"

New:

  <div class="w-1/2 py-6">
      <input :id="key" :type="property.format || property.type || 'text'"
             class="w-full form-control form-input form-input-bordered"

Now we can use this in the following schema:

  {
      "type": "object",
      "required": [
          "event_name",
          "start_date",
          "duration"
      ],
      "properties": {
          "event_name": {
              "description": "Event Name"
          },
          "start_date": {
              "type": "string",
              "format": "date",
              "description": "Start Date"
          },
          "duration": {
              "type": "number",
              "description": "Duration in Days"
          }
      }
  }

Now the event_name, start_date, duration fields are rendered using the appropriate HTML input fields.

Can you please update your code? Thanks!

rsubr commented 3 years ago

I created an improved version of this Nova Field. Thanks to @NikolaySav for his work.

https://github.com/rsubr/nova-json-schema-field

The calling API is a little different, it supports HTML text, numbers, dates and selects.