"Fossies" - the Fresh Open Source Software Archive  

Source code changes of the file "packages/hoppscotch-app/components/teams/Invite.vue" between
hoppscotch-2.2.1.tar.gz and hoppscotch-3.0.0.tar.gz

About: Hoppscotch is a light-weight, web based API development suite.

Invite.vue  (hoppscotch-2.2.1):Invite.vue  (hoppscotch-3.0.0)
<template> <template>
<SmartModal v-if="show" :title="t('team.invite')" @close="hideModal"> <SmartModal v-if="show" dialog :title="t('team.invite')" @close="hideModal">
<template #body> <template #body>
<div v-if="sendInvitesResult.length" class="flex flex-col px-4"> <div v-if="sendInvitesResult.length" class="flex flex-col px-4">
<div class="flex flex-col items-center justify-center max-w-md"> <div class="flex flex-col items-center justify-center max-w-md">
<SmartIcon class="w-6 h-6 text-accent" name="users" /> <icon-lucide-users class="w-6 h-6 text-accent" />
<h3 class="my-2 text-lg text-center"> <h3 class="my-2 text-lg text-center">
{{ t("team.we_sent_invite_link") }} {{ t("team.we_sent_invite_link") }}
</h3> </h3>
<p class="text-center"> <p class="text-center">
{{ t("team.we_sent_invite_link_description") }} {{ t("team.we_sent_invite_link_description") }}
</p> </p>
</div> </div>
<div <div
class="flex flex-col p-4 mt-8 space-y-6 border rounded border-dividerL ight" class="flex flex-col p-4 mt-8 border rounded space-y-6 border-dividerL ight"
> >
<div <div
v-for="(invitee, index) in sendInvitesResult" v-for="(invitee, index) in sendInvitesResult"
:key="`invitee-${index}`" :key="`invitee-${index}`"
> >
<p class="flex items-center"> <p class="flex items-center">
<i <component
class="mr-4 material-icons" :is="
invitee.status === 'error' ? IconAlertTriangle : IconMailCheck
"
class="mr-4 svg-icons"
:class=" :class="
invitee.status === 'error' ? 'text-red-500' : 'text-green-500' invitee.status === 'error' ? 'text-red-500' : 'text-green-500'
" "
> />
{{
invitee.status === "error"
? "error_outline"
: "mark_email_read"
}}
</i>
<span class="truncate">{{ invitee.email }}</span> <span class="truncate">{{ invitee.email }}</span>
</p> </p>
<p v-if="invitee.status === 'error'" class="mt-2 ml-8 text-red-500"> <p v-if="invitee.status === 'error'" class="mt-2 ml-8 text-red-500">
{{ getErrorMessage(invitee.error) }} {{ getErrorMessage(invitee.error) }}
</p> </p>
</div> </div>
</div> </div>
</div> </div>
<div <div
v-else-if="sendingInvites" v-else-if="sendingInvites"
class="flex items-center justify-center p-4" class="flex items-center justify-center p-4"
> >
<SmartSpinner /> <SmartSpinner />
</div> </div>
<div v-else class="flex flex-col px-2"> <div v-else class="flex flex-col">
<div class="flex items-center justify-between flex-1"> <div class="flex items-center justify-between flex-1">
<label for="memberList" class="px-4 pb-4"> <label for="memberList" class="px-4 pb-4">
{{ t("team.pending_invites") }} {{ t("team.pending_invites") }}
</label> </label>
</div> </div>
<div class="border divide-y rounded divide-dividerLight border-divider"> <div class="border rounded divide-y divide-dividerLight border-divider">
<div <div
v-if="pendingInvites.loading" v-if="pendingInvites.loading"
class="flex items-center justify-center p-4" class="flex items-center justify-center p-4"
> >
<SmartSpinner /> <SmartSpinner />
</div> </div>
<div v-else> <div v-else>
<div <div
v-if="!pendingInvites.loading && E.isRight(pendingInvites.data)" v-if="!pendingInvites.loading && E.isRight(pendingInvites.data)"
> >
skipping to change at line 90 skipping to change at line 87
class="flex flex-1 px-4 py-2 bg-transparent text-secondaryLigh t" class="flex flex-1 px-4 py-2 bg-transparent text-secondaryLigh t"
:placeholder="`${t('team.permissions')}`" :placeholder="`${t('team.permissions')}`"
:name="'value' + index" :name="'value' + index"
:value="invitee.inviteeRole" :value="invitee.inviteeRole"
readonly readonly
/> />
<div class="flex"> <div class="flex">
<ButtonSecondary <ButtonSecondary
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
:title="t('action.remove')" :title="t('action.remove')"
svg="trash" :icon="IconTrash"
color="red" color="red"
@click.native="removeInvitee(invitee.id)" :loading="isLoadingIndex === index"
@click="removeInvitee(invitee.id, index)"
/> />
</div> </div>
</div> </div>
</div> </div>
<div <div
v-if=" v-if="
E.isRight(pendingInvites.data) && E.isRight(pendingInvites.data) &&
pendingInvites.data.right.team.teamInvitations.length === 0 pendingInvites.data.right.team.teamInvitations.length === 0
" "
class="flex flex-col items-center justify-center p-4 text-secondar yLight" class="flex flex-col items-center justify-center p-4 text-secondar yLight"
> >
<span class="text-center"> <span class="text-center">
{{ t("empty.pending_invites") }} {{ t("empty.pending_invites") }}
</span> </span>
</div> </div>
<div <div
v-if="!pendingInvites.loading && E.isLeft(pendingInvites.data)" v-if="!pendingInvites.loading && E.isLeft(pendingInvites.data)"
class="flex flex-col items-center p-4" class="flex flex-col items-center p-4"
> >
<i class="mb-4 material-icons">help_outline</i> <component :is="IconHelpCircle" class="mb-4 svg-icons" />
{{ t("error.something_went_wrong") }} {{ t("error.something_went_wrong") }}
</div> </div>
</div> </div>
</div> </div>
<div class="flex items-center justify-between flex-1 pt-4"> <div class="flex items-center justify-between flex-1 pt-4">
<label for="memberList" class="p-4"> <label for="memberList" class="p-4">
{{ t("team.invite_tooltip") }} {{ t("team.invite_tooltip") }}
</label> </label>
<div class="flex"> <div class="flex">
<ButtonSecondary <ButtonSecondary
svg="plus" :icon="IconPlus"
:label="t('add.new')" :label="t('add.new')"
filled filled
@click.native="addNewInvitee" @click="addNewInvitee"
/> />
</div> </div>
</div> </div>
<div class="border divide-y rounded divide-dividerLight border-divider"> <div class="border rounded divide-y divide-dividerLight border-divider">
<div <div
v-for="(invitee, index) in newInvites" v-for="(invitee, index) in newInvites"
:key="`new-invitee-${index}`" :key="`new-invitee-${index}`"
class="flex divide-x divide-dividerLight" class="flex divide-x divide-dividerLight"
> >
<input <input
v-model="invitee.key" v-model="invitee.key"
class="flex flex-1 px-4 py-2 bg-transparent" class="flex flex-1 px-4 py-2 bg-transparent"
:placeholder="`${t('team.email')}`" :placeholder="`${t('team.email')}`"
:name="'invitee' + index" :name="'invitee' + index"
autofocus autofocus
/> />
<span> <span>
<tippy <tippy
ref="newInviteeOptions" ref="newInviteeOptions"
interactive interactive
trigger="click" trigger="click"
theme="popover" theme="popover"
arrow arrow
> >
<template #trigger> <span class="select-wrapper">
<span class="select-wrapper"> <input
<input class="flex flex-1 px-4 py-2 bg-transparent cursor-pointer"
class="flex flex-1 px-4 py-2 bg-transparent cursor-pointer :placeholder="`${t('team.permissions')}`"
" :name="'value' + index"
:placeholder="`${t('team.permissions')}`" :value="invitee.value"
:name="'value' + index" readonly
:value="invitee.value" />
readonly </span>
<template #content="{ hide }">
<div
class="flex flex-col"
tabindex="0"
role="menu"
@keyup.escape="hide()"
>
<SmartItem
label="OWNER"
:icon="
invitee.value === 'OWNER' ? IconCircleDot : IconCircle
"
:active="invitee.value === 'OWNER'"
@click="
() => {
updateNewInviteeRole(index, 'OWNER')
newInviteeOptions[index].tippy().hide()
}
"
/>
<SmartItem
label="EDITOR"
:icon="
invitee.value === 'EDITOR' ? IconCircleDot : IconCircle
"
:active="invitee.value === 'EDITOR'"
@click="
() => {
updateNewInviteeRole(index, 'EDITOR')
newInviteeOptions[index].tippy().hide()
}
"
/> />
</span> <SmartItem
label="VIEWER"
:icon="
invitee.value === 'VIEWER' ? IconCircleDot : IconCircle
"
:active="invitee.value === 'VIEWER'"
@click="
() => {
updateNewInviteeRole(index, 'VIEWER')
newInviteeOptions[index].tippy().hide()
}
"
/>
</div>
</template> </template>
<SmartItem
label="OWNER"
:icon="
invitee.value === 'OWNER'
? 'radio_button_checked'
: 'radio_button_unchecked'
"
:active="invitee.value === 'OWNER'"
@click.native="
() => {
updateNewInviteeRole(index, 'OWNER')
newInviteeOptions[index].tippy().hide()
}
"
/>
<SmartItem
label="EDITOR"
:icon="
invitee.value === 'EDITOR'
? 'radio_button_checked'
: 'radio_button_unchecked'
"
:active="invitee.value === 'EDITOR'"
@click.native="
() => {
updateNewInviteeRole(index, 'EDITOR')
newInviteeOptions[index].tippy().hide()
}
"
/>
<SmartItem
label="VIEWER"
:icon="
invitee.value === 'VIEWER'
? 'radio_button_checked'
: 'radio_button_unchecked'
"
:active="invitee.value === 'VIEWER'"
@click.native="
() => {
updateNewInviteeRole(index, 'VIEWER')
newInviteeOptions[index].tippy().hide()
}
"
/>
</tippy> </tippy>
</span> </span>
<div class="flex"> <div class="flex">
<ButtonSecondary <ButtonSecondary
id="member" id="member"
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
:title="t('action.remove')" :title="t('action.remove')"
svg="trash" :icon="IconTrash"
color="red" color="red"
@click.native="removeNewInvitee(index)" @click="removeNewInvitee(index)"
/> />
</div> </div>
</div> </div>
<div <div
v-if="newInvites.length === 0" v-if="newInvites.length === 0"
class="flex flex-col items-center justify-center p-4 text-secondaryL ight" class="flex flex-col items-center justify-center p-4 text-secondaryL ight"
> >
<img <img
:src="`/images/states/${$colorMode.value}/add_group.svg`" :src="`/images/states/${colorMode.value}/add_group.svg`"
loading="lazy" loading="lazy"
class="inline-flex flex-col object-contain object-center w-16 h-16 mb-4" class="inline-flex flex-col object-contain object-center w-16 h-16 mb-4"
:alt="`${t('empty.invites')}`" :alt="`${t('empty.invites')}`"
/> />
<span class="pb-4 text-center"> <span class="pb-4 text-center">
{{ t("empty.invites") }} {{ t("empty.invites") }}
</span> </span>
<ButtonSecondary <ButtonSecondary
:label="t('add.new')" :label="t('add.new')"
filled filled
@click.native="addNewInvitee" @click="addNewInvitee"
/> />
</div> </div>
</div> </div>
<div <div
v-if="newInvites.length" v-if="newInvites.length"
class="flex flex-col items-start px-4 py-4 mt-4 border rounded border- dividerLight" class="flex flex-col items-start px-4 py-4 mt-4 border rounded border- dividerLight"
> >
<span <span
class="flex items-center justify-center px-2 py-1 mb-4 font-semibold border rounded-full bg-primaryDark border-divider" class="flex items-center justify-center px-2 py-1 mb-4 font-semibold border rounded-full bg-primaryDark border-divider"
> >
<i class="mr-2 text-secondaryLight material-icons">help_outline</i> <component
:is="IconHelpCircle"
class="mr-2 text-secondaryLight svg-icons"
/>
{{ t("profile.roles") }} {{ t("profile.roles") }}
</span> </span>
<p> <p>
<span class="text-secondaryLight"> <span class="text-secondaryLight">
{{ t("profile.roles_description") }} {{ t("profile.roles_description") }}
</span> </span>
</p> </p>
<ul class="mt-4 space-y-4"> <ul class="mt-4 space-y-4">
<li class="flex"> <li class="flex">
<span <span
skipping to change at line 297 skipping to change at line 299
</div> </div>
</div> </div>
</template> </template>
<template #footer> <template #footer>
<p <p
v-if="sendInvitesResult.length" v-if="sendInvitesResult.length"
class="flex justify-between flex-1 text-secondaryLight" class="flex justify-between flex-1 text-secondaryLight"
> >
<SmartAnchor <SmartAnchor
class="link" class="link"
:label="`← \xA0 ${t('team.invite_more')}`" :label="t('team.invite_more')"
@click.native=" :icon="IconArrowLeft"
@click="
() => { () => {
sendInvitesResult = [] sendInvitesResult = []
newInvites = [ newInvites = [
{ {
key: '', key: '',
value: 'VIEWRER', value: TeamMemberRole.Viewer,
}, },
] ]
} }
" "
/> />
<SmartAnchor <SmartAnchor
class="link" class="link"
:label="`${t('action.dismiss')}`" :label="`${t('action.dismiss')}`"
@click.native="hideModal" @click="hideModal"
/> />
</p> </p>
<span v-else> <span v-else>
<ButtonPrimary :label="t('team.invite')" @click.native="sendInvites" /> <ButtonPrimary :label="t('team.invite')" @click="sendInvites" />
<ButtonSecondary <ButtonSecondary :label="t('action.cancel')" @click="hideModal" />
:label="t('action.cancel')"
@click.native="hideModal"
/>
</span> </span>
</template> </template>
</SmartModal> </SmartModal>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { watch, ref, reactive, computed } from "@nuxtjs/composition-api" import { watch, ref, reactive, computed } from "vue"
import * as T from "fp-ts/Task" import * as T from "fp-ts/Task"
import * as E from "fp-ts/Either" import * as E from "fp-ts/Either"
import * as A from "fp-ts/Array" import * as A from "fp-ts/Array"
import * as O from "fp-ts/Option" import * as O from "fp-ts/Option"
import { flow, pipe } from "fp-ts/function" import { flow, pipe } from "fp-ts/function"
import { Email, EmailCodec } from "../../helpers/backend/types/Email" import { Email, EmailCodec } from "../../helpers/backend/types/Email"
import { import {
TeamInvitationAddedDocument, TeamInvitationAddedDocument,
TeamInvitationRemovedDocument, TeamInvitationRemovedDocument,
TeamMemberRole, TeamMemberRole,
GetPendingInvitesDocument, GetPendingInvitesDocument,
GetPendingInvitesQuery, GetPendingInvitesQuery,
GetPendingInvitesQueryVariables, GetPendingInvitesQueryVariables,
} from "../../helpers/backend/graphql" } from "../../helpers/backend/graphql"
import { import {
createTeamInvitation, createTeamInvitation,
CreateTeamInvitationErrors, CreateTeamInvitationErrors,
revokeTeamInvitation, revokeTeamInvitation,
} from "../../helpers/backend/mutations/TeamInvitation" } from "../../helpers/backend/mutations/TeamInvitation"
import { GQLError, useGQLQuery } from "~/helpers/backend/GQLClient" import { GQLError } from "~/helpers/backend/GQLClient"
import { useI18n, useToast } from "~/helpers/utils/composables" import { useGQLQuery } from "@composables/graphql"
import { useI18n } from "@composables/i18n"
import { useToast } from "@composables/toast"
import { useColorMode } from "~/composables/theming"
import IconTrash from "~icons/lucide/trash"
import IconPlus from "~icons/lucide/plus"
import IconHelpCircle from "~icons/lucide/help-circle"
import IconAlertTriangle from "~icons/lucide/alert-triangle"
import IconMailCheck from "~icons/lucide/mail-check"
import IconCircleDot from "~icons/lucide/circle-dot"
import IconCircle from "~icons/lucide/circle"
import IconArrowLeft from "~icons/lucide/arrow-left"
const t = useI18n() const t = useI18n()
const toast = useToast() const toast = useToast()
const colorMode = useColorMode()
const newInviteeOptions = ref<any | null>(null) const newInviteeOptions = ref<any | null>(null)
const props = defineProps({ const props = defineProps({
show: Boolean, show: Boolean,
editingTeamID: { type: String, default: null }, editingTeamID: { type: String, default: null },
}) })
const emit = defineEmits<{ const emit = defineEmits<{
(e: "hide-modal"): void (e: "hide-modal"): void
}>() }>()
const pendingInvites = useGQLQuery< const pendingInvites = useGQLQuery<
GetPendingInvitesQuery, GetPendingInvitesQuery,
GetPendingInvitesQueryVariables, GetPendingInvitesQueryVariables,
"" ""
>({ >({
query: GetPendingInvitesDocument, query: GetPendingInvitesDocument,
variables: reactive({ variables: reactive({
teamID: props.editingTeamID, teamID: props.editingTeamID,
}), }),
pollDuration: 10000,
updateSubs: computed(() => updateSubs: computed(() =>
!props.editingTeamID !props.editingTeamID
? [] ? []
: [ : [
{ {
key: 4, key: 4,
query: TeamInvitationAddedDocument, query: TeamInvitationAddedDocument,
variables: { variables: {
teamID: props.editingTeamID, teamID: props.editingTeamID,
}, },
skipping to change at line 399 skipping to change at line 415
variables: { variables: {
teamID: props.editingTeamID, teamID: props.editingTeamID,
}, },
}, },
] ]
), ),
defer: true, defer: true,
}) })
watch( watch(
() => props.show,
(show) => {
if (!show) {
pendingInvites.pause()
} else {
pendingInvites.unpause()
}
}
)
watch(
() => props.editingTeamID, () => props.editingTeamID,
() => { () => {
if (props.editingTeamID) { if (props.editingTeamID) {
pendingInvites.execute({ pendingInvites.execute({
teamID: props.editingTeamID, teamID: props.editingTeamID,
}) })
} }
} }
) )
const removeInvitee = async (id: string) => { const isLoadingIndex = ref<null | number>(null)
const removeInvitee = async (id: string, index: number) => {
isLoadingIndex.value = index
const result = await revokeTeamInvitation(id)() const result = await revokeTeamInvitation(id)()
if (E.isLeft(result)) { if (E.isLeft(result)) {
toast.error(`${t("error.something_went_wrong")}`) toast.error(`${t("error.something_went_wrong")}`)
} else { } else {
toast.success(`${t("team.member_removed")}`) toast.success(`${t("team.member_removed")}`)
} }
isLoadingIndex.value = null
} }
const newInvites = ref<Array<{ key: string; value: TeamMemberRole }>>([ const newInvites = ref<Array<{ key: string; value: TeamMemberRole }>>([
{ {
key: "", key: "",
value: TeamMemberRole.Viewer, value: TeamMemberRole.Viewer,
}, },
]) ])
const addNewInvitee = () => { const addNewInvitee = () => {
 End of changes. 32 change blocks. 
93 lines changed or deleted 123 lines changed or added

Home  |  About  |  Features  |  All  |  Newest  |  Dox  |  Diffs  |  RSS Feeds  |  Screenshots  |  Comments  |  Imprint  |  Privacy  |  HTTP(S)