Merge pull request GSA#1088 from brockfanning/data-edit-form-fix

Temporary fix of data edit form until upstream fix is released

_layouts/data-editor.html

@@ -0,0 +1,151 @@
+{% include head.html noindex=true %}
+{% include header.html %}
+<div id="main-content" class="container" role="main">
+  <div class="row no-gutters">
+    <div class="col-md-12"><h1>{{ page.title }}</h1></div>
+  </div>
+  <div class="row config-widgets">
+    <div class="col-md-6 data-grid-buttons">
+      <label for="add-column-name">Column name</label>
+      <input id="add-column-name" />
+      <button class="btn btn-primary btn-download" id="add-column">Add column</a>
+    </div>
+    <div class="col-md-6 data-download-buttons">
+      <button class="config-download-button btn btn-primary btn-download" id="export">Download data</button>
+      {% if page.form_settings.repository_link and page.form_settings.repository_link != '' %}
+      {% assign repository_link = page.form_settings.repository_link %}
+      {% assign data_repo = site.repository_url_data %}
+      {% if data_repo and data_repo != '' and data_repo contains 'http' %}
+        {% unless repository_link contains 'http' %}
+          {% assign repository_link = data_repo | append: repository_link %}
+        {% endunless %}
+      {% endif %}
+      <a class="config-repository-button btn btn-primary btn-download" target="_blank" href="{{ repository_link }}">
+        Go to repository
+      </a>
+      {% endif %}
+    </div>
+  </div>
+  <div class="row no-gutters">
+    <div class="editor-wrapper col-md-12">
+      <div id="editor-holder" style="height: 900px; width: 100%;" class="ag-theme-alpine"></div>
+    </div>
+  </div>
+
+  <script src="https://unpkg.com/[email protected]/papaparse.min.js"></script>
+  <script src="https://unpkg.com/[email protected]/dist/ag-grid-community.min.noStyle.js"></script>
+  <link rel="stylesheet" href="https://unpkg.com/[email protected]/styles/ag-grid.css">
+  <link rel="stylesheet" href="https://unpkg.com/[email protected]/styles/ag-theme-alpine.css">
+
+  <script>
+  var httpRequest;
+  var gridOptions;
+  var gridOptionsApi;
+  function makeRequest() {
+    httpRequest = new XMLHttpRequest();
+
+    if (!httpRequest) {
+      alert('Giving up :( Cannot create an XMLHTTP instance');
+      return false;
+    }
+    httpRequest.onreadystatechange = displaySpreadsheet;
+    httpRequest.open('GET', '{{ page.remote_data_prefix_untranslated }}/data/{{ page.indicator_number }}.csv');
+    httpRequest.send();
+  }
+
+  function displaySpreadsheet() {
+    if (httpRequest.readyState === XMLHttpRequest.DONE) {
+      if (httpRequest.status === 200) {
+        var csvString = httpRequest.responseText;
+        var csvData = Papa.parse(csvString, {header: true});
+        var columnDefs = [],
+            rowData = [];
+        if (csvData.data.length > 0) {
+          rowData = csvData.data;
+          columnDefs = csvData.meta.fields.map(function(key) {
+            var columnDef = { field: key, headerName: key };
+            if (key === 'Value') {
+              columnDef['type'] = 'numericColumn';
+            }
+            return columnDef;
+          });
+        }
+        else {
+          columnDefs = [
+            {
+              field: 'Year',
+              headerName: 'Year',
+            },
+            {
+              field: 'Value',
+              headerName: 'Value',
+              type: 'numericColumn',
+            }
+          ];
+          rowData = [
+            {}
+          ];
+        }
+        var container = document.getElementById('editor-holder');
+        gridOptions = {
+          defaultColDef: {
+            editable: true,
+            resizable: true,
+            minWidth: 100,
+            flex: 1,
+          },
+          columnDefs: columnDefs,
+          rowData: rowData,
+          undoRedoCellEditing: true,
+          undoRedoCellEditingLimit: 5,
+          enterNavigatesVerticallyAfterEdit: true,
+          suppressDragLeaveHidesColumns: true,
+          onCellValueChanged: function(info) {
+            if (info.rowIndex + 1 === info.api.getDisplayedRowCount()) {
+              info.api.applyTransaction({
+                add: [{}],
+              });
+            }
+          }
+        };
+
+        gridOptionsApi = agGrid.createGrid(container, gridOptions);
+      } else {
+        alert('There was a problem when loading the data. Please edit the data in some other way (such as in Github).');
+      }
+    }
+  }
+
+  document.addEventListener('DOMContentLoaded', function() {
+    makeRequest();
+  });
+
+  document.getElementById('export').onclick = function() {
+    gridOptionsApi.stopEditing();
+    gridOptionsApi.exportDataAsCsv({
+      fileName: '{{ page.config_filename }}',
+    });
+  }
+
+  document.getElementById('add-column').onclick = function() {
+    var columnName = document.getElementById('add-column-name').value;
+    if (columnName && columnName !== '') {
+      var columnDefs = gridOptions.columnDefs;
+      var newColumn = { field: columnName, headerName: columnName };
+      if (columnDefs.length > 1) {
+        // Put it second-to-last if possible.
+        columnDefs.splice(columnDefs.length - 1, 0, newColumn);
+      }
+      else {
+        // Otherwise just last.
+        columnDefs.push(newColumn);
+      }
+      gridOptionsApi.setGridOption('columnDefs', columnDefs);
+    }
+    else {
+      alert('Please enter a column name first and then try again.');
+    }
+  }
+  </script>
+</div>
+{% include footer.html %}