Add UI for admins to view and edit member cards

apiserver/apiserver/api/models.py

@@ -55,7 +55,7 @@ class Card(models.Model):
     user = models.ForeignKey(User, related_name='cards', blank=True, null=True, on_delete=models.SET_NULL)
 
     member_id = models.IntegerField(blank=True, null=True)
-    card_number = models.CharField(max_length=16, blank=True, null=True)
+    card_number = models.CharField(unique=True, max_length=16, blank=True, null=True)
     notes = models.TextField(blank=True, null=True)
     last_seen_at = models.DateField(default=date.today, blank=True, null=True)
     active_status = models.CharField(max_length=32, blank=True, null=True)

apiserver/apiserver/api/serializers.py

@@ -2,6 +2,7 @@ from django.contrib.auth.models import User, Group
 from django.shortcuts import get_object_or_404
 from rest_framework import serializers
 from rest_framework.exceptions import ValidationError
+from rest_framework.validators import UniqueValidator
 from rest_auth.registration.serializers import RegisterSerializer
 from rest_auth.serializers import UserDetailsSerializer
 from uuid import uuid4
@@ -51,15 +52,6 @@ class UserEmailField(serializers.ModelField):
 
 
 
-class AdminCardSerializer(serializers.ModelSerializer):
-    card_number = serializers.CharField()
-    class Meta:
-        model = models.Card
-        fields = '__all__'
-        read_only_fields = ['last_seen_at']
-
-
-
 
 # member viewing other members
 class OtherMemberSerializer(serializers.ModelSerializer):
@@ -177,7 +169,10 @@ class CardSerializer(serializers.ModelSerializer):
 
 # admin viewing member details
 class AdminCardSerializer(CardSerializer):
-    card_number = serializers.CharField()
+    card_number = serializers.CharField(validators=[UniqueValidator(
+        queryset=models.Card.objects.all(),
+        message='Card number already exists.'
+    )])
     member_id = serializers.IntegerField()
     active_status = serializers.ChoiceField(['card_blocked', 'card_inactive', 'card_member_blocked', 'card_active'])
     class Meta:

webclient/src/Account.js

