Merge pull request civicrm#36 from compucorp/C51-57-other-cases-marku…

…p-functionality

C51-57: Other Cases Markup +  Functionality

ang/civicase/ActivityCard--Big.html

@@ -10,7 +10,7 @@
       ng-click="markCompleted(activity); $event.stopPropagation();" role="checkbox" aria-checked="{{activity.is_completed}}" tabindex="0" aria-labelledby="Mark complete/incomplete">
       <i ng-if="activity.is_completed" class="civicase__checkbox--checked material-icons">check_box</i>
     </div>
-    <!-- End - Task - Checkbox -->  
+    <!-- End - Task - Checkbox -->
   </div>
   <!-- Activity Body -->
   <div ng-if="activity" class="civicase__activity-card-inner">
@@ -48,7 +48,7 @@
         <i ng-if="activity.is_star === '0'" class="civicase__activity-star material-icons">star_border</i>
         <i ng-if="activity.is_star === '1'" class="civicase__activity-star active material-icons">star</i>
       </a>
-      <!-- End - Rating -->      
+      <!-- End - Rating -->
       <span ng-if="activity.assignee_contact_name" contact-card avatar="true" contacts="activity.assignee_contact_name"></span>
       <div ng-include="'~/civicase/ActivityCard--Menu.html'"></div>
     </div>
@@ -98,14 +98,14 @@
         ng-repeat="tag in activity.tag_id || []"
         style="background-color: {{ tag['tag_id.color'] }};"
       >{{ tag['tag_id.name'] }}</span>
-    </div>    
+    </div>
     <!-- End - Tags -->
     <!-- With -->
     <div class="civicase__activity-card-row">
       <span class="civicase__activity-with">With:&nbsp;</span>
       <span class="civicase__contact-card" contact-card contacts="activity.target_contact_name"></span>
     </div>
-    <!-- End - With --> 
+    <!-- End - With -->
     <!-- Big Date -->
     <div ng-if="activity.category.indexOf('milestone') > -1" class="civicase__highlighted-date" ng-class="{'civicase__highlighted-date--overdue': isOverdue(activity.activity_date_time)}">
       <div class="civicase__highlighted-date__inner">

ang/civicase/ActivityCard--Short.html

@@ -6,7 +6,7 @@
         <span ng-if="activity.icon || activity.category.indexOf('milestone') > -1" activity-icon="activity"></span>
 
         <!-- Activity Date -->
-        <span class="civicase__activity-date">{{ formatDate(activity.activity_date_time, 'dd M yy') }}</span>
+        <span class="civicase__activity-date">{{ formatDate(activity.activity_date_time, 'DD MMM YYYY') }}</span>
         <!-- End - Activity Date -->
 
         <span class="civicase__activity__right-container">

ang/civicase/CaseCard--other-cases.html

