Skip to content

Commit

Permalink
Merge pull request #2007 from ever-co/develop
Browse files Browse the repository at this point in the history
Release
  • Loading branch information
evereq authored Dec 15, 2023
2 parents 2ef11da + 8a478b8 commit 2206139
Show file tree
Hide file tree
Showing 28 changed files with 365 additions and 290 deletions.
6 changes: 6 additions & 0 deletions apps/web/app/constants.ts
Original file line number Diff line number Diff line change
Expand Up @@ -166,6 +166,12 @@ export const APPLICATION_LANGUAGES_CODE = [
'es'
];

export enum KanbanTabs {
TODAY = 'TODAY',
YESTERDAY = 'YESTERDAY',
TOMORROW = 'TOMORROW'
}

export enum IssuesView {
CARDS = 'CARDS',
TABLE = 'TABLE',
Expand Down
44 changes: 14 additions & 30 deletions apps/web/components/ui/data-table.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,42 +12,26 @@ import {
getPaginationRowModel,
getSortedRowModel,
useReactTable
} from "@tanstack/react-table"
} from '@tanstack/react-table';

import {
Table,
TableHeader,
TableRow,
TableHead,
TableCell,
TableBody,
TableFooter,
} from './table';
import { Table, TableHeader, TableRow, TableHead, TableCell, TableBody, TableFooter } from './table';

interface DataTableProps<TData, TValue> {
columns: ColumnDef<TData, TValue>[]
data: TData[],
footerRows?: React.ReactNode[],
columns: ColumnDef<TData, TValue>[];
data: TData[];
footerRows?: React.ReactNode[];
isError?: boolean;
noResultsMessage?: {
heading: string;
content: string;
}
};
}

function DataTable<TData, TValue>({
columns,
data,
footerRows,
}: DataTableProps<TData, TValue>) {

const [rowSelection, setRowSelection] = React.useState({})
const [columnVisibility, setColumnVisibility] =
React.useState<VisibilityState>({})
const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
[]
)
const [sorting, setSorting] = React.useState<SortingState>([])
function DataTable<TData, TValue>({ columns, data, footerRows }: DataTableProps<TData, TValue>) {
const [rowSelection, setRowSelection] = React.useState({});
const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({});
const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);
const [sorting, setSorting] = React.useState<SortingState>([]);

const table = useReactTable({
data,
Expand All @@ -56,7 +40,7 @@ function DataTable<TData, TValue>({
sorting,
columnVisibility,
rowSelection,
columnFilters,
columnFilters
},
enableRowSelection: true,
onRowSelectionChange: setRowSelection,
Expand All @@ -68,8 +52,8 @@ function DataTable<TData, TValue>({
getPaginationRowModel: getPaginationRowModel(),
getSortedRowModel: getSortedRowModel(),
getFacetedRowModel: getFacetedRowModel(),
getFacetedUniqueValues: getFacetedUniqueValues(),
})
getFacetedUniqueValues: getFacetedUniqueValues()
});

return (
<Table className="border-transparent bg-light--theme-light dark:bg-dark--theme-light mt-8 w-full rounded-2xl">
Expand Down
9 changes: 9 additions & 0 deletions apps/web/components/ui/svgs/vertificalline.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
export default function VerticalLine() {
return (
<>
<svg xmlns="http://www.w3.org/2000/svg" width="2" height="41" viewBox="0 0 2 41" fill="none">
<path d="M1 0.5V40.5" stroke="black" strokeOpacity="0.1"/>
</svg>
</>
)
}
169 changes: 65 additions & 104 deletions apps/web/components/ui/table.tsx
Original file line number Diff line number Diff line change
@@ -1,115 +1,76 @@
import * as React from "react"
import * as React from 'react';

import { clsxm } from '@app/utils';

const Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(
({ className, ...props }, ref) => (
<div className="relative w-full overflow-auto">
<table ref={ref} className={clsxm('w-full caption-bottom text-sm', className)} {...props} />
</div>
)
);
Table.displayName = 'Table';

const Table = React.forwardRef<
HTMLTableElement,
React.HTMLAttributes<HTMLTableElement>
>(({ className, ...props }, ref) => (
<div className="relative w-full overflow-auto">
<table
ref={ref}
className={clsxm("w-full caption-bottom text-sm", className)}
{...props}
/>
</div>
))
Table.displayName = "Table"
const TableHeader = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
({ className, ...props }, ref) => <thead ref={ref} className={clsxm('[&_tr]:border-b', className)} {...props} />
);
TableHeader.displayName = 'TableHeader';

const TableHeader = React.forwardRef<
HTMLTableSectionElement,
React.HTMLAttributes<HTMLTableSectionElement>
>(({ className, ...props }, ref) => (
<thead ref={ref} className={clsxm("[&_tr]:border-b", className)} {...props} />
))
TableHeader.displayName = "TableHeader"
const TableBody = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
({ className, ...props }, ref) => (
<tbody ref={ref} className={clsxm('[&_tr:last-child]:border-0', className)} {...props} />
)
);
TableBody.displayName = 'TableBody';

