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> <template>
<input v-if="editEnabled" :ref="focus" v-model="vModel" class="outline-none" @blur="editEnabled = false" /> <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 v-else-if="isValid" class="py-2 underline hover:opacity-75" :to="url" target="_blank">{{ value }} </nuxt-link>
</nuxt-link>
<span v-else>{{ value }}</span> <span v-else>{{ value }}</span>
</template> </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 ItemChip from './components/ItemChip.vue'
import ListItems from './components/ListItems.vue' import ListItems from './components/ListItems.vue'
import { inject, ref, useProvideLTARStore, useSmartsheetRowStoreOrThrow } from '#imports' 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) const column = inject(ColumnInj)
@ -14,7 +16,7 @@ const cellValue = inject(CellValueInj, ref<any>(null))
const row = inject(RowInj) const row = inject(RowInj)
const active = false const active = inject(ActiveCellInj)
const listItemsDlg = ref(false) const listItemsDlg = ref(false)
@ -28,6 +30,8 @@ const { loadRelatedTableMeta, relatedTablePrimaryValueProp, unlink } = useProvid
await loadRelatedTableMeta() await loadRelatedTableMeta()
const addIcon = computed(() => (cellValue?.value ? MdiArrowExpand : MdiPlus))
const value = computed(() => { const value = computed(() => {
if (cellValue?.value) { if (cellValue?.value) {
return cellValue?.value return cellValue?.value
@ -54,7 +58,8 @@ const unlinkRef = async (rec: Record<string, any>) => {
</template> </template>
</div> </div>
<div class="flex-1 flex justify-end gap-1 min-h-[30px] align-center"> <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)" class="text-sm nc-action-icon text-gray-500/50 hover:text-gray-500 select-none group-hover:(text-gray-500)"
@click="listItemsDlg = true" @click="listItemsDlg = true"
/> />
@ -63,12 +68,15 @@ const unlinkRef = async (rec: Record<string, any>) => {
</div> </div>
</template> </template>
<style scoped> <style scoped lang="scss">
.nc-action-icon { .nc-action-icon {
@apply hidden cursor-pointer; @apply hidden cursor-pointer;
} }
.chips-wrapper:hover .nc-action-icon { .chips-wrapper:hover,
.chips-wrapper.active {
.nc-action-icon {
@apply inline-block; @apply inline-block;
}
} }
</style> </style>

Loading…
Cancel
Save