From 13c271fe9723fa18d9f942e903bdde09b766556d Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Sat, 25 May 2024 18:11:15 +0300
Subject: [PATCH] Remove extra demo

---
 doc/datatable/edit/FilterSortEditDoc.vue | 312 -----------------------
 pages/datatable/index.vue                |   6 -
 2 files changed, 318 deletions(-)
 delete mode 100644 doc/datatable/edit/FilterSortEditDoc.vue

diff --git a/doc/datatable/edit/FilterSortEditDoc.vue b/doc/datatable/edit/FilterSortEditDoc.vue
deleted file mode 100644
index 0f068f40a..000000000
--- a/doc/datatable/edit/FilterSortEditDoc.vue
+++ /dev/null
@@ -1,312 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Cell Editing with Sorting and Filter</p>
-    </DocSectionText>
-    <DeferredDemo @load="loadDemoData">
-        <div class="card p-fluid">
-            <DataTable
-                v-model:filters="filters"
-                :value="products"
-                editMode="cell"
-                @cell-edit-complete="onCellEditComplete"
-                filterDisplay="row"
-                :pt="{
-                    table: { style: 'min-width: 50rem' },
-                    column: {
-                        bodycell: ({ state }) => ({
-                            class: [{ 'pt-0 pb-0': state['d_editing'] }]
-                        })
-                    }
-                }"
-            >
-                <Column v-for="col of columns" :key="col.field" :field="col.field" :header="col.header" style="width: 25%" sortable filter>
-                    <template #filter="{ filterModel, filterCallback }">
-                        <InputText v-model="filterModel.value" v-tooltip.top.focus="'Hit enter key to filter'" type="text" @keydown.enter="filterCallback()" />
-                    </template>
-                    <template #editor="{ data, field }">
-                        <InputText v-model="data[field]" autofocus />
-                    </template>
-                </Column>
-            </DataTable>
-        </div>
-    </DeferredDemo>
-    <DocSectionCode :code="code" :service="['ProductService']" :dependencies="{ sass: '1.45.0', 'sass-loader': '8.0.2' }" />
-</template>
-
-<script>
-import { ProductService } from '@/service/ProductService';
-import { FilterMatchMode } from 'primevue/api';
-
-export default {
-    data() {
-        return {
-            products: null,
-            columns: null,
-            filters: {
-                code: { value: null, matchMode: FilterMatchMode.STARTS_WITH },
-                name: { value: null, matchMode: FilterMatchMode.STARTS_WITH },
-                quantity: { value: null, matchMode: FilterMatchMode.STARTS_WITH },
-                price: { value: null, matchMode: FilterMatchMode.STARTS_WITH }
-            },
-            code: {
-                basic: `
-<DataTable  v-model:filters="filters" :value="products" editMode="cell" @cell-edit-complete="onCellEditComplete"  filterDisplay="row"
-    :pt="{
-        table: { style: 'min-width: 50rem' },
-        column: {
-            bodycell: ({ state }) => ({
-                class: [{ 'pt-0 pb-0': state['d_editing'] }]
-            })
-        }
-    }"
->
-    <Column v-for="col of columns" :key="col.field" :field="col.field" :header="col.header" style="width: 25%" sortable filter>
-        <template #filter="{ filterModel, filterCallback }">
-            <InputText v-model="filterModel.value" v-tooltip.top.focus="'Hit enter key to filter'" type="text" @keydown.enter="filterCallback()" />
-        </template>
-        <template #editor="{ data, field }">
-            <InputText v-model="data[field]" autofocus />
-        </template>
-    </Column>
-</DataTable>
-`,
-                options: `
-<template>
-    <div class="card p-fluid">
-        <DataTable v-model:filters="filters" :value="products" editMode="cell" @cell-edit-complete="onCellEditComplete" filterDisplay="row"
-            :pt="{
-                table: { style: 'min-width: 50rem' },
-                column: {
-                    bodycell: ({ state }) => ({
-                        class: [{ 'pt-0 pb-0': state['d_editing'] }]
-                    })
-                }
-            }"
-        >
-            <Column v-for="col of columns" :key="col.field" :field="col.field" :header="col.header" style="width: 25%" sortable filter>
-                <template #filter="{ filterModel, filterCallback }">
-                    <InputText v-model="filterModel.value" v-tooltip.top.focus="'Hit enter key to filter'" type="text" @keydown.enter="filterCallback()" />
-                </template>
-                <template #editor="{ data, field }">
-                    <InputText v-model="data[field]" autofocus />
-                </template>
-            </Column>
-        </DataTable>
-    </div>
-</template>
-
-<script>
-import { FilterMatchMode } from 'primevue/api';
-import { ProductService } from '@/service/ProductService';
-
-export default {
-    data() {
-        return {
-            products: null,
-            columns: null,
-            filters: {
-                code: { value: null, matchMode: FilterMatchMode.STARTS_WITH },
-                name: { value: null, matchMode: FilterMatchMode.STARTS_WITH },
-                quantity: { value: null, matchMode: FilterMatchMode.STARTS_WITH },
-                price: { value: null, matchMode: FilterMatchMode.STARTS_WITH }
-            }
-        };
-    },
-    created() {
-        this.columns = [
-            {field: 'code', header: 'Code'},
-            {field: 'name', header: 'Name'},
-            {field: 'quantity', header: 'Quantity'},
-            {field: 'price', header: 'Price'}
-        ];
-    },
-    mounted() {
-        ProductService.getProductsMini().then((data) => (this.products = data));
-    },
-    methods: {
-        onCellEditComplete(event) {
-            let { data, newValue, field } = event;
-
-            switch (field) {
-                case 'quantity':
-                case 'price':
-                    if (this.isPositiveInteger(newValue))
-                        data[field] = newValue;
-                    else
-                        event.preventDefault();
-                break;
-
-                default:
-                    if (newValue.trim().length > 0)
-                        data[field] = newValue;
-                    else
-                        event.preventDefault();
-                break;
-            }
-        },
-        isPositiveInteger(val) {
-            let str = String(val);
-
-            str = str.trim();
-
-            if (!str) {
-                return false;
-            }
-
-            str = str.replace(/^0+/, '') || '0';
-            var n = Math.floor(Number(str));
-
-            return n !== Infinity && String(n) === str && n >= 0;
-        }
-    }
-};
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card p-fluid">
-        <DataTable v-model:filters="filters" :value="products" editMode="cell" @cell-edit-complete="onCellEditComplete" filterDisplay="row"
-            :pt="{
-                table: { style: 'min-width: 50rem' },
-                column: {
-                    bodycell: ({ state }) => ({
-                        class: [{ 'pt-0 pb-0': state['d_editing'] }]
-                    })
-                }
-            }"
-        >
-            <Column v-for="col of columns" :key="col.field" :field="col.field" :header="col.header" style="width: 25%" sortable filter>
-                <template #filter="{ filterModel, filterCallback }">
-                    <InputText v-model="filterModel.value" v-tooltip.top.focus="'Hit enter key to filter'" type="text" @keydown.enter="filterCallback()" />
-                </template>
-                <template #editor="{ data, field }">
-                    <InputText v-model="data[field]" autofocus />
-                </template>
-            </Column>
-        </DataTable>
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue';
-import { FilterMatchMode } from 'primevue/api';
-import { ProductService } from '@/service/ProductService';
-
-const products = ref();
-const columns = ref([
-    {field: 'code', header: 'Code'},
-    {field: 'name', header: 'Name'},
-    {field: 'quantity', header: 'Quantity'},
-    {field: 'price', header: 'Price'}
-]);
-const filters = ref({
-    'code': {value: null, matchMode: FilterMatchMode.STARTS_WITH},
-    'name': {value: null, matchMode: FilterMatchMode.STARTS_WITH},
-    'quantity': {value: null, matchMode: FilterMatchMode.STARTS_WITH},
-    'price': {value: null, matchMode: FilterMatchMode.STARTS_WITH}
-});
-
-onMounted(() => {
-    ProductService.getProductsMini().then((data) => (products.value = data));
-});
-
-const onCellEditComplete = (event) => {
-    let { data, newValue, field } = event;
-
-    switch (field) {
-        case 'quantity':
-        case 'price':
-            if (isPositiveInteger(newValue))
-                data[field] = newValue;
-            else
-                event.preventDefault();
-        break;
-
-        default:
-            if (newValue.trim().length > 0)
-                data[field] = newValue;
-            else
-                event.preventDefault();
-        break;
-    }
-};
-
-const  isPositiveInteger = (val) => {
-    let str = String(val);
-
-    str = str.trim();
-
-    if (!str) {
-        return false;
-    }
-
-    str = str.replace(/^0+/, '') || '0';
-    var n = Math.floor(Number(str));
-
-    return n !== Infinity && String(n) === str && n >= 0;
-};
-
-<\/script>
-`,
-                data: `
-{
-    id: '1000',
-    code: 'f230fh0g3',
-    name: 'Bamboo Watch',
-    description: 'Product Description',
-    image: 'bamboo-watch.jpg',
-    price: 65,
-    category: 'Accessories',
-    quantity: 24,
-    inventoryStatus: 'INSTOCK',
-    rating: 5
-},
-...`
-            }
-        };
-    },
-    created() {
-        this.columns = [
-            { field: 'code', header: 'Code' },
-            { field: 'name', header: 'Name' },
-            { field: 'quantity', header: 'Quantity' },
-            { field: 'price', header: 'Price' }
-        ];
-    },
-    methods: {
-        loadDemoData() {
-            ProductService.getProductsMini().then((data) => (this.products = data));
-        },
-        onCellEditComplete(event) {
-            let { data, newValue, field } = event;
-
-            switch (field) {
-                case 'quantity':
-                case 'price':
-                    if (this.isPositiveInteger(newValue)) data[field] = newValue;
-                    else event.preventDefault();
-                    break;
-
-                default:
-                    if (newValue.trim().length > 0) data[field] = newValue;
-                    else event.preventDefault();
-                    break;
-            }
-        },
-        isPositiveInteger(val) {
-            let str = String(val);
-
-            str = str.trim();
-
-            if (!str) {
-                return false;
-            }
-
-            str = str.replace(/^0+/, '') || '0';
-            var n = Math.floor(Number(str));
-
-            return n !== Infinity && String(n) === str && n >= 0;
-        }
-    }
-};
-</script>
diff --git a/pages/datatable/index.vue b/pages/datatable/index.vue
index 1adec7206..4f26ca660 100755
--- a/pages/datatable/index.vue
+++ b/pages/datatable/index.vue
@@ -31,7 +31,6 @@ import TemplateDoc from '@/doc/datatable/TemplateDoc.vue';
 import ExpandModeDoc from '@/doc/datatable/colresize/ExpandModeDoc.vue';
 import FitModeDoc from '@/doc/datatable/colresize/FitModeDoc.vue';
 import CellEditDoc from '@/doc/datatable/edit/CellEditDoc.vue';
-import FilterSortEditDoc from '@/doc/datatable/edit/FilterSortEditDoc.vue';
 import RowEditDoc from '@/doc/datatable/edit/RowEditDoc.vue';
 import AdvancedFilterDoc from '@/doc/datatable/filter/AdvancedFilterDoc.vue';
 import BasicFilterDoc from '@/doc/datatable/filter/BasicFilterDoc.vue';
@@ -207,11 +206,6 @@ export default {
                             id: 'row_edit',
                             label: 'Row',
                             component: RowEditDoc
-                        },
-                        {
-                            id: 'cell_edit_filter_sort',
-                            label: 'Filter & Sort Cell Edit',
-                            component: FilterSortEditDoc
                         }
                     ]
                 },