ddaa20af3c
- Deleted obsolete task management files: `tasks.mdc` and `notes.md`. - Introduced a new `groupStore` for managing group data, including fetching user groups and handling loading states. - Updated `MainLayout.vue` to navigate to groups with improved loading checks. - Enhanced `GroupsPage.vue` to support a tabbed interface for creating and joining groups, improving user experience. - Refined `GroupDetailPage.vue` to display recent expenses with a more interactive layout and added functionality for settling shares.
546 lines
17 KiB
Vue
546 lines
17 KiB
Vue
<template>
|
|
<main class="container page-padding">
|
|
<!-- <h1 class="mb-3">Your Groups</h1> -->
|
|
|
|
<!-- Initial Loading Spinner -->
|
|
<div v-if="isInitiallyLoading && groups.length === 0 && !fetchError" class="text-center my-5">
|
|
<p>{{ t('groupsPage.loadingText', 'Loading groups...') }}</p>
|
|
<span class="spinner-dots-lg" role="status"><span /><span /><span /></span>
|
|
</div>
|
|
|
|
<!-- Error Display -->
|
|
<div v-else-if="fetchError" class="alert alert-error mb-3" role="alert">
|
|
<div class="alert-content">
|
|
<svg class="icon" aria-hidden="true">
|
|
<use xlink:href="#icon-alert-triangle" />
|
|
</svg>
|
|
{{ fetchError }}
|
|
</div>
|
|
<button type="button" class="btn btn-sm btn-danger" @click="() => fetchGroups(true)">{{
|
|
t('groupsPage.retryButton') }}</button>
|
|
</div>
|
|
|
|
<!-- Empty State: show if not initially loading, no error, and groups genuinely empty -->
|
|
<div v-else-if="!isInitiallyLoading && groups.length === 0" class="card empty-state-card">
|
|
<svg class="icon icon-lg" aria-hidden="true">
|
|
<use xlink:href="#icon-clipboard" />
|
|
</svg>
|
|
<h3>{{ t('groupsPage.emptyState.title') }}</h3>
|
|
<p>{{ t('groupsPage.emptyState.description') }}</p>
|
|
<button class="btn btn-primary mt-2" @click="openCreateGroupDialog">
|
|
<svg class="icon" aria-hidden="true">
|
|
<use xlink:href="#icon-plus" />
|
|
</svg>
|
|
{{ t('groupsPage.emptyState.createButton') }}
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Groups List -->
|
|
<div v-else-if="groups.length > 0" class="mb-3">
|
|
<div class="neo-groups-grid">
|
|
<div v-for="group in groups" :key="group.id" class="neo-group-card" @click="selectGroup(group)">
|
|
<h1 class="neo-group-header">{{ group.name }}</h1>
|
|
<div class="neo-group-actions">
|
|
<button class="btn btn-sm btn-secondary" @click.stop="openCreateListDialog(group)">
|
|
<svg class="icon" aria-hidden="true">
|
|
<use xlink:href="#icon-plus" />
|
|
</svg>
|
|
{{ t('groupsPage.groupCard.newListButton') }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="neo-create-group-card" @click="openCreateGroupDialog">
|
|
{{ t('groupsPage.createCard.title') }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Create or Join Group Dialog -->
|
|
<div v-if="showCreateGroupDialog" class="modal-backdrop open" @click.self="closeCreateGroupDialog">
|
|
<div class="modal-container" ref="createGroupModalRef" role="dialog" aria-modal="true"
|
|
aria-labelledby="createGroupTitle">
|
|
<div class="modal-header">
|
|
<h3 id="createGroupTitle">{{ activeTab === 'create' ? t('groupsPage.createDialog.title') :
|
|
t('groupsPage.joinGroup.title') }}</h3>
|
|
<button class="close-button" @click="closeCreateGroupDialog"
|
|
:aria-label="t('groupsPage.createDialog.closeButtonLabel')">
|
|
<svg class="icon" aria-hidden="true">
|
|
<use xlink:href="#icon-close" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Tabs -->
|
|
<div class="modal-tabs">
|
|
<button @click="activeTab = 'create'" :class="{ 'active': activeTab === 'create' }">
|
|
{{ t('groupsPage.createDialog.createButton') }}
|
|
</button>
|
|
<button @click="activeTab = 'join'" :class="{ 'active': activeTab === 'join' }">
|
|
{{ t('groupsPage.joinGroup.joinButton') }}
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Create Form -->
|
|
<form v-if="activeTab === 'create'" @submit.prevent="handleCreateGroup">
|
|
<div class="modal-body">
|
|
<div class="form-group">
|
|
<label for="newGroupNameInput" class="form-label">{{ t('groupsPage.createDialog.groupNameLabel')
|
|
}}</label>
|
|
<input type="text" id="newGroupNameInput" v-model="newGroupName" class="form-input" required
|
|
ref="newGroupNameInputRef" />
|
|
<p v-if="createGroupFormError" class="form-error-text">{{ createGroupFormError }}</p>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-neutral" @click="closeCreateGroupDialog">{{
|
|
t('groupsPage.createDialog.cancelButton') }}</button>
|
|
<button type="submit" class="btn btn-primary ml-2" :disabled="creatingGroup">
|
|
<span v-if="creatingGroup" class="spinner-dots-sm" role="status"><span /><span /><span /></span>
|
|
{{ t('groupsPage.createDialog.createButton') }}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
|
|
<!-- Join Form -->
|
|
<form v-if="activeTab === 'join'" @submit.prevent="handleJoinGroup">
|
|
<div class="modal-body">
|
|
<div class="form-group">
|
|
<label for="joinInviteCodeInput" class="form-label">{{ t('groupsPage.joinGroup.inputLabel', 'Invite Code')
|
|
}}</label>
|
|
<input type="text" id="joinInviteCodeInput" v-model="inviteCodeToJoin" class="form-input"
|
|
:placeholder="t('groupsPage.joinGroup.inputPlaceholder')" required ref="joinInviteCodeInputRef" />
|
|
<p v-if="joinGroupFormError" class="form-error-text">{{ joinGroupFormError }}</p>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-neutral" @click="closeCreateGroupDialog">{{
|
|
t('groupsPage.createDialog.cancelButton') }}</button>
|
|
<button type="submit" class="btn btn-primary ml-2" :disabled="joiningGroup">
|
|
<span v-if="joiningGroup" class="spinner-dots-sm" role="status"><span /><span /><span /></span>
|
|
{{ t('groupsPage.joinGroup.joinButton') }}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Create List Modal -->
|
|
<CreateListModal v-model="showCreateListModal" :groups="availableGroupsForModal" @created="onListCreated" />
|
|
</main>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, onMounted, nextTick, watch } from 'vue';
|
|
import { useI18n } from 'vue-i18n';
|
|
import { useRouter } from 'vue-router';
|
|
import { apiClient, API_ENDPOINTS } from '@/config/api';
|
|
import { useStorage } from '@vueuse/core';
|
|
import { onClickOutside } from '@vueuse/core';
|
|
import { useNotificationStore } from '@/stores/notifications';
|
|
import CreateListModal from '@/components/CreateListModal.vue';
|
|
import VButton from '@/components/valerie/VButton.vue';
|
|
import VIcon from '@/components/valerie/VIcon.vue';
|
|
|
|
const { t } = useI18n();
|
|
|
|
interface Group {
|
|
id: number;
|
|
name: string;
|
|
description?: string;
|
|
member_count: number;
|
|
created_at: string;
|
|
updated_at: string;
|
|
}
|
|
|
|
const router = useRouter();
|
|
const notificationStore = useNotificationStore();
|
|
const groups = ref<Group[]>([]);
|
|
const fetchError = ref<string | null>(null);
|
|
const isInitiallyLoading = ref(true); // Added for managing initial load state
|
|
|
|
const showCreateGroupDialog = ref(false);
|
|
const newGroupName = ref('');
|
|
const creatingGroup = ref(false);
|
|
const newGroupNameInputRef = ref<HTMLInputElement | null>(null);
|
|
const createGroupModalRef = ref<HTMLElement | null>(null);
|
|
const createGroupFormError = ref<string | null>(null);
|
|
|
|
const activeTab = ref<'create' | 'join'>('create');
|
|
|
|
const inviteCodeToJoin = ref('');
|
|
const joiningGroup = ref(false);
|
|
const joinInviteCodeInputRef = ref<HTMLInputElement | null>(null);
|
|
const joinGroupFormError = ref<string | null>(null);
|
|
|
|
const showCreateListModal = ref(false);
|
|
const availableGroupsForModal = ref<{ label: string; value: number; }[]>([]);
|
|
|
|
// Cache groups in localStorage
|
|
const cachedGroups = useStorage<Group[]>('cached-groups', []);
|
|
const cachedTimestamp = useStorage<number>('cached-groups-timestamp', 0);
|
|
const CACHE_DURATION = 5 * 60 * 1000; // 5 minutes in milliseconds
|
|
|
|
// Attempt to initialize groups from valid cache
|
|
const now = Date.now();
|
|
if (cachedGroups.value && (now - cachedTimestamp.value) < CACHE_DURATION) {
|
|
if (cachedGroups.value.length > 0) {
|
|
groups.value = JSON.parse(JSON.stringify(cachedGroups.value)); // Deep copy for safety from potential proxy issues
|
|
isInitiallyLoading.value = false;
|
|
} else { // Valid cache, but it's empty
|
|
groups.value = []; // Ensure it's an empty array
|
|
isInitiallyLoading.value = false; // We know it's empty, not "loading"
|
|
}
|
|
}
|
|
// If cache is stale or not present, groups.value remains [], and isInitiallyLoading remains true.
|
|
|
|
// Fetch fresh data from API
|
|
const fetchGroups = async (isRetryAttempt = false) => {
|
|
// If it's a retry triggered by user AND the list is currently empty, set loading to true to show spinner.
|
|
// Or, if it's the very first load (isInitiallyLoading is still true) AND list is empty (no cache hit).
|
|
if ((isRetryAttempt && groups.value.length === 0) || (isInitiallyLoading.value && groups.value.length === 0)) {
|
|
isInitiallyLoading.value = true;
|
|
}
|
|
// If groups.value has items (from cache), isInitiallyLoading is false, and this fetch acts as a background update.
|
|
|
|
fetchError.value = null; // Clear previous error before new attempt
|
|
|
|
try {
|
|
const response = await apiClient.get(API_ENDPOINTS.GROUPS.BASE);
|
|
const freshGroups = response.data as Group[];
|
|
groups.value = freshGroups;
|
|
|
|
// Update cache
|
|
cachedGroups.value = freshGroups;
|
|
cachedTimestamp.value = Date.now();
|
|
} catch (err: any) {
|
|
let message = t('groupsPage.errors.fetchFailed');
|
|
// Attempt to get a more specific error message from the API response
|
|
if (err.response && err.response.data && err.response.data.detail) {
|
|
message = err.response.data.detail;
|
|
} else if (err.message) {
|
|
message = err.message;
|
|
}
|
|
fetchError.value = message;
|
|
// If fetch fails, groups.value will retain its current state (either from cache or empty).
|
|
// The template will then show the error message.
|
|
} finally {
|
|
isInitiallyLoading.value = false; // Mark loading as complete for this attempt
|
|
}
|
|
};
|
|
|
|
watch(activeTab, (newTab) => {
|
|
if (showCreateGroupDialog.value) {
|
|
createGroupFormError.value = null;
|
|
joinGroupFormError.value = null;
|
|
nextTick(() => {
|
|
if (newTab === 'create') {
|
|
newGroupNameInputRef.value?.focus();
|
|
} else {
|
|
joinInviteCodeInputRef.value?.focus();
|
|
}
|
|
});
|
|
}
|
|
});
|
|
|
|
const openCreateGroupDialog = () => {
|
|
activeTab.value = 'create'; // Default to create tab
|
|
newGroupName.value = '';
|
|
createGroupFormError.value = null;
|
|
inviteCodeToJoin.value = '';
|
|
joinGroupFormError.value = null;
|
|
showCreateGroupDialog.value = true;
|
|
nextTick(() => {
|
|
newGroupNameInputRef.value?.focus();
|
|
});
|
|
};
|
|
|
|
const closeCreateGroupDialog = () => {
|
|
showCreateGroupDialog.value = false;
|
|
};
|
|
|
|
onClickOutside(createGroupModalRef, closeCreateGroupDialog);
|
|
|
|
const handleCreateGroup = async () => {
|
|
if (!newGroupName.value.trim()) {
|
|
createGroupFormError.value = t('groupsPage.errors.groupNameRequired');
|
|
newGroupNameInputRef.value?.focus();
|
|
return;
|
|
}
|
|
createGroupFormError.value = null;
|
|
creatingGroup.value = true;
|
|
try {
|
|
const response = await apiClient.post(API_ENDPOINTS.GROUPS.BASE, {
|
|
name: newGroupName.value,
|
|
});
|
|
const newGroup = response.data as Group;
|
|
if (newGroup && newGroup.id && newGroup.name) {
|
|
groups.value.push(newGroup);
|
|
closeCreateGroupDialog();
|
|
notificationStore.addNotification({ message: t('groupsPage.notifications.groupCreatedSuccess', { groupName: newGroup.name }), type: 'success' });
|
|
// Update cache
|
|
cachedGroups.value = groups.value;
|
|
cachedTimestamp.value = Date.now();
|
|
} else {
|
|
throw new Error('Invalid data received from server.');
|
|
}
|
|
} catch (error: any) {
|
|
const message = error.response?.data?.detail || (error instanceof Error ? error.message : t('groupsPage.errors.createFailed'));
|
|
createGroupFormError.value = message;
|
|
console.error('Error creating group:', error);
|
|
notificationStore.addNotification({ message, type: 'error' });
|
|
} finally {
|
|
creatingGroup.value = false;
|
|
}
|
|
};
|
|
|
|
const handleJoinGroup = async () => {
|
|
if (!inviteCodeToJoin.value.trim()) {
|
|
joinGroupFormError.value = t('groupsPage.errors.inviteCodeRequired');
|
|
joinInviteCodeInputRef.value?.focus();
|
|
return;
|
|
}
|
|
joinGroupFormError.value = null;
|
|
joiningGroup.value = true;
|
|
try {
|
|
const response = await apiClient.post(API_ENDPOINTS.INVITES.ACCEPT(inviteCodeToJoin.value));
|
|
const joinedGroup = response.data as Group; // Adjust based on actual API response for joined group
|
|
if (joinedGroup && joinedGroup.id && joinedGroup.name) {
|
|
// Check if group already in list to prevent duplicates if API returns the group info
|
|
if (!groups.value.find(g => g.id === joinedGroup.id)) {
|
|
groups.value.push(joinedGroup);
|
|
}
|
|
inviteCodeToJoin.value = '';
|
|
notificationStore.addNotification({ message: t('groupsPage.notifications.joinSuccessNamed', { groupName: joinedGroup.name }), type: 'success' });
|
|
// Update cache
|
|
cachedGroups.value = groups.value;
|
|
cachedTimestamp.value = Date.now();
|
|
closeCreateGroupDialog();
|
|
} else {
|
|
// If API returns only success message, re-fetch groups
|
|
await fetchGroups(); // Refresh the list of groups
|
|
inviteCodeToJoin.value = '';
|
|
notificationStore.addNotification({ message: t('groupsPage.notifications.joinSuccessGeneric'), type: 'success' });
|
|
closeCreateGroupDialog();
|
|
}
|
|
} catch (error: any) {
|
|
const message = error.response?.data?.detail || (error instanceof Error ? error.message : t('groupsPage.errors.joinFailed'));
|
|
joinGroupFormError.value = message;
|
|
console.error('Error joining group:', error);
|
|
notificationStore.addNotification({ message, type: 'error' });
|
|
} finally {
|
|
joiningGroup.value = false;
|
|
}
|
|
};
|
|
|
|
const selectGroup = (group: Group) => {
|
|
router.push(`/groups/${group.id}`);
|
|
};
|
|
|
|
const openCreateListDialog = (group: Group) => {
|
|
// Ensure we have the latest groups data
|
|
fetchGroups().then(() => {
|
|
availableGroupsForModal.value = [{
|
|
label: group.name,
|
|
value: group.id
|
|
}];
|
|
showCreateListModal.value = true;
|
|
});
|
|
};
|
|
|
|
const onListCreated = (newList: any) => {
|
|
notificationStore.addNotification({
|
|
message: t('groupsPage.notifications.listCreatedSuccess', { listName: newList.name }),
|
|
type: 'success'
|
|
});
|
|
// Optionally refresh the groups list to show the new list
|
|
fetchGroups(); // Refresh data, isRetryAttempt will be false
|
|
};
|
|
|
|
onMounted(() => {
|
|
// groups might have been populated from cache synchronously above.
|
|
// isInitiallyLoading reflects whether cache was used or if we need to show a spinner.
|
|
// Call fetchGroups to get fresh data or perform initial load if cache was missed.
|
|
fetchGroups();
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
.page-padding {
|
|
padding: 1rem;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.mb-3 {
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.mt-4 {
|
|
margin-top: 2rem;
|
|
}
|
|
|
|
.mt-1 {
|
|
margin-top: 0.5rem;
|
|
}
|
|
|
|
.ml-2 {
|
|
margin-left: 0.5rem;
|
|
}
|
|
|
|
/* Responsive grid for cards */
|
|
.neo-groups-grid {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 2rem;
|
|
justify-content: center;
|
|
align-items: flex-start;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
/* Card styles */
|
|
.neo-group-card,
|
|
.neo-create-group-card {
|
|
border-radius: 18px;
|
|
box-shadow: 6px 6px 0 #111;
|
|
max-width: 420px;
|
|
min-width: 260px;
|
|
width: 100%;
|
|
margin: 0 auto;
|
|
border: none;
|
|
background: var(--light);
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 0;
|
|
padding: 2rem 2rem 1.5rem 2rem;
|
|
cursor: pointer;
|
|
transition: transform 0.1s ease-in-out, box-shadow 0.1s ease-in-out;
|
|
border: 3px solid #111;
|
|
}
|
|
|
|
.neo-group-card:hover {
|
|
transform: translateY(-3px);
|
|
box-shadow: 6px 9px 0 #111;
|
|
}
|
|
|
|
.neo-group-header {
|
|
font-weight: 900;
|
|
font-size: 1.25rem;
|
|
/* margin-bottom: 1rem; */
|
|
letter-spacing: 0.5px;
|
|
text-transform: none;
|
|
}
|
|
|
|
.neo-group-actions {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.neo-create-group-card {
|
|
border: 3px dashed #111;
|
|
background: var(--light);
|
|
padding: 2.5rem 0;
|
|
text-align: center;
|
|
font-weight: 900;
|
|
font-size: 1.1rem;
|
|
color: #222;
|
|
cursor: pointer;
|
|
margin-top: 0;
|
|
transition: background 0.1s;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 120px;
|
|
margin-bottom: 2.5rem;
|
|
}
|
|
|
|
.neo-create-group-card:hover {
|
|
background: #f0f0f0;
|
|
}
|
|
|
|
.form-error-text {
|
|
color: var(--danger);
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
.flex-grow {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
details>summary {
|
|
list-style: none;
|
|
}
|
|
|
|
details>summary::-webkit-details-marker {
|
|
display: none;
|
|
}
|
|
|
|
.expand-icon {
|
|
transition: transform 0.2s ease-in-out;
|
|
}
|
|
|
|
details[open] .expand-icon {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
.cursor-pointer {
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Modal Tabs */
|
|
.modal-tabs {
|
|
display: flex;
|
|
border-bottom: 1px solid #eee;
|
|
margin: 0 1.5rem;
|
|
}
|
|
|
|
.modal-tabs button {
|
|
background: none;
|
|
border: none;
|
|
padding: 0.75rem 0.25rem;
|
|
margin-right: 1.5rem;
|
|
cursor: pointer;
|
|
font-size: 1rem;
|
|
color: var(--text-color-secondary);
|
|
border-bottom: 3px solid transparent;
|
|
margin-bottom: -2px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.modal-tabs button.active {
|
|
color: var(--primary);
|
|
border-bottom-color: var(--primary);
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* Responsive adjustments */
|
|
@media (max-width: 900px) {
|
|
.neo-groups-grid {
|
|
gap: 1.2rem;
|
|
}
|
|
|
|
.neo-group-card,
|
|
.neo-create-group-card {
|
|
max-width: 95vw;
|
|
min-width: 180px;
|
|
padding-left: 1rem;
|
|
padding-right: 1rem;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 600px) {
|
|
.page-padding {
|
|
padding: 0.5rem;
|
|
}
|
|
|
|
.neo-group-card,
|
|
.neo-create-group-card {
|
|
padding: 1.2rem 0.7rem 1rem 0.7rem;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.neo-group-header {
|
|
font-size: 1.1rem;
|
|
}
|
|
}
|
|
</style> |