Full advanced List View component example

I have an app for my preschool (yes, I also own a preschool I inherited from my mother a few years back) that I am developing as part of our curriculum progress tracking. Getting it off of paper.

This app is for creating/editing the progress checklists. Another app, that also uses List Views in a similar way, will be on the teacher's tablets.

I can add items, edit them in place, delete items and change their order, I can also add/remove categories. I am using a temp var to hold the object that populates the ListView which is the heart of the app. The database is updated in the background after each change. The entire JSON object is in a single JSON field in the Postgres database. I just write the object back on every change.

It is quite peppy!

This is it in action: Video Demo

This is the JSON for the app: CheckListTemplatesForTheForum

Table Structure:

CREATE TABLE IF NOT EXISTS public.checklist_templates
(
    template_id integer NOT NULL DEFAULT nextval('checklist_templates_template_id_seq'::regclass),
    checklist_name text COLLATE pg_catalog."default" NOT NULL,
    checklist json,
    CONSTRAINT checklist_templates_pkey PRIMARY KEY (template_id)
)

Sample JSON to put into your table (checklist field) to start:

{
  "checklist": "Tots",
  "child": null,
  "dateStarted": null,
  "dateCompleted": null,
  "categories": [
    {
      "categoryName": "Communication & understanding",
      "categoryId": 1,
      "items": [
        {
          "itemId": 26,
          "item": "Mimic: horse, cow, pig, chicken, duck, dog, cat,sheep, rooster",
          "dateDone": null
        },
        {
          "itemId": 27,
          "item": "Sit down, stand-up, lay down by direction",
          "dateDone": null
        }
      ]
    },
    {
      "categoryName": "Art / Project",
      "categoryId": 2,
      "items": [
        {
          "itemId": 1,
          "item": "Can paint",
          "dateDone": null
        },
        {
          "itemId": 2,
          "item": "Can draw happy face",
          "dateDone": null
        },
        {
          "itemId": 3,
          "item": "Can paint with finger paints",
          "dateDone": null
        },
        {
          "itemId": 4,
          "item": "Uses a paint brush correctly",
          "dateDone": null
        }
      ]
    }
  ]
}

8 Likes

Thanks for putting it all together nicely, this will help many folks.