vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

New crud demo

pull/358/head
cagataycivici 2020-07-01 13:51:46 +03:00
parent d42e094409
commit 31c100bb12
5 changed files with 377 additions and 159 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/service/ProductService.js
View File

@ -9,7 +9,7 @@ export default class ProductService {
getProducts() { getProducts() {
return axios.get('demo/data/products.json').then(res => res.data.data); return axios.get('demo/data/products.json').then(res => res.data.data);
} }
getProductsWithOrdersSmall() { getProductsWithOrdersSmall() {
return axios.get('demo/data/products-orders-small.json').then(res => res.data.data); return axios.get('demo/data/products-orders-small.json').then(res => res.data.data);
} }

512
src/views/datatable/DataTableCrudDemo.vue
View File

@ -9,51 +9,128 @@
<div class="content-section implementation"> <div class="content-section implementation">
<div class="card"> <div class="card">
<DataTable :value="cars" selectionMode="single" :selection.sync="selectedCar" @row-select="onRowSelect" dataKey="vin" <Toolbar class="p-mb-4">
:paginator="true" :rows="15"> <template slot="left">
<template #header> <Button label="New" icon="pi pi-plus" class="p-button-success p-mr-2" @click="openNew" />
CRUD for Cars <Button label="Delete" icon="pi pi-trash" class="p-button-danger" @click="confirmDeleteSelected" :disabled="!selectedProducts || !selectedProducts.length" />
</template> </template>
<Column field="vin" header="Vin" :sortable="true"></Column>
<Column field="year" header="Year" :sortable="true"></Column> <template slot="right">
<Column field="brand" header="Brand" :sortable="true"></Column> <FileUpload mode="basic" accept="image/*" :maxFileSize="1000000" label="Import" chooseLabel="Import" class="p-mr-2" />
<Column field="color" header="Color" :sortable="true"></Column> <Button label="Export" icon="pi pi-upload" class="p-button-help" @click="exportCSV($event)" />
<template #footer> </template>
<div style="text-align:left"> </Toolbar>
<Button abel="Add" icon="pi pi-plus" @click="addNewCar" />
<DataTable ref="dt" :value="products" :selection.sync="selectedProducts" dataKey="id"
:paginator="true" :rows="10" :filters="filters"
paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown" :rowsPerPageOptions="[5,10,25]"
currentPageReportTemplate="Showing {first} to {last} of {totalRecords} products">
<template #header>
<div class="table-header">
<h5 class="p-m-0">Manage Products</h5>
<span class="p-input-icon-left">
<i class="pi pi-search" />
<InputText v-model="filters['global']" placeholder="Search..." />
</span>
</div> </div>
</template> </template>
<Column selectionMode="multiple" headerStyle="width: 3rem"></Column>
<Column field="code" header="Code" sortable></Column>
<Column field="name" header="Name" sortable></Column>
<Column header="Image">
<template #body="slotProps">
<img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.image" class="product-image" />
</template>
</Column>
<Column field="price" header="Price" sortable>
<template #body="slotProps">
{{formatCurrency(slotProps.data.price)}}
</template>
</Column>
<Column field="category" header="Category" sortable></Column>
<Column field="rating" header="Reviews" sortable>
<template #body="slotProps">
<Rating :value="slotProps.data.rating" :readonly="true" :cancel="false" />
</template>
</Column>
<Column field="inventoryStatus" header="Status" sortable>
<template #body="slotProps">
<span :class="'product-badge status-' + slotProps.data.inventoryStatus.toLowerCase()">{{slotProps.data.inventoryStatus}}</span>
</template>
</Column>
<Column>
<template #body="slotProps">
<Button icon="pi pi-pencil" class="p-button-rounded p-button-success p-mr-2" @click="editProduct(slotProps.data)" />
<Button icon="pi pi-trash" class="p-button-rounded p-button-warning" @click="confirmDeleteProduct(slotProps.data)" />
</template>
</Column>
</DataTable> </DataTable>
</div> </div>
<Dialog :visible.sync="dialogVisible" :style="{width: '400px'}" header="Car Details" :modal="true"> <Dialog :visible.sync="dialogVisible" :style="{width: '450px'}" header="Product Details" :modal="true" class="p-fluid">
<div class="p-cardialog-content"> <img :src="'demo/images/product/' + product.image" :alt="product.image" class="product-image" v-if="product.image" />
<div class="p-grid p-fluid" v-if="car"> <div class="p-field">
<div class="p-col-4"><label for="vin">Vin</label></div> <label for="name">Name</label>
<div class="p-col-8"> <InputText id="name" v-model.trim="product.name" required="true" autofocus />
<InputText id="vin" v-model="car.vin" :disabled="true" autocomplete="off" /> <small id="name-help" class="p-invalid" v-if="submitted && !product.name">Name is required.</small>
</div> </div>
<div class="p-field">
<label for="description">Description</label>
<Textarea id="description" v-model="product.description" required="true" rows="3" cols="20" />
</div>
<div class="p-col-4"><label for="year">Year</label></div> <div class="p-field">
<div class="p-col-8"> <label class="p-mb-3">Category</label>
<InputText id="year" v-model="car.year" autocomplete="off" /> <div class="p-formgrid p-grid">
<div class="p-field-radiobutton p-col-6">
<RadioButton id="category1" name="category" value="Accessories" v-model="product.category" />
<label for="category1">Accessories</label>
</div> </div>
<div class="p-field-radiobutton p-col-6">
<div class="p-col-4"><label for="brand">Brand</label></div> <RadioButton id="category2" name="category" value="Clothing" v-model="product.category" />
<div class="p-col-8"> <label for="category2">Clothing</label>
<InputText id="brand" v-model="car.brand" autocomplete="off" />
</div> </div>
<div class="p-field-radiobutton p-col-6">
<div class="p-col-4"><label for="color">Color</label></div> <RadioButton id="category3" name="category" value="Electronics" v-model="product.category" />
<div class="p-col-8"> <label for="category3">Electronics</label>
<InputText id="color" v-model="car.color" autocomplete="off" /> </div>
<div class="p-field-radiobutton p-col-6">
<RadioButton id="category4" name="category" value="Fitness" v-model="product.category" />
<label for="category4">Fitness</label>
</div> </div>
</div> </div>
</div> </div>
<div class="p-formgrid p-grid">
<div class="p-field p-col">
<label for="price">Price</label>
<InputNumber id="price" v-model="product.price" mode="currency" currency="USD" locale="en-US" />
</div>
<div class="p-field p-col">
<label for="quantity">Quantity</label>
<InputNumber id="quantity" v-model="product.quantity" integeronly />
</div>
</div>
<template #footer> <template #footer>
<Button label="Delete" icon="pi pi-times" @click="deleteCar" class="p-button-danger" /> <Button label="Cancel" icon="pi pi-times" class="p-button-text" @click="hideDialog"/>
<Button label="Save" icon="pi pi-check" @click="saveCar" class="p-button-success" /> <Button label="Save" icon="pi pi-check" class="p-button-text" @click="saveProduct" />
</template>
</Dialog>
<Dialog :visible.sync="deleteProductDialogVisible" :style="{width: '450px'}" header="Confirm" :modal="true">
<p v-if="product">Are you sure you want to delete <b>{{product.name}}</b>?</p>
<template #footer>
<Button label="No" icon="pi pi-times" class="p-button-text" @click="deleteProductDialogVisible = false"/>
<Button label="Yes" icon="pi pi-check" class="p-button-text" @click="deleteProduct" />
</template>
</Dialog>
<Dialog :visible.sync="deleteSelectedProductsDialogVisible" :style="{width: '450px'}" header="Confirm" :modal="true">
<p v-if="product">Are you sure you want to delete selected products?</p>
<template #footer>
<Button label="No" icon="pi pi-times" class="p-button-text" @click="deleteSelectedProductsDialogVisible = false"/>
<Button label="Yes" icon="pi pi-check" class="p-button-text" @click="deleteSelectedProducts" />
</template> </template>
</Dialog> </Dialog>
</div> </div>
@ -63,122 +140,229 @@
<TabPanel header="Source"> <TabPanel header="Source">
<CodeHighlight> <CodeHighlight>
<template v-pre> <template v-pre>
&lt;DataTable :value="cars" selectionMode="single" :selection.sync="selectedCar" @row-select="onRowSelect" dataKey="vin" &lt;Toolbar class="p-mb-4"&gt;
:paginator="true" :rows="15"&gt; &lt;template slot="left"&gt;
&lt;template #header&gt; &lt;Button label="New" icon="pi pi-plus" class="p-button-success p-mr-2" @click="openNew" /&gt;
CRUD for Cars &lt;Button label="Delete" icon="pi pi-trash" class="p-button-danger" @click="confirmDeleteSelected" :disabled="!selectedProducts || !selectedProducts.length" /&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;Column field="vin" header="Vin" :sortable="true"&gt;&lt;/Column&gt;
&lt;Column field="year" header="Year" :sortable="true"&gt;&lt;/Column&gt; &lt;template slot="right"&gt;
&lt;Column field="brand" header="Brand" :sortable="true"&gt;&lt;/Column&gt; &lt;FileUpload mode="basic" accept="image/*" :maxFileSize="1000000" label="Import" chooseLabel="Import" class="p-mr-2" /&gt;
&lt;Column field="color" header="Color" :sortable="true"&gt;&lt;/Column&gt; &lt;Button label="Export" icon="pi pi-upload" class="p-button-help" @click="exportCSV($event)" /&gt;
&lt;template #footer&gt; &lt;/template&gt;
&lt;div style="text-align:left"&gt; &lt;/Toolbar&gt;
&lt;Button abel="Add" icon="pi pi-plus" @click="addNewCar" /&gt;
&lt;DataTable ref="dt" :value="products" :selection.sync="selectedProducts" dataKey="id"
:paginator="true" :rows="10" :filters="filters"
paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown" :rowsPerPageOptions="[5,10,25]"
currentPageReportTemplate="Showing {first} to {last} of {totalRecords} products"&gt;
&lt;template #header&gt;
&lt;div class="table-header"&gt;
&lt;h5 class="p-m-0"&gt;Manage Products&lt;/h5&gt;
&lt;span class="p-input-icon-left"&gt;
&lt;i class="pi pi-search" /&gt;
&lt;InputText v-model="filters['global']" placeholder="Search..." /&gt;
&lt;/span&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;Column selectionMode="multiple" headerStyle="width: 3rem"&gt;&lt;/Column&gt;
&lt;Column field="code" header="Code" sortable&gt;&lt;/Column&gt;
&lt;Column field="name" header="Name" sortable&gt;&lt;/Column&gt;
&lt;Column header="Image"&gt;
&lt;template #body="slotProps"&gt;
&lt;img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.image" class="product-image" /&gt;
&lt;/template&gt;
&lt;/Column&gt;
&lt;Column field="price" header="Price" sortable&gt;
&lt;template #body="slotProps"&gt;
{{formatCurrency(slotProps.data.price)}}
&lt;/template&gt;
&lt;/Column&gt;
&lt;Column field="category" header="Category" sortable&gt;&lt;/Column&gt;
&lt;Column field="rating" header="Reviews" sortable&gt;
&lt;template #body="slotProps"&gt;
&lt;Rating :value="slotProps.data.rating" :readonly="true" :cancel="false" /&gt;
&lt;/template&gt;
&lt;/Column&gt;
&lt;Column field="inventoryStatus" header="Status" sortable&gt;
&lt;template #body="slotProps"&gt;
&lt;span :class="'product-badge status-' + slotProps.data.inventoryStatus.toLowerCase()"&gt;{{slotProps.data.inventoryStatus}}&lt;/span&gt;
&lt;/template&gt;
&lt;/Column&gt;
&lt;Column&gt;
&lt;template #body="slotProps"&gt;
&lt;Button icon="pi pi-pencil" class="p-button-rounded p-button-success p-mr-2" @click="editProduct(slotProps.data)" /&gt;
&lt;Button icon="pi pi-trash" class="p-button-rounded p-button-warning" @click="confirmDeleteProduct(slotProps.data)" /&gt;
&lt;/template&gt;
&lt;/Column&gt;
&lt;/DataTable&gt; &lt;/DataTable&gt;
&lt;/div&gt;
&lt;Dialog :visible.sync="dialogVisible" :style="{width: '400px'}" header="Car Details" :modal="true"&gt; &lt;Dialog :visible.sync="dialogVisible" :style="{width: '450px'}" header="Product Details" :modal="true" class="p-fluid"&gt;
&lt;div class="p-cardialog-content"&gt; &lt;img :src="'demo/images/product/' + product.image" :alt="product.image" class="product-image" v-if="product.image" /&gt;
&lt;div class="p-grid p-fluid" v-if="car"&gt; &lt;div class="p-field"&gt;
&lt;div class="p-col-4"&gt;&lt;label for="vin"&gt;Vin&lt;/label&gt;&lt;/div&gt; &lt;label for="name"&gt;Name&lt;/label&gt;
&lt;div class="p-col-8"&gt; &lt;InputText id="name" v-model.trim="product.name" required="true" autofocus /&gt;
&lt;InputText id="vin" v-model="car.vin" :disabled="true" autocomplete="off" /&gt; &lt;small id="name-help" class="p-invalid" v-if="submitted && !product.name"&gt;Name is required.&lt;/small&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;div class="p-field"&gt;
&lt;label for="description"&gt;Description&lt;/label&gt;
&lt;Textarea id="description" v-model="product.description" required="true" rows="3" cols="20" /&gt;
&lt;/div&gt;
&lt;div class="p-col-4"&gt;&lt;label for="year"&gt;Year&lt;/label&gt;&lt;/div&gt; &lt;div class="p-field"&gt;
&lt;div class="p-col-8"&gt; &lt;label class="p-mb-3"&gt;Category&lt;/label&gt;
&lt;InputText id="year" v-model="car.year" autocomplete="off" /&gt; &lt;div class="p-formgrid p-grid"&gt;
&lt;/div&gt; &lt;div class="p-field-radiobutton p-col-6"&gt;
&lt;RadioButton id="category1" name="category" value="Accessories" v-model="product.category" /&gt;
&lt;div class="p-col-4"&gt;&lt;label for="brand"&gt;Brand&lt;/label&gt;&lt;/div&gt; &lt;label for="category1"&gt;Accessories&lt;/label&gt;
&lt;div class="p-col-8"&gt; &lt;/div&gt;
&lt;InputText id="brand" v-model="car.brand" autocomplete="off" /&gt; &lt;div class="p-field-radiobutton p-col-6"&gt;
&lt;/div&gt; &lt;RadioButton id="category2" name="category" value="Clothing" v-model="product.category" /&gt;
&lt;label for="category2"&gt;Clothing&lt;/label&gt;
&lt;div class="p-col-4"&gt;&lt;label for="color"&gt;Color&lt;/label&gt;&lt;/div&gt; &lt;/div&gt;
&lt;div class="p-col-8"&gt; &lt;div class="p-field-radiobutton p-col-6"&gt;
&lt;InputText id="color" v-model="car.color" autocomplete="off" /&gt; &lt;RadioButton id="category3" name="category" value="Electronics" v-model="product.category" /&gt;
&lt;/div&gt; &lt;label for="category3"&gt;Electronics&lt;/label&gt;
&lt;/div&gt;
&lt;div class="p-field-radiobutton p-col-6"&gt;
&lt;RadioButton id="category4" name="category" value="Fitness" v-model="product.category" /&gt;
&lt;label for="category4"&gt;Fitness&lt;/label&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt;
&lt;template #footer&gt; &lt;div class="p-formgrid p-grid"&gt;
&lt;Button label="Delete" icon="pi pi-times" @click="deleteCar" class="p-button-danger" /&gt; &lt;div class="p-field p-col"&gt;
&lt;Button label="Save" icon="pi pi-check" @click="saveCar" class="p-button-success" /&gt; &lt;label for="price"&gt;Price&lt;/label&gt;
&lt;/template&gt; &lt;InputNumber id="price" v-model="product.price" mode="currency" currency="USD" locale="en-US" /&gt;
&lt;/div&gt;
&lt;div class="p-field p-col"&gt;
&lt;label for="quantity"&gt;Quantity&lt;/label&gt;
&lt;InputNumber id="quantity" v-model="product.quantity" integeronly /&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;template #footer&gt;
&lt;Button label="Cancel" icon="pi pi-times" class="p-button-text" @click="hideDialog"/&gt;
&lt;Button label="Save" icon="pi pi-check" class="p-button-text" @click="saveProduct" /&gt;
&lt;/template&gt;
&lt;/Dialog&gt;
&lt;Dialog :visible.sync="deleteProductDialogVisible" :style="{width: '450px'}" header="Confirm" :modal="true"&gt;
&lt;p v-if="product"&gt;Are you sure you want to delete &lt;b&gt;{{product.name}}&lt;/b&gt;?&lt;/p&gt;
&lt;template #footer&gt;
&lt;Button label="No" icon="pi pi-times" class="p-button-text" @click="deleteProductDialogVisible = false"/&gt;
&lt;Button label="Yes" icon="pi pi-check" class="p-button-text" @click="deleteProduct" /&gt;
&lt;/template&gt;
&lt;/Dialog&gt;
&lt;Dialog :visible.sync="deleteSelectedProductsDialogVisible" :style="{width: '450px'}" header="Confirm" :modal="true"&gt;
&lt;p v-if="product"&gt;Are you sure you want to delete selected products?&lt;/p&gt;
&lt;template #footer&gt;
&lt;Button label="No" icon="pi pi-times" class="p-button-text" @click="deleteSelectedProductsDialogVisible = false"/&gt;
&lt;Button label="Yes" icon="pi pi-check" class="p-button-text" @click="deleteSelectedProducts" /&gt;
&lt;/template&gt;
&lt;/Dialog&gt; &lt;/Dialog&gt;
</template> </template>
</CodeHighlight> </CodeHighlight>
<CodeHighlight lang="javascript"> <CodeHighlight lang="javascript">
import CarService from '../../service/CarService'; import ProductService from '../../service/ProductService';
export default { export default {
data() { data() {
return { return {
cars: null, products: null,
dialogVisible: false, dialogVisible: false,
car: null, deleteProductDialogVisible: false,
selectedCar: null deleteSelectedProductsDialogVisible: false,
product: {},
selectedProducts: null,
filters: {},
submitted: false
} }
}, },
carService: null, productService: null,
created() { created() {
this.carService = new CarService(); this.productService = new ProductService();
}, },
mounted() { mounted() {
this.carService.getCarsSmall().then(data => this.cars = data); this.productService.getProducts().then(data => this.products = data);
}, },
methods: { methods: {
addNewCar() { formatCurrency(value) {
this.car = {vin: this.generateVin(), year: '', brand: '', color: ''}; return value.toLocaleString('en-US', {style: 'currency', currency: 'USD'});
},
openNew() {
this.product = {};
this.dialogVisible = true; this.dialogVisible = true;
}, },
deleteCar() { hideDialog() {
let index = this.findIndexByVin(this.car.vin);
this.cars = this.cars.filter((val,i) => i !== index);
this.dialogVisible = false; this.dialogVisible = false;
this.car = null; this.submitted = false;
this.selectedCar = null;
}, },
saveCar() { saveProduct() {
let index = this.findIndexByVin(this.car.vin); this.submitted = true;
let cars = [...this.cars];
if (index === -1) if (this.product.id) {
cars.push(this.car); this.$set(this.products, this.findIndexById(this.product.id), this.product);
else this.$toast.add({severity:'success', summary: 'Product Updated', life: 3000});
cars[index] = this.car; }
else {
this.product.id = this.createId();
this.products.push(this.product);
this.$toast.add({severity:'success', summary: 'Product Created', life: 3000});
}
this.cars = cars;
this.dialogVisible = false; this.dialogVisible = false;
this.car = null; this.product = {};
this.selectedCar = null;
}, },
onRowSelect(event) { editProduct(product) {
this.car = {...event.data}; this.product = {...product};
this.dialogVisible = true; this.dialogVisible = true;
}, },
generateVin() { confirmDeleteProduct(product) {
let result = ''; this.product = product;
let characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'; this.deleteProductDialogVisible = true;
let charactersLength = characters.length;
for ( var i = 0; i &lt; 8; i++ ) {
result += characters.charAt(Math.floor(Math.random() * charactersLength));
}
return result;
}, },
findIndexByVin(vin) { deleteProduct() {
this.products = this.products.filter(val => val.id !== this.product.id);
this.deleteProductDialogVisible = false;
this.product = {};
this.$toast.add({severity:'success', summary: 'Product Deleted', life: 3000});
},
findIndexById(id) {
let index = -1; let index = -1;
for (let i = 0; i &lt; this.cars.length; i++) { for (let i = 0; i &lt; this.products.length; i++) {
if (this.cars[i].vin === vin) { if (this.products[i].id === id) {
index = i; index = i;
break; break;
} }
} }
return index; return index;
},
createId() {
let id = '';
var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
for ( var i = 0; i &lt; 5; i++ ) {
id += chars.charAt(Math.floor(Math.random() * chars.length));
}
return id;
},
exportCSV() {
this.$refs.dt.exportCSV();
},
confirmDeleteSelected() {
this.deleteSelectedProductsDialogVisible = true;
},
deleteSelectedProducts() {
this.products = this.products.filter(val => !this.selectedProducts.includes(val));
this.deleteSelectedProductsDialogVisible = false;
this.selectedProducts = null;
this.$toast.add({severity:'success', summary: 'Completed', life: 3000});
} }
} }
} }
@ -190,87 +374,121 @@ export default {
</template> </template>
<script> <script>
import CarService from '../../service/CarService'; import ProductService from '../../service/ProductService';
export default { export default {
data() { data() {
return { return {
cars: null, products: null,
dialogVisible: false, dialogVisible: false,
car: null, deleteProductDialogVisible: false,
selectedCar: null deleteSelectedProductsDialogVisible: false,
product: {},
selectedProducts: null,
filters: {},
submitted: false
} }
}, },
carService: null, productService: null,
created() { created() {
this.carService = new CarService(); this.productService = new ProductService();
}, },
mounted() { mounted() {
this.carService.getCarsSmall().then(data => this.cars = data); this.productService.getProducts().then(data => this.products = data);
}, },
methods: { methods: {
addNewCar() { formatCurrency(value) {
this.car = {vin: this.generateVin(), year: '', brand: '', color: ''}; return value.toLocaleString('en-US', {style: 'currency', currency: 'USD'});
},
openNew() {
this.product = {};
this.dialogVisible = true; this.dialogVisible = true;
}, },
deleteCar() { hideDialog() {
let index = this.findIndexByVin(this.car.vin);
this.cars = this.cars.filter((val,i) => i !== index);
this.dialogVisible = false; this.dialogVisible = false;
this.car = null; this.submitted = false;
this.selectedCar = null;
}, },
saveCar() { saveProduct() {
let index = this.findIndexByVin(this.car.vin); this.submitted = true;
let cars = [...this.cars];
if (index === -1) if (this.product.id) {
cars.push(this.car); this.$set(this.products, this.findIndexById(this.product.id), this.product);
else this.$toast.add({severity:'success', summary: 'Product Updated', life: 3000});
cars[index] = this.car; }
else {
this.product.id = this.createId();
this.products.push(this.product);
this.$toast.add({severity:'success', summary: 'Product Created', life: 3000});
}
this.cars = cars;
this.dialogVisible = false; this.dialogVisible = false;
this.car = null; this.product = {};
this.selectedCar = null;
}, },
onRowSelect(event) { editProduct(product) {
this.car = {...event.data}; this.product = {...product};
this.dialogVisible = true; this.dialogVisible = true;
}, },
generateVin() { confirmDeleteProduct(product) {
let result = ''; this.product = product;
let characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'; this.deleteProductDialogVisible = true;
let charactersLength = characters.length;
for ( var i = 0; i < 8; i++ ) {
result += characters.charAt(Math.floor(Math.random() * charactersLength));
}
return result;
}, },
findIndexByVin(vin) { deleteProduct() {
this.products = this.products.filter(val => val.id !== this.product.id);
this.deleteProductDialogVisible = false;
this.product = {};
this.$toast.add({severity:'success', summary: 'Product Deleted', life: 3000});
},
findIndexById(id) {
let index = -1; let index = -1;
for (let i = 0; i < this.cars.length; i++) { for (let i = 0; i < this.products.length; i++) {
if (this.cars[i].vin === vin) { if (this.products[i].id === id) {
index = i; index = i;
break; break;
} }
} }
return index; return index;
},
createId() {
let id = '';
var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
for ( var i = 0; i < 5; i++ ) {
id += chars.charAt(Math.floor(Math.random() * chars.length));
}
return id;
},
exportCSV() {
this.$refs.dt.exportCSV();
},
confirmDeleteSelected() {
this.deleteSelectedProductsDialogVisible = true;
},
deleteSelectedProducts() {
this.products = this.products.filter(val => !this.selectedProducts.includes(val));
this.deleteSelectedProductsDialogVisible = false;
this.selectedProducts = null;
this.$toast.add({severity:'success', summary: 'Completed', life: 3000});
} }
} }
} }
</script> </script>
<style scoped> <style scoped>
.p-cardialog-content { .table-header {
padding: 1rem; display: flex;
align-items: center;
justify-content: space-between;
} }
.p-cardialog-content .p-col-4 { .product-image {
padding: .75rem; width: 100px;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
} }
.p-cardialog-content .p-col-8 { .p-dialog .product-image {
padding: .5rem; width: 150px;
margin: 0 auto 2rem auto;
display: block;
} }
</style> </style>

8
src/views/datatable/DataTableRowExpandDemo.vue
View File

@ -35,7 +35,7 @@
<Rating :value="slotProps.data.rating" :readonly="true" :cancel="false" /> <Rating :value="slotProps.data.rating" :readonly="true" :cancel="false" />
</template> </template>
</Column> </Column>
<Column header="Status" sortable> <Column field="inventoryStatus" header="Status" sortable>
<template #body="slotProps"> <template #body="slotProps">
<span :class="'product-badge status-' + slotProps.data.inventoryStatus.toLowerCase()">{{slotProps.data.inventoryStatus}}</span> <span :class="'product-badge status-' + slotProps.data.inventoryStatus.toLowerCase()">{{slotProps.data.inventoryStatus}}</span>
</template> </template>
@ -52,7 +52,7 @@
{{formatCurrency(slotProps.data.amount)}} {{formatCurrency(slotProps.data.amount)}}
</template> </template>
</Column> </Column>
<Column header="Status" sortable> <Column field="status" header="Status" sortable>
<template #body="slotProps"> <template #body="slotProps">
<span :class="'order-badge order-' + slotProps.data.status.toLowerCase()">{{slotProps.data.status}}</span> <span :class="'order-badge order-' + slotProps.data.status.toLowerCase()">{{slotProps.data.status}}</span>
</template> </template>
@ -100,7 +100,7 @@
&lt;Rating :value="slotProps.data.rating" :readonly="true" :cancel="false" /&gt; &lt;Rating :value="slotProps.data.rating" :readonly="true" :cancel="false" /&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/Column&gt; &lt;/Column&gt;
&lt;Column header="Status" sortable&gt; &lt;Column field="inventoryStatus" header="Status" sortable&gt;
&lt;template #body="slotProps"&gt; &lt;template #body="slotProps"&gt;
&lt;span :class="'product-badge status-' + slotProps.data.inventoryStatus.toLowerCase()"&gt;{{slotProps.data.inventoryStatus}}&lt;/span&gt; &lt;span :class="'product-badge status-' + slotProps.data.inventoryStatus.toLowerCase()"&gt;{{slotProps.data.inventoryStatus}}&lt;/span&gt;
&lt;/template&gt; &lt;/template&gt;
@ -117,7 +117,7 @@
{{formatCurrency(slotProps.data.amount)}} {{formatCurrency(slotProps.data.amount)}}
&lt;/template&gt; &lt;/template&gt;
&lt;/Column&gt; &lt;/Column&gt;
&lt;Column header="Status" sortable&gt; &lt;Column field="status" header="Status" sortable&gt;
&lt;template #body="slotProps"&gt; &lt;template #body="slotProps"&gt;
&lt;span :class="'order-badge order-' + slotProps.data.status.toLowerCase()"&gt;{{slotProps.data.status}}&lt;/span&gt; &lt;span :class="'order-badge order-' + slotProps.data.status.toLowerCase()"&gt;{{slotProps.data.status}}&lt;/span&gt;
&lt;/template&gt; &lt;/template&gt;

12
src/views/datatable/DataTableRowGroupDemo.vue
View File

@ -27,7 +27,7 @@
<span :class="'customer-badge status-' + slotProps.data.status">{{slotProps.data.status}}</span> <span :class="'customer-badge status-' + slotProps.data.status">{{slotProps.data.status}}</span>
</template> </template>
</Column> </Column>
<Column field="date" header="date"></Column> <Column field="date" header="Date"></Column>
<template #groupheader="slotProps"> <template #groupheader="slotProps">
<img :alt="slotProps.data.representative.name" :src="'demo/images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" /> <img :alt="slotProps.data.representative.name" :src="'demo/images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" />
<span class="image-text">{{slotProps.data.representative.name}}</span> <span class="image-text">{{slotProps.data.representative.name}}</span>
@ -60,7 +60,7 @@
<span :class="'customer-badge status-' + slotProps.data.status">{{slotProps.data.status}}</span> <span :class="'customer-badge status-' + slotProps.data.status">{{slotProps.data.status}}</span>
</template> </template>
</Column> </Column>
<Column field="date" header="date"></Column> <Column field="date" header="Date"></Column>
<template #groupheader="slotProps"> <template #groupheader="slotProps">
<img :alt="slotProps.data.representative.name" :src="'demo/images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" /> <img :alt="slotProps.data.representative.name" :src="'demo/images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" />
<span class="image-text">{{slotProps.data.representative.name}}</span> <span class="image-text">{{slotProps.data.representative.name}}</span>
@ -100,7 +100,7 @@
<span :class="'customer-badge status-' + slotProps.data.status">{{slotProps.data.status}}</span> <span :class="'customer-badge status-' + slotProps.data.status">{{slotProps.data.status}}</span>
</template> </template>
</Column> </Column>
<Column field="date" header="date"></Column> <Column field="date" header="Date"></Column>
</DataTable> </DataTable>
</div> </div>
</div> </div>
@ -129,7 +129,7 @@
&lt;span :class="'customer-badge status-' + slotProps.data.status"&gt;{{slotProps.data.status}}&lt;/span&gt; &lt;span :class="'customer-badge status-' + slotProps.data.status"&gt;{{slotProps.data.status}}&lt;/span&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/Column&gt; &lt;/Column&gt;
&lt;Column field="date" header="date"&gt;&lt;/Column&gt; &lt;Column field="date" header="Date"&gt;&lt;/Column&gt;
&lt;template #groupheader="slotProps"&gt; &lt;template #groupheader="slotProps"&gt;
&lt;img :alt="slotProps.data.representative.name" :src="'demo/images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" /&gt; &lt;img :alt="slotProps.data.representative.name" :src="'demo/images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" /&gt;
&lt;span class="image-text"&gt;{{slotProps.data.representative.name}}&lt;/span&gt; &lt;span class="image-text"&gt;{{slotProps.data.representative.name}}&lt;/span&gt;
@ -162,7 +162,7 @@
&lt;span :class="'customer-badge status-' + slotProps.data.status"&gt;{{slotProps.data.status}}&lt;/span&gt; &lt;span :class="'customer-badge status-' + slotProps.data.status"&gt;{{slotProps.data.status}}&lt;/span&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/Column&gt; &lt;/Column&gt;
&lt;Column field="date" header="date"&gt;&lt;/Column&gt; &lt;Column field="date" header="Date"&gt;&lt;/Column&gt;
&lt;template #groupheader="slotProps"&gt; &lt;template #groupheader="slotProps"&gt;
&lt;img :alt="slotProps.data.representative.name" :src="'demo/images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" /&gt; &lt;img :alt="slotProps.data.representative.name" :src="'demo/images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" /&gt;
&lt;span class="image-text"&gt;{{slotProps.data.representative.name}}&lt;/span&gt; &lt;span class="image-text"&gt;{{slotProps.data.representative.name}}&lt;/span&gt;
@ -202,7 +202,7 @@
&lt;span :class="'customer-badge status-' + slotProps.data.status"&gt;{{slotProps.data.status}}&lt;/span&gt; &lt;span :class="'customer-badge status-' + slotProps.data.status"&gt;{{slotProps.data.status}}&lt;/span&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/Column&gt; &lt;/Column&gt;
&lt;Column field="date" header="date"&gt;&lt;/Column&gt; &lt;Column field="date" header="Date"&gt;&lt;/Column&gt;
&lt;/DataTable&gt; &lt;/DataTable&gt;
&lt;/div&gt; &lt;/div&gt;
</template> </template>

2
src/views/dialog/DialogDemo.vue
View File

@ -11,7 +11,7 @@
<div class="card"> <div class="card">
<h5>Basic</h5> <h5>Basic</h5>
<Button label="Show" icon="pi pi-external-link" @click="openBasic" /> <Button label="Show" icon="pi pi-external-link" @click="openBasic" />
<Dialog header="Header " :visible.sync="displayBasic" :style="{width: '50vw'}"> <Dialog header="Header" :visible.sync="displayBasic" :style="{width: '50vw'}">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat