Skip to content

Commit 950ed24

Browse files
ousidousid
committed
add tailwindcss layout
1 parent 6e444cd commit 950ed24

File tree

5 files changed

+128
-7
lines changed

5 files changed

+128
-7
lines changed

‎resources/views/livewire/bootstrap/csv-importer.blade.php

+112
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
<div class="relative z-10" x-data="{ open: @entangle('open') }" x-show="open" x-cloak>
2+
<div class="fixed inset-0"></div>
3+
4+
<div class="fixed inset-0 overflow-hidden">
5+
<div class="absolute inset-0 overflow-hidden">
6+
<div class="pointer-events-none fixed inset-y-0 right-0 flex max-w-full pl-10 sm:pl-16">
7+
<div class="pointer-events-auto w-screen max-w-md">
8+
<form wire:submit.prevent="import" class="flex h-full flex-col divide-y divide-gray-200 bg-white shadow-xl">
9+
<div class="py-6 px-4 sm:px-6">
10+
<div class="flex items-center justify-between">
11+
<h2 class="text-lg font-medium">{{ __('Import') }}</h2>
12+
<div class="ml-3 flex h-7 items-center">
13+
<button type="button" class="rounded-md text-indigo-200 hover:text-indigo-300 focus:outline-none focus:ring-2 focus:ring-white" wire:click="toggle">
14+
<span class="sr-only">{{ __('Close panel') }}</span>
15+
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
16+
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
17+
</svg>
18+
</button>
19+
</div>
20+
</div>
21+
</div>
22+
<div class="h-0 flex-1 overflow-y-auto">
23+
<div class="flex flex-1 flex-col justify-between">
24+
<div class="p-4 sm:p-6">
25+
<div>
26+
<!-- File drop -->
27+
<div class="max-w-lg flex justify-center px-6 pt-5 pb-6 border-2 border-dashed rounded-md"
28+
x-bind:class="{
29+
'border-gray-300': ! dropping,
30+
'border-gray-400': dropping,
31+
}"
32+
x-on:dragover.prevent="dropping = true"
33+
x-on:dragleave.prevent="dropping = false"
34+
x-on:drop.prevent="dropping = false"
35+
x-on:drop.prevnet="handleDrop($event)"
36+
x-data="{
37+
dropping: false,
38+
39+
handleDrop(e) {
40+
@this.upload('file', event.dataTransfer.files[0])
41+
}
42+
}"
43+
>
44+
<div class="space-y-1 text-center">
45+
<svg class="mx-auto h-12 w-12 text-gray-400" stroke="currentColor" fill="none" viewBox="0 0 24 24" aria-hidden="true">
46+
<path stroke-linecap="round" stroke-linejoin="round" d="M3 10h18M3 14h18m-9-4v8m-7 0h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" />
47+
</svg>
48+
<div class="flex text-sm text-gray-600">
49+
<label for="file" class="relative cursor-pointer bg-white rounded-md font-medium text-indigo-600 hover:text-indigo-500 focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-indigo-500">
50+
<span>Upload a file</span>
51+
<input id="file" wire:model="file" name="file" type="file" class="sr-only">
52+
</label>
53+
<p class="pl-1">or drag and drop</p>
54+
</div>
55+
<p class="text-xs text-gray-500">
56+
CSV file up to 50MB
57+
</p>
58+
</div>
59+
</div>
60+
</div>
61+
62+
@error('file')
63+
<span class="mt-2 text-red-500 font-medium text-sm">{{ $message }}</span>
64+
@enderror
65+
<!-- End file drop -->
66+
67+
<!-- Column selection -->
68+
{{-- If file uloaded --}}
69+
@if ($fileHeaders)
70+
<div class="mt-8">
71+
<h2 class="font-medium">Match columns</h2>
72+
73+
<div class="mt-4 space-y-5">
74+
@foreach ($columnsToMap as $column => $value)
75+
<div class="grid grid-cols-4 gap-4 items-start">
76+
<label for="{{ $column }}" class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2 col-span-1">
77+
{{ $columnLabels[$column] ?? ucfirst(str_replace(['_', '-'], ' ', $column)) }}*
78+
</label>
79+
<div class="mt-1 sm:mt-0 sm:col-span-3">
80+
<select wire:model.defer="columnsToMap.{{$column}}" type="text" name="{{ $column }}" id="{{ $column }}" class="max-w-lg block w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:max-w-xs sm:text-sm border-gray-300 rounded-md">
81+
<option value="">{{ __('Select a column') }}</option>
82+
@foreach ($fileHeaders as $fileHeader)
83+
<option value="{{$fileHeader}}">{{ $fileHeader }}</option>
84+
@endforeach
85+
</select>
86+
87+
@error('columnsToMap.' . $column)
88+
<span class="mt-2 text-red-500 font-medium text-sm">{{ $message }}</span>
89+
@enderror
90+
</div>
91+
</div>
92+
@endforeach
93+
</div>
94+
</div>
95+
@endif
96+
{{-- Endif file uloaded --}}
97+
<!-- End columns selection -->
98+
</div>
99+
</div>
100+
</div>
101+
102+
<livewire:csv-imports :model="$model"/>
103+
104+
<div class="flex flex-shrink-0 justify-end px-4 py-4">
105+
<button type="submit" class="ml-4 inline-flex justify-center rounded-md border border-transparent bg-indigo-600 py-2 px-4 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 disabled:opacity-50" {{ $fileRowCount === 0 ? 'disabled': ''}}>Import</button>
106+
</div>
107+
</form>
108+
</div>
109+
</div>
110+
</div>
111+
</div>
112+
</div>

‎resources/views/livewire/bootstrap/handle-imports.blade.php

+15-3
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,15 @@
1-
<div>
2-
{{-- Handle Imports --}}
3-
</div>
1+
<div wire:poll.2s.visible>
2+
{{-- For each import --}}
3+
@foreach ($this->imports as $import)
4+
<div class="p-6">
5+
<div>
6+
<h2 class="font-medium">Importing {{ $import->file_name }}</h2>
7+
<span class="text-gray-700 text-sm">Imported {{ $import->processed_rows }}/{{ $import->total_rows }} rows</span>
8+
<div class="w-full bg-indigo-100 rounded">
9+
<div class="mt-2 w-full bg-indigo-500 rounded h-2" style="width: {{ $import->percentageComplete() }}%"></div>
10+
</div>
11+
</div>
12+
</div>
13+
@endforeach
14+
{{-- Endforeach import --}}
15+
</div>

‎resources/views/livewire/bootstrap/import-csv.blade.php renamed to ‎resources/views/livewire/tailwindcss/csv-importer.blade.php

File renamed without changes.

‎resources/views/livewire/tailwindcss/import-csv.blade.php

-3
This file was deleted.

‎src/Http/Livewire/CsvImporter.php

+1-1
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,7 @@ public function import()
8080
public function render()
8181
{
8282
return view(
83-
csv_view_path('import-csv')
83+
csv_view_path('csv-importer')
8484
);
8585
}
8686

0 commit comments

Comments
 (0)