88 lines
3.4 KiB
PHP
88 lines
3.4 KiB
PHP
|
@php($translatePrefix='env-editor::env-editor.views.currentEnv.')
|
||
|
<template id="env-editor-main-tab">
|
||
|
<div>
|
||
|
<div class="h5 my-4">{{__($translatePrefix.'title')}}</div>
|
||
|
<div class="py-3 text-right">
|
||
|
<button class="btn btn-info" @click="addNew()">{{__($translatePrefix.'btn.addNewKey')}}</button>
|
||
|
</div>
|
||
|
<div class="table-responsive">
|
||
|
<table class="table table-sm">
|
||
|
<thead>
|
||
|
<tr class="table-secondary ">
|
||
|
<th class="py-2" scope="col">{{__($translatePrefix.'tableTitles.key')}}</th>
|
||
|
<th class="py-2" scope="col">{{__($translatePrefix.'tableTitles.value')}}</th>
|
||
|
<th class="py-2" scope="col">{{__($translatePrefix.'tableTitles.actions')}}</th>
|
||
|
</tr>
|
||
|
</thead>
|
||
|
<tbody>
|
||
|
<tr v-for="(item, index) in items" :key="item.key" v-bind="item" v-if="!item.separator">
|
||
|
<th scope="row" class="font-weight-bold ">@{{ item.key }}</th>
|
||
|
<td>@{{ item.value }}</td>
|
||
|
<td>
|
||
|
<div class="btn-group" role="group">
|
||
|
<button class="btn btn-info" @click="edit(item)" title="{{__($translatePrefix.'btn.edit')}}"><span class="fas fa-edit"></span></button>
|
||
|
<button class="btn btn-secondary" @click="addAfter(item)" title="{{__($translatePrefix.'btn.addAfterKey')}}"><span class="fas fa-share"></span></button>
|
||
|
<button class="btn btn-danger" @click="remove(item)" title="{{__($translatePrefix.'btn.delete')}}"><span class="fas fa-trash"></span></button>
|
||
|
</div>
|
||
|
</td>
|
||
|
</tr>
|
||
|
<tr v-else>
|
||
|
<td colspan="100%"> </td>
|
||
|
</tr>
|
||
|
|
||
|
</tbody>
|
||
|
</table>
|
||
|
</div>
|
||
|
|
||
|
</div>
|
||
|
</template>
|
||
|
|
||
|
@push('scripts')
|
||
|
|
||
|
|
||
|
<script>
|
||
|
const itemsWrapper = {
|
||
|
template: '#env-editor-main-tab',
|
||
|
data: () => {
|
||
|
return {
|
||
|
items: [],
|
||
|
}
|
||
|
},
|
||
|
mounted() {
|
||
|
envEventBus.$on('env:changed', () => {
|
||
|
this.getItemsWithAjax();
|
||
|
});
|
||
|
this.getItemsWithAjax()
|
||
|
},
|
||
|
methods: {
|
||
|
edit: function (item) {
|
||
|
envEventBus.$emit('env:item:edit', item);
|
||
|
},
|
||
|
addNew() {
|
||
|
envEventBus.$emit('env:item:new');
|
||
|
},
|
||
|
addAfter(item) {
|
||
|
let oldItem = {
|
||
|
key: null,
|
||
|
value: null,
|
||
|
group: item.group,
|
||
|
index: item.index + 0.1,
|
||
|
}
|
||
|
|
||
|
envEventBus.$emit('env:item:new', oldItem);
|
||
|
},
|
||
|
remove(item) {
|
||
|
envEventBus.$emit('env:item:delete', item);
|
||
|
},
|
||
|
getItemsWithAjax() {
|
||
|
envClient('{{route(config($package.'.route.name').'.index')}}')
|
||
|
.then(data => this.items = data.items)
|
||
|
}
|
||
|
},
|
||
|
}
|
||
|
;
|
||
|
|
||
|
|
||
|
</script>
|
||
|
@endpush
|