btwedutech/hoppscotch
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 6 Wiki Activity

refactor: renamed emit event and removed action slot

Browse Source
This commit is contained in:
Joel Jacob Stephen
2023-07-20 21:51:08 +05:30
parent 24f32d79b3
commit d5e4211347
4 changed files with 87 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
packages/hoppscotch-sh-admin/src/components.d.ts vendored
View File

@@ -22,10 +22,13 @@ declare module '@vue/runtime-core' {
HoppSmartItem: typeof import('@hoppscotch/ui')['HoppSmartItem'] HoppSmartItem: typeof import('@hoppscotch/ui')['HoppSmartItem']
HoppSmartModal: typeof import('@hoppscotch/ui')['HoppSmartModal'] HoppSmartModal: typeof import('@hoppscotch/ui')['HoppSmartModal']
HoppSmartPicture: typeof import('@hoppscotch/ui')['HoppSmartPicture'] HoppSmartPicture: typeof import('@hoppscotch/ui')['HoppSmartPicture']
HoppSmartPlaceholder: typeof import('@hoppscotch/ui')['HoppSmartPlaceholder']
HoppSmartSpinner: typeof import('@hoppscotch/ui')['HoppSmartSpinner'] HoppSmartSpinner: typeof import('@hoppscotch/ui')['HoppSmartSpinner']
HoppSmartTab: typeof import('@hoppscotch/ui')['HoppSmartTab']
HoppSmartTable: typeof import('@hoppscotch/ui')['HoppSmartTable'] HoppSmartTable: typeof import('@hoppscotch/ui')['HoppSmartTable']
IconLucideArrowLeft: typeof import('~icons/lucide/arrow-left')['default'] IconLucideArrowLeft: typeof import('~icons/lucide/arrow-left')['default']
IconLucideChevronDown: typeof import('~icons/lucide/chevron-down')['default'] IconLucideChevronDown: typeof import('~icons/lucide/chevron-down')['default']
IconLucideHelpCircle: typeof import('~icons/lucide/help-circle')['default']
IconLucideInbox: typeof import('~icons/lucide/inbox')['default'] IconLucideInbox: typeof import('~icons/lucide/inbox')['default']
IconLucideUser: typeof import('~icons/lucide/user')['default'] IconLucideUser: typeof import('~icons/lucide/user')['default']
TeamsAdd: typeof import('./components/teams/Add.vue')['default'] TeamsAdd: typeof import('./components/teams/Add.vue')['default']

54
packages/hoppscotch-sh-admin/src/pages/teams/index.vue
View File

@@ -31,35 +31,34 @@
<HoppSmartTable <HoppSmartTable
:list="newTeamsList" :list="newTeamsList"
:headings="headings" :headings="headings"
@goToDetails="goToTeamDetails" @openRowContent="goToTeamDetails"
cell-styles="px-6 py-3" :modify-col-names="['action']"
cell-styles="px-6 py-1"
> >
<template #action="{ item }"> <template #action="{ item }">
<td> <div class="relative">
<div class="relative"> <tippy interactive trigger="click" theme="popover">
<tippy interactive trigger="click" theme="popover"> <HoppButtonSecondary
<HoppButtonSecondary v-tippy="{ theme: 'tooltip' }"
v-tippy="{ theme: 'tooltip' }" :icon="IconMoreHorizontal"
:icon="IconMoreHorizontal" />
/> <template #content="{ hide }">
<template #content="{ hide }"> <div
<div ref="tippyActions"
ref="tippyActions" class="flex flex-col focus:outline-none"
class="flex flex-col focus:outline-none" tabindex="0"
tabindex="0" @keyup.escape="hide()"
@keyup.escape="hide()" >
> <HoppSmartItem
<HoppSmartItem :icon="IconTrash"
:icon="IconTrash" :label="t('teams.delete_team')"
:label="t('teams.delete_team')" class="!hover:bg-red-600 w-full"
class="!hover:bg-red-600 w-full" @click="deleteTeam(item)"
@click="deleteTeam(item)" />
/> </div>
</div> </template>
</template> </tippy>
</tippy> </div>
</div>
</td>
</template> </template>
</HoppSmartTable> </HoppSmartTable>
</div> </div>
@@ -150,6 +149,7 @@ const newTeamsList = computed(() => {
id: team.id, id: team.id,
name: team.name, name: team.name,
members: team.members.length, members: team.members.length,
action: '',
}; };
}); });
}); });

91
packages/hoppscotch-sh-admin/src/pages/users/index.vue
View File

