MightyPork/datatable.directory
1
0
Fork 1
Code Issues 25 Pull Requests Releases Wiki Activity

Row edit and delete card working

Browse Source
This commit is contained in:
MightyPork
2018-08-05 17:07:34 +02:00
parent bb8bc459dc
commit a4103e7084
15 changed files with 393 additions and 209 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/assets/js/app.js
Vendored
+7 -66
View File
@@ -1,76 +1,17 @@
/**
* First we will load all of this project's JavaScript dependencies which
* includes Vue and other libraries. It is a great starting point when
* building robust, powerful web applications using Vue and Laravel.
*/
/* Project entrypoint */
require('./bootstrap')
let url_slug = require('./url-slug')
require('./base-setup')
require('./modules/block-collapse')
require('./modules/flash-messages')
require('./modules/form-autoalias')
require('./vue-init')
$(function () {
// Remove all noscript from forms etc
$('noscript').remove();
// Bootstrap tooltips
$('[data-toggle="tooltip"]').tooltip({
container: 'body'
})
// auto hide flash alerts
let $notifs = $('div.alert').not('.alert-important').addClass('fadeout')
setTimeout(() => {
$notifs.addClass('fade')
setTimeout(() => {
$notifs.addClass('hidden')
}, 500)
}, 2500)
// toggle collapse when clicked outside link, without drag
$('.block-collapse')
.on('mousedown', (e) => {
let $bc = $(e.target).closest('.block-collapse')
$bc.data('mx', e.screenX);
$bc.data('my', e.screenY);
})
.on('mouseup', (e) => {
if (e.target.nodeName === 'A') return
let $bc = $(e.target).closest('.block-collapse')
if (typeof $bc.data('mx') !== 'undefined') {
let x0 = +$bc.data('mx');
let y0 = +$bc.data('my');
if (Math.abs(x0 - e.screenX) > 5 || Math.abs(y0 - e.screenY) > 5) {
// drag
} else {
$(e.target).closest('.block-collapse').toggleClass('reveal')
}
}
})
})
// auto-alias
$(document).on('input keypress paste keyup', 'input[data-autoalias]', function () {
const $this = $(this)
const target_name = $this.data('autoalias')
const delimiter = $this.data('aa-delimiter') || '_'
const new_alias = url_slug($this.val(), {'delimiter': delimiter})
const $target = $(`input[name="${target_name}"]`)
const lastset = $target.data('aa-last-set-val')
// 1. pick up, or 2. continue
if (new_alias === $target.val() || lastset === $target.val()) {
$target.val(new_alias)
$target.data('aa-last-set-val', new_alias)
}
})
window.Vue = require('vue');
Vue.component('column-editor', require('./components/ColumnEditor.vue'));
Vue.component('row-editor', require('./components/RowEditor.vue'));
Vue.component('v-icon', require('./components/Icon.vue'));
const app = new Vue({
el: '#app'
});
resources/assets/js/base-setup.js
Vendored
+52
View File
@@ -0,0 +1,52 @@
// window._ = require('lodash');
window.Popper = require('popper.js').default
/**
* We'll load jQuery and the Bootstrap jQuery plugin which provides support
* for JavaScript based Bootstrap features such as modals and tabs. This
* code may be modified to fit the specific needs of your application.
*/
window.$ = window.jQuery = require('jquery')
require('bootstrap')
/**
* We'll load the axios HTTP library which allows us to easily issue requests
* to our Laravel back-end. This library automatically handles sending the
* CSRF token as a header based on the value of the "XSRF" token cookie.
*/
window.axios = require('axios')
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'
/**
* Next we will register the CSRF Token as a common header with Axios so that
* all outgoing HTTP requests automatically have it attached. This is just
* a simple convenience so we don't have to attach every token manually.
*/
let token = document.head.querySelector('meta[name="csrf-token"]')
if (token) {
window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content
} else {
console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token')
}
/**
* Echo exposes an expressive API for subscribing to channels and listening
* for events that are broadcast by Laravel. Echo and event broadcasting
* allows your team to easily build robust real-time web applications.
*/
// import Echo from 'laravel-echo'
// window.Pusher = require('pusher-js');
// window.Echo = new Echo({
// broadcaster: 'pusher',
// key: process.env.MIX_PUSHER_APP_KEY,
// cluster: process.env.MIX_PUSHER_APP_CLUSTER,
// encrypted: true
// });
resources/assets/js/bootstrap.js
Vendored
-55
View File
@@ -1,55 +0,0 @@
// window._ = require('lodash');
window.Popper = require('popper.js').default;
/**
* We'll load jQuery and the Bootstrap jQuery plugin which provides support
* for JavaScript based Bootstrap features such as modals and tabs. This
* code may be modified to fit the specific needs of your application.
*/
try {
window.$ = window.jQuery = require('jquery');
require('bootstrap');
} catch (e) {}
// /**
// * We'll load the axios HTTP library which allows us to easily issue requests
// * to our Laravel back-end. This library automatically handles sending the
// * CSRF token as a header based on the value of the "XSRF" token cookie.
// */
//
// window.axios = require('axios');
//
// window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
//
// /**
// * Next we will register the CSRF Token as a common header with Axios so that
// * all outgoing HTTP requests automatically have it attached. This is just
// * a simple convenience so we don't have to attach every token manually.
// */
//
// let token = document.head.querySelector('meta[name="csrf-token"]');
//
// if (token) {
// window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
// } else {
// console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
// }
/**
* Echo exposes an expressive API for subscribing to channels and listening
* for events that are broadcast by Laravel. Echo and event broadcasting
* allows your team to easily build robust real-time web applications.
*/
// import Echo from 'laravel-echo'
// window.Pusher = require('pusher-js');
// window.Echo = new Echo({
// broadcaster: 'pusher',
// key: process.env.MIX_PUSHER_APP_KEY,
// cluster: process.env.MIX_PUSHER_APP_CLUSTER,
// encrypted: true
// });
resources/assets/js/components/RowEditor.vue
+35 -3
View File
@@ -17,7 +17,7 @@
</a>
</td>
<td>
<a href="" class="btn btn-outline-secondary"
<a href="" :class="['btn','btn-outline-secondary',{'disabled': row._remove}]"
@click.prevent="toggleRowEditing(row._id)">
<v-icon :class="row._editing ? 'fa-save' : 'fa-pencil'"
:alt="row._editing ? 'Save' : 'Edit'" />
@@ -59,11 +59,43 @@ export default {
}
},
methods: {
busy (yes) {
$('#draft-busy').css('opacity', yes ? 1 : 0)
},
query (data, sucfn) {
this.busy(true)
if (!sucfn) sucfn = ()=>{}
window.axios.post(this.route, data).then(sucfn).catch((e) => {
console.error(e)
}).then(() => {
this.busy(false)
})
},
toggleRowDelete(_id) {
this.$set(this.rows[_id], '_remove', !this.rows[_id]._remove);
let remove = !this.rows[_id]._remove;
this.query({
action: remove ? 'row.remove' : 'row.restore',
id: _id
}, (resp) => {
this.$set(this.rows, _id, resp.data);
})
},
toggleRowEditing(_id) {
this.$set(this.rows[_id], '_editing', !this.rows[_id]._editing);
if (this.rows[_id]._remove) return false; // can't edit row marked for removal
let editing = !this.rows[_id]._editing;
if (!editing) {
this.query({
action: 'row.update',
data: this.rows[_id]
}, (resp) => {
this.$set(this.rows, _id, resp.data);
})
} else {
this.$set(this.rows[_id], '_editing', true);
}
},
colClasses(col) {
return [
resources/assets/js/url-slug.js → resources/assets/js/lib/url-slug.js
Vendored
View File
resources/assets/js/modules/block-collapse.js
Vendored
+21
View File
@@ -0,0 +1,21 @@
// toggle collapse when clicked outside link, without drag
$(document)
.on('mousedown', '.block-collapse', function(e) {
let $bc = $(e.target).closest('.block-collapse')
$bc.data('mx', e.screenX)
$bc.data('my', e.screenY)
})
.on('mouseup', '.block-collapse', function(e) {
if (e.target.nodeName === 'A') return
let $bc = $(e.target).closest('.block-collapse')
if (typeof $bc.data('mx') !== 'undefined') {
let x0 = +$bc.data('mx')
let y0 = +$bc.data('my')
if (Math.abs(x0 - e.screenX) > 5 || Math.abs(y0 - e.screenY) > 5) {
// drag
} else {
$(e.target).closest('.block-collapse').toggleClass('reveal')
}
}
})
resources/assets/js/modules/flash-messages.js
Vendored
+10
View File
@@ -0,0 +1,10 @@
$(function() {
// auto hide flash alerts
let $notifs = $('div.alert').not('.alert-important').addClass('fadeout')
setTimeout(() => {
$notifs.addClass('fade')
setTimeout(() => {
$notifs.addClass('hidden')
}, 500)
}, 2500)
})
resources/assets/js/modules/form-autoalias.js
Vendored
+19
View File
@@ -0,0 +1,19 @@
let url_slug = require('../lib/url-slug')
// auto-alias
$(document).on('input keypress paste keyup', 'input[data-autoalias]', function () {
const $this = $(this)
const target_name = $this.data('autoalias')
const delimiter = $this.data('aa-delimiter') || '_'
const new_alias = url_slug($this.val(), {'delimiter': delimiter})
const $target = $(`input[name="${target_name}"]`)
const lastset = $target.data('aa-last-set-val')
// 1. pick up, or 2. continue
if (new_alias === $target.val() || lastset === $target.val()) {
$target.val(new_alias)
$target.data('aa-last-set-val', new_alias)
}
})
resources/assets/js/vue-init.js
Vendored
+9
View File
@@ -0,0 +1,9 @@
window.Vue = require('vue');
Vue.component('column-editor', require('./components/ColumnEditor.vue'));
Vue.component('row-editor', require('./components/RowEditor.vue'));
Vue.component('v-icon', require('./components/Icon.vue'));
const app = new Vue({
el: '#app'
});
resources/views/table/propose/layout.blade.php
+7 -3
View File
@@ -14,12 +14,16 @@ if (!isset($tab) || $tab == '') $tab = 'edit-rows';
<small class="flex-grow-1" style="font-size: 120%;">
<a href="{{ route('profile.view', $table->owner->name) }}" class="link-no-color">{{ $table->owner->handle }}</a>{{--
--}}<span class="px-1">/</span>{{--
--}}<b>{{ $table->name }}</b>
--}}<b>
<a href="{{ $table->viewRoute }}" class="link-no-color">{{ $table->name }}</a>
</b>
</small>
<h1 class="mx-3">{{ $table->title }}</h1>
<h1 class="mx-3">
<a href="{{ $table->viewRoute }}" class="link-no-color">{{ $table->title }}</a>
</h1>
<a href="" class="btn btn-outline-danger mr-2" @tooltip(Discard changes)>
@icon(fa-close, sr:Discard)
@icon(fa-trash-o, sr:Discard)
</a>
@if(user()->ownsTable($table))
<a href="" class="btn btn-outline-success" @tooltip(Save the changes and apply them as a new table revision)>