table

// src/components/apps/cloud/user-management/app-user-management/table/schema.yaml

$schema: http://json-schema.org/draft-07/schema
type: object
required:
  - users
additionalProperties: false
properties:
  users:
    $ref: https://finstral.com/apps/cloud/user-management#UserDataSchema
$id: '19'

// src/components/apps/cloud/user-management/app-user-management/table/mocks.yaml

users:
  - avatar_url: /build/assets/img/dummy/avatar/2.webp
    id: 2
    name: Jessica Lo Presti
    unit: Admin SICURCASA
    email: jessica@sicurcasa.it
    login: 2SRA-03@finstral.cloud
    role: Techniker, Composer
    services:
      - id: 1
        label: Contacts
        permissions:
          - active: false
            label: Admin
            value: 1
          - active: false
            label: Read and Write
            value: 2
          - active: true
            label: Read
            value: 3
          - active: false
            label: Delete
            value: 4
      - id: 2
        label: Composer
        permissions:
          - active: true
            label: Admin
            value: 5
          - active: true
            label: Read and Write
            value: 6
          - active: true
            label: Read
            value: 7
          - active: true
            label: Delete
            value: 8
      - id: 3
        label: Webmonitor
        permissions:
          - active: true
            label: Admin
            value: 9
          - active: true
            label: Read and Write
            value: 10
          - active: true
            label: Read
            value: 11
          - active: true
            label: Delete
            value: 12
    user_status:
      status: active
  - avatar_url: /build/assets/img/dummy/avatar/3.webp
    id: 3
    name: Claudia Ricci
    unit: Admin SICURCASA
    email: casarza@sicurcasa.it
    login: 2SRA-04@finstral.cloud
    role: Techniker, Composer
    services:
      - id: 1
        label: Contacts
        permissions:
          - active: false
            label: Admin
            value: 1
          - active: true
            label: Read and Write
            value: 2
          - active: true
            label: Read
            value: 3
          - active: false
            label: Delete
            value: 4
      - id: 2
        label: Composer
        permissions:
          - active: false
            label: Admin
            value: 5
          - active: true
            label: Read and Write
            value: 6
          - active: true
            label: Read
            value: 7
          - active: false
            label: Delete
            value: 8
      - id: 3
        label: Webmonitor
        permissions:
          - active: false
            label: Admin
            value: 9
          - active: true
            label: Read and Write
            value: 10
          - active: true
            label: Read
            value: 11
          - active: false
            label: Delete
            value: 12
    user_status:
      status: pending
      ticket:
        id: 123456
        url: /ticket-overview/123456
  - avatar_url: /build/assets/img/dummy/avatar/4.webp
    id: 4
    name: Patrizia Ciampolini
    unit: Admin SICURCASA
    email: chiavari@sicurcasa.it
    login: 2SRA-06@finstral.cloud
    role: Techniker, Composer
    services:
      - id: 1
        label: Contacts
        permissions:
          - active: false
            label: Admin
            value: 1
          - active: true
            label: Read and Write
            value: 2
          - active: true
            label: Read
            value: 3
          - active: false
            label: Delete
            value: 4
      - id: 2
        label: Composer
        permissions:
          - active: false
            label: Admin
            value: 5
          - active: true
            label: Read and Write
            value: 6
          - active: true
            label: Read
            value: 7
          - active: false
            label: Delete
            value: 8
      - id: 3
        label: Webmonitor
        permissions:
          - active: false
            label: Admin
            value: 9
          - active: true
            label: Read and Write
            value: 10
          - active: true
            label: Read
            value: 11
          - active: false
            label: Delete
            value: 12
    user_status:
      status: pending
      ticket:
        id: 789012
        url: /ticket-overview/789012
  - avatar_url: /build/assets/img/dummy/avatar/5.webp
    id: 5
    name: Mouen Silianane
    unit: Admin SICURCASA
    email: mauro@sicurcasa.it
    login: 2SRA1MF
    role: Verkauf
    services:
      - id: 1
        label: Contacts
        permissions:
          - active: true
            label: Admin
            value: 1
          - active: true
            label: Read and Write
            value: 2
          - active: true
            label: Read
            value: 3
          - active: true
            label: Delete
            value: 4
      - id: 2
        label: Composer
        permissions:
          - active: true
            label: Admin
            value: 5
          - active: true
            label: Read and Write
            value: 6
          - active: true
            label: Read
            value: 7
          - active: true
            label: Delete
            value: 8
      - id: 3
        label: Webmonitor
        permissions:
          - active: true
            label: Admin
            value: 9
          - active: true
            label: Read and Write
            value: 10
          - active: true
            label: Read
            value: 11
          - active: true
            label: Delete
            value: 12
    user_status:
      status: pending
      ticket:
        id: 677589
        url: /ticket-overview/677589

