Motion >> Repos - motion-next.git/blob

   1 <md-content layout="column" layout-align="end center">
   2   <div layout-margin>
   3     <md-input-container>
   4       <md-select ng-model="vm.channel" placeholder="Channel">
   5         <md-option ng-value="undefined" translate="DASHBOARDS.ALL"
   6           >All</md-option
   7         >
   8         <md-option ng-value="'voice'" translate="DASHBOARDS.VOICE"
   9           >Voice</md-option
  10         >
  11         <md-option ng-value="'chat'">Chat</md-option>
  12         <md-option ng-value="'mail'">Mail</md-option>
  13         <md-option ng-value="'sms'">Sms</md-option>
  14         <md-option ng-value="'fax'">Fax</md-option>
  15         <md-option ng-value="'openchannel'">Openchannel</md-option>
  16         <md-option ng-value="'whatsapp'">WhatsApp Connector</md-option>
  17       </md-select>
  18     </md-input-container>
  19   </div>
  20   <div layout-margin layout="row" layout-align="space-between center">
  21     <div flex-gt-xs>
  22       <md-datepicker
  23         ng-model="vm.dateFrom"
  24         md-placeholder="Enter date"
  25         ng-init="vm.dateFrom = vm.firstDayMonth"
  26       >
  27       </md-datepicker>
  28     </div>
  29     <div flex-gt-xs>
  30       <md-datepicker
  31         ng-model="vm.dateTo"
  32         md-placeholder="Enter date"
  33         ng-init="vm.dateTo = vm.lastDayMonth"
  34       >
  35       </md-datepicker>
  36     </div>
  37   </div>
  38 </md-content>
  39
  40 <div
  41   id="timeline"
  42   ms-timeline="vm.timelineOptions"
  43   layout="column"
  44   ng-if="vm.journey && vm.journey.length"
  45 >
  46   <!-- TIMELINE ITEM -->
  47   <div
  48     class="ms-timeline-item"
  49     layout-align="center center"
  50     ng-repeat="item in vm.journey | getChannelByItem:vm.channel:vm.dateFrom:vm.dateTo | orderBy:'-createdAt'"
  51   >
  52     <div class="timeline-card">
  53       <md-card
  54         class="channel"
  55         ng-class="{'md-grey-200-bg': item.id == vm.interaction.id}"
  56       >
  57         <div
  58           class="header p-6"
  59           layout="row"
  60           layout-align="space-between center"
  61         >
  62           <md-button
  63             class="md-fab md-mini"
  64             aria-label="icon-channel"
  65             ng-class="vm.getColorByItem(item) + '-bg'"
  66           >
  67             <md-icon
  68               ng-if="item.FaxAccountId"
  69               md-font-icon="icon-deskphone"
  70             ></md-icon>
  71             <md-icon
  72               ng-if="item.OpenchannelAccountId"
  73               md-font-icon="icon-google-earth"
  74             ></md-icon>
  75             <md-icon
  76               ng-if="item.SmsAccountId"
  77               md-font-icon="icon-message-text"
  78             ></md-icon>
  79             <md-icon
  80               ng-if="item.WhatsappAccountId"
  81               md-font-icon="icon-whatsapp"
  82             ></md-icon>
  83             <md-icon
  84               ng-if="item.MailAccountId"
  85               md-font-icon="icon-email"
  86             ></md-icon>
  87             <md-icon
  88               ng-if="item.ChatWebsiteId"
  89               md-font-icon="icon-hangouts"
  90             ></md-icon>
  91             <md-icon ng-if="item.amaflags" md-font-icon="icon-phone"></md-icon>
  92           </md-button>
  93           <div class="info" layout="column" ng-init="item.showMore = false">
  94             <span class="font-size-12 text-truncate">
  95               #{{item.id}} - {{ item.Account.key || item.destination }}
  96             </span>
  97             <span class="font-size-10"
  98               >{{item.createdAt | date: 'medium'}}</span
  99             >
 100             <span>
 101               <a
 102                 class="toggle-details md-accent-color"
 103                 ng-hide="item.showMore"
 104                 ng-click="item.showMore = !item.showMore"
 105                 translate="DASHBOARDS.SHOW_DETAILS"
 106               >
 107                 Show Details
 108               </a>
 109               <a
 110                 class="toggle-details md-accent-color"
 111                 ng-show="item.showMore"
 112                 ng-click="item.showMore = !item.showMore"
 113                 translate="DASHBOARDS.HIDE_DETAILS"
 114               >
 115                 Hide Details
 116               </a>
 117             </span>
 118           </div>
 119           <span>
 120             <img
 121               ng-if="item.UserId"
 122               class="avatar"
 123               ng-src="api/users/{{item.UserId}}/avatar"
 124             />
 125             <md-tooltip md-direction="left"
 126               >{{item.Owner.fullname || item.User.fullname}}</md-tooltip
 127             >
 128           </span>
 129         </div>
 130         <div ng-if="item.showMore">
 131           <div
 132             ng-if="!item.amaflags"
 133             ng-include="'app/main/apps/dashboards/views/general/agent/interaction/views/agent.general.info.journey.all.html'"
 134           ></div>
 135           <div
 136             ng-if="item.amaflags"
 137             ng-include="'app/main/apps/dashboards/views/general/agent/interaction/views/agent.general.info.journey.voice.html'"
 138           ></div>
 139         </div>
 140         <md-divider></md-divider>
 141         <div
 142           ng-if="item.id != vm.interaction.id"
 143           layout="row"
 144           layout-align="space-around center"
 145         >
 146           <div
 147             ng-if="item.closed && !amaflags"
 148             class="text-truncate text-boxed-light"
 149           >
 150             <span
 151               class="red-fg"
 152               title="{{ 'DASHBOARDS.STATUS' | translate}} : {{ 'DASHBOARDS.CLOSED' | translate }} {{ item.dispositionsValues }}"
 153             >
 154               {{ 'DASHBOARDS.STATUS' | translate}} : {{ 'DASHBOARDS.CLOSED' |
 155               translate}} {{ item.dispositionsValues }}
 156             </span>
 157           </div>
 158           <span
 159             class="text-boxed md-background-bg green-fg"
 160             ng-if="!item.closed && !item.amaflags"
 161             title="{{ 'DASHBOARDS.STATUS' | translate}}: {{ 'DASHBOARDS.OPENED' | translate}}"
 162           >
 163             {{ 'DASHBOARDS.STATUS' | translate}}: {{ 'DASHBOARDS.OPENED' |
 164             translate}}
 165             <span ng-if="item.substatus"> - {{ item.substatus }}</span>
 166           </span>
 167           <span
 168             ng-if="item.amaflags"
 169             class="text-boxed md-background-bg red-fg"
 170             title="{{ 'DASHBOARDS.DISPOSITION' | translate}}: {{ item.userDisposition || 'No Dispose'}}"
 171           >
 172             {{ 'DASHBOARDS.DISPOSITION' | translate}}: {{ item.userDisposition
 173             || ('DASHBOARDS.NO_DISPOSITION_SET' | translate)}}
 174           </span>
 175           <span
 176             ng-if="item.amaflags && item.userSecondDisposition"
 177             class="text-boxed md-background-bg red-fg"
 178             title="{{ 'DASHBOARDS.SECOND_LEVEL_DISPOSITION' | translate}}: {{ item.userSecondDisposition }}"
 179           >
 180             {{ 'DASHBOARDS.SECOND_LEVEL_DISPOSITION' | translate}}: {{
 181             item.userSecondDisposition }}
 182           </span>
 183           <span
 184             ng-if="item.amaflags && item.userThirdDisposition"
 185             class="text-boxed md-background-bg red-fg"
 186             title="{{ 'DASHBOARDS.THIRD_LEVEL_DISPOSITION' | translate}}: {{ item.userThirdDisposition }}"
 187           >
 188             {{ 'DASHBOARDS.THIRD_LEVEL_DISPOSITION' | translate}}: {{
 189             item.userThirdDisposition }}
 190           </span>
 191           <div flex></div>
 192           <md-button
 193             ng-if="!vm.tab.spy && vm.user.role === 'agent' && vm.isMyAccount(item)"
 194             ng-disabled="item.amaflags"
 195             class="md-icon-button"
 196             aria-label="go"
 197             ng-click="vm.openInteraction($event, item)"
 198           >
 199             <md-icon md-font-icon="icon-open-in-new" class="s20"></md-icon>
 200           </md-button>
 201         </div>
 202       </md-card>
 203     </div>
 204   </div>
 205   <!-- / TIMELINE ITEM -->
 206 </div>
 207 <div
 208   ng-if="!vm.journey || !vm.journey.length"
 209   layout="row"
 210   layout-align="center center"
 211 >
 212   <em translate="DASHBOARDS.NO_DATA_AVAILABLE">No data available</em>
 213 </div>