ADAM / AIAHTML5

Commit f4f76ba349346d6070957fc6e016055ba51aaa8b

Authored by Utkarsh Singh
1 parent 43fbaf77

committing list view search related code

Inline Side-by-side
Showing 2 changed files with 132 additions and 47 deletions
400-SOURCECODE/AIAHTML5.Web/app/controllers/TileViewListController.js
  View file @f4f76ba
@@ -10,6 +10,7 @@ function ($scope, $window, $rootScope, $compile, $http, $log, $location, $timeou @@ -10,6 +10,7 @@ function ($scope, $window, $rootScope, $compile, $http, $log, $location, $timeou
10 var CLINICAL_ILLUSTRATION = 'Clinical Illustrations'; 10 var CLINICAL_ILLUSTRATION = 'Clinical Illustrations';
11 var CLINICAL_ANIMATION = 'Clinical Animations'; 11 var CLINICAL_ANIMATION = 'Clinical Animations';
12 $rootScope.closeBtnImgPath = "~/../content/images/speeachBubbleClose.png"; 12 $rootScope.closeBtnImgPath = "~/../content/images/speeachBubbleClose.png";
  13 + $rootScope.listArray = [];
13 //variables to bind Filter by Controls 14 //variables to bind Filter by Controls
14 $scope.searchAAListViewData = []; 15 $scope.searchAAListViewData = [];
15 $scope.SelectedAAthumbImage = []; 16 $scope.SelectedAAthumbImage = [];
@@ -49,36 +50,37 @@ function ($scope, $window, $rootScope, $compile, $http, $log, $location, $timeou @@ -49,36 +50,37 @@ function ($scope, $window, $rootScope, $compile, $http, $log, $location, $timeou
49 else { 50 else {
50 51
51 $('#grid-view').css("display", "none"); 52 $('#grid-view').css("display", "none");
52 - if ($scope.isListViewDataLoaded == true) {  
53 - var htm = '';  
54 - htm += "<table class='table table-hover table-fixed bg-white table-txt12'> <thead class='clsthead'><tr class='active'><th width='25%'>Title</th> <th width='15%'>Region</th> <th width='30%'>System</th><th width='15%'>View</th> <th width='15%'>Type</th></tr></thead><tbody class='clstbody'>";  
55 - $.ajax({  
56 - url: '~/../content/data/json/aa/aa_dat_contentlist.json',  
57 - dataType: "json",  
58 - success: function (result) {  
59 - $(result.root.Item).each(function (key, value) {  
60 - console.log(key + " " + value);  
61 - htm += "<tr id=" + value._Id + " onclick='openListViewModuleItem(event)' ondblclick='openModuleItemView(event)'>"  
62 - htm += '<td width="25%">' + value._Title + '</td><td width="15%">' + value._BodyRegion + '</td><td width="30%">' + value._BodySystem + '</td><td width="15%">' + value._ViewOrientation + '</td><td width="15%">' + value._ImageType + '</td>';  
63 - htm += "</tr>"  
64 - });  
65 - htm += "</tbody></table>";  
66 - $("#list-view").html(htm);  
67 - $compile(htm)($scope);  
68 - }  
69 - });  
70 - $('#list-view').css("display", "block");  
71 - $scope.isListViewDataLoaded = false;  
72 - }  
73 - else { 53 + //if ($scope.isListViewDataLoaded == true) {
  54 + // var htm = '';
  55 + // htm += "<table class='table table-hover table-fixed bg-white table-txt12'> <thead class='clsthead'><tr class='active'><th width='25%'>Title</th> <th width='15%'>Region</th> <th width='30%'>System</th><th width='15%'>View</th> <th width='15%'>Type</th></tr></thead><tbody class='clstbody'>";
  56 + // $.ajax({
  57 + // url: '~/../content/data/json/aa/aa_dat_contentlist.json',
  58 + // dataType: "json",
  59 + // success: function (result) {
  60 + // $(result.root.Item).each(function (key, value) {
  61 + // console.log(key + " " + value);
  62 + // htm += "<tr id=" + value._Id + " onclick='openListViewModuleItem(event)' ondblclick='openModuleItemView(event)'>"
  63 + // htm += '<td width="25%">' + value._Title + '</td><td width="15%">' + value._BodyRegion + '</td><td width="30%">' + value._BodySystem + '</td><td width="15%">' + value._ViewOrientation + '</td><td width="15%">' + value._ImageType + '</td>';
  64 + // htm += "</tr>"
  65 + // });
  66 + // htm += "</tbody></table>";
  67 + // $("#list-view").html(htm);
  68 + // $compile(htm)($scope);
  69 + // }
  70 + // });
  71 + // $('#list-view').css("display", "block");
  72 + // $scope.isListViewDataLoaded = false;
  73 + //}
  74 + //else {
74 $('#list-view').css("display", "block"); 75 $('#list-view').css("display", "block");
75 - } 76 + //}
76 77
77 $timeout(function () { 78 $timeout(function () {
78 // if ($rootScope.isListViewRowClicked == true) { 79 // if ($rootScope.isListViewRowClicked == true) {
79 // $rootScope.isListViewRowClicked = false; 80 // $rootScope.isListViewRowClicked = false;
80 $("#demoView").remove(); 81 $("#demoView").remove();
81 - $("#viewList").append("<div class='col-xs-12 text-center' style='padding-top:15px;padding-bottom:15px;' id='demoView'><div class='col-xs-12' style='padding:15px;background-color:#fff;'><div class='col-xs-2' style='border:1px solid #000;padding:5px;color:#000;font-size:12px;'><div class='thumbnail' style='margin-bottom:10px;'><img style='width:auto;height:95px!important;' src=" + $rootScope.listArray[0].imageName + "></div><div class='col-xs-12' id='demoText' style='padding:0;'>" + $rootScope.listArray[0].text + "</div></div></div><a style='position:absolute;right:30px;bottom:34px;' onclick='openCurrentView(event)' href='javascript:void(0)' class='pull-right btn btn-primary'>Open</a></div>"); 82 + if ($rootScope.listArray.length>0)
  83 + $("#viewList").append("<div class='col-xs-12 text-center' style='padding-top:15px;padding-bottom:15px;' id='demoView'><div class='col-xs-12' style='padding:15px;background-color:#fff;'><div class='col-xs-2' style='border:1px solid #000;padding:5px;color:#000;font-size:12px;'><div class='thumbnail' style='margin-bottom:10px;'><img style='width:auto;height:95px!important;' src=" + $rootScope.listArray[0].imageName + "></div><div class='col-xs-12' id='demoText' style='padding:0;'>" + $rootScope.listArray[0].text + "</div></div></div><a style='position:absolute;right:30px;bottom:34px;' onclick='openCurrentView(event)' href='javascript:void(0)' class='pull-right btn btn-primary'>Open</a></div>");
82 var moduleItemDataToBeSavedID 84 var moduleItemDataToBeSavedID
83 $("#list-view table tbody tr").removeClass("active"); 85 $("#list-view table tbody tr").removeClass("active");
84 var moduleItemDataToBeSavedID = localStorage.getItem("listViewSelectedID"); 86 var moduleItemDataToBeSavedID = localStorage.getItem("listViewSelectedID");
@@ -149,13 +151,13 @@ function ($scope, $window, $rootScope, $compile, $http, $log, $location, $timeou @@ -149,13 +151,13 @@ function ($scope, $window, $rootScope, $compile, $http, $log, $location, $timeou
149 if ($scope.isListViewButtonClicked == true) { 151 if ($scope.isListViewButtonClicked == true) {
150 if ($scope.isOpenBtnClicked == true) { 152 if ($scope.isOpenBtnClicked == true) {
151 153
152 - var moduleItemDataToBeSaved = $("#demoText").html(); 154 + var moduleItemDataToBeSaved = $("#demoText").html().trim();
153 $scope.isOpenBtnClicked = false; 155 $scope.isOpenBtnClicked = false;
154 } 156 }
155 else { 157 else {
156 var moduleItemDataToBeSavedID = event.currentTarget.id; 158 var moduleItemDataToBeSavedID = event.currentTarget.id;
157 localStorage.setItem("listViewSelectedID", moduleItemDataToBeSavedID); 159 localStorage.setItem("listViewSelectedID", moduleItemDataToBeSavedID);
158 - var moduleItemDataToBeSaved = $("#list-view table tbody #" + moduleItemDataToBeSavedID).find('td:eq(0)').text(); 160 + var moduleItemDataToBeSaved = $("#list-view table tbody #" + moduleItemDataToBeSavedID).find('td:eq(0)').text().trim();
159 } 161 }
160 } 162 }
161 else { 163 else {
@@ -173,7 +175,7 @@ function ($scope, $window, $rootScope, $compile, $http, $log, $location, $timeou @@ -173,7 +175,7 @@ function ($scope, $window, $rootScope, $compile, $http, $log, $location, $timeou
173 $rootScope.bodySystemName = $rootScope.OpenedTileData[2]; 175 $rootScope.bodySystemName = $rootScope.OpenedTileData[2];
174 $rootScope.OpenItemImagePath = "../../../content/images/aa/images/" + $rootScope.OpenedTileData[3]; 176 $rootScope.OpenItemImagePath = "../../../content/images/aa/images/" + $rootScope.OpenedTileData[3];
175 $scope.OpenItemImagePath = "../../../content/images/aa/images/" + $rootScope.OpenedTileData[3]; 177 $scope.OpenItemImagePath = "../../../content/images/aa/images/" + $rootScope.OpenedTileData[3];
176 - $rootScope.listArray = []; 178 + //$rootScope.listArray = [];
177 $rootScope.listArray.push({ "imageName": $rootScope.OpenItemImagePath, "text": moduleItemDataToBeSaved }); 179 $rootScope.listArray.push({ "imageName": $rootScope.OpenItemImagePath, "text": moduleItemDataToBeSaved });
178 //3. set opened module item ti 180 //3. set opened module item ti
179 localStorage.setItem("currentViewTitle", $rootScope.OpenedTileData[6]); 181 localStorage.setItem("currentViewTitle", $rootScope.OpenedTileData[6]);
@@ -194,7 +196,7 @@ function ($scope, $window, $rootScope, $compile, $http, $log, $location, $timeou @@ -194,7 +196,7 @@ function ($scope, $window, $rootScope, $compile, $http, $log, $location, $timeou
194 localStorage.setItem("listViewSelectedID", moduleItemDataToBeSavedID); 196 localStorage.setItem("listViewSelectedID", moduleItemDataToBeSavedID);
195 $("#list-view table tbody #" + moduleItemDataToBeSavedID).addClass("active"); 197 $("#list-view table tbody #" + moduleItemDataToBeSavedID).addClass("active");
196 localStorage.setItem("AAListViewScroll", $("#list-view table tbody").scrollTop()); 198 localStorage.setItem("AAListViewScroll", $("#list-view table tbody").scrollTop());
197 - var moduleItemDataToBeSaved = $("#list-view table tbody #" + moduleItemDataToBeSavedID).find('td:eq(0)').text(); 199 + var moduleItemDataToBeSaved = $("#list-view table tbody #" + moduleItemDataToBeSavedID).find('td:eq(0)').text().trim();
198 $rootScope.OpenedTileData = ModuleService.GetOpenedTileData(moduleItemDataToBeSaved, $scope.moduleLandingData); 200 $rootScope.OpenedTileData = ModuleService.GetOpenedTileData(moduleItemDataToBeSaved, $scope.moduleLandingData);
199 $rootScope.OpenItemImagePath = "../../../content/images/aa/images/" + $rootScope.OpenedTileData[3]; 201 $rootScope.OpenItemImagePath = "../../../content/images/aa/images/" + $rootScope.OpenedTileData[3];
200 $rootScope.listArray = []; 202 $rootScope.listArray = [];
@@ -395,6 +397,7 @@ function ($scope, $window, $rootScope, $compile, $http, $log, $location, $timeou @@ -395,6 +397,7 @@ function ($scope, $window, $rootScope, $compile, $http, $log, $location, $timeou
395 $scope.FilterByImage = function (moduleId, query) { 397 $scope.FilterByImage = function (moduleId, query) {
396 //alert(JSON.stringify(query)); 398 //alert(JSON.stringify(query));
397 $scope.moduleId = moduleId; 399 $scope.moduleId = moduleId;
  400 + $scope.filterstring = true;
398 401
399 console.log('loadForModuleById is called') 402 console.log('loadForModuleById is called')
400 $rootScope.moduleName = Modules[moduleId].Name; 403 $rootScope.moduleName = Modules[moduleId].Name;
@@ -509,26 +512,26 @@ function ($scope, $window, $rootScope, $compile, $http, $log, $location, $timeou @@ -509,26 +512,26 @@ function ($scope, $window, $rootScope, $compile, $http, $log, $location, $timeou
509 $scope.imagePath = "../content/images/aa/thumbnails/" + value._TileImageName; 512 $scope.imagePath = "../content/images/aa/thumbnails/" + value._TileImageName;
510 513
511 514
512 - var $el = $('<div id="' + value._id + '" class="col-sm-3 col-lg-2" title = "' + value._Title + '" data-ng-click="openModuleItemView($event)">'  
513 - + '<div class="thumbnail" >'  
514 - + '<img class="tinyImg" id="' + value._Title + '"ng-src="' + $scope.imagePath + '" alt="" title="" >' 515 + var $el = $('<div id="' + value._Id + '" class="col-sm-3 col-lg-2" title = "' + value._Title + '" data-ng-click="openModuleItemView($event)">'
  516 + + '<div class="thumbnail" ><a href="#">'
  517 + + '<img class="tinyImg" id="' + value._Id + '"ng-src="' + $scope.imagePath + '" alt="" title="" >'
515 + '<div class="caption"><p>' + value._Title + '</p></div></a></div></div>').appendTo('#grid-view'); 518 + '<div class="caption"><p>' + value._Title + '</p></div></a></div></div>').appendTo('#grid-view');
516 519
517 520
518 $compile($el)($scope); 521 $compile($el)($scope);
519 } 522 }
520 - else {  
521 - var htm = '';  
522 - htm += "<table class='table table-hover table-fixed bg-white table-txt12'> <thead class='clsthead'><tr class='active'><th width='25%'>Title</th> <th width='15%'>Region</th> <th width='30%'>System</th><th width='15%'>View</th> <th width='15%'>Type</th></tr></thead><tbody class='clstbody'>";  
523 - //angular.forEach($scope.selectedAAListViewData, function (value, key) {  
524 - htm += "<tr id=" + value._Id + " onclick='openListViewModuleItem(event)' ondblclick='openModuleItemView(event)'>"  
525 - htm += '<td width="25%">' + value._Title + '</td><td width="15%">' + value._BodyRegion + '</td><td width="30%">' + value._BodySystem + '</td><td width="15%">' + value._ViewOrientation + '</td><td width="15%">' + value._ImageType + '</td>';  
526 - htm += "</tr>"  
527 - //});  
528 - htm += "</tbody></table>";  
529 - $("#list-view").html(htm);  
530 - $compile(htm)($scope);  
531 - } 523 + //else {
  524 + // var htm = '';
  525 + // htm += "<table class='table table-hover table-fixed bg-white table-txt12'> <thead class='clsthead'><tr class='active'><th width='25%'>Title</th> <th width='15%'>Region</th> <th width='30%'>System</th><th width='15%'>View</th> <th width='15%'>Type</th></tr></thead><tbody class='clstbody'>";
  526 + // //angular.forEach($scope.selectedAAListViewData, function (value, key) {
  527 + // htm += "<tr id=" + value._Id + " onclick='openListViewModuleItem(event)' ondblclick='openModuleItemView(event)'>"
  528 + // htm += '<td width="25%">' + value._Title + '</td><td width="15%">' + value._BodyRegion + '</td><td width="30%">' + value._BodySystem + '</td><td width="15%">' + value._ViewOrientation + '</td><td width="15%">' + value._ImageType + '</td>';
  529 + // htm += "</tr>"
  530 + // //});
  531 + // htm += "</tbody></table>";
  532 + // $("#list-view").html(htm);
  533 + // $compile(htm)($scope);
  534 + //}
532 535
533 $(".sidebar").mCustomScrollbar({ 536 $(".sidebar").mCustomScrollbar({
534 autoHideScrollbar: true, 537 autoHideScrollbar: true,
@@ -564,7 +567,8 @@ function ($scope, $window, $rootScope, $compile, $http, $log, $location, $timeou @@ -564,7 +567,8 @@ function ($scope, $window, $rootScope, $compile, $http, $log, $location, $timeou
564 567
565 $('#ListViewDiv').append('<tr id="searchItem"><td colspan="6"><strong style="color:black;">No illustration found for the selected search criteria!</strong></td></tr>'); 568 $('#ListViewDiv').append('<tr id="searchItem"><td colspan="6"><strong style="color:black;">No illustration found for the selected search criteria!</strong></td></tr>');
566 } 569 }
567 - console.log(JSON.stringify(result, null, 4)); 570 + //console.log(JSON.stringify(result, null, 4));
  571 + console.log('UTK--' + $scope.searchAAListViewData);
568 }, 572 },
569 function (error) { 573 function (error) {
570 // handle errors here 574 // handle errors here
400-SOURCECODE/AIAHTML5.Web/app/views/tile-view.html
  View file @f4f76ba
@@ -86,7 +86,7 @@ @@ -86,7 +86,7 @@
86 <!--<div role="tabpanel" class="tab-pane active" id="grid-view">--> 86 <!--<div role="tabpanel" class="tab-pane active" id="grid-view">-->
87 <div role="tabpanel" class="tab-pane active" id="grid-view"> 87 <div role="tabpanel" class="tab-pane active" id="grid-view">
88 <div ng-repeat="(key,val) in moduleLandingData.data.root.Item | orderBy:'_Title' "> 88 <div ng-repeat="(key,val) in moduleLandingData.data.root.Item | orderBy:'_Title' ">
89 - <div id="{{val._Id}}" class="col-sm-3 col-lg-2" title="{{val._Title}}" ng-click="openModuleItemView($event)"> 89 + <div id="{{val._Title}}" class="col-sm-3 col-lg-2" title="{{val._Title}}" data-ng-click="openModuleItemView($event)">
90 <div class="thumbnail"> 90 <div class="thumbnail">
91 <a href="#"> 91 <a href="#">
92 <img class="tinyImg" id="{{val._Title}}" ng-src="../content/images/aa/thumbnails/{{val._TileImageName}}" data-ng-click="openModuleItemView($event)" alt="" title=""> 92 <img class="tinyImg" id="{{val._Title}}" ng-src="../content/images/aa/thumbnails/{{val._TileImageName}}" data-ng-click="openModuleItemView($event)" alt="" title="">
@@ -96,10 +96,91 @@ @@ -96,10 +96,91 @@
96 </div> 96 </div>
97 </div> 97 </div>
98 </div> 98 </div>
99 - <div class="col-xs-12" id="list-view"></div> 99 + <!--<div class="col-xs-12" id="list-view"></div>-->
  100 + <div role="tabpanel" id="list-view"> <!--ng-class="{'tab-pane active' : activeTab === 2,'tab-pane' : activeTab !==2 }"-->
  101 + <!--<div class="col-sm-12 table-responsive">-->
  102 + <div class="panel col-sm-12 table-responsive" style="padding-left:0px; padding-right:0; margin-left:11px; margin-bottom:0; width:99%;">
  103 + <!--<table class="table table-hover table-condensed bg-white" style="padding-left:25px; width:99%">-->
  104 + <table class="table table-hover table-fixed bg-white table-txt12" style="padding-left:25px; width:100%;">
  105 + <thead class="clsthead">
  106 + <tr class="active">
  107 + <th width="25%">Title</th>
  108 + <th width="15%">Region</th>
  109 + <th width="30%">System</th>
  110 + <th width="15%">View</th>
  111 + <th width="25%">Type</th>
  112 + <!--<th width="25%">Specialty</th>-->
  113 + </tr>
  114 + </thead>
  115 + <tbody id="ListViewDiv" ng-if="!filterstring" class="clstbody">
  116 + <tr id="{{val._Id}}" ng-class="{selected: val._id === idSelected}" data-ng-click="openListViewModuleItem($event)" data-ng-dblclick=" openmoduleitemview($event)" ng-repeat="(key,val) in moduleLandingData.data.root.Item | orderBy:'_Title'">
  117 + <td width="25%">
  118 + {{val._Title}}
  119 + </td>
  120 + <td width="15%">
  121 + {{val._BodyRegion}}
  122 + </td>
  123 + <td width="30%">
  124 + {{val._BodySystem}}
  125 + </td>
  126 + <td width="15%">
  127 + {{val._ViewOrientation}}
  128 + </td>
  129 + <td width="25%">
  130 + {{val._ImageType}}
  131 + </td>
  132 + <!--<td width="25%">
  133 + {{item._MedicalSpecialty}}
  134 + </td>-->
  135 + </tr>
  136 + </tbody>
  137 + <tbody id="ListViewDiv" ng-if="filterstring" class="clstbody">
  138 + <tr id="item._Id" ng-class="{selected: item._id === idSelected}" data-ng-click="openListViewModuleItem($event)" data-ng-dblclick="openModuleItemView($event)" ng-repeat="item in searchAAListViewData">
  139 + <td width="25%">
  140 + {{item._Title}}
  141 + </td>
  142 + <td width="15%">
  143 + {{item._BodyRegion}}
  144 + </td>
  145 + <td width="30%">
  146 + {{item._BodySystem}}
  147 + </td>
  148 + <td width="15%">
  149 + {{item._ViewOrientation}}
  150 + </td>
  151 + <td width="25%">
  152 + {{item._ImageType}}
  153 + </td>
  154 + <!--<td width="25%">
  155 + {{item._MedicalSpecialty}}
  156 + </td>-->
  157 + </tr>
  158 + <!--<tr ng-if="typeof(searchCIListViewData) == 'undefined' || searchCIListViewData == null || searchCIListViewData == ''">
  159 + <td colspan="6"><strong id="searchItem" style="color:black;">No illustration found for the selected search criteria!</strong></td>
  160 + </tr>-->
  161 +
  162 + </tbody>
  163 + </table>
  164 + </div>
  165 + <div class="col-sm-12" ng-show="hiderow" style="padding-left:25px;padding-top:10px;">
  166 + <div class="row well">
  167 + <div title="{{SelectedAATitle}}" class="col-sm-3 col-lg-2 no-padding">
  168 + <div class="thumbnail no-margin">
  169 + <img id="{{SelectedAAId}}" src="{{SelectedAAthumbImage}}" alt="" title="{{SelectedAATitle}}" data-ng-click="openCurrentView($event)">
  170 + </div>
  171 + </div>
  172 + <div class="col-sm-9 col-lg-9" style="padding-left:10px;">
  173 + <p class="f11" ng-bind-html="SelectedAASummary"></p>
  174 + <button id="{{SelectedAAId}}" type="button" class="btn btn-primary btn-sm pull-right" data-ng-click="openCurrentView($event)">Open</button>
  175 + </div>
  176 + </div>
  177 +
  178 + </div>
  179 + </div>
100 </div> 180 </div>
101 </div> 181 </div>
102 - 182 + </div>
  183 + </div>
103 <script> 184 <script>
104 $(function () { 185 $(function () {
105 186