Row edit and delete card working

app/Http/Controllers/Controller.php

@@ -3,6 +3,7 @@
 namespace App\Http\Controllers;
 
 use Illuminate\Foundation\Bus\DispatchesJobs;
+use Illuminate\Http\JsonResponse;
 use Illuminate\Http\Request;
 use Illuminate\Routing\Controller as BaseController;
 use Illuminate\Foundation\Validation\ValidatesRequests;
@@ -55,6 +56,11 @@ class Controller extends BaseController
         'mastodon', // mastodon fetching previews
     ];
 
+    protected function jsonResponse($data = [], $code=200)
+    {
+        return new JsonResponse($data, $code);
+    }
+
     // Hacks to allow recursive nesting of validations in string and array format
 
     public function makeValidator($data, $rules, $messages = array(), $customAttributes = array())

app/Http/Controllers/TableEditController.php

@@ -3,10 +3,12 @@
 
 namespace App\Http\Controllers;
 
+use App\Models\Row;
 use App\Models\Table;
 use App\Models\User;
 use App\Tables\Changeset;
 use App\Tables\Column;
+use Illuminate\Http\JsonResponse;
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Input;
 
@@ -35,6 +37,14 @@ class TableEditController extends Controller
         });
     }
 
+    private function storeChangeset(Changeset $chs)
+    {
+        $session_key = "proposal_{$chs->table->id}";
+
+        session()->put($session_key, $chs);
+        session()->save();
+    }
+
     public function draft(User $user, string $table, $tab = null)
     {
         /** @var Table $tableModel */
@@ -47,13 +57,18 @@ class TableEditController extends Controller
 
         $changeset = $this->getChangeset($tableModel);
 
+        if (Input::has('dump')) {
+            dd($changeset);
+        }
+
         return $this->{camel_case($tab)}($changeset);
     }
 
+    /** @noinspection PhpUnusedPrivateMethodInspection */
     private function editRows(Changeset $changeset)
     {
         $revision = $changeset->revision;
-        $columns = $changeset->transformColumns();
+        $columns = $changeset->fetchAndTransformColumns();
         $rows = $revision->rowsData($columns, true, false)->paginate(25, []);
 
         return view('table.propose.edit-rows', [
@@ -63,4 +78,46 @@ class TableEditController extends Controller
             'rows' => $rows,
         ]);
     }
+
+    // TODO other tab handlers
+
+    public function draftUpdate(User $user, string $table, Request $request)
+    {
+        /** @var Table $tableModel */
+        $tableModel = $user->tables()->where('name', $table)->first();
+        if ($tableModel === null) abort(404, "No such table.");
+
+        $changeset = $this->getChangeset($tableModel);
+
+        $input = objBag($request->all(), false);
+
+        $code = 200;
+        switch ($input->action) {
+            case 'row.update':
+                $data = (object)$input->data;
+                $changeset->rowUpdate($data);
+
+                $resp = $changeset->fetchAndTransformRow($data->_id);
+                break;
+
+            case 'row.remove':
+                $changeset->rowRemove($input->id);
+                $resp = $changeset->fetchAndTransformRow($input->id);
+                break;
+
+            case 'row.restore':
+                $changeset->rowRestore($input->id);
+                $resp = $changeset->fetchAndTransformRow($input->id);
+                break;
+
+            default:
+                $resp = "Bad Action";
+                $code = 400;
+                break;
+        }
+
+        $this->storeChangeset($changeset);
+
+        return $this->jsonResponse($resp, $code);
+    }
 }

app/Tables/Changeset.php

@@ -4,8 +4,11 @@
 namespace App\Tables;
 
 use App\Models\Revision;
+use App\Models\Row;
 use App\Models\Table;
 use Illuminate\Queue\SerializesModels;
+use Illuminate\Support\Collection;
+use MightyPork\Exceptions\NotExistException;
 use ReflectionClass;
 
 /**
@@ -34,7 +37,7 @@ class Changeset
     /**
      * @var string - user's note attached to this changeset (future proposal)
      */
-    public $note;
+    public $note = '';
 
     /**
      * Rows whose content changed, identified by _id.
@@ -100,9 +103,6 @@ class Changeset
      */
     public $removedColumns = [];
 
