Daniel/webshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add hideLocked checkbox to filter out gesperrt users by default
Some checks failed
Staging Build / build (push) Has been cancelled
Details

Browse Source
This commit is contained in:
DanielS
2026-06-25 01:41:51 +02:00
parent 07c2758b73
commit 67a2c2a67b
1 changed files with 28 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
shop/components/admin/user-list.tsx
View File

@@ -43,6 +43,7 @@ export function UserList({ initialUsers, companies }: UserListProps) {
const [companySearch, setCompanySearch] = useState('') const [companySearch, setCompanySearch] = useState('')
const [searchQuery, setSearchQuery] = useState('') const [searchQuery, setSearchQuery] = useState('')
const [groupByCompany, setGroupByCompany] = useState(false) const [groupByCompany, setGroupByCompany] = useState(false)
const [hideLocked, setHideLocked] = useState(true)
const dropdownRef = useRef<HTMLDivElement>(null) const dropdownRef = useRef<HTMLDivElement>(null)
useEffect(() => { useEffect(() => {
@@ -124,6 +125,8 @@ export function UserList({ initialUsers, companies }: UserListProps) {
} }
const filteredUsers = initialUsers.filter((user) => { const filteredUsers = initialUsers.filter((user) => {
if (hideLocked && user.role === 'gesperrt') return false
const emailMatch = user.email?.toLowerCase().includes(searchQuery.toLowerCase()) const emailMatch = user.email?.toLowerCase().includes(searchQuery.toLowerCase())
const companyMatch = user.company_name?.toLowerCase().includes(searchQuery.toLowerCase()) const companyMatch = user.company_name?.toLowerCase().includes(searchQuery.toLowerCase())
const roleMatch = user.role?.toLowerCase().includes(searchQuery.toLowerCase()) const roleMatch = user.role?.toLowerCase().includes(searchQuery.toLowerCase())
@@ -163,17 +166,31 @@ export function UserList({ initialUsers, companies }: UserListProps) {
className="w-full pl-9 pr-4 py-2 text-sm bg-white/5 border border-white/10 rounded-md text-slate-200 placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 focus:ring-offset-slate-950 transition-all" className="w-full pl-9 pr-4 py-2 text-sm bg-white/5 border border-white/10 rounded-md text-slate-200 placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 focus:ring-offset-slate-950 transition-all"
/> />
</div> </div>
<div className="flex items-center gap-2 bg-white/5 border border-white/10 rounded-md px-3 py-2 cursor-pointer hover:bg-white/10 transition-colors"> <div className="flex flex-wrap items-center gap-3">
<input <div className="flex items-center gap-2 bg-white/5 border border-white/10 rounded-md px-3 py-2 cursor-pointer hover:bg-white/10 transition-colors">
type="checkbox" <input
id="groupByCompany" type="checkbox"
checked={groupByCompany} id="hideLocked"
onChange={(e) => setGroupByCompany(e.target.checked)} checked={hideLocked}
className="h-4 w-4 rounded border-white/10 bg-slate-950 text-primary focus:ring-primary focus:ring-offset-slate-950 accent-primary cursor-pointer" onChange={(e) => setHideLocked(e.target.checked)}
/> className="h-4 w-4 rounded border-white/10 bg-slate-950 text-primary focus:ring-primary focus:ring-offset-slate-950 accent-primary cursor-pointer"
<label htmlFor="groupByCompany" className="text-xs text-slate-300 font-medium cursor-pointer select-none"> />
Nach Firma gruppieren <label htmlFor="hideLocked" className="text-xs text-slate-300 font-medium cursor-pointer select-none">
</label> Gesperrte ausblenden
</label>
</div>
<div className="flex items-center gap-2 bg-white/5 border border-white/10 rounded-md px-3 py-2 cursor-pointer hover:bg-white/10 transition-colors">
<input
type="checkbox"
id="groupByCompany"
checked={groupByCompany}
onChange={(e) => setGroupByCompany(e.target.checked)}
className="h-4 w-4 rounded border-white/10 bg-slate-950 text-primary focus:ring-primary focus:ring-offset-slate-950 accent-primary cursor-pointer"
/>
<label htmlFor="groupByCompany" className="text-xs text-slate-300 font-medium cursor-pointer select-none">
Nach Firma gruppieren
</label>
</div>
</div> </div>
</div> </div>
<Table containerClassName="overflow-visible"> <Table containerClassName="overflow-visible">