Skip to content

Commit

Permalink
Bug(CSTM-CPC-879): fix pet edit to edit all values (#538)
Browse files Browse the repository at this point in the history 
JIRA: [link to jira
ticket](https://champlainsaintlambert.atlassian.net/browse/CPC-879)
## Context:
Making It so the customer can edit the Name, Birthdate, and Pet Type.
Previously you could only change the name.
## Changes

- Fixed Bug where the pet info in the form would dissapear
- Added birthdate and pet type to owner details
- Made birthdate and pet type editable

## Before and After UI (Required for UI-impacting PRs)
<img width="1440" alt="image"
src="https://github.com/cgerard321/champlain_petclinic/assets/40618145/8bd0dae3-3f67-4342-8417-4937cda94c1c">
<img width="1440" alt="2"
src="https://github.com/cgerard321/champlain_petclinic/assets/40618145/ab9498a5-8177-4096-b546-93b65c3ae690">

---------

Co-authored-by: Eduardo J.C <[email protected]>
  • Loading branch information
@1-emil @DisgruntledMensch
1-emil and DisgruntledMensch authored Oct 10, 2023
1 parent bc760ba commit 2885fa5
Show file tree
Hide file tree
Showing 4 changed files with 96 additions and 93 deletions.
73 changes: 27 additions & 46 deletions api-gateway/src/main/resources/static/scripts/owner-details/owner-details.controller.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,65 +11,46 @@ function OwnerDetailsController($http, $state, $stateParams, $scope, $timeout, $
vm.pet = {};
vm.pets = [];

// Function to get pet type name based on petTypeId
vm.getPetTypeName = function (petTypeId) {
switch (petTypeId) {
case '1':
return 'Cat';
case '2':
return 'Dog';
case '3':
return 'Lizard';
case '4':
return 'Snake';
case '5':
return 'Bird';
case '6':
return 'Hamster';
default:
return 'Unknown';
}
};

// Fetch owner data
$http.get('api/gateway/owners/' + $stateParams.ownerId)
.then(function (resp) {
vm.owner = resp.data;
console.log(vm.owner);
})
.catch(function (error) {
console.error('Error fetching owner data:', error);
});

// Fetch associated pets and their details
$http.get(`api/gateway/owners/${$stateParams.ownerId}/pets`)
.then(function (response) {
// Split the response by newline characters to get individual pet objects
var petResponses = response.data.split('\n');

// Parse each pet response as JSON, remove the "data:" prefix, and trim any leading/trailing whitespace
var petObjects = petResponses.map(function (petResponse) {
// Remove the "data:" prefix and trim any leading/trailing whitespace
var trimmedResponse = petResponse.replace(/^data:/, '').trim();
console.log("Trimmed results: ", trimmedResponse)

// Check if the trimmed response is empty
if (!trimmedResponse) {
return null; // Skip empty responses
}

try {
return JSON.parse(trimmedResponse);
} catch (error) {
console.error('Error parsing pet response:', error);
return null;
}
});

// Filter out any parsing errors (null values)
petObjects = petObjects.filter(function (pet) {
return pet !== null;
});


// Assuming that each pet has a 'petId' property, you can create an array of promises to fetch detailed pet data
var petPromises = petObjects.map(function (pet) {
return $http.get(`api/gateway/pets/${pet.petId}`);
var petPromises = vm.owner.pets.map(function (pet) {
return $http.get('api/gateway/pets/' + pet.petId, { cache: false });
});

return $q.all(petPromises);
})
.then(function (responses) {
vm.pets = responses.map(function (response) {
return response.data;
$q.all(petPromises).then(function (responses) {
vm.owner.pets = responses.map(function (response) {
return response.data;
});
});
console.log("Pet Array:", vm.pets);
})
.catch(function (error) {
console.error('Error fetching pet data:', error);
console.error('Error fetching owner data:', error);
});

// Toggle pet's active status
vm.toggleActiveStatus = function (petId) {
$http.get('api/gateway/pets/' + petId + '?_=' + new Date().getTime(), { headers: { 'Cache-Control': 'no-cache' } })
.then(function (resp) {
Expand Down
26 changes: 26 additions & 0 deletions api-gateway/src/main/resources/static/scripts/owner-details/owner-details.template.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,32 @@ <h3 class="">Owner Details</h3>
<div class="d-flex justify-content-between gap-5">
<h3 class="">Pet Details</h3>

<div class="border-5 rounded">
<a style="color: rgba(0,0,0,0.5);" class="btn btn-light" ui-sref="ownerEdit({ownerId: $ctrl.owner.ownerId, method: 'edit'})">Add Pet</a>
</div>
</div>

<div>
<!-- Use ng-repeat to iterate through the owner's pets -->
<div ng-if="$ctrl.owner.pets && $ctrl.owner.pets.length > 0">
<div ng-repeat="pet in $ctrl.owner.pets" ng-show="$ctrl.owner.pets.length > 0" class="d-flex justify-content-between">
<div class="mt-3">
<a style="color: rgba(0,0,0,0.5);" class="btn btn-light" ui-sref="editPet({ownerId: $ctrl.owner.ownerId, petId: pet.petId, method: 'edit'})">Edit Pet</a>
<p>Name: {{ pet.name }}</p>
<p>Pet Id: {{pet.petId}}</p>
<p>Birth Date: {{ pet.birthDate | date:'yyyy-MM-dd' }}</p>
<p>Pet Type: {{$ctrl.getPetTypeName(pet.petTypeId)}}</p>
</div>
<div class="border-5 rounded">
<input type="checkbox" ng-model="$ctrl.pet.isActive" ng-change="$ctrl.toggleActiveStatus(pet.petId)">
<label ng-if="$ctrl.pet.isActive === 'true'" style="color: rgba(0,0,0,0.5);">Deactivate Pet</label>
<label ng-if="$ctrl.pet.isActive !== 'true'" style="color: rgba(0,0,0,0.5);">Activate Pet</label>
</div>
<div class="border-5 rounded">
<a style="color: rgba(0,0,0,0.5);" class="btn btn-light" ng-click="$ctrl.deletePet(pet.petId)">Delete Pet</a>
</div>
</div>
</div>
<div class="border-5 rounded">
<a style="color: rgba(0,0,0,0.5);" class="btn btn-light" ui-sref="petRegister({ownerId: $ctrl.owner.ownerId})">Add Pet</a>
</div>
Expand Down
74 changes: 30 additions & 44 deletions api-gateway/src/main/resources/static/scripts/pet-form/pet-form.controller.js
View file
Original file line number Diff line number Diff line change
@@ -1,63 +1,49 @@
'use strict';

angular.module('petForm')
.controller('PetFormController', ['$http', '$state', '$stateParams', function ($http, $state, $stateParams) {
.controller('PetFormController', ['$http', '$state', '$stateParams', '$filter', '$q', function ($http, $state, $stateParams, $filter, $q) {
var self = this;
var ownerId = $stateParams.ownerId || 0;
var method = $stateParams.method;
var petId = $stateParams.petId || 0;
var owner = "";
var myDate = new Date();

$http.get('api/gateway/owners/petTypes').then(function (resp) {
self.types = resp.data;
});

$http.get('api/gateway/pets/' + petId).then(function (resp) {
self.pet = resp.data;
$http.get('api/gateway/owners/petTypes')
.then(function (resp) {
self.types = resp.data;
});

});
$q.all([
$http.get('api/gateway/pets/' + petId),
$http.get('api/gateway/owners/' + ownerId)
]).then(function (responses) {
var petData = responses[0].data;
petData.birthDate = new Date(petData.birthDate);

$http.get('api/gateway/owners/' + ownerId).then(function (resp) {
var ownerData = resp.data;
owner = ownerData.firstName + " " + ownerData.lastName;
self.pet = {
owner: owner
}
var ownerData = responses[1].data;
petData.owner = ownerData.firstName + " " + ownerData.lastName;

self.pet = petData;
self.checked = false;
});


// Function to submit the form
self.submit = function () {
var petType = {
id: self.pet.type.id,
name: self.pet.type.name
}

var data = {
petId: self.pet.petId,
name: self.pet.name,
birthDate: self.pet.birthDate,
birthDate: new Date(self.pet.birthDate).toISOString(),
ownerId: self.pet.ownerId,
type: petType
}


var req;


req = $http.put("api/gateway/" + "pets/" + petId, data);

req.then(function () {
$state.go('ownerDetails', { ownerId: ownerId });
}, function (response) {
var error = response.data;
error.errors = error.errors || [];
alert(error.error + "\r\n" + error.errors.map(function (e) {
return e.field + ": " + e.defaultMessage;
}).join("\r\n"));
});
petTypeId: self.pet.petTypeId
};

$http.put("api/gateway/pets/" + petId, data)
.then(function () {
$state.go('ownerDetails', { ownerId: ownerId });
}, function (response) {
var error = response.data;
error.errors = error.errors || [];
alert(error.error + "\r\n" + error.errors.map(function (e) {
return e.field + ": " + e.defaultMessage;
}).join("\r\n"));
});
};
}]);
}]);

16 changes: 13 additions & 3 deletions api-gateway/src/main/resources/static/scripts/pet-form/pet-form.template.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
<label class="col-sm-2 control-label">Owner</label>
<div class="pet marg col-sm-6">
<input type="hidden" ng-model="$ctrl.pet.petId" name="petId" />
<p class="pet form-control-static">{{$ctrl.pet.owner}}</p>
<!--<p class="pet form-control-static">{{$ctrl.pet.owner}}</p>-->
</div>
</div>

Expand All @@ -22,16 +22,26 @@
<div class="pet col-sm-6">
<input class="form-control" ng-model="$ctrl.pet.birthDate" name="dbo" required type="date" ng-disabled="$ctrl.checked"/>
<span ng-show="petForm.name.$error.required" class="help-inline"> birth date is required.</span>
<p ng-hide="true">Current Birth Date: {{ $ctrl.pet.birthDate | date:'yyyy-MM-dd'}}</p>
</div>
</div>

<div class="form-group formColor">
<label class="col-sm-2 control-label">Type</label>
<!--<div class="pet col-sm-6">
<select class="form-control" ng-model="$ctrl.pet.petTypeId" name="type" ng-options="t.id as t.name for t in $ctrl.types track by t.id" ng-disabled="$ctrl.checked"></select>
</div>-->
<div class="pet col-sm-6">
<select class="form-control" ng-model="$ctrl.pet.type" name="type" ng-options="t as t.name for t in $ctrl.types track by t.id" ng-disabled="$ctrl.checked"></select>
<select class="form-control" ng-model="$ctrl.pet.petTypeId" name="type" ng-disabled="$ctrl.checked">
<option value="1">Cat</option>
<option value="2">Dog</option>
<option value="3">Lizard</option>
<option value="4">Snake</option>
<option value="5">Bird</option>
<option value="6">Hamster</option>
</select>
</div>
</div>

<div class="form-group formColor">
<div class="pet marg col-sm-6 col-sm-offset-2">
<button id="newBtn" class="btn btn-default" type="submit">
Expand Down

0 comments on commit 2885fa5

Please sign in to comment.