Merge pull request 'refs #6339 clipboard' (!159) from 6339-cilpboard into dev
gitea/salix-front/pipeline/head This commit looks good
Details
gitea/salix-front/pipeline/head This commit looks good
Details
Reviewed-on: #159 Reviewed-by: Alex Moreno <alexm@verdnatura.es>
This commit is contained in:
commit
fac4e0f9ca
|
@ -1,19 +1,19 @@
|
|||
<script setup>
|
||||
import { onMounted, computed } from 'vue';
|
||||
import { Dark, Quasar, useQuasar } from 'quasar';
|
||||
import { Dark, Quasar } from 'quasar';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useRouter } from 'vue-router';
|
||||
import axios from 'axios';
|
||||
import { useState } from 'src/composables/useState';
|
||||
import { useSession } from 'src/composables/useSession';
|
||||
import { localeEquivalence } from "src/i18n/index";
|
||||
import { localeEquivalence } from 'src/i18n/index';
|
||||
|
||||
const state = useState();
|
||||
const session = useSession();
|
||||
const router = useRouter();
|
||||
const { t, locale } = useI18n();
|
||||
const quasar = useQuasar();
|
||||
|
||||
import { useClipboard } from 'src/composables/useClipboard';
|
||||
const { copyText } = useClipboard();
|
||||
const userLocale = computed({
|
||||
get() {
|
||||
return locale.value;
|
||||
|
@ -21,14 +21,14 @@ const userLocale = computed({
|
|||
set(value) {
|
||||
locale.value = value;
|
||||
|
||||
value = localeEquivalence[value] ?? value
|
||||
value = localeEquivalence[value] ?? value;
|
||||
|
||||
try {
|
||||
/* @vite-ignore */
|
||||
import(`../../node_modules/quasar/lang/${value}.mjs`).then((lang) => {
|
||||
Quasar.lang.set(lang.default);
|
||||
});
|
||||
} catch (error) {
|
||||
} catch (error) {
|
||||
//
|
||||
}
|
||||
},
|
||||
|
@ -81,12 +81,8 @@ function logout() {
|
|||
router.push('/login');
|
||||
}
|
||||
|
||||
function copyUserToken(){
|
||||
navigator.clipboard.writeText(session.getToken());
|
||||
quasar.notify({
|
||||
type: 'positive',
|
||||
message: t('components.userPanel.copyToken'),
|
||||
});
|
||||
function copyUserToken() {
|
||||
copyText(session.getToken(), { label: 'components.userPanel.copyToken' });
|
||||
}
|
||||
</script>
|
||||
|
||||
|
@ -129,8 +125,12 @@ function copyUserToken(){
|
|||
<div class="text-subtitle1 q-mt-md">
|
||||
<strong>{{ user.nickname }}</strong>
|
||||
</div>
|
||||
<div class="text-subtitle3 text-grey-7 q-mb-xs copyUserToken" @click="copyUserToken()" >@{{ user.name }}
|
||||
</div>
|
||||
<div
|
||||
class="text-subtitle3 text-grey-7 q-mb-xs copyText"
|
||||
@click="copyUserToken()"
|
||||
>
|
||||
@{{ user.name }}
|
||||
</div>
|
||||
|
||||
<QBtn
|
||||
id="logout"
|
||||
|
@ -152,9 +152,9 @@ function copyUserToken(){
|
|||
width: 150px;
|
||||
}
|
||||
|
||||
.copyUserToken {
|
||||
&:hover{
|
||||
cursor: alias;
|
||||
}
|
||||
.copyText {
|
||||
&:hover {
|
||||
cursor: alias;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -2,6 +2,7 @@
|
|||
import { computed } from 'vue';
|
||||
import { dashIfEmpty } from 'src/filters';
|
||||
|
||||
import { useClipboard } from 'src/composables/useClipboard';
|
||||
const $props = defineProps({
|
||||
label: { type: String, default: null },
|
||||
value: {
|
||||
|
@ -10,8 +11,19 @@ const $props = defineProps({
|
|||
},
|
||||
info: { type: String, default: null },
|
||||
dash: { type: Boolean, default: true },
|
||||
copy: { type: Boolean, default: false },
|
||||
});
|
||||
const isBooleanValue = computed(() => typeof $props.value === 'boolean');
|
||||
|
||||
const { copyText } = useClipboard();
|
||||
|
||||
function copyValueText() {
|
||||
copyText($props.value, {
|
||||
component: {
|
||||
copyValue: $props.value,
|
||||
},
|
||||
});
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.label,
|
||||
|
@ -48,5 +60,16 @@ const isBooleanValue = computed(() => typeof $props.value === 'boolean');
|
|||
</QTooltip>
|
||||
</QIcon>
|
||||
</div>
|
||||
<div class="copy" v-if="$props.copy && $props.value" @click="copyValueText()">
|
||||
<QIcon name="Content_Copy" color="primary" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.copy {
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -0,0 +1,17 @@
|
|||
import { useQuasar } from 'quasar';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
export function useClipboard() {
|
||||
const quasar = useQuasar();
|
||||
const { t } = useI18n();
|
||||
/**
|
||||
*
|
||||
* @param {String} value Value to send to clipboardAPI
|
||||
* @param {Object} {label, component} Refer to Quasar notify configuration. Label is the text to translate
|
||||
*/
|
||||
function copyText(value, { label = 'components.VnLv.copyText', component = {} }) {
|
||||
navigator.clipboard.writeText(value);
|
||||
quasar.notify({ type: 'positive', message: t(label, component) });
|
||||
}
|
||||
return { copyText };
|
||||
}
|
|
@ -1060,6 +1060,7 @@ export default {
|
|||
totalEntries: 'Total entries',
|
||||
},
|
||||
},
|
||||
|
||||
components: {
|
||||
topbar: {},
|
||||
userPanel: {
|
||||
|
@ -1083,5 +1084,8 @@ export default {
|
|||
addToPinned: 'Add to pinned',
|
||||
removeFromPinned: 'Remove from pinned',
|
||||
},
|
||||
VnLv: {
|
||||
copyText: '{copyValue} has been copied to the clipboard',
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
|
@ -1083,5 +1083,8 @@ export default {
|
|||
addToPinned: 'Añadir a fijados',
|
||||
removeFromPinned: 'Eliminar de fijados',
|
||||
},
|
||||
VnLv: {
|
||||
copyText: '{copyValue} se ha copiado al portapepeles',
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
|
@ -81,7 +81,7 @@ const creditWarning = computed(() => {
|
|||
<VnLinkPhone :phone-number="entity.mobile" />
|
||||
</template>
|
||||
</VnLv>
|
||||
<VnLv :label="t('customer.summary.email')" :value="entity.email" />
|
||||
<VnLv :label="t('customer.summary.email')" :value="entity.email" copy />
|
||||
<VnLv
|
||||
:label="t('customer.summary.salesPerson')"
|
||||
:value="entity?.salesPersonUser?.name"
|
||||
|
|
|
@ -90,17 +90,15 @@ const removeDepartment = () => {
|
|||
</QItem>
|
||||
</template>
|
||||
<template #body="{ entity }">
|
||||
<VnLv :label="t('department.chat')" :value="entity.chatName" dash />
|
||||
<VnLv :label="t('department.email')" :value="entity.notificationEmail" dash />
|
||||
<VnLv :label="t('department.chat')" :value="entity.chatName" />
|
||||
<VnLv :label="t('department.email')" :value="entity.notificationEmail" copy />
|
||||
<VnLv
|
||||
:label="t('department.selfConsumptionCustomer')"
|
||||
:value="entity.client?.name"
|
||||
dash
|
||||
/>
|
||||
<VnLv
|
||||
:label="t('department.bossDepartment')"
|
||||
:value="entity.worker?.user?.name"
|
||||
dash
|
||||
/>
|
||||
</template>
|
||||
<template #actions>
|
||||
|
|
|
@ -101,7 +101,7 @@ const setData = (entity) => {
|
|||
</template>
|
||||
<template #body="{ entity }">
|
||||
<VnLv :label="t('worker.card.name')" :value="entity.user?.nickname" />
|
||||
<VnLv :label="t('worker.card.email')" :value="entity.user?.email"> </VnLv>
|
||||
<VnLv :label="t('worker.card.email')" :value="entity.user?.email" copy />
|
||||
<VnLv
|
||||
:label="t('worker.list.department')"
|
||||
:value="entity.department ? entity.department.department.name : null"
|
||||
|
|
|
@ -80,7 +80,7 @@ const filter = {
|
|||
:label="t('worker.list.department')"
|
||||
:value="worker.department.department.name"
|
||||
/>
|
||||
<VnLv :label="t('worker.list.email')" :value="worker.user.email" />
|
||||
<VnLv :label="t('worker.list.email')" :value="worker.user.email" copy />
|
||||
<VnLv :label="t('worker.summary.boss')" link>
|
||||
<template #value>
|
||||
<VnUserLink
|
||||
|
|
Loading…
Reference in New Issue