AngularJS + AngularJS Material + WooCommerce API. Create filter and delete order
We will finish Orders page in this lesson. We’ll create filter for order status output and write method for order delete.
Notice to create filter in AngularJS you need to call framework filter method, which returns function, handling input parameter and return it in required format.
Code lesson (orders.html)
<div data-layout="row" data-layout-padding data-ng-cloak>
<div>
<h1>{{pageName}}</h1>
</div>
</div>
<div layout="row" layout-sm="column" layout-align="space-around" ng-if="!orders.length && !hideProgress">
<md-progress-circular md-mode="indeterminate"></md-progress-circular>
</div>
<div layout="row" layout-padding ng-cloak ng-init="getOrders()">
<div flex-gt-sm="100" flex>
<md-content id="orders-list">
<md-list flex ng-if="orders.length">
<md-list-item class="md-3-line" ng-repeat="order in orders" ng-click="null">
<div class="md-list-item-text" layout="column">
<p><strong>ФИО покупателя:</strong> {{order.shipping.first_name}} {{order.shipping.last_name}}
</p>
<p><strong>Статус заказа: </strong>{{order.status | ordersStatus}}</p>
<p><strong>Дата заказа: </strong>{{order.date_created | date:'dd.MM.yyyy'}}</p>
<p><strong>Способ оплаты: </strong>{{order.payment_method_title}}</p>
</div>
<span><strong>Сумма заказа: </strong>{{order.total}} {{order.currency}}</span>
<md-button ng-click="deleteOrder(order.id)" class="md-raised md-warn">Аннулировать заказ</md-button>
<md-divider></md-divider>
</md-list-item>
</md-list>
</md-content>
</div>
</div>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(
'/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.controller('mainController', function($scope) {
$scope.currentNavItem = 'orders';
});
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 => {
console.log(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) {
});
app.controller('productController', function ($scope, $http, $routeParams, $mdDialog, $filter, $location) {
});
0 Comments