@@ -0,0 +1,73 @@
+<div
+  class="panel panel-default civicase__case-card civicase__case-card--other"
+  ng-class="{'civicase__case-card--active': $parent.viewingCase === data.id, 'civicase__case-card--closed': data.status === 'Resolved'}" >
+  <div class="panel-body">
+    <div class="civicase__case-card__right_container pull-right">
+      <span class="civicase__case-card__dates">
+        <span>{{ formatDate(data.start_date) || '. . .' }}</span> -
+        <span ng-if="data.end_date">{{ formatDate(data.end_date) }}</span>
+        <span ng-if="!data.end_date">Ongoing</span>
+      </span>
+
+      <span class="crm_notification-badge" style="background-color: {{ data.color }};">{{ data.status }}</span>
+
+      <i ng-if="data.is_linked" class="civicase__case-card__link-type material-icons" title="{{ ts('Case is for the same client(s)') }}">link</i>
+      <i ng-if="!data.is_linked" class="civicase__case-card__link-type material-icons" title="{{ ts('Case is for the same client(s)') }}">person</i>
+    </div>
+
+    <div contact-card class="civicase__case-card__contact" contacts="data.client"></div>
+
+    <div class="civicase__case-card__type">{{ data.case_type }}</div>
+
+    <span class="civicase__case-card__next-milestone" ng-if="data.activity_summary.milestone.length > 0">
+      <span>Next Milestone: </span>
+      <a class="civicase__case-card__next-milestone-date"
+          ng-class="{'civicase__overdue-activity-icon': isOverdue(data.activity_summary.milestone[0].activity_date_time)}"
+          ng-href="#{{ activityFeedUrl(data.id, 'milestone', 'incomplete', null, data.activity_summary.milestone[0].id) }}"
+          title="{{data.activity_summary.milestone[0].subject || data.activity_summary.milestone[0].type;}}"
+      >{{ formatDate(data.activity_summary.milestone[0].activity_date_time) }} </a>
+    </span>
+
+    <span class="civicase__case-card__activity-info">
+      <div class="civicase__case-card__activity-count-container">
+        <span>Tasks: </span>
+        <a class="civicase__case-card__activity-count"
+            ng-if="data.category_count.incomplete.task"
+            ng-href="#{{ activityFeedUrl(data.id, 'task', 'incomplete') }}"
+        > {{ data.category_count.incomplete.task }} </a>
+        <span ng-if="data.category_count.incomplete.task && data.category_count.overdue.task" class="civicase__pipe"> | </span>
+        <a class="civicase__case-card__activity-count civicase__overdue-activity-icon civicase__overdue-activity-icon--count"
+            ng-if="data.category_count.overdue.task"
+            ng-href="#{{ activityFeedUrl(data.id, 'task', 'incomplete') }}"
+        > {{ data.category_count.overdue.task }} </a>
+        <span ng-if="!data.category_count.incomplete.task && !data.category_count.overdue.task" class="civicase__case-card__activity-count civicase__case-card__activity-count--zero">0</span>
+      </div>
+      <div class="civicase__case-card__activity-count-container">
+        <span>Comms: </span>
+        <a class="civicase__case-card__activity-count"
+            ng-if="data.category_count.incomplete.communication"
+            ng-href="#{{ activityFeedUrl(data.id, 'communication', 'incomplete') }}"
+        > {{ data.category_count.incomplete.communication }} </a>
+        <span ng-if="data.category_count.incomplete.communication && data.category_count.overdue.communication" class="civicase__pipe"> | </span>
+        <a class="civicase__case-card__activity-count civicase__overdue-activity-icon civicase__overdue-activity-icon--count"
+            ng-if="data.category_count.overdue.communication"
+            ng-href="#{{ activityFeedUrl(data.id, 'communication', 'incomplete') }}"
+        > {{ data.category_count.overdue.communication }} </a>
+        <span ng-if="!data.category_count.incomplete.communication && !data.category_count.overdue.communication" class="civicase__case-card__activity-count civicase__case-card__activity-count--zero">0</span>
+      </div>
+      <div class="civicase__case-card__activity-count-container">
+        <span>Other: </span>
+        <a class="civicase__case-card__activity-count"
+            ng-if="data.category_count.incomplete.other"
+            ng-href="#{{ activityFeedUrl(data.id, null, 'incomplete') }}"
+        > {{ data.category_count.incomplete.other }} </a>
+        <span ng-if="data.category_count.incomplete.other && data.category_count.overdue.other" class="civicase__pipe"> | </span>
+        <a class="civicase__case-card__activity-count civicase__overdue-activity-icon civicase__overdue-activity-icon--count"
+            ng-if="data.category_count.overdue.other"
+            ng-href="#{{ activityFeedUrl(data.id, null, 'incomplete') }}"
+        > {{ data.category_count.overdue.other }} </a>
+        <span ng-if="!data.category_count.incomplete.other && !data.category_count.overdue.other" class="civicase__case-card__activity-count civicase__case-card__activity-count--zero">0</span>
+      </div>
+    </span>
+  </div>
+</div>

ang/civicase/CaseCard.js

