scinote-web/app/assets/javascripts/repositories/renderers/view_renderers.js

183 lines
6.4 KiB
JavaScript
Raw Normal View History

2020-01-21 17:49:45 +08:00
/* global I18n twemoji */
2019-12-11 22:08:18 +08:00
2019-10-25 20:30:45 +08:00
$.fn.dataTable.render.RepositoryAssetValue = function(data) {
var asset = data.value;
2019-10-25 20:30:45 +08:00
return `
2019-11-11 21:05:59 +08:00
<div class="asset-value-cell">
${asset.icon_html}
2020-01-29 21:56:03 +08:00
<div>
<a class="file-preview-link"
id="modal_link${asset.id}"
data-no-turbolink="true"
data-id="true"
data-status="asset-present"
data-preview-url="${asset.preview_url}"
href="${asset.url}"
>
${asset.file_name}
</a>
</div>
2019-11-11 21:05:59 +08:00
</div>
2019-10-25 20:30:45 +08:00
`;
};
$.fn.dataTable.render.defaultRepositoryAssetValue = function() {
return '';
};
2019-10-25 20:30:45 +08:00
$.fn.dataTable.render.RepositoryTextValue = function(data) {
var text = $(`<span class="text-value">${data.value.view}</span>`);
text.attr('data-edit-value', data.value.edit);
return text.prop('outerHTML');
2019-10-25 20:30:45 +08:00
};
$.fn.dataTable.render.defaultRepositoryTextValue = function() {
return '';
};
2019-10-25 20:30:45 +08:00
$.fn.dataTable.render.RepositoryListValue = function(data) {
2019-12-02 18:03:05 +08:00
return `<span data-value-id="${data.value.id}" class="list-label">${data.value.text}</span>`;
2019-10-25 20:30:45 +08:00
};
$.fn.dataTable.render.defaultRepositoryListValue = function() {
return '';
};
$.fn.dataTable.render.RepositoryStatusValue = function(data) {
2019-12-02 18:03:05 +08:00
return `
2020-01-21 17:49:45 +08:00
<div class="repository-status-value-container" title="${data.value.icon} ${data.value.status}">
<span class="repository-status-value-icon">${twemoji.parse(data.value.icon)}</span>
2019-12-02 18:03:05 +08:00
<span data-value-id="${data.value.id}" class="status-label">${data.value.status}</span>
2020-01-21 17:49:45 +08:00
</div>
2019-12-02 18:03:05 +08:00
`;
};
$.fn.dataTable.render.defaultRepositoryStatusValue = function() {
return '';
};
$.fn.dataTable.render.defaultRepositoryDateValue = function() {
return '';
};
$.fn.dataTable.render.RepositoryDateValue = function(data) {
return `<span data-datetime="${data.value.datetime}" data-date="${data.value.formatted}">${data.value.formatted}</span>`;
};
$.fn.dataTable.render.defaultRepositoryDateTimeValue = function() {
return '';
};
$.fn.dataTable.render.RepositoryDateTimeValue = function(data) {
return `<span data-time="${data.value.time_formatted}"
data-datetime="${data.value.datetime}"
data-date="${data.value.date_formatted}">${data.value.formatted}</span>`;
};
$.fn.dataTable.render.defaultRepositoryTimeValue = function() {
return '';
};
$.fn.dataTable.render.RepositoryTimeValue = function(data) {
return `<span data-time="${data.value.formatted}"
data-datetime="${data.value.datetime}">${data.value.formatted}</span>`;
};
$.fn.dataTable.render.defaultRepositoryTimeRangeValue = function() {
return '';
};
$.fn.dataTable.render.RepositoryTimeRangeValue = function(data) {
2019-12-17 20:42:25 +08:00
return `<span data-time="${data.value.start_time.formatted}"
data-datetime="${data.value.start_time.datetime}">${data.value.start_time.formatted}</span> -
<span data-time="${data.value.end_time.formatted}"
data-datetime="${data.value.end_time.datetime}">${data.value.end_time.formatted}</span>`;
};
$.fn.dataTable.render.defaultRepositoryDateTimeRangeValue = function() {
return '';
};
$.fn.dataTable.render.RepositoryDateTimeRangeValue = function(data) {
2019-12-17 18:27:07 +08:00
return `<span data-time="${data.value.start_time.time_formatted}"
data-datetime="${data.value.start_time.datetime}"
data-date="${data.value.start_time.date_formatted}">${data.value.start_time.formatted}</span> -
<span data-time="${data.value.end_time.time_formatted}"
data-datetime="${data.value.end_time.datetime}"
data-date="${data.value.end_time.date_formatted}">${data.value.end_time.formatted}</span>`;
};
$.fn.dataTable.render.defaultRepositoryDateRangeValue = function() {
return '';
};
$.fn.dataTable.render.RepositoryDateRangeValue = function(data) {
2019-12-17 20:42:25 +08:00
return `<span data-datetime="${data.value.start_time.datetime}"
data-date="${data.value.start_time.formatted}">${data.value.start_time.formatted}</span> -
<span data-datetime="${data.value.end_time.datetime}"
data-date="${data.value.end_time.formatted}">${data.value.end_time.formatted}</span>`;
};
2019-12-06 20:18:35 +08:00
$.fn.dataTable.render.RepositoryChecklistValue = function(data) {
2019-12-11 21:49:14 +08:00
var render = '&#8212;';
var options = data.value;
2019-12-11 22:08:18 +08:00
var optionsList;
if (options.length === 1) {
2019-12-11 21:49:14 +08:00
render = `<span class="checklist-options" data-checklist-items='${JSON.stringify(options)}'>
${options[0].label}
2019-12-11 22:08:18 +08:00
</span>`;
2019-12-11 21:49:14 +08:00
} else if (options.length > 1) {
2019-12-11 22:08:18 +08:00
optionsList = $(' <ul class="dropdown-menu checklist-dropdown-menu" role="menu"></ul');
2019-12-11 21:49:14 +08:00
$.each(options, function(i, option) {
2019-12-11 22:08:18 +08:00
$(`<li class="checklist-item">${option.label}</li>`).appendTo(optionsList);
});
2019-12-11 21:49:14 +08:00
render = `
<span class="dropdown checklist-dropdown">
2019-12-11 21:49:14 +08:00
<span data-toggle="dropdown" class="checklist-options" aria-haspopup="true" data-checklist-items='${JSON.stringify(options)}'>
${options.length} ${I18n.t('libraries.manange_modal_column.checklist_type.multiple_options')}
</span>
${optionsList[0].outerHTML}
2019-12-11 22:08:18 +08:00
</span>`;
2019-12-11 21:49:14 +08:00
}
return render;
2019-12-06 20:18:35 +08:00
};
$.fn.dataTable.render.defaultRepositoryChecklistValue = function() {
return '&#8212;';
2019-12-06 20:18:35 +08:00
};
$.fn.dataTable.render.defaultRepositoryNumberValue = function() {
return '';
};
$.fn.dataTable.render.RepositoryNumberValue = function(data) {
return `<span class="number-value" data-value="${data.value}">
${data.value}
</span>`;
};
$.fn.dataTable.render.AssignedTasksValue = function(data) {
if (data.tasks > 0) {
let tooltip = I18n.t('repositories.table.assigned_tooltip', {
tasks: data.tasks,
experiments: data.experiments,
projects: data.projects
2020-04-28 18:41:59 +08:00
});
return `<div class="assign-counter-container dropdown" title="${tooltip}"
data-task-list-url="${data.task_list_url}">
<a href="#" class="assign-counter has-assigned"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">${data.tasks}</a>
<div class="dropdown-menu" role="menu">
2020-05-22 20:36:28 +08:00
<div class="sci-input-container right-icon">
2020-04-28 18:49:19 +08:00
<input type="text" class="sci-input-field search-tasks"
placeholder="${I18n.t('repositories.table.assigned_search')}"></input>
2020-05-22 20:36:28 +08:00
<i class="fas fa-times-circle clear-search"></i>
2020-04-28 18:41:59 +08:00
</div>
<div class="tasks"></div>
</div>
2020-04-28 18:41:59 +08:00
</div>`;
}
2020-04-28 18:41:59 +08:00
return "<div class='assign-counter-container'><span class='assign-counter'>0</span></div>";
};