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

React Selecto v-1.22.3 default selection of values #144

Open
vtoolsMedi opened this issue Jul 6, 2023 · 2 comments
Open

React Selecto v-1.22.3 default selection of values #144

vtoolsMedi opened this issue Jul 6, 2023 · 2 comments
Labels
question Further information is requested

Comments

@vtoolsMedi
Copy link

Environments

  • Framework name: React
  • Framework version: npm - v: 8.19.3

Description

Hello Everyone!
I am using React Selecto in my Project. I have a button which when clicked, some of the options in my list must get selected. My question is, how can I initialize react selecto with already selected elements. I have searched on the Internet enough to say I could not figure out how to do it. Event GPT 3 was not able to help me.
Thanks for your help.

@daybrush daybrush added the question Further information is requested label Jul 6, 2023
@daybrush
Copy link
Owner

daybrush commented Jul 6, 2023

@vtoolsMedi
Since target is a DOM, preselection is not supported with props.

Use the .setSelectedTargets method.

It appears to be the same as the next issue.

#129

@vtoolsMedi
Copy link
Author

vtoolsMedi commented Jul 12, 2023

Thank you for replying so soon.
Would you mind make a little snippet for react? In my project I am not able to preselect items.
My code:

class Permissions extends Component {

  constructor(props) {
    super(props);
    this.selectableDragListRef = createRef();
  }

  saveSelectedPermissions(e) {

    let selectedElements = this.selectableDragListRef.current.getData();

    let privileges = {};
    for (let index in this.props.children) {
      let permission = this.props.children[index];

      let found = false;
      for (let elementId in selectedElements) {
        if (permission.props.elementId === elementId) {
          found = true;
        }
      }
      privileges[permission.props.elementId] = {connected: found};
    }
    if (GF.checkNotNull(this.props.onSave)) {
      this.props.onSave(privileges);
    }
  }

  componentDidMount() {
    this.addSelectedItems();
  }

  addSelectedItems() {
    let items = document.getElementById(this.selectableDragListRef.current.getContainerId()).getElementsByClassName('selectoItem');
    items = Array.from(items);
    this.selectableDragListRef.current.setSelectedTargets(items);
  }

  render() {
    let buttonGroup;
    if (this.props.withButtonGroup) {
      buttonGroup = <ButtonGroup color={'dark'} delimiterColor={'primary'} className='my-4'>
        <ButtonSmall color='dark' id={"admin"}>Admin</ButtonSmall>
        <ButtonSmall color='dark' id={"basevariables"}>Standart mit Variablen</ButtonSmall>
        <ButtonSmall color='dark' id={"base"}>Standart ohne Variablen</ButtonSmall>
      </ButtonGroup>;
    } else {
      buttonGroup = <></>;
    }
    let title = 'Berechtigungen';
    if (GF.checkNotNull(this.props.mode) && this.props.mode !== '') {
      switch (this.props.mode) {
        case 'user':
          title = 'Berechtigungen (Benutzer)';
          break;
        case 'userGroup':
        default:
          title = 'Berechtigungen (Benutzergruppe)';
      }
    }
    return (<>
      <VerticalLayout>
        <h2 className='text-cn-color-white'>{title}</h2>
        {buttonGroup}
        <SelectableDragList ref={this.selectableDragListRef}>
          <VerticalLayout>
            <HorizontalLayout className='gap-1 flex-wrap text-cn-color-static-white'>
              {this.props.children}
            </HorizontalLayout>
          </VerticalLayout>
        </SelectableDragList>
      </VerticalLayout>
      <HorizontalLayout className='justify-end gap-x-5 mt-5'>
        <ButtonSmall color='secondary' onClick={(e) => this.saveSelectedPermissions(e)}>Berechtigungen speichern</ButtonSmall>
      </HorizontalLayout>
    </>);
  }
}

Permissions.propTypes = {
  withButtonGroup: PropTypes.bool, onSave: PropTypes.func, mode: PropTypes.string
}
export default Permissions;

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

No branches or pull requests

2 participants