perf: Add variable management to Job and Adhoc details

src/views/ops/Job/JobDetail/JobDetail.vue

@@ -3,14 +3,25 @@
     <el-col :md="16" :sm="24">
       <AutoDetailCard :fields="detailFields" :object="object" :url="url" />
     </el-col>
+    <el-col :md="8" :sm="24">
+      <IBox :title="$tc('Variable')">
+        <Variable
+          :value.sync="object.variable"
+          @input="updateVariable"
+        />
+      </IBox>
+    </el-col>
   </el-row>
 </template>
 
 <script type="text/jsx">
 import AutoDetailCard from '@/components/Cards/DetailCard/auto'
+import Variable from '@/views/ops/Template/components/Variable.vue'
+import { IBox } from '@/components'
 
 export default {
   components: {
+    IBox, Variable,
     AutoDetailCard
   },
   props: {
@@ -37,7 +48,15 @@ export default {
       return this.object.name
     }
   },
-  methods: {}
+  methods: {
+    updateVariable() {
+      const url = `/api/v1/ops/jobs/${this.object.id}/`
+      this.$axios.patch(url, { variable: this.object.variable }).then(() => {
+        this.$message.success(this.$tc('UpdateSuccessMsg'))
+      })
+    }
+
+  }
 }
 </script>
 

src/views/ops/Template/Adhoc/AdhocDetail/AdhocDetail.vue

@@ -3,14 +3,27 @@
     <el-col :md="16" :sm="24">
       <AutoDetailCard :excludes="excludes" :object="object" :url="url" />
     </el-col>
+    <el-col :md="8" :sm="24">
+      <IBox :title="$tc('Variable')">
+        <Variable
+          :value.sync="object.variable"
+          :disable-edit="disableEdit"
+          @input="updateVariable"
+        />
+      </IBox>
+    </el-col>
   </el-row>
 </template>
 
 <script type="text/jsx">
 import AutoDetailCard from '@/components/Cards/DetailCard/auto'
+import Variable from '@/views/ops/Template/components/Variable'
+import { IBox } from '@/components'
 
 export default {
   components: {
+    IBox,
+    Variable,
     AutoDetailCard
   },
   props: {
@@ -22,7 +35,8 @@ export default {
   data() {
     return {
       url: `/api/v1/ops/adhocs/${this.object.id}/`,
-      excludes: ['variable']
+      excludes: ['variable'],
+      disableEdit: this.object.creator !== this.$store.state.users.profile.id
     }
   },
   computed: {
@@ -30,7 +44,14 @@ export default {
       return this.object.name
     }
   },
-  methods: {}
+  methods: {
+    updateVariable() {
+      const url = `/api/v1/ops/adhocs/${this.object.id}/`
+      this.$axios.patch(url, { variable: this.object.variable }).then(() => {
+        this.$message.success(this.$tc('UpdateSuccessMsg'))
+      })
+    }
+  }
 }
 </script>
 

src/views/ops/Template/components/Variable.vue

@@ -5,7 +5,14 @@
         <el-table-column show-overflow-tooltip :label="$tc('Name')" prop="name" />
         <el-table-column show-overflow-tooltip :label="$tc('VariableName')" prop="var_name" />
         <el-table-column show-overflow-tooltip :label="$tc('DefaultValue')" prop="default_value" />
-        <el-table-column v-if="!disableEdit" :label="$tc('Actions')" align="center" class-name="buttons" fixed="right" width="135">
+        <el-table-column
+          v-if="!disableEdit"
+          :label="$tc('Actions')"
+          align="center"
+          class-name="buttons"
+          fixed="right"
+          width="135"
+        >
           <template v-slot="scope">
             <el-button icon="el-icon-minus" size="mini" type="danger" @click="removeVariable(scope.row)" />
             <el-button
@@ -70,14 +77,15 @@ export default {
   },
   watch: {
     variables: {
-      handler(value) {
+      handler(newVal, oldVal) {
-        if (value.length > 0 || this.initial) {
+        if (oldVal === undefined) return
-          value.map((item) => {
+        if (newVal.length > 0 || !this.initial) {
+          newVal.map((item) => {
             item.default_value = item.text_default_value || item.select_default_value
           })
-          this.$emit('input', value)
+          this.$emit('input', newVal)
         }
-        if (value) {
+        if (newVal) {
           this.initial = true
         }
       },