partypages/admin-ui
2
0
Fork 0
generated from partypages/party-template
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Implement edit extraData

Browse Source
This commit is contained in:
Dominic Zimmer 2026-02-01 13:36:14 +01:00
parent e9df7f557f
commit abb69f45e3
2 changed files with 36 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/AdminUI.css
View File

@ -250,3 +250,6 @@ dialog > div label {
text-align: center; text-align: center;
} }
} }
#dialog-edit-user input.invalid {
color: red;
}

24
src/AdminUI.tsx
View File

@ -1,7 +1,7 @@
import React, { Fragment, useCallback, useEffect, useMemo, useState } from 'react'; import React, { Fragment, useCallback, useEffect, useMemo, useState } from 'react';
import './AdminUI.css'; import './AdminUI.css';
import { createGuestRequest, createPartyRequest, deleteGuestRequest, deletePartyRequest, listGuestsRequest, listPartyRequest, modifyGuestRequest, parseToken, setAllowedExtras } from './partyAdminApi'; import { createGuestRequest, createPartyRequest, deleteGuestRequest, deletePartyRequest, listGuestsRequest, listPartyRequest, modifyGuestRequest, parseToken, setAllowedExtras } from './partyAdminApi';
import { GrammaticalGender, Person, RequestCreateGuest, ResponseCreateParty, ResponseListGuests, ResponseListParties } from './partyAdminApiTypes'; import { GrammaticalGender, Person, RequestCreateGuest, ResponseCreateParty, ResponseListGuests, ResponseListParties, AllowedExtraLengths } from './partyAdminApiTypes';
export const AdminUI: React.FC = () => { export const AdminUI: React.FC = () => {
@ -120,7 +120,7 @@ export const AdminUI: React.FC = () => {
<div> <div>
{editUserData ? {editUserData ?
<> <>
<span className="lg">{"_id" in editUserData ? `Editing ${editUserData.name}` : "New Invitation"}</span> <h1>{"_id" in editUserData ? `Editing ${editUserData.name}` : "New Invitation"}</h1>
<div className="dialog-person-table"> <div className="dialog-person-table">
<label htmlFor="edit-token">Token</label> <label htmlFor="edit-token">Token</label>
<input type="text" id="edit-token" value={editUserData.token} onChange={(e) => { setEditUserData({ ...editUserData, token: e.target.value }) }} /> <input type="text" id="edit-token" value={editUserData.token} onChange={(e) => { setEditUserData({ ...editUserData, token: e.target.value }) }} />
@ -145,6 +145,9 @@ export const AdminUI: React.FC = () => {
<option value="f">f</option> <option value="f">f</option>
<option value="d">d</option> <option value="d">d</option>
</select> </select>
{selectedParty !== undefined && partyList[selectedParty] ?
<ExtraDataTable value={editUserData} setEditUserData={setEditUserData} allowed_extra={partyList[selectedParty].allowed_extra} />
:null}
</div> </div>
</> </>
: "Hab keine user data bekommen."} : "Hab keine user data bekommen."}
@ -183,6 +186,23 @@ export const AdminUI: React.FC = () => {
</> </>
}; };
export const ExtraDataTable : React.FC<{
value: RequestCreateGuest | Person,
setEditUserData: React.Dispatch<React.SetStateAction<RequestCreateGuest | Person | undefined>>,
allowed_extra: AllowedExtraLengths }
> = ({value: editUserData, setEditUserData, allowed_extra}) => {
return <>
<h2 style={{gridColumn:"1/span 2", textAlign: "center"}} >Extras</h2>
{Object.entries(allowed_extra).map(([extra, maxLen], index) =>
<>
<label key={`extra-${extra}-label`} htmlFor={`edit-extra-${extra}`}>{extra}</label>
<input className={((editUserData.extra[extra]??"").length > maxLen ? "invalid" : "")} key={`extra-${extra}-input` } type="text" id={`edit-extra-${extra}`} value={editUserData.extra[extra]} onChange={(e) => { setEditUserData({ ...editUserData, extra: {...editUserData.extra, [extra]: e.target.value}}) }} />
</>
)}
</>;
}
export const PartyUI: React.FC<{ party: ResponseCreateParty, adminToken: string, editUser: (user: RequestCreateGuest) => void }> = ({ party, adminToken, editUser }) => { export const PartyUI: React.FC<{ party: ResponseCreateParty, adminToken: string, editUser: (user: RequestCreateGuest) => void }> = ({ party, adminToken, editUser }) => {
const [guests, setGuests] = useState<ResponseListGuests>([]); const [guests, setGuests] = useState<ResponseListGuests>([]);