Skip to content

Commit

Permalink
Removal of legacy Backbone.js library
Browse files Browse the repository at this point in the history
  • Loading branch information
@hujambo-dunia
hujambo-dunia committed Jun 2, 2023
1 parent 909a4bd commit db9ca6a
Show file tree
Hide file tree
Showing 3 changed files with 133 additions and 38 deletions.
127 changes: 96 additions & 31 deletions client/src/components/Form/Elements/FormFTP.vue
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,13 @@
<template>
<div :class="model.cls">
<div :class="model.attributes.cls" id="upload-ftp">
{{ /* //TODO model.cls = "upload-ftp" */ }}
<div v-show="waiting" class="upload-ftp-wait fa fa-spinner fa-spin" />
<div v-show="model.help_enabled" class="upload-ftp-help">{{ model.help_text }}</div>
<div v-show="model.help_enabled" class="upload-ftp-help">
This Galaxy server allows you to upload files via FTP. To upload some files, log in to the FTP server at <strong>{{ this.model.ftp_upload_site }}</strong> using your Galaxy credentials. For help visit the <a href="https://galaxyproject.org/ftp-upload/" target="_blank">tutorial</a>.
<span v-show="model.oidc_text">
<br/>If you are signed-in to Galaxy using a third-party identity and you <strong>do not have a Galaxy password</strong> please use the reset password option in the login form with your email to create a password for your account.
</span>
</div>
<div v-show="!waiting" class="upload-ftp-content">
<span style="whitespace: nowrap; float: left">Available files: </span>
<span style="whitespace: nowrap; float: right">
Expand All @@ -16,7 +22,7 @@
<th v-show="model.collection" class="_has_collection">
<div
class="upload-ftp-select-all"
:class="{ [model.class_add]: !isAllSelected, [model.class_remove]: isAllSelected }"
:class="{ [model.attributes.class_add]: !isAllSelected, [model.attributes.class_remove]: isAllSelected }"
@click="selectAll"></div>
</th>
<th>Name</th>
Expand All @@ -28,17 +34,22 @@
<tr
v-for="(ftpFile, index) in ftpFiles"
:key="ftpFile.path"
:ftp-id="ftpFile.path"
class="upload-ftp-row"
@click="onRowClick(ftpFile)">
<td class="ftp-name" colspan="4">
<td class="_has_collection">
<div
class="icon"
:class="{
[model.class_add]: !isSelected(ftpFile),
[model.class_remove]: isSelected(ftpFile),
[model.attributes.class_add]: !isSelected(ftpFile),
[model.attributes.class_remove]: isSelected(ftpFile),
}"></div>
{{ ftpFile.path }}
</td>
<td class="ftp-name">
{{ escape(ftpFile.path) }}
</td>
<td class="ftp-size">{{ bytesToString(ftpFile.size) }}</td>
<td class="ftp-time">{{ ftpFile.ctime }}</td>
</tr>
</tbody>
</table>
Expand All @@ -49,27 +60,25 @@

