Merge branch 'editing', split darkmode to own file
This commit is contained in:
Vendored
+7
-104
@@ -1,111 +1,14 @@
|
||||
/**
|
||||
* 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)
|
||||
}
|
||||
})
|
||||
|
||||
$(function () {
|
||||
// theme switcher without reloading
|
||||
|
||||
let themeStyle = $('#theme-style');
|
||||
const lightURL = themeStyle.data('light-url');
|
||||
const darkURL = themeStyle.data('dark-url');
|
||||
const navbar = $('.page-navbar');
|
||||
const logo = $('#navbar-logo');
|
||||
|
||||
window.toggleDarkMode = function () {
|
||||
let newStyle = document.createElement('link');
|
||||
newStyle.rel = 'stylesheet';
|
||||
if (themeStyle.attr('href') === lightURL) {
|
||||
newStyle.href = darkURL;
|
||||
navbar.removeClass('navbar-light');
|
||||
navbar.addClass('navbar-dark');
|
||||
logo.attr('src', logo.data('src-dark'));
|
||||
|
||||
document.cookie = "dark_mode=1";
|
||||
} else {
|
||||
newStyle.href = lightURL;
|
||||
navbar.removeClass('navbar-dark');
|
||||
navbar.addClass('navbar-light');
|
||||
logo.attr('src', logo.data('src-light'));
|
||||
|
||||
document.cookie = "dark_mode=0;expires=" + new Date().toUTCString();
|
||||
}
|
||||
|
||||
// remove old css after new css has loaded to prevent FOUC
|
||||
let oldThemeStyle = themeStyle;
|
||||
themeStyle = $(newStyle);
|
||||
themeStyle.on('load', () => oldThemeStyle.remove());
|
||||
$(document.head).append(themeStyle);
|
||||
};
|
||||
});
|
||||
|
||||
window.Vue = require('vue');
|
||||
|
||||
Vue.component('column-editor', require('./components/ColumnEditor.vue'));
|
||||
Vue.component('v-icon', require('./components/Icon.vue'));
|
||||
|
||||
const app = new Vue({
|
||||
el: '#app'
|
||||
});
|
||||
|
||||
Vendored
+52
@@ -0,0 +1,52 @@
|
||||
window._ = require('./udash');
|
||||
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
|
||||
// });
|
||||
Vendored
-55
@@ -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
|
||||
// });
|
||||
@@ -1,12 +1,11 @@
|
||||
<template>
|
||||
<i :title="tooltipText">
|
||||
<i :title="tooltipText" @click="$emit('click')">
|
||||
<span class="sr-only" v-html=srHtml></span>
|
||||
</i>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
inheritAttrs: false,
|
||||
props: {
|
||||
alt: String,
|
||||
srOnly: Boolean
|
||||
|
||||
@@ -0,0 +1,160 @@
|
||||
<template>
|
||||
<table class="table table-hover table-sm table-fixed td-va-middle">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width:3rem" class="border-top-0"></th>
|
||||
<th style="width:3rem" class="border-top-0"></th>
|
||||
<th v-for="col in columns" :class="colClasses(col)" :title="col.name">{{col.title}}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="row in rows" :style="rowStyle(row)">
|
||||
<td>
|
||||
<a href="" :class="['btn','btn-outline-danger',{'active': row._remove}]"
|
||||
@click.prevent="toggleRowDelete(row._id)">
|
||||
<v-icon :class="row._remove ? 'fa-undo' : 'fa-trash-o'"
|
||||
:alt="row._remove ? 'Undo Remove' : 'Remove'" />
|
||||
</a>
|
||||
</td>
|
||||
<td>
|
||||
<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'" />
|
||||
</a>
|
||||
</td>
|
||||
|
||||
<template v-if="row._editing">
|
||||
<td v-for="col in columns" class="pr-0">
|
||||
<input v-model="row[col.id]" :class="['form-control', { 'is-invalid': row._errors && row._errors[col.id] }]"
|
||||
:title="(row._errors && row._errors[col.id]) ? row._errors[col.id][0] : null"
|
||||
type="text" @keyup.enter="toggleRowEditing(row._id)">
|
||||
</td>
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<td v-for="col in columns">
|
||||
<span class="text-danger strike" title="Original value" v-if="isChanged(row, col.id)">{{row._orig[col.id]}}</span>
|
||||
<span>{{ row[col.id] }}</span>
|
||||
<v-icon v-if="isChanged(row, col.id)"
|
||||
@click="revertCell(row, col.id)"
|
||||
class="fa-undo text-danger pointer"
|
||||
alt="Revert Change" />
|
||||
</td>
|
||||
</template>
|
||||
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "base";
|
||||
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
route: String,
|
||||
xRows: Object, // key'd by _id
|
||||
columns: Array,
|
||||
lastPage: Boolean,
|
||||
},
|
||||
data: function() {
|
||||
return {
|
||||
rows: this.xRows,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
busy (yes) {
|
||||
$('#draft-busy').css('opacity', yes ? 1 : 0)
|
||||
},
|
||||
|
||||
query (data, sucfn, erfn) {
|
||||
this.busy(true)
|
||||
if (!sucfn) sucfn = ()=>{}
|
||||
if (!sucfn) erfn = ()=>{}
|
||||
window.axios.post(this.route, data).then(sucfn).catch((error) => {
|
||||
console.error(error.message)
|
||||
erfn(error.response.data)
|
||||
}).then(() => {
|
||||
this.busy(false)
|
||||
})
|
||||
},
|
||||
|
||||
toggleRowDelete(_id) {
|
||||
if (!_.isDefined(this.rows[_id])) return;
|
||||
|
||||
let remove = !this.rows[_id]._remove
|
||||
|
||||
this.query({
|
||||
action: remove ? 'row.remove' : 'row.restore',
|
||||
id: _id
|
||||
}, (resp) => {
|
||||
// if response is null, this was a New row
|
||||
// and it was discarded without a way back - hard drop
|
||||
if (_.isEmpty(resp.data)) {
|
||||
this.$delete(this.rows, _id)
|
||||
}
|
||||
else {
|
||||
this.$set(this.rows, _id, resp.data)
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
submitRowChange(row) {
|
||||
this.query({
|
||||
action: 'row.update',
|
||||
data: row
|
||||
}, (resp) => {
|
||||
this.$set(this.rows, resp.data._id, resp.data);
|
||||
}, (er) => {
|
||||
if (!_.isUndefined(er.errors)) {
|
||||
this.$set(this.rows[row._id], '_errors', er.errors);
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
toggleRowEditing(_id) {
|
||||
if (this.rows[_id]._remove) return false; // can't edit row marked for removal
|
||||
|
||||
let editing = !this.rows[_id]._editing
|
||||
|
||||
if (!editing) {
|
||||
this.submitRowChange(this.rows[_id])
|
||||
} else {
|
||||
this.$set(this.rows[_id], '_editing', true);
|
||||
}
|
||||
},
|
||||
|
||||
colClasses(col) {
|
||||
return [
|
||||
'border-top-0',
|
||||
{
|
||||
'text-danger': col._remove,
|
||||
'strike': col._remove,
|
||||
'text-success': col._new
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
rowStyle(row) {
|
||||
return {
|
||||
opacity: row._remove ? .8 : 1,
|
||||
backgroundColor:
|
||||
row._remove ? '#FFC4CC':
|
||||
'transparent'
|
||||
}
|
||||
},
|
||||
|
||||
isChanged (row, colId) {
|
||||
return row._changed && row._changed.indexOf(colId) > -1
|
||||
},
|
||||
|
||||
revertCell(row, colId) {
|
||||
this.submitRowChange(_.merge({}, row, { [colId]: row._orig[colId] }))
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
+21
@@ -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')
|
||||
}
|
||||
}
|
||||
})
|
||||
+10
@@ -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)
|
||||
})
|
||||
+19
@@ -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)
|
||||
}
|
||||
})
|
||||
Vendored
+12
@@ -0,0 +1,12 @@
|
||||
// subset of used lodash modules
|
||||
|
||||
export { default as each } from 'lodash/each'
|
||||
export { default as isUndefined } from 'lodash/isUndefined'
|
||||
export { default as merge } from 'lodash/merge'
|
||||
export { default as unset } from 'lodash/unset'
|
||||
export { default as isEmpty } from 'lodash/isEmpty'
|
||||
|
||||
function isDefined(x) {
|
||||
return typeof(x) !== 'undefined';
|
||||
}
|
||||
export { isDefined }
|
||||
Vendored
+27
@@ -0,0 +1,27 @@
|
||||
window.Vue = require('vue');
|
||||
|
||||
const ColumnEditorCtor = Vue.component('column-editor', require('./components/ColumnEditor.vue'));
|
||||
const RowsEditorCtor = Vue.component('rows-editor', require('./components/RowsEditor.vue'));
|
||||
const IconCtor = Vue.component('v-icon', require('./components/Icon.vue'));
|
||||
|
||||
// const app = new Vue({
|
||||
// el: '#app'
|
||||
// });
|
||||
|
||||
window.app = {
|
||||
ColumnEditor: function(selector, data) {
|
||||
new ColumnEditorCtor({
|
||||
propsData: data
|
||||
}).$mount(selector);
|
||||
},
|
||||
RowsEditor: function(selector, data) {
|
||||
new RowsEditorCtor({
|
||||
propsData: data
|
||||
}).$mount(selector);
|
||||
},
|
||||
Icon: function(selector, data) {
|
||||
new IconCtor({
|
||||
propsData: data
|
||||
}).$mount(selector);
|
||||
}
|
||||
}
|
||||
Vendored
+17
@@ -16,3 +16,20 @@
|
||||
.box-shadow {
|
||||
box-shadow: 0 2px 3px rgba(black, .3);
|
||||
}
|
||||
|
||||
.strike {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
// for busy loaders etc
|
||||
.opacity-fade {
|
||||
transition: opacity .3s ease-in-out;
|
||||
}
|
||||
|
||||
.pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.noscript-hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
Vendored
+2
@@ -20,6 +20,8 @@ html {
|
||||
@import "bootstrap-customizations/button";
|
||||
@import "bootstrap-customizations/responsive";
|
||||
@import "bootstrap-customizations/typography";
|
||||
@import "bootstrap-customizations/nav";
|
||||
@import "bootstrap-customizations/table";
|
||||
|
||||
@import "infobox";
|
||||
|
||||
|
||||
@@ -15,3 +15,23 @@
|
||||
.border-2 {
|
||||
border-width: 2px !important;
|
||||
}
|
||||
|
||||
.rounded-top-0 {
|
||||
border-top-left-radius: 0 !important;
|
||||
border-top-right-radius: 0 !important;
|
||||
}
|
||||
|
||||
.rounded-left-0 {
|
||||
border-top-left-radius: 0 !important;
|
||||
border-bottom-left-radius: 0 !important;
|
||||
}
|
||||
|
||||
.rounded-right-0 {
|
||||
border-top-right-radius: 0 !important;
|
||||
border-bottom-right-radius: 0 !important;
|
||||
}
|
||||
|
||||
.rounded-bottom-0 {
|
||||
border-bottom-left-radius: 0 !important;
|
||||
border-bottom-right-radius: 0 !important;
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
@media (max-width:767px) {
|
||||
.mobile-only {
|
||||
.no-mobile {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,9 @@
|
||||
.table-fixed {
|
||||
table-layout: fixed;
|
||||
}
|
||||
|
||||
.td-va-middle {
|
||||
td, th {
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
}
|
||||
@@ -12,6 +12,16 @@
|
||||
|
||||
<!-- Scripts -->
|
||||
<script src="{{ asset('js/app.js') }}" defer></script>
|
||||
<script>
|
||||
function ready(fn) {
|
||||
document.addEventListener('DOMContentLoaded', fn);
|
||||
}
|
||||
ready(function() {
|
||||
$('noscript').remove();
|
||||
$('.noscript-hide').removeClass('noscript-hide');
|
||||
});
|
||||
</script>
|
||||
@stack('scripts')
|
||||
|
||||
<!-- Styles -->
|
||||
<link
|
||||
|
||||
@@ -0,0 +1,13 @@
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="{{ route('login') }}">
|
||||
@icon(fa-sign-in pr-1)
|
||||
{{ __('Login') }}
|
||||
</a>
|
||||
|
||||
@if(config('app.allow_regs'))
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="{{ route('register') }}">
|
||||
@icon(fa-user-plus pr-1)
|
||||
{{ __('Register') }}
|
||||
</a>
|
||||
@endif
|
||||
@@ -16,36 +16,23 @@
|
||||
--}}datatable.directory
|
||||
</a>
|
||||
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse"
|
||||
<button class="navbar-toggler noscript-hide" type="button" data-toggle="collapse"
|
||||
data-target="#mainNavContent" aria-controls="mainNavContent"
|
||||
aria-expanded="false" aria-label="{{ __('Toggle navigation') }}">
|
||||
<span class="sr-only">Toggle navigation</span>
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse" id="mainNavContent">
|
||||
<div class="collapse navbar-collapse noscript-hide" id="mainNavContent">
|
||||
<ul class="navbar-nav ml-auto">
|
||||
<!-- Authentication Links -->
|
||||
@guest()
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="{{ route('login') }}">
|
||||
@icon(fa-sign-in pr-1)
|
||||
{{ __('Login') }}
|
||||
</a>
|
||||
|
||||
@if(config('app.allow_regs'))
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="{{ route('register') }}">
|
||||
@icon(fa-user-plus pr-1)
|
||||
{{ __('Register') }}
|
||||
</a>
|
||||
@endif
|
||||
|
||||
@include('layouts.guest-buttons')
|
||||
@else
|
||||
{{-- Logged in --}}
|
||||
@include('layouts.nav-buttons', ['dropdown' => false])
|
||||
|
||||
<li class="nav-item dropdown mobile-only">
|
||||
<li class="nav-item dropdown no-mobile">
|
||||
<a id="mainNavDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown"
|
||||
aria-haspopup="true" aria-expanded="false" v-pre>
|
||||
@icon(fa-user-circle-o fa-pr){{--
|
||||
@@ -63,5 +50,15 @@
|
||||
@endif
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<noscript>
|
||||
<ul class="navbar-nav ml-auto">
|
||||
@guest
|
||||
@include('layouts.guest-buttons')
|
||||
@else
|
||||
@include('layouts.nav-buttons', ['dropdown' => false, 'noscript' => true])
|
||||
@endif
|
||||
</ul>
|
||||
</noscript>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
@php
|
||||
|
||||
$li = $dropdown ? '' : '<li class="nav-item ml-1 d-md-none">';
|
||||
$dmdhide = isset($noscript)?'':'d-md-none';
|
||||
$li = $dropdown ? '' : "<li class=\"nav-item ml-1 $dmdhide\">";
|
||||
$aclass = $dropdown ? 'dropdown-item' : 'nav-link';
|
||||
|
||||
@endphp
|
||||
|
||||
@@ -4,24 +4,25 @@
|
||||
|
||||
@php
|
||||
/** @var object[] $columns */
|
||||
/** @var \App\Tables\Changeset[] $changeset */
|
||||
/** @var \App\Models\Row[] $rows */
|
||||
@endphp
|
||||
|
||||
<table class="table table-hover table-sm">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>_id</th>
|
||||
<th>#</th>
|
||||
@foreach($columns as $col)
|
||||
<th>{{$col->name}} ("{{ $col->title }}") [ {{$col->id}} ]</th>
|
||||
<th title="{{$col->name}}">{{ $col->title }}</th>
|
||||
@endforeach
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@foreach($rows as $row)
|
||||
<tr>
|
||||
<td>{{ $row->_id }}</td>
|
||||
<td>{{$row->_id}}</td>
|
||||
@foreach($columns as $col)
|
||||
<td data-id="{{ $row->_id }}">{{ $row->{$col->name} }}</td>
|
||||
<td>{{ $row->{$col->name} }}</td>
|
||||
@endforeach
|
||||
</tr>
|
||||
@endforeach
|
||||
|
||||
+13
-27
@@ -9,21 +9,17 @@
|
||||
<nav aria-label="Table action buttons">
|
||||
@sr(Table actions)
|
||||
|
||||
{{-- Disabled until implemented --}}
|
||||
|
||||
@if(guest() || !user()->confirmed || user()->ownsTable($table))
|
||||
{{-- Guest, unconfirmed, or a table owner --}}
|
||||
|
||||
{{-- Passive fork buttons with counter --}}
|
||||
<a href="" class="btn btn-outline-primary py-1 btn-sm" title="Forks"
|
||||
data-toggle="tooltip" data-placement="top">
|
||||
<a href="" class="btn btn-outline-primary py-1 btn-sm" @tooltip(Forks)>
|
||||
@icon(fa-code-fork, sr:Forks)
|
||||
{{ $table->forks_count ?: '–' }}
|
||||
</a>
|
||||
|
||||
{{-- Passive favourite buttons with counter --}}
|
||||
<a href="" class="btn btn-outline-primary py-1 btn-sm"
|
||||
title="Favourites" data-toggle="tooltip" data-placement="top">
|
||||
<a href="" class="btn btn-outline-primary py-1 btn-sm" @tooltip(Favourites)>
|
||||
@icon(fa-star, sr:Favourites)
|
||||
{{ $table->favourites_count ?: '–' }}
|
||||
</a>
|
||||
@@ -33,12 +29,10 @@
|
||||
|
||||
{{-- Active fork button | counter --}}
|
||||
<div class="btn-group" role="group" aria-label="Fork">
|
||||
<a href="" class="btn btn-outline-primary py-1 btn-sm btn-square" title="Fork"
|
||||
data-toggle="tooltip" data-placement="top">
|
||||
<a href="" class="btn btn-outline-primary py-1 btn-sm btn-square" @tooltip(Fork)>
|
||||
@icon(fa-code-fork, sr:Fork)
|
||||
</a>
|
||||
<a href="" class="btn btn-outline-primary py-1 btn-sm" title="Fork Count"
|
||||
data-toggle="tooltip" data-placement="top">
|
||||
<a href="" class="btn btn-outline-primary py-1 btn-sm" @tooltip(Fork Count)>
|
||||
{{ $table->forks_count ?: '–' }}
|
||||
</a>
|
||||
</div>
|
||||
@@ -46,18 +40,15 @@
|
||||
{{-- Active favourite button | counter --}}
|
||||
<div class="btn-group" role="group" aria-label="Favourite">
|
||||
@if(user()->favouritesTable($table))
|
||||
<a href="" class="btn btn-outline-primary py-1 btn-sm btn-square" title="Un-favourite"
|
||||
data-toggle="tooltip" data-placement="top">
|
||||
<a href="" class="btn btn-outline-primary py-1 btn-sm btn-square" @tooltip(Un-favourite)>
|
||||
@icon(fa-star, sr:Un-favourite)
|
||||
</a>
|
||||
@else
|
||||
<a href="" class="btn btn-outline-primary py-1 btn-sm btn-square" title="Favourite"
|
||||
data-toggle="tooltip" data-placement="top">
|
||||
<a href="" class="btn btn-outline-primary py-1 btn-sm btn-square" @tooltip(Favourite)>
|
||||
@icon(fa-star-o, sr:Favourite)
|
||||
</a>
|
||||
@endif
|
||||
<a href="" class="btn btn-outline-primary py-1 btn-sm" title="Favourite Count"
|
||||
data-toggle="tooltip" data-placement="top">
|
||||
<a href="" class="btn btn-outline-primary py-1 btn-sm" @tooltip(Favourite Count)>
|
||||
{{ $table->favourites_count ?: '–' }}
|
||||
</a>
|
||||
</div>
|
||||
@@ -65,29 +56,25 @@
|
||||
@endif
|
||||
|
||||
{{-- Comments button with counter --}}
|
||||
<a href="" class="btn btn-outline-primary py-1 btn-sm" title="Comments"
|
||||
data-toggle="tooltip" data-placement="top">
|
||||
<a href="" class="btn btn-outline-primary py-1 btn-sm" @tooltip(Comments)>
|
||||
@icon(fa-comment, sr:Comments)
|
||||
{{ $table->comments_count ?: '–' }}
|
||||
</a>
|
||||
|
||||
{{-- Active proposals button | counter --}}
|
||||
<div class="btn-group" role="group" aria-label="Fork">
|
||||
<a href="" class="btn btn-outline-primary py-1 btn-sm" title="Change Proposals"
|
||||
data-toggle="tooltip" data-placement="top">
|
||||
<a href="" class="btn btn-outline-primary py-1 btn-sm" @tooltip(Change Proposals)>
|
||||
@icon(fa-inbox fa-pr, sr:Change Proposals){{ $table->proposals_count ?: '–' }}
|
||||
</a>
|
||||
@auth
|
||||
@if(user()->ownsTable($table))
|
||||
{{-- Table owner logged in --}}
|
||||
<a href="" class="btn btn-outline-primary py-1 btn-sm btn-square" title="Draft Change"
|
||||
data-toggle="tooltip" data-placement="top">
|
||||
<a href="{{ $table->draftRoute }}" class="btn btn-outline-primary py-1 btn-sm btn-square" @tooltip(Draft Change)>
|
||||
@icon(fa-pencil, sr:Draft Change)
|
||||
</a>
|
||||
@else
|
||||
{{-- Not a table owner --}}
|
||||
<a href="" class="btn btn-outline-primary py-1 btn-sm btn-square" title="Propose Change"
|
||||
data-toggle="tooltip" data-placement="top">
|
||||
<a href="{{ $table->draftRoute }}" class="btn btn-outline-primary py-1 btn-sm btn-square" @tooltip(Propose Change)>
|
||||
@icon(fa-pencil, sr:Propose Change)
|
||||
</a>
|
||||
@endif
|
||||
@@ -96,9 +83,8 @@
|
||||
|
||||
@if(authed() && user()->ownsTable($table))
|
||||
{{-- Table opts menu for table owner --}}
|
||||
<a href="{{ $table->settingsRoute }}" class="btn btn-outline-primary py-1 btn-sm"
|
||||
title="Table Options" data-toggle="tooltip" data-placement="top">
|
||||
<a href="{{ $table->settingsRoute }}" class="btn btn-outline-primary py-1 btn-sm" @tooltip(Table Options)>
|
||||
@icon(fa-wrench, sr:Table Options)
|
||||
</a>
|
||||
@endif
|
||||
@endif
|
||||
</nav>
|
||||
@@ -17,8 +17,7 @@
|
||||
|
||||
<h1 class="mx-3">{{ $table->title }}</h1>
|
||||
|
||||
<a href="{{ $table->viewRoute }}" class="btn btn-outline-primary py-1 btn-sm"
|
||||
title="Back to Table" data-toggle="tooltip" data-placement="top">
|
||||
<a href="{{ $table->viewRoute }}" class="btn btn-outline-primary py-1 btn-sm" @tooltip(Back to Table)>
|
||||
@icon(fa-table, sr:Back to Table)
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@@ -30,23 +30,12 @@
|
||||
->help('If you took the data from some external site, a book, etc., write it here.
|
||||
URLs in a full format will be clickable.') !!}
|
||||
|
||||
{{--!! Widget::textarea('columns', 'Columns')->value($exampleColumns)->height('8em')
|
||||
->help('
|
||||
<div class="text-left">
|
||||
Column parameters in CSV format:
|
||||
<ul class="pl-3 mb-0">
|
||||
<li><b>column identifier</b><br>letters, numbers, underscore
|
||||
<li><b>column data type</b><br>int, string, float, bool
|
||||
<li><b>column title</b><br>used for display (optional)
|
||||
</ul>
|
||||
</div>') !!--}}
|
||||
|
||||
<div class="row form-group">
|
||||
<label for="field-columns" class="col-md-3 col-form-label text-md-right">
|
||||
Columns
|
||||
</label>
|
||||
<div class="col-md-8">
|
||||
<column-editor name="columns" :initial-columns="{{old('columns', toJSON($columns))}}"></column-editor>
|
||||
<div id="column-editor"></div>
|
||||
|
||||
<noscript>
|
||||
You have JavaScript disabled; enter columns as JSON array<br>
|
||||
@@ -84,3 +73,14 @@
|
||||
</div>
|
||||
</form>
|
||||
@endsection
|
||||
|
||||
@push('scripts')
|
||||
<script>
|
||||
ready(function() {
|
||||
app.ColumnEditor('#column-editor', {
|
||||
name: 'columns',
|
||||
initialColumns: {!! old('columns', toJSON($columns)) !!},
|
||||
})
|
||||
});
|
||||
</script>
|
||||
@endpush
|
||||
|
||||
@@ -0,0 +1,52 @@
|
||||
@php
|
||||
$tab = 'add-rows';
|
||||
/** @var \App\Tables\Column[] $columns */
|
||||
/** @var \App\Tables\Changeset $changeset */
|
||||
/** @var \App\Models\Row[]|Illuminate\Pagination\Paginator $rows */
|
||||
/** @var \App\Models\Table $table */
|
||||
@endphp
|
||||
@extends('table.propose.layout-row-pagination')
|
||||
|
||||
@section('header')
|
||||
<div class="form-inline py-2 px-1 border-bottom mb-3">
|
||||
{{-- TODO improve layout --}}
|
||||
<form action="{{$table->draftUpdateRoute}}" method="POST" class="form-inline">
|
||||
@csrf
|
||||
<input type="hidden" name="action" value="rows.add-csv">
|
||||
<input type="hidden" name="redirect" value="{{request()->fullUrl()}}">
|
||||
<label class="pr-2" for="csv-data">Add CSV:</label>
|
||||
<textarea name="data" id="csv-data"
|
||||
title="{{$errors->has('data') ? $errors->first('data') : ''}}"
|
||||
class="form-control mr-1 {{ $errors->has('data')?'is-invalid':'' }}"
|
||||
style="width:30em; height:10em">{{old('data')}}</textarea>
|
||||
<button class="btn btn-outline-success">Append</button>
|
||||
</form>
|
||||
|
||||
<div class="flex-grow-1"></div>
|
||||
|
||||
<form action="{{$table->draftUpdateRoute}}" method="POST">
|
||||
@csrf
|
||||
<input type="hidden" name="action" value="rows.add">
|
||||
<input type="hidden" name="redirect" value="{{request()->fullUrl()}}">
|
||||
<label class="form-inline pr-2" for="newrow-count">Add Empty Rows:</label>
|
||||
<input name="count" id="newrow-count" type="number" min=1 step=1 value=1 class="form-control mr-1" style="width:10em">
|
||||
<button class="btn btn-outline-success">Add</button>
|
||||
</form>
|
||||
</div>
|
||||
@stop
|
||||
|
||||
@section('rows')
|
||||
<div id="rows-editor"></div>
|
||||
@stop
|
||||
|
||||
@push('scripts')
|
||||
<script>
|
||||
ready(function() {
|
||||
app.RowsEditor('#rows-editor', {
|
||||
route: {!! toJSON($table->draftUpdateRoute) !!},
|
||||
columns: {!! toJSON($columns) !!},
|
||||
xRows: {!! toJSON($rows->keyBy('_id'), true) !!},
|
||||
})
|
||||
});
|
||||
</script>
|
||||
@endpush
|
||||
@@ -0,0 +1,32 @@
|
||||
@php
|
||||
$tab = 'edit-rows';
|
||||
/** @var \App\Tables\Column[] $columns */
|
||||
/** @var \App\Tables\Changeset $changeset */
|
||||
/** @var \App\Models\Row[]|Illuminate\Pagination\Paginator $rows */
|
||||
/** @var \App\Models\Table $table */
|
||||
@endphp
|
||||
|
||||
@extends('table.propose.layout-row-pagination')
|
||||
|
||||
@section('rows')
|
||||
@php
|
||||
$transformed = $rows->keyBy('_id')->map(function($r) use ($changeset) {
|
||||
/** @var \App\Tables\Changeset $changeset */
|
||||
return $changeset->transformRow($r, true);
|
||||
});
|
||||
@endphp
|
||||
|
||||
<div id="rows-editor"></div>
|
||||
@stop
|
||||
|
||||
@push('scripts')
|
||||
<script>
|
||||
ready(function() {
|
||||
app.RowsEditor('#rows-editor', {
|
||||
route: {!! toJSON($table->draftUpdateRoute) !!},
|
||||
columns: {!! toJSON($columns) !!},
|
||||
xRows: {!! toJSON($transformed, true) !!},
|
||||
})
|
||||
});
|
||||
</script>
|
||||
@endpush
|
||||
@@ -0,0 +1,31 @@
|
||||
@php
|
||||
/** @var \App\Models\Row[]|Illuminate\Pagination\Paginator $rows */
|
||||
@endphp
|
||||
|
||||
@extends('table.propose.layout')
|
||||
|
||||
@section('tab-content')
|
||||
<div class="col-12">
|
||||
@yield('header')
|
||||
</div>
|
||||
|
||||
@if($rows->hasPages())
|
||||
<div class="col-md-12 d-flex">
|
||||
<nav class="text-center" aria-label="Pages of the table">
|
||||
{{ $rows->links(null, ['ulClass' => 'mb-0']) }}
|
||||
</nav>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<div class="col-12">
|
||||
@yield('rows')
|
||||
</div>
|
||||
|
||||
@if($rows->hasPages())
|
||||
<div class="col-md-12 d-flex">
|
||||
<nav class="text-center" aria-label="Pages of the table">
|
||||
{{ $rows->links(null, ['ulClass' => 'mb-0']) }}
|
||||
</nav>
|
||||
</div>
|
||||
@endif
|
||||
@stop
|
||||
@@ -0,0 +1,60 @@
|
||||
{{-- Basic table view --}}
|
||||
|
||||
@extends('layouts.app')
|
||||
|
||||
@php
|
||||
/** @var \App\Models\Table $table */
|
||||
|
||||
if (!isset($tab) || $tab == '') $tab = 'edit-rows';
|
||||
@endphp
|
||||
|
||||
@section('content')
|
||||
<div class="row justify-content-start px-3">
|
||||
<div class="d-flex w-100 align-items-center">
|
||||
<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><a href="{{ $table->viewRoute }}" class="link-no-color">{{ $table->name }}</a></b>
|
||||
</small>
|
||||
|
||||
<h1 class="mx-3">
|
||||
<a href="{{ $table->viewRoute }}" class="link-no-color">{{ $table->title }}</a>
|
||||
</h1>
|
||||
<a href="{{$table->draftDiscardRoute}}" class="btn btn-outline-danger mr-2" @tooltip(Discard changes)>
|
||||
@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)>
|
||||
@icon(fa-save fa-pr)Commit
|
||||
</a>
|
||||
@else
|
||||
<a href="" class="btn btn-outline-success" @tooltip(Submit your changes for review by the table owner)>
|
||||
@icon(fa-save fa-pr)Submit
|
||||
</a>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul class="nav nav-tabs">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link{{ $tab=='edit-rows'?' active':'' }}" href="{{ $table->getDraftRoute('edit-rows') }}">Edit Rows</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link{{ $tab=='add-rows'?' active':'' }}" href="{{ $table->getDraftRoute('add-rows') }}">Add Rows</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link{{ $tab=='manage-columns'?' active':'' }}" href="{{ $table->getDraftRoute('manage-columns') }}">Columns</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link{{ $tab=='review'?' active':'' }}" href="{{ $table->getDraftRoute('review') }}">Note & Review</a>
|
||||
</li>
|
||||
<li class="nav-item ml-auto pt-2 pr-2 opacity-fade" style="opacity:0" id="draft-busy">
|
||||
@icon(fa-hourglass, Working...)
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="row justify-content-center mb-2">
|
||||
@yield('tab-content')
|
||||
</div>{{-- End of row --}}
|
||||
|
||||
@endsection
|
||||
@@ -0,0 +1,6 @@
|
||||
@php($tab='manage-columns')
|
||||
@extends('table.propose.layout')
|
||||
|
||||
@section('tab-content')
|
||||
...
|
||||
@stop
|
||||
@@ -0,0 +1,6 @@
|
||||
@php($tab='review')
|
||||
@extends('table.propose.layout')
|
||||
|
||||
@section('tab-content')
|
||||
...
|
||||
@stop
|
||||
@@ -17,7 +17,7 @@
|
||||
|
||||
<h1 class="mx-3">{{ $table->title }}</h1>
|
||||
|
||||
@include('table._action-buttons')
|
||||
@include('table._view-action-buttons')
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user