# j-PermissionsOP

> Edit role, group and user permissions for OpenPlatform applications.

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: en
Content-SHA256: 5cebc2e3f5ed7ea0434bf6c6bd5019dc5b3c8630b1a2620c34d60c7a6de0af79
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: usage-reviewed

The component edits OpenPlatform user, role and group permissions. Bind the selected permissions to a model path and configure `find` and `read` endpoints. The model contains permission strings:

```
['C@admin', 'U@admin', 'R@admin', 'D@admin', 'R123456', 'R#employees']
```

- first letter means allowed type, defined in `types`
- `@admin` means a role `admin`
- `#employees` means a group `employees`
- `123456` means a specific `userid`

__Configuration__:

- `placeholder` {String} a placeholder for `j-Directory` component (default: `Search`)
- `types` {String} types of permission (array delimited by char, default: `CRUD`)
- `disabled` {Boolean} optional, disables this component
- `default` {String} default value of `type` (default: `R`)
- `dirkey` {String} optional, a key for text in `j-Directory` (default: `name`)
- `labelrole` {String} optional a label for roles (default: `Role`)
- `labelgroup` {String} optional a label for groups (default: `Group`)
- `limit` {Number} a count of allowed permissions (default: `0` = unlimited)
- `pk` {String} a primary key which value will be binded into the model (default: `id`)
- __IMPORTANT__ `find` {String} URL address for finding roles, groups and users, the component sends `url?q=SEARCH_QUERY` (it sends empty value)
- __IMPORTANT__ `read` {String} URL address for reading roles, groups and users, the component sends `url?id=@role,#group,userid,...`

```javascript
// The component expects data:
['C@admin', 'U@admin', 'R@admin', 'D@admin', 'R123456', 'R#employees'];

// The component tries to find data:
// The component tries to read data and it pairs them with the model automatically:
[{ id: '123456', name: 'Peter Širka' }, { id: '@admin', name: 'Administrators' }, { id: '#employees', name: 'Employees' }];
```

## Usage

```html
<ui-component name="directory"></ui-component>
<ui-component name="permissionsop" path="form.permissions"
  config="find:/api/permissions/search/;read:/api/permissions/read/;types:CRUD"></ui-component>
<script>
  ON('request', function(request) {
    if (request.method === 'GET' && request.data &&
        request.url.indexOf('/api/permissions/') === 0) {
      request.url = QUERIFY(request.url, request.data);
      request.data = null;
    }
  });
  SET('form.permissions', ['R@admin', 'U#employees']);
</script>
```

Declare `j-Directory` for the selection menu. Both endpoints return an array of objects with `id` and `name` strings. The `find` endpoint receives the search text in `q`. The `read` endpoint receives comma-separated identifiers in `id` and resolves the permissions already in the model. Use `pk` to choose the identifier field; its default is `id`. Prefix role identifiers with `@` and group identifiers with `#`.

Source: [Total.js components](https://github.com/totaljs/components/tree/910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e/j-PermissionsOP). Copyright Peter Širka and contributors. [MIT license](/knowledge-licenses.json).