Browse Source

fix(gui-v2): show plus icon for adding belongs to cell if empty

Signed-off-by: Pranav C <pranavxc@gmail.com>
pull/3065/head
Pranav C 2 years ago
parent
commit
eec7e0494c
  1. 3
      packages/nc-gui-v2/components/cell/Url.vue
  2. 18
      packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue

3
packages/nc-gui-v2/components/cell/Url.vue

@ -39,8 +39,7 @@ const focus: VNodeRef = (el) => (el as HTMLInputElement)?.focus()
<template>
<input v-if="editEnabled" :ref="focus" v-model="vModel" class="outline-none" @blur="editEnabled = false" />
<nuxt-link v-else-if="isValid" class="py-2 underline hover:opacity-75" :to="url" target="_blank">{{ value }}
</nuxt-link>
<nuxt-link v-else-if="isValid" class="py-2 underline hover:opacity-75" :to="url" target="_blank">{{ value }} </nuxt-link>
<span v-else>{{ value }}</span>
</template>

18
packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue

@ -4,7 +4,9 @@ import type { Ref } from 'vue'
import ItemChip from './components/ItemChip.vue'
import ListItems from './components/ListItems.vue'
import { inject, ref, useProvideLTARStore, useSmartsheetRowStoreOrThrow } from '#imports'
import { CellValueInj, ColumnInj, ReloadViewDataHookInj, RowInj } from '~/context'
import {ActiveCellInj, CellValueInj, ColumnInj, ReloadViewDataHookInj, RowInj } from '~/context'
import MdiArrowExpand from '~icons/mdi/arrow-expand'
import MdiPlus from '~icons/mdi/plus'
const column = inject(ColumnInj)
@ -14,7 +16,7 @@ const cellValue = inject(CellValueInj, ref<any>(null))
const row = inject(RowInj)
const active = false
const active = inject(ActiveCellInj)
const listItemsDlg = ref(false)
@ -28,6 +30,8 @@ const { loadRelatedTableMeta, relatedTablePrimaryValueProp, unlink } = useProvid
await loadRelatedTableMeta()
const addIcon = computed(() => (cellValue?.value ? MdiArrowExpand : MdiPlus))
const value = computed(() => {
if (cellValue?.value) {
return cellValue?.value
@ -54,7 +58,8 @@ const unlinkRef = async (rec: Record<string, any>) => {
</template>
</div>
<div class="flex-1 flex justify-end gap-1 min-h-[30px] align-center">
<MdiArrowExpand
<component
:is="addIcon"
class="text-sm nc-action-icon text-gray-500/50 hover:text-gray-500 select-none group-hover:(text-gray-500)"
@click="listItemsDlg = true"
/>
@ -63,12 +68,15 @@ const unlinkRef = async (rec: Record<string, any>) => {
</div>
</template>
<style scoped>
<style scoped lang="scss">
.nc-action-icon {
@apply hidden cursor-pointer;
}
.chips-wrapper:hover .nc-action-icon {
.chips-wrapper:hover,
.chips-wrapper.active {
.nc-action-icon {
@apply inline-block;
}
}
</style>

Loading…
Cancel
Save