Server : Apache System : Linux server2.corals.io 4.18.0-348.2.1.el8_5.x86_64 #1 SMP Mon Nov 15 09:17:08 EST 2021 x86_64 User : corals ( 1002) PHP Version : 7.4.33 Disable Function : exec,passthru,shell_exec,system Directory : /home/corals/ts.corals.io/frontend/components/layout/ |
<template>
<div class="crud-index">
<div class="row">
<div class="col-md-4">
<PageSection :title="labels.title"/>
</div>
<div class="col-md-8 text-right">
<b-dropdown id="dropdown-left" text="Actions" variant="primary" class="m-2" size="sm"
v-if="bulkActionOptions.length">
<template v-for="action in bulkActionOptions">
<b-dropdown-item href="#" @click.prevent="handleBulkAction(action, selectedIds)"
style="text-transform: capitalize;">
{{ action }}
</b-dropdown-item>
</template>
</b-dropdown>
<slot name="extraButtons"></slot>
<b-button variant="primary" size="sm" type="button" @click.prevent="showFormModal"
v-if="!options.hideCreate">
<fa icon="plus"/>
Create
</b-button>
<b-button variant="warning" size="sm" type="button" @click.prevent="refresh">
<fa icon="redo"/>
</b-button>
</div>
</div>
<div class="row mt-3">
<div :class="rowColumns">
<v-server-table :columns="columns" ref="listTable"
:url="resourceURL"
@loaded="onDataLoaded"
:options="tableOptions(options)">
<div slot="h__checkbox" class="text-center">
<div class="custom-control custom-checkbox" v-if="$isAdmin() && bulkActionOptions.length">
<input type="checkbox" class="custom-control-input"
:true-value="1" :false-value="0"
:key="`checkbox_header__table`"
ref="checkbox_header__table"
@change="selectAll($event.target.checked)"
:id="`checkbox_header__table`">
<label class="custom-control-label" :for="`checkbox_header__table`"></label>
</div>
</div>
<div slot="checkbox" class="text-center" slot-scope="props" v-if="$isAdmin() && bulkActionOptions.length">
<b-form-checkbox v-model="selectedIds" :value="props.row.id"
:key="`${props.row.id}__checkbox_record`">
</b-form-checkbox>
</div>
<template :slot="customColumn" v-for="customColumn in options.customColumns" slot-scope="props">
<slot :name="customColumn" v-bind:object="props"></slot>
</template>
<div slot="actions" slot-scope="props">
<b-link @click.prevent="editRecord(props.row.id)" v-b-tooltip.hover title="Edit"
v-if="props.row.edit && Object.keys(props.row.edit).length">
<fa icon="edit"/>
</b-link>
<b-link class="text-danger" @click.prevent="showDeleteModal(props.row.id, props.index)" v-b-tooltip.hover
title="Delete"
v-if="props.row.delete && Object.keys(props.row.delete).length">
<fa icon="trash"/>
</b-link>
<b-link class="text-warning" @click.prevent="cloneRecord(props.row.id, cloneAttr)" v-b-tooltip.hover
title="Clone"
v-if="props.row.clone && Object.keys(props.row.clone).length">
<fa icon="clone"/>
</b-link>
<slot name="extra-actions" :object="props.row"></slot>
</div>
</v-server-table>
</div>
</div>
<b-modal hide-footer :size="formSize"
content-class="shadow"
:title="modalTitle"
no-close-on-backdrop :id="formModalId" @hidden="onModalHidden"
@show="onModalShow">
<div class="row" v-if="form">
<div class="col-md-12">
<c-overlay :show="!form.isReady">
<form @submit.prevent="onSubmit()">
<slot v-bind:form="form"></slot>
<div class="text-right">
<button type="submit" class="btn btn-sm btn-primary" :disabled="!form.isReady">
{{ modalTitle }}
</button>
<button @click.prevent="$bvModal.hide(formModalId)" class="btn btn-sm btn-secondary"
:disabled="!form.isReady">Close
</button>
</div>
</form>
</c-overlay>
</div>
</div>
</b-modal>
</div>
</template>
<script>
import serverTableMixin from "@/mixins/serverTableMixin";
import PageSection from "./PageSection";
import COverlay from "./COverlay";
import _ from 'lodash';
export default {
mixins: [serverTableMixin],
components: {COverlay, PageSection},
inject: {
handleBulkAction: {
default: []
},
},
props: {
'columns': {
required: true,
},
'bulkActionOptions': {
required: false,
default: () => {
return [];
}
},
'resourceURL': {
required: true,
},
deleteHref: {
required: false,
},
editHref: {
required: false,
},
cloneHref: {
required: false,
},
cloneAttr: {
required: false
},
'options': {
required: true,
},
'form': {
required: false,
},
'formSize': {
required: false,
default: ''
},
'labels': {
required: true,
},
'rowColumns': {
required: false,
default: 'col-md-12'
},
'nameClickable': {
required: false,
},
'compact': {
required: false,
},
'onDataLoaded': {
required: false,
default: () => {
return () => {
}
}
},
},
name: "CrudIndex",
data() {
return {
selectedIds: []
}
},
beforeMount() {
this.$eventBus.$on('setSelectedIds', this.setSelectedIds);
},
methods: {
setSelectedIds(ids) {
this.selectedIds = ids;
},
onModalShow() {
if (this.editRecordId || this.cloneRecordId) {
return;
}
this.form.replace(this.form.originalData);
this.editRecordId = null
this.cloneRecordId = null
this.form.errors.purge();
},
onModalHidden() {
this.form.replace(this.form.originalData);
this.editRecordId = null;
this.cloneRecordId = null;
this.form.errors.purge();
this.$emit('edit-form-closed');
},
getTableData() {
let table = this.$refs[this.listTableRefs];
return _.get(table, 'data');
},
selectAll(isChecked) {
let data = this.getTableData();
if (isChecked) {
this.selectedIds = data.map((item) => item.id)
} else {
this.selectedIds = [];
}
this.$refs.checkbox_header__table.checked = isChecked;
}
},
computed: {
modalTitle() {
return (this.editRecordId ? 'Update ' : this.cloneRecordId ? 'Clone ' : 'Create ') + this.labels.singularTitle;
}
},
watch: {
selectedIds(selectedIds) {
this.$refs.checkbox_header__table.checked = this.getTableData().length === _.uniq(selectedIds).length;
}
},
beforeDestroy() {
}
}
</script>
<style>
.form-modal-header {
padding: 0 !important;
}
</style>