attachments-list

// src/components/apps/cloud/ticket-detail/app-ticket-detail/attachments-list/schema.yaml

$schema: http://json-schema.org/draft-07/schema
$id: >-
  https://finstral.com/apps/cloud/ticket-detail/app-ticket-detail/attachments-list
type: object
additionalProperties: false
properties:
  attachments:
    type: array
    items:
      additionalProperties: false
      type: object
      required:
        - file_name
        - preview_url
        - source_url
      properties:
        file_name:
          type: string
        preview_url:
          type: string
          format: uri-reference
        source_url:
          type: string
          format: uri-reference
  id:
    type: string
  list_display_size:
    type: string
    enum:
      - small
      - large
  show_heading:
    type: boolean
    default: true

// src/components/apps/cloud/ticket-detail/app-ticket-detail/attachments-list/mocks.yaml

attachments:
  - file_name: FIN-Door Flat Frame-Frame 78 Aluminium-Aluminium
    preview_url: >-
      /build/assets/img/dummy/cloud-ticket-detail/ticket-detail-attachment001.png
    source_url: >-
      /build/assets/img/dummy/cloud-ticket-detail/ticket-detail-attachment001.png
  - file_name: Bildschirmfoto 2024-09-05 um 10.24.56.png
    preview_url: >-
      /build/assets/img/dummy/cloud-ticket-detail/ticket-detail-attachment002.png
    source_url: >-
      /build/assets/img/dummy/cloud-ticket-detail/ticket-detail-attachment002.png
  - file_name: Bildschirmfoto 2024-09-05 um 10.24.56.png
    preview_url: >-
      /build/assets/img/dummy/cloud-ticket-detail/ticket-detail-attachment003.png
    source_url: >-
      /build/assets/img/dummy/cloud-ticket-detail/ticket-detail-attachment003.png
  - file_name: Bildschirmfoto 2024-09-05 um 10.24.56.png
    preview_url: >-
      /build/assets/img/dummy/cloud-ticket-detail/ticket-detail-attachment005.png
    source_url: >-
      /build/assets/img/dummy/cloud-ticket-detail/ticket-detail-attachment005.png

// src/components/apps/cloud/ticket-detail/app-ticket-detail/attachments-list/attachments-list.twig

<section
	aria-labelledby="ticket-detail-file-list-heading"
	class="AttachmentsList-container"
	{% if id %} id="{{ id }}" {% endif %}
	{% if attachments is empty %} hidden {% endif %}
>
	<h3
		class="u-typo-TextL AttachmentsList-title {% if not show_heading|default(true) %}visually-hidden{% endif %}"
		id="ticket-detail-file-list-heading"
	>
			{{ "ticket_detail.attachments.title"|tc }}
	</h3>

	<ul class="AttachmentsList">
		{% set base_icons_path = '/themes/custom/finstral_global/build/assets/svg/file-icons/' %}

		{% for file in attachments %}
			{% set preview_url = file.preview_url starts with 'http' ? file.preview_url : base_icons_path ~ file.preview_url %}
			<li>
				<a
					class="AttachmentsList-item {% if list_display_size %} AttachmentsList-item--{{ list_display_size }} {% endif %}"
					href="{{ file.source_url }}"
				>
					<figure>
						<div class="AttachmentsList-image">
							{% include "@elements/image/image.twig" with {
								alt: "",
								classes: ["AttachmentsList-itemImage"],
								height: 80,
								is_lazy: true,
								uri: preview_url,
								width: 80,
							} only %}
						</div>
						<figcaption class="u-typo-TextS">{{ file.file_name }}</figcaption>
					</figure>
				</a>
			</li>
		{% endfor %}
	</ul>
</section>

