add guides on importing excel files

darwin1501 · Nov 2, 2021 · 63253ad · 63253ad
1 parent 6f718f7
commit 63253ad
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 2 deletions.
diff --git a/public/img/png/excel_table_format.png b/public/img/png/excel_table_format.png
diff --git a/public/js/students.js b/public/js/students.js
@@ -584,4 +584,14 @@ const clcoseImportSuccessModal = (()=>{
     importSuccessModal.classList.remove('bg-gray-500', 'bg-opacity-70');
 })
 
+const importingGuides = document.getElementById('import_guides');
 
+const showImportGuideModal = (()=>{
+    importingGuides.classList.remove('hidden');
+    importingGuides.classList.add('bg-gray-500', 'bg-opacity-70');
+})
+
+const closeImportGuideModal = (()=>{
+    importingGuides.classList.add('hidden');
+    importingGuides.classList.remove('bg-gray-500', 'bg-opacity-70');
+})
diff --git a/resources/views/include/modals/importing/import_guides.blade.php b/resources/views/include/modals/importing/import_guides.blade.php
@@ -0,0 +1,14 @@
+<div id="import_guides" class="fixed flex h-screen hidden inset-0 items-center justify-center z-10">
+    {{-- card --}}
+    <div class="absolute bg-white m-auto p-6 r-0 rounded-lg w-2/6">
+        <div>
+            <button onclick="closeImportGuideModal()" class="close-btn p-2 pl-4 pr-4 hover:bg-red-400 hover:text-white">&times;</button>
+        </div>
+        <div>
+            <p class="account-type text-center text-xl mb-2">Excel File Table Specification</p>
+            <p class="text-center text-sm mb-4 text-gray-500">The table must follow the table structure and table name on the image below.</p>
+            <br>
+            <img src="{{url('/img/png/excel_table_format.png')}}">
+        </div>
+    </div>
+</div>
diff --git a/resources/views/include/modals/importing/import_xls.blade.php b/resources/views/include/modals/importing/import_xls.blade.php
@@ -1,11 +1,12 @@
 <div id="import_xls" class="fixed flex h-screen hidden inset-0 items-center justify-center z-10">
     {{-- card --}}
-    <div class="absolute bg-white m-auto p-6 r-0 rounded-lg w-2/4">
+    <div class="absolute bg-white m-auto p-6 r-0 rounded-lg w-2/6">
         <div>
             <button onclick="closeImportXlsModal()" class="close-btn p-2 pl-4 pr-4 hover:bg-red-400 hover:text-white">&times;</button>
         </div>
         <div>
-            <p class="account-type text-center mb-4">Import Students From excel Files</p>
+            <p class="account-type text-center text-xl mb-2">Import Students From excel Files</p>
+            <p class="text-center text-sm mb-4 text-gray-500"><strong>Note:</strong> please see the excel file <a class="text-blue-400 cursor-pointer font-bold" onclick="showImportGuideModal()">specification</a> before importing any excel file.</p>
             <br>
             <div class="flex justify-center">
                 <input type="file" id="fileUpload" accept=".xls,.xlsx">

diff --git a/resources/views/web/students/students.blade.php b/resources/views/web/students/students.blade.php
@@ -87,6 +87,7 @@ class=" py-1 px-3 text-center text-xs text-white rounded-full bg-gray-400 cursor
 @include('include.modals.importing.import_xls')
 @include('include.modals.import_message.import_failed')
 @include('include.modals.import_message.import_success')
+@include('include.modals.importing.import_guides')
 {{-- animation --}}
 @include('include.modals.importing.importing')
 @endsection