From def27faba60c603e1ee7a8d9cc92d7d883226ad9 Mon Sep 17 00:00:00 2001 From: Saimirz <106036032+Saimirz@users.noreply.github.com> Date: Mon, 9 Oct 2023 16:08:40 -0400 Subject: [PATCH] feat/CSTM-CPC-973-Display-All-Pet-Types (#528) Displayed All Pet Types JIRA: https://champlainsaintlambert.atlassian.net/browse/CPC-973?atlOrigin=eyJpIjoiNmViNzMzZTU3YWI1NGE1N2I2NTZmYjNiYTI0ZmE5OTAiLCJwIjoiaiJ9 ## Context: User will be able to see what kind of pets we operate on. ## Changes I created the front end. A new page was made to display all petTypes. A new title was added in the owner dropdown to access the page. ## Before and After UI (Required for UI-impacting PRs) Before ![image](https://github.com/cgerard321/champlain_petclinic/assets/106036032/a2a5bc89-a104-4a7d-87e2-161688149956) After ![image](https://github.com/cgerard321/champlain_petclinic/assets/106036032/bdaeddbc-1335-418e-89ff-bab8c142da53) ![image](https://github.com/cgerard321/champlain_petclinic/assets/106036032/93cdb7a4-4c5a-400d-9cbd-42b24eee5d21) ## Dev notes (Optional) - Specific technical changes that should be noted ## Linked pull requests (Optional) - pull request link --- .../src/main/resources/static/index.html | 6 ++ .../src/main/resources/static/scripts/app.js | 2 +- .../static/scripts/fragments/nav.html | 1 + .../pet-type-list/pet-type-list.component.js | 7 ++ .../pet-type-list/pet-type-list.controller.js | 16 +++++ .../scripts/pet-type-list/pet-type-list.js | 14 ++++ .../pet-type-list/pet-type-list.template.html | 67 +++++++++++++++++++ 7 files changed, 112 insertions(+), 1 deletion(-) create mode 100644 api-gateway/src/main/resources/static/scripts/pet-type-list/pet-type-list.component.js create mode 100644 api-gateway/src/main/resources/static/scripts/pet-type-list/pet-type-list.controller.js create mode 100644 api-gateway/src/main/resources/static/scripts/pet-type-list/pet-type-list.js create mode 100644 api-gateway/src/main/resources/static/scripts/pet-type-list/pet-type-list.template.html diff --git a/api-gateway/src/main/resources/static/index.html b/api-gateway/src/main/resources/static/index.html index 3b80341cb2..fad30e0d8e 100755 --- a/api-gateway/src/main/resources/static/index.html +++ b/api-gateway/src/main/resources/static/index.html @@ -168,6 +168,12 @@ + + + + + + diff --git a/api-gateway/src/main/resources/static/scripts/app.js b/api-gateway/src/main/resources/static/scripts/app.js index 2f4fdae045..7251ddeaac 100644 --- a/api-gateway/src/main/resources/static/scripts/app.js +++ b/api-gateway/src/main/resources/static/scripts/app.js @@ -12,7 +12,7 @@ const petClinicApp = angular.module('petClinicApp', [ 'ui.router', 'layoutNav', 'layoutFooter', 'layoutWelcome', 'ownerList', 'ownerDetails', 'ownerForm', 'ownerRegister', 'petForm' , 'visits', 'vetList','vetForm','vetDetails', 'visitList', 'billForm', 'billUpdateForm', 'loginForm', 'rolesDetails', 'signupForm', 'billDetails', 'billsByOwnerId', 'billHistory','billsByVetId','inventoryList', 'inventoryForm', 'productForm','inventoryProductList', 'inventoryUpdateForm', 'productUpdateForm' - , 'verification' , 'adminPanel','resetPwdForm','forgotPwdForm']); + , 'verification' , 'adminPanel','resetPwdForm','forgotPwdForm','petTypeList']); diff --git a/api-gateway/src/main/resources/static/scripts/fragments/nav.html b/api-gateway/src/main/resources/static/scripts/fragments/nav.html index e71072719a..829e169130 100644 --- a/api-gateway/src/main/resources/static/scripts/fragments/nav.html +++ b/api-gateway/src/main/resources/static/scripts/fragments/nav.html @@ -28,6 +28,7 @@
Owners Edit Account + Pet Types
  • diff --git a/api-gateway/src/main/resources/static/scripts/pet-type-list/pet-type-list.component.js b/api-gateway/src/main/resources/static/scripts/pet-type-list/pet-type-list.component.js new file mode 100644 index 0000000000..66a1f9cb3b --- /dev/null +++ b/api-gateway/src/main/resources/static/scripts/pet-type-list/pet-type-list.component.js @@ -0,0 +1,7 @@ +'use strict'; + +angular.module('petTypeList') + .component('petTypeList', { + templateUrl: 'scripts/pet-type-list/pet-type-list.template.html', + controller: 'PetTypeListController' + }); \ No newline at end of file diff --git a/api-gateway/src/main/resources/static/scripts/pet-type-list/pet-type-list.controller.js b/api-gateway/src/main/resources/static/scripts/pet-type-list/pet-type-list.controller.js new file mode 100644 index 0000000000..e283d34831 --- /dev/null +++ b/api-gateway/src/main/resources/static/scripts/pet-type-list/pet-type-list.controller.js @@ -0,0 +1,16 @@ +'use strict'; + +angular.module('petTypeList') + .controller('PetTypeListController', ['$http', '$stateParams', '$scope', '$state', function ($http, $stateParams, $scope, $state) { + var self = this; + self.petTypes = {}; + // Initialize as an empty array + + $http.get('api/gateway/owners/petTypes').then(function (resp) { + self.petTypes = resp.data; + console.log(self.petTypes); + + }); + }]); + + diff --git a/api-gateway/src/main/resources/static/scripts/pet-type-list/pet-type-list.js b/api-gateway/src/main/resources/static/scripts/pet-type-list/pet-type-list.js new file mode 100644 index 0000000000..269ab34ffa --- /dev/null +++ b/api-gateway/src/main/resources/static/scripts/pet-type-list/pet-type-list.js @@ -0,0 +1,14 @@ +'use strict'; + +angular.module('petTypeList', ['ui.router']) + .config(['$stateProvider', function ($stateProvider) { + + $stateProvider + .state('petTypes', { + parent: 'app', + url: '/petTypes', + template: '', + controller: 'PetTypeListController', + controllerAs: 'vm' + }) + }]); \ No newline at end of file diff --git a/api-gateway/src/main/resources/static/scripts/pet-type-list/pet-type-list.template.html b/api-gateway/src/main/resources/static/scripts/pet-type-list/pet-type-list.template.html new file mode 100644 index 0000000000..70b6543e28 --- /dev/null +++ b/api-gateway/src/main/resources/static/scripts/pet-type-list/pet-type-list.template.html @@ -0,0 +1,67 @@ + + + +
    +

    Current Pet Types

    + + + + + + + + + + + + + + + +
    Pet Type IDPet Type NameDescription
    {{petType.petTypeId }}{{ petType.name }}{{ petType.petTypeDescription }}
    +