@enso-ui/users 2.0.21 → 2.0.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@enso-ui/users",
-  "version": "2.0.21",
+  "version": "2.0.24",
   "description": "Basic users package",
   "main": "bulma/index.js",
   "scripts": {
@@ -26,7 +26,6 @@
     "@enso-ui/confirmation": "^2.0",
     "@enso-ui/directives": "^2.0",
     "@enso-ui/divider": "^2.0",
-    "@enso-ui/files": "^4.0",
     "@enso-ui/forms": "^3.0",
     "@enso-ui/modal": "^3.0",
     "@enso-ui/tables": "^3.0",

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

@@ -13,7 +13,7 @@
                 { 'is-active': visible }
             ]" v-else>
                 <a class="navbar-link is-arrowless"
-                    @click="toggle()">
+                    @click.stop="toggle()">
                     <avatar class="is-30x30"
                         :user="user"/>
                     <span class="ml-1">

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

@@ -1,18 +1,29 @@
 <template>
-    <figure class="image avatar">
+    <figure class="image avatar"
+        v-tooltip="label"
+        :key="avatarKey">
         <img class="is-rounded"
             :src="link">
     </figure>
 </template>
 
 <script>
+import 'v-tooltip/dist/v-tooltip.css';
+import { VTooltip } from 'v-tooltip';
+import { mapState } from 'vuex';
 
 export default {
     name: 'Avatar',
 
+    directives: { tooltip: VTooltip },
+
     inject: ['route'],
 
     props: {
+        tooltip: {
+            type: Boolean,
+            default: false,
+        },
         user: {
             type: Object,
             required: true,
@@ -20,13 +31,15 @@ export default {
     },
 
     computed: {
+        ...mapState(['avatarKey']),
+        label() {
+            return this.tooltip
+                ? this.user.person?.appellative ?? this.user.person?.name
+                : null;
+        },
         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/Tokens.vue

@@ -62,7 +62,7 @@
 import { FontAwesomeIcon as Fa } from '@fortawesome/vue-fontawesome';
 import { library } from '@fortawesome/fontawesome-svg-core';
 import { faPlus, faSync, faSearch } from '@fortawesome/free-solid-svg-icons';
-import { Url } from '@enso-ui/files'; // TODO:: refactor to a package
+import { Url } from './Url.vue';
 import Token from './Token.vue';
 import TokenForm from './TokenForm.vue';
 

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

@@ -0,0 +1,63 @@
+<template>
+    <modal v-if="show">
+        <div class="box">
+            <div class="field has-addons">
+                <div class="control is-expanded">
+                    <input class="input"
+                        :value="link"
+                        v-select-on-focus
+                        v-focus>
+                </div>
+                <div class="control">
+                    <a class="button"
+                        @click="copy">
+                        <span class="icon is-small">
+                            <fa icon="copy"/>
+                        </span>
+                    </a>
+                </div>
+            </div>
+            <clipboard ref="clipboard"/>
+        </div>
+    </modal>
+</template>
+
+<script>
+import { FontAwesomeIcon as Fa } from '@fortawesome/vue-fontawesome';
+import { library } from '@fortawesome/fontawesome-svg-core';
+import { faCopy } from '@fortawesome/free-solid-svg-icons';
+import { focus, selectOnFocus } from '@enso-ui/directives';
+import { Modal } from '@enso-ui/modal/bulma';
+import Clipboard from '@enso-ui/clipboard';
+
+library.add(faCopy);
+
+export default {
+    name: 'Url',
+
+    directives: { focus, selectOnFocus },
+
+    components: { Clipboard, Fa, Modal },
+
+    inject: ['i18n', 'toastr'],
+
+    props: {
+        show: {
+            type: Boolean,
+            required: true,
+        },
+        link: {
+            type: String,
+            default: '',
+            required: true,
+        },
+    },
+
+    methods: {
+        copy() {
+            this.$refs.clipboard.copy(this.link);
+            this.toastr.success(this.i18n('Copied to clipboard'));
+        },
+    },
+};
+</script>

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

@@ -14,15 +14,13 @@
         <divider class="my-2"/>
         <div class="columns mt-3">
             <div class="column">
-                <figure class="image is-128x128 avatar">
-                    <img class="is-rounded"
-                        :src="route('core.avatars.show', avatarId)">
-                </figure>
+                <avatar class="is-128x128"
+                    :user="isSelfVisiting ? user : profile"/>
                 <div class="field is-grouped is-justify-content-center mt-3">
                     <p class="control">
                         <a class="button is-primary"
                             v-if="isSelfVisiting"
-                            @click="updateAvatar">
+                            @click="generateAvatar">
                             <span class="icon">
                                 <fa icon="sync-alt"/>
                             </span>
@@ -32,7 +30,7 @@
                         </a>
                     </p>
                     <p class="control">
-                        <enso-uploader @upload-successful="setUserAvatar($event.id)"
+                        <enso-uploader @upload-successful="updateAvatar"
                             :url="route('core.avatars.store')"
                             file-key="avatar"
                             v-if="isSelfVisiting">
@@ -155,6 +153,7 @@ import { library } from '@fortawesome/fontawesome-svg-core';
 import {
     faUser, faUserCircle, faSyncAlt, faTrashAlt, faUpload, faSignOutAlt, faPencilAlt,
 } from '@fortawesome/free-solid-svg-icons';
+import Avatar from '@enso-ui/users/src/bulma/pages/users/components/Avatar.vue';
 import { EnsoUploader } from '@enso-ui/uploader/bulma';
 import eventBus from '@enso-ui/ui/src/core/services/eventBus';
 import Divider from '@enso-ui/divider';
@@ -165,7 +164,7 @@ library.add(faUser, faUserCircle, faSyncAlt, faTrashAlt, faUpload, faSignOutAlt,
 export default {
     name: 'UserProfile',
 
-    components: { Divider, Fa, EnsoUploader },
+    components: { Avatar, Divider, Fa, EnsoUploader },
 
     inject: [
         'canAccess', 'errorHandler', 'http', 'i18n',
@@ -186,11 +185,6 @@ export default {
         isSelfVisiting() {
             return this.user.id === this.profile.id;
         },
-        avatarId() {
-            return this.isSelfVisiting
-                ? this.user.avatar.id
-                : this.profile.avatar.id;
-        },
     },
 
     created() {
@@ -200,7 +194,7 @@ export default {
     },
 
     methods: {
-        ...mapMutations(['setUserAvatar']),
+        ...mapMutations(['updateAvatar']),
         dateFormat(date) {
             return date
                 ? format(date, this.meta.dateFormat)
@@ -214,9 +208,9 @@ export default {
         startImpersonating() {
             eventBus.$emit('start-impersonating', this.profile.id);
         },
-        updateAvatar() {
+        generateAvatar() {
             this.http.patch(this.route('core.avatars.update', this.user.avatar.id))
-                .then(({ data }) => this.setUserAvatar(data.avatarId))
+                .then(this.updateAvatar)
                 .catch(this.errorHandler);
         },
     },
@@ -224,10 +218,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-    .avatar {
-        margin: auto;
-    }
-
     .controls, .details {
         justify-content: center;
     }