hoppscotch/components/docs/Request.vue

<template>
  <div class="request">
    <h4 class="heading">
      <SmartIcon name="file" class="svg-icons" />
      {{ request.name || $t("state.none") }}
    </h4>
    <p v-if="request.url" class="doc-desc">
      <span>
        {{ $t("request.url") }}:
        <code>{{ request.url || $t("state.none") }}</code>
      </span>
    </p>
    <p v-if="request.path" class="doc-desc">
      <span>
        {{ $t("request.path") }}:
        <code>{{ request.path || $t("state.none") }}</code>
      </span>
    </p>
    <p v-if="request.method" class="doc-desc">
      <span>
        {{ $t("request.method") }}:
        <code>{{ request.method || $t("state.none") }}</code>
      </span>
    </p>
    <p v-if="request.auth" class="doc-desc">
      <span>
        {{ $t("request.authorization") }}:
        <code>{{ request.auth.authType || $t("state.none") }}</code>
      </span>
    </p>
    <p v-if="request.httpUser" class="doc-desc">
      <span>
        {{ $t("authorization.username") }}:
        <code>{{ request.httpUser || $t("state.none") }}</code>
      </span>
    </p>
    <p v-if="request.httpPassword" class="doc-desc">
      <span>
        {{ $t("authorization.password") }}:
        <code>{{ request.httpPassword || $t("state.none") }}</code>
      </span>
    </p>
    <p v-if="request.bearerToken" class="doc-desc">
      <span>
        {{ $t("authorization.token") }}:
        <code>{{ request.bearerToken || $t("state.none") }}</code>
      </span>
    </p>
    <h4 v-if="request.headers" class="heading">{{ $t("tab.headers") }}</h4>
    <span v-if="request.headers">
      <p
        v-for="(header, index) in request.headers"
        :key="`header-${index}`"
        class="doc-desc"
      >
        <span>
          {{ header.key || $t("state.none") }}:
          <code>{{ header.value || $t("state.none") }}</code>
        </span>
      </p>
    </span>
    <h4 v-if="request.params" class="heading">
      {{ $t("request.parameters") }}
    </h4>
    <span v-if="request.params">
      <p
        v-for="(parameter, index) in request.params"
        :key="`parameter-${index}`"
        class="doc-desc"
      >
        <span>
          {{ parameter.key || $t("state.none") }}:
          <code>{{ parameter.value || $t("state.none") }}</code>
        </span>
      </p>
    </span>
    <h4 v-if="request.bodyParams" class="heading">
      {{ $t("request.payload") }}
    </h4>
    <span v-if="request.bodyParams">
      <p
        v-for="(payload, index) in request.bodyParams"
        :key="`payload-${index}`"
        class="doc-desc"
      >
        <span>
          {{ payload.key || $t("state.none") }}:
          <code>{{ payload.value || $t("state.none") }}</code>
        </span>
      </p>
    </span>
    <p v-if="request.rawParams" class="doc-desc">
      <span>
        {{ $t("request.parameters") }}:
        <code>{{ request.rawParams || $t("state.none") }}</code>
      </span>
    </p>
    <p v-if="request.contentType" class="doc-desc">
      <span>
        {{ $t("request.content_type") }}:
        <code>{{ request.contentType || $t("state.none") }}</code>
      </span>
    </p>
    <p v-if="request.requestType" class="doc-desc">
      <span>
        {{ $t("request.type") }}:
        <code>{{ request.requestType || $t("state.none") }}</code>
      </span>
    </p>
  </div>
</template>

<script>
import { defineComponent } from "@nuxtjs/composition-api"

export default defineComponent({
  props: {
    request: { type: Object, default: () => {} },
  },
})
</script>

<style scoped lang="scss">
.request {
  @apply flex flex-col flex-1;
  @apply justify-center;
  @apply p-4;
  @apply mt-4;
  @apply border border-divider;
  @apply rounded;

  h4 {
    @apply mt-4;
  }

  .material-icons {
    @apply mr-4;
  }
}

.doc-desc {
  @apply flex flex-col flex-1;
  @apply justify-center;
  @apply p-4;
  @apply m-0;
  @apply text-secondaryLight;
  @apply border-b border-divider;

  &:last-child {
    @apply border-b-0;
  }

  .material-icons {
    @apply mr-4;
  }
}
</style>