stub of the row editor

resources/assets/js/app.js

@@ -68,6 +68,7 @@ $(document).on('input keypress paste keyup', 'input[data-autoalias]', function (
 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({

resources/assets/js/components/RowEditor.vue

@@ -0,0 +1,86 @@
+<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)">{{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"
+             @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" type="text">
+          </td>
+        </template>
+
+        <template v-else>
+          <td v-for="col in columns">
+            {{ row[col.id] || '' }}
+          </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,
+  },
+  data: function() {
+    return {
+      rows: this.xRows,
+    }
+  },
+  methods: {
+    toggleRowDelete(_id) {
+      this.$set(this.rows[_id], '_remove', !this.rows[_id]._remove);
+    },
+    toggleRowEditing(_id) {
+      this.$set(this.rows[_id], '_editing', !this.rows[_id]._editing);
+    },
+    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'
+      }
+    },
+  }
+}
+</script>

resources/assets/sass/_helpers.scss

@@ -16,3 +16,12 @@
 .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;
+}

resources/assets/sass/app.scss

@@ -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";
 
 .bio-table {
 	td {

resources/assets/sass/bootstrap-customizations/_border.scss

@@ -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;
+}

resources/assets/sass/bootstrap-customizations/_table.scss

@@ -0,0 +1,9 @@
+.table-fixed {
+	table-layout: fixed;
+}
+
+.td-va-middle {
+	td, th {
+		vertical-align: middle !important;
+	}
+}

resources/views/table/_rows.blade.php

@@ -4,24 +4,23 @@
 
 @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>
     @foreach($columns as $col)
-      <th>{{$col->name}} ("{{ $col->title }}") [ {{$col->id}} ]</th>
+      <th>{{ $col->title }}</th>
     @endforeach
   </tr>
   </thead>
   <tbody>
   @foreach($rows as $row)
     <tr>
-      <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

resources/views/table/_view-action-buttons.blade.php

@@ -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)&nbsp;
       {{ $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)&nbsp;
       {{ $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)&nbsp;
     {{ $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>

resources/views/table/conf.blade.php

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

resources/views/table/propose/add-rows.blade.php

@@ -0,0 +1,6 @@
+@php($tab='add-rows')
+@extends('table.propose.layout')
+
+@section('tab-content')
+  ...
+@stop

resources/views/table/propose/edit-rows.blade.php

@@ -0,0 +1,43 @@
+@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')
+
+@section('tab-content')
+
+  @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">
+    @php
+      $transformed = $rows->keyBy('_id')->map(function($r) use ($changeset) {
+        /** @var \App\Tables\Changeset $changeset */
+        return $changeset->transformRow($r, true);
+      });
+    @endphp
+
+    <table is="row-editor"
+           route="{{$table->getDraftRoute('update')}}"
+           :columns="{{toJSON($columns)}}"
+           :x-rows="{{toJSON($transformed)}}">
+    </table>
+  </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

resources/views/table/propose/layout.blade.php

@@ -0,0 +1,58 @@
+{{-- 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>{{ $table->name }}</b>
+    </small>
+
+    <h1 class="mx-3">{{ $table->title }}</h1>
+    <a href="" class="btn btn-outline-danger mr-2" @tooltip(Discard changes)>
+      @icon(fa-close, 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

resources/views/table/propose/manage-columns.blade.php

@@ -0,0 +1,6 @@
+@php($tab='manage-columns')
+@extends('table.propose.layout')
+
+@section('tab-content')
+  ...
+@stop

resources/views/table/propose/review.blade.php

@@ -0,0 +1,6 @@
+@php($tab='review')
+@extends('table.propose.layout')
+
+@section('tab-content')
+  ...
+@stop

resources/views/table/view.blade.php

@@ -17,7 +17,7 @@
 
     <h1 class="mx-3">{{ $table->title }}</h1>
 
-    @include('table._action-buttons')
+    @include('table._view-action-buttons')
   </div>
 </div>