diff --git a/app/Http/Controllers/TableController.php b/app/Http/Controllers/TableController.php
index bdfa575..e261007 100644
--- a/app/Http/Controllers/TableController.php
+++ b/app/Http/Controllers/TableController.php
@@ -85,9 +85,9 @@ class TableController extends Controller
$columns = Column::columnsFromJson([
// fake 'id' to satisfy the check in Column constructor
- ['name' => 'latin', 'type' => 'string', 'title' => 'Latin Name'],
- ['name' => 'common', 'type' => 'string', 'title' => 'Common Name'],
- ['name' => 'lifespan', 'type' => 'int', 'title' => 'Lifespan (years)']
+ ['id' => 1, 'name' => 'latin', 'type' => 'string', 'title' => 'Latin Name'],
+ ['id' => 2, 'name' => 'common', 'type' => 'string', 'title' => 'Common Name'],
+ ['id' => 3, 'name' => 'lifespan', 'type' => 'int', 'title' => 'Lifespan (years)']
]);
return view('table.create', [
diff --git a/resources/assets/js/components/ColumnEditor.vue b/resources/assets/js/components/ColumnEditor.vue
index 96ea5e7..a046cd5 100644
--- a/resources/assets/js/components/ColumnEditor.vue
+++ b/resources/assets/js/components/ColumnEditor.vue
@@ -1,42 +1,86 @@
+
+
@@ -53,36 +97,199 @@
@include py(1);
}
- td .btn {
- @include mr(1);
+ tr.dragging {
+ position: relative;
+ z-index: 1;
+ background-color: $body-bg;
+ }
+ tr.dragging .drag-btn {
+ // fake hover
+ background-color: $secondary;
+ color: color-yiq($secondary);
+ }
+
+ .col-list-enter-active {
+ transition: all .3s cubic-bezier(.2, .3, 0, 1);
+ }
+
+ .col-list-enter {
+ opacity: 0;
+ transform: translateY(100%);
+ }
+ .col-list-leave {
+ // approximate position of delete button
+ clip-path: circle(calc(100% + 5em) at calc(100% - 4em) 50%);
+ }
+ .col-list-leave-active .delete-btn {
+ animation: col-list-leave-delete-btn .3s forwards;
+ }
+ .col-list-leave-active {
+ transition: all .3s cubic-bezier(.4, .1, .6, .9);
+ }
+ .col-list-leave-to {
+ clip-path: circle(0 at calc(100% - 4em) 50%);
+ }
+
+ @keyframes col-list-leave-delete-btn {
+ 0% {
+ transition-timing-function: cubic-bezier(.2, .4, .6, .9);
+ }
+ 50% {
+ transition-timing-function: cubic-bezier(.5, 0, .8, .5);
+ transform: scale(1.1);
+ opacity: 1;
+ }
+ 100% {
+ transform: scale(0);
+ opacity: 0;
+ }
+ }
+
+ .col-list-move {
+ transition: transform .3s cubic-bezier(.2, .3, 0, 1);
}
diff --git a/resources/assets/js/components/ColumnEditorAdvanced.vue b/resources/assets/js/components/ColumnEditorAdvanced.vue
deleted file mode 100644
index c8d7a1c..0000000
--- a/resources/assets/js/components/ColumnEditorAdvanced.vue
+++ /dev/null
@@ -1,193 +0,0 @@
-
-
-
-
-
-
-
diff --git a/resources/assets/js/components/RowsEditor.vue b/resources/assets/js/components/RowsEditor.vue
index 4e8b846..4da3783 100644
--- a/resources/assets/js/components/RowsEditor.vue
+++ b/resources/assets/js/components/RowsEditor.vue
@@ -1,3 +1,14 @@
+
+
@@ -54,107 +65,95 @@
diff --git a/resources/assets/js/components/table-editor-utils.js b/resources/assets/js/components/table-editor-utils.js
new file mode 100644
index 0000000..d806608
--- /dev/null
+++ b/resources/assets/js/components/table-editor-utils.js
@@ -0,0 +1,20 @@
+function busy (yes) {
+ $('#draft-busy').css('opacity', yes ? 1 : 0)
+}
+
+function query (route, data, sucfn, erfn) {
+ busy(true)
+ if (!sucfn) sucfn = () => {}
+ if (!sucfn) erfn = () => {}
+ window.axios.post(route, data).then(sucfn).catch((error) => {
+ console.error(error.message)
+ erfn(error.response.data)
+ }).then(() => {
+ busy(false)
+ })
+}
+
+export {
+ busy,
+ query
+}
diff --git a/resources/assets/js/vue-init.js b/resources/assets/js/vue-init.js
index 9e870b4..11f1687 100644
--- a/resources/assets/js/vue-init.js
+++ b/resources/assets/js/vue-init.js
@@ -1,7 +1,6 @@
window.Vue = require('vue')
const ColumnEditor = Vue.component('column-editor', require('./components/ColumnEditor.vue'))
-const ColumnEditorAdvanced = Vue.component('column-editor', require('./components/ColumnEditorAdvanced.vue'))
const RowsEditor = Vue.component('rows-editor', require('./components/RowsEditor.vue'))
const Icon = Vue.component('v-icon', require('./components/Icon.vue'))
@@ -13,9 +12,6 @@ window.app = {
ColumnEditor: function (selector, data) {
new ColumnEditor({ propsData: data }).$mount(selector)
},
- ColumnEditorAdvanced: function (selector, data) {
- new ColumnEditorAdvanced({ propsData: data }).$mount(selector)
- },
RowsEditor: function (selector, data) {
new RowsEditor({ propsData: data }).$mount(selector)
},
diff --git a/resources/views/table/create.blade.php b/resources/views/table/create.blade.php
index 1364f06..5323e9e 100644
--- a/resources/views/table/create.blade.php
+++ b/resources/views/table/create.blade.php
@@ -79,7 +79,9 @@
ready(function() {
app.ColumnEditor('#column-editor', {
name: 'columns',
- initialColumns: {!! old('columns', toJSON($columns)) !!},
+ xColumns: {!! old('columns', toJSON($columns)) !!},
+ newTable: true,
+ doSort: false,
})
});
diff --git a/resources/views/table/propose/manage-columns.blade.php b/resources/views/table/propose/manage-columns.blade.php
index 74705ed..1e9709d 100644
--- a/resources/views/table/propose/manage-columns.blade.php
+++ b/resources/views/table/propose/manage-columns.blade.php
@@ -14,11 +14,10 @@
@push('scripts')