153 lines
5.2 KiB
Vue
153 lines
5.2 KiB
Vue
|
<script>
|
||
|
|
import DatePicker from 'vue2-datepicker'
|
||
|
|
import CKEditor from '@ckeditor/ckeditor5-vue'
|
||
|
|
import ClassicEditor from '@ckeditor/ckeditor5-build-classic'
|
||
|
|
|
||
|
|
import Layout from '../../layouts/main'
|
||
|
|
import PageHeader from '../../components/page-header'
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Task-create component
|
||
|
|
*/
|
||
|
|
export default {
|
||
|
|
components: { DatePicker, ckeditor: CKEditor.component, Layout, PageHeader },
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
title: 'Create Task',
|
||
|
|
items: [
|
||
|
|
{
|
||
|
|
text: 'Tasks',
|
||
|
|
href: '/',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
text: 'Create Task',
|
||
|
|
active: true,
|
||
|
|
},
|
||
|
|
],
|
||
|
|
daterange: '',
|
||
|
|
editor: ClassicEditor,
|
||
|
|
teamMember: [{ id: 1 }],
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
addMember() {
|
||
|
|
this.teamMember.push({ name: '' })
|
||
|
|
},
|
||
|
|
deleteMember(index) {
|
||
|
|
this.teamMember.splice(index, 1)
|
||
|
|
},
|
||
|
|
},
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<Layout>
|
||
|
|
<PageHeader :title="title" :items="items" />
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-lg-12">
|
||
|
|
<div class="card">
|
||
|
|
<div class="card-body">
|
||
|
|
<h4 class="card-title mb-4">Create New Task</h4>
|
||
|
|
<form class="outer-repeater">
|
||
|
|
<div data-repeater-list="outer-group" class="outer">
|
||
|
|
<div data-repeater-item class="outer">
|
||
|
|
<div class="form-group row mb-4">
|
||
|
|
<label for="taskname" class="col-form-label col-lg-2">Task Name</label>
|
||
|
|
<div class="col-lg-10">
|
||
|
|
<input
|
||
|
|
id="taskname"
|
||
|
|
name="taskname"
|
||
|
|
type="text"
|
||
|
|
class="form-control"
|
||
|
|
placeholder="Enter Task Name..."
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="form-group row mb-4">
|
||
|
|
<label class="col-form-label col-lg-2">Task Description</label>
|
||
|
|
<div class="col-lg-10">
|
||
|
|
<ckeditor :editor="editor"></ckeditor>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-group row mb-4">
|
||
|
|
<label class="col-form-label col-lg-2">Task Date</label>
|
||
|
|
<div class="col-lg-10">
|
||
|
|
<date-picker v-model="daterange" range append-to-body lang="en" confirm></date-picker>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="inner-repeater mb-4">
|
||
|
|
<div class="inner form-group mb-0 row">
|
||
|
|
<label class="col-form-label col-lg-2">Add Team Member</label>
|
||
|
|
<div
|
||
|
|
|
||
|
|
class="inner col-lg-10 ml-md-auto"
|
||
|
|
>
|
||
|
|
<div class="mb-3 row align-items-center" v-for="( member, index) in teamMember"
|
||
|
|
:key="member.id">
|
||
|
|
<div class="col-md-6">
|
||
|
|
<input
|
||
|
|
v-model="member.name"
|
||
|
|
type="text"
|
||
|
|
class="inner form-control"
|
||
|
|
placeholder="Enter Name..."
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div class="col-md-4">
|
||
|
|
<div class="mt-4 mt-md-0">
|
||
|
|
<input type="file" class="form-control" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-md-2">
|
||
|
|
<div class="mt-2 mt-md-0 d-grid">
|
||
|
|
<input
|
||
|
|
type="button"
|
||
|
|
class="btn btn-primary btn-block inner"
|
||
|
|
value="Delete"
|
||
|
|
@click="deleteMember(index)"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row justify-content-end">
|
||
|
|
<div class="col-lg-10">
|
||
|
|
<input
|
||
|
|
type="button"
|
||
|
|
class="btn btn-success inner"
|
||
|
|
value="Add Number"
|
||
|
|
@click="addMember"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="form-group row mb-4">
|
||
|
|
<label for="taskbudget" class="col-form-label col-lg-2">Budget</label>
|
||
|
|
<div class="col-lg-10">
|
||
|
|
<input
|
||
|
|
id="taskbudget"
|
||
|
|
name="taskbudget"
|
||
|
|
type="text"
|
||
|
|
placeholder="Enter Task Budget..."
|
||
|
|
class="form-control"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
<div class="row justify-content-end">
|
||
|
|
<div class="col-lg-10">
|
||
|
|
<button type="submit" class="btn btn-primary">Create Task</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- end row -->
|
||
|
|
</Layout>
|
||
|
|
</template>
|