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

$schema: http://json-schema.org/draft-07/schema
$id: https://finstral.com/apps/cloud/user-management/app-user-management
$defs:
  user_data:
    $anchor: UserDataSchema
    type: array
    items:
      type: object
      required:
        - avatar_url
        - id
        - name
        - unit
        - email
        - login
        - services
        - user_status
      additionalProperties: false
      properties:
        avatar_url:
          type: string
          format: uri-reference
        id:
          type: number
        name:
          type: string
        unit:
          type: string
        email:
          type: string
        login:
          type: string
        role:
          type: string
        services:
          type: array
          items:
            additionalProperties: false
            type: object
            required:
              - id
              - label
              - permissions
            properties:
              id:
                type: number
              label:
                type: string
              permissions:
                type: array
                items:
                  additionalProperties: false
                  type: object
                  required:
                    - active
                    - label
                    - value
                  properties:
                    active:
                      type: boolean
                    label:
                      type: string
                    value:
                      type: number
        user_status:
          additionalProperties: false
          type: object
          required:
            - status
          properties:
            status:
              type: string
              enum:
                - active
                - pending
            ticket:
              additionalProperties: false
              type: object
              required:
                - id
                - url
              properties:
                id:
                  type: number
                url:
                  type: string
                  format: uri-reference
  deactivation_reasons:
    $anchor: DeactivationReasonsSchema
    type: array
    items:
      type: object
      additionalProperties: false
      required:
        - label
      properties:
        label:
          type: string
        selected:
          type: boolean
        value:
          type: number
  services:
    $anchor: ServicesSchema
    type: array
    items:
      service:
        type: object
        additionalProperties: false
        required:
          - id
          - label
          - permissions
        properties:
          id:
            type: number
          label:
            type: string
          permissions:
            type: array
            items:
              additionalProperties: false
              type: object
              required:
                - label
                - value
              properties:
                label:
                  type: string
                value:
                  type: string
type: object
required:
  - deactivation_reasons
  - is_employee
  - services
  - self
  - support_email
additionalProperties: false
properties:
  deactivation_reasons:
    $ref: '#DeactivationReasonsSchema'
  form_create_user_api:
    format: uri-reference
    type: string
  form_deactivate_user_api:
    format: uri-reference
    type: string
  form_update_permissions_api:
    format: uri-reference
    type: string
  is_employee:
    type: boolean
  services:
    $ref: '#ServicesSchema'
  support_email:
    type: string
  self:
    $ref: '#UserDataSchema'
  team:
    $ref: '#UserDataSchema'

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

deactivation_reasons:
  - label: Reason
    selected: true
  - label: Employee changes roles
    value: 1
  - label: Employee leaves the company
    value: 2
form_create_user_api: user-management/user/create
form_deactivate_user_api: user-management/user/deactivate
form_update_permissions_api: user-management/permissions/update
is_employee: false
services:
  - id: 1
    label: Contacts
    permissions:
      - label: Admin
        value: 1
      - label: Read and Write
        value: 2
      - label: Read
        value: 3
      - label: Delete
        value: 4
  - id: 2
    label: Composer
    permissions:
      - label: Admin
        value: 5
      - label: Read and Write
        value: 6
      - label: Read
        value: 7
      - label: Delete
        value: 8
  - id: 3
    label: Webmonitor
    permissions:
      - label: Admin
        value: 9
      - label: Read and Write
        value: 10
      - label: Read
        value: 11
      - label: Delete
        value: 12
      - label: Office staff
        value: 13
      - label: View Order
        value: 14
      - label: Customer mail
        value: 15
support_email: support@finstral.com
self:
  - avatar_url: /build/assets/img/dummy/avatar/1.webp
    id: 1
    name: Tiziana Lagomarsino
    unit: Admin SICURCASA
    email: tlagomarsino@finstral.com
    login: tlagomarsino@finstral.com
    role: Techniker, Composer
    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: active
team:
  - 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/app-user-management.twig

{{ attach_library('finstral_global/apps-user-management-app-user-management') }}

{% set read_only = form_create_user_api is empty and form_deactivate_user_api is empty and form_update_permissions_api is empty %}

{% set data = {
	formCreateUserAPI: form_create_user_api,
	formDeactivateUserAPI: form_deactivate_user_api,
	formUpdatePermissionsAPI: form_update_permissions_api,
	isEmployee: is_employee ? true : false,
	isReadOnly: read_only,
	self: self,
	team: team,
} %}

{% set message_store = {
	"global.form.errors.email.invalid": "global.form.errors.email.invalid"|tc,
	"global.form.errors.option.required.generic": "global.form.errors.option.required.generic"|tc,
	"global.form.errors.js.field.option.required": "global.form.errors.js.field.option.required"|tc,
	"global.form.errors.js.field.required": "global.form.errors.js.field.required"|tc,
	"global.error.general": "global.error.general"|tc,
	"global.message.readonly": "global.message.readonly"|tc({"@support_email": support_email}),
	"global.ticket.processing": "global.ticket.processing"|tc,
	"global.ticket.reference": "global.ticket.reference"|tc,
	"global.ticket.view": "global.ticket.view"|tc,
	"deactivation_form.message.readonly": "deactivation_form.message.readonly"|tc({"@support_email": support_email}),
} %}