const TableBody = React.forwardRef<
HTMLTableSectionElement,
React.HTMLAttributes<HTMLTableSectionElement>
>(({ className, ...props }, ref) => (
<tbody
ref={ref}
className={clsxm("[&_tr:last-child]:border-0", className)}
{...props}
/>
))
TableBody.displayName = "TableBody"
const TableFooter = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
({ className, ...props }, ref) => (
<tfoot ref={ref} className={clsxm('bg-primary font-medium text-primary-foreground', className)} {...props} />
)
);
TableFooter.displayName = 'TableFooter';

const TableFooter = React.forwardRef<
HTMLTableSectionElement,
React.HTMLAttributes<HTMLTableSectionElement>
>(({ className, ...props }, ref) => (
<tfoot
ref={ref}
className={clsxm("bg-primary font-medium text-primary-foreground", className)}
{...props}
/>
))
TableFooter.displayName = "TableFooter"
const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTMLTableRowElement>>(
({ className, ...props }, ref) => (
<tr
ref={ref}
className={clsxm('border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted', className)}
{...props}
/>
)
);
TableRow.displayName = 'TableRow';

const TableRow = React.forwardRef<
HTMLTableRowElement,
React.HTMLAttributes<HTMLTableRowElement>
>(({ className, ...props }, ref) => (
<tr
ref={ref}
className={clsxm(
"border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
className
)}
{...props}
/>
))
TableRow.displayName = "TableRow"
const TableHead = React.forwardRef<HTMLTableCellElement, React.ThHTMLAttributes<HTMLTableCellElement>>(
({ className, ...props }, ref) => (
<th
ref={ref}
className={clsxm(
'h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0',
className
)}
{...props}
/>
)
);
TableHead.displayName = 'TableHead';

const TableHead = React.forwardRef<
HTMLTableCellElement,
React.ThHTMLAttributes<HTMLTableCellElement>
>(({ className, ...props }, ref) => (
<th
ref={ref}
className={clsxm(
"h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
className
)}
{...props}
/>
))
TableHead.displayName = "TableHead"
const TableCell = React.forwardRef<HTMLTableCellElement, React.TdHTMLAttributes<HTMLTableCellElement>>(
({ className, ...props }, ref) => (
<td
ref={ref}
className={clsxm('p-4 align-middle [&:has([role=checkbox])]:pr-0 !w-full', className)}
{...props}
/>
)
);
TableCell.displayName = 'TableCell';

