Needles exchanged - int fields, backend and frontend changes (#493)

* Handling all of the needles exchanged stuffs.

* Changed needles_exchaged to exchanged_for. Also created test and did some minor styling.

Author: JackRyan1989

core/fixtures/sep_data.yaml

@@ -5,6 +5,7 @@
     site: 1
     needles_in: 3
     needles_out: 4
+    exchanged_for: 6
     created_at: '2020-09-22 01:38:39.204290+00:00'
 - model: core.sepdata
   pk: 2
@@ -13,6 +14,7 @@
     site: 1
     needles_in: 5
     needles_out: 5
+    exchanged_for: 5
     created_at: '2020-09-22 01:38:39.204290+00:00'
 - model: core.sepdata
   pk: 3
@@ -21,4 +23,5 @@
     site: 2
     needles_in: 1
     needles_out: 2
+    exchanged_for: 10
     created_at: '2020-09-22 01:38:39.204290+00:00'

core/migrations/0013_sepdata_exchanged_for.py

@@ -0,0 +1,18 @@
+# Generated by Django 2.2.13 on 2021-01-22 20:45
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('core', '0012_auto_20201216_0954'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='sepdata',
+            name='exchanged_for',
+            field=models.IntegerField(default=None, null=True),
+        ),
+    ]

core/models/sep_data.py

@@ -8,3 +8,4 @@ class SepData(models.Model):
     created_at = models.DateTimeField(default=timezone.now)
     needles_in = models.IntegerField()
     needles_out = models.IntegerField()
+    exchanged_for = models.IntegerField(default=None, null=True)

core/sep_data/serializers.py

@@ -12,4 +12,5 @@ class Meta:
             "created_at",
             "needles_in",
             "needles_out",
+            "exchanged_for",
         )

core/tests/sep_data.py

@@ -62,6 +62,7 @@ def test_create_sep_data_entry(self):
             "site": 3,
             "needles_in": 5,
             "needles_out": 5,
+            "exchanged_for": 10,
         }
 
         response = self.client.post(url, data, format="json", follow=True, **headers)
@@ -82,6 +83,7 @@ def test_post_auth(self):
             "site": 3,
             "needles_in": 5,
             "needles_out": 5,
+            "exchanged_for": 10,
         }
 
         pre_post_entry_count = SepData.objects.count()

frontend/src/components/SepForm.js

