Transaction Block Old: Transaction Chain Item

No notes defined.

<div class="sds-transactionBlock sds-box  -noValidation">
    <div class="sds-transactionBlock__inner">
        <div class="sds-transactionBlock__row -first sds-transactionBlock__mainInfo">
            <div class="sds-transactionBlock__mainInfoAccount">

                <div class="sds-avatar centeredBgi -avatarSm">

                    <img class="img-fluid" src="../../media/snet/avatars/avatarCactus.png" alt="">

                </div>
                <div class="sds-stackXxs">
                    <div>Compte Epicerie Fournisseurs</div>
                    <div class="sds-transactionBlock__meta sds-textHelper">
                        LU63 0000 2200 3300 4400
                    </div>
                    <div class="sds-amount -positive -amountLg">
                        <span class="sds-amount__value">{+#.###,##}</span>

                        <span class="sds-amount__currency">€</span>

                    </div>
                </div>
            </div>
            <div class="d-flex justify-content-between flex-grow-1">
                <div class="sds-transactionBlock__col sds-stackXxs">
                    <div class="sds-transactionBlock__meta sds-textHelper">Encodeur</div>
                    <div class="sds-avatarText -small">

                        <div class="sds-avatar centeredBgi -xtraSmall">

                            <img class="img-fluid" src="../../media/snet/avatars/avatarUser.png" alt="">

                        </div>
                        <div class="sds-avatarText__content">
                            <div class="sds-textSemiBold">Jil Schmit</div>
                        </div>
                    </div>
                </div>
                <div class="sds-transactionBlock__col sds-stackXxs text-right -dateEdit">
                    <div>
                        <div class="sds-transactionBlock__meta sds-textHelper">
                            Date d'exécution
                        </div>
                        <div class="sds-textSemiBold">23.03.2022</div>
                    </div>
                    <button type="button" class="sds-btn -iconBtn -btnSecondary">

                        <span class="sds-icon sds-icon-edit"></span>

                    </button>
                </div>
            </div>
        </div>
        <div class="sds-transactionBlock__row -total">
            <div class="sds-transactionBlock__colWrapperFixed">
                <span class="sds-itemConnector sds-transactionBlock__itemConnector">

                </span>

                <button type="button" class="sds-btn -iconBtn -btnSecondary -btnSmall sds-transactionBlock__collapseToggle" data-toggle="collapse" data-target="#transactionBlockCollapse-date-edit" aria-expanded="true">

                    <span class="sds-icon sds-icon-plus"></span>

                </button>
                <div class="sds-transactionBlock__col -amount">
                    <div class="sds-amount -amountXl">
                        <span class="sds-amount__value">335,30</span>

                        <span class="sds-amount__currency">€</span>

                    </div>
                </div>
                <div class="sds-transactionBlock__col -transactions">
                    <span class="sds-numberCircle">
                        2
                    </span>
                    <div class="h4">Transactions</div>
                </div>
            </div>

        </div>
        <div class="sds-transactionBlock__collapse collapse show" id="transactionBlockCollapse-date-edit">
            <div class="sds-transactionBlock__collapseInner">
                <div class="sds-transactionBlock__row">
                    <div class="sds-transactionBlock__colWrapperFixed">
                        <span class="sds-itemConnector sds-transactionBlock__itemConnector">

                        </span>
                        <div class="sds-transactionBlock__col -amount">
                            <div class="sds-arrowAmount sds-transactionBlock__arrowAmount">
                                <div class="sds-arrowAmount__bg">
                                    <div class="sds-amount">
                                        <span class="sds-amount__value">{+#.###,##}</span>

                                        <span class="sds-amount__currency">€</span>

                                    </div>

                                </div>
                            </div>

                        </div>
                        <div class="sds-transactionBlock__col -account">
                            <div class="sds-accountInfo">

                                <div class="sds-avatar centeredBgi -avatarSm">

                                    <img class="img-fluid" src="../../media/snet/avatars/avatarCactus.png" alt="">

                                </div>

                                <div class="sds-accountInfo__content">
                                    <p class="sds-accountInfo__title">
                                        <span class="text-truncate">
                                            Kant Institution
                                        </span>

                                    </p>
                                    <p class="sds-accountInfo__meta">LU## #### #### #### ####</p>

                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="sds-transactionBlock__col -communication">
                        <div>MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM</div>
                        <div>Facture 239284</div>
                        <div>Facture 239284</div>
                        <div>Facture 239284</div>
                    </div>

                    <div class="sds-transactionBlock__col -alignEnd">
                        <div class="sds-btnGroup">
                            <button type="button" class="sds-btn -iconBtn -btnSecondary sds-transactionBlock__edit">

                                <span class="sds-icon sds-icon-edit"></span>

                            </button>
                            <button type="button" class="sds-btn -iconBtn -btnSecondary sds-transactionBlock__cancel">

                                <span class="sds-icon sds-icon-cross"></span>

                            </button>
                            <button type="button" class="sds-btn -iconBtn -btnSecondary sds-transactionBlock__validate">

                                <span class="sds-icon sds-icon-check"></span>

                            </button>
                        </div>
                    </div>

                </div>

            </div>
        </div>
    </div>

    <div class="js-transactionChainOperations collapse show">
        <div class="sds-transactionBlock__footer">
            <div class="row no-bottom-gutter">
                <div class="col-12">
                    <div class="d-flex justify-content-end">
                        <button type="button" class="sds-btn -btnSecondary">

                            <span class="sds-icon sds-icon-plus"></span>

                            <span class="sds-btn__text">Ajouter transaction</span>

                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
 
<div class="{{ namespace }}transactionBlock {{ namespace }}box {% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
	<div class="{{ namespace }}transactionBlock__inner">
		<div class="{{ namespace }}transactionBlock__row -first {{ namespace }}transactionBlock__mainInfo">
			<div class="{{ namespace }}transactionBlock__mainInfoAccount">
				{% render "@avatar--image-small",{
					img: "/snet/avatars/avatarCactus.png"
				},true %}
				<div class="{{ namespace }}stackXxs">
					<div>Compte Epicerie Fournisseurs</div>
					<div class="{{ namespace }}transactionBlock__meta {{ namespace }}textHelper">
						LU63 0000 2200 3300 4400
					</div>
					{% render "@amount--large-positive" %}
				</div>
			</div>
			<div class="d-flex justify-content-between flex-grow-1">
				<div class="{{ namespace }}transactionBlock__col {{ namespace }}stackXxs">
					<div class="{{ namespace }}transactionBlock__meta {{ namespace }}textHelper">Encodeur</div>
					{% render "@snet-avatar-text--extra-small" %}
				</div>
				<div class="{{ namespace }}transactionBlock__col {{ namespace }}stackXxs text-right{% if dateEdit %} -dateEdit{% endif %}">
					<div>
						<div class="{{ namespace }}transactionBlock__meta {{ namespace }}textHelper">
							Date d'exécution
						</div>
						<div class="{{ namespace }}textSemiBold">23.03.2022</div>
					</div>
					{% if dateEdit %}{% render "@icon-btn-secondary",{claases: [namespace+"transactionBlock__dateEdit"],icon: "icon-edit"},true %}{% endif %}
				</div>
			</div>
		</div>
		<div class="{{ namespace }}transactionBlock__row -total">
			<div class="{{ namespace }}transactionBlock__colWrapperFixed">
				{% render "@snet-item-connector",{classes: [namespace + "transactionBlock__itemConnector"]},true %}
				{% set expanded = false %}
				{% if shown %}
					{% set expanded = true %}
					{% else %}
					{% set expanded = false %}
				{% endif %}
				{% render "@icon-btn-secondary--small",{
					icon: "icon-plus",
					classes: [namespace + "transactionBlock__collapseToggle"],
					attrs: {
						"data-toggle": "collapse",
						"data-target": "#transactionBlockCollapse-"+transactionBlockCollapseID,
						"aria-expanded": expanded
					}
				}, true %}
				<div class="{{ namespace }}transactionBlock__col -amount">
					{% render "@amount--xtra-large" %}
				</div>
				<div class="{{ namespace }}transactionBlock__col -transactions">
					{% render "@snet-number-circle",{text: "2"},true %}
					<div class="h4">Transactions</div>
				</div>
			</div>
			{% if totalActions %}
				<div class="{{ namespace }}transactionBlock__col -alignEnd">
					<div class="{{ namespace }}btnGroup">
						{% render "@icon-btn-secondary",{
							icon: "icon-edit",
							classes: [namespace + "transactionBlock__edit"]
						}, true %}
						{% render "@icon-btn-secondary",{
							icon: "icon-cross",
							classes: [namespace + "transactionBlock__cancel"]
						}, true %}
						{% render "@icon-btn-secondary",{
							icon: "icon-check",
							classes: [namespace + "transactionBlock__validate"]
						}, true %}
					</div>
				</div>
			{% endif %}
		</div>
		<div class="{{ namespace }}transactionBlock__collapse collapse{% if shown %} show{% endif %}" id="transactionBlockCollapse-{{ transactionBlockCollapseID }}">
			<div class="{{ namespace }}transactionBlock__collapseInner">
				<div class="{{ namespace }}transactionBlock__row">
					<div class="{{ namespace }}transactionBlock__colWrapperFixed">
						{% render "@snet-item-connector",{classes: [namespace + "transactionBlock__itemConnector"]},true %}
						<div class="{{ namespace }}transactionBlock__col -amount">
							{% render "@snet-arrow-amount",{classes: [namespace + "transactionBlock__arrowAmount"]},true %}
						</div>
						<div class="{{ namespace }}transactionBlock__col -account">
							{% render "@snet-account-info--small" %}
						</div>
					</div>
					<div class="{{ namespace }}transactionBlock__col -communication">
						<div>MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM</div>
						<div>Facture 239284</div>
						<div>Facture 239284</div>
						<div>Facture 239284</div>
					</div>
					{% if additionalRowActions %}
						<div class="{{ namespace }}transactionBlock__col -alignEnd">
							<div class="{{ namespace }}btnGroup">
								{% render "@icon-btn-secondary",{
									icon: "icon-edit",
									classes: [namespace + "transactionBlock__edit"]
								}, true %}
								{% render "@icon-btn-secondary",{
									icon: "icon-cross",
									classes: [namespace + "transactionBlock__cancel"]
								}, true %}
								{% render "@icon-btn-secondary",{
									icon: "icon-check",
									classes: [namespace + "transactionBlock__validate"]
								}, true %}
							</div>
						</div>
					{% endif %}
				</div>
				{% if additionalTransaction %}
					<div class="{{ namespace }}transactionBlock__row">
						<div class="{{ namespace }}transactionBlock__colWrapperFixed">
							{% render "@snet-item-connector",{classes: [namespace + "transactionBlock__itemConnector"]},true %}
							<div class="{{ namespace }}transactionBlock__col -amount">
								{% render "@snet-arrow-amount",{classes: [namespace + "transactionBlock__arrowAmount"]},true %}
							</div>
							<div class="{{ namespace }}transactionBlock__col -account">
								{% render "@snet-account-info--small" %}
							</div>
						</div>
						<div class="{{ namespace }}transactionBlock__col">
							Facture 239284
						</div>
						{% if additionalRowActions %}
							<div class="{{ namespace }}transactionBlock__col -alignEnd">
								<div class="{{ namespace }}btnGroup">
									{% render "@icon-btn-secondary",{
										icon: "icon-edit",
										classes: [namespace + "transactionBlock__edit"]
									}, true %}
									{% render "@icon-btn-secondary",{
										icon: "icon-cross",
										classes: [namespace + "transactionBlock__cancel"]
									}, true %}
									{% render "@icon-btn-secondary",{
										icon: "icon-check",
										classes: [namespace + "transactionBlock__validate"]
									}, true %}
								</div>
							</div>
						{% endif %}
					</div>
				{% endif %}
			</div>
		</div>
	</div>
	{% if isTransactionChainItem %}
		<div class="js-transactionChainOperations collapse{% if transactionBlockTransactionChaincollapsesShown %}{% else %} show{% endif %}">
			<div class="{{ namespace }}transactionBlock__footer">
				<div class="row no-bottom-gutter">
					<div class="col-12">
						<div class="d-flex justify-content-end">
							{% render "@btn-secondary--icon-left",{
								icon: "icon-plus",
								text: "Ajouter transaction",
								attrs: transactionBlockTransactionChainAttrs
							},true %}
						</div>
					</div>
				</div>
			</div>
		</div>
	{% endif %}
</div>