const TableCell = React.forwardRef<
HTMLTableCellElement,
React.TdHTMLAttributes<HTMLTableCellElement>
>(({ className, ...props }, ref) => (
<td
ref={ref}
className={clsxm("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
{...props}
/>
))
TableCell.displayName = "TableCell"
const TableCaption = React.forwardRef<HTMLTableCaptionElement, React.HTMLAttributes<HTMLTableCaptionElement>>(
({ className, ...props }, ref) => (
<caption ref={ref} className={clsxm('mt-4 text-sm text-muted-foreground', className)} {...props} />
)
);
TableCaption.displayName = 'TableCaption';

const TableCaption = React.forwardRef<
HTMLTableCaptionElement,
React.HTMLAttributes<HTMLTableCaptionElement>
>(({ className, ...props }, ref) => (
<caption
ref={ref}
className={clsxm("mt-4 text-sm text-muted-foreground", className)}
{...props}
/>
))
TableCaption.displayName = "TableCaption"

export {
Table,
TableHeader,
TableBody,
TableFooter,
TableHead,
TableRow,
TableCell,
TableCaption,
}
export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption };
9 changes: 2 additions & 7 deletions apps/web/lib/components/Kanban.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -239,7 +239,7 @@ export const EmptyKanbanDroppable = ({index,title, items}: {
{...provided.dragHandleProps}
aria-label={`${title}`}
>
<span className="">
<span>
{title}
</span>
</h2>
Expand All @@ -248,12 +248,7 @@ export const EmptyKanbanDroppable = ({index,title, items}: {
</div>

</header>
<KanbanDroppable
title={title}
droppableId={title}
type={'TASK'}
content={items}
/>

</>
:
null
Expand Down
20 changes: 11 additions & 9 deletions apps/web/lib/components/kanban-card.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,7 @@ function TagList({tags}: {
}


const stackImages = (index: number, length: number) => {
export const stackImages = (index: number, length: number) => {
const imageRadius = 20;

const total_length = ((length+1) * imageRadius);
Expand Down Expand Up @@ -178,7 +178,7 @@ export default function Item(props: any) {
aria-label={`${item.status.name} ${item.content}`}
>
<div className="flex gap-1.5 border-b border-b-gray-200 pb-4">
<div className="flex flex-col justify- gap-5 grow">
<div className="flex flex-col gap-5 grow">
{item.tags && (
<TagList tags={item.tags}/>
)}
Expand All @@ -189,17 +189,19 @@ export default function Item(props: any) {
} rounded-sm mr-1`}/>

<span className="text-grey text-normal mr-1">#{item.number}</span>
<span className="text-black dark:text-white text-normal capitalize mr-2">{item.title}</span>
<span className="text-black dark:text-white text-normal capitalize mr-2 bg-blue line-clamp-2">
{item.title}
</span>
<Priority level={1}/>
</div>
</div>
<div className="flex flex-col justify-between w-[48px] items-end">
<div className="flex flex-col w-[48px] gap-4 items-end">
<VerticalThreeDot/>

<CircularProgress percentage={10}/>
</div>
</div>
<div className="flex flex-row justify-between items-center pt-5 pb-2 h-fit">
<div className="flex flex-row justify-between items-center pt-4 h-fit">

{item.status === TaskStatus.INPROGRESS ? (
<div className="flex flex-row items-center gap-2">
Expand All @@ -214,18 +216,18 @@ export default function Item(props: any) {
)}

<div className="relative ">
<div className="w-10 flex h-fit flex-row justify-end items-center relative bg-primary">
<div className="w-10 flex h-fit flex-row justify-end items-center relative">
{item.members.map((option: any, index: number)=> {
return (
<div className="relative w-[40px] h-[40px]" key={index}>
<Image
key={index}
src={option.user.imageUrl}
alt={`${option.user.firstName} avatar`}
height={40}
width={40}
fill={true}
className="absolute rounded-full border-2 border-white"
style={stackImages(index, item.members.length)}
/>
</div>
)
})}
</div>
Expand Down
5 changes: 4 additions & 1 deletion apps/web/lib/components/pagination.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,10 @@ export function Paginate({ total, itemsPerPage = 10, onPageChange, itemOffset, e
const pageCount: number = Math.ceil(total / itemsPerPage);

return (
<div className="flex items-center justify-between pt-4" aria-label="Table navigation">
<div
className="flex flex-col md:flex-row gap-2 items-center justify-between pt-4"
aria-label="Table navigation"
>
<ReactPaginate
breakLabel=". . ."
nextLabel={
Expand Down
2 changes: 1 addition & 1 deletion apps/web/lib/features/task/task-assign-popover.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ export function TaskUnOrAssignPopover({
? `${t('common.ASSIGN_TASK_TO')} ${userProfile?.employee.user?.name}`
: ''
}
className="bg-light--theme-light dark:bg-dark--theme-light p-5 rounded-xl w-[70vw] h-[70vh] justify-start"
className="bg-light--theme-light dark:bg-dark--theme-light p-5 rounded-xl w-full md:w-[70vw] h-[70vh] justify-start"
titleClass="font-normal"
>
<TaskInput
Expand Down
Loading

0 comments on commit 2206139

Please sign in to comment.