Source: src/js/views/metadata/EMLEntityView.js

  1. define([
  2.   "underscore",
  3.   "jquery",
  4.   "backbone",
  5.   "localforage",
  6.   "models/DataONEObject",
  7.   "models/metadata/eml211/EMLAttribute",
  8.   "models/metadata/eml211/EMLEntity",
  9.   "views/DataPreviewView",
  10.   "views/metadata/EMLAttributeView",
  11.   "text!templates/metadata/eml-entity.html",
  12.   "text!templates/metadata/eml-attribute-menu-item.html",
  13.   "common/Utilities",
  14. ], function (
  15.   _,
  16.   $,
  17.   Backbone,
  18.   LocalForage,
  19.   DataONEObject,
  20.   EMLAttribute,
  21.   EMLEntity,
  22.   DataPreviewView,
  23.   EMLAttributeView,
  24.   EMLEntityTemplate,
  25.   EMLAttributeMenuItemTemplate,
  26.   Utilities,
  27. ) {
  28.   /**
  29.    * @class EMLEntityView
  30.    * @classdesc An EMLEntityView shows the basic attributes of a DataONEObject, as described by EML
  31.    * @classcategory Views/Metadata
  32.    * @screenshot views/metadata/EMLEntityView.png
  33.    * @extends Backbone.View
  34.    */
  35.   var EMLEntityView = Backbone.View.extend(
  36.     /** @lends EMLEntityView.prototype */ {
  37.       tagName: "div",
  39.       className: "eml-entity modal hide fade",
  41.       id: null,
  43.       /* The HTML template for an entity */
  44.       template: _.template(EMLEntityTemplate),
  45.       attributeMenuItemTemplate: _.template(EMLAttributeMenuItemTemplate),
  46.       fillButtonTemplateString:
  47.         '<button class="btn btn-primary fill-button"><i class="icon-magic"></i> Fill from file</button>',
  49.       /**
  50.        * A list of file formats that can be auto-filled with attribute information
  51.        * @type {string[]}
  52.        * @since 2.15.0
  53.        */
  54.       fillableFormats: ["text/csv"],
  56.       /* Events this view listens to */
  57.       events: {
  58.         change: "saveDraft",
  59.         "change input": "updateModel",
  60.         "change textarea": "updateModel",
  61.         "click .entity-container > .nav-tabs a": "showTab",
  62.         "click .attribute-menu-item": "showAttribute",
  63.         "mouseover .attribute-menu-item .remove": "previewAttrRemove",
  64.         "mouseout .attribute-menu-item .remove": "previewAttrRemove",
  65.         "click .attribute-menu-item .remove": "removeAttribute",
  66.         "click .fill-button": "handleFill",
  67.       },
  69.       initialize: function (options) {
  70.         if (!options) var options = {};
  72.         this.model = options.model || new EMLEntity();
  73.         this.DataONEObject = options.DataONEObject;
  74.       },
  76.       render: function () {
  77.         this.renderEntityTemplate();
  79.         this.renderPreview();
  81.         this.renderAttributes();
  83.         this.renderFillButton();
  85.         this.listenTo(this.model, "invalid", this.showValidation);
  86.         this.listenTo(this.model, "valid", this.showValidation);
  87.       },
  89.       renderEntityTemplate: function () {
  90.         var modelAttr = this.model.toJSON();
  92.         if (!modelAttr.entityName) modelAttr.title = "this data";
  93.         else modelAttr.title = modelAttr.entityName;
  95.         modelAttr.uniqueId = this.model.cid;
  97.         this.$el.html(this.template(modelAttr));
  99.         //Initialize the modal window
  100.         this.$el.modal();
  102.         //Set the menu height
  103.         var view = this;
  104.         this.$el.on("shown", function () {
  105.           view.adjustHeight();
  106.           view.setMenuWidth();
  108.           window.addEventListener("resize", function (event) {
  109.             view.adjustHeight();
  110.             view.setMenuWidth();
  111.           });
  112.         });
  114.         this.$el.on("hidden", function () {
  115.           view.showValidation();
  116.         });
  117.       },
  119.       renderPreview: function () {
  120.         //Get the DataONEObject model
  121.         if (this.DataONEObject) {
  122.           var dataPreview = new DataPreviewView({
  123.             model: this.DataONEObject,
  124.           });
  125.           dataPreview.render();
  126.           this.$(".preview-container").html(dataPreview.el);
  128.           if (dataPreview.$el.children().length) {
  129.             this.$(".description").css("width", "calc(100% - 310px)");
  130.           } else dataPreview.$el.remove();
  131.         }
  132.       },
  134.       renderAttributes: function () {
  135.         //Render the attributes
  136.         var attributes = this.model.get("attributeList"),
  137.           attributeListEl = this.$(".attribute-list"),
  138.           attributeMenuEl = this.$(".attribute-menu");
  140.         _.each(
  141.           attributes,
  142.           function (attr) {
  143.             //Create an EMLAttributeView
  144.             var view = new EMLAttributeView({
  145.               model: attr,
  146.             });
  148.             //Create a link in the attribute menu
  149.             var menuItem = $(
  150.               this.attributeMenuItemTemplate({
  151.                 attrId: attr.cid,
  152.                 attributeName: attr.get("attributeName"),
  153.                 classes: "",
  154.               }),
  155.             ).data({
  156.               model: attr,
  157.               attributeView: view,
  158.             });
  159.             attributeMenuEl.append(menuItem);
  160.             menuItem.find(".tooltip-this").tooltip();
  162.             this.listenTo(attr, "change:attributeName", function (attr) {
  163.               menuItem.find(".name").text(attr.get("attributeName"));
  164.             });
  166.             view.render();
  168.             attributeListEl.append(view.el);
  170.             view.$el.hide();
  172.             this.listenTo(attr, "change", this.addAttribute);
  173.             this.listenTo(attr, "invalid", this.showAttributeValidation);
  174.             this.listenTo(attr, "valid", this.hideAttributeValidation);
  175.           },
  176.           this,
  177.         );
  179.         //Add a new blank attribute view at the end
  180.         this.addNewAttribute();
  182.         //If there are no attributes in this EML model yet,
  183.         //then make sure we show a new add attribute button when the user starts typing
  184.         if (attributes.length == 0) {
  185.           var onlyAttrView = this.$(".attribute-menu-item")
  186.               .first()
  187.               .data("attributeView"),
  188.             view = this,
  189.             keyUpCallback = function () {
  190.               //This attribute is no longer new
  191.               view.$(".attribute-menu-item.new").first().removeClass("new");
  192.               view
  193.                 .$(".attribute-list .eml-attribute.new")
  194.                 .first()
  195.                 .removeClass("new");
  197.               //Add a new attribute link and view
  198.               view.addNewAttribute();
  200.               //Don't listen to keyup anymore
  201.               onlyAttrView.$el.off("keyup", keyUpCallback);
  202.             };
  204.           onlyAttrView.$el.on("keyup", keyUpCallback);
  205.         }
  207.         //Activate the first navigation item
  208.         var firstAttr = this.$(".side-nav-item").first();
  209.         firstAttr.addClass("active");
  211.         //Show the first attribute view
  212.         firstAttr.data("attributeView").$el.show();
  214.         firstAttr.data("attributeView").postRender();
  215.       },
  217.       renderFillButton: function () {
  218.         var formatGuess = this.model.get("dataONEObject")
  219.           ? this.model.get("dataONEObject").get("formatId")
  220.           : this.model.get("entityType");
  222.         if (!_.contains(this.fillableFormats, formatGuess)) {
  223.           return;
  224.         }
  226.         var target = this.$(".fill-button-container");
  228.         if (!target.length === 1) {
  229.           return;
  230.         }
  232.         var btn = $(this.fillButtonTemplateString);
  233.         $(target).html(btn);
  234.       },
  236.       updateModel: function (e) {
  237.         var changedAttr = $(e.target).attr("data-category");
  239.         if (!changedAttr) return;
  241.         var emlModel = this.model.getParentEML(),
  242.           newValue = emlModel
  243.             ? emlModel.cleanXMLText($(e.target).val())
  244.             : $(e.target).val();
  246.         this.model.set(changedAttr, newValue);
  248.         this.model.trickleUpChange();
  249.       },
  251.       addNewAttribute: function () {
  252.         //Check if there is already a new attribute view
  253.         if (this.$(".attribute-list .eml-attribute.new").length) {
  254.           return;
  255.         }
  257.         var newAttrModel = new EMLAttribute({
  258.             parentModel: this.model,
  259.             xmlID: DataONEObject.generateId(),
  260.           }),
  261.           newAttrView = new EMLAttributeView({
  262.             isNew: true,
  263.             model: newAttrModel,
  264.           });
  266.         newAttrView.render();
  267.         this.$(".attribute-list").append(newAttrView.el);
  268.         newAttrView.$el.hide();
  270.         //Change the last menu item if it still says "Add attribute"
  271.         if (this.$(".attribute-menu-item").length == 1) {
  272.           var firstAttrMenuItem = this.$(".attribute-menu-item").first();
  274.           if (firstAttrMenuItem.find(".name").text() == "Add attribute") {
  275.             firstAttrMenuItem.find(".name").text("New attribute");
  276.             firstAttrMenuItem.find(".add").hide();
  277.           }
  278.         }
  280.         //Create the new menu item
  281.         var menuItem = $(
  282.           this.attributeMenuItemTemplate({
  283.             attrId: newAttrModel.cid,
  284.             attributeName: "Add attribute",
  285.             classes: "new",
  286.           }),
  287.         ).data({
  288.           model: newAttrModel,
  289.           attributeView: newAttrView,
  290.         });
  291.         menuItem.find(".add").show();
  292.         this.$(".attribute-menu").append(menuItem);
  293.         menuItem.find(".tooltip-this").tooltip();
  295.         //When the attribute name is changed, update the navigation
  296.         this.listenTo(newAttrModel, "change:attributeName", function (attr) {
  297.           menuItem.find(".name").text(attr.get("attributeName"));
  298.           menuItem.find(".add").hide();
  299.         });
  301.         this.listenTo(newAttrModel, "change", this.addAttribute);
  302.         this.listenTo(newAttrModel, "invalid", this.showAttributeValidation);
  303.         this.listenTo(newAttrModel, "valid", this.hideAttributeValidation);
  304.       },
  306.       addAttribute: function (emlAttribute) {
  307.         //Add the attribute to the attribute list in the EMLEntity model
  308.         if (!_.contains(this.model.get("attributeList"), emlAttribute))
  309.           this.model.addAttribute(emlAttribute);
  310.       },
  312.       removeAttribute: function (e) {
  313.         var removeBtn = $(e.target);
  315.         var menuItem = removeBtn.parents(".attribute-menu-item"),
  316.           attrModel = menuItem.data("model");
  318.         if (attrModel) {
  319.           //Remove the attribute from the model
  320.           this.model.removeAttribute(attrModel);
  322.           //If this menu item is active, then make the next attribute active instead
  323.           if (menuItem.is(".active")) {
  324.             var nextMenuItem = menuItem.next();
  326.             if (!nextMenuItem.length || nextMenuItem.is(".new")) {
  327.               nextMenuItem = menuItem.prev();
  328.             }
  330.             if (nextMenuItem.length) {
  331.               nextMenuItem.addClass("active");
  333.               this.showAttribute(nextMenuItem.data("model"));
  334.             }
  335.           }
  337.           //Remove the elements for this attribute from the page
  338.           menuItem.remove();
  339.           this.$(
  340.             ".eml-attribute[data-attribute-id='" + attrModel.cid + "']",
  341.           ).remove();
  342.           $(".tooltip").remove();
  344.           this.model.trickleUpChange();
  345.         }
  346.       },
  348.       adjustHeight: function (e) {
  349.         var contentAreaHeight =
  350.           this.$(".modal-body").height() -
  351.           this.$(".entity-container .nav-tabs").height();
  353.         this.$(".attribute-menu, .attribute-list").css(
  354.           "height",
  355.           contentAreaHeight + "px",
  356.         );
  357.       },
  359.       setMenuWidth: function () {
  360.         this.$(".entity-container .nav").width(this.$el.width());
  361.       },
  363.       /**
  364.        * Shows the attribute in the attribute editor
  365.        * @param {Event} e - JS event or attribute model
  366.        */
  367.       showAttribute: function (e) {
  368.         if (e.target) {
  369.           var clickedEl = $(e.target),
  370.             menuItem =
  371.               clickedEl.is(".attribute-menu-item") ||
  372.               clickedEl.parents(".attribute-menu-item");
  374.           if (clickedEl.is(".remove")) return;
  375.         } else {
  376.           var menuItem = this.$(
  377.             ".attribute-menu-item[data-attribute-id='" + e.cid + "']",
  378.           );
  379.         }
  381.         if (!menuItem) return;
  383.         //Validate the previously edited attribute
  384.         //Get the current active attribute
  385.         var activeAttrTab = this.$(".attribute-menu-item.active");
  387.         //If there is a currently-active attribute tab,
  388.         if (activeAttrTab.length) {
  389.           //Get the attribute list from this view's model
  390.           var emlAttributes = this.model.get("attributeList");
  392.           //If there is an EMLAttribute list,
  393.           if (emlAttributes && emlAttributes.length) {
  394.             //Get the active EMLAttribute
  395.             var activeEMLAttribute = _.findWhere(emlAttributes, {
  396.               cid: activeAttrTab.attr("data-attribute-id"),
  397.             });
  399.             //If there is an active EMLAttribute model, validate it
  400.             if (activeEMLAttribute) {
  401.               activeEMLAttribute.isValid();
  402.             }
  403.           }
  404.         }
  406.         //If the user clicked on the add attribute link
  407.         if (
  408.           menuItem.is(".new") &&
  409.           this.$(".new.attribute-menu-item").length < 2
  410.         ) {
  411.           //Change the attribute menu item
  412.           menuItem.removeClass("new").find(".name").text("New attribute");
  413.           this.$(".eml-attribute.new").removeClass("new");
  414.           menuItem.find(".add").hide();
  416.           //Add a new attribute view and menu item
  417.           this.addNewAttribute();
  419.           //Scroll the attribute menu to the bottom so that the "Add New" button is always visible
  420.           var attrMenuHeight =
  421.             this.$(".attribute-menu").scrollTop() +
  422.             this.$(".attribute-menu").height();
  423.           this.$(".attribute-menu").scrollTop(attrMenuHeight);
  424.         }
  426.         //Get the attribute view
  427.         var attrView = menuItem.data("attributeView");
  429.         //Change the active attribute in the menu
  430.         this.$(".attribute-menu-item.active").removeClass("active");
  431.         menuItem.addClass("active");
  433.         //Hide the old attribute view
  434.         this.$(".eml-attribute").hide();
  435.         //Show the new attribute view
  436.         attrView.$el.show();
  438.         //Scroll to the top of the attribute view
  439.         this.$(".attribute-list").scrollTop(0);
  441.         attrView.postRender();
  442.       },
  444.       /**
  445.        * Show the attribute validation errors in the attribute navigation menu
  446.        * @param {EMLAttribute} attr
  447.        */
  448.       showAttributeValidation: function (attr) {
  449.         var attrLink = this.$(
  450.           ".attribute-menu-item[data-attribute-id='" + attr.cid + "']",
  451.         ).find("a");
  453.         //If the validation is already displayed, then exit
  454.         if (attrLink.is(".error")) return;
  456.         var errorIcon = $(document.createElement("i")).addClass(
  457.           "icon icon-exclamation-sign error icon-on-left",
  458.         );
  460.         attrLink.addClass("error").prepend(errorIcon);
  461.       },
  463.       /**
  464.        * Hide the attribute validation errors from the attribute navigation menu
  465.        */
  466.       hideAttributeValidation: function (attr) {
  467.         this.$(".attribute-menu-item[data-attribute-id='" + attr.cid + "']")
  468.           .find("a")
  469.           .removeClass("error")
  470.           .find(".icon.error")
  471.           .remove();
  472.       },
  474.       /**
  475.        * Show the user what will be removed when this remove button is clicked
  476.        */
  477.       previewAttrRemove: function (e) {
  478.         var removeBtn = $(e.target);
  480.         removeBtn.parents(".attribute-menu-item").toggleClass("remove-preview");
  481.       },
  483.       /**
  484.        *
  485.        * Will display validation styling and messaging. Should be called after
  486.        * this view's model has been validated and there are error messages to display
  487.        */
  488.       showValidation: function () {
  489.         //Reset the error messages and styling
  490.         //Only change elements inside the overview-container which contains only the
  491.         // EMLEntity metadata. The Attributes will be changed by the EMLAttributeView.
  492.         this.$(".overview-container .notification").text("");
  493.         this.$(
  494.           ".overview-tab .icon.error, .attributes-tab .icon.error",
  495.         ).remove();
  496.         this.$(
  497.           ".overview-container, .overview-tab a, .attributes-tab a, .overview-container .error",
  498.         ).removeClass("error");
  500.         var overviewTabErrorIcon = false,
  501.           attributeTabErrorIcon = false;
  503.         _.each(
  504.           this.model.validationError,
  505.           function (errorMsg, category) {
  506.             if (category == "attributeList") {
  507.               //Create an error icon for the Attributes tab
  508.               if (!attributeTabErrorIcon) {
  509.                 var errorIcon = $(document.createElement("i"))
  510.                   .addClass("icon icon-on-left icon-exclamation-sign error")
  511.                   .attr("title", "There is missing information in this tab");
  513.                 //Add the icon to the Overview tab
  514.                 this.$(".attributes-tab a")
  515.                   .prepend(errorIcon)
  516.                   .addClass("error");
  517.               }
  519.               return;
  520.             }
  522.             //Get all the elements for this category and add the error class
  523.             this.$(
  524.               ".overview-container [data-category='" + category + "']",
  525.             ).addClass("error");
  526.             //Get the notification element for this category and add the error message
  527.             this.$(
  528.               ".overview-container .notification[data-category='" +
  529.                 category +
  530.                 "']",
  531.             ).text(errorMsg);
  533.             //Create an error icon for the Overview tab
  534.             if (!overviewTabErrorIcon) {
  535.               var errorIcon = $(document.createElement("i"))
  536.                 .addClass("icon icon-on-left icon-exclamation-sign error")
  537.                 .attr("title", "There is missing information in this tab");
  539.               //Add the icon to the Overview tab
  540.               this.$(".overview-tab a").prepend(errorIcon).addClass("error");
  542.               overviewTabErrorIcon = true;
  543.             }
  544.           },
  545.           this,
  546.         );
  547.       },
  549.       /**
  550.        * Show the entity overview or attributes tab
  551.        * depending on the click target
  552.        * @param {Event} e
  553.        */
  554.       showTab: function (e) {
  555.         e.preventDefault();
  557.         //Get the clicked link
  558.         var link = $(e.target);
  560.         //Remove the active class from all links and add it to the new active link
  561.         this.$(".entity-container > .nav-tabs li").removeClass("active");
  562.         link.parent("li").addClass("active");
  564.         //Hide all the panes and show the correct one
  565.         this.$(".entity-container > .tab-content > .tab-pane").hide();
  566.         this.$(link.attr("href")).show();
  567.       },
  569.       /**
  570.        * Show the entity in a modal dialog
  571.        */
  572.       show: function () {
  573.         this.$el.modal("show");
  574.       },
  576.       /**
  577.        * Hide the entity modal dialog
  578.        */
  579.       hide: function () {
  580.         this.$el.modal("hide");
  581.       },
  583.       /**
  584.        * Save a draft of the parent EML model
  585.        */
  586.       saveDraft: function () {
  587.         var view = this;
  589.         try {
  590.           var model = this.model.getParentEML();
  591.           var draftModel = model.clone();
  592.           var title = model.get("title") || "No title";
  594.           LocalForage.setItem(model.get("id"), {
  595.             id: model.get("id"),
  596.             datetime: new Date().toISOString(),
  597.             title: Array.isArray(title) ? title[0] : title,
  598.             draft: draftModel.serialize(),
  599.           }).then(function () {
  600.             view.clearOldDrafts();
  601.           });
  602.         } catch (ex) {
  603.           console.log("Error saving draft:", ex);
  604.         }
  605.       },
  607.       /**
  608.        * Clear older drafts by iterating over the sorted list of drafts
  609.        * stored by LocalForage and removing any beyond a hardcoded limit.
  610.        */
  611.       clearOldDrafts: function () {
  612.         var drafts = [];
  614.         try {
  615.           LocalForage.iterate(function (value, key, iterationNumber) {
  616.             // Extract each draft
  617.             drafts.push({
  618.               key: key,
  619.               value: value,
  620.             });
  621.           })
  622.             .then(function () {
  623.               // Sort by datetime
  624.               drafts = _.sortBy(drafts, function (draft) {
  625.                 return draft.value.datetime.toString();
  626.               }).reverse();
  627.             })
  628.             .then(function () {
  629.               _.each(drafts, function (draft, i) {
  630.                 var age = new Date() - new Date(draft.value.datetime);
  631.                 var isOld = age / 2678400000 > 1; // ~31days
  632.                 // Delete this draft is not in the most recent 100 or
  633.                 // if older than 31 days
  634.                 var shouldDelete = i > 100 || isOld;
  635.                 if (!shouldDelete) {
  636.                   return;
  637.                 }
  639.                 LocalForage.removeItem(draft.key).then(function () {
  640.                   // Item should be removed
  641.                 });
  642.               });
  643.             });
  644.         } catch (ex) {
  645.           console.log("Failed to clear old drafts: ", ex);
  646.         }
  647.       },
  649.       /**
  650.        * Handle the click event on the fill button
  651.        *
  652.        * @param {Event} e - The click event
  653.        * @since 2.15.0
  654.        */
  655.       handleFill: function (e) {
  656.         var d1Object = this.model.get("dataONEObject");
  658.         if (!d1Object) {
  659.           return;
  660.         }
  662.         var file = d1Object.get("uploadFile");
  664.         try {
  665.           if (!file) {
  666.             this.handleFillViaFetch();
  667.           } else {
  668.             this.handleFillViaFile(file);
  669.           }
  670.         } catch (error) {
  671.           console.log("Error while attempting to fill", error);
  672.           view.updateFillButton(
  673.             '<i class="icon-warning-sign"></i> Couldn\'t fill',
  674.           );
  675.         }
  676.       },
  678.       /**
  679.        * Handle the fill event using a File object
  680.        *
  681.        * @param {File} file - A File object to fill from
  682.        * @since 2.15.0
  683.        */
  684.       handleFillViaFile: function (file) {
  685.         var view = this;
  687.         Utilities.readSlice(file, this, function (event) {
  688.           if (event.target.readyState !== FileReader.DONE) {
  689.             return;
  690.           }
  692.           view.tryParseAndFillAttributeNames.bind(view)(event.target.result);
  693.         });
  694.       },
  696.       /**
  697.        * Handle the fill event by fetching the object
  698.        * @since 2.15.0
  699.        */
  700.       handleFillViaFetch: function () {
  701.         var view = this;
  703.         var requestSettings = {
  704.           url:
  705.             MetacatUI.appModel.get("objectServiceUrl") +
  706.             encodeURIComponent(this.model.get("dataONEObject").get("id")),
  707.           method: "get",
  708.           success: view.tryParseAndFillAttributeNames.bind(this),
  709.           error: function (error) {
  710.             view.updateFillButton(
  711.               '<i class="icon-warning-sign"></i> Couldn\'t fill',
  712.             );
  713.             console.error(
  714.               "Error fetching DataObject to parse out headers",
  715.               error,
  716.             );
  717.           },
  718.         };
  720.         this.updateFillButton('<i class="icon-time"></i> Please wait...', true);
  721.         this.disableFillButton();
  723.         requestSettings = _.extend(
  724.           requestSettings,
  725.           MetacatUI.appUserModel.createAjaxSettings(),
  726.         );
  727.         $.ajax(requestSettings);
  728.       },
  730.       /**
  731.        * Attempt to parse header and fill attributes names
  732.        *
  733.        * @param {string} content - Part of a file to attempt to parse
  734.        * @since 2.15.0
  735.        */
  736.       tryParseAndFillAttributeNames: function (content) {
  737.         var names = Utilities.tryParseCSVHeader(content);
  739.         if (names.length === 0) {
  740.           this.updateFillButton(
  741.             '<i class="icon-warning-sign"></i> Couldn\'t fill',
  742.           );
  743.         } else {
  744.           this.updateFillButton('<i class="icon-ok"></i> Filled!');
  745.         }
  747.         //Make sure the button is enabled
  748.         this.enableFillButton();
  750.         this.updateAttributeNames(names);
  751.       },
  753.       /**
  754.        * Update attribute names from an array
  755.        *
  756.        * This will update existing attributes' names or create new
  757.        * attributes as needed. This also performs a full re-render.
  758.        *
  759.        * @param {string[]} names - A list of names to apply
  760.        * @since 2.15.0
  761.        */
  762.       updateAttributeNames: function (names) {
  763.         if (!names) {
  764.           return;
  765.         }
  767.         var attributes = this.model.get("attributeList");
  769.         //Update the name of each attribute or create a new Attribute if one doesn't exist
  770.         for (var i = 0; i < names.length; i++) {
  771.           if (attributes.length - 1 >= i) {
  772.             attributes[i].set("attributeName", names[i]);
  773.           } else {
  774.             attributes.push(
  775.               new EMLAttribute({
  776.                 parentModel: this.model,
  777.                 xmlID: DataONEObject.generateId(),
  778.                 attributeName: names[i],
  779.               }),
  780.             );
  781.           }
  782.         }
  784.         //Update the attribute list
  785.         this.model.set("attributeList", attributes);
  787.         // Reset first
  788.         this.$(".attribute-menu.side-nav-items").empty();
  789.         this.$(".eml-attribute").remove();
  791.         // Then re-render
  792.         this.renderAttributes();
  793.       },
  795.       /**
  796.        * Update the Fill button temporarily and set it back to the default
  797.        *
  798.        * Used to show success or failure of the filling operation
  799.        *
  800.        * @param {string} messageHTML - HTML template string to set
  801.        *   temporarily
  802.        * @param {boolean} disableTimeout - If true, the timeout will not be set
  803.        * @since 2.15.0
  804.        */
  805.       updateFillButton: function (messageHTML, disableTimeout) {
  806.         var view = this;
  808.         this.$(".fill-button").html(messageHTML);
  810.         if (!disableTimeout) {
  811.           window.setTimeout(function () {
  812.             view
  813.               .$(".fill-button-container")
  814.               .html(view.fillButtonTemplateString);
  815.           }, 3000);
  816.         }
  817.       },
  819.       /**
  820.        * Disable the Fill Attributes button
  821.        * @since 2.15.0
  822.        */
  823.       disableFillButton: function () {
  824.         this.$(".fill-button").prop("disabled", true);
  825.       },
  827.       /**
  828.        * Enable the Fill Attributes button
  829.        * @since 2.15.0
  830.        */
  831.       enableFillButton: function () {
  832.         this.$(".fill-button").prop("disabled", false);
  833.       },
  834.     },
  835.   );
  837.   return EMLEntityView;
  838. });