<script>
import _ from "underscore";
import $ from "jquery";
import $ from "jquery"; //TODO remove
import { getGalaxyInstance } from "app";
import Utils from "utils/utils";
import UploadUtils from "mvc/upload/upload-utils";
export default {
props: ["options"],
props: ["options", "collection"],
data() {
return {
model: {
cls: "upload-ftp",
class_add: "class_add",
class_remove: "class_remove",
class_partial: "class_partial",
attributes: {
cls: "upload-ftp", //TODO cls: "FormFTP",
class_add: "upload-icon-button fa fa-square-o",
class_remove: "upload-icon-button fa fa-check-square-o",
class_partial: "upload-icon-button fa fa-minus-square-o",
},
help_enabled: true,
oidc_text: `<br/>If you are signed-in to Galaxy using a third-party identity and you <strong>do not have a Galaxy password</strong> please use the reset password option in the login form with your email to create a password for your account.`,
help_text: `This Galaxy server allows you to upload files via FTP. To upload some files, log in to the FTP server at <strong>${options.ftp_upload_site}</strong> using your Galaxy credentials. For help visit the <a href="https://galaxyproject.org/ftp-upload/" target="_blank">tutorial</a>.`,
oidc_text: false,
collection: null,
onchange: () => {},
onadd: () => {},
onremove: () => {},
},
ftpFiles: [],
waiting: true,
Expand All @@ -80,10 +89,10 @@ export default {
},
created() {
this.model = _.extend(this.model, this.options);
this.collection = this.model.collection;
this.model.collection = this.collection;
const Galaxy = getGalaxyInstance();
if (Galaxy.config.enable_oidc) {
this.model.help_text = this.model.help_text + this.model.oidc_text;
this.model.oidc_text = true;
}
},
mounted() {
Expand Down Expand Up @@ -129,7 +138,24 @@ export default {
/** Add row */
_renderRow: function (ftp_file) {
return this.ftpIndex[ftp_file.path];
var self = this;
var options = this.model.attributes;
var $it = $(this._templateRow(ftp_file));
var $icon = $it.find(".icon");
this.$body.append($it);
if (this.collection) {
var model_index = this.ftpIndex[ftp_file.path];
$icon.addClass(model_index === undefined ? options.class_add : options.class_remove);
$it.on("click", () => {
self._switch($icon, ftp_file);
self._refresh();
});
} else {
$it.on("click", () => {
options.onchange(ftp_file);
});
}
return $icon;
},
/** Create ftp index */
Expand All @@ -147,35 +173,71 @@ export default {
/** Select all event handler */
selectAll: function () {
var ftp_files = this.ftpFiles;
var add = this.$el.querySelector(".upload-ftp-select-all").classList.contains(this.model.class_add);
var $it = $(this._templateRow(ftp_file));
var $icon = $it.find(".icon");
var add = this.$el.querySelector(".upload-ftp-select-all").classList.contains(this.model.attributes.class_add);
for (var index in ftp_files) {
var ftp_file = ftp_files[index];
var model_index = this.ftpIndex[ftp_file.path];
if ((model_index === undefined && add) || (model_index !== undefined && !add)) {
this._switch(ftp_file);
this._switch($icon, ftp_file);
}
}
this.isAllSelected = !this.isAllSelected;
this._refresh();
},
/** Handle row click */
onRowClick: function (ftp_file) {
var self = this;
var $it = $(this._templateRow(ftp_file)); //TODO needs to be replaced
var $icon = $it.find(".icon");
if (this.collection) {
this._switch(ftp_file);
this._switch($icon, ftp_file);
} else {
this.model.onchange(ftp_file);
}
self._refresh();
},
/** Template of row */
_templateRow: function (options) {
return $(`[ftp-id="${options.path}"]`);
},
/** Handle collection changes */
_switch: function (ftp_file) {
var icon = this.ftpIndex[ftp_file.path];
if (icon === undefined) {
var new_index = this.model.onadd(ftp_file);
this.$set(this.ftpIndex, ftp_file.path, new_index);
_switch: function ($icon, ftp_file) {
var options = this.model.attributes;
$icon.removeClass();
var model_index = this.ftpIndex[ftp_file.path];
if (model_index === undefined) {
var new_index = this.model.onadd(this.model.upload_box, ftp_file);
$icon.addClass(options.class_remove); //TODO replace this jQuery for the check/uncheck box with Vue.js
this.ftpIndex[ftp_file.path] = new_index;
} else {
this.model.onremove(this.model.collection, model_index);
$icon.addClass(options.class_add);
delete this.ftpIndex[ftp_file.path];
}
},
/** Refresh select all button state */
_refresh: function () {
var counts = _.reduce(
this.ftpIndex,
(memo, element) => {
element !== undefined && memo++;
return memo;
},
0
);
$(".upload-ftp-select-all").removeClass();
if (counts == 0) {
$(".upload-ftp-select-all").addClass(options.class_add);
} else {
this.model.onremove(icon);
this.$delete(this.ftpIndex, ftp_file.path);
$(".upload-ftp-select-all").addClass(
counts == this.rows.length ? options.class_remove : options.class_partial
);
}
},
Expand All @@ -188,6 +250,9 @@ export default {
bytesToString: function (bytes, si) {
return Utils.bytesToString(bytes, si);
},
escape(filepath) {
return _.escape(filepath);
},
},
};
</script>
43 changes: 36 additions & 7 deletions client/src/components/Upload/UploadBoxMixin.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -260,13 +260,9 @@ export default {
{ multiple: true }
);
} else {
this.ftp.show(
new Vue({
//TODO add back parameters
el: "#FormFTP",
render: (h) => h(FormFTP),
}).$mount("#FormFTP").$el
);
const vueDiv = document.createElement("div");
document.body.appendChild(vueDiv);
this.ftp.show(this.mountFtpComponentFromJs(vueDiv));
}
},
/** Create a new file */
Expand Down Expand Up @@ -354,5 +350,38 @@ export default {
getRequestUrl: function (items, history_id) {
return `${getAppRoot()}api/tools/fetch`;
},
mountFtpComponentFromJs: function(targetDom) {
return new Vue({
el: "upload-ftp", //TODO rename
render: (h) =>
h(FormFTP, {
props: this.buildFtpComponentProps(),
})
}).$mount(targetDom).$el;
},
buildFtpComponentProps: function() {
return {
options: {
ftp_upload_site: this.ftpUploadSite,
upload_box: this.uploadbox, //TODO rename
onchange: function () {},
onadd: function (uploadBox, ftp_file) {
return uploadBox.add([
{
mode: "ftp",
name: ftp_file.path,
size: ftp_file.size,
path: ftp_file.path,
uri: ftp_file.uri,
},
]);
},
onremove: function (thisCollection, model_index) {
return thisCollection.remove(model_index);
},
},
collection: this.collection,
};
},
},
};
1 change: 1 addition & 0 deletions client/src/mvc/upload/upload-ftp.js
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
//TODO deprecate file
/** This renders the content of the ftp popup **/
import _ from "underscore";
import $ from "jquery";
Expand Down

0 comments on commit db9ca6a

Please sign in to comment.