@sapui5/sap.suite.ui.generic.template 1.153.0 → 1.154.0

package/src/sap/suite/ui/generic/template/lib/ai/EasyFill/fragments/EasyFillDialog.fragment.xml

@@ -2,6 +2,7 @@
 xmlns:smartForm="sap.ui.comp.smartform"
 xmlns:uxap="sap.uxap"
 xmlns:layout="sap.ui.layout"
+xmlns:unified="sap.ui.unified"
 xmlns:fesr="http://schemas.sap.com/sapui5/extension/sap.ui.core.FESR/1">
 
     <Dialog id="EasyFillDialog" contentWidth="72.25rem" class="sapSmartTemplatesObjectPageEasyFill" contentHeight="49.3125rem" title="{i18n>EASY_FILL_TITLE}" titleAlignment="Start" horizontalScrolling="false" verticalScrolling="false" draggable="true" resizable="true">
@@ -14,39 +15,201 @@ xmlns:fesr="http://schemas.sap.com/sapui5/extension/sap.ui.core.FESR/1">
                                 <layout:SplitterLayoutData size="40%"/>
                             </layout:layoutData>
                             <FlexBox direction="Column" renderType="Bare" class="sapSmartTemplatesObjectPageEasyFillInputArea">
-                                <FlexBox id="EasyFillInputArea" direction="Column" renderType="Bare" width="100%" gap="36px">
-                                    <VBox gap="22px" class="sapSmartTemplatesObjectPageEasyFillInputAreaLabel">
+                                <FlexBox id="EasyFillInputArea" direction="Column" renderType="Bare" width="100%" class="sapSmartTemplatesObjectPageEasyFillInputAreaFlex">
+                                    <!-- Description labels: shown only in the no-file (text-input) state;
+                                         when a file is loaded the description moves into the ObjectPage header -->
+                                    <VBox gap="22px" class="sapSmartTemplatesObjectPageEasyFillInputAreaLabel"
+                                        visible="{= !${easyFillDialogModel>/uploadedFileName} }">
                                         <Label text="{i18n>EASY_FILL_FIRST_LABEL_TEXT}" wrapping="true"/>
                                         <Label text="{i18n>EASY_FILL_SECOND_LABEL_TEXT}" wrapping="true"/>
                                     </VBox>
