search

Jinntec / Fore

Fore - declarative user interfaces in plain HTML
MIT License
82 stars 11 forks source link

Default instance does not work if two instances are used one loaded from remote `src` #273

Closed rkottmann closed 3 months ago

rkottmann commented 3 months ago

If I have two instances e.g. one local and one remote, then I can not use the default "id" (by not assigning an id attribute), but have to give an id to the fore-instance. This seems to be an unexpected behaviour for newbie-user like me. Is it a bug? If not, it needs documentation.

Below I try to show case the issue:

<!DOCTYPE html>

<html lang="">

<head>
  <link rel="stylesheet" href="[https://cdn.jsdelivr.net/npm/@jinntec/fore@latest/resources/fore.css](view-source:https://cdn.jsdelivr.net/npm/@jinntec/fore@latest/resources/fore.css)">

  <script type="module" src="[https://cdn.jsdelivr.net/npm/@jinntec/fore@latest/dist/fore.js](view-source:https://cdn.jsdelivr.net/npm/@jinntec/fore@latest/dist/fore.js)"></script>

</head>

<body>
<h1>Test two instance on local one from "src"</h1>
<h2>Both instances having "id" (works)</h2>

<div>
    <fx-fore xmlns:ubl="urn:oasis:names:specification:ubl:schema:xsd:Invoice-2"
        xmlns:cac="urn:oasis:names:specification:ubl:schema:xsd:CommonAggregateComponents-2"
        xmlns:cbc="urn:oasis:names:specification:ubl:schema:xsd:CommonBasicComponents-2">
        <fx-model strict="true">
            <fx-instance id="test">
                <data>
                    <planet name="earth">
                        <greeting>Hello Fore</greeting>
                    </planet>
                </data>
            </fx-instance>
            <fx-instance id="i" src="invoice-ubl.xml"></fx-instance>
        </fx-model>
        <h3>local instance</h3>
        From <fx-output ref="instance('test')/planet/@name"></fx-output>:
        <fx-output ref="instance('test')/planet/greeting">Hello Universe</fx-output>
        <h3>Invoice remote instance</h3>
        <fx-output ref="instance('i')/cbc:CustomizationID"></fx-output>
    </fx-fore>
</div>

<h2>Local instance does NOT have an id (works)</h2>

<div id="test-2">
    <fx-fore xmlns:ubl="urn:oasis:names:specification:ubl:schema:xsd:Invoice-2"
        xmlns:cac="urn:oasis:names:specification:ubl:schema:xsd:CommonAggregateComponents-2"
        xmlns:cbc="urn:oasis:names:specification:ubl:schema:xsd:CommonBasicComponents-2">
        <fx-model strict="true">
            <fx-instance>
                <data>
                    <planet name="earth">
                        <greeting>Hello Foreground</greeting>
                    </planet>
                </data>
            </fx-instance>
            <fx-instance id="i" src="invoice-ubl.xml"></fx-instance>
        </fx-model>
        <h3>local instance</h3>
        From <fx-output ref="planet/@name"></fx-output>:
        <fx-output ref="planet/greeting">Hello Universe</fx-output>
        <h3>Invoice remote instance</h3>
        <fx-output ref="instance('i')/cbc:CustomizationID"></fx-output>

    </fx-fore>
</div>

<h2>Local instance does have an id, remote instance NOT (does not work)</h2>

<div id="test-3">
    <fx-fore xmlns:ubl="urn:oasis:names:specification:ubl:schema:xsd:Invoice-2"
        xmlns:cac="urn:oasis:names:specification:ubl:schema:xsd:CommonAggregateComponents-2"
        xmlns:cbc="urn:oasis:names:specification:ubl:schema:xsd:CommonBasicComponents-2">
        <fx-model strict="true">
            <fx-instance id="test-3">
                <data>
                    <planet name="earth">
                        <greeting>Hello Foreground</greeting>
                    </planet>
                </data>
            </fx-instance>
            <fx-instance src="invoice-ubl.xml"></fx-instance>
        </fx-model>
        <h3>local instance</h3>
        From <fx-output ref="planet/@name"></fx-output>:
        <fx-output ref="planet/greeting">Hello Universe</fx-output>
        <h3>Invoice remote instance</h3>
        <fx-output ref="cbc:CustomizationID"></fx-output>

    </fx-fore>
</div>

<h3>Only remote instance (works)</h3>
<div id="test-4">
    <fx-fore xmlns:ubl="urn:oasis:names:specification:ubl:schema:xsd:Invoice-2"
        xmlns:cac="urn:oasis:names:specification:ubl:schema:xsd:CommonAggregateComponents-2"
        xmlns:cbc="urn:oasis:names:specification:ubl:schema:xsd:CommonBasicComponents-2">
        <fx-model strict="true">
            <fx-instance src="invoice-ubl.xml"></fx-instance>
        </fx-model>
        <h3>local instance</h3>
        From <fx-output ref="planet/@name"></fx-output>:
        <fx-output ref="planet/greeting">Hello Universe</fx-output>
        <h3>Invoice remote instance</h3>
        <fx-output ref="cbc:CustomizationID"></fx-output>

    </fx-fore>
