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

Signed-off-by: Pranav C <pranavxc@gmail.com>

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>
 

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 {
-  @apply inline-block;
+.chips-wrapper:hover,
+.chips-wrapper.active {
+  .nc-action-icon {
+    @apply inline-block;
+  }
 }
 </style>