ProductDetails.ts

import * as angular from 'angular';
import {html} from './ProductDetails.html';
import {ClipartProductService} from '../../../../../common/ts/apps/svgcustom/services/ClipartProductService';
import {Color} from '../../../../../common/ts/apps/svgcustom/models/Color';

class ProductDetailsController {
    static $inject = [
        'productSlug',
        'ClipartProductService'
    ];

    constructor(private productSlug: string, public cpService: ClipartProductService) {
        cpService.fetchClipartProduct(this.productSlug);
    }

    get description() {
        return this.cpService.product.description;
    }

    get id() {
        return this.cpService.product.id;
    }

    get name() {
        return this.cpService.product.name;
    }

    get price() {
        return this.cpService.price.price;
    }

    get quantity() {
        return this.cpService.price.quantity;
    }

    get unitPrice() {
        return this.cpService.price.unitPrice;
    }
}

export default function ProductDetails() {
    return {
        controller: ProductDetailsController,
        controllerAs: '$ctrlPD',
        template: html,
        name: 'svgcustom:product-details',
        resolve: {
            productSlug: ['$route', ($route) => {
                // TODO move fetching here, so that we can return a promise with
                // failure and rerouting.
                // cpService.bind('setupComplete', () => {
                //     const configuredProduct = cpService.configuredProduct;
                //     console.log(cp);
                // });
                return $route.current.params.productSlug;
            }]
        }
    };
}