AngularJS + AngularJS Material + WooCommerce API. Создание фильтра и удаление заказа
Сегодня мы закончим работу над страницей Заказы. Мы создадим свой фильтр для корректного показа статуса заказа, а также напишем метод для удаления заказа.
Отмечу, что для создания фильтров в AngularJS нужно вызвать метод фреймворка filter, который возвращает функцию, обрабатывающую входной параметр и возвращающий его в требуемом формате.
Код урока (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>Код урока (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 Комментариев