working leantime widget 23
This commit is contained in:
Alma
parent
3f618d121a
commit
c4f78d0595
@ -65,6 +65,22 @@ export const authOptions: NextAuthOptions = {
|
||||
}
|
||||
|
||||
try {
|
||||
// Token has expired, try to refresh it
|
||||
function isNonEmptyString(value: string | undefined): value is string {
|
||||
return typeof value === 'string' && value.length > 0;
|
||||
}
|
||||
|
||||
const clientId = process.env.KEYCLOAK_CLIENT_ID;
|
||||
const clientSecret = process.env.KEYCLOAK_CLIENT_SECRET;
|
||||
|
||||
if (!isNonEmptyString(clientId) || !isNonEmptyString(clientSecret)) {
|
||||
throw new Error("Missing required environment variables for token refresh");
|
||||
}
|
||||
|
||||
// After the type guard check, we can safely assert these as strings
|
||||
const validClientId = clientId as string;
|
||||
const validClientSecret = clientSecret as string;
|
||||
|
||||
const response = await fetch(
|
||||
`${process.env.KEYCLOAK_BASE_URL}/realms/${process.env.KEYCLOAK_REALM}/protocol/openid-connect/token`,
|
||||
{
|
||||
@ -74,8 +90,8 @@ export const authOptions: NextAuthOptions = {
|
||||
},
|
||||
body: new URLSearchParams({
|
||||
grant_type: "refresh_token",
|
||||
client_id: process.env.KEYCLOAK_CLIENT_ID!,
|
||||
client_secret: process.env.KEYCLOAK_CLIENT_SECRET!,
|
||||
client_id: validClientId,
|
||||
client_secret: validClientSecret,
|
||||
refresh_token: token.refreshToken as string,
|
||||
}),
|
||||
}
|
||||
@ -83,7 +99,10 @@ export const authOptions: NextAuthOptions = {
|
||||
|
||||
const tokens = await response.json();
|
||||
|
||||
if (!response.ok) throw tokens;
|
||||
if (!response.ok) {
|
||||
console.error("Token refresh failed:", tokens);
|
||||
throw new Error("RefreshAccessTokenError");
|
||||
}
|
||||
|
||||
return {
|
||||
...token,
|
||||
@ -93,12 +112,18 @@ export const authOptions: NextAuthOptions = {
|
||||
};
|
||||
} catch (error) {
|
||||
console.error("Error refreshing token:", error);
|
||||
return { ...token, error: "RefreshAccessTokenError" };
|
||||
|
||||
// Return token with error flag - this will trigger a redirect to sign-in
|
||||
return {
|
||||
...token,
|
||||
error: "RefreshAccessTokenError",
|
||||
};
|
||||
}
|
||||
},
|
||||
|
||||
async session({ session, token }) {
|
||||
if (token.error) {
|
||||
// Force sign out if there was a refresh error
|
||||
throw new Error("RefreshAccessTokenError");
|
||||
}
|
||||
|
||||
|
||||
@ -5,57 +5,52 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { RefreshCw } from "lucide-react";
|
||||
|
||||
interface StatusLabel {
|
||||
interface Task {
|
||||
id: string;
|
||||
name: string;
|
||||
class: string;
|
||||
statusType: string;
|
||||
kanbanCol: boolean | string;
|
||||
sortKey: number | string;
|
||||
}
|
||||
|
||||
interface Project {
|
||||
id: number;
|
||||
name: string;
|
||||
labels: StatusLabel[];
|
||||
headline: string;
|
||||
projectName: string;
|
||||
projectId: number;
|
||||
status: string;
|
||||
dueDate: string | null;
|
||||
milestone?: string;
|
||||
}
|
||||
|
||||
export function Flow() {
|
||||
const [projects, setProjects] = useState<Project[]>([]);
|
||||
const [tasks, setTasks] = useState<Task[]>([]);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [refreshing, setRefreshing] = useState(false);
|
||||
const [retryTimeout, setRetryTimeout] = useState<NodeJS.Timeout | null>(null);
|
||||
|
||||
const fetchStatusLabels = async (isRefresh = false) => {
|
||||
const fetchTasks = async (isRefresh = false) => {
|
||||
try {
|
||||
if (isRefresh) {
|
||||
setRefreshing(true);
|
||||
}
|
||||
const response = await fetch('/api/leantime/status-labels');
|
||||
const response = await fetch('/api/leantime/tasks');
|
||||
|
||||
if (response.status === 429) {
|
||||
const retryAfter = parseInt(response.headers.get('retry-after') || '60');
|
||||
const timeout = setTimeout(() => fetchStatusLabels(), retryAfter * 1000);
|
||||
const timeout = setTimeout(() => fetchTasks(), retryAfter * 1000);
|
||||
setRetryTimeout(timeout);
|
||||
setError(`Rate limit exceeded. Retrying in ${retryAfter} seconds...`);
|
||||
return;
|
||||
}
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to fetch status labels');
|
||||
throw new Error('Failed to fetch tasks');
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
if (data.projects && Array.isArray(data.projects)) {
|
||||
setProjects(data.projects);
|
||||
if (data.tasks && Array.isArray(data.tasks)) {
|
||||
setTasks(data.tasks);
|
||||
} else {
|
||||
setProjects([]);
|
||||
setTasks([]);
|
||||
}
|
||||
setError(null);
|
||||
} catch (err) {
|
||||
console.error('Error fetching status labels:', err);
|
||||
setError('Failed to fetch status labels');
|
||||
console.error('Error fetching tasks:', err);
|
||||
setError('Failed to fetch tasks');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
setRefreshing(false);
|
||||
@ -63,7 +58,7 @@ export function Flow() {
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchStatusLabels();
|
||||
fetchTasks();
|
||||
return () => {
|
||||
if (retryTimeout) {
|
||||
clearTimeout(retryTimeout);
|
||||
@ -71,6 +66,38 @@ export function Flow() {
|
||||
};
|
||||
}, []);
|
||||
|
||||
// Group tasks by project
|
||||
const tasksByProject = tasks.reduce((acc, task) => {
|
||||
if (!acc[task.projectName]) {
|
||||
acc[task.projectName] = [];
|
||||
}
|
||||
acc[task.projectName].push(task);
|
||||
return acc;
|
||||
}, {} as Record<string, Task[]>);
|
||||
|
||||
const getStatusClass = (status: string): string => {
|
||||
switch (status.toLowerCase()) {
|
||||
case 'new':
|
||||
return 'bg-blue-100 text-blue-800';
|
||||
case 'in_progress':
|
||||
return 'bg-yellow-100 text-yellow-800';
|
||||
case 'completed':
|
||||
return 'bg-green-100 text-green-800';
|
||||
default:
|
||||
return 'bg-gray-100 text-gray-800';
|
||||
}
|
||||
};
|
||||
|
||||
const formatDate = (dateString: string | null): string => {
|
||||
if (!dateString) return 'No due date';
|
||||
const date = new Date(dateString);
|
||||
return date.toLocaleDateString('en-US', {
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
year: 'numeric'
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<Card className="transition-transform duration-500 ease-in-out transform hover:scale-105">
|
||||
<CardHeader className="flex flex-row items-center justify-between pb-2">
|
||||
@ -78,7 +105,7 @@ export function Flow() {
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => fetchStatusLabels(true)}
|
||||
onClick={() => fetchTasks(true)}
|
||||
disabled={refreshing || !!retryTimeout}
|
||||
className={refreshing ? 'animate-spin' : ''}
|
||||
>
|
||||
@ -92,21 +119,27 @@ export function Flow() {
|
||||
</div>
|
||||
) : error ? (
|
||||
<div className="text-center text-sm text-red-500">{error}</div>
|
||||
) : projects.length === 0 ? (
|
||||
<div className="text-center text-sm text-gray-500">No status labels found</div>
|
||||
) : Object.keys(tasksByProject).length === 0 ? (
|
||||
<div className="text-center text-sm text-gray-500">No tasks found</div>
|
||||
) : (
|
||||
<div className="space-y-6">
|
||||
{projects.map((project) => (
|
||||
<div key={project.id} className="space-y-2">
|
||||
<h3 className="font-medium text-sm">{project.name}</h3>
|
||||
{Object.entries(tasksByProject).map(([projectName, projectTasks]) => (
|
||||
<div key={projectName} className="space-y-2">
|
||||
<h3 className="font-medium text-sm">{projectName}</h3>
|
||||
<div className="space-y-2">
|
||||
{project.labels.map((label) => (
|
||||
<div key={`${project.id}-${label.id}`} className="flex justify-between items-start text-sm border-b border-gray-100 pb-2">
|
||||
{projectTasks.map((task) => (
|
||||
<div key={task.id} className="flex justify-between items-start text-sm border-b border-gray-100 pb-2">
|
||||
<div className="flex-1">
|
||||
<div className="font-medium">{label.name}</div>
|
||||
<div className="font-medium">{task.headline}</div>
|
||||
<div className="text-xs text-gray-500 mt-1">
|
||||
{task.milestone && (
|
||||
<span className="mr-2">{task.milestone}</span>
|
||||
)}
|
||||
<span>{formatDate(task.dueDate)}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className={`ml-4 px-2 py-1 rounded text-xs ${getLabelClass(label.class)}`}>
|
||||
{label.statusType}
|
||||
<div className={`ml-4 px-2 py-1 rounded text-xs ${getStatusClass(task.status)}`}>
|
||||
{task.status.toUpperCase()}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
@ -118,19 +151,4 @@ export function Flow() {
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
function getLabelClass(className: string): string {
|
||||
const classMap: Record<string, string> = {
|
||||
'label-default': 'bg-gray-100 text-gray-800',
|
||||
'label-success': 'bg-green-100 text-green-800',
|
||||
'label-warning': 'bg-yellow-100 text-yellow-800',
|
||||
'label-info': 'bg-blue-100 text-blue-800',
|
||||
'label-blue': 'bg-blue-100 text-blue-800',
|
||||
'label-darker-blue': 'bg-indigo-100 text-indigo-800',
|
||||
'label-dark-green': 'bg-emerald-100 text-emerald-800',
|
||||
'label-important': 'bg-red-100 text-red-800',
|
||||
};
|
||||
|
||||
return classMap[className] || 'bg-gray-100 text-gray-800';
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user