Merge pull request #21 from muhimasri/internal-restructure

Internal restructure for supporting ids
muhimasri · Feb 26, 2022 · f059e8f · f059e8f
2 parents 4f5d7ca + 30eaa69
commit f059e8f
Show file tree

Hide file tree

Showing 13 changed files with 26,083 additions and 3,084 deletions.
diff --git a/README.md b/README.md
diff --git a/dev/examples/add-remove-update.vue b/dev/examples/add-remove-update.vue
@@ -0,0 +1,240 @@
+<template>
+  <div class="table-container">
+    <b-button variant="success" @click="handleAdd()">Add</b-button>
+    <b-editable-table
+      disableDefaultEdit
+      :rowUpdate="rowUpdate"
+      :editMode="'row'"
+      bordered
+      class="editable-table"
+      v-model="items"
+      :fields="fields"
+    >
+      <template #cell(isActive)="data">
+        <span v-if="data.value">Yes</span>
+        <span v-else>No</span>
+      </template>
+      <template #cell(edit)="data">
+        <div v-if="data.isEdit">
+          <BIconX class="edit-icon" @click="handleSubmit(data, false)"></BIconX>
+          <BIconCheck
+            class="edit-icon"
+            @click="handleSubmit(data, true)"
+          ></BIconCheck>
+        </div>
+        <BIconPencil
+          v-else
+          class="edit-icon"
+          @click="handleEdit(data, true)"
+        ></BIconPencil>
+      </template>
+      <template #cell(delete)="data">
+        <BIconTrash
+          class="remove-icon"
+          @click="handleDelete(data)"
+        ></BIconTrash>
+      </template>
+    </b-editable-table>
+    <pre>
+      {{ items }}
+    </pre>
+  </div>
+</template>
+
+<script>
+import BEditableTable from "@/b-editable-table.vue";
+import {
+  BIconTrash,
+  BIconPencil,
+  BIconX,
+  BIconCheck,
+  BButton,
+} from "bootstrap-vue";
+export default {
+  components: {
+    BEditableTable,
+    BIconX,
+    BIconTrash,
+    BIconPencil,
+    BIconCheck,
+    BButton,
+  },
+  data() {
+    return {
+      fields: [
+        { key: "delete", label: "" },
+        {
+          key: "name",
+          label: "Name",
+          type: "text",
+          editable: true,
+          placeholder: "Enter Name...",
+          class: "name-col",
+        },
+        {
+          key: "department",
+          label: "Department",
+          type: "select",
+          editable: true,
+          class: "department-col",
+          options: [
+            { value: 1, text: "HR" },
+            { value: 2, text: "Engineer" },
+            { value: 3, text: "VP" },
+            { value: 4, text: "CEO" },
+          ],
+        },
+        {
+          key: "age",
+          label: "Age",
+          type:"range", min:"0", max:"100",
+          editable: true,
+          placeholder: "Enter Age...",
+          class: "age-col",
+        },
+        {
+          key: "dateOfBirth",
+          label: "Date Of Birth",
+          type: "date",
+          editable: true,
+          class: "date-col",
+          locale: "en",
+          "date-format-options": {
+            year: "numeric",
+            month: "numeric",
+            day: "numeric",
+          },
+        },
+        {
+          key: "isActive",
+          label: "Is Active",
+          type: "checkbox",
+          editable: true,
+          class: "is-active-col",
+        },
+        { key: "edit", label: "" },
+      ],
+      items: [
+        {
+          id: 1,
+          age: 40,
+          name: "Dickerson",
+          department: 1,
+          dateOfBirth: "1984-05-20",
+          isActive: true,
+        },
+        {
+          id: 2,
+          age: 21,
+          name: "Larsen",
+          department: 2,
+          dateOfBirth: "1972-07-25",
+          isActive: false,
+        },
+        {
+          id: 3,
+          age: 89,
+          name: "Geneva",
+          department: 3,
+          dateOfBirth: "1981-02-02",
+          isActive: false,
+        },
+        {
+          id: 4,
+          age: 38,
+          name: "Jami",
+          department: 4,
+          dateOfBirth: "1964-10-19",
+          isActive: true,
+        },
+      ],
+      rowUpdate: {},
+    };
+  },
+  methods: {
+    handleAdd() {
+      this.rowUpdate = {
+        edit: true,
+        id: Date.now(),
+        action: "add",
+        data: {
+          id: Date.now(),
+          age: null,
+          name: "",
+          department: 1,
+          dateOfBirth: null,
+          isActive: false,
+        },
+      };
+    },
+    handleSubmit(data, update) {
+      this.rowUpdate = {
+        edit: false,
+        id: data.id,
+        action: update ? "update" : "cancel",
+      };
+    },
+    handleEdit(data) {
+      this.rowUpdate = { edit: true, id: data.id };
+    },
+    handleDelete(data) {
+      this.rowUpdate = { id: data.id, action: "delete" };
+    }
+  },
+};
+</script>
+
+<style>
+.table-container {
+  margin: 10px;
+}
+
+table.editable-table {
+  margin-top: 10px;
+}
+
+table.editable-table td {
+  vertical-align: middle;
+}
+
+.editable-table .data-cell {
+  padding: 8px;
+  vertical-align: middle;
+}
+
+.editable-table .custom-checkbox {
+  width: 50px;
+}
+
+.remove-icon {
+  color: red;
+  cursor: pointer;
+  font-size: 20px;
+}
+
+.edit-icon {
+  color: rgb(4, 83, 158);
+  cursor: pointer;
+  font-size: 20px;
+}
+
+.name-col {
+  width: 120px;
+}
+
+.department-col {
+  width: 150px;
+}
+
+.age-col {
+  width: 100px;
+}
+
+.date-col {
+  width: 200px;
+}
+
+.is-active-col {
+  width: 100px;
+}
+</style>
diff --git a/dev/examples/basic-example.vue → dev/examples/cell-edit.vue b/dev/examples/basic-example.vue → dev/examples/cell-edit.vue
@@ -39,10 +39,10 @@ export default {
         { key: "isActive", label: "Is Active", type: "checkbox", editable: true, class: "is-active-col" }
       ],
        items: [
-          { age: 40, name: 'Dickerson', department: 1, dateOfBirth: '1984-05-20', isActive: true },
-          { age: 21, name: 'Larsen', department: 2, dateOfBirth: '1972-07-25', isActive: false },
-          { age: 89, name: 'Geneva', department: 3, dateOfBirth: '1981-02-02', isActive: false },
-          { age: 38, name: 'Jami', department: 4, dateOfBirth: '1964-10-19', isActive: true },
+          { id: 1, age: 40, name: 'Dickerson', department: 1, dateOfBirth: '1984-05-20', isActive: true },
+          { id: 2, age: 21, name: 'Larsen', department: 2, dateOfBirth: '1972-07-25', isActive: false },
+          { id: 3, age: 89, name: 'Geneva', department: 3, dateOfBirth: '1981-02-02', isActive: false },
+          { id: 4, age: 38, name: 'Jami', department: 4, dateOfBirth: '1964-10-19', isActive: true },
         ]
     };
   },

