gehgassi_backend/gehGassi.Web/TS/Views/Shop/Index.ts

import { Global } from "../../Core/Globals"
import { EventManager } from "../../Core/Events"
import { Ui } from "../../Core/Ui"
import { Query, DataManager, UrlAdaptor } from "@syncfusion/ej2-data";
import { TreeView, NodeClickEventArgs } from "@syncfusion/ej2-navigations";
import * as Events from "../../Core/EventDefinitions"
import { LocalizationManager } from "../../Core/Localization"
import { ShopFilter } from "../../Common/Models";
import * as Utility from "../../Core/Utility";
import * as Models from "../../Common/Models";
import ProductType = Models.ProductType;
import ProductStartType = Models.ProductStartType;

class ShopIndexModule {
    private _moduleName = "ShopIndexModule";
    private _component = "#shopIndexContainer";
    private _global: Global;
    private _eventManager: EventManager;
    private _uiManager: Ui;
    private _localizationMananger: LocalizationManager;
    private _data: any;

    private _categoryTreeView: TreeView;
    private _categories;

    private _currentProductModule : string;

    constructor() {
        this._global = Global.getInstance();
        this._eventManager = EventManager.getInstance();
        this._uiManager = Ui.getInstance();
        this._localizationMananger = LocalizationManager.getInstance();
        this._categories = [];
    }

    /**
     * Stellt einen Prefix vor einen Selektor
     * @param selector
     */
    private prefix(selector: string): string {
        const self = this;
        if ($(`${self._component} ${selector}`).length > 0)
            return `${self._component} ${selector}`;
        return `html ${selector}`;
    }

    /**
    * Behandeln der Suche via Feld
    */
    private _oldSearch = "";
    private handleSearch(): void {
        var self = this;
        if ($(self.prefix("#search")).doSearch()) {
            var search = $(self.prefix("#search")).valForSearch();
            if (self._oldSearch !== search) {
                self._oldSearch = search;
                self.showProducts();
            }
        }
    }

    /**
     * Laden der Kategorien
     */
    private loadCategories(): void {
        var self = this;
        self._uiManager.blockMainUi();
        $.ajax({
            url: <string>$(self.prefix("#jsGetCategoriesCustomer")).val(),
            data: <any>{},
            dataType: "JSON",
            type: "GET",
            success(data) {
                self._categories = data;
                self._categoryTreeView = new TreeView({
                    fields: { dataSource: self._categories, id: "id", text: "name", child: "children" },
                    showCheckBox: true,
                    loadOnDemand: false,
                    autoCheck: true,
                    nodeChecked() {
                        self.showProducts();
                    },
                    dataBound() {
                        self.showProducts();
                    },
                    nodeClicked(args: NodeClickEventArgs) {
                        let checkedNode: any = [args.node];
                        let target = <any>(args.event.target);
                        if (target.classList.contains("e-fullrow")) {
                            let getNodeDetails: any = self._categoryTreeView.getNode(args.node);
                            if (getNodeDetails.isChecked === "true") {
                                self._categoryTreeView.uncheckAll(checkedNode);
                            } else {
                                self._categoryTreeView.checkAll(checkedNode);
                            }
                        }
                    }
                });
                self._categoryTreeView.appendTo(self.prefix("#categoriesTree"));
                self._categoryTreeView.expandAll(null,10);
            },
            error() {

            },
            complete() {
                self._uiManager.unblockMainUi();
            }
        });
    }

    /**
     * Produkte anzeigen
     */
    private showProducts(): void {
        var self = this;
        self._uiManager.blockUi("#shopIndexContainer");

        var categories = self._categoryTreeView.getAllCheckedNodes().map(c => Number(c));

        var modelVm = new ShopFilter();
        modelVm.categories =categories;
        modelVm.filter = $(self.prefix("#search")).val().toString();

        var model = JSON.stringify(modelVm);

        $.ajax({
            url: <string>$(self.prefix("#jsGetProductsUrl")).val(),
            data: model,
            dataType: "HTML",
            contentType: "application/json; charset=utf8",
            type: "POST",
            success(data) {
                $(self.prefix("#productList")).html(data);
                self.productHandler();
            },
            error() {

            },
            complete() {
                self._uiManager.unblockUi("#shopIndexContainer");
            }
        });
    }

