File: /home/slfopp7cb1df/www/inventorypacket.com/resources/src/views/app/pages/projects/index_project.vue
<template>
<div class="main-content">
<breadcumb :page="$t('Project_List')" :folder="$t('Projects')"/>
<div v-if="isLoading" class="loading_page spinner spinner-primary mr-3"></div>
<div v-else>
<b-row>
<!-- ICON BG -->
<b-col lg="3" md="6" sm="12">
<b-card class="card-icon-bg card-icon-bg-primary o-hidden mb-30 text-center">
<i class="i-Yes"></i>
<div class="content">
<p class="text-muted mt-2 mb-0">{{$t('complete')}}</p>
<p
class="text-primary text-24 line-height-1 mb-2"
>{{count_completed}}</p>
</div>
</b-card>
</b-col>
<b-col lg="3" md="6" sm="12">
<b-card class="card-icon-bg card-icon-bg-primary o-hidden mb-30 text-center">
<i class="i-Pause"></i>
<div class="content">
<p class="text-muted mt-2 mb-0">{{$t('Not_Started')}}</p>
<p
class="text-primary text-24 line-height-1 mb-2"
>{{count_not_started}}</p>
</div>
</b-card>
</b-col>
<b-col lg="3" md="6" sm="12">
<b-card class="card-icon-bg card-icon-bg-primary o-hidden mb-30 text-center">
<i class="i-Loading-3"></i>
<div class="content">
<p class="text-muted mt-2 mb-0">{{$t('In_Progress')}}</p>
<p
class="text-primary text-24 line-height-1 mb-2"
>{{count_in_progress}}</p>
</div>
</b-card>
</b-col>
<b-col lg="3" md="6" sm="12">
<b-card class="card-icon-bg card-icon-bg-primary o-hidden mb-30 text-center">
<i class="i-Close"></i>
<div class="content">
<p class="text-muted mt-2 mb-0">{{$t('Cancelled')}}</p>
<p
class="text-primary text-24 line-height-1 mb-2"
>{{count_cancelled}}</p>
</div>
</b-card>
</b-col>
</b-row>
<vue-good-table
mode="remote"
:columns="columns"
:totalRows="totalRows"
:rows="projects"
@on-page-change="onPageChange"
@on-per-page-change="onPerPageChange"
@on-sort-change="onSortChange"
@on-search="onSearch"
:search-options="{
enabled: true,
placeholder: $t('Search_this_table'),
}"
:pagination-options="{
enabled: true,
mode: 'records',
nextLabel: 'next',
prevLabel: 'prev',
}"
styleClass="tableOne table-hover vgt-table"
>
<div slot="table-actions" class="mt-2 mb-3">
<b-button variant="outline-info ripple m-1" size="sm" v-b-toggle.sidebar-right>
<i class="i-Filter-2"></i>
{{ $t("Filter") }}
</b-button>
<b-button @click="Project_PDF()" size="sm" variant="outline-success ripple m-1">
<i class="i-File-Copy"></i> PDF
</b-button>
<vue-excel-xlsx
class="btn btn-sm btn-outline-danger ripple m-1"
:data="projects"
:columns="columns"
:file-name="'Projects'"
:file-type="'xlsx'"
:sheet-name="'Projects'"
>
<i class="i-File-Excel"></i> EXCEL
</vue-excel-xlsx>
<router-link
class="btn-sm btn btn-primary ripple btn-icon m-1"
to="/app/projects/store"
>
<span class="ul-btn__icon">
<i class="i-Add"></i>
</span>
<span class="ul-btn__text ml-1">{{$t('Add')}}</span>
</router-link>
</div>
<template slot="table-row" slot-scope="props">
<span v-if="props.column.field == 'actions'">
<router-link
title="Edit"
v-b-tooltip.hover
:to="'/app/projects/edit/'+props.row.id"
>
<i class="i-Edit text-25 text-success"></i>
</router-link>
<a
title="Delete"
class="cursor-pointer"
v-b-tooltip.hover
@click="Remove_Project(props.row.id)"
>
<i class="i-Close-Window text-25 text-danger"></i>
</a>
</span>
<div v-else-if="props.column.field == 'status'">
<span
v-if="props.row.status == 'completed'"
class="badge badge-outline-success"
>{{$t('complete')}}</span>
<span
v-else-if="props.row.status == 'not_started'"
class="badge badge-outline-warning"
>{{$t('Not_Started')}}</span>
<span
v-else-if="props.row.status == 'progress'"
class="badge badge-outline-primary"
>{{$t('In_Progress')}}</span>
<span
v-else-if="props.row.status == 'cancelled'"
class="badge badge-outline-danger"
>{{$t('Cancelled')}}</span>
<span
v-else-if="props.row.status == 'hold'"
class="badge badge-outline-secondary"
>{{$t('On_Hold')}}</span>
</div>
</template>
</vue-good-table>
</div>
<!-- Multiple Filters -->
<b-sidebar id="sidebar-right" :title="$t('Filter')" bg-variant="white" right shadow>
<div class="px-3 py-2">
<b-row>
<!-- Start Date -->
<b-col md="12">
<b-form-group :label="$t('start_date')">
<b-form-input type="date" v-model="Filter_start_date"></b-form-input>
</b-form-group>
</b-col>
<!-- End Date -->
<b-col md="12">
<b-form-group :label="$t('Finish_Date')">
<b-form-input type="date" v-model="Filter_end_date"></b-form-input>
</b-form-group>
</b-col>
<!-- Client -->
<b-col md="12">
<b-form-group :label="$t('Customer')">
<v-select
:reduce="label => label.value"
:placeholder="$t('Choose_Customer')"
v-model="Filter_Client"
:options="clients.map(clients => ({label: clients.name, value: clients.id}))"
/>
</b-form-group>
</b-col>
<!-- company -->
<b-col md="12">
<b-form-group :label="$t('Company')">
<v-select
:reduce="label => label.value"
:placeholder="$t('Choose_Company')"
v-model="Filter_Company"
:options="companies.map(companies => ({label: companies.name, value: companies.id}))"
/>
</b-form-group>
</b-col>
<!-- Status -->
<b-col md="12">
<b-form-group :label="$t('Status')">
<v-select
v-model="Filter_status"
:reduce="label => label.value"
:placeholder="$t('Choose_Status')"
:options="
[
{label: 'Completed', value: 'completed'},
{label: 'Not Started', value: 'not_started'},
{label: 'In Progress', value: 'progress'},
{label: 'Cancelled', value: 'cancelled'},
{label: 'On Hold', value: 'hold'},
]"
></v-select>
</b-form-group>
</b-col>
<b-col md="6" sm="12">
<b-button
@click="Get_Projects(serverParams.page)"
variant="primary m-1"
size="sm"
block
>
<i class="i-Filter-2"></i>
{{ $t("Filter") }}
</b-button>
</b-col>
<b-col md="6" sm="12">
<b-button @click="Reset_Filter()" variant="danger m-1" size="sm" block>
<i class="i-Power-2"></i>
{{ $t("Reset") }}
</b-button>
</b-col>
</b-row>
</div>
</b-sidebar>
</div>
</template>
<script>
import { mapActions, mapGetters } from "vuex";
import NProgress from "nprogress";
import jsPDF from "jspdf";
import "jspdf-autotable";
export default {
metaInfo: {
title: "Projects"
},
data() {
return {
isLoading: true,
serverParams: {
columnFilters: {},
sort: {
field: "id",
type: "desc"
},
page: 1,
perPage: 10
},
selectedIds: [],
totalRows: "",
search: "",
limit: "10",
Filter_start_date: "",
Filter_end_date: "",
Filter_status: "",
Filter_Client: "",
Filter_Company: "",
projects: [],
clients: [],
companies: [],
count_not_started: "",
count_in_progress: "",
count_cancelled: "",
count_completed: "",
};
},
computed: {
...mapGetters(["currentUserPermissions", "currentUser"]),
columns() {
return [
{
label: this.$t("title"),
field: "title",
tdClass: "text-left",
thClass: "text-left"
},
{
label: this.$t("Customer"),
field: "client_name",
tdClass: "text-left",
thClass: "text-left"
},
{
label: this.$t("Company"),
field: "company_name",
tdClass: "text-left",
thClass: "text-left"
},
{
label: this.$t("start_date"),
field: "start_date",
tdClass: "text-left",
thClass: "text-left"
},
{
label: this.$t("Finish_Date"),
field: "end_date",
tdClass: "text-left",
thClass: "text-left"
},
{
label: this.$t("Status"),
field: "status",
tdClass: "text-left",
thClass: "text-left"
},
{
label: this.$t("Action"),
field: "actions",
html: true,
tdClass: "text-right",
thClass: "text-right",
sortable: false
}
];
}
},
methods: {
//---------------------- Projects PDF -------------------------------\\
Project_PDF() {
var self = this;
let pdf = new jsPDF("p", "pt");
let columns = [
{ title: "Title", dataKey: "title" },
{ title: "Client", dataKey: "client_name" },
{ title: "Company", dataKey: "company_name" },
{ title: "Start Date", dataKey: "start_date" },
{ title: "End Date", dataKey: "end_date" }
];
pdf.autoTable(columns, self.deposits);
pdf.text("Project List", 40, 25);
pdf.save("Project_List.pdf");
},
//------ update Params Table
updateParams(newProps) {
this.serverParams = Object.assign({}, this.serverParams, newProps);
},
//---- Event Page Change
onPageChange({ currentPage }) {
if (this.serverParams.page !== currentPage) {
this.updateParams({ page: currentPage });
this.Get_Projects(currentPage);
}
},
//---- Event Per Page Change
onPerPageChange({ currentPerPage }) {
if (this.limit !== currentPerPage) {
this.limit = currentPerPage;
this.updateParams({ page: 1, perPage: currentPerPage });
this.Get_Projects(1);
}
},
//------ Event Sort Change
onSortChange(params) {
let field = "";
if (params[0].field == "client_name") {
field = "client_id";
} else if (params[0].field == "company_name") {
field = "company_id";
} else {
field = params[0].field;
}
this.updateParams({
sort: {
type: params[0].type,
field: field
}
});
this.Get_Projects(this.serverParams.page);
},
//------ Event Search
onSearch(value) {
this.search = value.searchTerm;
this.Get_Projects(this.serverParams.page);
},
//------ Reset Filter
Reset_Filter() {
this.search = "";
this.Filter_start_date = "";
this.Filter_end_date = "";
this.Filter_status = "";
this.Filter_Client = "";
this.Filter_Company = "";
this.Get_Projects(this.serverParams.page);
},
// Simply replaces null values with strings=''
setToStrings() {
if (this.Filter_Client === null) {
this.Filter_Client = "";
} else if (this.Filter_Company === null) {
this.Filter_Company = "";
}
},
//------------------------------------------------ Get All projects -------------------------------\\
Get_Projects(page) {
// Start the progress bar.
NProgress.start();
NProgress.set(0.1);
this.setToStrings();
axios
.get(
"projects?page=" +
page +
"&status=" +
this.Filter_status +
"&client_id=" +
this.Filter_Client +
"&start_date=" +
this.Filter_start_date +
"&end_date=" +
this.Filter_end_date +
"&company_id=" +
this.Filter_Company +
"&SortField=" +
this.serverParams.sort.field +
"&SortType=" +
this.serverParams.sort.type +
"&search=" +
this.search +
"&limit=" +
this.limit
)
.then(response => {
this.projects = response.data.projects;
this.companies = response.data.companies;
this.clients = response.data.clients;
this.totalRows = response.data.totalRows;
this.count_not_started = response.data.count_not_started;
this.count_in_progress = response.data.count_in_progress;
this.count_cancelled = response.data.count_cancelled;
this.count_completed = response.data.count_completed;
// Complete the animation of theprogress bar.
NProgress.done();
this.isLoading = false;
})
.catch(response => {
// Complete the animation of theprogress bar.
NProgress.done();
setTimeout(() => {
this.isLoading = false;
}, 500);
});
},
//------------------------------- Remove projects -------------------------\\
Remove_Project(id) {
this.$swal({
title: this.$t("Delete.Title"),
text: this.$t("Delete.Text"),
type: "warning",
showCancelButton: true,
confirmButtonColor: "#3085d6",
cancelButtonColor: "#d33",
cancelButtonText: this.$t("Delete.cancelButtonText"),
confirmButtonText: this.$t("Delete.confirmButtonText")
}).then(result => {
if (result.value) {
// Start the progress bar.
NProgress.start();
NProgress.set(0.1);
axios
.delete("projects/" + id)
.then(() => {
this.$swal(
this.$t("Delete.Deleted"),
this.$t("Deleted_in_successfully"),
"success"
);
Fire.$emit("event_delete_projects");
})
.catch(() => {
// Complete the animation of theprogress bar.
setTimeout(() => NProgress.done(), 500);
this.$swal(
this.$t("Delete.Failed"),
this.$t("Delete.Therewassomethingwronge"),
"warning"
);
});
}
});
},
},
//----------------------------- Created function-------------------
created: function() {
this.Get_Projects(1);
Fire.$on("event_delete_projects", () => {
setTimeout(() => {
// Complete the animation of theprogress bar.
NProgress.done();
this.Get_Projects(this.serverParams.page);
}, 500);
});
}
};
</script>