@enso-ui/users 2.0.5 → 2.0.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@enso-ui/users",
-  "version": "2.0.5",
+  "version": "2.0.9",
   "description": "Basic users package",
   "main": "bulma/index.js",
   "scripts": {
@@ -36,7 +36,6 @@
     "@fortawesome/fontawesome-svg-core": "^1.2.2",
     "@fortawesome/free-solid-svg-icons": "^5.2.0",
     "@fortawesome/vue-fontawesome": "3.0.0-5",
-    "v-tooltip": "4.0.0-alpha.1",
     "vue": "^3.0",
     "vuex": "^4.0.0"
   },
@@ -47,7 +46,7 @@
     "autoprefixer": "^9.6.1",
     "babel-eslint": "^10.0.1",
     "cross-env": "^6.0.0",
-    "eslint": "^8.0.0",
+    "eslint": "^7.0.0",
     "eslint-import-resolver-alias": "^1.1.2",
     "eslint-plugin-vue": "^8.0.0"
   }

package/src/bulma/components/navbar/ProfileControl.vue

@@ -1,15 +1,10 @@
 <template>
     <core-profile-control>
-        <template #default="{ user, avatarLink, hide, isTouch, visitProfile, toggle, visible }">
+        <template #default="{ user, hide, isTouch, visitProfile, toggle, visible }">
             <a class="navbar-item"
                 @click="visitProfile()"
                 v-if="isTouch">
-                <img class="is-rounded"
-                    :src="avatarLink">
-                <span v-if="!isTouch"
-                    class="ml-1">
-                    {{ user.person.appellative || user.person.name }}
-                </span>
+                <avatar :user="user"/>
             </a>
             <div v-click-outside="hide"
                 :class="[
@@ -19,15 +14,13 @@
                 ]" v-else>
                 <a class="navbar-link is-arrowless"
                     @click="toggle()">
-                    <img class="is-rounded"
-                        :src="avatarLink">
-                    <span v-if="!isTouch"
-                        class="ml-1">
+                    <avatar :user="user"/>
+                    <span class="ml-1">
                         {{ user.person.appellative || user.person.name }}
                     </span>
                 </a>
-                <div v-if="visible"
-                    class="navbar-dropdown is-right">
+                <div class="navbar-dropdown is-right"
+                    v-if="visible">
                     <div class="user-panel p-2">
                         <avatar class="is-96x96"
                             :user="user"/>

package/src/bulma/pages/users/components/Avatar.vue

@@ -1,19 +1,15 @@
 <template>
-    <figure class="image avatar"
-        v-tooltip="tooltip">
+    <figure class="image avatar">
         <img class="is-rounded"
-            :src="route('core.avatars.show', user.avatar.id)">
+            :src="link">
     </figure>
 </template>
 
 <script>
-import { VTooltip } from 'v-tooltip';
 
 export default {
     name: 'Avatar',
 
-    directives: { tooltip: VTooltip },
-
     inject: ['route'],
 
     props: {
@@ -24,11 +20,14 @@ export default {
     },
 
     computed: {
+        link() {
+            return this.route('core.avatars.show', this.user.avatar.id);
+        },
         tooltip() {
             return this.user.person?.appellative
                 ?? this.user.person?.name;
-        }
-    }
+        },
+    },
 };
 </script>
 

package/src/bulma/pages/users/components/Session.vue

@@ -43,7 +43,6 @@
 </template>
 
 <script>
-import { VTooltip } from 'v-tooltip';
 import { FontAwesomeIcon as Fa } from '@fortawesome/vue-fontawesome';
 import { library } from '@fortawesome/fontawesome-svg-core';
 import {
@@ -72,8 +71,6 @@ export default {
 
     inject: ['canAccess'],
 
-    directives: { tooltip: VTooltip },
-
     components: { Confirmation, Fa },
 
     props: {

package/src/bulma/pages/users/components/Token.vue

@@ -37,7 +37,6 @@
 </template>
 
 <script>
-import { VTooltip } from 'v-tooltip';
 import { FontAwesomeIcon as Fa } from '@fortawesome/vue-fontawesome';
 import { library } from '@fortawesome/fontawesome-svg-core';
 import {
@@ -55,8 +54,6 @@ export default {
 
     inject: ['canAccess'],
 
-    directives: { tooltip: VTooltip },
-
     components: { Confirmation, Fa },
 
     props: {

package/src/bulma/pages/users/components/UserProfile.vue

@@ -57,7 +57,7 @@
                             && !impersonating
                         ">
                         <a class="button is-warning"
-                            @click="$root.$emit('start-impersonating', profile.id)">
+                            @click="startImpersonating">
                             <span class="icon">
                                 <fa icon="user-circle"/>
                             </span>
@@ -158,6 +158,7 @@ import {
     faUser, faUserCircle, faSyncAlt, faTrashAlt, faUpload, faSignOutAlt, faPencilAlt,
 } from '@fortawesome/free-solid-svg-icons';
 import { Uploader } from '@enso-ui/uploader/bulma';
+import eventBus from '@enso-ui/ui/src/core/services/eventBus';
 import Divider from '@enso-ui/divider';
 import format from '@enso-ui/ui/src/modules/plugins/date-fns/format';
 
@@ -197,21 +198,24 @@ export default {
 
     methods: {
         ...mapMutations(['setUserAvatar']),
+        dateFormat(date) {
+            return date
+                ? format(date, this.meta.dateFormat)
+                : null;
+        },
         fetch() {
             axios.get(this.route(this.$route.name, this.$route.params.user))
                 .then(response => (this.profile = response.data.user))
                 .catch(this.errorHandler);
         },
+        startImpersonating() {
+            eventBus.$emit('start-impersonating', this.profile.id);
+        },
         updateAvatar() {
             axios.patch(this.route('core.avatars.update', this.user.avatar.id))
                 .then(({ data }) => this.setUserAvatar(data.avatarId))
                 .catch(this.errorHandler);
         },
-        dateFormat(date) {
-            return date
-                ? format(date, this.meta.dateFormat)
-                : null;
-        },
     },
 };
 </script>

package/src/core/components/navbar/ProfileControl.vue

@@ -35,7 +35,6 @@ export default {
             user: this.user,
             isTouch: this.isTouch,
             visitProfile: this.visitProfile,
-            avatarLink: this.route('core.avatars.show', this.user.avatar.id),
             hide: this.hide,
             toggle: this.toggle,
             visible: this.visible,