Merge pull request '4111-claim.summary' (#985) from 4111-claim.summary into dev

Reviewed-on: #985
Reviewed-by: Carlos Jimenez Ruiz <carlosjr@verdnatura.es>

db/changes/10470-family/00-ticket_doRefund.sql

@@ -1,4 +1,4 @@
-DROP PROCEDURE IF EXISTS vn.ticket_doRefund;
+DROP PROCEDURE IF EXISTS `vn`.`ticket_doRefund`;
 
 DELIMITER $$
 $$

modules/claim/front/summary/index.html

@@ -1,5 +1,6 @@
 <vn-crud-model vn-id="model"
     url="ClaimDms"
+    filter="::$ctrl.filter"
     data="photos">
 </vn-crud-model>
 <vn-card class="summary">
@@ -106,8 +107,13 @@
                 <section class="photo" ng-repeat="photo in photos">
                     <section class="image" on-error-src 
                         ng-style="{'background': 'url(' + $ctrl.getImagePath(photo.dmsFk) + ')'}"
-                        zoom-image="{{$ctrl.getImagePath(photo.dmsFk)}}">
+                        zoom-image="{{$ctrl.getImagePath(photo.dmsFk)}}"
+                        ng-if="photo.dms.contentType != 'video/mp4'">
                     </section>
+                    <video id="videobcg" muted="muted" controls ng-if="photo.dms.contentType == 'video/mp4'"
+                        class="video">
+                        <source src="{{$ctrl.getImagePath(photo.dmsFk)}}" type="video/mp4">
+                    </video>
                 </section>
             </vn-horizontal>
         </vn-auto>

modules/claim/front/summary/index.js

@@ -6,6 +6,13 @@ class Controller extends Summary {
     constructor($element, $, vnFile) {
         super($element, $);
         this.vnFile = vnFile;
+        this.filter = {
+            include: [
+                {
+                    relation: 'dms'
+                }
+            ]
+        };
     }
 
     $onChanges() {

modules/claim/front/summary/style.scss

@@ -10,4 +10,19 @@ vn-claim-summary {
     vn-textarea *{
         height: 80px;
     }
+
+    .video {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        cursor: pointer;
+        box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),
+        0 3px 1px -2px rgba(0,0,0,.2),
+        0 1px 5px 0 rgba(0,0,0,.12);
+        border: 2px solid transparent;
+
+    }
+    .video:hover {
+        border: 2px solid $color-primary
+    }
 }