389 lines
14 KiB
Vue
389 lines
14 KiB
Vue
<template>
|
|
<div>
|
|
<a-card class="py-5 mt-5" v-if="rows">
|
|
<div class="container mx-auto text-center">
|
|
<img src="../../../public/task.svg"/>
|
|
<h2>You haven't created any matter.</h2>
|
|
<p class="text-base font-medium">
|
|
Click <a href="#">here</a> or use the button in the bottom to create a new matter.
|
|
</p>
|
|
<vs-button color="primary" type="filled" class="font-bold" @click="addMatter">New Matter</vs-button>
|
|
</div>
|
|
</a-card>
|
|
|
|
<div v-else>
|
|
<a-card>
|
|
<div class="flex justify-between items-center">
|
|
<h3 class="mb-0">Matter</h3>
|
|
<vs-button color="primary" type="filled" class="matter-add" @click="addMatter">New Matter</vs-button>
|
|
</div>
|
|
</a-card>
|
|
<a-card class="mt-5 overflow-auto">
|
|
<a-card title="Filters">
|
|
<div class="flex flex-col md:flex-row justify-between space-y-4 md:space-y-0">
|
|
<a-radio-group v-model="type_matter" button-style="solid" class="self-center" style="white-space: nowrap">
|
|
<a-radio-button value="All" @click="filterStatus('all')">
|
|
All
|
|
</a-radio-button>
|
|
<a-radio-button value="Open" @click="filterStatus(1)">
|
|
Open
|
|
</a-radio-button>
|
|
<a-radio-button value="Closed" @click="filterStatus(2)">
|
|
Closed
|
|
</a-radio-button>
|
|
<a-radio-button value="Pending" @click="filterStatus(3)">
|
|
Pending
|
|
</a-radio-button>
|
|
</a-radio-group>
|
|
<vs-button color="primary"
|
|
type="border"
|
|
icon="filter_list"
|
|
@click="showDrawer"
|
|
class=""
|
|
style="letter-spacing: 0.6px"
|
|
>
|
|
Filters
|
|
</vs-button>
|
|
</div>
|
|
</a-card>
|
|
<XTable :model="model" ref="matters" :options="options" @refresh="refresh" @clickRow="(record)=>clickRow(`/matters/edit/${record.id}`)" class="mt-4 overflow-auto">
|
|
<span slot="title_matter" slot-scope="text,record">
|
|
<a-button type="link" class="p-0" @click="matterDashboard(text.record)">{{ text.record.title }}</a-button>
|
|
</span>
|
|
<span slot="client" slot-scope="text,record">
|
|
<template v-if="text.record.client.person">
|
|
{{ text.record.client.person.first_name }} {{ text.record.client.person.last_name }}
|
|
</template>
|
|
<template v-else>
|
|
{{ text.record.client.company.name }}
|
|
</template>
|
|
</span>
|
|
<span slot="action" slot-scope="text,record" class="flex space-x-3">
|
|
<a-dropdown>
|
|
<a-menu slot="overlay">
|
|
<a-menu-item key="2" @click="toEditItem(text.record.id)"><feather-icon icon="EditIcon" svg-classes="text-success w-4 h-4" class="pr-2"/>Edit</a-menu-item>
|
|
<a-menu-item key="1" @click="promptDelete(text.record.id)"> <feather-icon icon="TrashIcon" svg-classes="text-danger w-4 h-4" class="pr-2"/>Delete</a-menu-item>
|
|
<!--<a-menu-item key="3"> <a-icon type="clock-circle" />Clock</a-menu-item>-->
|
|
</a-menu>
|
|
<a-button style="margin-left: 8px" @click="is_click_add_time = false"> Actions <a-icon type="down" /></a-button>
|
|
</a-dropdown>
|
|
</span>
|
|
<span slot="status" slot-scope="text,record">
|
|
<template v-if="text.record.status == 1">
|
|
Open
|
|
</template>
|
|
<template v-if="text.record.status == 2">
|
|
Closed
|
|
</template>
|
|
<template v-if="text.record.status == 3">
|
|
Pending
|
|
</template>
|
|
</span>
|
|
<span slot="responsible" slot-scope="text,record" v-if="text.record.responsible">
|
|
{{ text.record.responsible.first_name }} {{ text.record.responsible.last_name }}
|
|
</span>
|
|
<span slot="origination" slot-scope="text,record" v-if="text.record.origination">
|
|
{{ text.record.origination.first_name }} {{ text.record.origination.last_name }}
|
|
</span>
|
|
</XTable>
|
|
</a-card>
|
|
</div>
|
|
|
|
|
|
<Drawer
|
|
ref="drawer"
|
|
:form="form"
|
|
:ele="$refs.matters"
|
|
:query="[
|
|
{ field : 'title', value: form.getFieldValue('title') , condition:'like'},
|
|
{ field : 'client', value: form.getFieldValue('client') , condition: '=' },
|
|
{ field : 'practice_area', value: form.getFieldValue('practice_area') , condition: '=' },
|
|
{ field : 'responsible', value: form.getFieldValue('responsible') , condition: '=' },
|
|
{ field : 'origination', value: form.getFieldValue('origination') , condition: '=' },
|
|
{ field : 'group', value: form.getFieldValue('group') , condition: '=' },
|
|
{ field : 'location', value: form.getFieldValue('location') , condition: 'like' },
|
|
{ field : 'reference_code', value: form.getFieldValue('reference_code') , condition: 'like' },
|
|
]"
|
|
>
|
|
<a-form-item label="title" has-feedback>
|
|
<input
|
|
v-decorator="['title',{ rules: [{ required: false }] }]"
|
|
placeholder="title"
|
|
autocomplete="none"
|
|
class="ant-input"
|
|
/>
|
|
</a-form-item>
|
|
<selectSearch
|
|
:options="{placeholder: 'Search contacts',label: 'Client',field: 'client',width: '100%',allow_clear: true}"
|
|
/>
|
|
<SelectOption url="/dictionary/practice-area/" label="Practice area" placeholder="Practice area" field="practice_area" method="get"/>
|
|
<SelectOption url="/account/list/" label="Responsible attorney" placeholder="Responsible" field="responsible" method="get"/>
|
|
<SelectOption url="/account/list/" label="Originating attorney" placeholder="Originating" field="origination" method="get"/>
|
|
<SelectOption url="/account/group/" label="Permissions" placeholder="groups" field="group" method="get" />
|
|
<a-form-item label="Location" has-feedback>
|
|
<input
|
|
v-decorator="['location',{ rules: [{ required: false }] }]"
|
|
placeholder="Location"
|
|
class="ant-input"
|
|
autocomplete="none"
|
|
/>
|
|
</a-form-item>
|
|
<a-form-item label="Client reference number" has-feedback>
|
|
<input
|
|
v-decorator="['reference_code',{rules: [{ required: false }] }]"
|
|
placeholder="reference"
|
|
class="ant-input"
|
|
autocomplete="none"
|
|
/>
|
|
</a-form-item>
|
|
<div
|
|
:style="{
|
|
position: 'absolute',
|
|
left: 0,
|
|
bottom: 0,
|
|
width: '100%',
|
|
borderTop: '1px solid #e9e9e9',
|
|
padding: '10px 16px',
|
|
background: '#fff',
|
|
textAlign: 'left',
|
|
direction:'rtl',
|
|
zIndex: 1,
|
|
}"
|
|
>
|
|
<a-button :style="{ marginLeft: '8px' }" @click="$refs.drawer.visible_drawer = false" style="border-radius: 3px !important;">
|
|
Cancel
|
|
</a-button>
|
|
<a-button type="primary" html-type="submit" style="border-radius: 3px !important;">
|
|
Save filter
|
|
</a-button>
|
|
</div>
|
|
|
|
|
|
</Drawer>
|
|
|
|
<vs-prompt
|
|
color="danger"
|
|
title="Delete Matter"
|
|
@cancel="active_prompt = false"
|
|
@close="active_prompt = false"
|
|
:active.sync="active_prompt"
|
|
buttons-hidden
|
|
>
|
|
<div class="text-left">
|
|
<div class="font-medium">Are you sure to delete this matter ?</div>
|
|
</div>
|
|
<div class="flex justify-center space-x-3 mt-5">
|
|
<vs-button color="danger" @click="deleteItem">delete</vs-button>
|
|
<vs-button color="danger" type="flat" @click="active_prompt = false">Cancel</vs-button>
|
|
</div>
|
|
</vs-prompt>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import XTable from '../../components/x-table/XTable'
|
|
import * as TableCol from './mattersTbl'
|
|
import axios from "@/axios"
|
|
import SelectSearch from '../forms/selectSearch'
|
|
import SelectOption from '../forms/SelectOptionSingle'
|
|
import Mixin from '../mixin/mixin'
|
|
import Drawer from '../drawer/Drawer'
|
|
|
|
|
|
export default {
|
|
name: "Matters",
|
|
mixins:[Mixin],
|
|
components:{
|
|
XTable,
|
|
SelectSearch,
|
|
SelectOption,
|
|
Drawer
|
|
},
|
|
data(){
|
|
return{
|
|
model:null,
|
|
active_prompt: false,
|
|
current_id: null,
|
|
area: [],
|
|
type_matter: 'All',
|
|
options:{
|
|
placeholder:'Search matters',
|
|
noContent: 'No matters',
|
|
is_row_selection: false,
|
|
is_load_req: true
|
|
}
|
|
}
|
|
},
|
|
methods:{
|
|
|
|
matterDashboard(record){
|
|
this.is_click_add_time = true
|
|
this.$router.push(`/matters/dashboard/${record.id}`)
|
|
this.$store.commit('DASHBOARD_ID',record.id)
|
|
},
|
|
|
|
refresh(){
|
|
this.type_matter = 'All'
|
|
},
|
|
|
|
showDrawer(){
|
|
this.$refs.drawer.visible_drawer = true
|
|
},
|
|
|
|
async filterStatus(sts){
|
|
this.checkPagenation(this.$refs.matters)
|
|
sts === 'all' ? this.$refs.matters.query.query = [] : this.$refs.matters.query.query = [{ field: 'status',condition: '=',value: sts }]
|
|
await this.$refs.matters.fetch()
|
|
},
|
|
|
|
addMatter(){
|
|
this.$router.push('/matters/add')
|
|
},
|
|
|
|
toEditItem(id){
|
|
this.$router.push(`/matters/edit/${id}`)
|
|
},
|
|
|
|
promptDelete(id){
|
|
this.current_id = id
|
|
this.active_prompt = true
|
|
},
|
|
|
|
async deleteItem(){
|
|
try{
|
|
const id = this.current_id
|
|
this.active_prompt = false
|
|
this.$refs.matters.loading = true
|
|
await axios.delete(`/matter/${id}/`)
|
|
await this.$refs.matters.fetch()
|
|
this.$notification['success']({
|
|
message: 'Success',
|
|
description: `Matter deleted.`,
|
|
});
|
|
}catch (e) {
|
|
this.$notification['error']({
|
|
message: 'Error',
|
|
description: `Please try again.`,
|
|
});
|
|
}finally {
|
|
this.$refs.matters.loading = false
|
|
}
|
|
},
|
|
|
|
async getPracticeArea(){
|
|
const {data} = await axios.get('/dictionary/practice-area/')
|
|
this.area = data
|
|
},
|
|
|
|
// handleFilter(){
|
|
// this.form.validateFields(async (err, values) => {
|
|
// try{
|
|
// this.visible_drawer = false
|
|
// this.$refs.matters.loading = true
|
|
// const modelFilter = [
|
|
// {
|
|
// value: 'title'
|
|
// },
|
|
// {
|
|
// value: 'practice_area'
|
|
// },
|
|
// {
|
|
// value: 'location'
|
|
// },
|
|
// {
|
|
// value: 'reference_code'
|
|
// },
|
|
// {
|
|
// value: 'client'
|
|
// },
|
|
// {
|
|
// value: 'group'
|
|
// },
|
|
// {
|
|
// value: 'responsible'
|
|
// },
|
|
// {
|
|
// value: 'origination'
|
|
// }
|
|
// ]
|
|
// const filter = modelFilter.filter(item=>this.form.getFieldValue(item.value)).map(item=>({operation: item.value !== 'title' ? 'and' : undefined ,condition: '=', field: item.value, value : this.form.getFieldValue(item.value) }))
|
|
// this.$refs.matters.query.query = filter
|
|
// this.checkPagenation(this.$refs.matters)
|
|
// await this.$refs.matters.fetch()
|
|
// this.form.resetFields()
|
|
// }catch (e){
|
|
// this.$message.error('Error receiving information from server.');
|
|
// }finally {
|
|
// this.$refs.matters.loading = false
|
|
// }
|
|
//
|
|
// })
|
|
// },
|
|
|
|
},
|
|
computed:{
|
|
rows(){
|
|
if(this.$refs.matters){
|
|
return this.$refs.matters.query
|
|
}
|
|
}
|
|
},
|
|
watch:{
|
|
"this.$refs.matters.query":{
|
|
handler(newVal,oldVal) {
|
|
console.log(this.rows,'rows rows')
|
|
},
|
|
deep: true
|
|
}
|
|
},
|
|
mounted() {
|
|
this.is_click_add_time = true
|
|
},
|
|
created() {
|
|
this.getPracticeArea()
|
|
this.model = TableCol.default
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
@import "../style/style.css";
|
|
[dir=ltr] .ant-modal-footer{
|
|
display: none;
|
|
}
|
|
.matter-add{
|
|
text-align: right;
|
|
display: block;
|
|
margin-left: auto;
|
|
}
|
|
[dir=ltr] .ant-radio-button-wrapper:first-child{
|
|
border-radius: 3px 0 0 3px;
|
|
}
|
|
[dir=ltr] .ant-radio-button-wrapper:last-child{
|
|
border-radius: 0 3px 3px 0;
|
|
}
|
|
[dir] .ant-card-bordered{
|
|
border-radius: 6px;
|
|
}
|
|
[dir] .ant-input, [dir] .ant-calendar-picker-input, [dir] .ant-select-selection {
|
|
border-radius: 3px !important;
|
|
}
|
|
.ant-calendar-picker-input,.ant-select-selection {
|
|
border-radius: 3px !important;
|
|
}
|
|
.vs-button--icon{
|
|
z-index: 10 !important;
|
|
}
|
|
.ant-drawer-content-wrapper {
|
|
z-index: 10000 !important;
|
|
}
|
|
.ant-select-dropdown-menu.ant-select-dropdown-menu-vertical.ant-select-dropdown-menu-root{
|
|
z-index: 200000000 !important;
|
|
position: relative;
|
|
}
|
|
[dir=ltr] .ant-drawer-mask{
|
|
z-index: 1000 !important;
|
|
}
|
|
</style>
|