%PDF-
%PDF-
Mini Shell
Mini Shell
<template>
<div>
<b-button id="show-btn" @click="$bvModal.show('bv-modal-example')">Add Property Task</b-button>
<router-link to="/allpropertytasks">List</router-link>
<router-link to="/taskCalendar">Calendar</router-link>
<b-modal size="lg" id="bv-modal-example" hide-footer>
<template #modal-title>
Property Task
</template>
<addtasks/>
<b-button class="mt-3" block @click="$bvModal.hide('bv-modal-example')">Close Me</b-button>
</b-modal>
<b-modal size="lg" id="update" hide-footer>
<template #modal-title>
Property Task Update
</template>
<div class="d-block">
<form action="" method="POST" @submit.prevent="updateEvent()" class="">
<div class="form-group">
<label for="">Client</label>
<input type="text" name="" id="" class="form-control" placeholder="" aria-describedby="helpId" v-model="eventdetail.client">
</div>
<div class="form-group">
<label for="">Property Name</label>
<input type="text" name="" id="" class="form-control" placeholder="" aria-describedby="helpId" v-model="eventdetail.property_name">
</div>
<div class="form-group">
<label for="">Task</label>
<input type="text" name="" id="" class="form-control" placeholder="" aria-describedby="helpId" v-model="eventdetail.title">
</div>
<div class="form-group">
<label for="">Task Description</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="5" v-model="eventdetail.description"></textarea>
</div>
<div class="form-group">
<label for="">Task Assigned</label>
<input type="text" name="" id="" class="form-control" placeholder="" aria-describedby="helpId" v-model="eventdetail.assigned">
</div>
<div class="form-group">
<label for="">created Date</label>
<input type="text" name="" id="" class="form-control" placeholder="" aria-describedby="helpId" v-model="eventdetail.created_at">
</div>
<div class="form-group">
<label for="">Due Date</label>
<input type="text" name="" id="" class="form-control" placeholder="" aria-describedby="helpId" v-model="eventdetail.due_date">
</div>
<div class="form-group">
<label for="">Priority</label>
<input type="text" name="" id="" class="form-control" placeholder="" aria-describedby="helpId" v-model="eventdetail.priority">
</div>
<div v-if="eventdetail.priority==1">
Low
</div>
<div v-else-if="eventdetail.priority==2">
Medium
</div>
<div v-else>
High
</div>
<div class="form-grouup">
<input type="radio" id="one" value="green" v-model="eventdetail.color" >Completed
<input type="radio" id="one" value="#d98b0f" v-model="eventdetail.color" >pending
<input type="radio" id="one" value="#a80527" v-model="eventdetail.color" >Cancelled
</div>
<button type="submit" value="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</b-modal>
<FullCalendar :options="calendarOptions" />
</div>
</template>
<script>
import '@fullcalendar/core/vdom' // solves problem with Vite
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import interactionPlugin from '@fullcalendar/interaction'
import timeGridPlugin from '@fullcalendar/timegrid'
import addtasks from './addtasks.vue'
import Addtasks from './addtasks.vue'
export default {
components: {
FullCalendar,
Addtasks // make the <FullCalendar> tag available
},
data() {
return {
calendarOptions: {
plugins: [ dayGridPlugin, timeGridPlugin,interactionPlugin ],
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
},
initialView: 'dayGridMonth',
dateClick: this.handleDateClick,
eventClick:this.eventClick,
selectable:true,
sitevisits:[],
test:'',
tasks:{},
events: [
],
eventRender: function(info) {
console.log(info.event.extendedProps.description);
}
},
task:{
task:"",
description:"",
assigned:"",
due_date:"",
priority:"",
},
test:22,
eventdetail:{
id:"",
title:'',
description :'',
location:'',
date:'',
color:'',
assigned:'',
property_name:'',
client:'',
created_at:'',
due_date:''
},
id:''
}
},
methods: {
handleDateClick: function(arg) {
alert('date click! ' + arg.dateStr);
$(this).css('background-color', 'red');
},
addevent(){
axios
.post('/allsitevisits', {
title:this.eventdetail.title,
location:this.eventdetail.location,
date: this.eventdetail.date,
}) .then(response => {
this.$toaster.success('Task Completed'),
this.loadevents(),
this.$bvModal.hide('bv-modal-example')
})
},
loadevents(){
axios.get('/tasks/calendartaskall') .then(response => {
this.calendarOptions.events = response.data
this.calendarOptions.sitevisits=response
})
},
loadTasklist(id){
// alert("hi");
axios.get('/tasks/taskdetails/'+id) .then(response => {
this.tasks = response.data;
// alert(this.tasks[0].cc);
this.task.task =this.tasks[0].task
this.test = this.tasks[0].description
this.eventdetail.due_date=this.tasks[0].due_date;
this.eventdetail.property_name=this.tasks[0].property_name;
this.eventdetail.created_at= this.tasks[0].created_at;
this.eventdetail.due_date= this.tasks[0].due_date;
//alert(this.tasks[0].description)
})
},
updatestatus: function (taskid) {
axios.post('/tasks/updatestatus/'+taskid) .then(response => {
this.loadtasks();
})
},
handleEventClick(e) {
alert(e.event);
},
updateEvent() {
axios.patch('/tasks/'+this.id,this.eventdetail
) .then(response => {
this.$toaster.success('Event Added'),
this.updatestatus(this.id),
this.loadevents(),
this.$bvModal.hide('update')
})
},
eventClick: function(info) {
this.loadTasklist(info.event.id);
this.eventdetail.id=info.event.id
this.eventdetail.title=info.event.title;
this.eventdetail.location=info.event.property_id;
this.eventdetail.description=info.event.extendedProps.description ;
this.eventdetail.priority=info.event.extendedProps.priority ;
this.eventdetail.status=info.event.extendedProps.status ;
this.eventdetail.date=info.event.date;
this.eventdetail.assigned=info.event.extendedProps.Assigned;
this.eventdetail.client=info.event.extendedProps.client;
//this.eventdetail.created_at='this.tasks[0].task.cc';
this.id=info.event.id;
this.$bvModal.show('update');
}
},
mounted: function(){
this.loadevents()
},
}
</script>
<style>
.fc-content {
color: white;
}
</style>
Zerion Mini Shell 1.0