Skip to content

Commit

Permalink
Phani | A-1205015570874061 | Ability to delete existing notes on the …
Browse files Browse the repository at this point in the history 
…OT Scheduling page. (#650)

* Make css of notes text configurable and Add notes delete template

* Add css for hover and fix translation

* Fix Update notes functionality

* Add delete note functionality

* Fix fetch date issue

* Fix tests

* Fix UI validations and CSS

* Fix CSS in notes modal
  • Loading branch information
@Phanindra-tw
Phanindra-tw authored Jul 24, 2023
1 parent 1b53251 commit 83a0617
Show file tree
Hide file tree
Showing 8 changed files with 144 additions and 43 deletions.
9 changes: 7 additions & 2 deletions ui/app/i18n/ot/locale_en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -120,6 +120,11 @@
"NOTE_TITLE": "Note",
"FROM": "From",
"TO": "To",
"FROM_DATE_BEFORE_TO_DATE_ERROR": "From date should be before To date.",
"DATE_OUT_OF_RANGE_ERROR": "Please select date within the valid range"
"FROM_DATE_BEFORE_TO_DATE_ERROR": "From date should be before To date",
"DATE_OUT_OF_RANGE_ERROR": "Please select date within the valid range",
"DELETE_NOTE_TITLE": "Delete Note",
"YES_KEY": "Yes",
"NO_KEY": "No",
"DELETE_NOTE_MESSAGE": "Are you sure you want to delete this note?",
"NOTES_PLACEHOLDER": "Enter a maximum of 150 characters"
}
68 changes: 56 additions & 12 deletions ui/app/ot/controller/otCalendarController.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ angular.module('bahmni.ot')
$scope.notesStartDate = false;
$scope.notesEndDate = false;
$scope.isEdit = false;
$scope.showDeletePopUp = false;
$scope.styleForBlock = function (index) {
if (index === 6) {
return { 'border-right': '.5px solid lightgrey'};
Expand All @@ -25,7 +26,7 @@ angular.module('bahmni.ot')
while (currentDate > new Date($scope.weekDates[0])) {
const prev = new Date(currentDate);
currentDate.setDate(currentDate.getDate() - 1);
if ($scope.getNotesForWeek[currentDate.getDate()]) {
if ($scope.notesForWeek[currentDate]) {
$scope.validStartDate = prev;
break;
}
Expand All @@ -37,7 +38,7 @@ angular.module('bahmni.ot')
while (currentDate < new Date($scope.weekDates[6])) {
const prev = new Date(currentDate);
currentDate.setDate(currentDate.getDate() + 1);
if ($scope.getNotesForWeek[currentDate.getDate()]) {
if ($scope.notesForWeek[currentDate]) {
$scope.validEndDate = prev;
break;
}
Expand Down Expand Up @@ -68,10 +69,13 @@ angular.module('bahmni.ot')
$scope.notesEndDate = currentDate;
$scope.isModalVisible = true;
$scope.isEdit = true;
$scope.dateOutOfRangeError = false;
};
$scope.closeNotes = function () {
$scope.isModalVisible = false;
$scope.startDateBeforeEndDateError = false;
$scope.emptyNoteError = false;
$scope.dateOutOfRangeError = false;
$scope.notesStartDate = undefined;
$scope.notesEndDate = undefined;
$scope.otNotesField = '';
Expand All @@ -94,22 +98,38 @@ angular.module('bahmni.ot')
if (notes) {
$scope.emptyNoteError = false;
}
if (notes.id) {
if (notes && notes.id) {
$scope.notesId = notes.id;
}
};
var notesInputValidation = function () {
$scope.openDeletePopup = function (weekStartDate, index) {
if (weekStartDate) {
$scope.currentDate = new Date(weekStartDate);
$scope.currentDate.setDate($scope.currentDate.getDate() + index);
}
$scope.showDeletePopUp = true;
};
$scope.closeDeletePopup = function () {
$scope.showDeletePopUp = false;
};
$scope.deleteNotes = function () {
var noteId;
if ($scope.weekOrDay === "week") {
noteId = $scope.notesForWeek[$scope.currentDate].noteId;
}
surgicalAppointmentService.deleteNoteForADay(noteId || $scope.noteId);
$scope.showDeletePopUp = false;
$state.go("otScheduling", {viewDate: $scope.viewDate}, {reload: true});
};

$scope.saveNotes = function () {
if ($scope.startDateBeforeEndDateError || $scope.dateOutOfRangeError) {
return;
}
if (!$scope.otNotesField) {
$scope.emptyNoteError = true;
return;
}
};

$scope.saveNotes = function () {
notesInputValidation();
if ($scope.isDayView) {
surgicalAppointmentService.saveNoteForADay($scope.viewDate, $scope.otNotesField);
} else {
Expand All @@ -119,8 +139,18 @@ angular.module('bahmni.ot')
};

$scope.updateNotes = function () {
notesInputValidation();
surgicalAppointmentService.updateNoteForADay($scope.noteId, $scope.otNotesField);
if ($scope.startDateBeforeEndDateError || $scope.dateOutOfRangeError) {
return;
}
if (!$scope.otNotesField) {
$scope.emptyNoteError = true;
return;
}
var note;
if ($scope.weekOrDay === "week") {
note = $scope.notesForWeek[$scope.notesStartDate];
}
surgicalAppointmentService.updateNoteForADay(note ? note.noteId : $scope.noteId, $scope.otNotesField);
$state.go("otScheduling", {viewDate: $scope.viewDate}, {reload: true});
};

Expand All @@ -136,7 +166,7 @@ angular.module('bahmni.ot')
};
const getNotes = function () {
if ($scope.weekOrDay === 'day') {
return surgicalAppointmentService.getBulkNotes(new Date($scope.viewDate, null));
return surgicalAppointmentService.getBulkNotes(new Date($scope.viewDate));
} else if ($scope.weekOrDay === 'week') {
return surgicalAppointmentService.getBulkNotes($scope.weekStartDate, getWeekDate(7));
}
Expand All @@ -151,6 +181,7 @@ angular.module('bahmni.ot')
$scope.addActualTimeDisabled = true;
$scope.otNotes = "";
$scope.isModalVisible = false;
$scope.showDeletePopUp = false;
$scope.dayViewSplit = parseInt($scope.dayViewSplit) > 0 ? parseInt($scope.dayViewSplit) : 60;
$scope.calendarStartDatetime = Bahmni.Common.Util.DateUtil.addMinutes($scope.viewDate, (dayStart[0] * 60 + parseInt(dayStart[1])));
$scope.calendarEndDatetime = Bahmni.Common.Util.DateUtil.addMinutes($scope.viewDate, (dayEnd[0] * 60 + parseInt(dayEnd[1])));
Expand Down Expand Up @@ -190,11 +221,24 @@ angular.module('bahmni.ot')

$scope.getNotesForWeek = function (weekStartDate, index) {
const date = new Date(weekStartDate);
if (index === undefined) {
const notesForAWeek = {};
response[3].data.map(function (note) {
notesForAWeek[new Date(note.noteDate)] = note;
});
return notesForAWeek;
}
return _.filter(response[3].data, function (note) {
return new Date(note.noteDate).getDate() === (date.getDate() + index);
const currentDate = new Date(date);
currentDate.setDate(date.getDate() + index);
return new Date(note.noteDate).getDate() === (currentDate).getDate();
});
};

if ($scope.weekOrDay === 'week') {
$scope.notesForWeek = $scope.getNotesForWeek();
}

$scope.getNotesForDay = function (weekStartDate, index) {
var notes = $scope.getNotesForWeek(weekStartDate, index);
return notes.length > 0 ? notes[0].noteText : '';
Expand Down
4 changes: 4 additions & 0 deletions ui/app/ot/services/surgicalAppointmentService.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -107,4 +107,8 @@ angular.module('bahmni.ot')
const headers = {"Accept": "application/json", "Content-Type": "application/json"};
return $http.post(Bahmni.OT.Constants.notesUrl + "/" + noteId, note, headers);
};
this.deleteNoteForADay = function (noteId) {
const headers = {"Accept": "application/json", "Content-Type": "application/json", withCredentials: true};
return $http.delete(Bahmni.OT.Constants.notesUrl + "/" + noteId, headers);
};
}]);
24 changes: 18 additions & 6 deletions ui/app/ot/views/notesModal.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,9 @@
<a class="close" style="padding-right: 20px" ng-click="closeNotes()">&times;</a>
<div style="padding: 20px">
<h6>{{'NOTE_TITLE' | translate}}</h6>
<textarea rows="5" id="notesID" class="notes-text-area" ng-model="otNotesField" ng-blur="setNotes(otNotesField)"></textarea>
<div ng-if="emptyNoteError" class="error">
{{'EMPTY_NOTES_ERROR' | translate }}
<textarea rows="5" id="notesID" class="notes-text-area" ng-model="otNotesField" ng-blur="setNotes(otNotesField)" placeholder="{{'NOTES_PLACEHOLDER' | translate }}" maxlength="150"></textarea>
<div class="error">
<div ng-if="emptyNoteError">{{'EMPTY_NOTES_ERROR' | translate }}</div>
</div>
<div style="display: inline-block; margin-right: 20px">
<h6 style="color: black">{{'FROM' | translate}}</h6>
Expand All @@ -22,12 +22,24 @@ <h6 style="color: black">{{'TO' | translate}}</h6>
<div ng-if="startDateBeforeEndDateError" class="error">
{{'FROM_DATE_BEFORE_TO_DATE_ERROR' | translate}}
</div>
<div ng-if="dateOutOfRangeError" class="error">
<div ng-if="dateOutOfRangeError && !isEdit" class="error">
{{'DATE_OUT_OF_RANGE_ERROR' | translate}}
</div>
</div>
<button class="cancel-button" ng-click="closeNotes()">{{'OT_CANCEL_KEY' | translate}}</button>
<button ng-if="!noteId" class="save-button" ng-click="saveNotes()">{{'SAVE' | translate}}</button>
<button ng-if="noteId" class="save-button" ng-click="updateNotes()">{{'UPDATE' | translate}}</button>
<button ng-if="!isEdit" class="save-button" ng-click="saveNotes()">{{'SAVE' | translate}}</button>
<button ng-if="isEdit" class="save-button" ng-click="updateNotes()">{{'UPDATE' | translate}}</button>
</div>
</div>

<div class="identifier-ui" ng-if="showDeletePopUp">
<div class="identifier-iframe" style="height: 150px">
<a class="close" style="padding-right: 20px" ng-click="closeDeletePopup()">&times;</a>
<div style="padding: 0 20px; display: flex; flex-direction: column;">
<h6>{{'DELETE_NOTE_TITLE' | translate}}</h6>
<p style="color: #161616">{{'DELETE_NOTE_MESSAGE' | translate}}</p>
</div>
<button class="cancel-button" ng-click="closeDeletePopup()">{{'NO_KEY' | translate}}</button>
<button class="delete-button" ng-click="deleteNotes()">{{'YES_KEY' | translate}}</button>
</div>
</div>
10 changes: 6 additions & 4 deletions ui/app/ot/views/otCalendar.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,12 @@
<p class="heading-ot">{{viewDate | bahmniDateTimeWithFormat: 'ddd'}}</p>
<p class="heading-ot heading-ot-date">{{viewDate | bahmniDateTimeWithFormat: 'DD'}}</p>
</div>
<div class="notesTab" ng-click="showNotesPopup(viewDate)" style="border: .5px solid lightgrey" ng-if="(!noteForTheDay)"></div>
<div class="notesTab notes-text" ng-if="noteForTheDay" ng-click="showNotesPopupEdit(viewDate, 0, noteForTheDay)"
title="{{noteForTheDay}}">
{{noteForTheDay}}
<div class="notesTab" ng-click="showNotesPopup(viewDate)" style="border: .5px solid lightgrey" ng-if="!noteForTheDay"></div>
<div class="notes-text" ng-if="noteForTheDay">
<div ng-click="showNotesPopupEdit(viewDate, 0, noteForTheDay)" title="{{noteForTheDay}}">
{{noteForTheDay}}
</div>
<span ng-click="openDeletePopup()"><i class="fa fa-trash-o" aria-hidden="true"></i></span>
</div>
<hr/>
<div style="display: flex;">
Expand Down
7 changes: 5 additions & 2 deletions ui/app/ot/views/otWeeklyCalendar.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,11 @@
<p class="heading-ot">{{weekStartDate | addDays: index | bahmniDateTimeWithFormat: 'ddd'}}</p>
<p class="heading-ot heading-ot-date">{{weekStartDate | addDays: index | bahmniDateTimeWithFormat: 'DD'}}</p>
<div class="note" ng-if="(!getNotesForDay(weekStartDate, index))" ng-style="styleForBlock(index)" ng-click="showNotesPopup(weekStartDate, index)"></div>
<div ng-if="getNotesForDay(weekStartDate, index)" class="notes-text" ng-click="showNotesPopupEdit(weekStartDate, index)" title="{{getNotesForDay(weekStartDate, index)}}">
{{getNotesForDay(weekStartDate, index)}}
<div ng-if="getNotesForDay(weekStartDate, index)" class="notes-text" >
<div ng-click="showNotesPopupEdit(weekStartDate, index)" title="{{getNotesForDay(weekStartDate, index)}}">
{{getNotesForDay(weekStartDate, index)}}
</div>
<span ng-click="openDeletePopup(weekStartDate, index)"><i class="fa fa-trash-o" aria-hidden="true"></i></span>
</div>
</div>
</div>
Expand Down
35 changes: 25 additions & 10 deletions ui/app/styles/ot/_otCalendar.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,8 @@
box-sizing: border-box;
text-align: center;
float: left;
padding-bottom: 10px;
padding: 10px 0;
border-bottom: 1px solid #ddd;
font-family: OpenSansSemiBold;
}
}
Expand All @@ -36,6 +37,7 @@
.error{
color: #da1e28;
padding-top: 5px;
height: 15px;
}
.heading-ot-date{
font-size: 24px;
Expand All @@ -44,28 +46,41 @@
padding-bottom: 10px;
}
.heading-ot-block{
padding: 10px 0;
display: inline-block;
position: absolute;
left: 24px;
}
.notesTab{
width: calc(100% - 24px);
width: calc(100% - 10px);
height: 30px;
color: #161616;
overflow: scroll;
&:hover{
background-color: #EDF5FF;
}
}
.notes-text{
background-color: #EDF5FF;
padding: 8px;
background-color: #FCF4D6;
width: calc(100% - 10px);
color: #161616;
height: auto;
border: 1px solid #0043CE;
border-left: 4px solid #0043CE;
border: 1px solid #F1C21B;
border-left: 4px solid #F1C21B;
display: flex;
div{
display: inline-block;
width: calc(100% - 54px);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
> * {
padding: 8px;
}
}
.calendar-time-container {
clear: left;
position: absolute;
top: 100px;
top: 94px;
background: #fff;
z-index: 19;

Expand All @@ -88,7 +103,7 @@
left: 80px;
overflow: auto;
padding-bottom: 5px;
top: 100px;
top: 95px;
width: calc(100% - 90px);
right: 0;
}
Expand Down
30 changes: 23 additions & 7 deletions ui/app/styles/ot/_otWeeklyCalendar.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,10 @@
.note{
border-left: .5px solid lightgrey;
width: 100%;
height: 30px;
height: 33px;
&:hover{
background-color: #EDF5FF;
}
}
.heading-ot-date{
font-size: 24px;
Expand All @@ -19,14 +22,23 @@
padding-bottom: 10px;
}
.notes-text{
background-color: #EDF5FF;
padding: 8px;
background-color: #FCF4D6;
height: auto;
border: 1px solid #0043CE;
border-left: 3px solid #0043CE;
border: 1px solid #F1C21B;
border-left: 3px solid #F1C21B;
color: #161616;
text-align: left;
overflow: scroll;
display: flex;
div{
display: inline-block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 80%;
}
> * {
padding: 8px 0 8px 8px;
}
}
}
}
Expand Down Expand Up @@ -117,10 +129,14 @@
right: 0;
background-color: #007d79;
}
.delete-button{
right: 0;
background-color: #da1e28;
}

.cancel-button{
left: 0;
background-color: #161616;
background-color: #39393F;
}
.notes-text-area{
width: 95%;
Expand Down

0 comments on commit 83a0617

Please sign in to comment.