AngularJS + AngularJS Material + WooCommerce API. Remove products

Home » Tutorials » JavaScript » AngularJS + AngularJS Material + WooCommerce API. Remove products
There are two button in product list page – “Delete product” and “Edit product”. Today we’ll add functionality for “Delete product” button. Also we’ll make “removeTags” filter for removing html tags from product description

Code lesson (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(
			'/add-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) {

});

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *


The reCAPTCHA verification period has expired. Please reload the page.

Pin It on Pinterest

Share This