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

refactor: replaced table with hoppsmarttable in invited users page and code cleanup

Browse Source
This commit is contained in:
Joel Jacob Stephen
2023-07-07 10:30:56 +05:30
parent dfabf7e8bc
commit 55c191305c
8 changed files with 126 additions and 518 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
packages/hoppscotch-sh-admin/locales/en.json
View File

@@ -96,9 +96,10 @@
"load_info_error": "Unable to load team info", "load_info_error": "Unable to load team info",
"load_list_error": "Unable to Load Teams List", "load_list_error": "Unable to Load Teams List",
"members": "Number of members", "members": "Number of members",
"name": "Team name", "name": "Team Name",
"no_members": "No members in this team. Add members to this team to collaborate", "no_members": "No members in this team. Add members to this team to collaborate",
"no_pending_invites": "No pending invites", "no_pending_invites": "No pending invites",
"no_teams": "No teams found",
"pending_invites": "Pending invites", "pending_invites": "Pending invites",
"remove": "Remove", "remove": "Remove",
"rename": "Rename", "rename": "Rename",

102
packages/hoppscotch-sh-admin/src/components/teams/Table.vue
View File

@@ -1,102 +0,0 @@
<template>
<table class="w-full">
<thead>
<tr class="text-secondary border-b border-dividerDark text-sm text-left">
<th class="px-3 pb-3">Team ID</th>
<th class="px-3 pb-3">Team Name</th>
<th class="px-3 pb-3">Number of Members</th>
<th class="px-3 pb-3"></th>
</tr>
</thead>
<tbody class="divide-y divide-divider">
<tr v-if="teamList.length === 0">
<div class="py-6 px-3">No teams found ...</div>
</tr>
<tr
v-else
v-for="team in teamList"
:key="team.id"
class="text-secondaryDark hover:bg-divider hover:cursor-pointer rounded-xl"
>
<td
@click="$emit('go-to-team-details', team.id)"
class="py-4 px-3 max-w-50"
>
<div class="flex">
<span class="truncate">
{{ team.id }}
</span>
</div>
</td>
<td
@click="$emit('go-to-team-details', team.id)"
class="py-4 px-3 min-w-80"
>
<span v-if="team.name" class="flex items-center ml-4 truncate">
{{ team.name }}
</span>
<span v-else class="flex items-center ml-4"> (Unnamed team) </span>
</td>
<td @click="$emit('go-to-team-details', team.id)" class="py-4 px-3">
<span class="ml-7">
{{ team.members?.length }}
</span>
</td>
<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="'Delete Team'"
class="w-full"
@click="
() => {
$emit('delete-team', team.id);
hide();
}
"
/>
</div>
</template>
</tippy>
</div>
</td>
</tr>
</tbody>
</table>
</template>
<script setup lang="ts">
import { TippyComponent } from 'vue-tippy';
import { ref } from 'vue';
import IconTrash from '~icons/lucide/trash';
import IconMoreHorizontal from '~icons/lucide/more-horizontal';
import { TeamListQuery } from '~/helpers/backend/graphql';
// Template refs
const tippyActions = ref<TippyComponent | null>(null);
defineProps<{
teamList: TeamListQuery['admin']['allTeams'];
}>();
defineEmits<{
(event: 'go-to-team-details', teamID: string): void;
(event: 'delete-team', teamID: string): void;
}>();
</script>

173
packages/hoppscotch-sh-admin/src/components/users/Table.vue
View File