diff --git a/dev/examples/api-example.vue → dev/examples/load-api.vue b/dev/examples/api-example.vue → dev/examples/load-api.vue
@@ -29,9 +29,9 @@ export default {
   data() {
     return {
       fields: [
-        { key: "name", label: "Name", type: "text", editable: true },
-        { key: "email", label: "Email", type: "email", editable: true },
-        { key: "phone", label: "Phone", type: "text", editable: true }
+        {id: 1, key: "name", label: "Name", type: "text", editable: true },
+        {id: 2, key: "email", label: "Email", type: "email", editable: true },
+        {id: 3, key: "phone", label: "Phone", type: "text", editable: true }
       ],
       users: [],
       loading: false

diff --git a/dev/examples/one-way-bind-example.vue → dev/examples/one-way-binding.vue b/dev/examples/one-way-bind-example.vue → dev/examples/one-way-binding.vue
@@ -38,16 +38,16 @@ export default {
         { key: "isActive", label: "Is Active", type: "checkbox", editable: true, class: "is-active-col" }
       ],
        items: [
-          { age: 40, name: 'Dickerson', department: 1, dateOfBirth: '1984-05-20', isActive: true },
-          { age: 21, name: 'Larsen', department: 2, dateOfBirth: '1972-07-25', isActive: false },
-          { age: 89, name: 'Geneva', department: 3, dateOfBirth: '1981-02-02', isActive: false },
-          { age: 38, name: 'Jami', department: 4, dateOfBirth: '1964-10-19', isActive: true },
+          { id:1, age: 40, name: 'Dickerson', department: 1, dateOfBirth: '1984-05-20', isActive: true },
+          { id:2, age: 21, name: 'Larsen', department: 2, dateOfBirth: '1972-07-25', isActive: false },
+          { id:3, age: 89, name: 'Geneva', department: 3, dateOfBirth: '1981-02-02', isActive: false },
+          { id:4, age: 38, name: 'Jami', department: 4, dateOfBirth: '1964-10-19', isActive: true },
         ]
     };
   },
   methods: {
-      handleInput(value, data) {
-        const updatedRow = {...this.items[data.index], [data.field.key]: value};
+      handleInput(data) {
+        const updatedRow = {...this.items[data.index], [data.field.key]: data.value};
         this.$set(this.items, data.index, updatedRow);
       }
   }

diff --git a/dev/examples/add-remove-example.vue → dev/examples/row-edit.vue b/dev/examples/add-remove-example.vue → dev/examples/row-edit.vue
@@ -1,14 +1,10 @@
 <template>
-<div class="table-container">
-    <b-button variant="success" @click="handleAdd()">Add</b-button>
-    <b-editable-table bordered class="editable-table" v-model="items" :fields="fields">
+<div>
+    <b-editable-table bordered class="editable-table" :editMode="'row'" v-model="items" :fields="fields" @input-change="handleInput">
       <template #cell(isActive)="data">
         <span v-if="data.value">Yes</span>
         <span v-else>No</span>
       </template>
-      <template #cell(delete)="data">
-          <BIconX class="remove-icon" @click="handleDelete(data)"></BIconX>
-      </template>
     </b-editable-table>
     <pre>
       {{items}}
@@ -18,11 +14,10 @@
 
 <script>
 import BEditableTable from '@/b-editable-table.vue';
-import {BIconX} from 'bootstrap-vue';
+import {BButton} from 'bootstrap-vue';
 export default {
   components: {
-    BEditableTable,
-    BIconX
+    BEditableTable
   },
   data() {
     return {
@@ -41,35 +36,25 @@ export default {
             month: "numeric",
             day: "numeric",
           }, },
-        { key: "isActive", label: "Is Active", type: "checkbox", editable: true, class: "is-active-col" },
-        { key: "delete", label: "" }
+        { key: "isActive", label: "Is Active", type: "checkbox", editable: true, class: "is-active-col" }
       ],
        items: [
-          { age: 40, name: 'Dickerson', department: 1, dateOfBirth: '1984-05-20', isActive: true },
-          { age: 21, name: 'Larsen', department: 2, dateOfBirth: '1972-07-25', isActive: false },
-          { age: 89, name: 'Geneva', department: 3, dateOfBirth: '1981-02-02', isActive: false },
-          { age: 38, name: 'Jami', department: 4, dateOfBirth: '1964-10-19', isActive: true },
+          { id: 1, age: 40, name: 'Dickerson', department: 1, dateOfBirth: '1984-05-20', isActive: true },
+          { id: 2, age: 21, name: 'Larsen', department: 2, dateOfBirth: '1972-07-25', isActive: false },
+          { id: 3, age: 89, name: 'Geneva', department: 3, dateOfBirth: '1981-02-02', isActive: false },
+          { id: 4, age: 38, name: 'Jami', department: 4, dateOfBirth: '1964-10-19', isActive: true },
         ]
     };
   },
   methods: {
-      handleAdd() {
-        this.items.unshift({});
-      },
-      handleDelete(data) {
-        this.items.splice(data.index, 1);
-      }
+      handleInput(value, data) {}
   }
 };
 </script>
 
 <style>
-.table-container {
-  margin: 10px;
-}
-
 table.editable-table {
-  margin-top: 10px;
+  margin: auto;
 }
 
 table.editable-table td {
@@ -85,12 +70,6 @@ table.editable-table td {
   width: 50px;
 }
 
-.remove-icon {
-    color: red;
-    cursor: pointer;
-    font-size: 20px;
-}
-
 .name-col {
   width: 120px;
 }