nocodb/packages/nc-gui/components/dashboard/settings/BaseSettings/Snapshots.vue

<script setup lang="ts">
import dayjs from 'dayjs'

const { t } = useI18n()

const { sorts, sortDirection, loadSorts, handleGetSortedData, saveOrUpdate: saveOrUpdateSort } = useUserSorts('Webhook')

const orderBy = computed<Record<string, SordDirectionType>>({
  get: () => {
    return sortDirection.value
  },
  set: (value: Record<string, SordDirectionType>) => {
    // Check if value is an empty object
    if (Object.keys(value).length === 0) {
      saveOrUpdateSort({})
      return
    }

    const [field, direction] = Object.entries(value)[0]

    saveOrUpdateSort({
      field,
      direction,
    })
  },
})

const {
  snapshots,
  createSnapshot,
  listSnapshots,
  updateSnapshot,
  cancelNewSnapshot,
  isUnsavedSnapshotsPending,
  addNewSnapshot,
  isCreatingSnapshot,
} = useBaseSettings()

const columns = [
  {
    key: 'name',
    title: t('general.snapshot'),
    name: 'Snapshot',
    minWidth: 397,
    padding: '12px 24px',
    showOrderBy: true,
    dataIndex: 'title',
  },
  {
    key: 'action',
    title: t('general.action'),
    width: 162,
    minWidth: 162,
    padding: '12px 24px',
  },
] as NcTableColumnProps[]

onMounted(async () => {
  await listSnapshots()
})
const deleteSnapshot = (s: SnapshotExtendedType) => {
  const isOpen = ref(true)

  const { close } = useDialog(resolveComponent('DlgSnapshotDelete'), {
    'modelValue': isOpen,
    'snapshot': s,
    'onUpdate:modelValue': closeDialog,
    'onDeleted': async () => {
      closeDialog()
      await listSnapshots()
    },
  })

  function closeDialog() {
    isOpen.value = false
    close(1000)
  }
}

const restoreSnapshot = (s: SnapshotExtendedType) => {
  const isOpen = ref(true)

  const { close } = useDialog(resolveComponent('DlgSnapshotRestore'), {
    'modelValue': isOpen,
    'snapshot': s,
    'onUpdate:modelValue': closeDialog,
    'onRestored': async () => {
      closeDialog()
    },
  })

  function closeDialog() {
    isOpen.value = false
    close(1000)
  }
}
</script>

<template>
  <div v-if="isCreatingSnapshot" class="absolute w-full h-full inset-0 flex items-center justify-center z-90 bg-black/12">
    <div
      v-if="isCreatingSnapshot"
      style="box-shadow: 0px 8px 8px -4px rgba(0, 0, 0, 0.04), 0px 20px 24px -4px rgba(0, 0, 0, 0.1)"
      class="bg-white p-6 flex flex-col w-[488px] rounded-2xl"
    >
      <div class="text-nc-content-gray-emphasis text-lg font-bold">Creating base snapshot</div>
      <div class="text-nc-gray-subtle2 mt-2">
        Your database snapshot is being created. This process may take some time to complete. Please do not close this window
        until the snapshot has finished.
      </div>

      <div class="w-full flex justify-between items-center gap-3 mt-5">
        <GeneralLoader size="xlarge" />

        <NcButton size="small" type="secondary">
          {{ $t('general.cancel') }}
        </NcButton>
      </div>
    </div>
  </div>

  <div class="item-card flex flex-col w-full">
    <div class="text-nc-content-gray-emphasis font-semibold text-lg">
      {{ $t('general.baseSnapshots') }}
    </div>

    <div class="text-nc-content-gray-subtle2 mt-2 leading-5">
      {{ $t('labels.snapShotSubText') }}
    </div>

    <div class="flex items-center mt-6 gap-5">
      <NcButton :disabled="isUnsavedSnapshotsPending" class="!w-36" size="small" type="secondary" @click="addNewSnapshot">
        {{ $t('labels.newSnapshot') }}
      </NcButton>
    </div>

    <NcTable
      v-model:order-by="orderBy"
      :columns="columns"
      :data="snapshots"
      class="h-full mt-5"
      body-row-class-name="nc-base-settings-snapshot-item"
    >
      <template #bodyCell="{ column, record: snapshot }">
        <template v-if="column.key === 'name'">
          <NcTooltip v-if="!snapshot.isNew" class="truncate max-w-full text-gray-800 font-semibold text-sm">
            {{ snapshot.title }}

            <template #title>
              <div class="text-xs font-semibold text-nc-gray-300">Created On</div>
              <div class="mt-1 text-[13px]">
                {{ dayjs(snapshot.created_at).format('D MMMM YYYY, hh:mm A') }}
              </div>
              <div class="text-xs font-semibold mt-2 text-nc-gray-300">Created By</div>
              <div class="mt-1 text-[13px]">
                {{ snapshot.created_display_name }}
              </div>
            </template>
          </NcTooltip>
          <a-input v-else v-model:value="snapshot.title" class="new-snapshot-title" />
        </template>
        <template v-if="column.key === 'action'">
          <div v-if="!snapshot?.isNew" class="flex row-action items-center">
            <NcButton
              size="small"
              type="secondary"
              class="!text-xs !rounded-r-none !border-r-0"
              :shadow="false"
              @click="restoreSnapshot(snapshot)"
            >
              <div class="text-nc-content-gray-subtle font-semibold">
                {{ $t('general.restore') }}
              </div>
            </NcButton>
            <NcButton
              size="small"
              type="secondary"
              class="!text-xs !rounded-l-none"
              :shadow="false"
              @click="deleteSnapshot(snapshot)"
            >
              <GeneralIcon icon="delete" />
            </NcButton>
          </div>

          <div v-else>
            <div class="flex gap-2">
              <NcButton type="secondary" size="small" @click="cancelNewSnapshot()">
                {{ $t('general.cancel') }}
              </NcButton>

              <NcButton type="primary" size="small" @click="createSnapshot(snapshot)">
                {{ $t('general.save') }}
              </NcButton>
            </div>
          </div>
        </template>
      </template>
    </NcTable>
  </div>
</template>

<style scoped lang="scss">
.ant-input {
  @apply rounded-lg py-1 px-3 w-398 h-8 border-1 focus:border-brand-500 border-gray-200;
}
</style>