<template data-icons-path="{{ base_icons_path }}" id="attachments-file-list-tmpl">
	<li class="AttachmentsList-itemContainer">
		<a
			class="AttachmentsList-item {% if list_display_size %} AttachmentsList-item--{{ list_display_size }} {% endif %}"
			href=""
		>
			<figure>
				<div class="AttachmentsList-image">
					{% include "@elements/image/image.twig" with {
						alt: "",
						classes: ["AttachmentsList-itemImage"],
						height: 80,
						is_lazy: true,
						uri: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAUTSURBVHgB7Z2xcttGEIZ/KU1KulNnqEtnunMXsEsn+QlMPYHjMpXJJ4j8BKa6dJY7d0a6dKGfIOeOXejO7rxLLGQIBIkDcHc4UvvNLAFyYGsG3+wecDjcnSByxuPxiDYpRULxWLYco1KUWUsY+b6k+CzbJbFGxJwgMkhAQptLiif4IcIlBrmc98gFLRERUQghCSltLpCLSBAWQ5FR3JCbDAMzmBApRS+RSxgjDgzFnCIjOQYDEFwIieCT/4Jiiu36HxMLinloMcGESNvwFnm7cEgsEFCMdyFSml5T/I7DZoEAYn6CR0gGtxG3OLysqINL7eXZ2dmX1Wrl7crMS4YccHmyJaO48pEtzjNEsuIvil9wvCQUU8qWb5Qt/8AhzjLkiNqKtlxTpryCI5wIkRL1DvHcT4TGUExclLDeQkTGR4S/w44NAwdSegmRmzyWEfMNXki443LSp3+ssxCVsZNeUjoJURmNdJbSWoi0Gf9CZTTBUp62bVNO2xxcasBVRjN8jj7KObOmlRDo1VRbEop3co9mhbUQ+k//hMroAre3r20Ptuo6ke6QGZSuPJNOycZulsZGXRtxZ1g18jYli3ttVUZ/+By+bTpob8mi7Jji4XUW+iRpKl07S5b2UXmDS9f5rvFh+0oWXxkkUFxTPKaopTZDJDv+g+KT87oGfleGWF83K52pbeC3MkSzIyhPqx2QdRmi2RGOafWHexmi2RGcrSuuaoakUELCV1z37vOqQrRcheei/OVOiLwSkEAJzVjO/YZyhryAMhSXxU5ZSAplKO7K1kaIDFpIoAxFUjzqLTLkoY44jIlN2SqEXEAZGn7JVTMkIlL+OJEREf9DiYFHnCGaHfGQqpC4SFhIAiUWNkKeQImFpO1QUsUvj7VkxcWIhegguHhQIZEx0jYkMlRIZKiQyGAhayixsFYhcaFCIsOwEAMlGljIZyix8EkzJC60ZEXGkoVkUGJheSojrw2UoTHsorhT/xvK0Hzij0JI5wm3FGfc8sdp+YsyKJukuHuDajwe85tTCZQh4PbjnHfKvb3voQxFVuyUhWjZGo6bYqf60ifP+qMD58JyV66Y6gMqLVvhmZe/VIVcQ7vjQ5OVv9wTInftN1BCsajOd1L3TH0BJRTz6g9bQmTujQyKbxZtZgO6guKbed2PtULE3Bsovljsmgxz37isGfSKywcGO7KD2TkJ5mq1+spL+tDub1Bc8mrfiqI28/byRJgpFBfwCqKTfQfYDCXlBl5LV3/4HDZeLDVONU6la62lywl/UHZ8aDrIau53nviXpDyi3WdQuvCGZMxsDmwz+n0GfdTbBe7NtZ4d3FqI9HM9h45QaYOhmLT5B7rkkT/8L3nEyB+YQK+89lEsCmbQEl02zz3hl80rUClb9JLB6NKr7jBwsPRq75c+S22KwcOFMyKOxYnLULbwM/mXeFjwY4rZrgVa2uJ0gXu6o//AS/ogv6P/GccNC+DukBn3jMMRTjOkQNoVXh8jxXGSUVy5KFFVvAgpkEXFjmnpJM6KOYm4hieclqwqlMpLKmE8+I47Jg99RCS3Fc/3PVxygdcMKSNlbIbDm2M+g6fyVEcwIQUHIqYYMLjoc5PXheBCCkRMirjaGD75XGKvXV3GtmUwIWVk/Ywpxa8IL8cgl3Dru32wIQohZaR/jONCtgncYpC3C/yS5W2otsGW6IRUkanQC0kJfkxry/sjbHdsrkthkE8dYiSyoUqRLd8BuQ6j6uB8ZqcAAAAASUVORK5CYII=",
						width: 80,
					} only %}
				</div>
				{# Placeholder added to avoid linting error #}
				<figcaption class="u-typo-TextS">Placeholder</figcaption>
			</figure>
		</a>
	</li>
</template>