</div>

</body>

</html>

the referenced source xml invoice-ubl.xml:

<?xml version="1.0" encoding="UTF-8"?>
<ubl:Invoice xmlns:ubl="urn:oasis:names:specification:ubl:schema:xsd:Invoice-2"
             xmlns:cac="urn:oasis:names:specification:ubl:schema:xsd:CommonAggregateComponents-2"
             xmlns:cbc="urn:oasis:names:specification:ubl:schema:xsd:CommonBasicComponents-2">
    <cbc:CustomizationID>urn:cen.eu:en16931:2017#compliant#urn:xeinkauf.de:kosit:xrechnung_3.0</cbc:CustomizationID>
    <cbc:ProfileID>urn:fdc:peppol.eu:2017:poacc:billing:01:1.0</cbc:ProfileID>
    <cbc:ID>123456XX</cbc:ID>
    <cbc:IssueDate>2016-04-04</cbc:IssueDate>
    <cbc:InvoiceTypeCode>380</cbc:InvoiceTypeCode>
    <cbc:Note>#ADU#Es gelten unsere Allgem. Geschäftsbedingungen, die Sie unter […] finden.</cbc:Note>
    <cbc:DocumentCurrencyCode>EUR</cbc:DocumentCurrencyCode>
    <cbc:BuyerReference>04011000-12345-03</cbc:BuyerReference>
    <cac:AccountingSupplierParty>
        <cac:Party>
            <cbc:EndpointID schemeID="EM">seller@email.de</cbc:EndpointID>
            <cac:PartyName>
                <cbc:Name>[Seller trading name]</cbc:Name>
            </cac:PartyName>
            <cac:PostalAddress>
                <cbc:StreetName>[Seller address line 1]</cbc:StreetName>
                <cbc:CityName>[Seller city]</cbc:CityName>
                <cbc:PostalZone>12345</cbc:PostalZone>
                <cac:Country>
                    <cbc:IdentificationCode>DE</cbc:IdentificationCode>
                </cac:Country>
            </cac:PostalAddress>
            <cac:PartyTaxScheme>
                <cbc:CompanyID>DE 123456789</cbc:CompanyID>
                <cac:TaxScheme>
                    <cbc:ID>VAT</cbc:ID>
                </cac:TaxScheme>
            </cac:PartyTaxScheme>
            <cac:PartyLegalEntity>
                <cbc:RegistrationName>[Seller name]</cbc:RegistrationName>
                <cbc:CompanyID>[HRA-Eintrag]</cbc:CompanyID>
                <cbc:CompanyLegalForm>123/456/7890, HRA-Eintrag in […]</cbc:CompanyLegalForm>
            </cac:PartyLegalEntity>
            <cac:Contact>
                <cbc:Name>nicht vorhanden</cbc:Name>
                <cbc:Telephone>+49 1234-5678</cbc:Telephone>
                <cbc:ElectronicMail>seller@email.de</cbc:ElectronicMail>
            </cac:Contact>
        </cac:Party>
    </cac:AccountingSupplierParty>
    <cac:AccountingCustomerParty>
        <cac:Party>
            <cbc:EndpointID schemeID="EM">buyer@info.de</cbc:EndpointID>
            <cac:PartyIdentification>
                <cbc:ID>[Buyer identifier]</cbc:ID>
            </cac:PartyIdentification>
            <cac:PostalAddress>
                <cbc:StreetName>[Buyer address line 1]</cbc:StreetName>
                <cbc:CityName>[Buyer city]</cbc:CityName>
                <cbc:PostalZone>12345</cbc:PostalZone>
                <cac:Country>
                    <cbc:IdentificationCode>DE</cbc:IdentificationCode>
                </cac:Country>
            </cac:PostalAddress>
            <cac:PartyLegalEntity>
                <cbc:RegistrationName>[Buyer name]</cbc:RegistrationName>
            </cac:PartyLegalEntity>
        </cac:Party>
    </cac:AccountingCustomerParty>
    <cac:PaymentMeans>
        <cbc:PaymentMeansCode>58</cbc:PaymentMeansCode>
        <cac:PayeeFinancialAccount>
            <!-- dies ist eine nicht existerende aber valide IBAN als test dummy -->
            <cbc:ID>DE75512108001245126199</cbc:ID>
        </cac:PayeeFinancialAccount>
    </cac:PaymentMeans>
    <cac:PaymentTerms>
        <cbc:Note>Zahlbar sofort ohne Abzug.</cbc:Note>
    </cac:PaymentTerms>
    <cac:TaxTotal>
        <cbc:TaxAmount currencyID="EUR">22.04</cbc:TaxAmount>
        <cac:TaxSubtotal>
            <cbc:TaxableAmount currencyID="EUR">314.86</cbc:TaxableAmount>
            <cbc:TaxAmount currencyID="EUR">22.04</cbc:TaxAmount>
            <cac:TaxCategory>
                <cbc:ID>S</cbc:ID>
                <cbc:Percent>7</cbc:Percent>
                <cac:TaxScheme>
                    <cbc:ID>VAT</cbc:ID>
                </cac:TaxScheme>
            </cac:TaxCategory>
        </cac:TaxSubtotal>
    </cac:TaxTotal>
    <cac:LegalMonetaryTotal>
        <cbc:LineExtensionAmount currencyID="EUR">314.86</cbc:LineExtensionAmount>
        <cbc:TaxExclusiveAmount currencyID="EUR">314.86</cbc:TaxExclusiveAmount>
        <cbc:TaxInclusiveAmount currencyID="EUR">336.9</cbc:TaxInclusiveAmount>
        <cbc:PayableAmount currencyID="EUR">336.9</cbc:PayableAmount>
    </cac:LegalMonetaryTotal>
    <cac:InvoiceLine>
        <cbc:ID>Zeitschrift [...]</cbc:ID>
        <cbc:Note>Die letzte Lieferung im Rahmen des abgerechneten Abonnements erfolgt in 12/2016 Lieferung erfolgt / erfolgte direkt vom Verlag</cbc:Note>
        <cbc:InvoicedQuantity unitCode="XPP">1</cbc:InvoicedQuantity>
        <cbc:LineExtensionAmount currencyID="EUR">288.79</cbc:LineExtensionAmount>
        <cac:InvoicePeriod>
            <cbc:StartDate>2016-01-01</cbc:StartDate>
            <cbc:EndDate>2016-12-31</cbc:EndDate>
        </cac:InvoicePeriod>
        <cac:OrderLineReference>
            <cbc:LineID>6171175.1</cbc:LineID>
        </cac:OrderLineReference>
        <cac:Item>
            <cbc:Description>Zeitschrift Inland</cbc:Description>
            <cbc:Name>Zeitschrift [...]</cbc:Name>
            <cac:SellersItemIdentification>
                <cbc:ID>246</cbc:ID>
            </cac:SellersItemIdentification>
            <cac:CommodityClassification>
                <cbc:ItemClassificationCode listID="IB">0721-880X</cbc:ItemClassificationCode>
            </cac:CommodityClassification>
            <cac:ClassifiedTaxCategory>
                <cbc:ID>S</cbc:ID>
                <cbc:Percent>7</cbc:Percent>
                <cac:TaxScheme>
                    <cbc:ID>VAT</cbc:ID>
                </cac:TaxScheme>
            </cac:ClassifiedTaxCategory>
        </cac:Item>
        <cac:Price>
            <cbc:PriceAmount currencyID="EUR">288.79</cbc:PriceAmount>
        </cac:Price>
    </cac:InvoiceLine>
    <cac:InvoiceLine>
        <cbc:ID>Porto + Versandkosten</cbc:ID>
        <cbc:InvoicedQuantity unitCode="XPP">1</cbc:InvoicedQuantity>
        <cbc:LineExtensionAmount currencyID="EUR">26.07</cbc:LineExtensionAmount>
        <cac:Item>
            <cbc:Name>Porto + Versandkosten</cbc:Name>
            <cac:ClassifiedTaxCategory>
                <cbc:ID>S</cbc:ID>
                <cbc:Percent>7</cbc:Percent>
                <cac:TaxScheme>
                    <cbc:ID>VAT</cbc:ID>
                </cac:TaxScheme>
            </cac:ClassifiedTaxCategory>
        </cac:Item>
        <cac:Price>
            <cbc:PriceAmount currencyID="EUR">26.07</cbc:PriceAmount>
        </cac:Price>
    </cac:InvoiceLine>
</ubl:Invoice>
JoernT commented 3 months ago

This is not a bug.

The problem with the non-working example is that it omits the id on the second fx-instance.

However it's only allowed to omit the id on the first fx-instance in document order. The reason is that the first instance is usually the payload instance holding the data you actually want to edit. Therefore there's the concept of the Default Instance to reduce the typing effort in binding expressions or in cases where only a single instance is used.

As this confusion emerged from missing documentation i added a paragaph in the docs of fx-instance - i hope this does the job.

rkottmann commented 3 months ago

Thx. That really clarifies this issue :)