Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Vueify Generic Form Wrapper #12329

Merged
merged 21 commits into from
Aug 14, 2021
Merged
Changes from 1 commit
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
c1f39f6
Add generic form component, and redirect permissions route
guerler Aug 7, 2021
daad9ff
Remove font awesome important, icons are dynamic
guerler Aug 7, 2021
7aedfc9
Add event handler to generic forms submit operation
guerler Aug 7, 2021
6884674
Replace all form-wrapper instances with form generic vue component, r…
guerler Aug 7, 2021
520eca9
Remove unused legacy condition for specific error highlighting in gen…
guerler Aug 7, 2021
1c27832
Handle title and icon parsing from client in generic form component
guerler Aug 7, 2021
89bef05
Remove unsued custom tooltip option from generic form component
guerler Aug 7, 2021
d1d6c16
Remove unused portlet and message dependencies from form-view
guerler Aug 7, 2021
3bec81d
Fix missing history rename form mounting
guerler Aug 7, 2021
bd74606
Remove unused ui module import in form-view
guerler Aug 8, 2021
28524c7
Add service module to generic form component
guerler Aug 8, 2021
e95a106
Add scrolling, replace vue scroll with js-native instant scrolling
guerler Aug 8, 2021
48ee8b6
Scroll to top of right panel when active node in workflow editor changes
guerler Aug 8, 2021
b279170
Assemble search string without jquery, add id to generic form
guerler Aug 8, 2021
25725bf
Fix selenium test cases, allow parameter replacement in generic forms
guerler Aug 8, 2021
15f6082
Align option parsing to generic form, remove unused props
guerler Aug 8, 2021
d54474d
Remove custom button title for form creator from backend
guerler Aug 8, 2021
18926ad
Remove unused config parsing to redirect option in generic form compo…
guerler Aug 8, 2021
3a2bf1b
Increase spacing between generic form and buttons below
guerler Aug 8, 2021
fb0b4af
Move icon determination to computed values in generic form component
guerler Aug 8, 2021
b8c5c56
Fix tour based selenium test for core galaxy ui
guerler Aug 9, 2021
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
140 changes: 140 additions & 0 deletions client/src/components/Form/FormGeneric.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,140 @@
<template>
<UrlDataProvider :url="url" v-slot="{ result, loading }" @error="onError">
<div v-if="!loading">
<b-alert v-if="result.message" :variant="resultMessageVariant" show>
{{ result.message }}
</b-alert>
<b-alert v-if="messageText" :variant="messageVariant" show>
{{ messageText }}
</b-alert>
<FormCard :title="result.title" :icon="result.icon">
<template v-slot:body>
<FormDisplay :inputs="result.inputs" @onChange="onChange" />
</template>
</FormCard>
<div class="mt-2">
<b-button
variant="primary"
class="mr-1"
v-b-tooltip.hover
:title="result.submit_tooltip"
@click="onSubmit(result)"
>
<span :class="submitIcon(result)" />{{ submitTitle(result) | l }}
</b-button>
<b-button
v-if="result.cancel_redirect"
v-b-tooltip.hover
:title="result.cancel_tooltip"
@click="onCancel(result)"
>
<span :class="cancelIcon(result)" />{{ cancelTitle(result) | l }}
</b-button>
</div>
</div>
</UrlDataProvider>
</template>

<script>
import { getAppRoot } from "onload/loadConfig";
import { UrlDataProvider } from "components/providers/UrlDataProvider";
import FormCard from "components/Form/FormCard";
import FormDisplay from "components/Form/FormDisplay";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import { library } from "@fortawesome/fontawesome-svg-core";
import { faSave, faTimes } from "@fortawesome/free-solid-svg-icons";

library.add(faSave, faTimes);

export default {
props: {
url: {
type: String,
required: true,
},
redirect: {
type: String,
required: false,
},
},
components: {
FontAwesomeIcon,
FormCard,
FormDisplay,
UrlDataProvider,
},
data() {
return {
messageText: null,
messageVariant: null,
formData: {},
};
},
methods: {
resultMessageVariant(options) {
return result.status || "warning";
},
cancelTitle(options) {
return options.cancel_title || "Cancel";
},
cancelIcon(options) {
const icon = options.cancel_icon || "fa-times";
return `mr-1 fa ${icon}`;
},
submitTitle(options) {
return options.submit_title || "Save";
},
submitIcon(options) {
const icon = options.submit_icon || "fa-save";
return `mr-1 fa ${icon}`;
},
onChange(formData) {
this.formData = formData;
},
onCancel(options) {
window.location = `${getAppRoot()}${options.cancel_redirect}`;
},
onSubmit(options) {
/*
var self = this;
$.ajax({
url: getAppRoot() + self.url,
data: JSON.stringify(form.data.create()),
type: "PUT",
contentType: "application/json",
})
.done((response) => {
var params = {};
if (response.id) {
params.id = response.id;
} else {
params = {
message: response.message,
status: "success",
persistent: false,
};
}
if (self.redirect) {
window.location = `${getAppRoot()}${self.redirect}?${$.param(params)}`;
} else {
form.data.matchModel(response, (input, input_id) => {
form.field_list[input_id].value(input.value);
});
self._showMessage(form, response.message);
}
})
.fail((response) => {
self._showMessage(form, {
message: response.responseJSON.err_msg,
status: "danger",
persistent: false,
});
});*/
},
onError(error) {
this.messageText = `Failed to load resource ${this.url}.`;
this.messageVariant = "danger";
},
},
};
</script>
17 changes: 17 additions & 0 deletions client/src/components/providers/UrlDataProvider.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import axios from "axios";
import { getAppRoot } from "onload/loadConfig";
import { SingleQueryProvider } from "components/providers/SingleQueryProvider";
import { rethrowSimple } from "utils/simple-error";

async function urlData({ url }) {
console.log(url);
try {
const { data } = await axios.get(`${getAppRoot()}${url}`);
console.log(data);
return data;
} catch (e) {
rethrowSimple(e);
}
}

export const UrlDataProvider = SingleQueryProvider(urlData);
11 changes: 5 additions & 6 deletions client/src/entry/analysis/AnalysisRouter.js
Original file line number Diff line number Diff line change
@@ -16,6 +16,7 @@ import { getAppRoot } from "onload";
import decodeUriComponent from "decode-uri-component";
import Router from "layout/router";
import ToolForm from "components/Tool/ToolForm";
import FormGeneric from "components/Form/FormGeneric";
import FormWrapper from "mvc/form/form-wrapper";
import Sharing from "components/Sharing.vue";
import UserPreferences from "components/User/UserPreferences.vue";
@@ -268,12 +269,10 @@ export const getAnalysisRouter = (Galaxy) => {
},

show_histories_permissions: function () {
this.page.display(
new FormWrapper.View({
url: `history/permissions?id=${QueryStringParsing.get("id")}`,
redirect: "histories/list",
})
);
this._display_vue_helper(FormGeneric, {
url: `history/permissions?id=${QueryStringParsing.get("id")}`,
redirect: "histories/list",
});
},

show_datasets: function () {