Bulk commit: November work
This commit is contained in:
9
src/routes/_sidebar/projects/view/$id/audit.tsx
Normal file
9
src/routes/_sidebar/projects/view/$id/audit.tsx
Normal file
@@ -0,0 +1,9 @@
|
||||
import { createFileRoute } from '@tanstack/react-router'
|
||||
|
||||
export const Route = createFileRoute('/_sidebar/projects/view/$id/audit')({
|
||||
component: RouteComponent,
|
||||
})
|
||||
|
||||
function RouteComponent() {
|
||||
return <div>Hello "/_sidebar/projects/view/$id/audit"!</div>
|
||||
}
|
||||
9
src/routes/_sidebar/projects/view/$id/equipment.tsx
Normal file
9
src/routes/_sidebar/projects/view/$id/equipment.tsx
Normal file
@@ -0,0 +1,9 @@
|
||||
import { createFileRoute } from '@tanstack/react-router'
|
||||
|
||||
export const Route = createFileRoute('/_sidebar/projects/view/$id/equipment')({
|
||||
component: RouteComponent,
|
||||
})
|
||||
|
||||
function RouteComponent() {
|
||||
return <div>Hello "/_sidebar/projects/view/$id/equipment"!</div>
|
||||
}
|
||||
9
src/routes/_sidebar/projects/view/$id/finance.tsx
Normal file
9
src/routes/_sidebar/projects/view/$id/finance.tsx
Normal file
@@ -0,0 +1,9 @@
|
||||
import { createFileRoute } from '@tanstack/react-router'
|
||||
|
||||
export const Route = createFileRoute('/_sidebar/projects/view/$id/finance')({
|
||||
component: RouteComponent,
|
||||
})
|
||||
|
||||
function RouteComponent() {
|
||||
return <div>Hello "/_sidebar/projects/view/$id/finance"!</div>
|
||||
}
|
||||
407
src/routes/_sidebar/projects/view/$id/index.tsx
Normal file
407
src/routes/_sidebar/projects/view/$id/index.tsx
Normal file
@@ -0,0 +1,407 @@
|
||||
import { useForm } from '@tanstack/react-form'
|
||||
import { createFileRoute } from '@tanstack/react-router'
|
||||
import z from 'zod'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import {
|
||||
Field,
|
||||
FieldContent,
|
||||
FieldDescription,
|
||||
FieldError,
|
||||
FieldGroup,
|
||||
FieldLabel,
|
||||
FieldLegend,
|
||||
FieldSeparator,
|
||||
} from '@/components/ui/field'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import {
|
||||
InputGroup,
|
||||
InputGroupAddon,
|
||||
InputGroupText,
|
||||
InputGroupTextarea,
|
||||
} from '@/components/ui/input-group'
|
||||
import { useProject, useProjectEdit } from '@/features/Projects/queries'
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select'
|
||||
|
||||
export const Route = createFileRoute('/_sidebar/projects/view/$id/')({
|
||||
component: RouteComponent,
|
||||
})
|
||||
|
||||
const managers = [
|
||||
{
|
||||
id: 1,
|
||||
name: 'Konstantin Hintermayer',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: 'ShadCN',
|
||||
},
|
||||
]
|
||||
|
||||
const projectTypes = [
|
||||
{
|
||||
name: 'Production',
|
||||
},
|
||||
{
|
||||
name: 'Tour',
|
||||
},
|
||||
{
|
||||
name: 'Dry Hire',
|
||||
},
|
||||
{
|
||||
name: 'Verkauf',
|
||||
},
|
||||
]
|
||||
|
||||
const statusse = [
|
||||
{
|
||||
name: 'Cancelled',
|
||||
},
|
||||
{
|
||||
name: 'Inquiry',
|
||||
},
|
||||
{
|
||||
name: 'Concept',
|
||||
},
|
||||
{
|
||||
name: 'Pending',
|
||||
},
|
||||
{
|
||||
name: 'Confirmed',
|
||||
},
|
||||
{
|
||||
name: 'Packed',
|
||||
},
|
||||
{
|
||||
name: 'On location',
|
||||
},
|
||||
{
|
||||
name: 'Returned',
|
||||
},
|
||||
]
|
||||
|
||||
const clients = [
|
||||
{
|
||||
id: 1,
|
||||
name: 'VYZE',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: 'Handig Eekhoorn',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: 'Adrian',
|
||||
},
|
||||
]
|
||||
|
||||
const formSchema = z.object({
|
||||
title: z
|
||||
.string()
|
||||
.min(5, 'Bug title must be at least 5 characters.')
|
||||
.max(32, 'Bug title must be at most 32 characters.'),
|
||||
description: z
|
||||
.string()
|
||||
.min(20, 'Description must be at least 20 characters.')
|
||||
.max(200, 'Description must be at most 200 characters.'),
|
||||
manager: z.number(),
|
||||
type: z.string(),
|
||||
status: z.string(),
|
||||
client: z.number(),
|
||||
})
|
||||
|
||||
function RouteComponent() {
|
||||
const { id } = Route.useParams()
|
||||
const { data } = useProject(Number(id))
|
||||
const { mutate } = useProjectEdit(Number(id))
|
||||
|
||||
const form = useForm({
|
||||
defaultValues: {
|
||||
title: data?.name,
|
||||
description: data?.description,
|
||||
manager: 1,
|
||||
type: 'Tour',
|
||||
status: 'Confirmed',
|
||||
client: 1,
|
||||
},
|
||||
validators: {
|
||||
onSubmit: formSchema,
|
||||
},
|
||||
onSubmit: ({ value }) => {
|
||||
mutate({
|
||||
ID: Number(id),
|
||||
name: value.title!,
|
||||
description: value.description!,
|
||||
icon: '',
|
||||
MandantID: data?.MandantID,
|
||||
})
|
||||
},
|
||||
})
|
||||
|
||||
return (
|
||||
<>
|
||||
<form
|
||||
id="project-esther-graf-general-form"
|
||||
className="w-2xl"
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault()
|
||||
form.handleSubmit()
|
||||
}}
|
||||
>
|
||||
<FieldGroup>
|
||||
<FieldGroup>
|
||||
<FieldLegend>Projekt Info</FieldLegend>
|
||||
<FieldDescription>
|
||||
Allgemeine Infos über das Projekt
|
||||
</FieldDescription>
|
||||
<FieldGroup>
|
||||
<form.Field
|
||||
name="title"
|
||||
children={(field) => {
|
||||
const isInvalid =
|
||||
field.state.meta.isTouched && !field.state.meta.isValid
|
||||
return (
|
||||
<Field data-invalid={isInvalid}>
|
||||
<FieldLabel htmlFor={field.name}>Projektname</FieldLabel>
|
||||
<Input
|
||||
id={field.name}
|
||||
name={field.name}
|
||||
value={field.state.value}
|
||||
onBlur={field.handleBlur}
|
||||
onChange={(e) => field.handleChange(e.target.value)}
|
||||
aria-invalid={isInvalid}
|
||||
placeholder="Login button not working on mobile"
|
||||
autoComplete="off"
|
||||
/>
|
||||
{isInvalid && (
|
||||
<FieldError errors={field.state.meta.errors} />
|
||||
)}
|
||||
</Field>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
<form.Field
|
||||
name="description"
|
||||
children={(field) => {
|
||||
const isInvalid =
|
||||
field.state.meta.isTouched && !field.state.meta.isValid
|
||||
return (
|
||||
<Field data-invalid={isInvalid}>
|
||||
<FieldLabel htmlFor={field.name}>Beschreibung</FieldLabel>
|
||||
<InputGroup>
|
||||
<InputGroupTextarea
|
||||
id={field.name}
|
||||
name={field.name}
|
||||
value={field.state.value}
|
||||
onBlur={field.handleBlur}
|
||||
onChange={(e) => field.handleChange(e.target.value)}
|
||||
placeholder="I'm having an issue with the login button on mobile."
|
||||
rows={6}
|
||||
className="min-h-24 resize-none"
|
||||
aria-invalid={isInvalid}
|
||||
/>
|
||||
<InputGroupAddon align="block-end">
|
||||
<InputGroupText className="tabular-nums">
|
||||
{field.state.value.length}/100 characters
|
||||
</InputGroupText>
|
||||
</InputGroupAddon>
|
||||
</InputGroup>
|
||||
<FieldDescription>
|
||||
Allgemeine Infos zum Projekt
|
||||
</FieldDescription>
|
||||
{isInvalid && (
|
||||
<FieldError errors={field.state.meta.errors} />
|
||||
)}
|
||||
</Field>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
<form.Field
|
||||
name="manager"
|
||||
children={(field) => {
|
||||
const isInvalid =
|
||||
field.state.meta.isTouched && !field.state.meta.isValid
|
||||
return (
|
||||
<Field orientation="responsive" data-invalid={isInvalid}>
|
||||
<FieldContent>
|
||||
<FieldLabel htmlFor="form-tanstack-select-language">
|
||||
Manager
|
||||
</FieldLabel>
|
||||
<FieldDescription>
|
||||
Zuständiger für dieses Projekt
|
||||
</FieldDescription>
|
||||
{isInvalid && (
|
||||
<FieldError errors={field.state.meta.errors} />
|
||||
)}
|
||||
</FieldContent>
|
||||
<Select
|
||||
name={field.name}
|
||||
value={field.state.value.toString()}
|
||||
onValueChange={(v) => field.handleChange(Number(v))}
|
||||
>
|
||||
<SelectTrigger
|
||||
id="form-tanstack-select-language"
|
||||
aria-invalid={isInvalid}
|
||||
className="min-w-[120px]"
|
||||
>
|
||||
<SelectValue placeholder="Select" />
|
||||
</SelectTrigger>
|
||||
<SelectContent position="item-aligned">
|
||||
{managers.map((manager) => (
|
||||
<SelectItem
|
||||
key={manager.id}
|
||||
value={manager.id.toString()}
|
||||
>
|
||||
{manager.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</Field>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
<form.Field
|
||||
name="type"
|
||||
children={(field) => {
|
||||
const isInvalid =
|
||||
field.state.meta.isTouched && !field.state.meta.isValid
|
||||
return (
|
||||
<Field orientation="responsive" data-invalid={isInvalid}>
|
||||
<FieldContent>
|
||||
<FieldLabel htmlFor="form-tanstack-select-language">
|
||||
Projekttyp
|
||||
</FieldLabel>
|
||||
<FieldDescription>
|
||||
Art des Projektes (Gibt voreinstellungen für Felder
|
||||
wie zum Beispiel: Zahlungskonditionen vor)
|
||||
</FieldDescription>
|
||||
{isInvalid && (
|
||||
<FieldError errors={field.state.meta.errors} />
|
||||
)}
|
||||
</FieldContent>
|
||||
<Select
|
||||
name={field.name}
|
||||
value={field.state.value}
|
||||
onValueChange={field.handleChange}
|
||||
>
|
||||
<SelectTrigger
|
||||
id="form-tanstack-select-language"
|
||||
aria-invalid={isInvalid}
|
||||
className="min-w-[120px]"
|
||||
>
|
||||
<SelectValue placeholder="Select" />
|
||||
</SelectTrigger>
|
||||
<SelectContent position="item-aligned">
|
||||
{projectTypes.map((prj) => (
|
||||
<SelectItem key={prj.name} value={prj.name}>
|
||||
{prj.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</Field>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
<form.Field
|
||||
name="status"
|
||||
children={(field) => {
|
||||
const isInvalid =
|
||||
field.state.meta.isTouched && !field.state.meta.isValid
|
||||
return (
|
||||
<Field orientation="responsive" data-invalid={isInvalid}>
|
||||
<FieldContent>
|
||||
<FieldLabel htmlFor="form-tanstack-select-language">
|
||||
Status
|
||||
</FieldLabel>
|
||||
{isInvalid && (
|
||||
<FieldError errors={field.state.meta.errors} />
|
||||
)}
|
||||
</FieldContent>
|
||||
<Select
|
||||
name={field.name}
|
||||
value={field.state.value}
|
||||
onValueChange={field.handleChange}
|
||||
>
|
||||
<SelectTrigger
|
||||
id="form-tanstack-select-language"
|
||||
aria-invalid={isInvalid}
|
||||
className="min-w-[120px]"
|
||||
>
|
||||
<SelectValue placeholder="Select" />
|
||||
</SelectTrigger>
|
||||
<SelectContent position="item-aligned">
|
||||
{statusse.map((stat) => (
|
||||
<SelectItem key={stat.name} value={stat.name}>
|
||||
{stat.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</Field>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
</FieldGroup>
|
||||
</FieldGroup>
|
||||
<FieldSeparator />
|
||||
<FieldGroup>
|
||||
<form.Field
|
||||
name="client"
|
||||
children={(field) => {
|
||||
const isInvalid =
|
||||
field.state.meta.isTouched && !field.state.meta.isValid
|
||||
return (
|
||||
<Field orientation="responsive" data-invalid={isInvalid}>
|
||||
<FieldContent>
|
||||
<FieldLabel htmlFor="form-tanstack-select-language">
|
||||
Client
|
||||
</FieldLabel>
|
||||
{isInvalid && (
|
||||
<FieldError errors={field.state.meta.errors} />
|
||||
)}
|
||||
</FieldContent>
|
||||
<Select
|
||||
name={field.name}
|
||||
value={field.state.value.toString()}
|
||||
onValueChange={(v) => field.handleChange(Number(v))}
|
||||
>
|
||||
<SelectTrigger
|
||||
id="form-tanstack-select-language"
|
||||
aria-invalid={isInvalid}
|
||||
className="min-w-[120px]"
|
||||
>
|
||||
<SelectValue placeholder="Select" />
|
||||
</SelectTrigger>
|
||||
<SelectContent position="item-aligned">
|
||||
{clients.map((stat) => (
|
||||
<SelectItem key={stat.id} value={stat.id.toString()}>
|
||||
{stat.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</Field>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
</FieldGroup>
|
||||
</FieldGroup>
|
||||
</form>
|
||||
<Field orientation="horizontal" className="mt-4">
|
||||
<Button type="button" variant="outline" onClick={() => form.reset()}>
|
||||
Reset
|
||||
</Button>
|
||||
<Button type="submit" form="project-esther-graf-general-form">
|
||||
Submit
|
||||
</Button>
|
||||
</Field>
|
||||
</>
|
||||
)
|
||||
}
|
||||
9
src/routes/_sidebar/projects/view/$id/personal.tsx
Normal file
9
src/routes/_sidebar/projects/view/$id/personal.tsx
Normal file
@@ -0,0 +1,9 @@
|
||||
import { createFileRoute } from '@tanstack/react-router'
|
||||
|
||||
export const Route = createFileRoute('/_sidebar/projects/view/$id/personal')({
|
||||
component: RouteComponent,
|
||||
})
|
||||
|
||||
function RouteComponent() {
|
||||
return <div>Hello "/_sidebar/projects/view/$id/personal"!</div>
|
||||
}
|
||||
9
src/routes/_sidebar/projects/view/$id/timeline.tsx
Normal file
9
src/routes/_sidebar/projects/view/$id/timeline.tsx
Normal file
@@ -0,0 +1,9 @@
|
||||
import { createFileRoute } from '@tanstack/react-router'
|
||||
|
||||
export const Route = createFileRoute('/_sidebar/projects/view/$id/timeline')({
|
||||
component: RouteComponent,
|
||||
})
|
||||
|
||||
function RouteComponent() {
|
||||
return <div>Hello "/_sidebar/projects/view/$id/timeline"!</div>
|
||||
}
|
||||
9
src/routes/_sidebar/projects/view/$id/todos.tsx
Normal file
9
src/routes/_sidebar/projects/view/$id/todos.tsx
Normal file
@@ -0,0 +1,9 @@
|
||||
import { createFileRoute } from '@tanstack/react-router'
|
||||
|
||||
export const Route = createFileRoute('/_sidebar/projects/view/$id/todos')({
|
||||
component: RouteComponent,
|
||||
})
|
||||
|
||||
function RouteComponent() {
|
||||
return <div>Hello "/_sidebar/projects/view/$id/todos"!</div>
|
||||
}
|
||||
Reference in New Issue
Block a user