From a56a28fbb7eaff40a639c2d06f56de255cd654ea Mon Sep 17 00:00:00 2001
From: Dan Brown <ssddanbrown@googlemail.com>
Date: Tue, 29 Oct 2024 14:21:32 +0000
Subject: [PATCH] ZIP Exports: Built out initial import view

Added syles for non-custom, non-image file inputs.
Started planning out back-end handling.
---
 app/Exports/Controllers/ImportController.php |  8 ++++-
 lang/en/entities.php                         |  1 +
 resources/sass/_forms.scss                   | 37 ++++++++++++++++++++
 resources/views/exports/import.blade.php     | 31 ++++++++--------
 4 files changed, 62 insertions(+), 15 deletions(-)

diff --git a/app/Exports/Controllers/ImportController.php b/app/Exports/Controllers/ImportController.php
index acc803a0f..9eefb0974 100644
--- 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 1a61b629a..45ca4cf6b 100644
--- 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 67df41714..1c679aaa0 100644
--- 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 df8f705cb..b7030f114 100644
--- 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>