fix: show view icon in dropdown

This commit is contained in:
Shariq Ansari 2024-05-20 18:07:30 +05:30
parent 79fc7572bc
commit 838e2085cf

View File

@ -5,7 +5,8 @@
<template #default="{ open }"> <template #default="{ open }">
<Button :label="__(currentView.label)"> <Button :label="__(currentView.label)">
<template #prefix> <template #prefix>
<FeatherIcon :name="currentView.icon" class="h-4" /> <div v-if="isEmoji(currentView.icon)">{{ currentView.icon }}</div>
<FeatherIcon v-else :name="currentView.icon" class="h-4" />
</template> </template>
<template #suffix> <template #suffix>
<FeatherIcon <FeatherIcon
@ -203,6 +204,7 @@ import { createResource, Dropdown, call, FeatherIcon } from 'frappe-ui'
import { computed, ref, onMounted, watch, h } from 'vue' import { computed, ref, onMounted, watch, h } from 'vue'
import { useRouter, useRoute } from 'vue-router' import { useRouter, useRoute } from 'vue-router'
import { useDebounceFn } from '@vueuse/core' import { useDebounceFn } from '@vueuse/core'
import { gemoji } from 'gemoji'
const props = defineProps({ const props = defineProps({
doctype: { doctype: {
@ -247,9 +249,15 @@ const currentView = computed(() => {
} }
}) })
function isEmoji(str) {
const emojiList = gemoji.map((emoji) => emoji.emoji)
return emojiList.includes(str)
}
const view = ref({ const view = ref({
name: '', name: '',
label: '', label: '',
icon: '',
filters: {}, filters: {},
order_by: 'modified desc', order_by: 'modified desc',
columns: '', columns: '',
@ -288,6 +296,7 @@ function getParams() {
view.value = { view.value = {
name: _view.name, name: _view.name,
label: _view.label, label: _view.label,
icon: _view.icon,
filters: _view.filters, filters: _view.filters,
order_by: _view.order_by, order_by: _view.order_by,
columns: _view.columns, columns: _view.columns,
@ -301,6 +310,7 @@ function getParams() {
view.value = { view.value = {
name: '', name: '',
label: '', label: '',
icon: '',
filters: {}, filters: {},
order_by: 'modified desc', order_by: 'modified desc',
columns: '', columns: '',
@ -391,6 +401,14 @@ const defaultViews = [
}, },
] ]
function getIcon(icon) {
if (isEmoji(icon)) {
return h('div', icon)
} else {
return icon || 'list'
}
}
const viewsDropdownOptions = computed(() => { const viewsDropdownOptions = computed(() => {
let _views = [ let _views = [
{ {
@ -403,7 +421,7 @@ const viewsDropdownOptions = computed(() => {
if (list.value?.data?.views) { if (list.value?.data?.views) {
list.value.data.views.forEach((view) => { list.value.data.views.forEach((view) => {
view.label = __(view.label) view.label = __(view.label)
view.icon = view.icon || 'list' view.icon = getIcon(view.icon)
view.filters = view.filters =
typeof view.filters == 'string' typeof view.filters == 'string'
? JSON.parse(view.filters) ? JSON.parse(view.filters)
@ -610,9 +628,9 @@ const viewActions = computed(() => {
if (route.query.view && (!view.value.public || isManager())) { if (route.query.view && (!view.value.public || isManager())) {
actions[0].items.push({ actions[0].items.push({
label: __('Rename'), label: __('Edit'),
icon: () => h(EditIcon, { class: 'h-4 w-4' }), icon: () => h(EditIcon, { class: 'h-4 w-4' }),
onClick: () => renameView(), onClick: () => editView(),
}) })
if (!view.value.public) { if (!view.value.public) {
@ -671,7 +689,7 @@ function duplicateView() {
showViewModal.value = true showViewModal.value = true
} }
function renameView() { function editView() {
view.value.name = route.query.view view.value.name = route.query.view
view.value.label = __(getView(route.query.view).label) view.value.label = __(getView(route.query.view).label)
showViewModal.value = true showViewModal.value = true