Restyling of column mapping
This commit is contained in:
Roman Krček
@@ -488,42 +488,42 @@
|
||||
|
||||
{#if hasSavedMapping && !showMappingEditor}
|
||||
<!-- Simplified view when we have saved mapping -->
|
||||
<div class="mb-6 rounded-lg border border-green-200 bg-green-50 p-6">
|
||||
<div class="text-center">
|
||||
<svg class="mx-auto mb-4 h-16 w-16 text-green-600" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
<h3 class="mb-3 text-xl font-semibold text-green-800">Configuration Complete</h3>
|
||||
<p class="mb-2 text-green-700">
|
||||
<span class="font-medium">Spreadsheet:</span>
|
||||
{savedSheetInfo?.name}
|
||||
</p>
|
||||
<p class="mb-2 text-green-700">
|
||||
<span class="font-medium">Sheet:</span>
|
||||
{selectedSheetName}
|
||||
</p>
|
||||
<p class="mb-6 text-green-700">
|
||||
Column mapping loaded from your previous session.<br />
|
||||
Everything is ready to proceed to the next step.
|
||||
</p>
|
||||
<button
|
||||
onclick={handleShowEditor}
|
||||
class="inline-flex items-center rounded-lg border border-green-300 px-4 py-2 text-sm font-medium text-green-700 transition-colors hover:bg-green-100 hover:text-green-900"
|
||||
>
|
||||
<svg class="mr-2 h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<div class="mb-6 rounded-lg border border-blue-200 bg-blue-50 p-4">
|
||||
<div class="flex">
|
||||
<div class="flex-shrink-0">
|
||||
<svg
|
||||
class="h-5 w-5 text-blue-400"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"
|
||||
fill-rule="evenodd"
|
||||
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
Make changes if needed
|
||||
</button>
|
||||
</div>
|
||||
<div class="ml-3 flex-1 md:flex md:justify-between">
|
||||
<div>
|
||||
<h3 class="text-sm font-medium text-blue-800">Saved Configuration Found</h3>
|
||||
<div class="mt-2 text-sm text-blue-700">
|
||||
<p>
|
||||
Using saved mapping for sheet <span class="font-semibold">"{selectedSheetName}"</span> from
|
||||
spreadsheet <span class="font-semibold">"{savedSheetInfo?.name}"</span>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 md:mt-0 md:ml-6">
|
||||
<button
|
||||
onclick={handleShowEditor}
|
||||
class="whitespace-nowrap rounded-md border border-transparent bg-blue-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
|
||||
>
|
||||
Edit Mapping
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
@@ -735,16 +735,55 @@
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Mapping status -->
|
||||
{#if mappingComplete}
|
||||
<div class="rounded border border-green-200 bg-green-50 p-3">
|
||||
<p class="text-sm text-green-800">
|
||||
✓ All required fields are mapped! You can continue to the next step.
|
||||
</p>
|
||||
<div class="rounded-md border border-green-200 bg-green-50 p-4">
|
||||
<div class="flex">
|
||||
<div class="flex-shrink-0">
|
||||
<svg
|
||||
class="h-5 w-5 text-green-400"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="ml-3">
|
||||
<p class="text-sm font-medium text-green-800">
|
||||
All required fields are mapped. You can now proceed.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="rounded border border-yellow-200 bg-yellow-50 p-3">
|
||||
<p class="text-sm text-yellow-800">Please map all required fields to continue.</p>
|
||||
<div class="rounded-md bg-yellow-50 p-4">
|
||||
<div class="flex">
|
||||
<div class="flex-shrink-0">
|
||||
<svg
|
||||
class="h-5 w-5 text-yellow-400"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 3.01-1.742 3.01H4.42c-1.53 0-2.493-1.676-1.743-3.01l5.58-9.92zM10 5a1 1 0 011 1v3a1 1 0 01-2 0V6a1 1 0 011-1zm1 5a1 1 0 10-2 0v2a1 1 0 102 0v-2z"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="ml-3">
|
||||
<p class="text-sm text-yellow-800">
|
||||
Please map all required fields (<span class="text-red-500">*</span>) to continue.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
@@ -7,7 +7,6 @@
|
||||
import {
|
||||
BORDER_CONFIG,
|
||||
TEXT_CONFIG,
|
||||
PLACEHOLDER_CONFIG,
|
||||
calculateGrid,
|
||||
getAbsolutePositionPt,
|
||||
getAbsolutePhotoDimensionsPt,
|
||||
|
||||
Reference in New Issue
Block a user