-    /** @var Column[] - loaded and transformed columns, cached from previous call to transformColumns() */
-    private $cachedColumns;
-
     private function walkProps()
     {
         $properties = (new ReflectionClass($this))->getProperties();
@@ -147,7 +147,7 @@ class Changeset
         $object = new \stdClass();
 
         foreach ($this->walkProps() as $prop) {
-            $object->$prop = array_values($this->$prop);
+            $object->$prop = $this->$prop;
         }
 
         return $object;
@@ -178,6 +178,8 @@ class Changeset
      */
     public function transformRow($row, $decorate)
     {
+        if ($row instanceof Row) $row = (object)$row->getAttributes();
+
         if ($decorate) {
             $row->_remove = false;
             $row->_changed = [];
@@ -222,16 +224,16 @@ class Changeset
      *
      * @return Column[]
      */
-    public function transformColumns()
+    public function fetchAndTransformColumns()
     {
-        if ($this->cachedColumns) return $this->cachedColumns;
+        /** @var Column[] - loaded and transformed columns, cached from previous call to transformColumns() */
+        static $cachedColumns = [];
+
+        if ($cachedColumns) return $cachedColumns;
         $columns = Column::columnsFromJson($this->revision->columns);
 
         // Modify columns
-        $byId = [];
         foreach ($columns as $column) {
-            $byId[$column->id] = $column;
-
             if (isset($this->columnUpdates[$column->id])) {
                 $column->modifyByChangeset($this->columnUpdates[$column->id]);
             }
@@ -248,16 +250,85 @@ class Changeset
         }
 
         // Reorder
+        $colsById = collect($columns)->keyBy('id')->all();
         $newOrder = [];
         foreach ($this->columnOrder as $id) {
-            $newOrder[] = $byId[$id];
+            $newOrder[] = $colsById[$id];
         }
 
-        $leftover_keys = array_diff(array_keys($byId), $this->columnOrder);
+        $leftover_keys = array_diff(array_keys($colsById), $this->columnOrder);
         foreach ($leftover_keys as $id) {
-            $newOrder[] = $byId[$id];
+            $newOrder[] = $colsById[$id];
+        }
+
+        return $cachedColumns = $newOrder;
     }
 
-        return $this->cachedColumns = $newOrder;
+    public function rowRemove(int $id)
+    {
+        $this->removedRows[] = $id;
+    }
+
+    public function rowRestore(int $id)
+    {
+        $this->removedRows = array_diff($this->removedRows, [$id]);
+    }
+
+    public function fetchAndTransformRow(int $id)
+    {
+        $r = $this->fetchRow($id);
+        $transformed = $this->transformRow($r, true);
+        return $transformed;
+    }
+
+    public function fetchColumns()
+    {
+        return Column::columnsFromJson($this->revision->columns);
+    }
+
+    public function fetchRow($id)
+    {
+        $r = $this->revision->rowsData($this->fetchColumns(), true, false)
+            ->whereRaw("data->>'_id' = ?", $id)->first();
+
+        if (! $r) throw new NotExistException("No such row _id = $id in this revision.");
+
+        // remove junk
+        unset($r->pivot_revision_id);
+        unset($r->pivot_row_id);
+
+        return (object)$r->getAttributes();
+    }
+
+    public function rowUpdate($newVals)
+    {
+        $_id = $newVals->_id;
+        $origRow = $this->fetchRow($_id);
+
+        /** @var Column[]|Collection $cols */
+        $cols = collect($this->fetchAndTransformColumns())->keyBy('id');
+
+        $updateObj = [];
+        \Debugbar::addMessage(json_encode($cols));
+        \Debugbar::addMessage(var_export($newVals, true));
+
+        foreach ($newVals as $colId => $value) {
+            if (starts_with($colId, '_')) continue; // internals
+
+            if (!isset($origRow->$colId) || $value != $origRow->$colId) {
+                $updateObj[$colId] = $cols[$colId]->cast($value);
+            }
+        }
+
+        \Debugbar::addMessage("New: ".json_encode($newVals));
+        \Debugbar::addMessage("Orig: ".json_encode($origRow));
+        \Debugbar::addMessage("UpdateObj: ".json_encode($updateObj));
+
+        if (!empty($updateObj)) {
+            $this->rowUpdates[$_id] = $updateObj;
+        } else {
+            // remove possible old update record for this row, if nothing changes now
+            unset($this->rowUpdates[$_id]);
+        }
     }
 }

app/Tables/Column.php

@@ -10,13 +10,6 @@ use MightyPork\Utils\Utils;
 /**
  * Helper class representing one column in a data table.
  *
- * @property-read string $id
- * @property-read string $type
- * @property-read string $name
- * @property-read string $title
- * @property-read bool $isNew
- * @property-read bool $toRemove
- *
  * @property-read bool $id_modified
  * @property-read bool $type_modified
  * @property-read bool $name_modified
@@ -33,16 +26,18 @@ class Column implements JsonSerializable, Arrayable
         'int', 'bool', 'float', 'string'
     ];
 
-    private $id;
+    // marked public to make keyBy() work
-    private $type;
+
-    private $name;
+    public $id;
-    private $title;
+    public $type;
+    public $name;
+    public $title;
 
     /** @var bool - column is marked to be deleted by a changeset */
-    private $toRemove = false;
+    public $toRemove = false;
 
     /** @var bool - column is new in this changeset */
-    private $isNew = false;
+    public $isNew = false;
 
     /** @var array - original attrib values if edited in a changeset */
     private $orig_attribs = [];
@@ -83,10 +78,6 @@ class Column implements JsonSerializable, Arrayable
 
     public function __get($name)
     {
-        if (property_exists($this, $name)) {
-            return $this->$name;
-        }
-
         if (ends_with($name, '_modified')) {
             $basename = str_replace('_modified', '', $name);
             if (property_exists($this, $basename)) {
@@ -177,20 +168,24 @@ class Column implements JsonSerializable, Arrayable
     {
         switch ($this->type) {
             case 'int':
+                if (is_null($value)) return 0;
                 if (is_int($value)) return $value;
                 if (is_float($value)) return round($value);
                 if (is_numeric($value)) return intval($value);
                 throw new NotApplicableException("Could not convert value \"$value\" to int!");
 
             case 'float':
+                if (is_null($value)) return 0;
                 if (is_int($value) || is_float($value)) return (float)$value;
                 if (is_numeric($value)) return floatval($value);
                 throw new NotApplicableException("Could not convert value \"$value\" to float!");
 
             case 'bool':
+                if (is_null($value)) return false;
                 return Utils::parseBool($value);
 
             case 'string':
+                if (is_null($value)) return "";
                 return "$value";
 
             default:

porklib/helpers.php

@@ -65,21 +65,37 @@ function unless($cond, $then, $else = '')
  * - Undefined keys are returned as null.
  * - array and object values are wrapped in objBag when returned.
  */
-class objBag implements JsonSerializable, ArrayAccess {
+class objBag implements JsonSerializable, ArrayAccess, \Illuminate\Contracts\Support\Arrayable
+{
     /** @var object */
     private $wrapped;
+    private $recursive;
 
-	public function __construct($wrapped)
+    /**
+     * objBag constructor.
+     * @param mixed $wrapped - wrapped object/array/class
+     * @param bool $recursive - return array/object values as objBags too
+     */
+    public function __construct($wrapped, $recursive = true)
     {
         $this->wrapped = (object)$wrapped;
+        $this->recursive = $recursive;
     }
 
+    /**
+     * @param $name
+     * @return null|objBag|mixed
+     */
     public function __get($name)
     {
         if ($this->wrapped) {
             if (isset($this->wrapped->$name)) {
                 $x = $this->wrapped->$name;
-				if (is_array($x) || is_object($x)) return objBag($x);
+
+                if ($this->recursive && (is_array($x) || is_object($x))) {
+                    return objBag($x);
+                }
+
                 return $x;
             }
         }
@@ -106,6 +122,11 @@ class objBag implements JsonSerializable, ArrayAccess {
         return isset($this->wrapped->$name);
     }
 
+    /**
+     * @param $name
+     * @param null $def
+     * @return null|array|mixed
+     */
     public function get($name, $def = null)
     {
         if (!isset($this->$name)) return $def;
@@ -168,10 +189,11 @@ class objBag implements JsonSerializable, ArrayAccess {
 
 /**
  * @param $obj
+ * @param bool $recursive - whether the bag should be recursive
  * @return objBag
  */
-function objBag($obj) {
+function objBag($obj, $recursive=true) {
-	return new \objBag($obj);
+	return new \objBag($obj, $recursive);
 }
 
 /**

resources/assets/js/app.js

@@ -1,76 +1,17 @@
-/**
+/* Project entrypoint */
- * 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.
- */
 
-require('./bootstrap')
+require('./base-setup')
-
+require('./modules/block-collapse')
-let url_slug = require('./url-slug')
+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

@@ -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

@@ -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

@@ -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/modules/block-collapse.js

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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)>