-
Notifications
You must be signed in to change notification settings - Fork 0
/
Editable.vue
111 lines (105 loc) · 3.19 KB
/
Editable.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<template>
<div :id="'editable-field-' + this.resource + '-' + this.id + '-' + this.name">
<label class="control-label" v-if="!editing" @dblclick="toogleEditing" :id="'editable-field-label-' + this.resource + '-' + this.id + '-' + this.name">
{{ value }}
<i class="fa fa-edit" style="color: green;" v-if="!editing" @click="toogleEditing"></i>
</label>
<div class="input-group" v-if="editing">
<div class="form-group" :class="{ 'has-error': form.errors.has('name') }">
<input type="text" class="form-control" v-model="value" :name="this.name" :id="'input-edit-' + this.resource + '-' + this.id + '-field-' + this.name"
@keyup.esc="toogleEditing" @keyup.enter="save" @keydown="clearErrors($event.target.name)">
</div>
<div class="input-group-addon bg-green">
<i v-if="form.submitting" id="editable-spinner" class="fa fa-refresh fa-spin"></i>
<i v-else class="fa fa-check" @click="save" :id="'edit-button-' + this.resource + '-' + this.id + '-field-' + this.name"></i>
</div>
<div class="input-group-addon bg-red">
<i class="fa fa-remove" @click="toogleEditing"></i>
</div>
</div>
<transition name="fade">
<span class="help-block text-red" :id="'errorForInput-' + this.resource + '-' + this.id + '-field-' + this.name" v-if="form.errors.has(this.name)" v-text="form.errors.get(this.name)"></span>
</transition>
</div>
</template>
<script>
import Form from 'acacha-forms'
export default {
/*
* The component's data.
*/
data() {
return {
editing: this.edit,
afterSaveEventName: this.afterSaveEvent,
form: new Form({ [this.name] : this.content })
};
},
computed: {
value: {
get: function () {
return this.form[this.name]
},
set: function (newValue) {
this.form[this.name] = newValue
}
}
},
props: {
'resource': {
type: String,
required: true
},
'name': {
type: String,
required: true
},
'id': {
type: Number,
required: true
},
'apiUri': {
type: String,
required: true
},
'edit': {
type: Boolean,
default: true
},
'content': {
type: String,
default: ""
},
'afterSaveEvent': {
type: String,
default: "reload"
}
},
methods: {
clearErrors (name) {
this.form.errors.clear(name)
},
/**
* Toogle edit state
*/
toogleEditing() {
this.editing = !this.editing;
},
/**
* Save change
*/
save() {
var component = this
this.form.put(this.apiUri + '/' + this.id)
.then(response => {
component.$events.fire(this.afterSaveEventName)
component.toogleEditing();
})
.catch(error => {
if(error.response.status != 422) toastr.info('Error saving! ' + error)
})
}
}
}
</script>
<style src="./css/fade.css"></style>