Sha256: accf1c6ca014fefda9df1152f000273e1c08dabb90ad2288da3120040dbf84af
Contents?: true
Size: 1.7 KB
Versions: 12
Compression:
Stored size: 1.7 KB
Contents
<template>
<div class="column">
<h2 class="is-size-2 mb-4">Edit rule: {{ rule.id }}</h2>
<InputForm v-model:yaml="yaml" @update-yaml="updateYAML"></InputForm>
<div class="field is-grouped is-grouped-centered">
<p class="control">
<a class="button is-primary" @click="edit">
<span class="icon is-small">
<font-awesome-icon icon="edit"></font-awesome-icon>
</span>
<span>Edit</span>
</a>
</p>
</div>
<div v-if="updateRuleTask.last?.error">
<hr />
<ErrorMessage :error="updateRuleTask.last?.error"></ErrorMessage>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent, type PropType, toRef } from "vue"
import { useRouter } from "vue-router"
import { generateUpdateRuleTask } from "@/api-helper"
import ErrorMessage from "@/components/ErrorMessage.vue"
import InputForm from "@/components/rule/InputForm.vue"
import type { Rule } from "@/types"
export default defineComponent({
name: "EditRule",
components: {
InputForm,
ErrorMessage
},
props: {
rule: {
type: Object as PropType<Rule>,
required: true
}
},
setup(props) {
const router = useRouter()
const rule = toRef(props, "rule")
const yaml = toRef(rule.value, "yaml")
const updateRuleTask = generateUpdateRuleTask()
const updateYAML = (value: string) => {
yaml.value = value
}
const edit = async () => {
const rule = await updateRuleTask.perform({
id: props.rule.id,
yaml: yaml.value
})
router.push({ name: "Rule", params: { id: rule.id } })
}
return {
edit,
yaml,
updateYAML,
updateRuleTask
}
}
})
</script>
Version data entries
12 entries across 12 versions & 1 rubygems