@@ -98,27 +98,33 @@ export function AccountForm(props) {
 		onChange: handleChange,
 		value: input[name] || '',
 		error: error[name],
+		...(input[name] ? {} : {icon: 'edit'}),
 	});
 
 	return (
 		<Form onSubmit={handleSubmit}>
 			<Header size='medium'>Member Details</Header>
 
+			<Form.Group widths='equal'>
 				<Form.Input
 					label='First Name'
+					fluid
 					required
 					{...makeProps('first_name')}
 				/>
+				<Form.Input
+					label='Last Name'
+					fluid
+					required
+					{...makeProps('last_name')}
+				/>
+			</Form.Group>
+
 			<Form.Input
 				label='Preferred First Name'
 				required
 				{...makeProps('preferred_name')}
 			/>
-			<Form.Input
-				label='Last Name'
-				required
-				{...makeProps('last_name')}
-			/>
 
 			<Form.Input
 				label='Email Address'

webclient/src/Admin.js

@@ -4,6 +4,195 @@ import './light.css';
 import { Container, Checkbox, Divider, Dropdown, Form, Grid, Header, Icon, Image, Menu, Message, Segment, Table } from 'semantic-ui-react';
 import { BasicTable, staticUrl, requester } from './utils.js';
 
+function AdminCardDetail(props) {
+	const [input, setInput] = useState({ ...props.card });
+	const [error, setError] = useState(false);
+	const [loading, setLoading] = useState(false);
+	const [success, setSuccess] = useState(false);
+	const id = props.card.id;
+
+	const handleValues = (e, v) => setInput({ ...input, [v.name]: v.value });
+	const handleUpload = (e, v) => setInput({ ...input, [v.name]: e.target.files[0] });
+	const handleChange = (e) => handleValues(e, e.currentTarget);
+	const handleCheck = (e, v) => setInput({ ...input, [v.name]: v.checked });
+
+	const handleSubmit = (e) => {
+		setLoading(true);
+		setSuccess(false);
+		const data = { ...input, member_id: props.result.member.id };
+		requester('/cards/'+id+'/', 'PUT', props.token, data)
+		.then(res => {
+			setLoading(false);
+			setSuccess(true);
+			setError(false);
+			setInput(res);
+		})
+		.catch(err => {
+			setLoading(false);
+			console.log(err);
+			setError(err.data);
+		});
+	};
+
+	const handleDelete = (e) => {
+		e.preventDefault();
+
+		requester('/cards/'+id+'/', 'DELETE', props.token)
+		.then(res => {
+			setInput(false);
+		})
+		.catch(err => {
+			console.log(err);
+		});
+	};
+
+	const makeProps = (name) => ({
+		name: name,
+		onChange: handleChange,
+		value: input[name] || '',
+		error: error[name],
+	});
+
+	const statusOptions = [
+		{ key: '0', text: 'Card Active', value: 'card_active' },
+		{ key: '1', text: 'Card Blocked', value: 'card_blocked' },
+		{ key: '2', text: 'Card Inactive', value: 'card_inactive' },
+		{ key: '3', text: 'Card Member Blocked', value: 'card_member_blocked' },
+	];
+
+	return (
+		input ?
+			<Segment raised color={input.active_status === 'card_active' ? 'green' : 'red'}>
+				<Form onSubmit={handleSubmit}>
+					<Form.Group widths='equal'>
+						<Form.Input
+							fluid
+							{...makeProps('card_number')}
+						/>
+						<Form.Select
+							fluid
+							options={statusOptions}
+							{...makeProps('active_status')}
+							onChange={handleValues}
+						/>
+
+						<Form.Group widths='equal'>
+							<Form.Button
+								loading={loading}
+								error={error.non_field_errors}
+							>
+								{success ? 'Saved.' : 'Save'}
+							</Form.Button>
+
+							<Form.Button
+								color='red'
+								onClick={handleDelete}
+							>
+								Delete
+							</Form.Button>
+						</Form.Group>
+					</Form.Group>
+
+					Notes: {input.notes || 'None'}
+				</Form>
+			</Segment>
+		:
+			<Segment raised color='black'>
+				Deleted card: {props.card.card_number}
+			</Segment>
+	);
+};
+
+export function AdminMemberCards(props) {
+	const cards = props.result.cards;
+	const [input, setInput] = useState({ active_status: 'card_active' });
+	const [error, setError] = useState(false);
+	const [loading, setLoading] = useState(false);
+	const [success, setSuccess] = useState(false);
+	const { id } = useParams();
+
+	const handleValues = (e, v) => setInput({ ...input, [v.name]: v.value });
+	const handleUpload = (e, v) => setInput({ ...input, [v.name]: e.target.files[0] });
+	const handleChange = (e) => handleValues(e, e.currentTarget);
+	const handleCheck = (e, v) => setInput({ ...input, [v.name]: v.checked });
+
+	const handleSubmit = (e) => {
+		setLoading(true);
+		setSuccess(false);
+		const data = { ...input, member_id: props.result.member.id };
+		requester('/cards/', 'POST', props.token, data)
+		.then(res => {
+			setLoading(false);
+			setSuccess(true);
+			setError(false);
+			props.setResult({ ...props.result, cards: [...cards, res] });
+		})
+		.catch(err => {
+			setLoading(false);
+			console.log(err);
+			setError(err.data);
+		});
+	};
+
+	const makeProps = (name) => ({
+		name: name,
+		onChange: handleChange,
+		value: input[name] || '',
+		error: error[name],
+	});
+
+	const statusOptions = [
+		{ key: '0', text: 'Card Active', value: 'card_active' },
+		{ key: '1', text: 'Card Blocked', value: 'card_blocked' },
+		{ key: '2', text: 'Card Inactive', value: 'card_inactive' },
+		{ key: '3', text: 'Card Member Blocked', value: 'card_member_blocked' },
+	];
+
+	return (
+		<div>
+			<Header size='medium'>Edit Member Cards</Header>
+			<Form onSubmit={handleSubmit}>
+				<Header size='small'>Add a Card</Header>
+
+				<Form.Group widths='equal'>
+					<Form.Input
+						label='Card Number'
+						fluid
+						{...makeProps('card_number')}
+					/>
+					<Form.Select
+						label='Card Status'
+						options={statusOptions}
+						fluid
+						{...makeProps('active_status')}
+						onChange={handleValues}
+					/>
+					<Form.Input
+						label='Optional Note'
+						fluid
+						{...makeProps('notes')}
+					/>
+				</Form.Group>
+
+				{success && <p>Success!</p>}
+				<Form.Button loading={loading} error={error.non_field_errors}>
+					Submit
+				</Form.Button>
+			</Form>
+
+			<Header size='small'>Current Cards</Header>
+
+			{cards.length ?
+				cards.map((x, i) =>
+					<AdminCardDetail key={i} card={x} {...props} />
+				)
+			:
+				<p>None</p>
+			}
+		</div>
+	);
+};
+
 export function AdminMemberForm(props) {
 	const [input, setInput] = useState(props.result.member);
 	const [error, setError] = useState(false);
@@ -42,7 +231,6 @@ export function AdminMemberForm(props) {
 
 	return (
 		<div>
-			{input ?
 			<Form onSubmit={handleSubmit}>
 				<Header size='medium'>Edit Member Details</Header>
 
@@ -111,9 +299,6 @@ export function AdminMemberForm(props) {
 					Submit
 				</Form.Button>
 			</Form>
-			:
-				<p>Loading...</p>
-			}
 		</div>
 	);
 };
@@ -122,8 +307,6 @@ export function AdminMemberInfo(props) {
 	const member = props.result.member;
 
 	return (
-		<div>
-			{member ?
 		<div>
 			<Header size='medium'>Admin Details</Header>
 
@@ -180,9 +363,5 @@ export function AdminMemberInfo(props) {
 				</Table.Body>
 			</BasicTable>
 		</div>
-			:
-				<p>Loading...</p>
-			}
-		</div>
 	);
 };

webclient/src/LoginSignup.js

@@ -84,18 +84,22 @@ export function SignupForm(props) {
 		<Form onSubmit={handleSubmit}>
 			<Header size='medium'>Sign Up</Header>
 
+			<Form.Group widths='equal'>
 				<Form.Input
 					label='First Name'
 					name='first_name'
+					fluid
 					onChange={handleChange}
 					error={error.first_name}
 				/>
 				<Form.Input
 					label='Last Name'
 					name='last_name'
+					fluid
 					onChange={handleChange}
 					error={error.last_name}
 				/>
+			</Form.Group>
 
 			<Form.Input
 				label='Username'

webclient/src/Members.js

@@ -5,7 +5,7 @@ import { Button, Container, Divider, Dropdown, Form, Grid, Header, Icon, Image,
 import moment from 'moment';
 import { isAdmin, BasicTable, staticUrl, requester } from './utils.js';
 import { NotFound, PleaseLogin } from './Misc.js';
-import { AdminMemberInfo, AdminMemberForm } from './Admin.js';
+import { AdminMemberInfo, AdminMemberForm, AdminMemberCards } from './Admin.js';
 
 export function Members(props) {
 	const [response, setResponse] = useState(false);
@@ -49,7 +49,7 @@ export function Members(props) {
 			</Header>
 
 			{response ?
-				<Item.Group divided>
+				<Item.Group unstackable divided>
 					{response.results.length ?
 						response.results.map((x, i) =>
 							<Item key={i} as={Link} to={'/members/'+x.member.id}>
@@ -130,6 +130,10 @@ export function MemberDetail(props) {
 							</Grid.Column>
 						</Grid>
 
+						{isAdmin(user) && <Segment padded>
+							<AdminMemberCards result={result} setResult={setResult} {...props} />
+						</Segment>}
+
 					</div>
 				:
 					<p>Loading...</p>

webclient/src/utils.js

@@ -33,6 +33,11 @@ export const requester = (route, method, token, data) => {
 			method: method,
 			body: formData,
 		};
+	} else if (method == 'DELETE') {
+		options = {
+			...options,
+			method: method,
+		};
 	} else {
 		throw new Error('Method not supported');
 	}
@@ -48,7 +53,7 @@ export const requester = (route, method, token, data) => {
 		if (!response.ok) {
 			throw customError(response);
 		}
-		return response.json();
+		return method === 'DELETE' ? {} : response.json();
 	})
 	.catch(error => {
 		const code = error.data ? error.data.status : null;