@@ -37,7 +37,7 @@
:list="newUsersList" :list="newUsersList"
:headings="headings" :headings="headings"
:modify-col-names="colNames" :modify-col-names="colNames"
@goToDetails="goToUserDetails" @openRowContent="goToUserDetails"
> >
<template #name="{ item }"> <template #name="{ item }">
<div> <div>
@@ -49,9 +49,7 @@
{{ item.name }} {{ item.name }}
</span> </span>
<span <span v-if="item.name.length === 0 && !isUserAdmin(item)"
v-if="item.name.length === 0 && !isUserAdmin(item)"
class="mx-auto justify-center"
>-</span >-</span
> >
@@ -85,48 +83,46 @@
</template> </template>
<template #action="{ item }"> <template #action="{ item }">
<td> <div class="relative">
<div class="relative"> <span>
<span> <tippy interactive trigger="click" theme="popover">
<tippy interactive trigger="click" theme="popover"> <HoppButtonSecondary
<HoppButtonSecondary v-tippy="{ theme: 'tooltip' }"
v-tippy="{ theme: 'tooltip' }" :icon="IconMoreHorizontal"
:icon="IconMoreHorizontal" />
/> <template #content="{ hide }">
<template #content="{ hide }"> <div
<div ref="tippyActions"
ref="tippyActions" class="flex flex-col focus:outline-none"
class="flex flex-col focus:outline-none" tabindex="0"
tabindex="0" @keyup.escape="hide()"
@keyup.escape="hide()" >
> <HoppSmartItem
<HoppSmartItem v-if="!isUserAdmin(item)"
v-if="!isUserAdmin(item)" :icon="IconUserCheck"
:icon="IconUserCheck" :label="t('users.make_admin')"
:label="t('users.make_admin')" class="!hover:bg-emerald-600"
class="!hover:bg-emerald-600" @click="makeUserAdmin(item)"
@click="makeUserAdmin(item)" />
/> <HoppSmartItem
<HoppSmartItem v-else
v-else :icon="IconUserMinus"
:icon="IconUserMinus" :label="t('users.remove_admin_status')"
:label="t('users.remove_admin_status')" class="!hover:bg-emerald-600"
class="!hover:bg-emerald-600" @click="makeAdminToUser(item)"
@click="makeAdminToUser(item)" />
/> <HoppSmartItem
<HoppSmartItem v-if="!isUserAdmin(item)"
v-if="!isUserAdmin(item)" :icon="IconTrash"
:icon="IconTrash" :label="t('users.delete_user')"
:label="t('users.delete_user')" class="!hover:bg-red-600"
class="!hover:bg-red-600" @click="deleteUser(item)"
@click="deleteUser(item)" />
/> </div>
</div> </template>
</template> </tippy>
</tippy> </span>
</span> </div>
</div>
</td>
</template> </template>
</HoppSmartTable> </HoppSmartTable>
</div> </div>
@@ -225,6 +221,7 @@ const newUsersList = computed(() => {
name: user.displayName ?? '', name: user.displayName ?? '',
email: user.email ?? '', email: user.email ?? '',
createdOn: user.createdOn, createdOn: user.createdOn,
action: '',
}; };
}); });
}); });
@@ -247,7 +244,7 @@ const headings = [
]; ];
//Names of the columns to be modified by this component //Names of the columns to be modified by this component
const colNames = ['name', 'createdOn']; const colNames = ['name', 'createdOn', 'action'];
// Send Invitation through Email // Send Invitation through Email
const sendInvitation = useMutation(InviteNewUserDocument); const sendInvitation = useMutation(InviteNewUserDocument);

27
packages/hoppscotch-ui/src/components/smart/Table.vue
View File

@@ -21,27 +21,26 @@
<td <td
v-for="(data, colIndex) in item" v-for="(data, colIndex) in item"
:key="colIndex" :key="colIndex"
@click="$emit('goToDetails', item)" @click="$emit('openRowContent', item)"
class="max-w-40" class="max-w-40"
:class="cellStyles" :class="cellStyles"
> >
<!-- Custom implementation of the particular column --> <!-- 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-if="modifyColNames?.includes(colIndex.toString())">
<div v-else class="flex flex-col truncate text-center"> <slot :name="colIndex.toString()" :item="item"></slot>
<span v-if="data" class="truncate"> </div>
{{ data }}
</span> <!-- Generic implementation of the column -->
<span v-else class=""> - </span> <div v-else class="flex flex-col truncate">
</div> <span v-if="data" class="truncate">
{{ data }}
</span>
<span v-else class=""> - </span>
</div> </div>
</td> </td>
<slot name="action" :item="item"></slot> <!-- <slot name="action" :item="item"></slot> -->
</tr> </tr>
</tbody> </tbody>
</table> </table>
@@ -63,6 +62,6 @@ defineProps<{
}>() }>()
defineEmits<{ defineEmits<{
(event: "goToDetails", item: Item): void (event: "openRowContent", item: Item): void
}>() }>()
</script> </script>