Merge branch 'editing', split darkmode to own file

resources/views/layouts/app.blade.php

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

resources/views/layouts/guest-buttons.blade.php

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

resources/views/layouts/main-nav.blade.php

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

resources/views/layouts/nav-buttons.blade.php

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

resources/views/table/_rows.blade.php

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

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/create.blade.php

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

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

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

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

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

resources/views/table/propose/layout-row-pagination.blade.php

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

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

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

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>