{"version":3,"sources":["webpack:///./src/pages/Test2.vue?709e","webpack:///./src/pages/Test.vue","webpack:///./src/pages/Test2.vue","webpack:///./src/pages/Test2.vue?f964","webpack:///./src/pages/Test.vue?35c4"],"names":["table-name","table-data","tableData","class","tableName","label","icon","placeholder","globalFilter","options","perPageOptions","value","perPage","changePerPage","paginator","rows","globalFilterFields","selectionMode","selection","selectedRows","onSelectionChange","rowHover","field","header","sortable","body","statusBodyTemplate","totalRecords","length","onPageChange","name","props","type","String","required","Array","data","crudOptions","methods","event","this","rowData","status","toLowerCase","__exports__","id","email","components","Test2","render"],"mappings":"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","file":"js/chunk-1db2545b.cf9e64e7.js","sourcesContent":["export * from \"-!../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--7-oneOf-1-0!../../node_modules/css-loader/dist/cjs.js??ref--7-oneOf-1-1!../../node_modules/vue-loader-v16/dist/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--7-oneOf-1-2!../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../node_modules/vue-loader-v16/dist/index.js??ref--1-1!./Test2.vue?vue&type=style&index=0&id=d6cb349a&scoped=true&lang=css\"","<template>\n  <Test2 table-name=\"sgkfdsgdf dfg\" :table-data=\"tableData\"></Test2>\n</template>\n\n<script>\nimport Test2 from './Test2';\n\nexport default {\n  name: 'DataTable',\n  data(){\n    return {\n      tableData: [\n        { id: 1, name: 'John Doe', email: 'johndoe@example.com', status: 'Active' },\n        { id: 2, name: 'Jane Smith', email: 'janesmith@example.com', status: 'Inactive' },\n        { id: 3, name: 'Bob Johnson', email: 'bobjohnson@example.com', status: 'Active' },\n        { id: 4, name: 'Alice Brown', email: 'alicebrown@example.com', status: 'Inactive' },\n        { id: 5, name: 'David Lee', email: 'davidlee@example.com', status: 'Active' },\n      ]\n    }\n  },\n  components:{\n    Test2\n  },\n\n};\n</script>\n","<template>\n  <div v-if=\"tableName\" class=\"datatable-container\">\n    <!-- Row 1: Table Name -->\n    <div class=\"datatable-header\">{{ tableName }}</div>\n\n    <!-- Row 2: CRUD Toolbar -->\n    <Toolbar>\n      <div class=\"p-toolbar-group-left\">\n        sdfsdf\n        <Button label=\"Select All\" icon=\"pi pi-check-square\"/>\n        <Button label=\"Add\" icon=\"pi pi-plus\"/>\n        <Button label=\"Edit\" icon=\"pi pi-pencil\"/>\n        <Button label=\"Delete\" icon=\"pi pi-trash\"/>\n<!--        <Dropdown :options=\"crudOptions\" placeholder=\"More\">-->\n<!--          <template v-slot:option=\"option\">-->\n<!--            <i :class=\"'pi pi-' + option.value.icon\"></i>-->\n<!--            <span>{{ option.value.label }}</span>-->\n<!--          </template>-->\n<!--        </Dropdown>-->\n      </div>\n\n    </Toolbar>\n\n    <!-- Row 3: Search bar with count of results per page -->\n    <div class=\"p-toolbar datatable-subheader\">\n      <div class=\"p-inputgroup px-2 w-30rem\">\n        <span class=\"p-inputgroup-addon\"><i class=\"pi pi-search\"></i></span>\n        <InputText placeholder=\"Search\" v-model=\"globalFilter\"/>\n      </div>\n\n      <div class=\"p-inputgroup px-2 w-25rem\">\n        <span class=\"p-inputgroup-addon\">Results per page:</span>\n        <Dropdown :options=\"perPageOptions\" :value=\"perPage\" @change=\"changePerPage\"/>\n      </div>\n    </div>\n\n    <!-- Row 4: DataTable -->\n    <DataTable :value=\"tableData\" :paginator=\"true\" :rows=\"perPage\" :globalFilterFields=\"globalFilterFields\"\n               :selectionMode=\"selectionMode\"\n               :selection=\"selectedRows\" @selectionChange=\"onSelectionChange\" :rowHover=\"true\">\n      <Column field=\"id\" header=\"ID\" sortable/>\n      <Column field=\"name\" header=\"Name\" sortable/>\n      <Column field=\"email\" header=\"Email\" sortable/>\n      <Column field=\"status\" header=\"Status\" :body=\"statusBodyTemplate\"/>\n    </DataTable>\n\n    <!-- Row 5: Paginator -->\n    <Paginator :totalRecords=\"tableData.length\" :rows=\"perPage\" @pageChange=\"onPageChange\"/>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'DataTable',\n  props: {\n    tableName: {\n      type: String,\n      required: true,\n    },\n    tableData: {\n      type: Array,\n      required: true,\n    },\n  },\n  data() {\n    return {\n      globalFilter: '',\n      perPage: 10,\n      perPageOptions: [10, 25, 50],\n      crudOptions: [\n        {label: 'Import', icon: 'upload'},\n        {label: 'Export', icon: 'download'},\n        {label: 'Print', icon: 'print'},\n        {label: 'Filter', icon: 'pi pi-filter'},\n        {label: 'Update', icon: 'pi pi-refresh'},\n        {label: 'Three dots', icon: 'pi pi-ellipsis-h'},\n      ],\n      selectedRows: [],\n      selectionMode: 'multiple',\n      globalFilterFields: ['name', 'email'],\n    };\n  },\n  methods: {\n    onPageChange(event) {\n      this.perPage = event.rows;\n    },\n    changePerPage(event) {\n      this.perPage = event.value;\n    },\n    onSelectionChange(event) {\n      this.selectedRows = event.value;\n    },\n    statusBodyTemplate(rowData) {\n      const status = rowData.status.toLowerCase();\n      return (\n        <span class={`status-badge ${status}`}>\n          <i class={`pi pi-${status === 'active' ? 'check' : 'times'}`}></i>\n          {rowData.status}\n        </span>\n      );\n    },\n  },\n};\n</script>\n\n<style scoped>\n.datatable-container {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}\n\n.datatable-header {\n  font-size: 1.5rem;\n  font-weight: bold;\n  margin: 0.5rem 0;\n}\n\n.datatable-subheader {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: 0.5rem;\n}\n\n.status-badge {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0.25rem 0.5rem;\n  font-size: 0.9rem;\n  font-weight: bold;\n  border-radius: 0.25rem;\n  text-transform: capitalize;\n\n  &.active {\n    background-color: #c8e6c9;\n    color: #43a047;\n  }\n\n  &.inactive {\n    background-color: #ffcdd2;\n    color: #e53935;\n  }\n}\n\n.p-dropdown {\n  width: 150px;\n}\n</style>\n","import { render } from \"./Test2.vue?vue&type=template&id=d6cb349a&scoped=true\"\nimport script from \"./Test2.vue?vue&type=script&lang=js\"\nexport * from \"./Test2.vue?vue&type=script&lang=js\"\n\nimport \"./Test2.vue?vue&type=style&index=0&id=d6cb349a&scoped=true&lang=css\"\n\nimport exportComponent from \"/var/www/html/smart/vue/node_modules/vue-loader-v16/dist/exportHelper.js\"\nconst __exports__ = /*#__PURE__*/exportComponent(script, [['render',render],['__scopeId',\"data-v-d6cb349a\"]])\n\nexport default __exports__","import { render } from \"./Test.vue?vue&type=template&id=10baafb1\"\nimport script from \"./Test.vue?vue&type=script&lang=js\"\nexport * from \"./Test.vue?vue&type=script&lang=js\"\n\nimport exportComponent from \"/var/www/html/smart/vue/node_modules/vue-loader-v16/dist/exportHelper.js\"\nconst __exports__ = /*#__PURE__*/exportComponent(script, [['render',render]])\n\nexport default __exports__"],"sourceRoot":""}