From 53dab14b880957e72bd6dc89db4e0f0df610f725 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Thu, 26 Sep 2024 12:00:05 +0300
Subject: [PATCH] Add new row selection demo

---
 .../rowselection/ColumnRowSelectionDoc.vue    | 143 ++++++++++++++++++
 apps/showcase/pages/datatable/index.vue       |   6 +
 2 files changed, 149 insertions(+)
 create mode 100644 apps/showcase/doc/datatable/rowselection/ColumnRowSelectionDoc.vue

diff --git a/apps/showcase/doc/datatable/rowselection/ColumnRowSelectionDoc.vue b/apps/showcase/doc/datatable/rowselection/ColumnRowSelectionDoc.vue
new file mode 100644
index 000000000..146248892
--- /dev/null
+++ b/apps/showcase/doc/datatable/rowselection/ColumnRowSelectionDoc.vue
@@ -0,0 +1,143 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Row selection with an element inside a column is implemented with templating.</p>
+    </DocSectionText>
+    <DeferredDemo @load="loadDemoData">
+        <div class="card">
+            <DataTable :value="products" tableStyle="min-width: 50rem">
+                <Column field="code" header="Code"></Column>
+                <Column field="name" header="Name"></Column>
+                <Column field="category" header="Category"></Column>
+                <Column field="quantity" header="Quantity"></Column>
+                <Column class="w-24 !text-end">
+                    <template #body="{ data }">
+                        <Button icon="pi pi-search" @click="selectRow(data)" severity="secondary" rounded></Button>
+                    </template>
+                </Column>
+            </DataTable>
+        </div>
+    </DeferredDemo>
+    <DocSectionCode :code="code" :service="['ProductService']" />
+</template>
+
+<script>
+import { ProductService } from '@/service/ProductService';
+
+export default {
+    data() {
+        return {
+            products: null,
+            code: {
+                basic: `
+<DataTable :value="products" tableStyle="min-width: 50rem">
+    <Column field="code" header="Code"></Column>
+    <Column field="name" header="Name"></Column>
+    <Column field="category" header="Category"></Column>
+    <Column field="quantity" header="Quantity"></Column>
+    <Column class="w-24 !text-end">
+        <template #body="{ data }">
+            <Button icon="pi pi-search" @click="selectRow(data)" severity="secondary" rounded></Button>
+        </template>
+    </Column>
+</DataTable>
+`,
+                options: `
+<template>
+    <div class="card">
+        <DataTable :value="products" tableStyle="min-width: 50rem">
+            <Column field="code" header="Code"></Column>
+            <Column field="name" header="Name"></Column>
+            <Column field="category" header="Category"></Column>
+            <Column field="quantity" header="Quantity"></Column>
+            <Column class="w-24 !text-end">
+                <template #body="{ data }">
+                    <Button icon="pi pi-search" @click="selectRow(data)" severity="secondary" rounded></Button>
+                </template>
+            </Column>
+        </DataTable>
+        <Toast/>
+    </div>
+</template>
+
+<script>
+import { ProductService } from '@/service/ProductService';
+
+export default {
+    data() {
+        return {
+            products: null
+        };
+    },
+    mounted() {
+        ProductService.getProductsMini().then((data) => (this.products = data));
+    },
+    methods: {
+        selectRow(data) {
+            this.$toast.add({ severity: 'info', summary: data.name, detail: data.inventoryStatus + ' | $' + data.price, life: 3000 });
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card">
+        <DataTable :value="products" tableStyle="min-width: 50rem">
+            <Column field="code" header="Code"></Column>
+            <Column field="name" header="Name"></Column>
+            <Column field="category" header="Category"></Column>
+            <Column field="quantity" header="Quantity"></Column>
+            <Column class="w-24 !text-end">
+                <template #body="{ data }">
+                    <Button icon="pi pi-search" @click="selectRow(data)" severity="secondary" rounded></Button>
+                </template>
+            </Column>
+        </DataTable>
+        <Toast />
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { useToast } from 'primevue/usetoast';
+import { ProductService } from '@/service/ProductService';
+
+onMounted(() => {
+    ProductService.getProductsMini().then((data) => (products.value = data));
+});
+
+const products = ref();
+const toast = useToast();
+const selectRow = (data) => {
+    toast.add({ severity: 'info', summary: data.name, detail: data.inventoryStatus + ' | $' + data.price, life: 3000 });
+};
+<\/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
+},
+...
+        `
+            }
+        };
+    },
+    methods: {
+        loadDemoData() {
+            ProductService.getProductsMini().then((data) => (this.products = data));
+        },
+        selectRow(data) {
+            this.$toast.add({ severity: 'info', summary: data.name, detail: data.inventoryStatus + ' | $' + data.price, life: 3000 });
+        }
+    }
+};
+</script>
diff --git a/apps/showcase/pages/datatable/index.vue b/apps/showcase/pages/datatable/index.vue
index 34eef58dd..ff4f75433 100755
--- a/apps/showcase/pages/datatable/index.vue
+++ b/apps/showcase/pages/datatable/index.vue
@@ -41,6 +41,7 @@ import ExpandableRowGroupDoc from '@/doc/datatable/rowgroup/ExpandableRowGroupDo
 import RowSpanRowGroupDoc from '@/doc/datatable/rowgroup/RowSpanRowGroupDoc.vue';
 import SubHeaderRowGroupDoc from '@/doc/datatable/rowgroup/SubHeaderRowGroupDoc.vue';
 import CheckboxRowSelectionDoc from '@/doc/datatable/rowselection/CheckboxRowSelectionDoc.vue';
+import ColumnRowSelectionDoc from '@/doc/datatable/rowselection/ColumnRowSelectionDoc.vue';
 import MultipleRowsSelectionDoc from '@/doc/datatable/rowselection/MultipleRowsSelectionDoc.vue';
 import RadioButtonRowSelectionDoc from '@/doc/datatable/rowselection/RadioButtonRowSelectionDoc.vue';
 import RowSelectEventsDoc from '@/doc/datatable/rowselection/RowSelectEventsDoc.vue';
@@ -181,6 +182,11 @@ export default {
                             label: 'Checkbox',
                             component: CheckboxRowSelectionDoc
                         },
+                        {
+                            id: 'column_row_selection',
+                            label: 'Column',
+                            component: ColumnRowSelectionDoc
+                        },
                         {
                             id: 'row_selection_events',
                             label: 'Events',