@osfarm/itineraire-technique 1.2.0 → 1.2.1

package/js/chart-render.js

@@ -132,6 +132,19 @@ class RotationRenderer {
         this.currentFocusIndex = null;
         this.noFocusUpdate = false;
 
+        // If some steps have the deprecated attribute field, we add them to the description:
+        self.data.steps.map(item => {
+            if (item.attributes?.length > 0) {
+                item.description += "\n\n";
+                item.attributes?.forEach(attr => {
+                    item.description += `${attr.name} : ${attr.value}\n`;
+                });
+            }
+
+            // remove the attributes field to avoid displaying
+            delete item.attributes;            
+        });
+
         if (self.initialLayout == 'horizontal')
             option = this.getStepsOption();
         else
@@ -425,13 +438,6 @@ class RotationRenderer {
                 item.name = "Etape " + item.name; // Force the item name to be a string
 
             let description = self.getHTMLFormatedDescription(item.description);
-            if (item.interventions?.length > 0 || item.attributes?.length > 0) {
-                description += '<br/>';
-                item.attributes?.forEach(attr => {
-                    description += `<br><b>${attr.name} :</b> ${attr.value}`;
-                });
-            }
-
 
             data.push({
                 name: item.name,
@@ -819,7 +825,7 @@ class RotationRenderer {
         self.data.steps.forEach((item, index) => {
 
             let visibility = 'invisible';
-            if (item.interventions?.length > 0 || item.attributes?.length > 0)
+            if (item.interventions?.length > 0)
                 visibility = "visible";
 
             let collapseButton = '<div class="collapse-button ' + visibility + '"><i class="fa fa-chevron-down" aria-hidden="true"></i></div>';
@@ -834,8 +840,7 @@ class RotationRenderer {
                 + '<div class="step_dates">' + dates + '</div>'
                 + '<h4 class="">' + item.name + '<i class="fa fa-pencil step-edit" aria-hidden="true"></i></h4>'
                 + '</div><p class="step_description clearfix">' + self.getHTMLFormatedDescription(item.description) + '</p>'
-                + '<div class="details">'
-                + (item.attributes?.length > 0 ? item.attributes.map((attribute) => { return '<p><dt>' + attribute.name + '</dt><dd>' + attribute.value + '</dd></p>' }).join('') : '');
+                + '<div class="details">';
 
             if (item.interventions?.length > 0) {
                 html += '<h5>Interventions</h5>';
@@ -1109,7 +1114,7 @@ class RotationRenderer {
             hideDelay: 1000,
             extraCssText: "text-wrap: wrap;",
             position: function (pos, params, el, elRect, size) {
-                var obj = { top: 10 };
+                var obj = { bottom: 10 };
                 obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 30;
                 return obj;
             },

package/js/editor-interventions.js

@@ -1,217 +1,343 @@
-function addInterventionClickEvent() {
-    let id = getInputValue("interventionId");
-    let name = getInputValue("interventionName");
-    let day = getInputValue("interventionDay");
-    let type = getInputValue("interventionType");
-    let description = getInputValue("interventionDescription");
-
-    if (id != "") {
-        selectedStep.updateIntervention(id, day, name, type, description);
-    } else {
-        selectedStep.addIntervention(day, name, type, description);
-
-        document.getElementById("newInterventionButton").classList.remove("d-none");
-        getAndCleanElement("newInterventionContainer");
+/**
+ * InterventionTable class - Manages interventions UI and interactions
+ */
+class InterventionTable {
+
+    // Constructor
+    constructor(interventionsTopTitle, interventionsBottomTitle, tikaEditorInstance) {
+        this.selectedStep = null;
+        
+        this.interventionsTopTitle = interventionsTopTitle;
+        this.interventionsBottomTitle = interventionsBottomTitle;
+        this.tikaEditorInstance = tikaEditorInstance;
     }
-    refreshAllTables();
-}
 
-function refreshInterventionsTable() {
-    let interventionsTopContainer = getAndCleanElement("interventionsTopContainer");
-    let interventionsBottomContainer = getAndCleanElement("interventionsBottomContainer");
+    /**
+     * Setup the interventions table div dynamically
+     */
+    setupDiv() {
+
+        // Check if the div already exists
+        if ($('#interventionsTable').length > 0) {
+            return; // Already created
+        }
 
-    if (selectedStep && selectedStep.getStep().interventions) {
-        // Sort all interventions by day
-        selectedStep.getStep().interventions = selectedStep.getStep().interventions.sort((a, b) => a.day - b.day);        
+        const interventionsTableDiv = $(`
+            <div id="interventionsTable" class="row card-holder">
+                <div class="col-12">
+                    <h5>Interventions</h5>
+                    <div class="row">
+                        <p id="interventionsTopName" class="h6">${this.interventionsTopTitle}</p>
+                        <div id="interventionsTopContainer" class="container"></div>
+                    </div>
+                    <hr class="my-2">
+                    <div class="row">
+                        <p id="interventionsBottomName" class="h6">${this.interventionsBottomTitle}</p>
+                        <div id="interventionsBottomContainer" class="container"></div>
+                    </div>
+
+                    <button id="newInterventionButton" type="button"
+                        class="btn btn-primary primary-button w-100"><i class="fa fa-plus-square"
+                            aria-hidden="true"></i> Ajouter</button>
+                    <div id="newInterventionContainer"></div>
+                </div>
+            </div>
+        `);
+        
+        // Insert after the step's details
+        $('#cropDetailView').after(interventionsTableDiv);
         
-        selectedStep.getStep().interventions.forEach((intervention) => {
-            const rowDiv = createInterventionRow(intervention);
+        const self = this;
 
-            if (intervention.type === crops.options.title_top_interventions) {
-                interventionsTopContainer.appendChild(rowDiv);
-            } else {
-                interventionsBottomContainer.appendChild(rowDiv);
-            }
+        $('#newInterventionButton').on('click', function(e) {
+            e.preventDefault();
+            self.showInterventionForm();
         });
     }
-}
 
-function createInterventionRow(intervention) {
-    let rowDiv = document.createElement("div");
-    rowDiv.className = "row mb-2 intervention-row editable-row position-relative";
-
-    let nameValueDiv = createInterventionNameAndValueColumn(intervention);
-    rowDiv.appendChild(nameValueDiv);
-
-    addEditAndRemoveButtons(
-        rowDiv,
-        intervention.id,
-        function () {
-            createInterventionForm(intervention.id, intervention.day, intervention.name, intervention.type, intervention.description, rowDiv);
-        },
-        function(id) {
-            selectedStep.removeIntervention(id);
-            refreshInterventionsTable();
-            renderChart();
-        },
-        function(id) {
-            duplicateIntervention(id);
-            refreshInterventionsTable();
-            renderChart();
-        },
-        'btn-group-vertical'
-    );
-
-    return rowDiv;
-}
+    getAndCleanElement(elementId) {
+        let element = document.getElementById(elementId);
+        element.innerHTML = "";
+        return element;
+    }
+
+    refreshInterventionsTable(selectedStep) {
+        this.selectedStep = selectedStep;
+
+        let interventionsTopContainer = this.getAndCleanElement("interventionsTopContainer");
+        let interventionsBottomContainer = this.getAndCleanElement("interventionsBottomContainer");
+
+        if (this.selectedStep.getStep().interventions) {
+            // Sort all interventions by day
+            this.selectedStep.getStep().interventions = this.selectedStep.getStep().interventions.sort((a, b) => a.day - b.day);        
+            
+            this.selectedStep.getStep().interventions.forEach((intervention) => {
+                const rowDiv = this.createInterventionRow(intervention);
+
+                if (intervention.type === 'intervention_top') {
+                    $("#interventionsTopContainer").append(rowDiv);
+                } else {
+                    $("#interventionsBottomContainer").append(rowDiv);
+                }
+            });
+        }
+    }
+
+    addEditAndRemoveButtons(rowDiv, deleteId, editFunction, deleteFunction, duplicateFunction, style="btn-group") {
+        rowDiv = $(rowDiv);
+
+        let actionContainer = $(`<div class="col-auto edit-buttons m-1 ${style}" role="group"></div>`);
+
+        rowDiv.append(actionContainer);
 
-function createInterventionNameAndValueColumn(intervention) {
-    let absoluteDate = "";
-    if (selectedStep && selectedStep.getStep().startDate) {
-        const stepStartDate = new Date(selectedStep.getStep().startDate);
-        const interventionDate = new Date(stepStartDate);
-        interventionDate.setDate(stepStartDate.getDate() + parseInt(intervention.day));
-        absoluteDate = interventionDate.toLocaleDateString('fr-FR', {
-            month: "short",
-            day: "numeric",
+        actionContainer.append($('<button class="edit-button btn btn-outline-primary p-2"><i class="fa fa-pencil"></i></button>').click(function(event) {
+            event.stopPropagation();
+            editFunction();
+        }));
+
+        rowDiv.find('.col').click(function(event) {
+            event.stopPropagation();
+            editFunction();
         });
+
+        if (duplicateFunction != null) {
+            actionContainer.append($('<button class="btn btn-outline-secondary p-2"><i class="fa fa-copy"></i></button>').click(function (event) {
+                event.stopPropagation();
+                duplicateFunction(deleteId);
+            }));
+        }
+
+        actionContainer.append($('<button class="btn btn-outline-danger p-2"><i class="fa fa-trash"></i></button>').click(function (event) {
+            event.stopPropagation();
+            deleteFunction(deleteId);
+        }));
     }
-    
-    let nameValueDiv = document.createElement("div");
-    nameValueDiv.className = "col";
-    nameValueDiv.innerHTML = `<strong>${intervention.name}</strong> (${absoluteDate})</br> ${intervention.description}`;
 
-    return nameValueDiv;
-}
+    createInterventionRow(intervention) {
+        const self = this;
+        let rowDiv = document.createElement("div");
+        rowDiv.className = "row mb-2 intervention-row editable-row position-relative";
+        rowDiv.id = `interventionRow_${intervention.id}`;
 
-function createInterventionForm(id, day, name, type, description, row) {
-    id = id || "";
-    day = day || "";
-    name = name || "";
-    type = type || "";
-    description = description || "";
-
-    // Calculate absolute date from relative day
-    let absoluteDate = "";
-    if (day == "")
-        day = 0;
-    
-    if (selectedStep && selectedStep.getStep().startDate) {
-        const stepStartDate = new Date(selectedStep.getStep().startDate);
-        const interventionDate = new Date(stepStartDate);
-        interventionDate.setDate(stepStartDate.getDate() + parseInt(day));
-        absoluteDate = interventionDate.toISOString().split('T')[0];
+        let nameValueDiv = self.createInterventionNameAndValueColumn(intervention);
+        rowDiv.appendChild(nameValueDiv);
+
+        this.addEditAndRemoveButtons(
+            rowDiv,
+            intervention.id,
+            function () {
+                self.showInterventionForm(intervention, rowDiv);
+            },
+            function(id) {
+                self.selectedStep.removeIntervention(id);
+                $(`#interventionRow_${id}`).remove();
+                self.tikaEditorInstance.renderChart();
+            },
+            function(id) {
+                const newIntervention = self.duplicateIntervention(id);
+                const div = self.createInterventionRow(newIntervention);
+                if (newIntervention.type === 'intervention_top') {
+                    $("#interventionsTopContainer").append(div);
+                } else {
+                    $("#interventionsBottomContainer").append(div);
+                }
+                self.tikaEditorInstance.renderChart();
+            },
+            'btn-group-vertical'
+        );
+
+        return rowDiv;
     }
 
-    const formContainer = document.createElement("div");
-    formContainer.innerHTML =
-        `<form id="interventionForm">
-            <div class="row card-white mb-2">
-                <input type="hidden" id="interventionId" value="${id}">
-                <div class="col-12 mb-2">
-                    <label for="interventionName" class="form-label">Nom</label>
-                    <input type="text" id="interventionName" class="form-control" placeholder="Nom" value="${name}">
-                </div>
-                <div class="col-12 mb-2">
-                    <textarea id="interventionDescription" class="form-control"
-                        placeholder="Ajouter une description">${description}</textarea>
-                </div>
-                <div class="col-4 mb-2">
-                    <label for="interventionDay" class="form-label">Jour relatif</label>
-                    <input type="number" id="interventionDay" class="form-control text-right" placeholder="Jour"
-                        value="${day}">
-                </div>
-                <div class="col-8 mb-2">
-                    <label for="interventionDate" class="form-label">Date absolue</label>
-                    <input type="date" id="interventionDate" class="form-control" value="${absoluteDate}">
-                </div>
-                <div class="col-12 mb-2">
-                    <select id="interventionType" class="form-select" aria-label="Type">
-                        <option value="intervention_top" 
-                        ${type === "intervention_top" ? "selected" : ""}>${crops.options.title_top_interventions}</option>
-                        <option value="intervention_bottom" 
-                        ${type === "intervention_bottom" ? "selected" : ""}>${crops.options.title_bottom_interventions}</option>
-                    </select>
-                </div>
+    createInterventionNameAndValueColumn(intervention) {
+        let absoluteDate = "";
+        if (this.selectedStep && this.selectedStep.getStep().startDate) {
+            const stepStartDate = new Date(this.selectedStep.getStep().startDate);
+            const interventionDate = new Date(stepStartDate);
+            interventionDate.setDate(stepStartDate.getDate() + parseInt(intervention.day));
+            absoluteDate = interventionDate.toLocaleDateString('fr-FR', {
+                month: "short",
+                day: "numeric",
+            });
+        }
+        
+        let nameValueDiv = document.createElement("div");
+        nameValueDiv.className = "col";
+        nameValueDiv.innerHTML = `<strong>${intervention.name}</strong> (${absoluteDate})</br> ${intervention.description}`;
 
-                <div class="col">
-                    <button type="button" onclick="addInterventionClickEvent()"
-                        class="w-100 btn btn-outline-primary primary-button">Valider</button>
-                </div>
-            </div>
-        </form>
-    `;
-
-    if (row) { //we are editing an intervention
-        row.replaceWith(formContainer);
-    } else { //we are adding an intervention
-        document.getElementById("newInterventionContainer").appendChild(formContainer);
-        document.getElementById("newInterventionButton").classList.add("d-none");
+        return nameValueDiv;
     }
 
-    // Add event listeners for date synchronization
-    setupInterventionDateListeners();
+    showInterventionForm(intervention, row) {
+        const self = this;
+        let id = intervention?.id || "";
+        let day = intervention?.day || "";
+        let name = intervention?.name || "";
+        let type = intervention?.type || "";
+        let description = intervention?.description || "";
 
-    $("#interventionName").focus();
-}
+        // Calculate absolute date from relative day
+        let absoluteDate = "";
+        if (day === "")
+            day = 0;
+        
+        if (this.selectedStep && this.selectedStep.getStep().startDate) {
+            const stepStartDate = new Date(this.selectedStep.getStep().startDate);
+            const interventionDate = new Date(stepStartDate);
+            interventionDate.setDate(stepStartDate.getDate() + parseInt(day));
+            absoluteDate = interventionDate.toISOString().split('T')[0];
+        }
 
-function setupInterventionDateListeners() {
-    // When relative day changes, update absolute date
-    $("#interventionDay").on("input change", function() {
-        updateAbsoluteDateFromRelative();
-    });
+        const formContainer = document.createElement("div");
+        formContainer.innerHTML =
+            `<form id="interventionForm">
+                <div class="row card-white mb-2">
+                    <input type="hidden" id="interventionId" value="${id}">
+                    <div class="col-12 mb-2">
+                        <label for="interventionName" class="form-label">Nom</label>
+                        <input type="text" id="interventionName" class="form-control" placeholder="Nom" value="${name}">
+                    </div>
+                    <div class="col-12 mb-2">
+                        <textarea id="interventionDescription" class="form-control"
+                            placeholder="Ajouter une description">${description}</textarea>
+                    </div>
+                    <div class="col-4 mb-2">
+                        <label for="interventionDay" class="form-label">Jour relatif</label>
+                        <input type="number" id="interventionDay" class="form-control text-right" placeholder="Jour"
+                            value="${day}">
+                    </div>
+                    <div class="col-8 mb-2">
+                        <label for="interventionDate" class="form-label">Date absolue</label>
+                        <input type="date" id="interventionDate" class="form-control" value="${absoluteDate}">
+                    </div>
+                    <div class="col-12 mb-2">
+                        <select id="interventionType" class="form-select" aria-label="Type">
+                            <option value="intervention_top" 
+                            ${type === "intervention_top" ? "selected" : ""}>${this.interventionsTopTitle}</option>
+                            <option value="intervention_bottom" 
+                            ${type === "intervention_bottom" ? "selected" : ""}>${this.interventionsBottomTitle}</option>
+                        </select>
+                    </div>
 
-    // When absolute date changes, update relative day
-    $("#interventionDate").on("change", function() {
-        updateRelativeDayFromAbsolute();
-    });
-}
+                    <div class="col">
+                        <button type="button" class="ValidateInterventionFormButton w-100 btn btn-outline-primary primary-button">Valider</button>
+                    </div>
+                </div>
+            </form>
+        `;
 
-function updateAbsoluteDateFromRelative() {
-    const relativeDay = $("#interventionDay").val();
-    if (relativeDay == "")
-        relativeDay = 0;
+        // Add the addInterventionClickEvent listener to the button
+        const form = $(formContainer);
+        form.find(".ValidateInterventionFormButton").on("click", (e) => {
+            e.preventDefault();
 
-    if (selectedStep && selectedStep.getStep().startDate) {
-        const stepStartDate = new Date(selectedStep.getStep().startDate);
-        const interventionDate = new Date(stepStartDate);
-        interventionDate.setDate(stepStartDate.getDate() + parseInt(relativeDay));
-        
-        const absoluteDateStr = interventionDate.toISOString().split('T')[0];
-        $("#interventionDate").val(absoluteDateStr);
-    }
-}
+            let id = form.find("#interventionId").val();
+            let name = form.find("#interventionName").val();
+            let day = form.find("#interventionDay").val();
+            let type = form.find("#interventionType").val();
+            let description = form.find("#interventionDescription").val();
+
+            if (id != "") {
+                intervention.name = name;
+                intervention.day = day;
+                intervention.type = type;
+                intervention.description = description;
+
+                // Also update the row display
+                const updatedRowDiv = this.createInterventionRow(this.selectedStep.getStep().interventions.find(itv => itv.id === id));
+                $(formContainer).replaceWith(updatedRowDiv);
+
+            } else {
+                this.selectedStep.addIntervention(day, name, type, description);
+
+                $("#newInterventionButton").show();
+                this.getAndCleanElement("newInterventionContainer");
 
-function updateRelativeDayFromAbsolute() {
-    const absoluteDate = $("#interventionDate").val();
-    if (absoluteDate !== "" && selectedStep && selectedStep.getStep().startDate) {
-        const stepStartDate = new Date(selectedStep.getStep().startDate);
-        const interventionDate = new Date(absoluteDate);
+                // Add the new intervention to the table
+                const newIntervention = this.selectedStep.getStep().interventions[this.selectedStep.getStep().interventions.length - 1];
+                const newRowDiv = this.createInterventionRow(newIntervention);
+                if (newIntervention.type === 'intervention_top') {
+                    $("#interventionsTopContainer").append(newRowDiv);
+                } else {
+                    $("#interventionsBottomContainer").append(newRowDiv);
+                }
+                    
+                // Remove the form
+                formContainer.remove();
+            }            
+
+            self.tikaEditorInstance.renderChart();
+        });
         
-        // Calculate difference in days
-        const timeDiff = interventionDate.getTime() - stepStartDate.getTime();
-        const dayDiff = Math.round(timeDiff / (1000 * 60 * 60 * 24));
+        if (row) { //we are editing an intervention
+            row.replaceWith(formContainer);
+        } else { //we are adding an intervention
+            $("#newInterventionContainer").append(formContainer);
+            $("#newInterventionButton").hide();
+        }
+
+        // Add event listeners for date synchronization
+        // When relative day changes, update absolute date
+        form.find("#interventionDay").on("input change", function() {
+            self.updateAbsoluteDateFromRelative();
+        });
+
+        // When absolute date changes, update relative day
+        form.find("#interventionDate").on("change", function() {
+            self.updateRelativeDayFromAbsolute();
+        });
         
-        $("#interventionDay").val(dayDiff);
+        form.find("#interventionName").focus();
+    }
+
+    updateAbsoluteDateFromRelative() {
+        const relativeDay = $("#interventionDay").val();
+        if (relativeDay == "")
+            relativeDay = 0;
+
+        if (this.selectedStep && this.selectedStep.getStep().startDate) {
+            const stepStartDate = new Date(this.selectedStep.getStep().startDate);
+            const interventionDate = new Date(stepStartDate);
+            interventionDate.setDate(stepStartDate.getDate() + parseInt(relativeDay));
+            
+            const absoluteDateStr = interventionDate.toISOString().split('T')[0];
+            $("#interventionDate").val(absoluteDateStr);
+        }
     }
-}
 
-function duplicateIntervention(interventionId) {
-    if (!selectedStep) return;
-
-    // Find the intervention to duplicate
-    let originalIntervention = selectedStep.getStep().interventions.find(interv => interv.id === interventionId);
-    if (!originalIntervention) return;
-
-    // Create a copy of the intervention
-    let newIntervention = {
-        id: crypto.randomUUID(),
-        day: Number(originalIntervention.day) + 15, // Offset by 15 days to avoid overlap
-        name: originalIntervention.name,
-        type: originalIntervention.type,
-        description: originalIntervention.description
-    };
-
-    // Add the duplicated intervention to the selected step
-    selectedStep.getStep().interventions.push(newIntervention);
-}
+    updateRelativeDayFromAbsolute() {
+        const absoluteDate = $("#interventionDate").val();
+        if (absoluteDate !== "" && this.selectedStep && this.selectedStep.getStep().startDate) {
+            const stepStartDate = new Date(this.selectedStep.getStep().startDate);
+            const interventionDate = new Date(absoluteDate);
+            
+            // Calculate difference in days
+            const timeDiff = interventionDate.getTime() - stepStartDate.getTime();
+            const dayDiff = Math.round(timeDiff / (1000 * 60 * 60 * 24));
+            
+            $("#interventionDay").val(dayDiff);
+        }
+    }
+
+    duplicateIntervention(interventionId) {
+        if (!this.selectedStep) return;
+
+        // Find the intervention to duplicate
+        let originalIntervention = this.selectedStep.getStep().interventions.find(interv => interv.id === interventionId);
+        if (!originalIntervention) return;
+
+        // Create a copy of the intervention
+        let newIntervention = {
+            id: crypto.randomUUID(),
+            day: Number(originalIntervention.day) + 15, // Offset by 15 days to avoid overlap
+            name: originalIntervention.name,
+            type: originalIntervention.type,
+            description: originalIntervention.description
+        };
+
+        // Add the duplicated intervention to the selected step
+        this.selectedStep.getStep().interventions.push(newIntervention);
+
+        return newIntervention;
+    }
+}