perfin/src/main/resources/edit-transaction.fxml

<?xml version="1.0" encoding="UTF-8"?>

<?import com.andrewlalis.perfin.view.component.AccountSelectionBox?>
<?import com.andrewlalis.perfin.view.component.FileSelectionArea?>
<?import com.andrewlalis.perfin.view.component.PropertiesPane?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import com.andrewlalis.perfin.view.component.CategorySelectionBox?>
<?import com.andrewlalis.perfin.view.component.StyledText?>
<BorderPane xmlns="http://javafx.com/javafx"
            xmlns:fx="http://javafx.com/fxml"
            fx:controller="com.andrewlalis.perfin.control.EditTransactionController"
            fx:id="container"
>
    <top>
        <Label fx:id="titleLabel" styleClass="large-font,bold-text,std-padding"/>
    </top>
    <center>
        <ScrollPane fitToWidth="true" fitToHeight="true">
            <VBox style="-fx-max-width: 500px;">
                <!-- Basic properties -->
                <PropertiesPane hgap="5" vgap="5" styleClass="std-padding">
                    <columnConstraints>
                        <ColumnConstraints hgrow="NEVER" halignment="LEFT" minWidth="150"/>
                        <ColumnConstraints hgrow="ALWAYS" halignment="RIGHT"/>
                    </columnConstraints>

                    <Label text="Timestamp" labelFor="${timestampField}" styleClass="bold-text"/>
                    <TextField fx:id="timestampField" styleClass="mono-font"/>

                    <Label text="Amount" labelFor="${amountField}" styleClass="bold-text"/>
                    <HBox styleClass="std-spacing">
                        <TextField fx:id="amountField" styleClass="mono-font" HBox.hgrow="ALWAYS"/>
                        <ChoiceBox fx:id="currencyChoiceBox"/>
                    </HBox>

                    <Label text="Description" labelFor="${descriptionField}" styleClass="bold-text"/>
                    <TextArea
                            fx:id="descriptionField"
                            styleClass="mono-font"
                            wrapText="true"
                            style="-fx-pref-height: 100px;-fx-min-height: 100px;"
                    />
                </PropertiesPane>

                <!-- Container for linked accounts -->
                <HBox styleClass="std-padding,std-spacing" fx:id="linkedAccountsContainer">
                    <VBox HBox.hgrow="ALWAYS">
                        <Label text="Debited Account" labelFor="${debitAccountSelector}" styleClass="bold-text"/>
                        <AccountSelectionBox fx:id="debitAccountSelector" allowNone="true" showBalance="true"/>
                    </VBox>
                    <VBox HBox.hgrow="ALWAYS">
                        <Label text="Credited Account" labelFor="${creditAccountSelector}" styleClass="bold-text"/>
                        <AccountSelectionBox fx:id="creditAccountSelector" allowNone="true" showBalance="true"/>
                    </VBox>
                </HBox>

                <!-- Additional, mostly optional properties -->
                <PropertiesPane hgap="5" vgap="5" styleClass="std-padding">
                    <columnConstraints>
                        <ColumnConstraints hgrow="NEVER" halignment="LEFT" minWidth="150"/>
                        <ColumnConstraints hgrow="ALWAYS" halignment="RIGHT"/>
                    </columnConstraints>

                    <VBox>
                        <Label text="Vendor" labelFor="${vendorComboBox}" styleClass="bold-text"/>
                        <Hyperlink fx:id="vendorsHyperlink" text="Manage vendors" styleClass="small-font"/>
                    </VBox>
                    <ComboBox fx:id="vendorComboBox" editable="true" maxWidth="Infinity"/>

                    <VBox>
                        <Label text="Category" labelFor="${categoryComboBox}" styleClass="bold-text"/>
                        <Hyperlink fx:id="categoriesHyperlink" text="Manage categories" styleClass="small-font"/>
                    </VBox>
                    <CategorySelectionBox fx:id="categoryComboBox" maxWidth="Infinity"/>

                    <VBox>
                        <Label text="Tags" labelFor="${tagsComboBox}" styleClass="bold-text"/>
                        <Hyperlink fx:id="tagsHyperlink" text="Manage tags" styleClass="small-font"/>
                    </VBox>
                    <VBox maxWidth="Infinity">
                        <HBox styleClass="std-spacing">
                            <ComboBox fx:id="tagsComboBox" editable="true" HBox.hgrow="ALWAYS" maxWidth="Infinity"/>
                            <Button fx:id="addTagButton" text="Add" HBox.hgrow="NEVER"/>
                        </HBox>
                        <VBox fx:id="tagsVBox" styleClass="std-spacing,std-padding"/>
                    </VBox>
                </PropertiesPane>

                <!-- Container for line items -->
                <VBox styleClass="std-padding">
                    <Label text="Line Items" styleClass="bold-text"/>
                    <Button text="Add Line Item" fx:id="addLineItemButton"/>
                    <VBox styleClass="std-spacing" fx:id="addLineItemForm">
                        <HBox styleClass="std-spacing">
                            <VBox>
                                <Label text="Quantity" styleClass="bold-text,small-font"/>
                                <Spinner fx:id="lineItemQuantitySpinner" minWidth="60" maxWidth="60"/>
                            </VBox>
                            <VBox HBox.hgrow="ALWAYS">
                                <Label text="Value per Item" styleClass="bold-text,small-font"/>
                                <TextField fx:id="lineItemValueField"/>
                            </VBox>
                        </HBox>
                        <VBox>
                            <Label text="Description" styleClass="bold-text,small-font"/>
                            <TextField fx:id="lineItemDescriptionField"/>
                        </VBox>
                        <VBox>
                            <Label text="Category" styleClass="bold-text,small-font"/>
                            <CategorySelectionBox fx:id="lineItemCategoryComboBox" maxWidth="Infinity"/>
                        </VBox>
                        <HBox styleClass="std-spacing" alignment="CENTER_RIGHT">
                            <Button text="Add" fx:id="addLineItemAddButton"/>
                            <Button text="Cancel" fx:id="addLineItemCancelButton"/>
                        </HBox>
                    </VBox>

                    <VBox fx:id="lineItemsVBox" styleClass="std-padding, std-spacing"/>

                    <Label
                            fx:id="lineItemsValueMatchLabel"
                            text="Total value of line items equals the transaction amount."
                            styleClass="positive-color-text-fill"
                    />
                    <Button fx:id="lineItemsAmountSyncButton" text="Set transaction amount to line items total" styleClass="small-font"/>
                </VBox>

                <!-- Container for attachments -->
                <VBox styleClass="std-padding">
                    <Label text="Attachments" styleClass="bold-text"/>
                    <Label text="Attach receipts, invoices, or other content to this transaction." styleClass="small-font" wrapText="true"/>
                    <FileSelectionArea fx:id="attachmentsSelectionArea" allowMultiple="true"/>
                </VBox>

                <!-- Buttons -->
                <Separator/>
                <HBox styleClass="std-padding,std-spacing" alignment="CENTER_RIGHT">
                    <Button text="Save" fx:id="saveButton" onAction="#save"/>
                    <Button text="Cancel" onAction="#cancel"/>
                </HBox>
            </VBox>
        </ScrollPane>
    </center>
</BorderPane>