ZIP Exports: Built out initial import view

Added syles for non-custom, non-image file inputs.
Started planning out back-end handling.

Author: ssddanbrown

app/Exports/Controllers/ImportController.php

@@ -14,11 +14,17 @@ public function __construct()
 
     public function start(Request $request)
     {
+        // TODO - Show existing imports for user (or for all users if admin-level user)
+
         return view('exports.import');
     }
 
     public function upload(Request $request)
     {
-        // TODO
+        // TODO - Read existing ZIP upload and send through validator
+            // TODO - If invalid, return user with errors
+        // TODO - Upload to storage
+        // TODO - Store info/results from validator
+        // TODO - Send user to next import stage
     }
 }

lang/en/entities.php

@@ -44,6 +44,7 @@
     'default_template_explain' => 'Assign a page template that will be used as the default content for all pages created within this item. Keep in mind this will only be used if the page creator has view access to the chosen template page.',
     'default_template_select' => 'Select a template page',
     'import' => 'Import',
+    'import_validate' => 'Validate Import',
 
     // Permissions and restrictions
     'permissions' => 'Permissions',

resources/sass/_forms.scss

@@ -545,6 +545,43 @@ input[type=color] {
   outline: 1px solid var(--color-primary);
 }
 
+.custom-simple-file-input {
+  max-width: 100%;
+  border: 1px solid;
+  @include lightDark(border-color, #DDD, #666);
+  border-radius: 4px;
+  padding: $-s $-m;
+}
+.custom-simple-file-input::file-selector-button {
+  background-color: transparent;
+  text-decoration: none;
+  font-size: 0.8rem;
+  line-height: 1.4em;
+  padding: $-xs $-s;
+  border: 1px solid;
+  font-weight: 400;
+  outline: 0;
+  border-radius: 4px;
+  cursor: pointer;
+  margin-right: $-m;
+  @include lightDark(color, #666, #AAA);
+  @include lightDark(border-color, #CCC, #666);
+  &:hover, &:focus, &:active {
+    @include lightDark(color, #444, #BBB);
+    border: 1px solid #CCC;
+    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);
+    background-color: #F2F2F2;
+    @include lightDark(background-color, #f8f8f8, #444);
+    filter: none;
+  }
+  &:active {
+    border-color: #BBB;
+    background-color: #DDD;
+    color: #666;
+    box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
+  }
+}
+
 input.shortcut-input {
   width: auto;
   max-width: 120px;

resources/views/exports/import.blade.php

@@ -5,27 +5,30 @@
     <div class="container small">
 
         <main class="card content-wrap auto-height mt-xxl">
-            <div class="grid half left-focus v-end gap-m wrap">
-                <div>
-                    <h1 class="list-heading">{{ trans('entities.import') }}</h1>
-                    <p class="text-muted mb-s">
-                        TODO - Desc
-{{--                        {{ trans('entities.permissions_desc') }}--}}
-                    </p>
-                </div>
-            </div>
+            <h1 class="list-heading">{{ trans('entities.import') }}</h1>
             <form action="{{ url('/import') }}" method="POST">
                 {{ csrf_field() }}
-                <div class="flex-container-row justify-flex-end">
-                    <div class="form-group mb-m">
-                        @include('form.checkbox', ['name' => 'images', 'label' => 'Include Images'])
-                        @include('form.checkbox', ['name' => 'attachments', 'label' => 'Include Attachments'])
+                <div class="flex-container-row justify-space-between wrap gap-x-xl gap-y-s">
+                    <p class="flex min-width-l text-muted mb-s">
+                        Import content using a portable zip export from the same, or a different, instance.
+                        Select a ZIP file to import then press "Validate Import" to proceed.
+                        After the file has been uploaded and validated you'll be able to configure & confirm the import in the next view.
+                    </p>
+                    <div class="flex-none min-width-l flex-container-row justify-flex-end">
+                        <div class="mb-m">
+                            <label for="file">Select ZIP file to upload</label>
+                            <input type="file"
+                                   accept=".zip,application/zip,application/x-zip-compressed"
+                                   name="file"
+                                   id="file"
+                                   class="custom-simple-file-input">
+                        </div>
                     </div>
                 </div>
 
                 <div class="text-right">
                     <a href="{{ url('/books') }}" class="button outline">{{ trans('common.cancel') }}</a>
-                    <button type="submit" class="button">{{ trans('entities.import') }}</button>
+                    <button type="submit" class="button">{{ trans('entities.import_validate') }}</button>
                 </div>
             </form>
         </main>