364d0b2eed
* refactor: ♻️ edit steps * add md5 hash lib * now step ids are generated based on titles and estimation * feat: ✨ edit steps now add steps will be a modal for editing all steps * chore(commitizen): init cz changelog * chore(changelog): init git cliff * feat(edit steps): add a message to alert on the fact that the record may change * feat(task): task link is a normal button now * with the good ids * remove column * autofocus to title * --wip-- [skip ci] * lint * can modify the whole task when recording
47 lines
1.3 KiB
Vue
47 lines
1.3 KiB
Vue
<script setup lang="ts">
|
|
import type { Stepable } from '@/modules/task/interfaces/stepable'
|
|
import { ref, watch } from 'vue'
|
|
import StepInput from './StepInput.vue'
|
|
|
|
const props = defineProps<{
|
|
isActive: boolean
|
|
initialSteps: Stepable[]
|
|
}>()
|
|
const emits = defineEmits<{
|
|
(event: 'submit', steps: Stepable[]): void
|
|
(event: 'close'): void
|
|
}>()
|
|
const steps = ref<Stepable[]>(props.initialSteps)
|
|
|
|
watch(props.initialSteps, (initialSteps) => {
|
|
steps.value = initialSteps
|
|
})
|
|
|
|
const save = () => {
|
|
emits('submit', steps.value)
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="modal" :class="{ 'is-active': isActive }">
|
|
<div class="modal-background" @click="$emit('close')"></div>
|
|
<div class="edit-steps-form modal-card">
|
|
<header class="modal-card-head">
|
|
<p class="modal-card-title">Edit steps</p>
|
|
<button
|
|
class="delete"
|
|
aria-label="close"
|
|
@click="$emit('close')"
|
|
></button>
|
|
</header>
|
|
<section class="modal-card-body">
|
|
<step-input v-if="isActive" v-model="steps" size="small" />
|
|
</section>
|
|
<footer class="modal-card-foot">
|
|
<button class="button is-primary" @click="save">edit</button>
|
|
<button class="button" @click="$emit('close')">cancel</button>
|
|
</footer>
|
|
</div>
|
|
</div>
|
|
</template>
|