feat: Implement Schedule Maintenance Management and Tab Dashboard
This commit is contained in:
Tola Leng
+185
@@ -0,0 +1,185 @@
|
||||
|
||||
import React, { useEffect } from 'react';
|
||||
import { useLanguage } from '@/contexts/LanguageContext';
|
||||
import { useFormContext } from 'react-hook-form';
|
||||
import {
|
||||
FormField,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormControl,
|
||||
FormMessage,
|
||||
FormDescription
|
||||
} from '@/components/ui/form';
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { userService } from '@/services/userService';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { X, Users } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
|
||||
|
||||
export const AssignedUsersField = () => {
|
||||
const { t } = useLanguage();
|
||||
const form = useFormContext();
|
||||
|
||||
// Ensure assigned_users is initialized as an array
|
||||
useEffect(() => {
|
||||
const currentValue = form.getValues('assigned_users');
|
||||
console.log("Initial assigned_users value:", currentValue);
|
||||
|
||||
// Initialize as empty array if no value or invalid value
|
||||
if (!currentValue || !Array.isArray(currentValue)) {
|
||||
console.log("Initializing assigned_users as empty array");
|
||||
form.setValue('assigned_users', [], { shouldValidate: false, shouldDirty: true });
|
||||
}
|
||||
}, [form]);
|
||||
|
||||
console.log("Current form values:", form.getValues());
|
||||
console.log("Current assigned_users:", form.getValues('assigned_users'));
|
||||
|
||||
// Fetch users for the assignment dropdown
|
||||
const { data: users = [], isLoading } = useQuery({
|
||||
queryKey: ['users'],
|
||||
queryFn: async () => {
|
||||
try {
|
||||
const usersList = await userService.getUsers();
|
||||
console.log("Fetched users for assignment:", usersList);
|
||||
return Array.isArray(usersList) ? usersList : [];
|
||||
} catch (error) {
|
||||
console.error("Failed to fetch users:", error);
|
||||
return [];
|
||||
}
|
||||
},
|
||||
staleTime: 300000 // Cache for 5 minutes to reduce API calls
|
||||
});
|
||||
|
||||
// Get the currently selected assigned users from the form
|
||||
const selectedUserIds = Array.isArray(form.watch('assigned_users'))
|
||||
? form.watch('assigned_users')
|
||||
: [];
|
||||
|
||||
console.log("Selected user IDs:", selectedUserIds);
|
||||
|
||||
// Function to add a user
|
||||
const addUser = (userId: string) => {
|
||||
const currentValues = Array.isArray(form.getValues('assigned_users'))
|
||||
? [...form.getValues('assigned_users')]
|
||||
: [];
|
||||
|
||||
if (!currentValues.includes(userId)) {
|
||||
console.log("Adding user:", userId);
|
||||
form.setValue('assigned_users', [...currentValues, userId], { shouldValidate: true, shouldDirty: true });
|
||||
}
|
||||
};
|
||||
|
||||
// Function to remove a user
|
||||
const removeUser = (userId: string) => {
|
||||
const currentValues = Array.isArray(form.getValues('assigned_users'))
|
||||
? [...form.getValues('assigned_users')]
|
||||
: [];
|
||||
|
||||
console.log("Removing user:", userId);
|
||||
form.setValue(
|
||||
'assigned_users',
|
||||
currentValues.filter(id => id !== userId),
|
||||
{ shouldValidate: true, shouldDirty: true }
|
||||
);
|
||||
};
|
||||
|
||||
// Get selected users data
|
||||
const selectedUsers = users.filter(user => selectedUserIds.includes(user.id));
|
||||
console.log("Matched selected users:", selectedUsers);
|
||||
|
||||
// Function to get user initials from name
|
||||
const getUserInitials = (user: any): string => {
|
||||
if (user.full_name) {
|
||||
const nameParts = user.full_name.split(' ');
|
||||
if (nameParts.length > 1) {
|
||||
return `${nameParts[0][0]}${nameParts[1][0]}`.toUpperCase();
|
||||
}
|
||||
return user.full_name.substring(0, 2).toUpperCase();
|
||||
}
|
||||
return user.username.substring(0, 2).toUpperCase();
|
||||
};
|
||||
|
||||
return (
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="assigned_users"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex flex-col">
|
||||
<FormLabel className="flex items-center gap-1">
|
||||
<Users className="h-4 w-4" /> {t('assignedPersonnel')}
|
||||
</FormLabel>
|
||||
<div className="space-y-3">
|
||||
<Select onValueChange={addUser}>
|
||||
<FormControl>
|
||||
<SelectTrigger className="w-full">
|
||||
<SelectValue placeholder={t('selectAssignedUsers')} />
|
||||
</SelectTrigger>
|
||||
</FormControl>
|
||||
<SelectContent>
|
||||
{isLoading ? (
|
||||
<div className="py-2 px-2 text-sm">{t('loading')}</div>
|
||||
) : users.length === 0 ? (
|
||||
<div className="py-2 px-2 text-sm">{t('noUsersFound')}</div>
|
||||
) : (
|
||||
users.map((user) => (
|
||||
<SelectItem
|
||||
key={user.id}
|
||||
value={user.id}
|
||||
disabled={selectedUserIds.includes(user.id)}
|
||||
>
|
||||
{user.full_name || user.username}
|
||||
</SelectItem>
|
||||
))
|
||||
)}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
{selectedUsers.length > 0 ? (
|
||||
<div className="flex flex-wrap gap-2 mt-2 border p-2 rounded-md bg-muted/50">
|
||||
{selectedUsers.map((user) => (
|
||||
<Badge key={user.id} variant="secondary" className="flex items-center gap-1 py-1 px-2">
|
||||
<Avatar className="h-5 w-5 mr-1">
|
||||
<AvatarImage src={user.avatar} alt={user.full_name || user.username} />
|
||||
<AvatarFallback className="text-[10px]">
|
||||
{getUserInitials(user)}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<span>{user.full_name || user.username}</span>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-4 w-4 p-0 ml-1 hover:bg-transparent hover:opacity-70"
|
||||
onClick={() => removeUser(user.id)}
|
||||
type="button"
|
||||
>
|
||||
<X className="h-3 w-3" />
|
||||
<span className="sr-only">{t('remove')}</span>
|
||||
</Button>
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-sm text-muted-foreground italic p-2">
|
||||
{t('noAssignedUsers')}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<FormDescription>
|
||||
{t('assignedPersonnelDescription')}
|
||||
</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user