nocodb/packages/nc-gui/components/smartsheet/header/DeleteColumnModal.vue

<script lang="ts" setup>
import type { LinkToAnotherRecordType } from 'nocodb-sdk'
import { RelationTypes, ViewTypes, isLinksOrLTAR, isVirtualCol } from 'nocodb-sdk'

const props = defineProps<{
  visible: boolean
  onDeleteColumn?: () => void
}>()

const emits = defineEmits(['update:visible'])

const visible = useVModel(props, 'visible', emits)

const { $api, $e } = useNuxtApp()

const column = inject(ColumnInj)

const meta = inject(MetaInj, ref())

const { getMeta } = useMetas()

const { includeM2M } = useGlobal()

const { loadTables } = useBase()

const { viewsByTable } = storeToRefs(useViewsStore())

const isLoading = ref(false)

const onDelete = async () => {
  if (!column?.value) return

  isLoading.value = true

  try {
    let isColumnUsedAsCoverImage = false

    for (const view of viewsByTable.value.get(meta.value.id) || []) {
      if ([ViewTypes.GALLERY, ViewTypes.KANBAN].includes(view.type) && view.view?.fk_cover_image_col_id === column?.value?.id) {
        isColumnUsedAsCoverImage = true
        break
      }
    }

    await $api.dbTableColumn.delete(column?.value?.id as string)

    await getMeta(meta?.value?.id as string, true)

    /** force-reload related table meta if deleted column is a LTAR and not linked to same table */
    if (isLinksOrLTAR(column?.value) && column.value?.colOptions) {
      await getMeta((column.value?.colOptions as LinkToAnotherRecordType).fk_related_model_id!, true)

      // reload tables if deleted column is mm and include m2m is true
      if (includeM2M.value && (column.value?.colOptions as LinkToAnotherRecordType).type === RelationTypes.MANY_TO_MANY) {
        loadTables()
      }
    }

    // Update views if column is used as cover image
    if (isColumnUsedAsCoverImage) {
      viewsByTable.value.set(
        meta.value.id,
        (viewsByTable.value.get(meta.value.id) || [])
          .map((view) => {
            if (
              [ViewTypes.GALLERY, ViewTypes.KANBAN].includes(view.type) &&
              view.view?.fk_cover_image_col_id === column?.value?.id
            ) {
              view.view.fk_cover_image_col_id = null
            }
            return view
          })
          .sort((a, b) => a.order! - b.order!),
      )
    }

    $e('a:column:delete')
    visible.value = false

    props.onDeleteColumn?.()
  } catch (e: any) {
    message.error(await extractSdkResponseErrorMsg(e))
  } finally {
    isLoading.value = false
  }
}
</script>

<template>
  <GeneralDeleteModal v-model:visible="visible" :entity-name="$t('objects.column')" :on-delete="onDelete">
    <template #entity-preview>
      <div v-if="column" class="flex flex-row items-center py-2 px-3 bg-gray-50 rounded-lg text-gray-700 mb-4">
        <SmartsheetHeaderVirtualCellIcon v-if="isVirtualCol(column)" class="nc-view-icon"></SmartsheetHeaderVirtualCellIcon>
        <SmartsheetHeaderCellIcon v-else class="nc-view-icon"></SmartsheetHeaderCellIcon>
        <div
          class="capitalize text-ellipsis overflow-hidden select-none w-full pl-1.5"
          :style="{ wordBreak: 'keep-all', whiteSpace: 'nowrap', display: 'inline' }"
        >
          {{ column.title }}
        </div>
      </div>
    </template>
  </GeneralDeleteModal>
</template>