ZIP Exports: Built out initial import view

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

diff --git a/app/Exports/Controllers/ImportController.php b/app/Exports/Controllers/ImportController.php
index acc803a0f0d4817ebb7f9bd4d90ee049ec2dfca4..9eefb0974389bd4a6a3b9014f54ce74626ec8518 100644 (file)
--- a/app/Exports/Controllers/ImportController.php
+++ b/app/Exports/Controllers/ImportController.php
@@ -14,11 +14,17 @@ class ImportController extends Controller
 
     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
     }
 }

diff --git a/lang/en/entities.php b/lang/en/entities.php
index 1a61b629a728b799983fef565db2b994f946023c..45ca4cf6b313a07d502ff1f437f9e28f4e3abc39 100644 (file)
--- a/lang/en/entities.php
+++ b/lang/en/entities.php
@@ -44,6 +44,7 @@ return [
     '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',

diff --git a/resources/sass/_forms.scss b/resources/sass/_forms.scss
index 67df4171499f841407d927e05e443346a0df762d..1c679aaa0ddef2462d6bbd705e2d6da3cf85e4fe 100644 (file)
--- a/resources/sass/_forms.scss
+++ b/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;

diff --git a/resources/views/exports/import.blade.php b/resources/views/exports/import.blade.php
index df8f705cb4547995cab8d4367d972aac451996ad..b7030f114782491c82e0c97b109cb25af2e42da3 100644 (file)
--- a/resources/views/exports/import.blade.php
+++ b/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>