Resume
/
subman-nextjs
2
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

render textinputcell only on large screens

This commit is contained in:
andrzej 2024-09-24 12:25:31 +02:00
parent d7a60b331c
commit def21a236c
11 changed files with 78 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package-lock.json generated
View File

@ -6570,7 +6570,6 @@
"version": "14.2.13",
"resolved": "https://registry.npmjs.org/next/-/next-14.2.13.tgz",
"integrity": "sha512-BseY9YNw8QJSwLYD7hlZzl6QVDoSFHL/URN5K64kVEVpCsSOWeyjbIGK+dZUaRViHTaMQX8aqmnn0PHBbGZezg==",
"license": "MIT",
"dependencies": {
"@next/env": "14.2.13",
"@swc/helpers": "0.5.5",

2
src/app/layout.tsx
View File

@ -33,7 +33,7 @@ export default function RootLayout({
>
<div id="layout-container" className="md:p-4 w-screen h-screen mt-2 md:mt-6 flex justify-center">
<div className="w-full md:w-5/6 flex flex-col md:flex-row">
<div id="sidebar" className="h-5/6 flex flex-row md:flex-col justify-between"> <header className="">
<div id="sidebar" className=" flex flex-row md:flex-col justify-between"> <header className="">
<h1 className="font-black text-4xl text-primary-foreground bg-primary antialiased w-full p-2 rounded-tl-3xl pl-6 pr-4 hidden md:block">SubMan</h1>
<p className="mt-2 mx-1 text-sm antialiased w-40 hidden md:block">The self-hosted literary submission tracker.</p>
</header>

21
src/app/publication/columns.tsx
View File

@ -30,7 +30,12 @@ export const columns: ColumnDef<PubsWithGenres>[] = [
</Button>
)
},
cell: TextInputCell,
cell: cell => (
<>
<p className="block text-xs md:hidden">{cell.getValue()}</p>
<TextInputCell cellContext={cell} className="hidden md:block" />
</>
),
meta: { formSchema: pubSchema }
},
@ -42,7 +47,12 @@ export const columns: ColumnDef<PubsWithGenres>[] = [
<span className="block sm:hidden"><SquareArrowOutUpRight /></span>
</div>
),
cell: TextInputCell,
cell: cell => (
<>
<p className="block text-xs md:hidden">{cell.getValue()}</p>
<TextInputCell cellContext={cell} className="hidden md:block" />
</>
),
meta: { formSchema: pubSchema }
},
@ -66,7 +76,12 @@ export const columns: ColumnDef<PubsWithGenres>[] = [
<span className="sm:hidden"><Clock /></span>
</div>
),
cell: NumberInputCell,
cell: cell => (
<>
<p className="block md:hidden text-center">{cell.getValue()}</p>
<NumberInputCell cellContext={cell} className="hidden md:block" />
</>
),
meta: {
step: 10,
formSchema: pubSchema

6
src/app/publication/create.tsx
View File

@ -5,6 +5,7 @@ import { ComponentProps } from "react";
import { Genre } from "@prisma/client";
import { createPub } from "app/lib/create";
import PubForm from "app/ui/forms/pub";
import { Plus } from "lucide-react";
export default function CreatePubDialog({ genres }: ComponentProps<"div"> & { genres: Genre[] }) {
@ -12,7 +13,10 @@ export default function CreatePubDialog({ genres }: ComponentProps<"div"> & { ge
<Dialog>
<DialogTrigger asChild>
<Button>Create new publication</Button>
<Button>
<span className="hidden md:block">Create new publication</span>
<Plus className="block md:hidden" />
</Button>
</DialogTrigger>
<DialogContent>
<DialogHeader>

2
src/app/publication/page.tsx
View File

@ -12,7 +12,7 @@ export default async function Page() {
const genres = await getGenres()
const pubs = await getPubsWithGenres()
return (
<div className="container px-0 md:px-4 mx-auto">
<div className="container px-1 md:px-4 mx-auto">
<DataTable data={pubs} columns={columns} tableName="pub" genres={genres}>
<CreatePubDialog genres={genres} />
</DataTable>

15
src/app/story/columns.tsx
View File

@ -29,9 +29,13 @@ export const columns: ColumnDef<StoryWithGenres>[] = [
</Button>
)
},
cell: TextInputCell,
cell: cell => (
<>
<p className="block md:hidden text-xs">{cell.getValue()}</p>
<TextInputCell cellContext={cell} className="hidden md:block" />
</>
),
meta: { formSchema: storySchema }
},
{
accessorKey: "word_count",
@ -53,7 +57,12 @@ export const columns: ColumnDef<StoryWithGenres>[] = [
)
},
enableColumnFilter: false,
cell: NumberInputCell,
cell: cell => (
<>
<p className="block md:hidden text-center text-xs">{cell.getValue()}</p>
<NumberInputCell cellContext={cell} className="hidden md:block" />
</>
),
meta: {
step: 50,
formSchema: storySchema

2
src/app/story/page.tsx
View File

@ -19,7 +19,7 @@ export default async function Page() {
return (
<div className="container px-0 md:px-4 mx-auto">
<div className="container px-1 md:px-4 mx-auto">
<DataTable columns={columns} data={storiesWithGenres} tableName="story"
genres={genres}
>

77
src/app/tailwind.css
View File

@ -753,6 +753,10 @@ body {
margin-left: auto;
}
.mr-4 {
margin-right: 1rem;
}
.mt-2 {
margin-top: 0.5rem;
}
@ -769,14 +773,6 @@ body {
margin-top: 1.5rem;
}
.mt-auto {
margin-top: auto;
}
.mr-4 {
margin-right: 1rem;
}
.block {
display: block;
}
@ -846,10 +842,6 @@ body {
height: 1.25rem;
}
.h-5\/6 {
height: 83.333333%;
}
.h-7 {
height: 1.75rem;
}
@ -927,10 +919,6 @@ body {
width: 10rem;
}
.w-5\/6 {
width: 83.333333%;
}
.w-7 {
width: 1.75rem;
}
@ -972,10 +960,6 @@ body {
width: 100vw;
}
.w-11\/12 {
width: 91.666667%;
}
.min-w-\[8rem\] {
min-width: 8rem;
}
@ -1089,14 +1073,6 @@ body {
flex-wrap: wrap;
}
.content-center {
align-content: center;
}
.content-between {
align-content: space-between;
}
.items-start {
align-items: flex-start;
}
@ -1109,10 +1085,6 @@ body {
align-items: baseline;
}
.justify-start {
justify-content: flex-start;
}
.justify-end {
justify-content: flex-end;
}
@ -1125,14 +1097,6 @@ body {
justify-content: space-between;
}
.justify-around {
justify-content: space-around;
}
.justify-evenly {
justify-content: space-evenly;
}
.gap-1 {
gap: 0.25rem;
}
@ -1230,10 +1194,6 @@ body {
overflow: hidden;
}
.overflow-clip {
overflow: clip;
}
.whitespace-nowrap {
white-space: nowrap;
}
@ -1353,11 +1313,6 @@ body {
background-color: transparent;
}
.bg-red-800 {
--tw-bg-opacity: 1;
background-color: rgb(153 27 27 / var(--tw-bg-opacity));
}
.fill-current {
fill: currentColor;
}
@ -1390,6 +1345,11 @@ body {
padding: 1.5rem;
}
.px-1 {
padding-left: 0.25rem;
padding-right: 0.25rem;
}
.px-2 {
padding-left: 0.5rem;
padding-right: 0.5rem;
@ -1445,16 +1405,6 @@ body {
padding-bottom: 1rem;
}
.px-1 {
padding-left: 0.25rem;
padding-right: 0.25rem;
}
.px-0 {
padding-left: 0px;
padding-right: 0px;
}
.pl-3 {
padding-left: 0.75rem;
}
@ -1745,10 +1695,6 @@ body {
animation-duration: 200ms;
}
.direction-reverse {
animation-direction: reverse;
}
/**/
/* @layer base { */
@ -2464,6 +2410,11 @@ body {
padding-top: 1rem;
padding-bottom: 1rem;
}
.md\:text-sm {
font-size: 0.875rem;
line-height: 1.25rem;
}
}
.\[\&\:has\(\[aria-selected\]\)\]\:bg-accent:has([aria-selected]) {

2
src/app/ui/tables/inputs/genrePickerInput.tsx
View File

@ -78,7 +78,7 @@ export default function GenrePickerInputCell(props: CellContext<any, any>) {
render={({ field }) => (
<FormItem className="w-full max-w-xs flex flex-col">
<PopoverTrigger asChild>
{value.length > 0 ? <Button variant="ghost" className="h-fit"><GenreBadges genres={value} className="w-full" /></Button> : <Button variant="outline" type="button" className="w-fit m-auto">Add genres</Button>
{value.length > 0 ? <Button variant="ghost" className="h-fit p-1"><GenreBadges genres={value} className="w-full" /></Button> : <Button variant="outline" type="button" className="text-xs md:text-sm w-fit m-auto">Add genres</Button>
}
</PopoverTrigger>

22
src/app/ui/tables/inputs/numberInput.tsx
View File

@ -9,20 +9,20 @@ import { zodResolver } from "@hookform/resolvers/zod";
import { toast } from "@/components/ui/use-toast";
import { Form, FormControl, FormField, FormItem, FormMessage } from "@/components/ui/form";
export default function NumberInputCell(props: CellContext<any, any>) {
export default function NumberInputCell({ cellContext, className }: { cellContext: CellContext<any, any>, className: string }) {
const [isActive, setIsActive] = useState(false)
const table = props.table.options.meta.tableName
const id = props.row.original.id
const column = props.column.id
const pathname = props.table.options.meta.pathname
const value = props.cell.getValue()
const formSchema = props.column.columnDef.meta.formSchema.pick({ [column]: true })
const table = cellContext.table.options.meta.tableName
const id = cellContext.row.original.id
const column = cellContext.column.id
const pathname = cellContext.table.options.meta.pathname
const value = cellContext.cell.getValue()
const formSchema = cellContext.column.columnDef.meta.formSchema.pick({ [column]: true })
const form = useForm<z.infer<typeof formSchema>>({
resolver: zodResolver(formSchema),
defaultValues: {
[column]: props.cell.getValue()
[column]: cellContext.cell.getValue()
},
})
@ -55,7 +55,7 @@ export default function NumberInputCell(props: CellContext<any, any>) {
return (
<div
onDoubleClick={() => setIsActive(true)}
className="w-full h-fit flex items-center justify-center"
className={className + " w-full h-fit flex items-center justify-center"}
tabIndex={0}
onKeyDown={e => {
if (e.code === "Enter" && !isActive) {
@ -81,7 +81,7 @@ export default function NumberInputCell(props: CellContext<any, any>) {
className="md:w-24"
type="number"
autoFocus={true}
step={props.column.columnDef.meta?.step}
step={cellContext.column.columnDef.meta?.step}
{...field}
/>
</FormControl>
@ -92,7 +92,7 @@ export default function NumberInputCell(props: CellContext<any, any>) {
</form>
</Form>
: <p>{props.cell.getValue()}</p>
: <p>{cellContext.cell.getValue()}</p>
}
</div >
)

25
src/app/ui/tables/inputs/textInput.tsx
View File

@ -10,20 +10,23 @@ import { toast } from "@/components/ui/use-toast";
import { Form, FormControl, FormField, FormItem, FormMessage } from "@/components/ui/form";
import TitleContainer from "app/ui/titleContainer";
export function TextInputCell(props: CellContext<any, any>) {
export function TextInputCell({ cellContext, className }: { className: string, cellContext: CellContext<any, any> }) {
const [isActive, setIsActive] = useState(false)
const table = props.table.options.meta.tableName
const id = props.row.original.id
const column = props.column.id
const pathname = props.table.options.meta.pathname
const value = props.cell.getValue()
const formSchema = props.column.columnDef.meta.formSchema.pick({ [column]: true })
if (cellContext === undefined) {
console.error("CELL CONTEXT UNDEFINED!")
return false
}
const table = cellContext.table.options.meta.tableName
const id = cellContext.row.original.id
const column = cellContext.column.id
const pathname = cellContext.table.options.meta.pathname
const value = cellContext.cell.getValue()
const formSchema = cellContext.column.columnDef.meta.formSchema.pick({ [column]: true })
const form = useForm<z.infer<typeof formSchema>>({
resolver: zodResolver(formSchema),
defaultValues: {
[column]: props.cell.getValue()
[column]: cellContext.cell.getValue()
},
})
@ -60,7 +63,7 @@ export function TextInputCell(props: CellContext<any, any>) {
return (
<div
onDoubleClick={() => setIsActive(prev => !prev)}
className="w-full h-fit flex items-center justify-left"
className={className + " w-full h-fit flex items-center justify-left"}
tabIndex={0}
onKeyDown={e => {
if (e.code === "Enter" && !isActive) {
@ -96,7 +99,7 @@ export function TextInputCell(props: CellContext<any, any>) {
</form>
</Form>
: <TitleContainer>{props.cell.getValue()}</TitleContainer>
: <TitleContainer>{cellContext.cell.getValue()}</TitleContainer>
}
</div >
)