refactor: composables for i18n and toast
This commit is contained in:
liyasthomas
@@ -1,14 +1,14 @@
|
||||
<template>
|
||||
<SmartModal v-if="show" :title="$t('team.invite')" @close="hideModal">
|
||||
<SmartModal v-if="show" :title="t('team.invite')" @close="hideModal">
|
||||
<template #body>
|
||||
<div v-if="sendInvitesResult.length" class="flex flex-col px-4">
|
||||
<div class="flex flex-col max-w-md justify-center items-center">
|
||||
<SmartIcon class="h-6 text-accent w-6" name="users" />
|
||||
<h3 class="my-2 text-center text-lg">
|
||||
{{ $t("team.we_sent_invite_link") }}
|
||||
{{ t("team.we_sent_invite_link") }}
|
||||
</h3>
|
||||
<p class="text-center">
|
||||
{{ $t("team.we_sent_invite_link_description") }}
|
||||
{{ t("team.we_sent_invite_link_description") }}
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
@@ -56,7 +56,7 @@
|
||||
<div v-else class="flex flex-col px-2">
|
||||
<div class="flex flex-1 justify-between items-center">
|
||||
<label for="memberList" class="pb-4 px-4">
|
||||
{{ $t("team.pending_invites") }}
|
||||
{{ t("team.pending_invites") }}
|
||||
</label>
|
||||
</div>
|
||||
<div class="divide-y divide-dividerLight border-divider border rounded">
|
||||
@@ -85,7 +85,7 @@
|
||||
py-2
|
||||
px-4
|
||||
"
|
||||
:placeholder="`${$t('team.email')}`"
|
||||
:placeholder="`${t('team.email')}`"
|
||||
:name="'param' + index"
|
||||
:value="invitee.inviteeEmail"
|
||||
readonly
|
||||
@@ -98,7 +98,7 @@
|
||||
py-2
|
||||
px-4
|
||||
"
|
||||
:placeholder="`${$t('team.permissions')}`"
|
||||
:placeholder="`${t('team.permissions')}`"
|
||||
:name="'value' + index"
|
||||
:value="
|
||||
typeof invitee.inviteeRole === 'string'
|
||||
@@ -110,7 +110,7 @@
|
||||
<div class="flex">
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('action.remove')"
|
||||
:title="t('action.remove')"
|
||||
svg="trash"
|
||||
color="red"
|
||||
@click.native="removeInvitee(invitee.id)"
|
||||
@@ -132,7 +132,7 @@
|
||||
"
|
||||
>
|
||||
<span class="text-center">
|
||||
{{ $t("empty.pending_invites") }}
|
||||
{{ t("empty.pending_invites") }}
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
@@ -140,18 +140,18 @@
|
||||
class="flex flex-col p-4 items-center"
|
||||
>
|
||||
<i class="mb-4 material-icons">help_outline</i>
|
||||
{{ $t("error.something_went_wrong") }}
|
||||
{{ t("error.something_went_wrong") }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex pt-4 flex-1 justify-between items-center">
|
||||
<label for="memberList" class="p-4">
|
||||
{{ $t("team.invite_tooltip") }}
|
||||
{{ t("team.invite_tooltip") }}
|
||||
</label>
|
||||
<div class="flex">
|
||||
<ButtonSecondary
|
||||
svg="plus"
|
||||
:label="$t('add.new')"
|
||||
:label="t('add.new')"
|
||||
filled
|
||||
@click.native="addNewInvitee"
|
||||
/>
|
||||
@@ -166,7 +166,7 @@
|
||||
<input
|
||||
v-model="invitee.key"
|
||||
class="bg-transparent flex flex-1 py-2 px-4"
|
||||
:placeholder="$t('team.email')"
|
||||
:placeholder="`${t('team.email')}`"
|
||||
:name="'invitee' + index"
|
||||
autofocus
|
||||
/>
|
||||
@@ -188,7 +188,7 @@
|
||||
py-2
|
||||
px-4
|
||||
"
|
||||
:placeholder="$t('team.permissions')"
|
||||
:placeholder="`${t('team.permissions')}`"
|
||||
:name="'value' + index"
|
||||
:value="
|
||||
typeof invitee.value === 'string'
|
||||
@@ -232,7 +232,7 @@
|
||||
<ButtonSecondary
|
||||
id="member"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('action.remove')"
|
||||
:title="t('action.remove')"
|
||||
svg="trash"
|
||||
color="red"
|
||||
@click.native="removeNewInvitee(index)"
|
||||
@@ -260,13 +260,13 @@
|
||||
w-16
|
||||
inline-flex
|
||||
"
|
||||
:alt="$t('empty.invites')"
|
||||
:alt="`${t('empty.invites')}`"
|
||||
/>
|
||||
<span class="text-center pb-4">
|
||||
{{ $t("empty.invites") }}
|
||||
{{ t("empty.invites") }}
|
||||
</span>
|
||||
<ButtonSecondary
|
||||
:label="$t('add.new')"
|
||||
:label="t('add.new')"
|
||||
filled
|
||||
@click.native="addNewInvitee"
|
||||
/>
|
||||
@@ -299,11 +299,11 @@
|
||||
"
|
||||
>
|
||||
<i class="text-secondaryLight mr-2 material-icons">help_outline</i>
|
||||
{{ $t("profile.roles") }}
|
||||
{{ t("profile.roles") }}
|
||||
</span>
|
||||
<p>
|
||||
<span class="text-secondaryLight">
|
||||
{{ $t("profile.roles_description") }}
|
||||
{{ t("profile.roles_description") }}
|
||||
</span>
|
||||
</p>
|
||||
<ul class="mt-4 space-y-4">
|
||||
@@ -318,10 +318,10 @@
|
||||
w-1/4
|
||||
"
|
||||
>
|
||||
{{ $t("profile.owner") }}
|
||||
{{ t("profile.owner") }}
|
||||
</span>
|
||||
<span class="flex flex-1">
|
||||
{{ $t("profile.owner_description") }}
|
||||
{{ t("profile.owner_description") }}
|
||||
</span>
|
||||
</li>
|
||||
<li class="flex">
|
||||
@@ -335,10 +335,10 @@
|
||||
w-1/4
|
||||
"
|
||||
>
|
||||
{{ $t("profile.editor") }}
|
||||
{{ t("profile.editor") }}
|
||||
</span>
|
||||
<span class="flex flex-1">
|
||||
{{ $t("profile.editor_description") }}
|
||||
{{ t("profile.editor_description") }}
|
||||
</span>
|
||||
</li>
|
||||
<li class="flex">
|
||||
@@ -352,10 +352,10 @@
|
||||
w-1/4
|
||||
"
|
||||
>
|
||||
{{ $t("profile.viewer") }}
|
||||
{{ t("profile.viewer") }}
|
||||
</span>
|
||||
<span class="flex flex-1">
|
||||
{{ $t("profile.viewer_description") }}
|
||||
{{ t("profile.viewer_description") }}
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -369,7 +369,7 @@
|
||||
>
|
||||
<SmartAnchor
|
||||
class="link"
|
||||
:label="`← \xA0 ${$t('team.invite_more')}`"
|
||||
:label="`← \xA0 ${t('team.invite_more')}`"
|
||||
@click.native="
|
||||
() => {
|
||||
sendInvitesResult = []
|
||||
@@ -384,14 +384,14 @@
|
||||
/>
|
||||
<SmartAnchor
|
||||
class="link"
|
||||
:label="`${$t('action.dismiss')}`"
|
||||
:label="`${t('action.dismiss')}`"
|
||||
@click.native="hideModal"
|
||||
/>
|
||||
</p>
|
||||
<span v-else>
|
||||
<ButtonPrimary :label="$t('team.invite')" @click.native="sendInvites" />
|
||||
<ButtonPrimary :label="t('team.invite')" @click.native="sendInvites" />
|
||||
<ButtonSecondary
|
||||
:label="$t('action.cancel')"
|
||||
:label="t('action.cancel')"
|
||||
@click.native="hideModal"
|
||||
/>
|
||||
</span>
|
||||
@@ -400,13 +400,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
watch,
|
||||
ref,
|
||||
reactive,
|
||||
useContext,
|
||||
computed,
|
||||
} from "@nuxtjs/composition-api"
|
||||
import { watch, ref, reactive, computed } from "@nuxtjs/composition-api"
|
||||
import * as T from "fp-ts/Task"
|
||||
import * as E from "fp-ts/Either"
|
||||
import * as A from "fp-ts/Array"
|
||||
@@ -427,12 +421,11 @@ import {
|
||||
revokeTeamInvitation,
|
||||
} from "../../helpers/backend/mutations/TeamInvitation"
|
||||
import { GQLError, useGQLQuery } from "~/helpers/backend/GQLClient"
|
||||
import { useI18n, useToast } from "~/helpers/utils/composables"
|
||||
|
||||
const {
|
||||
$toast,
|
||||
app: { i18n },
|
||||
} = useContext()
|
||||
const t = i18n.t.bind(i18n)
|
||||
const t = useI18n()
|
||||
|
||||
const toast = useToast()
|
||||
|
||||
const newInviteeOptions = ref<any | null>(null)
|
||||
|
||||
@@ -491,9 +484,9 @@ watch(
|
||||
const removeInvitee = async (id: string) => {
|
||||
const result = await revokeTeamInvitation(id)()
|
||||
if (E.isLeft(result)) {
|
||||
$toast.error(`${t("error.something_went_wrong")}`)
|
||||
toast.error(`${t("error.something_went_wrong")}`)
|
||||
} else {
|
||||
$toast.success(`${t("team.member_removed")}`)
|
||||
toast.success(`${t("team.member_removed")}`)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -553,7 +546,7 @@ const sendInvites = async () => {
|
||||
|
||||
if (O.isNone(validationResult)) {
|
||||
// Error handling for no validation
|
||||
$toast.error(`${t("error.incorrect_email")}`)
|
||||
toast.error(`${t("error.incorrect_email")}`)
|
||||
return
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user