define([
"jquery",
"underscore",
"backbone",
"text!templates/projectInfo.html",
"models/projects/Project",
"collections/ProjectList",
], function ($, _, Backbone, template, Project, ProjectList) {
/**
* @class ProjectView
* @classdesc This is a base view for projects list loading. It is structured
* on the premise that a project gets selected to be having its details viewed. The template associated
* with this view has a placeholder to render the projects with the desired way.
* @classcategory Views/Projects
* @extends Backbone.View
* @since 2.22.0
*/
var ProjectView = Backbone.View.extend(
/** @lends ProjectView.prototype */ {
el: "#Content",
template: _.template(template),
projectList: undefined, // Set default list if not using projectsApiUrl
selectedProject: undefined,
load: undefined,
events: {
"change #projects": "handleSelectProject",
},
initialize: function (options) {
this.getProjectsList();
// After projectList fetch call is successful, set the default selected project to the first project
// received from the projectsList then render to load the select element.
this.listenTo(this.projectList, "sync", this.setSelectedProject);
this.listenTo(this.projectList, "sync", this.render);
// In case the token was not loaded already, get the projects after it gets loaded.
this.listenTo(
MetacatUI.appUserModel,
"change:token",
this.getProjectsList,
);
},
/**
*
* @returns {ProjectView}
*/
render: function () {
// If a project selection logic is implemented, pass down the selection.
if (this.selectedProject !== undefined) {
this.$el.html(
this.template({
projectList: this.projectList,
selectedProject: this.selectedProject,
}),
);
} else {
this.$el.html(
this.template({
projectList: this.projectList,
}),
);
}
return this;
},
/**
* Handles the change event for selecting a project in the dropdown and then render.
* @param {Event} e
* @since 2.22.0
*/
handleSelectProject: function (e) {
// Set the selectedProject based on the selected project id from the select element.
this.selectedProject = this.projectList.findWhere({
id: e.target.value,
});
this.render();
return;
},
/**
* Call back to set the selectedProject
* This is used as a callback to only set the current project on the success of the fetch call.
* @since 2.22.0
*/
setSelectedProject: function () {
if (this.selectedProject === undefined)
this.selectedProject = this.projectList.at(0);
this.render();
},
/**
* Call back to initialize the ProjectsList
* This is used as a callback so that the fetch would happen after the change:token event gets loaded.
* @since 2.22.0
*/
getProjectsList: function () {
// Note that if the projectsApiUrl config is not set, projectsList will fall to the default set.
if (MetacatUI.appModel.get("projectsApiUrl")) {
// Get the projects for the user
this.projectList = new ProjectList({
authToken: MetacatUI.appUserModel.get("token"),
urlBase: MetacatUI.appModel.get("projectsApiUrl"),
});
this.projectList.fetch({
parse: true,
data: { can_manage: true },
});
}
},
},
);
return ProjectView;
});