feat(server-routes): add cookies tab (#338)

nuxt · Jul 23, 2023 · 33e1417 · 33e1417
1 parent 934b1d4
commit 33e1417
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 2 deletions.
diff --git a/packages/devtools/client/components/ServerRouteDetails.vue b/packages/devtools/client/components/ServerRouteDetails.vue
@@ -243,13 +243,45 @@ const tabs = computed(() => {
     slug: 'headers',
     length: routeInputs.headers.length,
   })
+  items.push({
+    name: 'Cookies',
+    slug: 'cookies',
+  })
   items.push({
     name: 'Snippets',
     slug: 'snippet',
   })
   return items
 })
 
+const cookies = ref(getCookies())
+
+function getCookies() {
+  return document.cookie.split('; ').map((i) => {
+    const [key, value] = i.split('=')
+    return { key, value }
+  })
+}
+
+const newCookie = reactive({ key: '', value: '' })
+
+function updateCookie(key: string, value: any) {
+  if (!key)
+    return
+  const exist = cookies.value.find(cookie => cookie.key === key)
+  const cookie = useCookie(key)
+  if (exist !== undefined) {
+    if (value === undefined)
+      cookies.value = cookies.value.filter(cookie => cookie.key !== key)
+  }
+  else {
+    cookies.value.push({ key, value })
+    newCookie.key = ''
+    newCookie.value = ''
+  }
+  cookie.value = value
+}
+
 watchEffect(() => {
   if (selectedTabInput.value === 'json') {
     if (typeof routeInputBodyJSON.value === 'string')
@@ -320,6 +352,42 @@ watchEffect(() => {
         />
       </template>
     </div>
+    <div
+      v-if="activeTab === 'cookies'"
+      border="b base" p4 flex="~ col gap-4" font-mono
+    >
+      <div v-for="cookie in cookies" :key="cookie.key" flex="~ gap-4 items-center">
+        <NTextInput
+          placeholder="Key..."
+          :model-value="cookie.key"
+          disabled op-70
+        />
+        <NTextInput
+          placeholder="Value..."
+          :model-value="cookie.value"
+          flex-1 n="primary"
+          @input="updateCookie(cookie.key, $event.target?.value)"
+        />
+        <NButton title="Delete" n="red" @click="updateCookie(cookie.key, undefined)">
+          <NIcon icon="i-carbon-delete" />
+        </NButton>
+      </div>
+      <div flex="~ gap-4">
+        <NTextInput
+          v-model="newCookie.key"
+          placeholder="Key"
+          n="primary" flex-1
+        />
+        <NTextInput
+          v-model="newCookie.value"
+          placeholder="Value"
+          n="primary" flex-1
+        />
+        <NButton title="Add" n="primary" @click="updateCookie(newCookie.key, newCookie.value)">
+          <NIcon icon="i-carbon-save" />
+        </NButton>
+      </div>
+    </div>
     <DefineDefaultInputs>
       <ServerRouteInputs v-model="currentParams" :default="{ type: 'string' }" max-h-xs of-auto>
         <template v-if="inputDefaults[activeTab]?.length">

diff --git a/packages/devtools/client/components/ServerRouteInputs.vue b/packages/devtools/client/components/ServerRouteInputs.vue
@@ -1,4 +1,3 @@
-<!-- eslint-disable no-console -->
 <script setup lang="ts">
 const props = withDefaults(defineProps<{
   modelValue: any
@@ -53,7 +52,6 @@ watch(() => params, (items) => {
     }
     else if (item.type === 'date' && typeof item.value === 'string' && !item.value.match(/^\d{4}-\d{2}-\d{2}$/)) {
       item.value = new Date().toISOString().slice(0, 10)
-      console.log('date', item.value)
     }
     else if (item.type === 'time' && typeof item.value === 'string' && !item.value.match(/^\d{2}:\d{2}$/)) {
       item.value = new Date().toISOString().slice(11, 16)

diff --git a/packages/devtools/client/composables/constants.ts b/packages/devtools/client/composables/constants.ts
@@ -56,6 +56,7 @@ export const ComposablesDocs = {
 export const ServerRouteTabIcons: Record<string, string> = {
   snippet: 'i-carbon-code',
   headers: 'i-carbon-html-reference',
+  cookies: 'i-carbon-cookie',
   params: 'i-carbon-text-selection',
   query: 'i-carbon-help',
   body: 'i-carbon-document',