@@ -43,6 +43,9 @@ const useStyles = makeStyles(theme => ({
   needlesOut: {
     paddingLeft: theme.spacing(1),
   },
+  needlesExchanged: {
+    marginTop: "-12% !important",
+  },
   clearButton: {
     marginLeft: theme.spacing(1),
   },
@@ -282,13 +285,15 @@ const SepForm = ({
         initialValues={{
           needles_in: "",
           needles_out: "",
+          exchanged_for: "",
           visit_date: new Date().toISOString().substring(0, 10),
         }}
         validationSchema={SEPNeedleSchema}
         onSubmit={async (values, { setSubmitting }) => {
           const success = await participantStore.createSEP({
             needles_in: values.needles_in,
             needles_out: values.needles_out,
+            exchanged_for: values.exchanged_for,
             visit_date: values.visit_date,
             site: currentSite,
             participant: participantId,
@@ -316,18 +321,12 @@ const SepForm = ({
                       disabled={participantId && currentSite ? false : true}
                     >
                       <InputLabel htmlFor="needles_in">Needles In</InputLabel>
-                      <Select
+                      <PrevPointInput
                         id="needles_in"
                         name="needles_in"
                         onChange={handleChange}
                         value={values.needles_in}
-                      >
-                        {[...Array(20)].map((x, i) => (
-                          <MenuItem key={i + 1} value={i + 1}>
-                            {i + 1}
-                          </MenuItem>
-                        ))}
-                      </Select>
+                      />
                     </FormControl>
                   </Grid>
                   <Grid item xs={6}>
@@ -336,18 +335,28 @@ const SepForm = ({
                       disabled={participantId && currentSite ? false : true}
                     >
                       <InputLabel htmlFor="needles_out">Needles Out</InputLabel>
-                      <Select
+                      <PrevPointInput
                         id="needles_out"
                         name="needles_out"
                         onChange={handleChange}
                         value={values.needles_out}
-                      >
-                        {[...Array(20)].map((x, i) => (
-                          <MenuItem key={i + 1} value={i + 1}>
-                            {i + 1}
-                          </MenuItem>
-                        ))}
-                      </Select>
+                      />
+                    </FormControl>
+                  </Grid>
+                  <Grid className={classes.needlesExchanged} item xs={12}>
+                    <FormControl
+                      error={errors.exchanged_for && touched.exchanged_for}
+                      disabled={participantId && currentSite ? false : true}
+                    >
+                      <InputLabel htmlFor="exchanged_for">
+                        Needles Exchanged For
+                      </InputLabel>
+                      <PrevPointInput
+                        id="exchanged_for"
+                        name="exchanged_for"
+                        onChange={handleChange}
+                        value={values.exchanged_for}
+                      />
                     </FormControl>
                   </Grid>
                 </Grid>
@@ -390,10 +399,12 @@ const SepForm = ({
                 </PrevPointButton>
                 {(errors.needles_in ||
                   errors.needles_out ||
+                  errors.exchanged_for ||
                   errors.visit_date) && (
                   <PrevPointCopy className={classes.errorMessage}>
                     {errors.needles_in ||
                       errors.needles_out ||
+                      errors.exchanged_for ||
                       errors.visit_date}
                   </PrevPointCopy>
                 )}

frontend/src/components/VisitRouter/VisitData.js

@@ -67,6 +67,9 @@ const VisitData = ({ visitData }) => {
             </PrevPointCopy>
             <PrevPointCopy>Needles in: {visitData.needles_in}</PrevPointCopy>
             <PrevPointCopy>Needles out: {visitData.needles_out}</PrevPointCopy>
+            <PrevPointCopy>
+              Needles exchanged for: {visitData.exchanged_for}
+            </PrevPointCopy>
           </div>
         </Grid>
       </Grid>

frontend/src/stores/ParticipantStore.js

@@ -423,6 +423,7 @@ export class ParticipantStore {
     participant,
     needles_in,
     needles_out,
+    exchanged_for,
     visit_date,
     site,
     service,
@@ -447,6 +448,7 @@ export class ParticipantStore {
       const { ok, data, status } = yield api.createSEP({
         needles_in: needles_in,
         needles_out: needles_out,
+        exchanged_for: exchanged_for,
         site: site,
         service: service,
         visit: visitData.id,

frontend/src/validation/index.js

@@ -60,8 +60,15 @@ const SEPSearchSchema = Yup.object().shape(
 
 const SEPNeedleErrorMessage = "Please complete all fields"
 const SEPNeedleSchema = Yup.object().shape({
-  needles_in: Yup.number().required(SEPNeedleErrorMessage),
-  needles_out: Yup.number().required(SEPNeedleErrorMessage),
+  needles_in: Yup.number()
+    .min(0)
+    .required(SEPNeedleErrorMessage),
+  needles_out: Yup.number()
+    .min(0)
+    .required(SEPNeedleErrorMessage),
+  exchanged_for: Yup.number()
+    .min(0)
+    .defined(SEPNeedleErrorMessage),
   visit_date: Yup.string().required(SEPNeedleErrorMessage),
 })
 

frontend/test/VisitData.test.js

@@ -10,6 +10,7 @@ const mockVisitData = {
   id: 1,
   needles_in: 1,
   needles_out: 2,
+  exchanged_for: 3,
   created_at: new Date(),
   site: { site_name: "a-site" },
 }
@@ -45,6 +46,13 @@ describe("<VisitData />", () => {
     expect(getByText(/needles out: 2/i)).toBeInTheDocument()
   })
 
+  it("has needles exchanged for value in dom", () => {
+    const { getByText } = renderWithRouter(
+      <VisitData visitData={mockVisitData} />
+    )
+    expect(getByText(/needles exchanged for: 3/i)).toBeInTheDocument()
+  })
+
   it("has site value in dom", () => {
     const { getByText } = renderWithRouter(
       <VisitData visitData={mockVisitData} />