    /**Handler für die Produkte buchen */
    private productHandler(): void {
        var self = this;

        $(self.prefix(".link")).off("click").on("click", function() {
            var productId = $(this).data("productid");
            var productType: ProductType = ProductType[<string>$(this).data("producttype").toString()];
            self.showDetails(productId, productType);
        });

        $(self.prefix(".addToCart")).off("click").on("click", function() {
            var productId = $(this).data("productid");
            var productType: ProductType = ProductType[<string>$(this).data("producttype").toString()];
            self.addToCart(productId, productType);
        });
    }

    /**
     * Details anzeigen
     */
    private showDetails(productId: number, productType: ProductType): void {
        var self = this;
        self._uiManager.blockMainUi();
        $.ajax({
            url: <string>$(self.prefix("#jsGetDetailsUrl")).val(),
            data: <any>{ productId: productId },
            dataType: "HTML",
            type: "GET",
            success(data) {
                $(self.prefix("#detail")).html(data);
                $(self.prefix("#list")).fadeOut("slow", () => {
                    $(self.prefix("#detail")).fadeIn("slow");
                });
            },
            error() {

            },
            complete() {
                self._uiManager.unblockMainUi();
            }
        });
    }

    /**
     * Zum Warenkorb hinzfügen
     */
    private addToCart(productId: number, productType: ProductType): void {
        var self = this;

        var url: string = "";
        switch (productType) {
            case ProductType.Listing:
                self._currentProductModule = "AddListingToCartModule";
                url = <string>$(self.prefix("#jsAddToCartListingUrl")).val();
                break;
            case ProductType.Advertisement:
                self._currentProductModule = "AddAdvertisementToCartModule";
                url = <string>$(self.prefix("#jsAddToCartAdvertisementUrl")).val();
                break;
            case ProductType.Banner:
                self._currentProductModule = "AddBannerToCartModule";
                url = <string>$(self.prefix("#jsAddToCartBannerUrl")).val();
                break;
            case ProductType.Pin:
                self._currentProductModule = "AddPinToCartModule";
                url = <string>$(self.prefix("#jsAddToCartPinUrl")).val();
                break;
        }

        $.ajax({
            url: url,
            data: <any>{ productId: productId },
            dataType: "HTML",
            type: "GET",
            success(data) {
                self._uiManager.showModule(self._currentProductModule, data);
            },
            error() {

            },
            complete() {
                
            }
        });
    }

    /**
    * Bindungen erstellen
    */
    private setupBindings(): void {
        var self = this;

        $(self.prefix("#search")).on("keyup change", Utility.debounce(() => {
            self.handleSearch();
        }, 500));


        self._eventManager.subscribe(Events.Shop.backDetails, self._moduleName, function () {
            $(self.prefix("#detail")).fadeOut("slow", () => {
                $(self.prefix("#list")).fadeIn();
                $(self.prefix("#detail")).html("");
            });
        });

        self._eventManager.subscribe(Events.Shop.addToCartCancel, self._moduleName, function () {
            self._uiManager.hideModule(self._currentProductModule);
        });

        self._eventManager.subscribe(Events.Shop.addToCartSuccess, self._moduleName, function () {
            self._uiManager.hideModule(self._currentProductModule);
        });
    }

    /**
    * Aktivieren des Moduls
    */
    public activate(): void {

        var self = this;
        $.setupValidator();
        $.reinitializeValidator();
        this.setupBindings();
        self.loadCategories();
        
        //self._uiManager.pageTitleAdd(self._component, self.prefix("#pageTitleAdd"));
        $.randomAutocompleteValue();
    }

    /**
    * Initialisieren des Moduls
    */
    public init(): void {
        if (this._global.appInitialized) {
            shopIndexModule.activate();
        } else {
            setTimeout(() => { this.init(); }, 10);
        }
    }
}

let shopIndexModule = new ShopIndexModule();
shopIndexModule.init();