<cloud-user-management class="UserManagement" id="cloud-user-management">
	<section class="u-container">
		<div class="UserManagement-wrapper">
			<h1 class="u-typo-HeadlineM">
				{{ "user_management.title"|tc }}
			</h1>

			<section
				class="UserManagement-section"
				aria-labelledby="user-management-self-heading"
			>
				<div class="UserManagement-headingWrapper">
					<h2 class="u-typo-HeadlineS" id="user-management-self-heading">
						{{ "user_management.self_heading"|tc }}
					</h2>

					{% if not team %}
						<div>
							{% include "@elements/button/button.twig" with {
								label: "user_management.create_user_button"|tc,
								id: "user-management-create-user-form-button",
								modifiers: ["secondary"],
								icon: {
									name: "user_create",
								},
							} only %}
						</div>
					{% endif %}
				</div>

				{# Small screens #}
				<div class="UserManagement-list">
					{% include "@apps/cloud/user-management/app-user-management/list/list.twig" with {
						read_only: read_only,
						support_email: support_email,
						users: self,
					} only %}
				</div>

				{# Large screens #}
				<div class="UserManagement-table">
					{% include "@apps/cloud/user-management/app-user-management/table/table.twig" with {
						users: self,
					} only %}
				</div>
			</section>

			{% if team %}
				<section
					class="UserManagement-section"
					aria-labelledby="user-management-team-heading"
				>
					<div class="UserManagement-headingWrapper">
						<h2 class="u-typo-HeadlineS" id="user-management-team-heading">
							{{ "user_management.team_heading"|tc }}
						</h2>

						<div>
							{% include "@elements/button/button.twig" with {
								label: "user_management.create_user_button"|tc,
								id: "user-management-create-user-form-button",
								modifiers: ["secondary"],
								icon: {
									name: "user_create",
								},
							} only %}
						</div>
					</div>

					{# Small screens #}
					<div class="UserManagement-list">
						{% include "@apps/cloud/user-management/app-user-management/list/list.twig" with {
								read_only: read_only,
								support_email: support_email,
								users: team,
						} only %}
					</div>

					{# Large screens #}
					<div class="UserManagement-table">
						{% include "@apps/cloud/user-management/app-user-management/table/table.twig" with {
								users: team,
						} only %}
					</div>
				</section>
			{% endif %}
		</div>
	</section>

	{% if not read_only %}
		<template id="new-user-dialog-tmpl">
			{% set create_user_form %}
				{% include "@apps/cloud/user-management/app-user-management/create-user-form/create-user-form.twig" with {
					form_action: form_create_user_api|default(''),
					services: services,
				} only %}
			{% endset %}

			{% include "@apps/cloud/user-management/app-user-management/_dialog/_dialog.twig" with {
				classes: ["CreateUserForm-dialog"],
				content: create_user_form,
				dialog_id: "user-management-create-user-form-dialog",
				dialog_title: "create_user_form.dialog.title"|tc,
				show_profile: false,
			} only %}
		</template>
	{% endif %}

	<template id="permissions-dialog-tmpl">
		{% set permissions_form %}
			{% include "@apps/cloud/user-management/app-user-management/permissions-form/permissions-form.twig" with {
				form_action: form_update_permissions_api,
				support_email: support_email,
			} only %}
		{% endset %}

		{% include "@apps/cloud/user-management/app-user-management/_dialog/_dialog.twig" with {
			classes: ["UserManagementTable-dialog"],
			content: permissions_form,
			dialog_id: "user-management-permissions-form-dialog",
			dialog_title: "permissions_form.dialog.title"|tc,
		} only %}
	</template>

	<template id="deactivation-dialog-tmpl">
		{% set deactivation_form %}
			{% include "@apps/cloud/user-management/app-user-management/deactivation-form/deactivation-form.twig" with {
				form_action: form_deactivate_user_api,
				deactivation_reasons: deactivation_reasons,
			} only %}
		{% endset %}

		{% include "@apps/cloud/user-management/app-user-management/_dialog/_dialog.twig" with {
			classes: ["UserManagementTable-dialog"],
			content: deactivation_form,
			dialog_id: "user-management-deactivate-user-form-dialog",
			dialog_title: "deactivation_form.dialog.title"|tc,
		} only %}
	</template>

	{% if read_only %}
		<template id="user-management-read-only-tmpl">
			<p>{{ "global.message.readonly"|tc({"@support_email": support_email}) }}</p>
		</template>

		<template id="deactivate-user-read-only-tmpl">
			<p>{{ "global.message.readonly"|tc({"@support_email": support_email}) }}</p>
		</template>
	{% endif %}

	<template id="user-management-toast-tmpl">
		{% include "@elements/toast/toast.twig" with {
			id: "cloud-user-management-toaster",
			toast_role: "alert",
			dismissible_by: ["dismissable-user"]
		} only %}
	</template>

	{% include "@elements/toast/toast.twig" with {
		id: "cloud-user-management-toast",
		toast_role: "status",
		dismissible_by: ["dismissable-user"]
	} only %}

	{% include "@elements/toast/toast.twig" with {
		id: "create-user-toast",
		toast_role: "status",
		dismissible_by: ["dismissable-user"]
	} only %}
</cloud-user-management>

<script id="cloud-user-management-data" type="application/json">{{ data|json_encode()|raw }}</script>
<script id="cloud-message-store" type="application/json">{{ message_store|json_encode()|raw }}</script>