Skip to content

Commit

Permalink
fix: add loading state and switch workspace when current workspace is…
Browse files Browse the repository at this point in the history 
… deleted
  • Loading branch information
@nivedin
nivedin committed Mar 22, 2024
1 parent d19807b commit 71e417c
Show file tree
Hide file tree
Showing 2 changed files with 151 additions and 127 deletions.
268 changes: 148 additions & 120 deletions packages/hoppscotch-common/src/components/teams/Team.vue
View file
Expand Up @@ -3,134 +3,141 @@
class="flex flex-1 flex-col rounded border border-divider"
@contextmenu.prevent="!compact ? options.tippy.show() : null"
>
<div
class="flex flex-1 items-start"
:class="
compact
? team.myRole === 'OWNER'
? 'cursor-pointer transition hover:border-dividerDark hover:bg-primaryDark focus-visible:border-dividerDark'
: 'cursor-not-allowed bg-primaryLight'
: ''
"
@click="
compact
? team.myRole === 'OWNER'
? $emit('invite-team')
: noPermission()
: ''
"
>
<div class="p-4">
<label
class="font-semibold text-secondaryDark"
:class="{ 'cursor-pointer': compact && team.myRole === 'OWNER' }"
>
{{ team.name || t("state.nothing_found") }}
</label>
<TeamsMemberStack :team-members="team.teamMembers" class="mt-4" />
</div>
<div v-if="loading" class="flex flex-col items-center justify-center p-2">
<HoppSmartSpinner class="mb-4" />
<span class="text-secondaryLight">{{ t("state.loading") }}</span>
</div>
<div v-if="!compact" class="flex flex-shrink-0 items-end justify-between">
<span>
<HoppButtonSecondary
v-if="team.myRole === 'OWNER'"
:icon="IconEdit"
class="rounded-none"
:label="t('action.edit')"
@click="
() => {
$emit('edit-team')
}
"
/>
<HoppButtonSecondary
v-if="team.myRole === 'OWNER'"
:icon="IconUserPlus"
class="rounded-none"
:label="t('team.invite')"
@click="
() => {
emit('invite-team')
}
"
/>
</span>
<span>
<tippy
ref="options"
interactive
trigger="click"
theme="popover"
:on-shown="() => tippyActions.focus()"
>
<template v-else>
<div
class="flex flex-1 items-start"
:class="
compact
? team.myRole === 'OWNER'
? 'cursor-pointer transition hover:border-dividerDark hover:bg-primaryDark focus-visible:border-dividerDark'
: 'cursor-not-allowed bg-primaryLight'
: ''
"
@click="
compact
? team.myRole === 'OWNER'
? $emit('invite-team')
: noPermission()
: ''
"
>
<div class="p-4">
<label
class="font-semibold text-secondaryDark"
:class="{ 'cursor-pointer': compact && team.myRole === 'OWNER' }"
>
{{ team.name || t("state.nothing_found") }}
</label>
<TeamsMemberStack :team-members="team.teamMembers" class="mt-4" />
</div>
</div>
<div v-if="!compact" class="flex flex-shrink-0 items-end justify-between">
<span>
<HoppButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="t('action.more')"
:icon="IconMoreVertical"
v-if="team.myRole === 'OWNER'"
:icon="IconEdit"
class="rounded-none"
:label="t('action.edit')"
@click="
() => {
$emit('edit-team')
}
"
/>
<template #content="{ hide }">
<div
ref="tippyActions"
class="flex flex-col focus:outline-none"
tabindex="0"
@keyup.e="team.myRole === 'OWNER' ? edit.$el.click() : null"
@keyup.x="
!(team.myRole === 'OWNER' && team.ownersCount == 1)
? exit.$el.click()
: null
"
@keyup.delete="
team.myRole === 'OWNER' ? deleteAction.$el.click() : null
"
@keyup.escape="hide()"
>
<HoppSmartItem
v-if="team.myRole === 'OWNER'"
ref="edit"
:icon="IconEdit"
:label="t('action.edit')"
:shortcut="['E']"
@click="
() => {
$emit('edit-team')
hide()
}
"
/>
<HoppSmartItem
v-if="!(team.myRole === 'OWNER' && team.ownersCount == 1)"
ref="exit"
:icon="IconUserX"
:label="t('team.exit')"
:shortcut="['X']"
@click="
() => {
confirmExit = true
hide()
}
<HoppButtonSecondary
v-if="team.myRole === 'OWNER'"
:icon="IconUserPlus"
class="rounded-none"
:label="t('team.invite')"
@click="
() => {
emit('invite-team')
}
"
/>
</span>
<span>
<tippy
ref="options"
interactive
trigger="click"
theme="popover"
:on-shown="() => tippyActions.focus()"
>
<HoppButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="t('action.more')"
:icon="IconMoreVertical"
/>
<template #content="{ hide }">
<div
ref="tippyActions"
class="flex flex-col focus:outline-none"
tabindex="0"
@keyup.e="team.myRole === 'OWNER' ? edit.$el.click() : null"
@keyup.x="
!(team.myRole === 'OWNER' && team.ownersCount == 1)
? exit.$el.click()
: null
"
/>
<HoppSmartItem
v-if="team.myRole === 'OWNER'"
ref="deleteAction"
:icon="IconTrash2"
:label="t('action.delete')"
:shortcut="['⌫']"
@click="
() => {
confirmRemove = true
hide()
}
@keyup.delete="
team.myRole === 'OWNER' ? deleteAction.$el.click() : null
"
/>
</div>
</template>
</tippy>
</span>
</div>
@keyup.escape="hide()"
>
<HoppSmartItem
v-if="team.myRole === 'OWNER'"
ref="edit"
:icon="IconEdit"
:label="t('action.edit')"
:shortcut="['E']"
@click="
() => {
$emit('edit-team')
hide()
}
"
/>
<HoppSmartItem
v-if="!(team.myRole === 'OWNER' && team.ownersCount == 1)"
ref="exit"
:icon="IconUserX"
:label="t('team.exit')"
:shortcut="['X']"
@click="
() => {
confirmExit = true
hide()
}
"
/>
<HoppSmartItem
v-if="team.myRole === 'OWNER'"
ref="deleteAction"
:icon="IconTrash2"
:label="t('action.delete')"
:shortcut="['⌫']"
@click="
() => {
confirmRemove = true
hide()
}
"
/>
</div>
</template>
</tippy>
</span>
</div>
</template>
<HoppSmartConfirmModal
:show="confirmRemove"
:title="t('confirm.remove_team')"
:loading-state="loading"
@hide-modal="confirmRemove = false"
@resolve="deleteTeam()"
/>
Expand Down Expand Up @@ -161,6 +168,8 @@ import IconMoreVertical from "~icons/lucide/more-vertical"
import IconUserX from "~icons/lucide/user-x"
import IconUserPlus from "~icons/lucide/user-plus"
import IconTrash2 from "~icons/lucide/trash-2"
import { useService } from "dioc/vue"
import { WorkspaceService } from "~/services/workspace.service"
const t = useI18n()
Expand All @@ -173,24 +182,43 @@ const props = defineProps<{
const emit = defineEmits<{
(e: "edit-team"): void
(e: "invite-team"): void
(e: "refetch-teams"): void
}>()
const toast = useToast()
const confirmRemove = ref(false)
const confirmExit = ref(false)
const loading = ref(false)
const workspaceService = useService(WorkspaceService)
const deleteTeam = () => {
loading.value = true
pipe(
backendDeleteTeam(props.teamID),
TE.match(
(err) => {
// TODO: Better errors ? We know the possible errors now
toast.error(`${t("error.something_went_wrong")}`)
console.error(err)
loading.value = false
},
() => {
toast.success(`${t("team.deleted")}`)
loading.value = false
emit("refetch-teams")
const currentWorkspace = workspaceService.currentWorkspace.value
// If the current workspace is the deleted team, change the workspace to personal
if (
currentWorkspace.type === "team" &&
currentWorkspace.teamID === props.teamID
) {
workspaceService.changeWorkspace({ type: "personal" })
}
}
)
)() // Tasks (and TEs) are lazy, so call the function returned
Expand Down
10 changes: 3 additions & 7 deletions packages/hoppscotch-common/src/components/teams/index.vue
View file
Expand Up @@ -4,6 +4,7 @@
<HoppButtonSecondary
:label="`${t('team.create_new')}`"
outline
:icon="IconPlus"
@click="displayModalAdd(true)"
/>
<div v-if="loading" class="flex flex-col items-center justify-center">
Expand All @@ -16,13 +17,6 @@
:alt="`${t('empty.teams')}`"
:text="`${t('empty.teams')}`"
>
<template #body>
<HoppButtonSecondary
:label="`${t('team.create_new')}`"
filled
@click="displayModalAdd(true)"
/>
</template>
</HoppSmartPlaceholder>
<div
v-else-if="!loading"
Expand All @@ -39,6 +33,7 @@
:compact="modal"
@edit-team="editTeam(team, team.id)"
@invite-team="inviteTeam(team, team.id)"
@refetch-teams="refetchTeams"
/>
</div>
<div v-if="!loading && adapterError" class="flex flex-col items-center">
Expand Down Expand Up @@ -76,6 +71,7 @@ import { useReadonlyStream } from "@composables/stream"
import { useColorMode } from "@composables/theming"
import { WorkspaceService } from "~/services/workspace.service"
import { useService } from "dioc/vue"
import IconPlus from "~icons/lucide/plus"
const t = useI18n()
Expand Down

0 comments on commit 71e417c

Please sign in to comment.