Allow User to enter custom query fields

[ademidun]

• Instead of selecting from a pre-approved list, the user should be able to enter more specific field queries such as atila_points___gte and the custom value of 100

• This will make it easier to implement dynamic double underscore filters in Django, see also Making Queries in Django

• The toggle between the two input types should only be shown if the user is logged in and it's an Admin user

• https://stackoverflow.com/questions/52747456/constructing-a-dynamic-query-using-user-input-in-django

• https://newbedev.com/how-to-dynamically-compose-an-or-query-filter-in-django

• Use Ant Design Solid Radio Button and Ant Design Input Group

• Edit QueryItem: https://github.com/ademidun/atila-client-web-app/blob/4afb6913c68a61ba759040ad779581f33ffd7297/src/components/Query/QueryItem.js#L11

Note: You might need to add the following to theindex.scss file if you are getting weird grey text:

.ant-radio-group-solid .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) {
    color: #fff !important;
}

Post data willlook like this:

{
"email__icontains":"@yahoo.com",
"gender":"female",
"atila_points__gt": 100
}

Pseudocode

<Radio.Group defaultValue="a" buttonStyle="solid">
                <Radio.Button value="a">Query Builder</Radio.Button>
                <Radio.Button value="b">Custom Field</Radio.Button>
            </Radio.Group>

            <Input.Group compact>
                <Input style={{ width: "50%" }} placeholder="Field" />
                <Input
                    className="site-input-right"
                    style={{
                    width: "50%",
                    }}
                    placeholder="Value"
                />
            </Input.Group>

Before

After

[ademidun]

closed by #494