@@ -1,173 +0,0 @@
<template>
<div
class="overflow-hidden rounded-md border border-dividerDark shadow-md m-5"
>
<table class="w-full">
<thead>
<tr
class="text-secondary border-b border-dividerDark text-sm text-left bg-primaryLight"
>
<th class="px-6 py-3">{{ t('users.id') }}</th>
<th class="px-6 py-3">{{ t('users.name') }}</th>
<th class="px-6 py-3">{{ t('users.email') }}</th>
<th class="px-6 py-3">{{ t('users.date') }}</th>
<th class="px-6 py-3"></th>
</tr>
</thead>
<tbody class="divide-y divide-divider">
<tr
v-for="user in usersList"
:key="user.uid"
class="text-secondaryDark hover:bg-divider hover:cursor-pointer rounded-xl"
>
<td
@click="$emit('goToUserDetails', user.uid)"
class="py-1 px-3 max-w-40"
>
<div class="flex">
<span class="truncate">
{{ user.uid }}
</span>
</div>
</td>
<td @click="$emit('goToUserDetails', user.uid)" class="py-2 px-3">
<div v-if="user.displayName" class="flex items-center space-x-3">
<span>
{{ user.displayName }}
</span>
<span
v-if="user.isAdmin"
class="text-xs font-medium px-3 py-0.5 rounded-full bg-green-900 text-green-300"
>
{{ t('users.admin') }}
</span>
</div>
<div v-else class="flex items-center space-x-3">
<span> {{ t('users.unnamed') }} </span>
<span
v-if="user.isAdmin"
class="text-xs font-medium px-3 py-0.5 rounded-full bg-green-900 text-green-300"
>
{{ t('users.admin') }}
</span>
</div>
</td>
<td @click="$emit('goToUserDetails', user.uid)" class="py-2 px-3">
<span>
{{ user.email }}
</span>
</td>
<td @click="$emit('goToUserDetails', user.uid)" class="py-2 px-3">
<div class="flex items-center">
<div class="flex flex-col">
{{ getCreatedDate(user.createdOn) }}
<div class="text-gray-400 text-tiny">
{{ getCreatedTime(user.createdOn) }}
</div>
</div>
</div>
</td>
<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="!user.isAdmin"
:icon="IconUserCheck"
:label="'Make Admin'"
class="!hover:bg-emerald-600"
@click="
() => {
$emit('makeUserAdmin', user.uid);
hide();
}
"
/>
<HoppSmartItem
v-else
:icon="IconUserMinus"
:label="'Remove Admin Status'"
class="!hover:bg-emerald-600"
@click="
() => {
$emit('makeAdminToUser', user.uid);
hide();
}
"
/>
<HoppSmartItem
v-if="!user.isAdmin"
:icon="IconTrash"
:label="'Delete User'"
class="!hover:bg-red-600"
@click="
() => {
$emit('deleteUser', user.uid);
hide();
}
"
/>
</div>
</template>
</tippy>
</span>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</template>
<script lang="ts" setup>
import { format } from 'date-fns';
import { ref } from 'vue';
import IconTrash from '~icons/lucide/trash';
import IconUserMinus from '~icons/lucide/user-minus';
import IconUserCheck from '~icons/lucide/user-check';
import IconMoreHorizontal from '~icons/lucide/more-horizontal';
import { UsersListQuery } from '~/helpers/backend/graphql';
import { TippyComponent } from 'vue-tippy';
import { useI18n } from '~/composables/i18n';
const t = useI18n();
defineProps<{
usersList: UsersListQuery['admin']['allUsers'];
}>();
defineEmits<{
(event: 'goToUserDetails', uid: string): void;
(event: 'makeUserAdmin', uid: string): void;
(event: 'makeAdminToUser', uid: string): void;
(event: 'deleteUser', uid: string): void;
}>();
// Get Proper Date Formats
const getCreatedDate = (date: string) => format(new Date(date), 'dd-MM-yyyy');
const getCreatedTime = (date: string) => format(new Date(date), 'hh:mm a');
// Template refs
const tippyActions = ref<TippyComponent | null>(null);
</script>
<style scoped>
.tippy-box[data-theme~='popover'] .tippy-content {
padding: 0;
}
</style>

117
packages/hoppscotch-sh-admin/src/components/users/Tables.vue
View File

