nocodb/packages/nc-gui-v2/components/api-client/Headers.vue

<script setup lang="ts">
import MdiPlusIcon from '~icons/mdi/plus'
import MdiDeleteOutlineIcon from '~icons/mdi/delete-outline'

interface Props {
  modelValue: Record<string, any>[]
}

const { modelValue } = defineProps<Props>()

const emit = defineEmits(['update:modelValue'])

const localState = computed({
  get() {
    return modelValue
  },
  set(newValue: Record<string, any>[]) {
    emit('update:modelValue', newValue)
  },
})

const headerList = ref([
  'A-IM',
  'Accept',
  'Accept-Charset',
  'Accept-Encoding',
  'Accept-Language',
  'Accept-Datetime',
  'Access-Control-Request-Method',
  'Access-Control-Request-Headers',
  'Authorization',
  'Cache-Control',
  'Connection',
  'Content-Length',
  'Content-Type',
  'Cookie',
  'Date',
  'Expect',
  'Forwarded',
  'From',
  'Host',
  'If-Match',
  'If-Modified-Since',
  'If-None-Match',
  'If-Range',
  'If-Unmodified-Since',
  'Max-Forwards',
  'Origin',
  'Pragma',
  'Proxy-Authorization',
  'Range',
  'Referer',
  'TE',
  'User-Agent',
  'Upgrade',
  'Via',
  'Warning',
  'Non-standard headers',
  'Dnt',
  'X-Requested-With',
  'X-CSRF-Token',
])

const addHeaderRow = () => localState.value.push({})

const deleteHeaderRow = (idx: number) => localState.value.splice(idx, 1)
</script>

<template>
  <div class="flex flex-row justify-center">
    <table>
      <thead>
        <tr>
          <th>
            <!-- Intended to be empty - For checkbox -->
          </th>
          <th>
            <div class="text-center font-normal mb-2">Header Name</div>
          </th>
          <th>
            <div class="text-center font-normal mb-2">Value</div>
          </th>
          <th>
            <!-- Intended to be empty - For delete button -->
          </th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(headerRow, idx) in localState" :key="idx">
          <td class="px-2">
            <a-form-item>
              <a-checkbox v-model:checked="headerRow.enabled" />
            </a-form-item>
          </td>
          <td class="px-2">
            <a-form-item>
              <a-select v-model:value="headerRow.name" size="large" placeholder="Key">
                <a-select-option v-for="(header, i) in headerList" :key="i" :value="header">
                  {{ header }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </td>
          <td class="px-2">
            <a-form-item>
              <a-input v-model:value="headerRow.value" size="large" placeholder="Value" />
            </a-form-item>
          </td>
          <td class="relative">
            <div v-if="idx !== 0" class="absolute flex flex-col justify-start mt-2 -right-6 top-0">
              <MdiDeleteOutlineIcon class="cursor-pointer" @click="deleteHeaderRow(idx)" />
            </div>
          </td>
        </tr>
        <tr>
          <td :colspan="12" class="text-center">
            <a-button type="default" class="!bg-gray-100 rounded-md border-none mr-1" @click="addHeaderRow">
              <template #icon>
                <MdiPlusIcon class="flex mx-auto" />
              </template>
            </a-button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>