How to add a custom query in JHipster?

Question

I am learning to use JHipster and can't figure out how to use create a custom query.

In my project I have Orders table with DeliveryDay and Week fields and want to show only orders for current day of the week. DeliveryDay and Week is int with values (1-7 and 0-2)

So in OrdersRepository.java I added custom query like this:

public interface OrdersRepository extends JpaRepository<Orders,Long> {

Page<Orders> findByDeliveryDayAndWeek(int weekday, int week, pageable);

in OrdersResource.java i added this one:

    @RequestMapping(value = "/today",
        method = RequestMethod.GET,
        produces = MediaType.APPLICATION_JSON_VALUE)
    @Timed
    public ResponseEntity<List<Orders>> getOrdersForToday(Pageable pageable)
        throws URISyntaxException {
        log.debug("REST request to get a page of Orderss");
        Page<Orders> page = ordersRepository.findByDeliveryDayAndWeek(1, 0, pageable);
        HttpHeaders headers = PaginationUtil.generatePaginationHttpHeaders(page, "/api/today");
        return new ResponseEntity<>(page.getContent(), headers, HttpStatus.OK);
    }

I also added today.html (copied orders.html) and today.js

'use strict';

angular.module('fruitcrmApp')
    .config(function ($stateProvider) {
        $stateProvider
            .state('today', {
                parent: 'entity',
                url: '/today',
                data: {
                    authorities: ['ROLE_USER'],
                    pageTitle: 'fruitcrmApp.orders.home.title'
                },
                views: {
                    'content@': {
                        templateUrl: 'scripts/app/custom/today.html',
                        controller: 'OrdersController'
                    }
                },
                resolve: {
                    translatePartialLoader: ['$translate', '$translatePartialLoader', function ($translate, $translatePartialLoader) {
                        $translatePartialLoader.addPart('orders');
                        $translatePartialLoader.addPart('global');
                        return $translate.refresh();
                    }]
                }
            })

    });

and add today.js in the index.html

My orders.controller.js looks like this (generated by JHipster)

'use strict';

angular.module('fruitcrmApp')
    .controller('OrdersController', function ($scope, $state, Orders, OrdersSearch, ParseLinks) {

        $scope.orderss = [];
        $scope.predicate = 'id';
        $scope.reverse = true;
        $scope.page = 1;
        $scope.loadAll = function() {
            Orders.query({page: $scope.page - 1, size: 20, sort: [$scope.predicate + ',' + ($scope.reverse ? 'asc' : 'desc'), 'id']}, function(result, headers) {
                $scope.links = ParseLinks.parse(headers('link'));
                $scope.totalItems = headers('X-Total-Count');
                $scope.orderss = result;
            });
        };
        $scope.loadPage = function(page) {
            $scope.page = page;
            $scope.loadAll();
        };
        $scope.loadAll();


        $scope.search = function () {
            OrdersSearch.query({query: $scope.searchQuery}, function(result) {
                $scope.orderss = result;
            }, function(response) {
                if(response.status === 404) {
                    $scope.loadAll();
                }
            });
        };

        $scope.refresh = function () {
            $scope.loadAll();
            $scope.clear();
        };

        $scope.clear = function () {
            $scope.orders = {
                details: null,
                orderDate: null,
                firstDelivery: null,
                isActive: false,
                id: null
            };
        };
    });

Now I can access http://localhost:3000/#/today but it shows all data from Orders what I did wrong? How to use my own method from OrdersRepository.java?

I tried to search for examples but didn't found any relevant. What are the needed steps I missed? Link for some tutorial where it is covered will be great if answer will be to long.

Answer 1

You need to create a new angular service for your today API endpoint. Something like this, called orders-today.service.js:

'use strict';

angular.module('fruitcrmApp')
    .factory('OrdersToday', function ($resource) {
        return $resource('api/orders/today', {}, {
            'query': { method: 'GET', isArray: true}
        });
    });

Then in your orders.controller.js file, you need to inject your new OrdersToday service:

.controller('OrdersController', function ($scope, $state, Orders, OrdersSearch, OrdersToday, ParseLinks) {

When you want to get the list of today's orders, you need to use OrdersToday.query just like you used Orders.query in the example you pasted.

You will probably want to create a OrdersTodayController with references to OrdersToday, and use that in today.js instead of OrdersController.