@@ -1,117 +0,0 @@
<template>
<div
class="overflow-hidden rounded-md border border-dividerDark shadow-md m-5"
>
<table class="w-full">
<thead>
<tr
class="text-secondary border-b border-dividerDark text-sm text-left bg-primaryLight"
>
<th v-for="title in headings" scope="col" class="px-6 py-3">
{{ title }}
</th>
</tr>
</thead>
<tbody class="divide-y divide-divider">
<tr
v-for="item in list"
:key="item.id"
class="text-secondaryDark hover:bg-divider hover:cursor-pointer rounded-xl"
:class="xBorder ? 'divide-x divide-divider' : ''"
>
<td
v-for="data in item"
@click="$emit('goToDetails', item)"
class="max-w-40"
:class="padding"
>
<div class="flex">
<span class="truncate">
{{ data }}
</span>
</div>
</td>
<!-- <td @click="$emit('goToUserDetails', user.uid)" class="py-2 px-3">
<div v-if="user.displayName" class="flex items-center space-x-3">
<span>
{{ user.displayName }}
</span>
<span
v-if="user.isAdmin"
class="text-xs font-medium px-3 py-0.5 rounded-full bg-green-900 text-green-300"
>
Admin
</span>
</div>
<div v-else class="flex items-center space-x-3">
<span> (Unnamed user) </span>
<span
v-if="user.isAdmin"
class="text-xs font-medium px-3 py-0.5 rounded-full bg-green-900 text-green-300"
>
Admin
</span>
</div>
</td> -->
<slot name="action" :team="item"></slot>
<!-- <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="'Delete Team'"
class="!hover:bg-red-600 w-full"
:class="itemStyle"
@click="$emit('id', item)"
/>
</div>
</template>
</tippy>
</div>
</td> -->
</tr>
</tbody>
</table>
</div>
</template>
<script lang="ts" setup>
import IconTrash from '~icons/lucide/trash';
import IconMoreHorizontal from '~icons/lucide/more-horizontal';
const props = defineProps<{
xBorder: Boolean;
list: [];
headings: [];
padding: string;
itemStyle: string;
}>();
defineEmits<{
(event: 'goToDetails', uid: string): void;
(event: 'id', uid: string): void;
(event: 'makeUserAdmin', uid: string): void;
(event: 'makeAdminToUser', uid: string): void;
(event: 'deleteUser', uid: string): void;
}>();
</script>
<style scoped>
.tippy-box[data-theme~='popover'] .tippy-content {
padding: 0;
}
</style>

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

