Add UI to allow user to delete/clear a field value

[rickpasetto]

Generated from https://github.com/Camberi/firecms/discussions/390

When editing a row in a collection, it would be great to be able to clear a field, especially an enum field specified by enumValues. Doing so would remove the field from storage of that entity. If the field is required, it should generate an error. Otherwise, it should be allowed to remove a field that's been set.

Hope this is enough information. Thanks @fgatti675 for encouraging filing an Issue.

[Andre3424]

@fgatti675 great, this would be very useful, because now we must edit changes in firestore. By when will 2.0.0 be ready? :-)

[fgatti675]

Added the clearable prop to string, number and date properties in the latest version :)

[rickpasetto]

@fgatti675 that's great! Thank you. So, now, if I set:

clearable: true

on a property, it should be able to be cleared? What does the UI look like for that?

(Sorry if this is a naive question; I'd done a

yarn add @camberi/firecms@next 

and it pulled down version 2.0.0-alpha.34, and I added the above clearable flag, but I don't see any difference in the UI (i.e. I don't see a "clear" icon on my properties). What might I be doing wrong?)

[fgatti675]

Hi, it simply adds a clear icon at the end of the input field, setting the value to null

[fgatti675]

Can you check if it work in the latest version? :) 2.0.0-alpha.35 I think there was a css issue

[rickpasetto]

Hi @fgatti675 . I just downloaded 2.0.0-alpha.37 and I still do not see a clear icon on a property that has enumValues (sorry). Other than adding the clearable: true flag, is there anything I am missing?

[fgatti675]

So we need to add it in multiple field bindings, it might be right in some of them but wrong in others, can you share your exact configuration? In the demo you can see a working example for name and category https://demo.firecms.co/c/ppp/B000P0MDMS

[rickpasetto]

@fgatti675 Thank you so much for helping with this! I see that example working. I think this might be my misunderstanding about the feature. What I want to be able to do is edit an existing field to clear it. In other words, a user wants to delete a value that's already stored in the database, not clear one as they are entering a new entity (although that's a good feature too). So, in the Collection view, I want to be able to hover over a field (that's clearable) and click on "X" to clear it. Make sense?

Here's a code snippet, in case it helps:

const types = buildEnumValues({
  "First": "first",
  "Second": "second",
  "Third": "third"
});
const styles = buildEnumValues({
  "title": "title",
  "body": "body",
  "caption": "caption"
})

const resourceMediaCollection = buildCollection({
  path: resourceMediaPath,
  alias: "resourceMedia",
  name: "Resource Media",
  icon: "Portrait", // https://mui.com/material-ui/material-icons/
  singularName: "Media Resource",
  properties: {
    type: {
      name: "Type",
      validation: { required: false },
      clearable: true,
      dataType: "string",
      enumValues: types
    },
    line1copy: {
      name: "Line 1",
      columnWidth: 350,
      description: "Line 1 Copy Format",
      dataType: "string",
      validation: { required: false },
    },
    line1fontStyle: {
      name: "Line 1 Font style",
      defaultValue: "title",
      validation: { required: false },
      clearable: true,
      dataType: "string",
      enumValues: styles
    },
    thumbnail: {
      name: "Thumbnail",
      validation: { required: false },
      clearable: true,
      dataType: "string",
      storage: {
          storagePath: "thumbnails",
          acceptedFiles: ["image/*"],
      }
    },
    mediaFiles: { 
      name: "Resource Media",
      dataType: "array",
      of: {
        dataType: "string",
        storage: {
          storagePath: "resourceMedia",
          acceptedFiles: ["image/*", "video/mp4"],
        }
      }
    },
  }
})

[fgatti675]

Hi @rickpasetto So having a clear button when a cell is selected in the collection view, that sets the value to null would work for you?

[rickpasetto]

Yes, I think so. Something like this?

[Andre3424]

@fgatti675 Just read the conversation above and we are looking for the same. So, lets day the category, which is "Cameras" in the screenshot above is optional. The user can select a category or none. Lets assume the user has selected "Cameras". Now he decides to remove the category, this is not possible now.

[rickpasetto]

@fgatti675 just checking in on this issue. Do you need any more information from me?

[rickpasetto]

@fgatti675 I notice that you answered my original question. I just tried version 2.0.0-alpha.48, but I still am not able to clear a row like shown above (after adding the clearable: true property to the field). To be clear, I need to be able to do it for an existing entity. Could I be doing something wrong?

[rickpasetto]

@fgatti675 any progress on this issue? I'm still unable to clear a field of an existing row.