refactor: renamed emit event and removed action slot
This commit is contained in:
Joel Jacob Stephen
@@ -22,10 +22,13 @@ declare module '@vue/runtime-core' {
|
||||
HoppSmartItem: typeof import('@hoppscotch/ui')['HoppSmartItem']
|
||||
HoppSmartModal: typeof import('@hoppscotch/ui')['HoppSmartModal']
|
||||
HoppSmartPicture: typeof import('@hoppscotch/ui')['HoppSmartPicture']
|
||||
HoppSmartPlaceholder: typeof import('@hoppscotch/ui')['HoppSmartPlaceholder']
|
||||
HoppSmartSpinner: typeof import('@hoppscotch/ui')['HoppSmartSpinner']
|
||||
HoppSmartTab: typeof import('@hoppscotch/ui')['HoppSmartTab']
|
||||
HoppSmartTable: typeof import('@hoppscotch/ui')['HoppSmartTable']
|
||||
IconLucideArrowLeft: typeof import('~icons/lucide/arrow-left')['default']
|
||||
IconLucideChevronDown: typeof import('~icons/lucide/chevron-down')['default']
|
||||
IconLucideHelpCircle: typeof import('~icons/lucide/help-circle')['default']
|
||||
IconLucideInbox: typeof import('~icons/lucide/inbox')['default']
|
||||
IconLucideUser: typeof import('~icons/lucide/user')['default']
|
||||
TeamsAdd: typeof import('./components/teams/Add.vue')['default']
|
||||
|
||||
@@ -31,35 +31,34 @@
|
||||
<HoppSmartTable
|
||||
:list="newTeamsList"
|
||||
:headings="headings"
|
||||
@goToDetails="goToTeamDetails"
|
||||
cell-styles="px-6 py-3"
|
||||
@openRowContent="goToTeamDetails"
|
||||
:modify-col-names="['action']"
|
||||
cell-styles="px-6 py-1"
|
||||
>
|
||||
<template #action="{ item }">
|
||||
<td>
|
||||
<div class="relative">
|
||||
<tippy interactive trigger="click" theme="popover">
|
||||
<HoppButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:icon="IconMoreHorizontal"
|
||||
/>
|
||||
<template #content="{ hide }">
|
||||
<div
|
||||
ref="tippyActions"
|
||||
class="flex flex-col focus:outline-none"
|
||||
tabindex="0"
|
||||
@keyup.escape="hide()"
|
||||
>
|
||||
<HoppSmartItem
|
||||
:icon="IconTrash"
|
||||
:label="t('teams.delete_team')"
|
||||
class="!hover:bg-red-600 w-full"
|
||||
@click="deleteTeam(item)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</tippy>
|
||||
</div>
|
||||
</td>
|
||||
<div class="relative">
|
||||
<tippy interactive trigger="click" theme="popover">
|
||||
<HoppButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:icon="IconMoreHorizontal"
|
||||
/>
|
||||
<template #content="{ hide }">
|
||||
<div
|
||||
ref="tippyActions"
|
||||
class="flex flex-col focus:outline-none"
|
||||
tabindex="0"
|
||||
@keyup.escape="hide()"
|
||||
>
|
||||
<HoppSmartItem
|
||||
:icon="IconTrash"
|
||||
:label="t('teams.delete_team')"
|
||||
class="!hover:bg-red-600 w-full"
|
||||
@click="deleteTeam(item)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</tippy>
|
||||
</div>
|
||||
</template>
|
||||
</HoppSmartTable>
|
||||
</div>
|
||||
@@ -150,6 +149,7 @@ const newTeamsList = computed(() => {
|
||||
id: team.id,
|
||||
name: team.name,
|
||||
members: team.members.length,
|
||||
action: '',
|
||||
};
|
||||
});
|
||||
});
|
||||
|
||||
@@ -37,7 +37,7 @@
|
||||
:list="newUsersList"
|
||||
:headings="headings"
|
||||
:modify-col-names="colNames"
|
||||
@goToDetails="goToUserDetails"
|
||||
@openRowContent="goToUserDetails"
|
||||
>
|
||||
<template #name="{ item }">
|
||||
<div>
|
||||
@@ -49,9 +49,7 @@
|
||||
{{ item.name }}
|
||||
</span>
|
||||
|
||||
<span
|
||||
v-if="item.name.length === 0 && !isUserAdmin(item)"
|
||||
class="mx-auto justify-center"
|
||||
<span v-if="item.name.length === 0 && !isUserAdmin(item)"
|
||||
>-</span
|
||||
>
|
||||
|
||||
@@ -85,48 +83,46 @@
|
||||
</template>
|
||||
|
||||
<template #action="{ item }">
|
||||
<td>
|
||||
<div class="relative">
|
||||
<span>
|
||||
<tippy interactive trigger="click" theme="popover">
|
||||
<HoppButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:icon="IconMoreHorizontal"
|
||||
/>
|
||||
<template #content="{ hide }">
|
||||
<div
|
||||
ref="tippyActions"
|
||||
class="flex flex-col focus:outline-none"
|
||||
tabindex="0"
|
||||
@keyup.escape="hide()"
|
||||
>
|
||||
<HoppSmartItem
|
||||
v-if="!isUserAdmin(item)"
|
||||
:icon="IconUserCheck"
|
||||
:label="t('users.make_admin')"
|
||||
class="!hover:bg-emerald-600"
|
||||
@click="makeUserAdmin(item)"
|
||||
/>
|
||||
<HoppSmartItem
|
||||
v-else
|
||||
:icon="IconUserMinus"
|
||||
:label="t('users.remove_admin_status')"
|
||||
class="!hover:bg-emerald-600"
|
||||
@click="makeAdminToUser(item)"
|
||||
/>
|
||||
<HoppSmartItem
|
||||
v-if="!isUserAdmin(item)"
|
||||
:icon="IconTrash"
|
||||
:label="t('users.delete_user')"
|
||||
class="!hover:bg-red-600"
|
||||
@click="deleteUser(item)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</tippy>
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<div class="relative">
|
||||
<span>
|
||||
<tippy interactive trigger="click" theme="popover">
|
||||
<HoppButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:icon="IconMoreHorizontal"
|
||||
/>
|
||||
<template #content="{ hide }">
|
||||
<div
|
||||
ref="tippyActions"
|
||||
class="flex flex-col focus:outline-none"
|
||||
tabindex="0"
|
||||
@keyup.escape="hide()"
|
||||
>
|
||||
<HoppSmartItem
|
||||
v-if="!isUserAdmin(item)"
|
||||
:icon="IconUserCheck"
|
||||
:label="t('users.make_admin')"
|
||||
class="!hover:bg-emerald-600"
|
||||
@click="makeUserAdmin(item)"
|
||||
/>
|
||||
<HoppSmartItem
|
||||
v-else
|
||||
:icon="IconUserMinus"
|
||||
:label="t('users.remove_admin_status')"
|
||||
class="!hover:bg-emerald-600"
|
||||
@click="makeAdminToUser(item)"
|
||||
/>
|
||||
<HoppSmartItem
|
||||
v-if="!isUserAdmin(item)"
|
||||
:icon="IconTrash"
|
||||
:label="t('users.delete_user')"
|
||||
class="!hover:bg-red-600"
|
||||
@click="deleteUser(item)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</tippy>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
</HoppSmartTable>
|
||||
</div>
|
||||
@@ -225,6 +221,7 @@ const newUsersList = computed(() => {
|
||||
name: user.displayName ?? '',
|
||||
email: user.email ?? '',
|
||||
createdOn: user.createdOn,
|
||||
action: '',
|
||||
};
|
||||
});
|
||||
});
|
||||
@@ -247,7 +244,7 @@ const headings = [
|
||||
];
|
||||
|
||||
//Names of the columns to be modified by this component
|
||||
const colNames = ['name', 'createdOn'];
|
||||
const colNames = ['name', 'createdOn', 'action'];
|
||||
|
||||
// Send Invitation through Email
|
||||
const sendInvitation = useMutation(InviteNewUserDocument);
|
||||
|
||||
@@ -21,27 +21,26 @@
|
||||
<td
|
||||
v-for="(data, colIndex) in item"
|
||||
:key="colIndex"
|
||||
@click="$emit('goToDetails', item)"
|
||||
@click="$emit('openRowContent', item)"
|
||||
class="max-w-40"
|
||||
:class="cellStyles"
|
||||
>
|
||||
<!-- Custom implementation of the particular column -->
|
||||
<div class="flex items-center">
|
||||
<div v-if="modifyColNames?.includes(colIndex.toString())">
|
||||
<slot :name="colIndex.toString()" :item="item"></slot>
|
||||
</div>
|
||||
|
||||
<!-- Generic implementation of the column -->
|
||||
<div v-else class="flex flex-col truncate text-center">
|
||||
<span v-if="data" class="truncate">
|
||||
{{ data }}
|
||||
</span>
|
||||
<span v-else class=""> - </span>
|
||||
</div>
|
||||
<div v-if="modifyColNames?.includes(colIndex.toString())">
|
||||
<slot :name="colIndex.toString()" :item="item"></slot>
|
||||
</div>
|
||||
|
||||
<!-- Generic implementation of the column -->
|
||||
<div v-else class="flex flex-col truncate">
|
||||
<span v-if="data" class="truncate">
|
||||
{{ data }}
|
||||
</span>
|
||||
<span v-else class=""> - </span>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<slot name="action" :item="item"></slot>
|
||||
<!-- <slot name="action" :item="item"></slot> -->
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@@ -63,6 +62,6 @@ defineProps<{
|
||||
}>()
|
||||
|
||||
defineEmits<{
|
||||
(event: "goToDetails", item: Item): void
|
||||
(event: "openRowContent", item: Item): void
|
||||
}>()
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user