How to add confirm box before user hit save or update? Also how to extend current model with type ui

princephpdev3 years ago

7

• 

  hades2000823 years ago

  Probably better to add version history so things have to be published to go live

• 

  princephpdev3 years ago

  My question is -

  
  

  1. When you click on delete button, you get a dialog box to confirm or cancel. How to get that for custom ui component button

  
  
  

  I have added a custom button

  
  
  

  As you can see this pop up when we hit delete

  
  
  

  How to get this box on click
• 

  hades2000823 years ago

  I'm not sure you can do this with the default UI.

  
  
  

  You might be able to create a fully custom UI for your collections, but that would feel a bit overkill to me.

  
  
  

  What I suggested about enabling drafts would help prevent things from going "live" immediately though as you'd have to explicitly publish the changes/new document for it to be served on the APIs.

• 

  thgh.3 years ago

  One option is to add a UI field in the sidebar that contains a button like this one:

  
  

  const form = useForm()
  return <button onClick={()=>{
    if (!confirm('Are you sure?')) return
    form.submit()
  // don't forget about preventDefault
  }}></button>

  
  
  

  I'm hiding the existing buttons like this:

  
  

    useLayoutEffect(() => {
      const elems = document.querySelectorAll(
        '.collection-edit__document-actions, .collection-edit__sidebar-fields .status'
      )
  
      ;[].forEach.call(elems, function (elem) {
        elem.style.display = 'none'
      })
    }, [])

• 

  princephpdev3 years ago

  Added a button and confirmation but The problem is that, confirmation is like javascript alert. which is not in line with current UI flow

• 

  denolfe

  3 years ago

  I don't believe there is a way to hook into this UI flow currently. We have a drawer element abstracted out but not ready for consumption quite yet.

  
  
  

  I think

  @365498720726286349

  's suggestion about using drafts would be something to look into, because it seems like this is an outcome you're trying to achieve.

  
  
  

  You might also be able to grab our modal code and put it into your custom field somehow

• 

  thedunco3 years ago

  This feature is something I would really appreciate as well! Thanks all for the suggestions to use in the meantime though!

  
  

  We implemented our own separation between what we consider "published" and "draft" content (using GraphQL queries) that does't exactly play nicely with Payload's default "Draft" feature (although we probably should have implemented it with the default behavior from the beginning because I really like how it works).