feat(customer-tags): Tags-Feld bei Customers + Filter-by-Tag [tsc:fail]
This commit is contained in:
parent
ff82a45c65
commit
42f57beb08
@ -1,5 +1,8 @@
|
||||
{
|
||||
"completed_features": [],
|
||||
"current_feature": "markdown-notes-time-entry",
|
||||
"started_at": "2026-05-23T06:10:51.530595"
|
||||
"current_feature": "customer-tags",
|
||||
"started_at": "2026-05-23T06:10:51.530595",
|
||||
"attempted_features": [
|
||||
"markdown-notes-time-entry"
|
||||
]
|
||||
}
|
||||
@ -1170,3 +1170,22 @@ src/index.ts(27,25): error TS2769: No overload matches this call.
|
||||
Overload 2 of 3, '(plugin: FastifyPluginAsync<{ limits: { fileSize: number; }; }, RawServerDefault, FastifyTypeProvider, FastifyBaseLogger>, opts?: FastifyRegisterOptions<...> | undefined): FastifyInstance<...> & PromiseLike<...>', gave the following error.
|
||||
Argument of type 'Promise<FastifyMultipartPlugin>' is not assignable to parameter of type 'FastifyPluginAsync<{ limits: { fileSize: number; }; }, RawServerDefault, FastifyTypeProvider, FastifyBaseLogger>'.
|
||||
Type 'Promise<FastifyMultipartPlugin>' provides no match for the signature '(instance: FastifyInstance<RawServerDefault, IncomingMessage, ServerResponse<IncomingMessage>, FastifyBaseLogger, FastifyTy
|
||||
- `06:13:06` **INFO** Committed feature markdown-notes-time-entry
|
||||
- `06:13:06` **INFO** Pushed: rc=0
|
||||
|
||||
## Phase-3 Feature: customer-tags (2026-05-23 06:13:06)
|
||||
|
||||
- `06:13:06` **INFO** Description: Tags-Feld bei Customers + Filter-by-Tag
|
||||
- `06:13:06` **INFO** Generating apps/api/src/db/schema.ts (ERWEITERT — füge `tags: text('tags').array().notNull().default([])` Sp…)
|
||||
- `06:13:33` **INFO** wrote 3052 chars in 26.3s (attempt 1)
|
||||
- `06:13:33` **INFO** Generating apps/web/src/pages/Customers.tsx (ERWEITERT — füge Tags-Input (kommagetrennt) zum Create-Form. Zeige Tag…)
|
||||
- `06:14:36` **INFO** wrote 7956 chars in 63.5s (attempt 1)
|
||||
- `06:14:36` **INFO** Running tsc --noEmit on api…
|
||||
- `06:14:38` **WARN** tsc errors:
|
||||
src/index.ts(27,25): error TS2769: No overload matches this call.
|
||||
Overload 1 of 3, '(plugin: FastifyPluginCallback<{ limits: { fileSize: number; }; }, RawServerDefault, FastifyTypeProvider, FastifyBaseLogger>, opts?: FastifyRegisterOptions<...> | undefined): FastifyInstance<...> & PromiseLike<...>', gave the following error.
|
||||
Argument of type 'Promise<FastifyMultipartPlugin>' is not assignable to parameter of type 'FastifyPluginCallback<{ limits: { fileSize: number; }; }, RawServerDefault, FastifyTypeProvider, FastifyBaseLogger>'.
|
||||
Type 'Promise<FastifyMultipartPlugin>' provides no match for the signature '(instance: FastifyInstance<RawServerDefault, IncomingMessage, ServerResponse<IncomingMessage>, FastifyBaseLogger, FastifyTypeProvider>, opts: { ...; }, done: (err?: Error | undefined) => void): void'.
|
||||
Overload 2 of 3, '(plugin: FastifyPluginAsync<{ limits: { fileSize: number; }; }, RawServerDefault, FastifyTypeProvider, FastifyBaseLogger>, opts?: FastifyRegisterOptions<...> | undefined): FastifyInstance<...> & PromiseLike<...>', gave the following error.
|
||||
Argument of type 'Promise<FastifyMultipartPlugin>' is not assignable to parameter of type 'FastifyPluginAsync<{ limits: { fileSize: number; }; }, RawServerDefault, FastifyTypeProvider, FastifyBaseLogger>'.
|
||||
Type 'Promise<FastifyMultipartPlugin>' provides no match for the signature '(instance: FastifyInstance<RawServerDefault, IncomingMessage, ServerResponse<IncomingMessage>, FastifyBaseLogger, FastifyTy
|
||||
|
||||
@ -18,6 +18,7 @@ export const users = pgTable("users", {
|
||||
export const customers = pgTable("customers", {
|
||||
id: uuid("id").primaryKey().defaultRandom(),
|
||||
name: text("name").notNull(),
|
||||
tags: text("tags").array().notNull().default([]),
|
||||
active: boolean("active").notNull().default(true),
|
||||
createdAt: timestamp("created_at").notNull().defaultNow()
|
||||
})
|
||||
|
||||
@ -1,10 +1,12 @@
|
||||
import { useState, useRef } from "react"
|
||||
import { useState, useRef, useMemo } from "react"
|
||||
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"
|
||||
import { api } from "../lib/api"
|
||||
|
||||
export default function Customers() {
|
||||
const queryClient = useQueryClient()
|
||||
const [name, setName] = useState("")
|
||||
const [tags, setTags] = useState("")
|
||||
const [filterTag, setFilterTag] = useState("")
|
||||
const fileInputRef = useRef<HTMLInputElement>(null)
|
||||
|
||||
const { data: customers, isLoading, isError } = useQuery({
|
||||
@ -13,10 +15,11 @@ export default function Customers() {
|
||||
})
|
||||
|
||||
const createMutation = useMutation({
|
||||
mutationFn: (name: string) => api.createCustomer({ name }),
|
||||
mutationFn: (payload: { name: string; tags: string[] }) => api.createCustomer(payload),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ["customers"] })
|
||||
setName("")
|
||||
setTags("")
|
||||
}
|
||||
})
|
||||
|
||||
@ -38,10 +41,20 @@ export default function Customers() {
|
||||
}
|
||||
})
|
||||
|
||||
const filteredCustomers = useMemo(() => {
|
||||
if (!customers) return []
|
||||
if (!filterTag.trim()) return customers
|
||||
const search = filterTag.toLowerCase()
|
||||
return customers.filter(c =>
|
||||
c.tags?.some(t => t.toLowerCase().includes(search))
|
||||
)
|
||||
}, [customers, filterTag])
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
if (!name.trim()) return
|
||||
createMutation.mutate(name)
|
||||
const tagsArray = tags.split(",").map(t => t.trim()).filter(Boolean)
|
||||
createMutation.mutate({ name, tags: tagsArray })
|
||||
}
|
||||
|
||||
const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
@ -84,7 +97,7 @@ export default function Customers() {
|
||||
|
||||
<section className="bg-white p-6 rounded-lg border border-gray-200 shadow-sm">
|
||||
<h2 className="text-lg font-semibold mb-4">Add New Customer</h2>
|
||||
<form onSubmit={handleSubmit} className="flex gap-4">
|
||||
<form onSubmit={handleSubmit} className="flex flex-col md:flex-row gap-4">
|
||||
<div className="flex-1">
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Customer Name</label>
|
||||
<input
|
||||
@ -96,11 +109,21 @@ export default function Customers() {
|
||||
placeholder="Enter company or person name"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Tags (comma separated)</label>
|
||||
<input
|
||||
type="text"
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 outline-none"
|
||||
value={tags}
|
||||
onChange={(e) => setTags(e.target.value)}
|
||||
placeholder="VIP, Enterprise, Lead..."
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-end">
|
||||
<button
|
||||
type="submit"
|
||||
disabled={createMutation.isPending}
|
||||
className="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition-colors disabled:bg-blue-300 font-medium"
|
||||
className="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition-colors disabled:bg-blue-300 font-medium h-[42px]"
|
||||
>
|
||||
{createMutation.isPending ? "Saving..." : "Add Customer"}
|
||||
</button>
|
||||
@ -108,23 +131,47 @@ export default function Customers() {
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<section className="overflow-x-auto bg-white rounded-lg border border-gray-200 shadow-sm">
|
||||
<section className="space-y-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm font-medium text-gray-600">Filter by tag:</span>
|
||||
<input
|
||||
type="text"
|
||||
className="px-3 py-1 border border-gray-300 rounded-md text-sm focus:ring-2 focus:ring-blue-500 outline-none w-64"
|
||||
value={filterTag}
|
||||
onChange={(e) => setFilterTag(e.target.value)}
|
||||
placeholder="Search tags..."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="overflow-x-auto bg-white rounded-lg border border-gray-200 shadow-sm">
|
||||
<table className="w-full text-left border-collapse">
|
||||
<thead className="bg-gray-50 border-b border-gray-200">
|
||||
<tr>
|
||||
<th className="px-6 py-3 text-sm font-semibold text-gray-600">Name</th>
|
||||
<th className="px-6 py-3 text-sm font-semibold text-gray-600 text-right">Actions</th>
|
||||
<thead>
|
||||
<tr className="bg-gray-50 border-b border-gray-200">
|
||||
<th className="px-6 py-3 text-xs font-semibold text-gray-600 uppercase tracking-wider">Customer</th>
|
||||
<th className="px-6 py-3 text-xs font-semibold text-gray-600 uppercase tracking-wider">Tags</th>
|
||||
<th className="px-6 py-3 text-right text-xs font-semibold text-gray-600 uppercase tracking-wider">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-200">
|
||||
{customers && customers.length > 0 ? (
|
||||
customers.map((customer: any) => (
|
||||
{filteredCustomers.map((customer) => (
|
||||
<tr key={customer.id} className="hover:bg-gray-50 transition-colors">
|
||||
<td className="px-6 py-4 text-sm text-gray-900">{customer.name}</td>
|
||||
<td className="px-6 py-4 text-sm font-medium text-gray-900">{customer.name}</td>
|
||||
<td className="px-6 py-4">
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{customer.tags?.map((tag) => (
|
||||
<span
|
||||
key={tag}
|
||||
className="px-2 py-0.5 bg-blue-100 text-blue-700 text-xs rounded-full border border-blue-200"
|
||||
>
|
||||
{tag}
|
||||
</span>
|
||||
)) || <span className="text-gray-400 text-xs italic">No tags</span>}
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-6 py-4 text-right">
|
||||
<button
|
||||
onClick={() => {
|
||||
if (confirm("Are you sure you want to delete this customer?")) {
|
||||
if (confirm(`Delete ${customer.name}?`)) {
|
||||
deleteMutation.mutate(customer.id)
|
||||
}
|
||||
}}
|
||||
@ -135,16 +182,17 @@ export default function Customers() {
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))
|
||||
) : (
|
||||
))}
|
||||
{filteredCustomers.length === 0 && (
|
||||
<tr>
|
||||
<td colSpan={2} className="px-6 py-10 text-center text-gray-500">
|
||||
No customers found.
|
||||
<td colSpan={3} className="px-6 py-10 text-center text-gray-500 italic">
|
||||
No customers found matching the filter.
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
)
|
||||
|
||||
Loading…
Reference in New Issue
Block a user