@@ -13,7 +13,7 @@
<div class="overflow-x-auto"> <div class="overflow-x-auto">
<div <div
v-if="fetching && !error && teamList.length === 0" v-if="fetching && !error && teamsList.length === 0"
class="flex justify-center" class="flex justify-center"
> >
<HoppSmartSpinner /> <HoppSmartSpinner />
@@ -21,13 +21,18 @@
<div v-else-if="error">{{ t('teams.load_list_error') }}</div> <div v-else-if="error">{{ t('teams.load_list_error') }}</div>
<div v-else-if="teamsList.length == 0" class="px-2">
<p class="text-lg">
{{ t('teams.no_teams') }}
</p>
</div>
<HoppSmartTable <HoppSmartTable
v-else v-else
:list="teamList" :list="newTeamsList"
:headings="headings" :headings="headings"
@goToDetails="goToTeamDetails" @goToDetails="goToTeamDetails"
padding="px-6 py-3" padding="px-6 py-3"
item-style="!hover:bg-red-600"
> >
<template #action="{ item }"> <template #action="{ item }">
<td> <td>
@@ -59,7 +64,7 @@
</HoppSmartTable> </HoppSmartTable>
<div <div
v-if="hasNextPage && teamList.length >= teamsPerPage" v-if="hasNextPage && teamsList.length >= teamsPerPage"
class="flex justify-center my-5 px-3 py-2 cursor-pointer font-semibold rounded-3xl bg-dividerDark hover:bg-divider transition mx-auto w-38 text-secondaryDark" class="flex justify-center my-5 px-3 py-2 cursor-pointer font-semibold rounded-3xl bg-dividerDark hover:bg-divider transition mx-auto w-38 text-secondaryDark"
@click="fetchNextTeams" @click="fetchNextTeams"
> >
@@ -127,7 +132,7 @@ const {
error, error,
goToNextPage: fetchNextTeams, goToNextPage: fetchNextTeams,
refetch, refetch,
list: list, list: teamsList,
hasNextPage, hasNextPage,
} = usePagedQuery( } = usePagedQuery(
TeamListDocument, TeamListDocument,
@@ -137,8 +142,9 @@ const {
{ cursor: undefined, take: teamsPerPage } { cursor: undefined, take: teamsPerPage }
); );
const teamList = computed(() => { // The new teams list that is used in the table
return list.value.map((team) => { const newTeamsList = computed(() => {
return teamsList.value.map((team) => {
return { return {
id: team.id || '', id: team.id || '',
name: team.name || '', name: team.name || '',
@@ -147,7 +153,8 @@ const teamList = computed(() => {
}); });
}); });
const headings = ['Team ID', 'Team Name', 'Number of Members', '']; // Headers that are used in the table
const headings = [t('teams.id'), t('teams.name'), t('teams.members'), ''];
// Create Team // Create Team
const createTeamMutation = useMutation(CreateTeamDocument); const createTeamMutation = useMutation(CreateTeamDocument);
@@ -216,7 +223,7 @@ const deleteTeamMutation = async (id: string | null) => {
if (result.error) { if (result.error) {
toast.error(`${t('state.delete_team_failure')}`); toast.error(`${t('state.delete_team_failure')}`);
} else { } else {
list.value = list.value.filter((team) => team.id !== id); teamsList.value = teamsList.value.filter((team) => team.id !== id);
toast.success(`${t('state.delete_team_success')}`); toast.success(`${t('state.delete_team_success')}`);
} }
}); });

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

@@ -31,27 +31,16 @@
<div v-else-if="error">{{ t('users.load_list_error') }}</div> <div v-else-if="error">{{ t('users.load_list_error') }}</div>
<!-- <UsersTable
v-else-if="usersList.length >= 1"
:usersList="usersList"
:fetching="fetching"
:error="error"
@goToUserDetails="goToUserDetails"
@makeUserAdmin="makeUserAdmin"
@makeAdminToUser="makeAdminToUser"
@deleteUser="deleteUser"
/> -->
<HoppSmartTable <HoppSmartTable
v-else-if="usersList.length >= 1" v-else-if="usersList.length >= 1"
padding="px-6 py-3" padding="px-6 py-3"
:list="newUsersList" :list="newUsersList"
:headings="headings" :headings="headings"
@goToDetails="goToUserDetails" @goToDetails="goToUserDetails"
badge-name="Admin" :badge-name="t('users.admin')"
:badge-row-index="adminUsers" :badge-row-index="adminUsersIndexes"
badge-col-name="name" badge-col-name="name"
:subtitle="subtitle" :subtitles="subtitles"
> >
<template #action="{ item }"> <template #action="{ item }">
<td> <td>
@@ -140,7 +129,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { format } from 'date-fns'; import { format } from 'date-fns';
import { computed, onMounted, reactive, ref, watch } from 'vue'; import { computed, reactive, ref, watch } from 'vue';
import { useMutation } from '@urql/vue'; import { useMutation } from '@urql/vue';
import { import {
InviteNewUserDocument, InviteNewUserDocument,
@@ -148,6 +137,7 @@ import {
RemoveUserByAdminDocument, RemoveUserByAdminDocument,
RemoveUserAsAdminDocument, RemoveUserAsAdminDocument,
UsersListDocument, UsersListDocument,
UsersListQuery,
} from '../../helpers/backend/graphql'; } from '../../helpers/backend/graphql';
import { usePagedQuery } from '~/composables/usePagedQuery'; import { usePagedQuery } from '~/composables/usePagedQuery';
import { useRoute, useRouter } from 'vue-router'; import { useRoute, useRouter } from 'vue-router';
@@ -168,12 +158,6 @@ const t = useI18n();
const toast = useToast(); const toast = useToast();
const isUserAdmin = (selectedUser: any) => {
return usersList.value.filter((user) => {
return user.uid === selectedUser.uid;
})[0].isAdmin;
};
// Get Paginated Results of all the users in the infra // Get Paginated Results of all the users in the infra
const usersPerPage = 20; const usersPerPage = 20;
const { const {
@@ -190,6 +174,7 @@ const {
{ cursor: undefined, take: usersPerPage } { cursor: undefined, take: usersPerPage }
); );
// The new users list that is used in the table
const newUsersList = computed(() => { const newUsersList = computed(() => {
return usersList.value.map((user) => { return usersList.value.map((user) => {
return { return {
@@ -201,32 +186,37 @@ const newUsersList = computed(() => {
}); });
}); });
const headings = ['User UID', 'Name', 'Email', 'Created On', '']; const isUserAdmin = (selectedUser: UsersListQuery['admin']['allUsers']) => {
return usersList.value.filter((user) => {
return user.uid === selectedUser.uid;
})[0].isAdmin;
};
const adminUsers = computed(() => { // Returns index of all the admin users
return usersList.value.map((user, index) => { const adminUsersIndexes = computed(() =>
usersList.value.map((user, index) => {
if (user.isAdmin) { if (user.isAdmin) {
return index; return index;
} }
}); })
}); );
const createdTime = computed(() => { // Returns created time of all the users
return usersList.value.map((user) => { const createdTime = computed(() =>
return getCreatedTime(user.createdOn); usersList.value.map((user) => getCreatedTime(user.createdOn))
}); );
});
onMounted(() => { // Headers that are used in the table
console.log(createdTime); const headings = [
t('users.id'),
t('users.name'),
t('users.email'),
t('users.date'),
'',
];
console.log(createdTime.value); // Subtitles that are used in the table
for (var item in createdTime.value) { const subtitles = reactive([
console.log(item);
}
});
const subtitle = reactive([
{ {
colName: 'createdOn', colName: 'createdOn',
subtitle: createdTime, subtitle: createdTime,

104
packages/hoppscotch-sh-admin/src/pages/users/invited.vue
View File

@@ -16,64 +16,21 @@
<div v-if="fetching" class="flex justify-center"> <div v-if="fetching" class="flex justify-center">
<HoppSmartSpinner /> <HoppSmartSpinner />
</div> </div>
<div v-else-if="error || invitedUsers === undefined"> <div
v-else-if="
error || invitedUsers === undefined || invitedUsers.length === 0
"
>
<p class="text-xl">{{ t('users.no_invite') }}</p> <p class="text-xl">{{ t('users.no_invite') }}</p>
</div> </div>
<table v-else class="w-full text-left"> <HoppSmartTable
<thead> v-else
<tr padding="px-6 py-3"
class="text-secondary border-b border-dividerDark text-sm text-left" :list="newInvitedUsersList"
> :headings="headings"
<th class="px-3 pb-3">{{ t('users.admin_id') }}</th> :subtitles="subtitles"
<th class="px-3 pb-3">{{ t('users.admin_email') }}</th> />
<th class="px-3 pb-3">{{ t('users.invitee_email') }}</th>
<th class="px-3 pb-3">{{ t('users.invited_on') }}</th>
</tr>
</thead>
<tbody class="divide-y divide-divider">
<tr
v-if="invitedUsers.length === 0"
class="text-secondaryDark py-4"
>
<div class="py-6 px-3">{{ t('users.no_invite') }}</div>
</tr>
<tr
v-else
v-for="(user, index) in invitedUsers"
:key="index"
class="text-secondaryDark hover:bg-zinc-800 hover:cursor-pointer rounded-xl"
>
<td class="py-2 px-3 max-w-30">
<div>
<span class="truncate">
{{ user?.adminUid }}
</span>
</div>
</td>
<td class="py-2 px-3">
<span class="flex items-center">
{{ user?.adminEmail }}
</span>
</td>
<td class="py-2 px-3">
<span>
{{ user?.inviteeEmail }}
</span>
</td>
<td class="py-2 px-3">
<div class="flex items-center">
<div class="flex flex-col">
{{ getCreatedDate(user?.invitedOn) }}
<div class="text-gray-400 text-xs">
{{ getCreatedTime(user?.invitedOn) }}
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div> </div>
</div> </div>
</div> </div>
@@ -81,7 +38,7 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { computed } from 'vue'; import { computed, reactive } from 'vue';
import { useQuery } from '@urql/vue'; import { useQuery } from '@urql/vue';
import { InvitedUsersDocument } from '../../helpers/backend/graphql'; import { InvitedUsersDocument } from '../../helpers/backend/graphql';
import { format } from 'date-fns'; import { format } from 'date-fns';
@@ -100,4 +57,39 @@ const getCreatedTime = (date: string) => format(new Date(date), 'hh:mm a');
// Get Invited Users // Get Invited Users
const { fetching, error, data } = useQuery({ query: InvitedUsersDocument }); const { fetching, error, data } = useQuery({ query: InvitedUsersDocument });
const invitedUsers = computed(() => data?.value?.admin.invitedUsers); const invitedUsers = computed(() => data?.value?.admin.invitedUsers);
// The new invited users list that is used in the table
const newInvitedUsersList = computed(() => {
return invitedUsers.value?.map((user) => {
return {
adminUid: user.adminUid || '',
adminEmail: user.adminEmail || '',
inviteeEmail: user.inviteeEmail || '',
invitedOn: getCreatedDate(user.invitedOn) || '',
};
});
});
// Returns the created time of all the invited user
const createdTime = computed(() => {
return invitedUsers.value?.map((user) => {
return getCreatedTime(user.invitedOn);
});
});
// Headings used in the table
const headings = [
t('users.admin_id'),
t('users.admin_email'),
t('users.invitee_email'),
t('users.invited_on'),
];
// Subtitles used in the table
const subtitles = reactive([
{
colName: 'invitedOn',
subtitle: createdTime,
},
]);
</script> </script>

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

@@ -16,7 +16,7 @@
<tbody class="divide-y divide-divider"> <tbody class="divide-y divide-divider">
<tr <tr
v-for="(item, rowIndex) in list" v-for="(item, rowIndex) in list"
:key="item.id" :key="rowIndex"
class="text-secondaryDark hover:bg-divider hover:cursor-pointer rounded-xl" class="text-secondaryDark hover:bg-divider hover:cursor-pointer rounded-xl"
:class="xBorder ? 'divide-x divide-divider' : ''" :class="xBorder ? 'divide-x divide-divider' : ''"
> >
@@ -36,21 +36,29 @@
" "
> >
<div class="flex flex-col"> <div class="flex flex-col">
{{ data }} <span v-if="data">
{{ data }}
</span>
<span <span
class="text-xs font-medium px-3 py-0.5 rounded-full bg-green-900 text-green-300" class="text-xs font-medium px-3 py-1 my-1 rounded-full bg-green-900 text-green-300 w-min"
> >
{{ badgeName }} {{ badgeName }}
</span> </span>
</div> </div>
</div> </div>
<!-- Column with Subtitles --> <!-- Column with Subtitles -->
<div <div
v-else-if="subCol.includes(colIndex.toString())" v-else-if="subtitleColumns.includes(colIndex.toString())"
class="flex flex-col" class="flex flex-col"
> >
{{ data }} <span v-if="data">
<div v-for="item in subtitle"> {{ data }}
</span>
<span v-else> - </span>
<div v-for="item in subtitles">
<div <div
v-if="item.colName === colIndex.toString()" v-if="item.colName === colIndex.toString()"
class="text-gray-400 text-tiny" class="text-gray-400 text-tiny"
@@ -63,7 +71,14 @@
</div> </div>
</div> </div>
</div> </div>
<div v-else class="flex flex-col">{{ data }}</div>
<!-- Column with no subtitle or badge -->
<div v-else class="flex flex-col">
<span v-if="data">
{{ data }}
</span>
<span v-else> - </span>
</div>
</div> </div>
</td> </td>
@@ -75,39 +90,34 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { computed, onMounted } from "vue" import { computed } from "vue"
const props = defineProps<{ const props = defineProps<{
xBorder: Boolean xBorder: Boolean
list: [] list: []
headings: [] headings: string[]
padding: string padding: string
itemStyle: string
badgeName: string badgeName: string
badgeRowIndex: (number | undefined)[] badgeRowIndex: (number | undefined)[]
badgeColName: string badgeColName: string
subtitle: [ subtitles: [
{ {
colName: string colName: string
subtitle: string | [] subtitle: string | string[]
} }
] ]
}>() }>()
defineEmits<{ defineEmits<{
(event: "goToDetails", uid: string): void (event: "goToDetails", uid: string): void
(event: "id", uid: string): void
}>() }>()
const subCol = computed(() => // Returns all the columns that needs to have a subtitle
props.subtitle ? props.subtitle.map((item) => item.colName) : [] const subtitleColumns = computed(() =>
props.subtitles ? props.subtitles.map((item) => item.colName) : []
) )
onMounted(() => { // Returns the subtitle for the given column and row
console.log(props.subtitle)
console.log(subCol)
})
const itemSubtitle = (subtitle: string | string[], rowIndex: number) => const itemSubtitle = (subtitle: string | string[], rowIndex: number) =>
typeof subtitle === "object" ? subtitle[rowIndex] : subtitle typeof subtitle === "object" ? subtitle[rowIndex] : subtitle
</script> </script>