feat(gui-v2): ApiClientHeaders

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

@@ -1,7 +1,127 @@
 <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>
-TODO: Headers
+  <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>