Skip to content

Commit

Permalink
Add textfield and enable adding to end of the table
Browse files Browse the repository at this point in the history
  • Loading branch information
@muhimasri
muhimasri committed Mar 24, 2023
1 parent 1c665c4 commit d229ad5
Show file tree
Hide file tree
Showing 6 changed files with 204 additions and 88 deletions.
142 changes: 72 additions & 70 deletions dev/examples/add-remove-update.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,14 +42,14 @@
</template>

<script>
import BEditableTable from "@/b-editable-table.vue";
import BEditableTable from '@/b-editable-table.vue'
import {
BIconTrash,
BIconPencil,
BIconX,
BIconCheck,
BButton,
} from "bootstrap-vue";
} from 'bootstrap-vue'
export default {
components: {
BEditableTable,
Expand All @@ -62,147 +62,149 @@ export default {
data() {
return {
fields: [
{ key: "delete", label: "" },
{ key: 'delete', label: '' },
{
key: "name",
label: "Name",
type: "text",
key: 'name',
label: 'Name',
type: 'text',
editable: true,
placeholder: "Enter Name...",
class: "name-col",
validate: this.validateName
placeholder: 'Enter Name...',
class: 'name-col',
validate: this.validateName,
},
{
key: "department",
label: "Department",
type: "select",
key: 'department',
label: 'Department',
type: 'select',
editable: true,
class: "department-col",
class: 'department-col',
options: [
{ value: 1, text: "HR" },
{ value: 2, text: "Engineer" },
{ value: 3, text: "VP" },
{ value: 4, text: "CEO" },
{ 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",
key: 'age',
label: 'Age',
type: 'range',
min: '0',
max: '100',
editable: true,
placeholder: "Enter Age...",
class: "age-col",
placeholder: 'Enter Age...',
class: 'age-col',
},
{
key: "dateOfBirth",
label: "Date Of Birth",
type: "date",
key: 'dateOfBirth',
label: 'Date Of Birth',
type: 'date',
editable: true,
class: "date-col",
locale: "en",
"date-format-options": {
year: "numeric",
month: "numeric",
day: "numeric",
class: 'date-col',
locale: 'en',
'date-format-options': {
year: 'numeric',
month: 'numeric',
day: 'numeric',
},
validate: this.validateDate
validate: this.validateDate,
},
{
key: "isActive",
label: "Is Active",
type: "checkbox",
key: 'isActive',
label: 'Is Active',
type: 'checkbox',
editable: true,
class: "is-active-col",
class: 'is-active-col',
},
{ key: "edit", label: "" },
{ key: 'edit', label: '' },
],
items: [
{
id: 1,
age: 40,
name: "Dickerson",
name: 'Dickerson',
department: 1,
dateOfBirth: "1984-05-20",
dateOfBirth: '1984-05-20',
isActive: true,
},
{
id: 2,
age: 21,
name: "Larsen",
name: 'Larsen',
department: 2,
dateOfBirth: "1972-07-25",
dateOfBirth: '1972-07-25',
isActive: false,
},
{
id: 3,
age: 89,
name: "Geneva",
name: 'Geneva',
department: 3,
dateOfBirth: "1981-02-02",
dateOfBirth: '1981-02-02',
isActive: false,
},
{
id: 4,
age: 38,
name: "Jami",
name: 'Jami',
department: 4,
dateOfBirth: "1964-10-19",
dateOfBirth: '1964-10-19',
isActive: true,
},
],
rowUpdate: {},
};
}
},
methods: {
handleAdd() {
this.rowUpdate = {
edit: true,
id: Date.now(),
action: "add",
action: 'add',
data: {
id: Date.now(),
age: null,
name: "",
name: '',
department: 1,
dateOfBirth: null,
isActive: false,
},
};
}
},
handleSubmit(data, update) {
this.rowUpdate = {
edit: false,
id: data.id,
action: update ? "update" : "cancel",
};
action: update ? 'update' : 'cancel',
}
},
handleEdit(data) {
this.rowUpdate = { edit: true, id: data.id };
this.rowUpdate = { edit: true, id: data.id }
},
handleDelete(data) {
this.rowUpdate = { id: data.id, action: "delete" };
this.rowUpdate = { id: data.id, action: 'delete' }
},
validateName(value) {
if (value === '') {
return {
valid: false,
errorMessage: 'Please enter name'
}
if (value === '') {
return {
valid: false,
errorMessage: 'Please enter name',
}
return {valid: true};
},
validateDate(value) {
const year = new Date(value).getFullYear();
if (year > 2003) {
return {
valid: false,
errorMessage: 'Must be above 19'
}
}
return { valid: true }
},
validateDate(value) {
const year = new Date(value).getFullYear()
if (year > 2003) {
return {
valid: false,
errorMessage: 'Must be above 19',
}
return {valid: true};
},
}
return { valid: true }
},
},
};
}
</script>

<style>
Expand Down
50 changes: 44 additions & 6 deletions dist/b-editable-table.esm.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13785,7 +13785,7 @@ var script = Vue.extend({
this.updateData(newVal.id);
} else if (newVal.action === 'add') {
this.updateData(newVal.id, 'add', { ...newVal.data
}, newVal.edit);
}, newVal.edit, newVal.addPosition);
} else if (newVal.action === 'delete') {
this.updateData(newVal.id, 'delete');
} else if (newVal.action === 'cancel' || newVal.isEdit === false) {
Expand Down Expand Up @@ -13878,7 +13878,7 @@ var script = Vue.extend({
changedValue = selectedValue ? selectedValue.value : value;
}

const validity = data.field.validate ? data.field.validate(changedValue) : {
const validity = data.field.validate ? data.field.validate(changedValue, data) : {
valid: true
};
const fields = this.tableMap[data.item.id].fields;
Expand Down Expand Up @@ -13923,7 +13923,7 @@ var script = Vue.extend({
});
},

updateData(id, action, data, isEdit) {
updateData(id, action, data, isEdit, addPosition) {
let isUpdate = false;
const objId = id ? id : Object.keys(this.localChanges)[0];

Expand All @@ -13935,7 +13935,12 @@ var script = Vue.extend({
isEdit,
fields: {}
};
this.tableItems.unshift(data);

if (addPosition === 'end') {
this.tableItems.push(data);
} else {
this.tableItems.unshift(data);
}
} else if (action === 'delete') {
isUpdate = true;
delete this.tableMap[id];
Expand Down Expand Up @@ -14322,7 +14327,40 @@ var __vue_render__ = function () {
return _vm.handleKeydown($event, index, data);
}
}
}, 'b-form-rating', Object.assign({}, field), false)) : _vm.showField(field, data, field.type) ? _c('div', {
}, 'b-form-rating', Object.assign({}, field), false)) : _vm.showField(field, data, 'textarea') ? _c('div', {
key: index
}, [_c('b-form-textarea', _vm._b({
directives: [{
name: "focus",
rawName: "v-focus",
value: _vm.enableFocus(),
expression: "enableFocus()"
}],
attrs: {
"id": field.key + "-" + data.item.id,
"type": field.type,
"value": _vm.getFieldValue(field, data),
"state": _vm.getValidity(data, field).valid ? null : false
},
on: {
"keydown": function ($event) {
return _vm.handleKeydown($event, index, data);
},
"input": function (value) {
return _vm.inputHandler(value, data, field.key);
},
"change": function (value) {
return _vm.changeHandler(value, data, field.key);
}
}
}, 'b-form-textarea', Object.assign({}, field), false)), _vm._v(" "), _vm.getValidity(data, field).errorMessage ? _c('b-tooltip', {
attrs: {
"target": field.key + "-" + data.item.id,
"variant": "danger",
"show": !_vm.getValidity(data, field).valid,
"disabled": true
}
}, [_vm._v("\n " + _vm._s(_vm.getValidity(data, field).errorMessage) + "\n ")]) : _vm._e()], 1) : _vm.showField(field, data, field.type) ? _c('div', {
key: index
}, [_c('b-form-input', _vm._b({
directives: [{
Expand Down Expand Up @@ -14373,7 +14411,7 @@ var __vue_staticRenderFns__ = [];

const __vue_inject_styles__ = function (inject) {
if (!inject) return;
inject("data-v-7a52295e_0", {
inject("data-v-27f38362_0", {
source: "table.b-table{width:unset}table.b-table td{padding:0}.data-cell{display:flex;width:100%;height:100%}",
map: undefined,
media: undefined
Expand Down
2 changes: 1 addition & 1 deletion dist/b-editable-table.min.js
View file

Large diffs are not rendered by default.

Loading

0 comments on commit d229ad5

Please sign in to comment.