Skip to content
Snippets Groups Projects
Code owners
Assign users and groups as approvers for specific file changes. Learn more.
create_update.html 16.45 KiB
{% extends 'lofardata/index.html' %}
{% load static %}
{% load crispy_forms_tags %}
{% load define_action %}
{% load widget_tweaks %}
{% load json %}

{% block myBlock %}
    <div class="overlay">
        <div class="modal-dias-wrapper">
            <div class="modal-dias modal-dias--fit-content">
                <a class="icon icon--times button--close" href="{% url 'index' %}"></a>
                <header class="flex-wrapper flex-wrapper--centered flex-wrapper--column">
                    {% if object.pk %}
                        <h2 class="title text text--primary">Edit Work Specification {{ object.pk }}</h2>
                        <form method="post" action="{% url 'specification-update' object.pk %}">
                    {% else %}
                        <h2 class="title text text--primary">New Work Specification </h2>
                        <form method="post" action="{% url 'specification-create' %}">
                    {% endif %}

                    {% csrf_token %}
                    <div class="flex-wrapper flex-wrapper--row flex-wrapper--start">
                        <!-- Standard input fields -->
                        <div class="custom--div-margin">
                            <h3 class="text text--primary text--title">Selection</h3>
                            <div class="flex-wrapper flex-wrapper--row" id="div_id_group">
                                <div class="flex-wrapper flex-wrapper--row custom__input--fixed-min-width">
                                    <label class="input__label">{{ form.group.label }}</label>
                                    <a class="tooltip-dias tooltip-dias-right custom--tooltip"
                                       data-tooltip="{{ form.group.help_text }}">m</a>
                                </div>
                                <div class="input-select-wrapper icon--inline icon-after icon-after--angle-down margin-left margin-bottom">
                                    {% render_field form.group class="input input--select custom__input--fixed-width" %}
                                </div>
                            </div>

                            <div class="flex-wrapper flex-wrapper--row" id="div_id_processing_site">
                                <div class="flex-wrapper flex-wrapper--row custom__input--fixed-min-width">
                                    <label class="input__label">{{ form.processing_site.label }}*</label>
                                    <a class="tooltip-dias tooltip-dias-right custom--tooltip"
                                       data-tooltip="{{ form.processing_site.help_text }}">m</a>
                                </div>
                                <div class="input-select-wrapper icon--inline icon-after icon-after--angle-down">
                                    <select class="input input--select custom__input--fixed-width margin-left margin-bottom"
                                            name="processing_site"
                                            data-bind="options:processingSites,
                                                       optionsCaption: '---------',
                                                       optionsText: function(item) { return item.name + ' - ' + item.url},
                                                       optionsValue: 'name',
                                                       value: selectedProcessingSite"
                                            test-id="processing_site"
                                    ></select>
                                </div>
                            </div>


                            <div class="flex-wrapper flex-wrapper--row" id="div_id_selected_workflow_tag">
                                <div class="flex-wrapper flex-wrapper--row custom__input--fixed-min-width">
                                    <label class="input__label"
                                           for="id_selected_workflow_tag">{{ form.selected_workflow_tag.label_tag }}*</label>
                                    <a class="tooltip-dias tooltip-dias-right custom--tooltip"
                                       data-tooltip="{{ form.selected_workflow_tag.help_text }}">m</a>
                                </div>
                                <div class="input-select-wrapper icon--inline icon-after icon-after--angle-down">
                                    <select class="input input--select custom__input--fixed-width margin-bottom margin-left"
                                            id="id_selected_workflow_tag"
                                            test-id="workflow_tag"
                                            name="selected_workflow_tag"
                                            style="width: 12rem"
                                            data-bind="options:tags,
                                                       optionsCaption: caption,
                                                       value: selectedTag,
                                                       disable: isLoading">
                                    </select>
                                </div>
                            </div>


                            <div class="flex-wrapper flex-wrapper--row" id="div_id_selected_workflow">
                                <div class="flex-wrapper flex-wrapper--row custom__input--fixed-min-width">
                                    <label class="input__label"
                                           for="id_selected_workflow">{{ form.selected_workflow.label }}*</label>
                                    <a class="tooltip-dias tooltip-dias-right custom--tooltip"
                                       data-tooltip="{{ form.selected_workflow.help_text }}">m</a>
                                </div>
                                <div class="input-select-wrapper icon--inline icon-after icon-after--angle-down">
                                    <select class="input input--select custom__input--fixed-width margin-bottom margin-left"
                                            id="id_selected_workflow"
                                            name="selected_workflow"
                                            style="width: 12rem"
                                            test-id="workflow"
                                            data-bind="options:workflowsByTag,
                                                   optionsCaption: caption,
                                                   optionsValue: 'workflow_uri',
                                                   optionsText: 'workflow_uri',
                                                   value: selectedWorkflow,
                                                   disable: isLoading">
                                    </select>
                                </div>
                            </div>

                            <div class="flex-wrapper flex-wrapper--row" id="div_id_predecessor">
                                <div class="flex-wrapper flex-wrapper--row custom__input--fixed-min-width">
                                    <label class="input__label"
                                           for="id_predecessor">{{ form.predecessor_specification.label }}</label>
                                    <a class="tooltip-dias tooltip-dias-right custom--tooltip"
                                       data-tooltip="{{ form.predecessor_specification.help_text }}">m</a>
                                </div>
                                <div class="input-select-wrapper icon--inline icon-after icon-after--angle-down margin-left margin-bottom">
                                    {% render_field form.predecessor_specification class="input input--select custom__input--fixed-width" %}
                                </div>
                            </div>

                            <div class="flex-wrapper flex-wrapper--row" id="div_id_batch_size">
                                <div class="flex-wrapper flex-wrapper--row custom__input--fixed-min-width">
                                    <label class="input__label"
                                           for="id_batch_size">{{ form.batch_size.label_tag }}</label>
                                    <a class="tooltip-dias tooltip-dias-right custom--tooltip"
                                       data-tooltip="{{ form.batch_size.help_text }}">m</a>
                                </div>
                                {% render_field form.batch_size class="input input--select custom__input--fixed-width margin-left margin-bottom" type="number" %}
                            </div>

                            <div class="flex-wrapper flex-wrapper--row" id="div_id_auto_submit">
                                {% render_field form.is_auto_submit class="input custom--checkbox margin-top" type="checkbox" %}
                                <label class="input__label">{{ form.is_auto_submit.label }}</label>
                                <a class="tooltip-dias tooltip-dias-right custom--tooltip"
                                   data-tooltip="{{ form.is_auto_submit.help_text }}">m</a>
                            </div>
                        </div>

                        <!-- Filter fields -->
                        <div class="custom--div-margin">
                            <h3 class="text text--primary text--title">Filters</h3>
                            {% for filter in filters %}
                                {% if filter.filter_type == 'Free' %}
                                    <div class="flex-wrapper">
                                        <div class="flex-wrapper flex-wrapper--row custom__input--fixed-min-width">
                                            <label class="input__label"
                                                   for="id_{{ filter.field }}">{{ filter.name }}</label>
                                            {% if filter.help_text %}
                                                <a class="tooltip-dias tooltip-dias-right custom--tooltip"
                                                   data-tooltip="{{ filter.help_text }}">m</a>
                                            {% endif %}
                                        </div>
                                        <input class="input input--text margin-left margin-bottom"
                                               id="id_{{ filter.field }}" name="{{ filter.field }}"
                                               test-id="{{ filter.name }}"
                                               placeholder="Enter {{ filter.name }}" type="text"
                                               data-filter="{{ filter.lookup_type }}"
                                               value="{{ filter.default }}">
                                    </div>
                                {% elif filter.filter_type == 'Dropdown' %}
                                    <div class="flex-wrapper flex-wrapper--row"
                                         id="div_id_filter_{{ filter.name }}">
                                        <div class="flex-wrapper flex-wrapper--row custom__input--fixed-min-width">
                                            <label class="input__label"
                                                   for="id_{{ filter.field }}"
                                                   test-id="{{ filter.name }}">{{ filter.name }}</label>
                                            {% if filter.help_text %}
                                                <a class="tooltip-dias tooltip-dias-right custom--tooltip"
                                                   data-tooltip="{{ filter.help_text }}">m</a>
                                            {% endif %}
                                        </div>
                                        <div class="input-select-wrapper icon--inline icon-after icon-after--angle-down margin-left margin-bottom">
                                            <select class="input input--select custom__input--fixed-width"
                                                    id="id_{{ filter.field }}"
                                                    test-id="{{ filter.name }}"
                                                    name="{{ filter.field }}"
                                                    data-filter="{{ filter.lookup_type }}"
                                                    style="width: 12rem">
                                                {#for some reason, styling is not applied otherwise#}
                                                <option selected value="">All</option>
                                                {% for option in filter.choices %}
                                                    {% if filter.default == option.0 %}
                                                        <option value="{{ option.0 }}">{{ option.0 }}</option>
                                                    {% else %}
                                                        <option value="{{ option.0 }}">{{ option.0 }}</option>
                                                    {% endif %}
                                                {% endfor %}
                                            </select>
                                        </div>
                                    </div>
                                {% else %}
                                    <div class="text text--red">Not supported field</div>
                                {% endif %}
                            {% endfor %}
                        </div>
                    </div>

                    <div class="flex-wrapper flex-wrapper--centered margin-bottom margin-top">
                        <button class="button button--primary margin-right"
                                type="submit"
                                name="action"
                                value="Submit"
                                test-id="create-update"
                                title="
                                {% if object.pk %}
                                Update the task
                                {% else %}
                                Create the task to inspect the result. Send it later to ATDB.
                                {% endif %}">

                            {% if object.pk %}
                                Update
                            {% else %}
                                Create
                            {% endif %}
                        </button>
                        <button class="button button--primary margin-right" type="submit"
                                value="Successor"
                                name="action"
                                title="Submit the task and add a successor task.">Add successor
                        </button>
                        <a class="button button--red button--primary margin-left" href="{% url 'index' %}">Cancel</a>
                    </div>

                    </form>
                </header>
                {% if form.errors %}
                    <div class="popup-bar popup-bar--red">
                        <span class="icon icon--left icon--color-inherit icon--times"></span>
                        <div class="flex-wrapper flex-wrapper--column">
                            The input is invalid:
                            {% for field, errors in form.errors.items %}
                                {% for error in errors %}
                                    {% if field == '__all__' %}
                                        <li class="text text--red text--faded">{{ error }}</li>
                                    {% else %}
                                        <li class="text text--red text--faded">{{ field }}: {{ error }}</li>
                                    {% endif %}
                                {% endfor %}
                            {% endfor %}
                        </div>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
    <script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.0/knockout-min.js'></script>
    <script type="text/javascript">
        const processingSite = "{% url 'processingsite-detail' 'replace' %}";
        const existingWorkflow = '{{ object.selected_workflow|default_if_none:"null" }}';
        const existingWorkflowTag = '{{ object.selected_workflow_tag|default_if_none:"null" }}';
        const processingSites = {{ processing_sites | json }};
        const existingProcessingSite = '{{ object.processing_site.name }}';
    </script>
    <script src="{% static 'update_workflow.js' %}"></script>
{% endblock %}