fix(tenancy): fix table column alignment with flattened row approach
Some checks failed
Some checks failed
The nested tbody approach caused browsers to collapse all cells into one column. Replaced with a single flat x-for loop over flattenedRows (computed property that interleaves member rows and store sub-rows). Each row is a single <tr> with 4 proper <td> cells, using x-if to conditionally render member-level or store-level content per column. Sub-rows are hidden/shown via expandedMembers array. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -131,6 +131,21 @@ function merchantTeam() {
|
|||||||
);
|
);
|
||||||
},
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Flatten members + their stores into a single row list for table rendering.
|
||||||
|
* Each row is either {type:'member', member, key} or {type:'store', member, store, key}
|
||||||
|
*/
|
||||||
|
get flattenedRows() {
|
||||||
|
const rows = [];
|
||||||
|
for (const member of this.filteredMembers) {
|
||||||
|
rows.push({ type: 'member', member, key: `m-${member.user_id}` });
|
||||||
|
for (const store of member.stores) {
|
||||||
|
rows.push({ type: 'store', member, store, key: `s-${member.user_id}-${store.store_id}` });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return rows;
|
||||||
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Toggle expand/collapse for a member's store rows
|
* Toggle expand/collapse for a member's store rows
|
||||||
*/
|
*/
|
||||||
|
|||||||
@@ -87,157 +87,138 @@
|
|||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody class="bg-white divide-y dark:divide-gray-700 dark:bg-gray-800">
|
<tbody class="bg-white divide-y dark:divide-gray-700 dark:bg-gray-800">
|
||||||
<template x-for="member in filteredMembers" :key="member.user_id">
|
{# Flatten members + stores into a single row list for proper table rendering.
|
||||||
<tbody class="divide-y dark:divide-gray-700">
|
Alpine x-for on <template> inside <tbody> renders each <tr> as a direct child. #}
|
||||||
{# ── Main member row ── #}
|
<template x-for="row in flattenedRows" :key="row.key">
|
||||||
<tr class="text-gray-700 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer"
|
|
||||||
@click="toggleMemberExpand(member.user_id)">
|
{# ── Main member row ── #}
|
||||||
{# Member: Avatar + Name + Email #}
|
<tr x-show="row.type === 'member' || expandedMembers.includes(row.member.user_id)"
|
||||||
<td class="px-4 py-3">
|
:class="row.type === 'member'
|
||||||
|
? 'text-gray-700 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer'
|
||||||
|
: 'bg-gray-50 dark:bg-gray-900/50 text-gray-600 dark:text-gray-400'"
|
||||||
|
@click="row.type === 'member' && toggleMemberExpand(row.member.user_id)">
|
||||||
|
|
||||||
|
{# Column 1: Member name OR Store name #}
|
||||||
|
<td class="px-4 py-3" :class="row.type === 'store' && 'py-2 pl-16'">
|
||||||
|
{# Member info #}
|
||||||
|
<template x-if="row.type === 'member'">
|
||||||
<div class="flex items-center text-sm">
|
<div class="flex items-center text-sm">
|
||||||
<div class="relative w-8 h-8 mr-3 rounded-full flex-shrink-0">
|
<div class="relative w-8 h-8 mr-3 rounded-full flex-shrink-0">
|
||||||
<div class="flex items-center justify-center w-full h-full rounded-full"
|
<div class="flex items-center justify-center w-full h-full rounded-full"
|
||||||
:class="getMemberStatus(member) === 'active' ? 'bg-purple-100 dark:bg-purple-900 text-purple-600 dark:text-purple-300' : 'bg-gray-200 dark:bg-gray-700 text-gray-500 dark:text-gray-400'">
|
:class="getMemberStatus(row.member) === 'active' ? 'bg-purple-100 dark:bg-purple-900 text-purple-600 dark:text-purple-300' : 'bg-gray-200 dark:bg-gray-700 text-gray-500 dark:text-gray-400'">
|
||||||
<span class="text-xs font-semibold" x-text="getInitials(member)"></span>
|
<span class="text-xs font-semibold" x-text="getInitials(row.member)"></span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex-1">
|
<div class="flex-1">
|
||||||
<p class="font-semibold text-gray-800 dark:text-gray-200"
|
<p class="font-semibold text-gray-800 dark:text-gray-200" x-text="row.member.full_name"></p>
|
||||||
x-text="member.full_name"></p>
|
<p class="text-xs text-gray-600 dark:text-gray-400" x-text="row.member.email"></p>
|
||||||
<p class="text-xs text-gray-600 dark:text-gray-400" x-text="member.email"></p>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="flex items-center gap-1 ml-2 text-xs text-gray-400">
|
<div class="flex items-center gap-1 ml-2 text-xs text-gray-400">
|
||||||
<span x-html="$icon(expandedMembers.includes(member.user_id) ? 'chevron-up' : 'chevron-down', 'w-4 h-4')"></span>
|
<span x-html="$icon(expandedMembers.includes(row.member.user_id) ? 'chevron-up' : 'chevron-down', 'w-4 h-4')"></span>
|
||||||
<span x-text="member.stores.length + ' store' + (member.stores.length !== 1 ? 's' : '')"></span>
|
<span x-text="row.member.stores.length + ' store' + (row.member.stores.length !== 1 ? 's' : '')"></span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</template>
|
||||||
|
{# Store info (sub-row) #}
|
||||||
|
<template x-if="row.type === 'store'">
|
||||||
|
<div class="flex items-center gap-2 text-sm">
|
||||||
|
<span x-html="$icon('shopping-bag', 'w-3.5 h-3.5 text-gray-400')"></span>
|
||||||
|
<span class="font-medium text-gray-700 dark:text-gray-300" x-text="row.store.store_name"></span>
|
||||||
|
<span class="text-xs text-gray-400 font-mono" x-text="row.store.store_code"></span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</td>
|
||||||
|
|
||||||
{# Role (summary) #}
|
{# Column 2: Role #}
|
||||||
<td class="px-4 py-3 text-sm">
|
<td class="px-4 text-sm" :class="row.type === 'member' ? 'py-3' : 'py-2'">
|
||||||
<template x-if="member.is_owner">
|
{# Member-level role summary #}
|
||||||
<span class="text-xs text-purple-600 dark:text-purple-400 font-medium">Owner</span>
|
<template x-if="row.type === 'member' && row.member.is_owner">
|
||||||
</template>
|
<span class="text-xs text-purple-600 dark:text-purple-400 font-medium">Owner</span>
|
||||||
<template x-if="!member.is_owner && member.stores.length === 1">
|
</template>
|
||||||
<span class="text-xs text-gray-600 dark:text-gray-400" x-text="member.stores[0].role_name"></span>
|
<template x-if="row.type === 'member' && !row.member.is_owner && row.member.stores.length === 1">
|
||||||
</template>
|
<span class="text-xs text-gray-600 dark:text-gray-400" x-text="row.member.stores[0].role_name"></span>
|
||||||
<template x-if="!member.is_owner && member.stores.length > 1">
|
</template>
|
||||||
<span class="text-xs text-gray-400">{{ _('tenancy.team.multiple_roles') }}</span>
|
<template x-if="row.type === 'member' && !row.member.is_owner && row.member.stores.length > 1">
|
||||||
</template>
|
<span class="text-xs text-gray-400">{{ _('tenancy.team.multiple_roles') }}</span>
|
||||||
</td>
|
</template>
|
||||||
|
{# Store-level role badge #}
|
||||||
|
<template x-if="row.type === 'store'">
|
||||||
|
<span class="px-2 py-0.5 text-xs rounded-full bg-purple-50 dark:bg-purple-900/50 text-purple-700 dark:text-purple-300"
|
||||||
|
x-text="row.store.role_name || (row.member.is_owner ? 'Owner' : '{{ _('tenancy.team.no_role') }}')"></span>
|
||||||
|
</template>
|
||||||
|
</td>
|
||||||
|
|
||||||
{# Overall status #}
|
{# Column 3: Status #}
|
||||||
<td class="px-4 py-3 text-sm">
|
<td class="px-4 text-sm" :class="row.type === 'member' ? 'py-3' : 'py-2'">
|
||||||
<template x-if="member.is_owner">
|
{# Member-level status #}
|
||||||
<span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200">
|
<template x-if="row.type === 'member' && row.member.is_owner">
|
||||||
<span x-html="$icon('shield-check', 'w-3 h-3 mr-1')"></span>
|
<span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200">
|
||||||
{{ _('tenancy.team.owner') }}
|
<span x-html="$icon('shield-check', 'w-3 h-3 mr-1')"></span>
|
||||||
</span>
|
{{ _('tenancy.team.owner') }}
|
||||||
</template>
|
</span>
|
||||||
<template x-if="!member.is_owner && getMemberStatus(member) === 'active'">
|
</template>
|
||||||
<span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">
|
<template x-if="row.type === 'member' && !row.member.is_owner && getMemberStatus(row.member) === 'active'">
|
||||||
{{ _('common.active') }}
|
<span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">{{ _('common.active') }}</span>
|
||||||
</span>
|
</template>
|
||||||
</template>
|
<template x-if="row.type === 'member' && !row.member.is_owner && getMemberStatus(row.member) === 'pending'">
|
||||||
<template x-if="!member.is_owner && getMemberStatus(member) === 'pending'">
|
<span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-200">{{ _('common.pending') }}</span>
|
||||||
<span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-200">
|
</template>
|
||||||
{{ _('common.pending') }}
|
{# Store-level status #}
|
||||||
</span>
|
<template x-if="row.type === 'store' && row.store.is_pending">
|
||||||
</template>
|
<span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-orange-100 text-orange-700 dark:bg-orange-900 dark:text-orange-200">{{ _('common.pending') }}</span>
|
||||||
</td>
|
</template>
|
||||||
|
<template x-if="row.type === 'store' && !row.store.is_pending && row.store.is_active">
|
||||||
|
<span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-200">{{ _('common.active') }}</span>
|
||||||
|
</template>
|
||||||
|
</td>
|
||||||
|
|
||||||
{# Member-level actions: fixed 4-slot grid (resend | view | edit | remove) #}
|
{# Column 4: Actions (4-slot grid) #}
|
||||||
<td class="px-4 py-3 text-sm">
|
<td class="px-4 text-sm" :class="row.type === 'member' ? 'py-3' : 'py-2'">
|
||||||
<div class="grid grid-cols-4 gap-1 w-32" @click.stop>
|
<div class="grid grid-cols-4 gap-1 w-32" @click.stop>
|
||||||
{# Slot 1: resend (empty at member level) #}
|
{# Slot 1: resend #}
|
||||||
<span></span>
|
<template x-if="row.type === 'store' && row.store.is_pending && !row.member.is_owner">
|
||||||
{# Slot 2: view #}
|
<button @click="resendStoreInvitation(row.store.store_id, row.member.user_id)"
|
||||||
<button @click="openViewModal(member)"
|
:disabled="saving"
|
||||||
|
class="p-1 text-gray-400 hover:text-green-600 dark:hover:text-green-400 hover:bg-gray-100 dark:hover:bg-gray-700 rounded transition-colors"
|
||||||
|
:title="$t('tenancy.team.resend_invitation')">
|
||||||
|
<span x-html="$icon('paper-airplane', 'w-3.5 h-3.5')"></span>
|
||||||
|
</button>
|
||||||
|
</template>
|
||||||
|
<template x-if="!(row.type === 'store' && row.store.is_pending && !row.member.is_owner)"><span></span></template>
|
||||||
|
|
||||||
|
{# Slot 2: view #}
|
||||||
|
<template x-if="row.type === 'member'">
|
||||||
|
<button @click="openViewModal(row.member)"
|
||||||
class="p-1 text-gray-500 hover:text-blue-600 dark:text-gray-400 dark:hover:text-blue-400 hover:bg-gray-100 dark:hover:bg-gray-700 rounded transition-colors"
|
class="p-1 text-gray-500 hover:text-blue-600 dark:text-gray-400 dark:hover:text-blue-400 hover:bg-gray-100 dark:hover:bg-gray-700 rounded transition-colors"
|
||||||
:title="$t('tenancy.team.view_member')">
|
:title="$t('tenancy.team.view_member')">
|
||||||
<span x-html="$icon('eye', 'w-4 h-4')"></span>
|
<span x-html="$icon('eye', 'w-4 h-4')"></span>
|
||||||
</button>
|
</button>
|
||||||
{# Slot 3: edit #}
|
</template>
|
||||||
<template x-if="!member.is_owner">
|
<template x-if="row.type !== 'member'"><span></span></template>
|
||||||
<button @click="openEditModal(member)"
|
|
||||||
class="p-1 text-gray-500 hover:text-purple-600 dark:text-gray-400 dark:hover:text-purple-400 hover:bg-gray-100 dark:hover:bg-gray-700 rounded transition-colors"
|
|
||||||
:title="$t('tenancy.team.edit_member')">
|
|
||||||
<span x-html="$icon('pencil', 'w-4 h-4')"></span>
|
|
||||||
</button>
|
|
||||||
</template>
|
|
||||||
<template x-if="member.is_owner"><span></span></template>
|
|
||||||
{# Slot 4: remove (empty at member level — done per-store) #}
|
|
||||||
<span></span>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
{# ── Per-store sub-rows (expanded) ── #}
|
{# Slot 3: edit #}
|
||||||
<template x-for="store in member.stores" :key="store.store_id">
|
<template x-if="row.type === 'member' && !row.member.is_owner">
|
||||||
<tr x-show="expandedMembers.includes(member.user_id)"
|
<button @click="openEditModal(row.member)"
|
||||||
x-transition
|
class="p-1 text-gray-500 hover:text-purple-600 dark:text-gray-400 dark:hover:text-purple-400 hover:bg-gray-100 dark:hover:bg-gray-700 rounded transition-colors"
|
||||||
class="bg-gray-50 dark:bg-gray-900/50 text-gray-600 dark:text-gray-400">
|
:title="$t('tenancy.team.edit_member')">
|
||||||
{# Store name (indented) #}
|
<span x-html="$icon('pencil', 'w-4 h-4')"></span>
|
||||||
<td class="px-4 py-2 pl-16">
|
</button>
|
||||||
<div class="flex items-center gap-2 text-sm">
|
</template>
|
||||||
<span x-html="$icon('shopping-bag', 'w-3.5 h-3.5 text-gray-400')"></span>
|
<template x-if="!(row.type === 'member' && !row.member.is_owner)"><span></span></template>
|
||||||
<span class="font-medium text-gray-700 dark:text-gray-300" x-text="store.store_name"></span>
|
|
||||||
<span class="text-xs text-gray-400 font-mono" x-text="store.store_code"></span>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
|
|
||||||
{# Role #}
|
{# Slot 4: remove #}
|
||||||
<td class="px-4 py-2 text-sm">
|
<template x-if="row.type === 'store' && !row.member.is_owner">
|
||||||
<span class="px-2 py-0.5 text-xs rounded-full bg-purple-50 dark:bg-purple-900/50 text-purple-700 dark:text-purple-300"
|
<button @click="removeMember(row.store.store_id, row.member.user_id)"
|
||||||
x-text="store.role_name || (member.is_owner ? 'Owner' : '{{ _('tenancy.team.no_role') }}')"></span>
|
:disabled="saving"
|
||||||
</td>
|
class="p-1 text-gray-400 hover:text-red-600 dark:hover:text-red-400 hover:bg-gray-100 dark:hover:bg-gray-700 rounded transition-colors"
|
||||||
|
:title="$t('tenancy.team.remove_member')">
|
||||||
{# Per-store status #}
|
<span x-html="$icon('x-circle', 'w-3.5 h-3.5')"></span>
|
||||||
<td class="px-4 py-2 text-sm">
|
</button>
|
||||||
<template x-if="store.is_pending">
|
</template>
|
||||||
<span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-orange-100 text-orange-700 dark:bg-orange-900 dark:text-orange-200">
|
<template x-if="!(row.type === 'store' && !row.member.is_owner)"><span></span></template>
|
||||||
{{ _('common.pending') }}
|
</div>
|
||||||
</span>
|
</td>
|
||||||
</template>
|
</tr>
|
||||||
<template x-if="!store.is_pending && store.is_active">
|
|
||||||
<span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-200">
|
|
||||||
{{ _('common.active') }}
|
|
||||||
</span>
|
|
||||||
</template>
|
|
||||||
</td>
|
|
||||||
|
|
||||||
{# Per-store actions: same 4-slot grid (resend | view | edit | remove) #}
|
|
||||||
<td class="px-4 py-2 text-sm">
|
|
||||||
<div class="grid grid-cols-4 gap-1 w-32">
|
|
||||||
{# Slot 1: resend (pending only) #}
|
|
||||||
<template x-if="store.is_pending && !member.is_owner">
|
|
||||||
<button @click="resendStoreInvitation(store.store_id, member.user_id)"
|
|
||||||
:disabled="saving"
|
|
||||||
class="p-1 text-gray-400 hover:text-green-600 dark:hover:text-green-400 hover:bg-gray-100 dark:hover:bg-gray-700 rounded transition-colors"
|
|
||||||
:title="$t('tenancy.team.resend_invitation')">
|
|
||||||
<span x-html="$icon('paper-airplane', 'w-3.5 h-3.5')"></span>
|
|
||||||
</button>
|
|
||||||
</template>
|
|
||||||
<template x-if="!store.is_pending || member.is_owner"><span></span></template>
|
|
||||||
{# Slot 2: view (empty at store level) #}
|
|
||||||
<span></span>
|
|
||||||
{# Slot 3: edit (empty at store level) #}
|
|
||||||
<span></span>
|
|
||||||
{# Slot 4: remove from store #}
|
|
||||||
<template x-if="!member.is_owner">
|
|
||||||
<button @click="removeMember(store.store_id, member.user_id)"
|
|
||||||
:disabled="saving"
|
|
||||||
class="p-1 text-gray-400 hover:text-red-600 dark:hover:text-red-400 hover:bg-gray-100 dark:hover:bg-gray-700 rounded transition-colors"
|
|
||||||
:title="$t('tenancy.team.remove_member')">
|
|
||||||
<span x-html="$icon('x-circle', 'w-3.5 h-3.5')"></span>
|
|
||||||
</button>
|
|
||||||
</template>
|
|
||||||
<template x-if="member.is_owner"><span></span></template>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</template>
|
|
||||||
</tbody>
|
|
||||||
</template>
|
</template>
|
||||||
</tbody>
|
</tbody>
|
||||||
{% endcall %}
|
{% endcall %}
|
||||||
|
|||||||
Reference in New Issue
Block a user