-                                    <TextArea
-                                        id="EasyFillInputTextArea"
-                                        growing="true"
-                                        growingMaxLines="30"
-                                        maxLength="2000"
-                                        liveChange=".onLiveChange"
-                                        placeholder="{i18n>EASY_FILL_TEXTAREA_PLACEHOLDER}"
-                                        rows="20"
-                                        width="100%"
-                                        showExceededText="true"
-                                        ariaLabelledBy="EasyFillInputArea"/>
-                                </FlexBox>
-                                <FlexBox direction="Row" justifyContent="End" gap="1rem">
-                                    <Button
-                                        id="EasyFillSubmitButton"
-                                        text="Easy Fill"
-                                        type="Default"
-                                        icon="sap-icon://ai"
-                                        fesr:press="fe2:ef:analyzeText"
-                                        enabled="{easyFillDialogModel>/isEasyFillButtonEnabled}"
-                                        press=".onEasyFillSubmitInputToAI"/>
-                                    <Button
-                                        id="EasyFillClearAll"
-                                        type="Transparent"
-                                        press=".onEasyFillClearAll"
-                                        fesr:press="fe2:ef:clearAll"
-                                        enabled="{easyFillDialogModel>/isEasyFillButtonEnabled}"
-                                        text="{i18n>EASYFILL_CLEAR_ALL}"/>
+                                    <!-- Input container: textarea + file import button; hidden when a file is loaded -->
+                                    <VBox id="EasyFillInputContainer" renderType="Bare" class="sapSmartTemplatesObjectPageEasyFillInputContainer"
+                                        visible="{= !${easyFillDialogModel>/uploadedFileName} }">
+                                        <TextArea
+                                            id="EasyFillInputTextArea"
+                                            growing="true"
+                                            growingMaxLines="30"
+                                            maxLength="50000"
+                                            liveChange=".onLiveChange"
+                                            placeholder="{i18n>EASY_FILL_TEXTAREA_PLACEHOLDER}"
+                                            rows="12"
+                                            width="100%"
+                                            ariaLabelledBy="EasyFillInputArea"/>
+                                        <!-- maxLength above must match EasyFillDialogController.MAX_INPUT_LENGTH (imported-file cap). -->
+                                        <!-- File import button: sits at the bottom-right of the textarea -->
+                                        <HBox id="EasyFillPickerArea" renderType="Bare" class="sapSmartTemplatesObjectPageEasyFillPickerArea" justifyContent="End">
+                                            <unified:FileUploader
+                                                id="EasyFillFileUploaderButton"
+                                                buttonOnly="true"
+                                                iconOnly="true"
+                                                icon="sap-icon://browse-folder"
+                                                tooltip="{i18n>EASY_FILL_UPLOAD_FILE_TOOLTIP}"
+                                                style="Transparent"
+                                                enabled="{= !${easyFillDialogModel>/hasEnteredText} }"
+                                                fileType="txt,csv"
+                                                change=".onFileUploaderChange"
+                                                typeMissmatch=".onFileTypeMismatch"/>
+                                        </HBox>
+                                        <!-- Drop overlay: absolute-positioned, pointer-events:none, visible only while dragging -->
+                                        <FlexBox
+                                            class="sapSmartTemplatesObjectPageEasyFillDropOverlay"
+                                            direction="Column"
+                                            justifyContent="Center"
+                                            alignItems="Center"
+                                            renderType="Bare"
+                                            visible="{easyFillDialogModel>/isDragging}">
+                                            <FlexBox
+                                                class="sapSmartTemplatesObjectPageEasyFillDropBadge"
+                                                justifyContent="Center"
+                                                alignItems="Center">
+                                                <core:Icon src="sap-icon://add" class="sapSmartTemplatesObjectPageEasyFillDropBadgeIcon"/>
+                                            </FlexBox>
+                                        </FlexBox>
+                                    </VBox>
+                                    <!-- Character counter: shown below textarea when no file is loaded, right-aligned like V4 -->
+                                    <Text
+                                        id="EasyFillRemainingCharsText"
+                                        text="{easyFillDialogModel>/remainingCharactersText}"
+                                        class="sapSmartTemplatesObjectPageEasyFillRemainingCharsText"
+                                        textAlign="End"
+                                        visible="{= !${easyFillDialogModel>/uploadedFileName} }"/>
+                                    <!-- Attachment + file preview: a real ObjectPageLayout (mirrors V4 createAttachmentArea).
+                                         The Imported File tile + action buttons + description live in the dynamic header;
+                                         the preview is a dedicated ObjectPageSection, visually detached from the header.
+                                         Collapse is the ObjectPage header snap (no custom chevron). -->
+                                    <uxap:ObjectPageLayout
+                                        id="EasyFillInputObjectPage"
+                                        class="sapUiNoContentPadding sapSmartTemplatesObjectPageEasyFillInputObjectPage"
+                                        height="100%"
+                                        showAnchorBar="false"
+                                        upperCaseAnchorBar="false"
+                                        headerContentPinnable="false"
+                                        visible="{= !!${easyFillDialogModel>/uploadedFileName} }">
+                                        <uxap:headerTitle>
+                                            <uxap:ObjectPageDynamicHeaderTitle>
+                                                <uxap:expandedContent>
+                                                    <FlexBox direction="Column" width="100%" renderType="Bare">
+                                                        <!-- Dialog description: shown only while the header is expanded -->
+                                                        <VBox gap="22px" class="sapSmartTemplatesObjectPageEasyFillInputAreaLabel sapUiTinyMarginBottom">
+                                                            <Label text="{i18n>EASY_FILL_FIRST_LABEL_TEXT}" wrapping="true"/>
+                                                            <Label text="{i18n>EASY_FILL_SECOND_LABEL_TEXT}" wrapping="true"/>
+                                                        </VBox>
+                                                        <!-- Imported File heading: label + tile + action buttons -->
+                                                        <FlexBox direction="Column" width="100%" renderType="Bare" class="sapSmartTemplatesObjectPageEasyFillHeaderHeading">
+                                                            <Text text="{i18n>EASY_FILL_UPLOADED_FILE_LABEL}" class="sapSmartTemplatesObjectPageEasyFillAttachmentLabel" wrapping="false"/>
+                                                            <FlexBox direction="Row" justifyContent="SpaceBetween" alignItems="Center" wrap="Wrap" width="100%" class="sapSmartTemplatesObjectPageEasyFillHeaderRow">
+                                                                <HBox class="sapSmartTemplatesObjectPageEasyFillAttachmentArea" alignItems="Center" wrap="Wrap">
+                                                                    <Avatar src="sap-icon://document-text" displayShape="Square" displaySize="Custom" customDisplaySize="2.5rem" backgroundColor="Accent7" class="sapSmartTemplatesObjectPageEasyFillAttachmentIconCircle"/>
+                                                                    <VBox class="sapSmartTemplatesObjectPageEasyFillAttachmentProgressArea" visible="{= ${easyFillDialogModel>/uploadProgress} &lt; 100 }" renderType="Bare">
+                                                                        <HBox justifyContent="SpaceBetween" renderType="Bare" class="sapSmartTemplatesObjectPageEasyFillAttachmentProgressHeader">
+                                                                            <Text text="{easyFillDialogModel>/uploadedFileName}" class="sapSmartTemplatesObjectPageEasyFillAttachmentName"/>
+                                                                            <Text text="{= ${easyFillDialogModel>/uploadProgress} + '%'}" class="sapSmartTemplatesObjectPageEasyFillAttachmentPercentage"/>
+                                                                        </HBox>
+                                                                        <ProgressIndicator percentValue="{easyFillDialogModel>/uploadProgress}" showValue="false" class="sapSmartTemplatesObjectPageEasyFillAttachmentProgress"/>
+                                                                    </VBox>
+                                                                    <VBox class="sapSmartTemplatesObjectPageEasyFillAttachmentInfo" visible="{= ${easyFillDialogModel>/uploadProgress} >= 100 }" renderType="Bare">
+                                                                        <Text text="{easyFillDialogModel>/uploadedFileName}" class="sapSmartTemplatesObjectPageEasyFillAttachmentName"/>
+                                                                        <Text text="{easyFillDialogModel>/uploadedFileSize}" class="sapSmartTemplatesObjectPageEasyFillAttachmentSize"/>
+                                                                    </VBox>
+                                                                    <Button icon="sap-icon://decline" type="Transparent" class="sapSmartTemplatesObjectPageEasyFillAttachmentRemoveButton" visible="{= ${easyFillDialogModel>/uploadProgress} >= 100 }" tooltip="{i18n>EASY_FILL_REMOVE_FILE_TOOLTIP}" press=".onDiscardImportedFile"/>
+                                                                </HBox>
+                                                                <FlexBox direction="Row" justifyContent="End" gap="1rem" alignItems="Center" wrap="Wrap" class="sapSmartTemplatesObjectPageEasyFillAttachmentActions" visible="{= ${easyFillDialogModel>/uploadProgress} >= 100 }">
+                                                                    <Button text="Easy Fill" type="Default" icon="sap-icon://ai" fesr:press="fe2:ef:analyzeText" enabled="{easyFillDialogModel>/isEasyFillButtonEnabled}" press=".onEasyFillSubmitInputToAI"/>
+                                                                    <Button type="Transparent" press=".onEasyFillClearAll" fesr:press="fe2:ef:clearAll" enabled="{easyFillDialogModel>/isEasyFillButtonEnabled}" text="{i18n>EASYFILL_CLEAR_ALL}"/>
+                                                                </FlexBox>
+                                                            </FlexBox>
+                                                        </FlexBox>
+                                                    </FlexBox>
+                                                </uxap:expandedContent>
+                                                <uxap:snappedContent>
+                                                    <!-- Collapsed header: same heading without the description -->
+                                                    <FlexBox direction="Column" width="100%" renderType="Bare" class="sapSmartTemplatesObjectPageEasyFillHeaderHeading">
+                                                        <Text text="{i18n>EASY_FILL_UPLOADED_FILE_LABEL}" class="sapSmartTemplatesObjectPageEasyFillAttachmentLabel" wrapping="false"/>
+                                                        <FlexBox direction="Row" justifyContent="SpaceBetween" alignItems="Center" wrap="Wrap" width="100%" class="sapSmartTemplatesObjectPageEasyFillHeaderRow">
+                                                            <HBox class="sapSmartTemplatesObjectPageEasyFillAttachmentArea" alignItems="Center" wrap="Wrap">
+                                                                <Avatar src="sap-icon://document-text" displayShape="Square" displaySize="Custom" customDisplaySize="2.5rem" backgroundColor="Accent7" class="sapSmartTemplatesObjectPageEasyFillAttachmentIconCircle"/>
+                                                                <VBox class="sapSmartTemplatesObjectPageEasyFillAttachmentProgressArea" visible="{= ${easyFillDialogModel>/uploadProgress} &lt; 100 }" renderType="Bare">
+                                                                    <HBox justifyContent="SpaceBetween" renderType="Bare" class="sapSmartTemplatesObjectPageEasyFillAttachmentProgressHeader">
+                                                                        <Text text="{easyFillDialogModel>/uploadedFileName}" class="sapSmartTemplatesObjectPageEasyFillAttachmentName"/>
+                                                                        <Text text="{= ${easyFillDialogModel>/uploadProgress} + '%'}" class="sapSmartTemplatesObjectPageEasyFillAttachmentPercentage"/>
+                                                                    </HBox>
+                                                                    <ProgressIndicator percentValue="{easyFillDialogModel>/uploadProgress}" showValue="false" class="sapSmartTemplatesObjectPageEasyFillAttachmentProgress"/>
+                                                                </VBox>
+                                                                <VBox class="sapSmartTemplatesObjectPageEasyFillAttachmentInfo" visible="{= ${easyFillDialogModel>/uploadProgress} >= 100 }" renderType="Bare">
+                                                                    <Text text="{easyFillDialogModel>/uploadedFileName}" class="sapSmartTemplatesObjectPageEasyFillAttachmentName"/>
+                                                                    <Text text="{easyFillDialogModel>/uploadedFileSize}" class="sapSmartTemplatesObjectPageEasyFillAttachmentSize"/>
+                                                                </VBox>
+                                                                <Button icon="sap-icon://decline" type="Transparent" class="sapSmartTemplatesObjectPageEasyFillAttachmentRemoveButton" visible="{= ${easyFillDialogModel>/uploadProgress} >= 100 }" tooltip="{i18n>EASY_FILL_REMOVE_FILE_TOOLTIP}" press=".onDiscardImportedFile"/>
+                                                            </HBox>
+                                                            <FlexBox direction="Row" justifyContent="End" gap="1rem" alignItems="Center" wrap="Wrap" class="sapSmartTemplatesObjectPageEasyFillAttachmentActions" visible="{= ${easyFillDialogModel>/uploadProgress} >= 100 }">
+                                                                <Button text="Easy Fill" type="Default" icon="sap-icon://ai" fesr:press="fe2:ef:analyzeText" enabled="{easyFillDialogModel>/isEasyFillButtonEnabled}" press=".onEasyFillSubmitInputToAI"/>
+                                                                <Button type="Transparent" press=".onEasyFillClearAll" fesr:press="fe2:ef:clearAll" enabled="{easyFillDialogModel>/isEasyFillButtonEnabled}" text="{i18n>EASYFILL_CLEAR_ALL}"/>
+                                                            </FlexBox>
+                                                        </FlexBox>
+                                                    </FlexBox>
+                                                </uxap:snappedContent>
+                                            </uxap:ObjectPageDynamicHeaderTitle>
+                                        </uxap:headerTitle>
+                                        <!-- Empty header content: makes the ObjectPageLayout render the built-in
+                                             collapse/expand (snap) chevron in the header, exactly like V4. -->
+                                        <uxap:headerContent>
+                                            <VBox/>
+                                        </uxap:headerContent>
+                                        <uxap:sections>
+                                            <uxap:ObjectPageSection
+                                                id="EasyFillFilePreviewSection"
+                                                showTitle="true"
+                                                visible="{= !!${easyFillDialogModel>/uploadedFileName} &amp;&amp; ${easyFillDialogModel>/uploadProgress} >= 100 }">
+                                                <uxap:subSections>
+                                                    <uxap:ObjectPageSubSection
+                                                        title="{i18n>EASY_FILL_FILE_PREVIEW_TITLE}"
+                                                        titleUppercase="false">
+                                                        <uxap:actions>
+                                                            <SegmentedButton
+                                                                id="EasyFillPreviewModeToggle"
+                                                                visible="{= ${easyFillDialogModel>/uploadedFileType} === 'csv' }"
+                                                                selectedKey="{easyFillDialogModel>/selectedFilePreviewMode}"
+                                                                selectionChange=".onFilePreviewModeChange">
+                                                                <items>
+                                                                    <SegmentedButtonItem key="Table" icon="sap-icon://table-view" tooltip="{i18n>EASY_FILL_FILE_PREVIEW_TABLE_TOOLTIP}"/>
+                                                                    <SegmentedButtonItem key="Text" icon="sap-icon://text" tooltip="{i18n>EASY_FILL_FILE_PREVIEW_TEXT_TOOLTIP}"/>
+                                                                </items>
+                                                            </SegmentedButton>
+                                                        </uxap:actions>
+                                                        <uxap:blocks>
+                                                            <ScrollContainer
+                                                                id="EasyFillFilePreviewScroll"
+                                                                height="100%"
+                                                                width="100%"
+                                                                vertical="true"
+                                                                horizontal="true">
+                                                                <VBox id="EasyFillFilePreviewContent" class="sapSmartTemplatesObjectPageEasyFillFilePreviewContent"/>
+                                                            </ScrollContainer>
+                                                        </uxap:blocks>
+                                                    </uxap:ObjectPageSubSection>
+                                                </uxap:subSections>
+                                            </uxap:ObjectPageSection>
+                                        </uxap:sections>
+                                    </uxap:ObjectPageLayout>
+                                    <FlexBox direction="Row" justifyContent="End" gap="1rem"
+                                        visible="{= !${easyFillDialogModel>/uploadedFileName} }">
+                                        <Button
+                                            id="EasyFillSubmitButton"
+                                            text="Easy Fill"
+                                            type="Default"
+                                            icon="sap-icon://ai"
+                                            fesr:press="fe2:ef:analyzeText"
+                                            enabled="{easyFillDialogModel>/isEasyFillButtonEnabled}"
+                                            press=".onEasyFillSubmitInputToAI"/>
+                                        <Button
+                                            id="EasyFillClearAll"
+                                            type="Transparent"
+                                            press=".onEasyFillClearAll"
+                                            fesr:press="fe2:ef:clearAll"
+                                            enabled="{easyFillDialogModel>/isEasyFillButtonEnabled}"
+                                            text="{i18n>EASYFILL_CLEAR_ALL}"/>
+                                    </FlexBox>
                                 </FlexBox>
                             </FlexBox>
                         </layout:SplitPane>