feat(tenancy): expandable per-store rows in merchant team table
Some checks failed
Some checks failed
Member rows now show a store count with expand/collapse chevron. Clicking expands sub-rows showing each store with: - Store name and code - Per-store role badge - Per-store status (active/pending independently) - Per-store actions: resend invitation (pending), remove from store This fixes the issue where a member active on one store but pending on another showed misleading combined status and actions. Member-level actions (view, edit profile) stay on the main row. Store-level actions (resend, remove) are on each sub-row. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -31,6 +31,9 @@ function merchantTeam() {
|
||||
// Filters
|
||||
storeFilter: '',
|
||||
|
||||
// Expanded member rows
|
||||
expandedMembers: [],
|
||||
|
||||
// Modal states
|
||||
showInviteModal: false,
|
||||
showEditModal: false,
|
||||
@@ -128,6 +131,39 @@ function merchantTeam() {
|
||||
);
|
||||
},
|
||||
|
||||
/**
|
||||
* Toggle expand/collapse for a member's store rows
|
||||
*/
|
||||
toggleMemberExpand(userId) {
|
||||
const idx = this.expandedMembers.indexOf(userId);
|
||||
if (idx > -1) {
|
||||
this.expandedMembers.splice(idx, 1);
|
||||
} else {
|
||||
this.expandedMembers.push(userId);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Resend invitation for a specific store membership
|
||||
*/
|
||||
async resendStoreInvitation(storeId, userId) {
|
||||
this.saving = true;
|
||||
try {
|
||||
await apiClient.post(
|
||||
`/merchants/account/team/stores/${storeId}/members/${userId}/resend`
|
||||
);
|
||||
|
||||
Utils.showToast(I18n.t('tenancy.messages.invitation_resent'), 'success');
|
||||
merchantTeamLog.info('Resent invitation for store:', storeId, 'user:', userId);
|
||||
await this.loadTeamData();
|
||||
} catch (error) {
|
||||
merchantTeamLog.error('Failed to resend invitation:', error);
|
||||
Utils.showToast(error.message || 'Failed to resend invitation', 'error');
|
||||
} finally {
|
||||
this.saving = false;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Open invite modal with reset form
|
||||
*/
|
||||
|
||||
@@ -81,98 +81,131 @@
|
||||
{{ table_header([_('tenancy.team.member'), _('tenancy.team.stores_and_roles'), _('tenancy.team.status'), _('tenancy.team.actions')]) }}
|
||||
<tbody class="bg-white divide-y dark:divide-gray-700 dark:bg-gray-800">
|
||||
<template x-for="member in filteredMembers" :key="member.user_id">
|
||||
<tr class="text-gray-700 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700">
|
||||
<!-- Member: Avatar + Name + Email -->
|
||||
<td class="px-4 py-3">
|
||||
<div class="flex items-center text-sm">
|
||||
<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"
|
||||
: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'">
|
||||
<span class="text-xs font-semibold" x-text="getInitials(member)"></span>
|
||||
<tbody class="divide-y dark:divide-gray-700">
|
||||
{# ── Main member row ── #}
|
||||
<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)">
|
||||
{# Member: Avatar + Name + Email #}
|
||||
<td class="px-4 py-3">
|
||||
<div class="flex items-center text-sm">
|
||||
<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"
|
||||
: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'">
|
||||
<span class="text-xs font-semibold" x-text="getInitials(member)"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-semibold text-gray-800 dark:text-gray-200"
|
||||
x-text="member.full_name"></p>
|
||||
<p class="text-xs text-gray-600 dark:text-gray-400" x-text="member.email"></p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-semibold text-gray-800 dark:text-gray-200"
|
||||
x-text="member.full_name"></p>
|
||||
<p class="text-xs text-gray-600 dark:text-gray-400" x-text="member.email"></p>
|
||||
</td>
|
||||
|
||||
{# Store count summary #}
|
||||
<td class="px-4 py-3 text-sm text-gray-600 dark:text-gray-400">
|
||||
<div class="flex items-center gap-1">
|
||||
<span x-html="$icon(expandedMembers.includes(member.user_id) ? 'chevron-up' : 'chevron-down', 'w-4 h-4 text-gray-400')"></span>
|
||||
<span x-text="member.stores.length + ' store' + (member.stores.length !== 1 ? 's' : '')"></span>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</td>
|
||||
|
||||
<!-- Stores & Roles -->
|
||||
<td class="px-4 py-3">
|
||||
<div class="flex flex-wrap gap-1">
|
||||
<template x-for="store in member.stores" :key="store.store_id">
|
||||
<span class="px-2 py-1 text-xs rounded-full bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300">
|
||||
<span class="font-medium" x-text="store.store_name"></span>:
|
||||
<span x-text="store.role_name || '{{ _('tenancy.team.no_role') }}'"></span>
|
||||
</span>
|
||||
</template>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<!-- Status -->
|
||||
<td class="px-4 py-3 text-sm">
|
||||
<template x-if="member.is_owner">
|
||||
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200">
|
||||
<span x-html="$icon('shield-check', 'w-3 h-3 mr-1')"></span>
|
||||
{{ _('tenancy.team.owner') }}
|
||||
</span>
|
||||
</template>
|
||||
<template x-if="!member.is_owner && getMemberStatus(member) === 'pending'">
|
||||
<span class="inline-flex items-center px-2.5 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>
|
||||
</template>
|
||||
<template x-if="!member.is_owner && getMemberStatus(member) === 'active'">
|
||||
<span class="inline-flex items-center px-2.5 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>
|
||||
</template>
|
||||
<template x-if="!member.is_owner && getMemberStatus(member) === 'inactive'">
|
||||
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200">
|
||||
{{ _('common.inactive') }}
|
||||
</span>
|
||||
</template>
|
||||
</td>
|
||||
|
||||
<!-- Actions -->
|
||||
<td class="px-4 py-3 text-sm">
|
||||
<div class="flex items-center gap-2">
|
||||
<button @click="openViewModal(member)"
|
||||
class="p-1.5 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-lg transition-colors"
|
||||
:title="$t('tenancy.team.view_member')">
|
||||
<span x-html="$icon('eye', 'w-4 h-4')"></span>
|
||||
</button>
|
||||
{# Overall status #}
|
||||
<td class="px-4 py-3 text-sm">
|
||||
<template x-if="member.is_owner">
|
||||
<span class="inline-flex items-center px-2 py-1 text-xs text-purple-600 dark:text-purple-400">
|
||||
<span x-html="$icon('shield-check', 'w-4 h-4')"></span>
|
||||
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200">
|
||||
<span x-html="$icon('shield-check', 'w-3 h-3 mr-1')"></span>
|
||||
{{ _('tenancy.team.owner') }}
|
||||
</span>
|
||||
</template>
|
||||
<template x-if="!member.is_owner">
|
||||
<div class="flex items-center gap-2">
|
||||
<button x-show="getMemberStatus(member) === 'pending'"
|
||||
@click="resendInvitation(member)"
|
||||
:disabled="saving"
|
||||
class="p-1.5 text-gray-500 hover:text-green-600 dark:text-gray-400 dark:hover:text-green-400 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors"
|
||||
:title="$t('tenancy.team.resend_invitation')">
|
||||
<span x-html="$icon('paper-airplane', 'w-4 h-4')"></span>
|
||||
</button>
|
||||
<template x-if="!member.is_owner && getMemberStatus(member) === 'active'">
|
||||
<span class="inline-flex items-center px-2.5 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>
|
||||
</template>
|
||||
<template x-if="!member.is_owner && getMemberStatus(member) === 'pending'">
|
||||
<span class="inline-flex items-center px-2.5 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>
|
||||
</template>
|
||||
</td>
|
||||
|
||||
{# Member-level actions #}
|
||||
<td class="px-4 py-3 text-sm">
|
||||
<div class="flex items-center gap-2" @click.stop>
|
||||
<button @click="openViewModal(member)"
|
||||
class="p-1.5 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-lg transition-colors"
|
||||
:title="$t('tenancy.team.view_member')">
|
||||
<span x-html="$icon('eye', 'w-4 h-4')"></span>
|
||||
</button>
|
||||
<template x-if="!member.is_owner">
|
||||
<button @click="openEditModal(member)"
|
||||
class="p-1.5 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-lg transition-colors"
|
||||
:title="$t('tenancy.team.edit_member')">
|
||||
<span x-html="$icon('pencil', 'w-4 h-4')"></span>
|
||||
</button>
|
||||
<button @click="openRemoveModal(member)"
|
||||
class="p-1.5 text-gray-500 hover:text-red-600 dark:text-gray-400 dark:hover:text-red-400 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors"
|
||||
</template>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
{# ── Per-store sub-rows (expanded) ── #}
|
||||
<template x-for="store in member.stores" :key="store.store_id">
|
||||
<tr x-show="expandedMembers.includes(member.user_id)"
|
||||
x-transition
|
||||
class="bg-gray-50 dark:bg-gray-900/50 text-gray-600 dark:text-gray-400">
|
||||
{# Indent + Store name #}
|
||||
<td class="px-4 py-2 pl-16">
|
||||
<div class="flex items-center gap-2 text-sm">
|
||||
<span x-html="$icon('shopping-bag', 'w-4 h-4 text-gray-400')"></span>
|
||||
<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 #}
|
||||
<td class="px-4 py-2 text-sm">
|
||||
<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="store.role_name || (member.is_owner ? 'Owner' : '{{ _('tenancy.team.no_role') }}')"></span>
|
||||
</td>
|
||||
|
||||
{# Per-store status #}
|
||||
<td class="px-4 py-2 text-sm">
|
||||
<template x-if="store.is_pending">
|
||||
<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>
|
||||
</template>
|
||||
<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 #}
|
||||
<td class="px-4 py-2 text-sm">
|
||||
<div class="flex items-center gap-2" x-show="!member.is_owner">
|
||||
{# Resend — pending only #}
|
||||
<button x-show="store.is_pending"
|
||||
@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>
|
||||
{# Remove from this store #}
|
||||
<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('trash', 'w-4 h-4')"></span>
|
||||
<span x-html="$icon('x-circle', 'w-3.5 h-3.5')"></span>
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
</tbody>
|
||||
</template>
|
||||
</tbody>
|
||||
{% endcall %}
|
||||
|
||||
Reference in New Issue
Block a user