statamic / cms

The core Laravel CMS Composer package
https://statamic.com
Other
4.09k stars 534 forks source link

[5.x] Field action modals #11129

Closed jasonvarga closed 1 day ago

jasonvarga commented 6 days ago

Replaces #10833. Rebasing would be a bit of a nightmare after all the changes in #10352.

This adds the ability to add modals to field actions.

For example, take this silly action that opens a modal asking for a character and the number of times to repeat it

Statamic.$fieldActions.add('text-fieldtype', {
  title: 'Append',
  confirm: {
    text: 'Please fill in the fields',
    fields: {
      char: { type: 'text', display: 'Character', validate: 'required:max:1' },
      count: { type: 'integer', display: 'Count', instructions: 'How many times should it be appended?', validate: 'required|integer' },
    }
  },
  run: ({ value, update, confirmation }) => {
    const append = confirmation.values.char.repeat(confirmation.values.count); 
    update(value+append);
  }
};

If it's dangerous, you can make the confirmation button scary and red by adding dangerous: true, and add some red warningText.

confirm: {
  text: 'Are you sure you want to do that?',
  warningText: 'Everything will explode.',
  dangerous: true,
}

Also, actions can have automatic loading states if you return a promise. Works well if you need to do an ajax request. For example, here's the same silly example, but in a setTimeout so it takes longer.

run: ({ value, update, confirmation }) => {
  return new Promise((resolve) => {
    setTimeout(function () {      
      const append = confirmation.values.char.repeat(confirmation.values.count);
      update(value+append);
      resolve();
    }, 5000);
  });
}
jasonvarga commented 1 day ago

Everyone look away while I struggle to resolve these conflicts. 🙈

I screwed up the commit history. Oops. But the PR diff is just the modal stuff. Good enough. 🙃

jacksleight commented 1 day ago

Sorry, I probably should have just done both parts in one branch in the first place! 😅

jasonvarga commented 1 day ago

All good! 😄