Rework component mounting to not use jQuery.

This commit is contained in:
John Chilton
2020-10-09 09:09:32 -04:00
parent 6e4b4d4ca8
commit e71fcc7c26
3 changed files with 17 additions and 18 deletions
@@ -1,13 +1,13 @@
/**
* Endpoint for mounting job metrics from non-Vue environment.
*/
import $ from "jquery";
import JobDestinationParams from "./JobDestinationParams.vue";
import { mountVueComponent } from "utils/mountVueComponent";
export const mountDestinationParams = (propsData = {}) => {
$(".job-destination-parameters").each((index, el) => {
propsData.jobId = $(el).attr("job_id");
const elements = document.querySelectorAll(".job-destination-parameters");
Array.prototype.forEach.call(elements, function (el, i) {
propsData.jobId = el.getAttribute("job_id");
mountVueComponent(JobDestinationParams)(propsData, el);
});
};
+6 -6
View File
@@ -1,16 +1,16 @@
/**
* Endpoint for mounting job metrics from non-Vue environment.
*/
import $ from "jquery";
import JobMetrics from "./JobMetrics.vue";
import { mountVueComponent } from "utils/mountVueComponent";
export const mountJobMetrics = (propsData = {}) => {
$(".job-metrics").each((index, el) => {
const jobId = $(el).attr("job_id");
const aws_estimate = $(el).attr("aws_estimate");
const datasetId = $(el).attr("dataset_id");
const datasetType = $(el).attr("dataset_type") || "hda";
const elements = document.querySelectorAll(".job-metrics");
Array.prototype.forEach.call(elements, function (el, i) {
const jobId = el.getAttribute("job_id");
const aws_estimate = el.getAttribute("aws_estimate");
const datasetId = el.getAttribute("dataset_id");
const datasetType = el.getAttribute("dataset_type") || "hda";
propsData.jobId = jobId;
propsData.datasetId = datasetId;
propsData.datasetType = datasetType;
+8 -9
View File
@@ -1,21 +1,20 @@
/**
* Endpoint for mounting job parameters from non-Vue environment.
*/
import $ from "jquery";
import Vue from "vue";
import JobParameters from "./JobParameters.vue";
import { mountVueComponent } from "utils/mountVueComponent";
export const mountJobParameters = (propsData = {}) => {
$(".job-parameters").each((index, el) => {
const jobId = $(el).attr("job_id");
const datasetId = $(el).attr("dataset_id");
const param = $(el).attr("param");
const datasetType = $(el).attr("dataset_type") || "hda";
const component = Vue.extend(JobParameters);
const elements = document.querySelectorAll(".job-parameters");
Array.prototype.forEach.call(elements, function (el, i) {
const jobId = el.getAttribute("job_id");
const datasetId = el.getAttribute("dataset_id");
const param = el.getAttribute("param") || undefined;
const datasetType = el.getAttribute("dataset_type") || "hda";
propsData.jobId = jobId;
propsData.datasetId = datasetId;
propsData.param = param;
propsData.datasetType = datasetType;
return new component({ propsData: propsData }).$mount(el);
mountVueComponent(JobParameters)(propsData, el);
});
};