hoppscotch/packages/hoppscotch-app/components/teams/Invite.vue

<template>
  <SmartModal v-if="show" :title="$t('team.invite')" @close="hideModal">
    <template #body>
      <div class="flex flex-col px-2">
        <div class="flex flex-1 justify-between items-center">
          <label for="memberList" class="p-4">
            {{ $t("team.pending_invites") }}
          </label>
        </div>
        <div class="divide-y divide-dividerLight border-divider border rounded">
          <div
            v-if="pendingInvites.loading"
            class="flex p-4 items-center justify-center"
          >
            <SmartSpinner />
          </div>
          <div v-else>
            <div
              v-if="!pendingInvites.loading && E.isRight(pendingInvites.data)"
            >
              <div
                v-for="(invitee, index) in pendingInvites.data.right.team
                  .teamInvitations"
                :key="`invitee-${index}`"
                class="divide-x divide-dividerLight flex"
              >
                <input
                  v-if="invitee"
                  class="
                    bg-transparent
                    flex flex-1
                    text-secondaryLight
                    py-2
                    px-4
                  "
                  :placeholder="`${$t('team.email')}`"
                  :name="'param' + index"
                  :value="invitee.inviteeEmail"
                  readonly
                />
                <input
                  class="
                    bg-transparent
                    flex flex-1
                    text-secondaryLight
                    py-2
                    px-4
                  "
                  :placeholder="`${$t('team.permissions')}`"
                  :name="'value' + index"
                  :value="
                    typeof invitee.inviteeRole === 'string'
                      ? invitee.inviteeRole
                      : JSON.stringify(invitee.inviteeRole)
                  "
                  readonly
                />
                <div class="flex">
                  <ButtonSecondary
                    v-tippy="{ theme: 'tooltip' }"
                    :title="$t('action.remove')"
                    svg="trash"
                    color="red"
                    @click.native="removeInvitee(invitee.id)"
                  />
                </div>
              </div>
            </div>
            <div
              v-if="
                E.isRight(pendingInvites.data) &&
                pendingInvites.data.right.team.teamInvitations.length === 0
              "
              class="
                flex flex-col
                text-secondaryLight
                p-4
                items-center
                justify-center
              "
            >
              <SmartIcon class="opacity-75 pb-2" name="users" />
              <span class="text-center">
                {{ $t("empty.pending_invites") }}
              </span>
            </div>
            <div
              v-if="!pendingInvites.loading && E.isLeft(pendingInvites.data)"
              class="flex flex-col p-4 items-center"
            >
              <i class="mb-4 material-icons">help_outline</i>
              {{ $t("error.something_went_wrong") }}
            </div>
          </div>
        </div>
        <div class="flex flex-1 justify-between items-center">
          <label for="memberList" class="p-4">
            {{ $t("team.invite_tooltip") }}
          </label>
          <div class="flex">
            <ButtonSecondary
              svg="plus"
              :label="$t('add.new')"
              @click.native="addNewInvitee"
            />
          </div>
        </div>
        <div class="divide-y divide-dividerLight border-divider border rounded">
          <div
            v-for="(invitee, index) in newInvites"
            :key="`new-invitee-${index}`"
            class="divide-x divide-dividerLight flex"
          >
            <input
              v-model="invitee.key"
              class="bg-transparent flex flex-1 py-2 px-4"
              :placeholder="$t('team.email')"
              :name="'invitee' + index"
              autofocus
            />
            <span>
              <tippy
                :ref="`newMemberOptions-${index}`"
                interactive
                trigger="click"
                theme="popover"
                arrow
              >
                <template #trigger>
                  <span class="select-wrapper">
                    <input
                      class="
                        bg-transparent
                        cursor-pointer
                        flex flex-1
                        py-2
                        px-4
                      "
                      :placeholder="$t('team.permissions')"
                      :name="'value' + index"
                      :value="
                        typeof invitee.value === 'string'
                          ? invitee.value
                          : JSON.stringify(invitee.value)
                      "
                      readonly
                    />
                  </span>
                </template>
                <SmartItem
                  label="OWNER"
                  @click.native="updateNewInviteeRole(index, 'OWNER')"
                />
                <SmartItem
                  label="EDITOR"
                  @click.native="updateNewInviteeRole(index, 'EDITOR')"
                />
                <SmartItem
                  label="VIEWER"
                  @click.native="updateNewInviteeRole(index, 'VIEWER')"
                />
              </tippy>
            </span>
            <div class="flex">
              <ButtonSecondary
                id="member"
                v-tippy="{ theme: 'tooltip' }"
                :title="$t('action.remove')"
                svg="trash"
                color="red"
                @click.native="removeNewInvitee(index)"
              />
            </div>
          </div>
          <div
            v-if="newInvites.length === 0"
            class="
              flex flex-col
              text-secondaryLight
              p-4
              items-center
              justify-center
            "
          >
            <SmartIcon class="opacity-75 pb-2" name="users" />
            <span class="text-center pb-4">
              {{ $t("empty.members") }}
            </span>
            <ButtonSecondary
              :label="$t('add.new')"
              filled
              @click.native="addNewInvitee"
            />
          </div>
        </div>
      </div>
    </template>
    <template #footer>
      <span>
        <ButtonPrimary :label="$t('team.invite')" @click.native="sendInvites" />
        <ButtonSecondary
          :label="$t('action.cancel')"
          @click.native="hideModal"
        />
      </span>
    </template>
  </SmartModal>
</template>

<script setup lang="ts">
import { watch, ref, reactive } from "@nuxtjs/composition-api"
import * as E from "fp-ts/Either"
import { useGQLQuery } from "~/helpers/backend/GQLClient"
import {
  GetPendingInvitesDocument,
  GetPendingInvitesQuery,
  GetPendingInvitesQueryVariables,
} from "~/helpers/backend/graphql"

const props = defineProps({
  show: Boolean,
  editingteamID: { type: String, default: null },
})

const emit = defineEmits<{
  (e: "hide-modal"): void
}>()

const pendingInvites = useGQLQuery<
  GetPendingInvitesQuery,
  GetPendingInvitesQueryVariables,
  ""
>({
  query: GetPendingInvitesDocument,
  variables: reactive({
    teamID: props.editingteamID,
  }),
  defer: true,
})

watch(
  () => props.editingteamID,
  () => {
    if (props.editingteamID) {
      pendingInvites.execute({
        teamID: props.editingteamID,
      })
    }
  }
)

watch(
  () => pendingInvites,
  () => {
    console.log(pendingInvites)
  }
)

const removeInvitee = (id: string) => {
  console.log(id)
}

const newInvites = ref([])

const addNewInvitee = () => {
  newInvites.value.push({
    key: "",
    value: "",
  })
}

const updateNewInviteeRole = (index: number, role: string) => {
  newInvites.value[index].value = role
}

const removeNewInvitee = (id: number) => {
  newInvites.value.splice(id, 1)
}

const sendInvites = () => {
  console.log(newInvites.value)
}

const hideModal = () => {
  emit("hide-modal")
}
</script>