// src/components/apps/cloud/user-management/app-user-management/table/table.twig

{% set head = [
	{label: "user_management.label_name"|tc},
	{label: "user_management.label_email"|tc},
	{label: "user_management.label_login"|tc},
	{label: "user_management.label_role"|tc},
] %}

{% for service in users[0].services %}
	{% set head = head|merge([
		{label: service.label},
	]) %}
{% endfor %}

{% set head = head|merge([
	{label: "user_management.label_active"|tc},
]) %}

{% set body = [] %}

{% for user in users %}
	{% set avatar %}
		{% include "@elements/image/image.twig" with {
			alt: "",
			height: 128,
			uri: user.avatar_url,
			width: 128,
		} only %}
	{% endset %}

	{% set name %}
		<div class="UserManagementTable-item UserManagementTable-item--name u-typo-TextS">
			{{ avatar }}
			{{ user.name }}
		</div>
	{% endset %}

	{% set email %}
		<div class="UserManagementTable-item u-typo-TextS">
			<a class="u-link" href="mailto:{{ user.email }}" target="_blank" rel="noopener noreferrer">
				{{ user.email }}
			</a>
		</div>
	{% endset %}

	{% set login %}
		<div class="UserManagementTable-item u-typo-TextS">
			{{ user.login }}
		</div>
	{% endset %}

	{% set role %}
		<div class="UserManagementTable-item u-typo-TextS">
			{{ user.role }}
		</div>
	{% endset %}

	{% set row = [
		{content: name},
		{content: email},
		{content: login},
		{content: role},
	] %}

	{% for service in user.services %}
		{% set content %}
			{% set service_label_id = service.label|lower ~ "-trigger-label-" ~ random() %}
			<div class="UserManagementTable-item">
				<button
					class="UserManagementTable-button"
					type="button"
					aria-labelledby="{{ service_label_id }}"
					data-dialog="service-permissions"
					data-login="{{ user.login }}"
					data-service="{{ service.id ~ ':' ~ service.label }}"
				>
					<span id="{{ service_label_id }}" hidden>
						{{ "user_management.permissions_button"|tc({"@service": service.label, "@user": user.name}) }}
					</span>

					{% include "@elements/icon/icon.twig" with {
						name: "settings"
					} only %}
				</button>
			</div>
		{% endset %}

		{% set row = row|merge([
			{content: content},
		]) %}
	{% endfor %}

	{% set active %}
		<div class="UserManagementTable-item">
			{% set active_label_id = "active-trigger-label-" ~ random() %}
			{% set user_status = user.user_status.status %}
			{% set status_icons = {
				active: "switch_on",
				pending: "switch_pending",
				inactive: "switch_off",
			} %}

			<button
				class="UserManagementTable-button"
				type="button"
				data-dialog="deactivate-user"
				aria-labelledby="{{ active_label_id }}"
				data-login="{{ user.login }}"
				data-status="{{ user_status }}"
			>
				<span id="{{ active_label_id }}" hidden>
					{{ "user_management.active_button"|tc }}
				</span>

				{% include "@elements/icon/icon.twig" with {
					classes: ["UserManagementTable-buttonSwitch"],
					name: status_icons[user_status],
				} only %}
			</button>
		</div>
	{% endset %}

	{% set row = row|merge([
		{content: active},
	]) %}

	{% set body = body|merge([row]) %}
{% endfor %}

<div class="UserManagementTable">
	{% include "@elements/table/table.twig" with {
		head: head,
		body: body,
	} only %}
</div>