Niki/addr field

custom-fields/address-custom-field/address-custom-field-provider.ts

@@ -0,0 +1,110 @@
+import { Injectable, ClassProvider } from "@angular/core";
+
+import { FIELDS_PROVIDER_TOKEN, FieldData, FieldsProvider, SettingsBase } from "progress-sitefinity-adminapp-sdk/app/api/v1";
+import { FieldRegistration } from "progress-sitefinity-adminapp-sdk/app/api/v1";
+import { RegistrationPair } from "./../registration-pair";
+import { AddressCustomFieldComponent } from "./address-custom-field.component";
+
+/**
+ * The fields provider provides the overridden fields back to the AdminApp.
+ */
+@Injectable()
+export class AddressCustomFieldProvider implements FieldsProvider {
+    private customFieldsMappings: RegistrationPair[];
+
+    constructor() {
+        this.customFieldsMappings = [];
+
+        this.registerCustomComponents();
+        this.registerCustomWidgetComponents();
+    }
+
+    /**
+     * This method gets called before each field is instantiated, allowing custom fields to be plugged in for any type.
+     * @param fieldRegistryKey The metadata needed to determine which field to display.
+     */
+    overrideField(fieldRegistryKey: FieldData): FieldRegistration {
+        const registration: FieldRegistration = this.findRegistration(fieldRegistryKey);
+        return registration;
+    }
+
+    /**
+     * This method finds an implementation of the field to be overridden.
+     * @param fieldRegistryKey The metadata needed to determine which field to display.
+     */
+    private findRegistration(fieldRegistryKey: FieldData): FieldRegistration {
+        for (const pair of this.customFieldsMappings) {
+            if (fieldRegistryKey.fieldName === pair.key.fieldName &&
+                fieldRegistryKey.fieldType === pair.key.fieldType) {
+                    return pair.registration;
+            }
+        }
+
+        return null;
+    }
+
+    /**
+     * Initializes the custom field(component) registrations.
+     */
+    private registerCustomComponents(): void {
+
+        // The field name is the name which identifies the field uniquely.
+        // The typename is the OData entity set name. It matches the url segment when navigating
+        // to the list view of the specific type.
+        const customInputKey: FieldData = {
+            fieldName: "HereAddress",
+            fieldType: "sf-text-area",
+            typeName: undefined
+        };
+
+        // The result field registration that will be returned to the AdminApp.
+        const customInputRegistration: FieldRegistration = {
+            writeComponent: AddressCustomFieldComponent,
+            readComponent: AddressCustomFieldComponent,
+            settingsType: SettingsBase
+        };
+
+        const customFieldRegistrationPair: RegistrationPair = {
+             key: customInputKey,
+             registration: customInputRegistration
+        };
+
+        this.customFieldsMappings.push(customFieldRegistrationPair);
+    }
+
+    private registerCustomWidgetComponents(): void {
+
+        // The field name is the name which identifies the field uniquely.
+        // The typename is the OData entity set name. It matches the url segment when navigating
+        // to the list view of the specific type.
+        const customInputKey: FieldData = {
+            fieldName: "Address",
+            fieldType: "sf-short-text",
+            typeName: "widget-HereAddress"
+        };
+
+        // The result field registration that will be returned to the AdminApp.
+        const customInputRegistration: FieldRegistration = {
+            writeComponent: AddressCustomFieldComponent,
+            readComponent: AddressCustomFieldComponent,
+            settingsType: SettingsBase
+        };
+
+        const customFieldRegistrationPair: RegistrationPair = {
+             key: customInputKey,
+             registration: customInputRegistration
+        };
+
+        this.customFieldsMappings.push(customFieldRegistrationPair);
+    }
+}
+
+/**
+ * Export a 'multi' class provider so that multiple instances of the same provider can coexist.
+ * This allows for more than one provider to be registered within one or more bundles.
+ */
+export const ADDRESS_CUSTOM_FIELDS_PROVIDER: ClassProvider = {
+    provide: FIELDS_PROVIDER_TOKEN,
+    useClass: AddressCustomFieldProvider,
+    multi: true
+};

custom-fields/address-custom-field/address-custom-field.component.html

@@ -0,0 +1,102 @@
+<div class="sf-field" >
+        <span sfTrackFocus
+            (contentFocusOut)="onFocusOut()">
+            <span class="sf-input sf-popup">
+                <input type="text"
+                     #streetAddress
+                     class="sf-input__field"
+                     autocomplete="off"
+                     (keydown.enter)="onEnterKey($event)"
+                     (keydown.escape)="onEscapeKey()"
+                     (keydown.arrowUp)="onFocusPreviousNode()"
+                     (keydown.arrowDown)="onFocusNextNode()"
+                     (input)="onNewInputValue({ label: $event.srcElement.value })"
+                     [(ngModel)]="searchTerm">
+                <sf-popup [isOpen]="isPopupVisible">
+                   <div class="sf-popup__content sf-dropdown -condensed">
+                        <div *ngIf="searchTerm && !(hasSuggestions | async)" class="sf-dropdown__no-items">
+                                No results found
+                        </div>
+                        <sf-tree
+                            data-sftest="related-data_popup-tree"
+                            #popupTree
+                            focusFirstNode="true"
+                            displayField="label"
+                            [nodes]="suggestions$ | async"
+                            look="flat condensed"
+                            [config]="popupTreeConfig"
+                            [textToMatch]="searchTerm"
+                            (treeNodeClicked)="onNewItemSelected($event)">
+                        </sf-tree>
+                    </div>
+                </sf-popup>
+            </span>
+        </span>
+</div>
+<div class="sf-field" >
+    <fieldset>
+        <legend class="sf-field__label -legend">
+            Address line 2
+        </legend>
+            <span class="sf-input sf-popup">
+                <input type="text"
+                    #streetAddress2
+                    (input)="onNewInputValue({ label2: $event.srcElement.value })"
+                    class="sf-input__field">
+            </span>
+    </fieldset>
+</div>
+<div class="sf-field" >
+    <fieldset>
+        <legend class="sf-field__label -legend">
+            Country
+        </legend>
+            <span class="sf-input sf-popup">
+                <input type="text"
+                    #country
+                    (input)="onNewInputValue({ address: { country: $event.srcElement.value }})"
+                    class="sf-input__field">
+            </span>
+    </fieldset>
+</div>
+<div class="sf-field" >
+    <fieldset>
+        <legend class="sf-field__label -legend">
+            County/State/Province
+        </legend>
+            <span class="sf-input sf-popup">
+                <input type="text"
+                    #county
+                    (input)="onNewInputValue({ address: { county: $event.srcElement.value }})"
+                    class="sf-input__field">
+            </span>
+    </fieldset>
+</div>
+<div class="sf-field" >
+    <fieldset>
+        <legend class="sf-field__label -legend">
+            Town/City
+        </legend>
+            <span class="sf-input sf-popup">
+                <input type="text"
+                    #city
+                    (input)="onNewInputValue({ address: { city: $event.srcElement.value }})"
+                    class="sf-input__field">
+            </span>
+    </fieldset>
+</div>
+<div class="sf-field" >
+    <fieldset>
+        <legend class="sf-field__label -legend">
+            Postcode/Zip
+        </legend>
+            <span class="sf-input sf-popup">
+                <input type="text"
+                    #postcode
+                    (input)="onNewInputValue({ address: { postalCode: $event.srcElement.value }})"
+                    class="sf-input__field">
+            </span>
+    </fieldset>
+</div>
+
+<div style="width: 640px; height: 480px" #mapContainer></div>