Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[5.x] Field action modals #11129

Merged
merged 77 commits into from
Nov 20, 2024
Merged

[5.x] Field action modals #11129

merged 77 commits into from
Nov 20, 2024

Conversation

jasonvarga
Copy link
Member

@jasonvarga jasonvarga commented Nov 15, 2024

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 jasonvarga marked this pull request as ready for review November 19, 2024 22:17
@jasonvarga jasonvarga changed the base branch from feature/field-actions to 5.x November 20, 2024 21:46
@jasonvarga jasonvarga changed the base branch from 5.x to feature/field-actions November 20, 2024 21:47
@jasonvarga jasonvarga changed the base branch from feature/field-actions to 5.x November 20, 2024 21:50
@jasonvarga
Copy link
Member Author

jasonvarga commented Nov 20, 2024

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. 🙃

@jasonvarga jasonvarga changed the base branch from 5.x to feature/field-actions November 20, 2024 21:54
# Conflicts:
#	resources/js/components/field-actions/FieldAction.js
@jasonvarga jasonvarga changed the base branch from feature/field-actions to 5.x November 20, 2024 21:57
@jasonvarga jasonvarga merged commit 7ad5877 into 5.x Nov 20, 2024
18 checks passed
@jasonvarga jasonvarga deleted the field-action-modals branch November 20, 2024 22:05
@jacksleight
Copy link
Contributor

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

@jasonvarga
Copy link
Member Author

All good! 😄

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants