From 0008c1322a8a5cbacb2a63b17bc467a18415e7c0 Mon Sep 17 00:00:00 2001
From: Rodrigo Quelca <rodrigo@processmaker.com>
Date: Wed, 4 Aug 2021 15:16:09 +0000
Subject: [PATCH] PMCORE-3199: add user cell component

---
 .../js/components/vuetable/OwnerCell.vue      | 71 +++++++++++++++++++
 1 file changed, 71 insertions(+)
 create mode 100644 resources/assets/js/components/vuetable/OwnerCell.vue

diff --git a/resources/assets/js/components/vuetable/OwnerCell.vue b/resources/assets/js/components/vuetable/OwnerCell.vue
new file mode 100644
index 000000000..dd9cb3e36
--- /dev/null
+++ b/resources/assets/js/components/vuetable/OwnerCell.vue
@@ -0,0 +1,71 @@
+<template>
+    <div class="grouped-cell">
+        <div class="d-flex justify-content-center avatar" id="user">
+            <b-avatar
+                variant="info"
+                :src="data.userAvatar"
+                size="2em"
+            ></b-avatar>
+        </div>
+        <b-popover
+                target="user"
+                placement="top"
+                ref="popover"
+                triggers="hover"    
+            >
+                <b-row >
+                    <b-col md="3">
+                        <b-avatar
+                            variant="info"
+                            :src="data.userAvatar"
+                            size="4em"
+                        ></b-avatar>
+                    </b-col>    
+                    <b-col md="9">
+                        <div class="font-weight-bold">{{data.userInfo}}</div>
+                        <div v-if="data.userPosition !== ''">{{data.userPosition}}</div>
+                        <b-link :href="mailto(data.userEmail)" >{{data.userEmail}}</b-link>
+                    </b-col>
+                </b-row>
+            </b-popover>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "OwnerCell",
+    props: ["data"],
+    data() {
+        return {
+            //Color map for ["In Progress", "overdue", "inDraft", "paused", "unnasigned"]
+            colorMap: ["green", "red", "orange", "aqua", "silver"],
+            id: "avatar-" + _.random(1000000),
+            statusId: "status-" + _.random(1000000)
+        };
+    },
+    methods: {
+        /**
+         * Mail to link
+         * @param {string} email
+         * @returns {string}
+         */
+        mailto: function(email) {
+            return "mailto:" + email;
+        }
+    }
+};
+</script>
+
+<style> 
+.popover {
+    max-width: 600px !important; 
+    min-width: 200px !important;
+}
+.grouped-cell {
+    font-size: small;
+}
+.avatar {
+    color: "red";
+    width: "1.3em";
+}
+</style>