@@ -3,7 +3,9 @@
 
   module.directive('civicaseCaseCard', function () {
     return {
-      templateUrl: '~/civicase/CaseCard.html',
+      templateUrl: function (elem, attrs) {
+        return attrs.mode === 'other-case' ? '~/civicase/CaseCard--other-cases.html' : '~/civicase/CaseCard--case-list.html';
+      },
       replace: true,
       scope: {
         data: '=case'

ang/civicase/CaseDetails--other-cases.html

@@ -1,44 +1,36 @@
-<div class="panel-heading">
-  <h3 class="panel-title">
-    <span role="button" data-toggle="collapse" href="#collapse-other-cases">
-      {{ ts('Other Cases') }}
-    </span>
-  </h3>
-</div>
-<div id="collapse-other-cases" class="panel-collapse collapse in">
-  <div class="panel-body">
-    <div class="civicase-view-other-cases">
-      <div ng-repeat="relCase in item.relatedCases" class="civicase-view-other-case" ng-click="gotoCase(relCase, $event)">
-        <i ng-if="relCase.is_linked" class="pull-right crm-i fa-link crm-is-linked" title="{{ ts('Case is linked') }}"></i>
-        <i ng-if="!relCase.is_linked" class="pull-right crm-i fa-user crm-is-linked" title="{{ ts('Case is for the same client(s)') }}"></i>
-        <div class="pull-right text-muted">
-          <i class="fa fa-calendar"></i>&nbsp;
-          <span>{{ CRM.utils.formatDate(relCase.start_date) }}</span>
-          <span ng-if="relCase.end_date">- {{ CRM.utils.formatDate(relCase.end_date) }}</span>
-          - {{ ts('Ongoing') }}
-        </div>
-        <h4>
-          {{ relCase.client[0].display_name }}
-          <div class="btn-group btn-group-xs" ng-if="relCase.client.length > 1">
-            <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="{{ ts('Additional clients') }}">
-              {{ ts('+%1', {1: relCase.client.length - 1}) }}
-            </button>
-            <ul class="dropdown-menu">
-              <li ng-repeat="(index, client) in relCase.client" ng-if="index">
-                <span>{{ client.display_name }}</span>
-              </li>
-            </ul>
-          </div>
-          <span class="badge" ng-style="{'background': '{{ caseStatuses[relCase.status_id].color }}'}" >
-            {{ relCase.status }}
-          </span>
-        </h4>
-        <div class="other-case-type-manager">
-          {{ relCase.case_type }} <a ng-href="{{ 'civicrm/contact/view' | civicaseCrmUrl:{ cid: relCase.manager.contact_id } }}">{{ relCase.manager.display_name }}</a>
-        </div>
-        <div class="other-case-subject">
-          {{ relCase.subject }}
-        </div>
+<div class="panel panel-default civicase__summary-tab__other-cases">
+  <div class="panel-heading">
+    <h3 class="panel-title">
+      <span role="button" data-toggle="collapse" href="#collapse-one">
+        Other Cases ({{item.relatedCases.length}})
+      </span>
+    </h3>
+  </div>
+  <div id="collapse-one" class="panel-collapse collapse in">
+    <div class="panel-body">
+      <civicase-case-card
+        ng-if="isCurrentRelatedCaseVisible($index)"
+        ng-click="gotoCase(relCase, $event)" mode="other-case"
+        ng-repeat="relCase in item.relatedCases" case="relCase">
+      </civicase-case-card>
+    </div>
+    <div class="panel-footer">
+      <div class="center-block civicase__pager">
+        <paging
+          ng-show="item.relatedCases.length > 1"
+          page="relatedCasesPager.num"
+          page-size="relatedCasesPager.size"
+          total="item.relatedCases.length"
+          adjacent="1"
+          dots="..."
+          show-prev-next="true"
+          show-first-last="true"
+          text-first="{{ ts('First') }}"
+          text-last="{{ ts('Last') }}"
+          text-next="{{ ts('Next') }}"
+          text-prev="{{ ts('Prev') }}"
+        ></paging>
+        <div>Showing {{relatedCasesPager.range.from}} to {{relatedCasesPager.range.to}} of {{item.relatedCases.length}} cases</div>
       </div>
     </div>
   </div>

ang/civicase/CaseDetails--tabs--summary--CustomData.html

@@ -1,4 +1,4 @@
-<div>
+<div class="clearfix">
   <div class="civicase__case-custom-fields__container">
     <div
       class="panel panel-default civicase__panel-transparent-header"

ang/civicase/CaseDetails--tabs--summary.html

@@ -76,45 +76,8 @@ <h3 class="panel-title">Next Activity</h3>
     </div>
   </div>
   <div ng-include="'~/civicase/CaseDetails--tabs--summary--CustomData.html'"></div>
-</div>
-
-
-<!-- <div class="civicase-view-summary crm-entity" data-entity="Case" data-id="{{ item.id }}">
-  <div class="row civicase-summary-top-outer">
-    <div class="civicase-case-subject col-md-6">
-      <label class="civicase-case-subject-label">Subject: </label>
-      <p crm-editable="item" data-field="subject" data-type="textarea" crm-form-success="onChangeSubject($data)"></p>
-      <div class="case-custom-data-first" ng-repeat="(index, customGroup) in item.customData" ng-if="!index" ng-include="'~/civicase/CaseViewCustomData.html'"></div>
-    </div>
-    <div class="civicase-view-next-activities col-md-6">
-      <div class="civicase-view-next-activities-inner">
-        <ul class="list-group act-feed-list-group">
-          <li class="list-group-item" ng-repeat="category in upNextCategories" ng-if="item.activity_summary[category.name].length">
-            <h3>
-              {{ ts('Next %1', {1: category.label}) }}
-              <span class="badge badge-danger" ng-if="item.activity_summary[category.name][0].is_overdue">{{ ts('Overdue') }}</span>
-            </h3>
-            <div
-              case-activity-card="item.activity_summary[category.name][0]"
-              refresh-callback="refresh"
-              crm-popup-form-success="pushCaseData($data.civicase_reload[0])"
-              edit-activity-url="editActivityUrl"
-            ></div>
-          </li>
-        </ul>
-      </div>
-    </div>
-  </div>
-  <div class="row" ng-if="item.customData.length > 1">
-    <div class="col-md-6 case-custom-data-below" ng-repeat="(index, customGroup) in item.customData" ng-if="index" ng-include="'~/civicase/CaseViewCustomData.html'"></div>
-  </div>
-  <div class="civicase-summary-mid row">
-    <div class="col-md-6">
-      <div ng-include="'~/civicase/CaseViewCommunicationRecent.html'"></div>
-    </div>
-    <div class="col-md-6">
-      <div ng-include="'~/civicase/CaseViewTasks.html'"></div>
-    </div>
-  </div>
 
-</div> -->
+  <!-- Other Cases -->
+  <div ng-if="item && item.relatedCases.length" ng-include="'~/civicase/CaseDetails--other-cases.html'"></div>
+  <!-- End - Other Cases -->
+</div>

ang/civicase/CaseDetails.html

@@ -13,9 +13,3 @@
   class="civicase__loading-placeholder__case-view-panel"
   ng-include="'~/civicase/CaseDetails--placeholder.html'">
 </div>
-
-<div
-  class="panel panel-primary civicase-view-other-cases-panel"
-  ng-if="item && item.relatedCases.length && activeTab === 'summary'"
-  ng-include="'~/civicase/CaseDetails--other-cases.html'">
-</div>

ang/civicase/CaseDetails.js

@@ -24,6 +24,7 @@
     var activityTypes = $scope.activityTypes = CRM.civicase.activityTypes;
     var panelLimit = 5;
 
+    $scope.relatedCasesPager = { total: 0, size: 5, num: 0, range: {} };
     $scope.activityFeedUrl = getActivityFeedUrl;
     $scope.caseTypesLength = _.size(caseTypes);
     $scope.CRM = CRM;
@@ -93,6 +94,23 @@
       $route.updateParams(p);
     };
 
+    /**
+     * Decide if the sent related case is visible with respect to the pager
+     *
+     * @param {int} index
+     * @return {boolean}
+     */
+    $scope.isCurrentRelatedCaseVisible = function (index) {
+      $scope.relatedCasesPager.range.from = (($scope.relatedCasesPager.num - 1) * $scope.relatedCasesPager.size) + 1;
+      $scope.relatedCasesPager.range.to = ($scope.relatedCasesPager.num * $scope.relatedCasesPager.size);
+
+      if ($scope.relatedCasesPager.range.to > $scope.item.relatedCases.length) {
+        $scope.relatedCasesPager.range.to = $scope.item.relatedCases.length;
+      }
+
+      return index >= ($scope.relatedCasesPager.range.from - 1) && index < $scope.relatedCasesPager.range.to;
+    };
+
     // Copied from ActivityList.js - used by the Recent Communication panel
     $scope.isSameDate = function (d1, d2) {
       return d1 && d2 && (d1.slice(0, 10) === d2.slice(0, 10));
@@ -180,37 +198,34 @@
     };
 
     function caseGetParams () {
+      var activityParams = {
+        case_id: '$value.id',
+        return: [
+          'activity_type_id', 'activity_date_time', 'status_id', 'is_star', 'case_id',
+          'is_overdue', 'source_contact_name', 'target_contact_name', 'assignee_contact_name'
+        ]
+      };
+
       return {
         id: $scope.item.id,
         return: ['subject', 'details', 'contact_id', 'case_type_id', 'status_id', 'contacts', 'start_date', 'end_date', 'is_deleted', 'activity_summary', 'activity_count', 'category_count', 'tag_id.name', 'tag_id.color', 'tag_id.description', 'tag_id.parent_id', 'related_case_ids'],
         // Related cases by contact
-        'api.Case.get.1': {
+        'api.Case.getcaselist.1': {
           contact_id: {IN: '$value.contact_id'},
           id: {'!=': '$value.id'},
           is_deleted: 0,
-          return: ['case_type_id', 'start_date', 'end_date', 'status_id', 'contacts', 'subject']
+          return: ['case_type_id', 'start_date', 'end_date', 'status_id', 'contacts', 'subject'],
+          'api.Activity.get.1': activityParams
         },
         // Linked cases
-        'api.Case.get.2': {
+        'api.Case.getcaselist.2': {
           id: {IN: '$value.related_case_ids'},
           is_deleted: 0,
-          return: ['case_type_id', 'start_date', 'end_date', 'status_id', 'contacts', 'subject']
+          return: ['case_type_id', 'start_date', 'end_date', 'status_id', 'contacts', 'subject'],
+          'api.Activity.get.1': activityParams
         },
         // Gets all the activities for the case
-        'api.Activity.get.1': {
-          case_id: '$value.id',
-          return: [
-            'activity_type_id',
-            'activity_date_time',
-            'status_id',
-            'is_star',
-            'case_id',
-            'is_overdue',
-            'source_contact_name',
-            'target_contact_name',
-            'assignee_contact_name'
-          ]
-        },
+        'api.Activity.get.1': activityParams,
         // For the "recent communication" panel
         'api.Activity.get.2': {
           case_id: '$value.id',
@@ -276,9 +291,9 @@
     function formatCaseDetails (item) {
       formatCase(item);
       item.definition = caseTypes[item.case_type_id].definition;
-      item.relatedCases = _.each(_.cloneDeep(item['api.Case.get.1'].values), formatCase);
+      item.relatedCases = _.each(_.cloneDeep(item['api.Case.getcaselist.1'].values), formatCase);
       // Add linked cases
-      _.each(_.cloneDeep(item['api.Case.get.2'].values), function (linkedCase) {
+      _.each(_.cloneDeep(item['api.Case.getcaselist.2'].values), function (linkedCase) {
         var existing = _.find(item.relatedCases, {id: linkedCase.id});
         if (existing) {
           existing.is_linked = true;
@@ -287,8 +302,10 @@
           item.relatedCases.push(formatCase(linkedCase));
         }
       });
-      delete (item['api.Case.get.1']);
-      delete (item['api.Case.get.2']);
+      $scope.relatedCasesPager.num = 1;
+
+      delete (item['api.Case.getcaselist.1']);
+      delete (item['api.Case.getcaselist.2']);
       // Recent communications
       item.recentCommunication = _.each(_.cloneDeep(item['api.Activity.get.2'].values), formatAct);
       delete (item['api.Activity.get.2']);
@@ -298,6 +315,7 @@
       // Custom fields
       item.customData = item['api.CustomValue.gettree'].values || [];
       delete (item['api.CustomValue.gettree']);
+
       return item;
     }