AngularJS + AngularJS Material + WooCommerce API. Добавление и обновление товара

Главная » Видеоуроки » JavaScript » AngularJS + AngularJS Material + WooCommerce API. Добавление и обновление товара
В этом уроке мы добавим вызовы API для обновления и добавления товара.

Код урока (script.js)

'use strict'

let statuses = new Map();
statuses.set('processing', 'в обработке');
		
let app = angular.module('shop', ['ngMaterial', 'ngMessages', 'ngRoute']);
app.constant('API_URL', 'https://codetogether.ru/wp-json/wc/v3/');
app.constant('STATUSES', statuses);

app.config(function($httpProvider){
	let auth = window.btoa('ck_000e1f9b7fd5200992a3fdb46f982c495ac721f8:cs_93ff2e592ee90b6c54d45abe78277b0992684979');
	$httpProvider.defaults.headers.common.Authorization = 'Basic ' + auth;
});

app.config(function($mdThemingProvider, $routeProvider, $locationProvider){
	$mdThemingProvider.theme('primary').primaryPalette('blue').accentPalette('orange');
	$routeProvider
		.when(
			'/products', {
				templateUrl: 'templates/products.html',
			    controller: 'productsController'
			}
		)
		.when(
			'/product', {
				templateUrl: 'templates/product.html',
				controller: 'productController'
			}
		)
		.when(
			'/product/:id', {
				templateUrl: 'templates/product.html',
				controller: 'productController'
			}
		)
		.otherwise({
			templateUrl: 'templates/orders.html',
			controller: 'ordersController'
        }) 
		$locationProvider.html5Mode({
			enabled: true
		});
});

app.filter('ordersStatus', function(STATUSES){
	return function(status) {
		if (STATUSES.get(status)) {
			return STATUSES.get(status);
		} else {
			return '';
		}
	}
});

app.filter('removeTags', function(){
	return function(string) {
		return string ? String(string).replace(/<[^>]+>/gm, '')  : '';
	}
})

app.controller('mainController', function($scope, $location) {
	$scope.currentNavItem = $location.path().split('/')[1];
});

app.controller('ordersController', function ($scope, $http, $mdDialog, API_URL) {
	$scope.pageName = 'Заказы';
	$scope.orders = [];
	$scope.hideProgress = false;
	
	$scope.getOrders = function() {
		$http.get(API_URL + 'orders').then(
			result => {
				if(result.data.length) {
					$scope.orders = result.data
				} else {
					$scope.hideProgress = true;
				}
			}
		);
	}

	$scope.deleteOrder = function(orderId) {
		$http.delete(API_URL + `orders/${orderId}`).then(
				result => {
					$scope.getOrders();
					$mdDialog.show(
						$mdDialog.alert()
						.clickOutsideToClose(true)
						.title('Ошибка удаления заказа')
						.ok('Закрыть')
					);
				},
				_ => $mdDialog.show(
						$mdDialog.alert()
						.clickOutsideToClose(true)
						.title('Ошибка удаления заказа')
						.ok('Закрыть')
					)
			)
	};
});

app.controller('productsController', function ($scope, $http, $mdDialog, $window, API_URL) {

	$scope.pageName = 'Товары';
	$scope.hideProgress = false;

	$scope.getProducts = function() {
		$http.get(API_URL + `products`).then(
			result => {
				$scope.products = [];
				if (result.data.length) {
					result.data.forEach(product => $scope.products.push(product));
					$scope.hideProgress = true;
				}
			});
	}

	$scope.deleteProduct = function(id) {
		$http.delete(API_URL + `products/${id}`).then(
			_ => $scope.getProducts(),
			_ => $mdDialog.show(
						$mdDialog.alert()
						.clickOutsideToClose(true)
						.title('Ошибка удаления заказа')
						.ok('Закрыть')
					)
			)
	}

});

app.controller('productController', function ($scope, $http, $routeParams, $mdDialog, $filter, $location, API_URL) {
	$scope.productName = '';
	$scope.productPrice = '';
	$scope.productDesc = '';
	$scope.productCats = [];
	$scope.categories = [];
	$scope.productId = -1;

	if($routeParams.id) {
		$scope.productId = $routeParams.id;
		$http.get(API_URL + `products/${$scope.productId}`).then(
			product => {
				$scope.productName = product.data.name;
				$scope.productPrice = product.data.price;
				$scope.productDesc = $filter('removeTags')(product.data.description);
				product.data.categories.forEach(category => {
					$scope.productCats.push(category.id);
				})
			}
		)
	}

	$scope.saveProduct = function() {
		const categories = [];
		const newProduct = {
			name: $scope.productName,
			type: 'simple',
			regular_price: $scope.productPrice,
			description: $scope.productDesc,
			short_description: $scope.productDesc,
			categories: categories
		};
		if($scope.productId == -1) {
			if(!$scope.productCats.length) {
				$mdDialog.show(
					$mdDialog.alert()
					.clickOutsideToClose(true)
					.title('Ошибка сохранения товара')
					.ok('Закрыть')
				);
				return;
			}
			$scope.productCats.forEach(id => {
				categories.push({'id': id});
			});
			$http.post(API_URL + 'products', newProduct).then(
				res => {
					if (res) {
						$mdDialog.show(
							$mdDialog.alert()
							.clickOutsideToClose(true)
							.title('Успех')
							.ok('Закрыть')
						);
						$location.url('/products');
					}
				}
			)			
		} else {
			$http.put(API_URL + `products/${$scope.productId}`, newProduct).then(
				res => $location.url('/products')
			);
		}

	}

	$scope.getCategories = function() {
		$http.get(API_URL + `products/categories`).then(
			res => {
				if (res.data.length) {
					$scope.categories = res.data;
				}
			}
		)}
});

0 Комментариев

Оставить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *


Срок проверки reCAPTCHA истек. Перезагрузите страницу.

Pin It on Pinterest

Share This