Skip to content

Commit 7b2eac9

Browse files
mckenzieartsmckenziearts
committed
🚧 wip
1 parent ad14bfa commit 7b2eac9

File tree

4 files changed

+85
-44
lines changed

4 files changed

+85
-44
lines changed

‎app/Http/Livewire/Articles/Create.php‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,7 @@ public function store()
5252
'title' => $this->title,
5353
'slug' => $this->slug,
5454
'body' => $this->body,
55+
'published_at' => $this->published_at,
5556
'submitted_at' => $this->submitted_at,
5657
'approved_at' => $this->approved_at,
5758
'show_toc' => $this->show_toc,

‎app/Traits/WithArticleAttributes.php‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ trait WithArticleAttributes
1313
public bool $show_toc = false;
1414
public ?string $submitted_at = null;
1515
public ?string $approved_at = null;
16+
public ?string $published_at = null;
1617
public $file;
1718

1819
protected $rules = [
@@ -23,7 +24,7 @@ trait WithArticleAttributes
2324
'file' => 'nullable|image|max:2048', // 1MB Max
2425
];
2526

26-
public function removeImage()
27+
public function removeImage(): void
2728
{
2829
$this->file = null;
2930
}
@@ -38,7 +39,7 @@ public function messages(): array
3839
];
3940
}
4041

41-
public function updatedTitle(string $value)
42+
public function updatedTitle(string $value): void
4243
{
4344
$this->slug = Str::slug($value);
4445
}

‎resources/views/livewire/articles/_form.blade.php‎

Lines changed: 28 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,16 @@ class="origin-top-right absolute right-0 mt-2 -mr-1 w-56 rounded-md shadow-lg bg
7777
<div class="absolute inset-0 z-30 overflow-hidden">
7878
<div class="absolute inset-0" aria-hidden="true">
7979
<div class="fixed inset-y-0 right-0 pl-10 max-w-full flex">
80-
<div @click.away="open = false;" x-show="open" x-transition:enter="transform transition ease-in-out duration-500 sm:duration-700" x-transition:enter-start="translate-x-full" x-transition:enter-end="translate-x-0" x-transition:leave="transform transition ease-in-out duration-500 sm:duration-700" x-transition:leave-start="translate-x-0" x-transition:leave-end="translate-x-full" class="w-screen max-w-md">
80+
<div @click.away="open = false;"
81+
x-show="open"
82+
x-transition:enter="transform transition ease-in-out duration-500 sm:duration-700"
83+
x-transition:enter-start="translate-x-full"
84+
x-transition:enter-end="translate-x-0"
85+
x-transition:leave="transform transition ease-in-out duration-500 sm:duration-700"
86+
x-transition:leave-start="translate-x-0"
87+
x-transition:leave-end="translate-x-full"
88+
class="w-screen max-w-md"
89+
>
8190
<div class="h-full flex flex-col py-6 bg-skin-card shadow-xl overflow-y-scroll">
8291
<div class="px-4 sm:px-6">
8392
<div class="flex items-start justify-between">
@@ -113,12 +122,29 @@ class="origin-top-right absolute right-0 mt-2 -mr-1 w-56 rounded-md shadow-lg bg
113122
<div>
114123
<dt class="text-sm leading-7 font-semibold text-skin-base">Afficher le Sommaire</dt>
115124
</div>
116-
<button type="button" class="relative inline-flex shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 bg-skin-card-muted" aria-pressed="false" x-ref="switch" x-state:on="Enabled" x-state:off="Not Enabled" :class="{ 'bg-green-600': on, 'bg-skin-card-muted': !(on) }" aria-labelledby="availability-label" :aria-pressed="on.toString()" @click="on = !on">
125+
<button type="button"
126+
class="relative inline-flex shrink-0 h-6 w-11 border border-skin-base rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 bg-skin-card-muted"
127+
:class="{ 'bg-green-600': on, 'bg-skin-card-muted': !(on) }"
128+
aria-pressed="false"
129+
x-ref="switch"
130+
x-state:on="Enabled"
131+
x-state:off="Not Enabled"
132+
aria-labelledby="availability-label"
133+
:aria-pressed="on.toString()"
134+
@click="on = !on"
135+
>
117136
<span class="sr-only">{{ __('Afficher le sommaire') }}</span>
118137
<span aria-hidden="true" class="pointer-events-none inline-block h-5 w-5 rounded-full bg-skin-menu shadow transform ring-0 transition ease-in-out duration-200 translate-x-0" x-state:on="Enabled" x-state:off="Not Enabled" :class="{ 'translate-x-5': on, 'translate-x-0': !(on) }"></span>
119138
</button>
120139
</div>
121140

141+
@if(Auth::user()->hasAnyRole(['admin', 'moderator']))
142+
<div class="mt-8">
143+
<x-label for="published_at">Date de publication</x-label>
144+
<x-input wire:model.defer="published_at" id="published_at" name="published_at" class="mt-1" type="date" />
145+
</div>
146+
@endif
147+
122148
<div class="mt-8">
123149
<x-label for="slug">URL Slug</x-label>
124150
<x-input wire:model.debounce.500ms="slug" id="slug" name="slug" class="mt-1" type="text" autocomplete="off" required />

‎resources/views/vendor/wireui/components/datetime-picker.blade.php‎

Lines changed: 53 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -5,20 +5,23 @@
55
is12H: @boolean($timeFormat == '12'),
66
readonly: @boolean($readonly),
77
disabled: @boolean($disabled),
8+
min: @js($min ? $min->format('Y-m-d\TH:i') : null),
9+
max: @js($max ? $max->format('Y-m-d\TH:i') : null),
810
},
911
withoutTimezone: @boolean($withoutTimezone),
10-
timezone: '{{ $timezone }}',
11-
userTimezone: '{{ $userTimezone }}',
12-
parseFormat: '{{ $parseFormat }}',
12+
timezone: '{{ $timezone }}',
13+
userTimezone: '{{ $userTimezone }}',
14+
parseFormat: '{{ $parseFormat }}',
1315
displayFormat: '{{ $displayFormat }}',
1416
weekDays: @lang('wireui::messages.datePicker.days'),
1517
monthNames: @lang('wireui::messages.datePicker.months'),
1618
withoutTime: @boolean($withoutTime),
1719
})"
18-
class="relative">
20+
class="relative"
21+
{{ $attributes->only('wire:key') }}>
1922
<x-dynamic-component
20-
:component="WireUiComponent::resolve('input')"
21-
{{ $attributes->whereDoesntStartWith(['wire:model', 'x-model']) }}
23+
:component="WireUi::component('input')"
24+
{{ $attributes->whereDoesntStartWith(['wire:model', 'x-model', 'wire:key']) }}
2225
:borderless="$borderless"
2326
:shadowless="$shadowless"
2427
:label="$label"
@@ -29,23 +32,26 @@ class="relative">
2932
:prepend="$prepend"
3033
readonly
3134
x-on:click="togglePicker"
32-
::value="getInputValue()">
35+
x-bind:value="model ? getDisplayValue(): null">
3336
@if (!$readonly && !$disabled)
3437
<x-slot name="append">
3538
<div class="absolute inset-y-0 right-3 z-5 flex items-center justify-center">
3639
<div class="flex items-center gap-x-2 my-auto
3740
{{ $errors->has($name) ? 'text-negative-400 dark:text-negative-600' : 'text-secondary-400' }}">
38-
<x-dynamic-component
39-
:component="WireUiComponent::resolve('icon')"
40-
class="cursor-pointer w-4 h-4 hover:text-negative-500 transition-colors ease-in-out duration-150"
41-
x-cloak
42-
name="x"
43-
x-show="model"
44-
x-on:click="clearDate()"
45-
/>
41+
42+
@if ($clearable)
43+
<x-dynamic-component
44+
:component="WireUi::component('icon')"
45+
class="cursor-pointer w-4 h-4 hover:text-negative-500 transition-colors ease-in-out duration-150"
46+
x-cloak
47+
name="x"
48+
x-show="model"
49+
x-on:click="clearDate()"
50+
/>
51+
@endif
4652

4753
<x-dynamic-component
48-
:component="WireUiComponent::resolve('icon')"
54+
:component="WireUi::component('icon')"
4955
class="cursor-pointer w-5 h-5"
5056
:name="$rightIcon"
5157
x-on:click="togglePicker"
@@ -77,7 +83,7 @@ class="cursor-pointer w-5 h-5"
7783
aria-hidden="true">
7884
</div>
7985

80-
<div class="w-full rounded-t-md border border-secondary-200 bg-white transform shadow-lg
86+
<div class="w-full rounded-t-md border border-secondary-200 bg-white shadow-lg
8187
dark:bg-secondary-800 dark:border-secondary-600 transition-all relative
8288
max-h-96 overflow-y-auto p-3 sm:w-72 sm:rounded-xl"
8389
x-show="popover"
@@ -92,31 +98,31 @@ class="cursor-pointer w-5 h-5"
9298
@unless ($withoutTips)
9399
<div class="grid grid-cols-3 gap-x-2 text-center text-secondary-600">
94100
<x-dynamic-component
95-
:component="WireUiComponent::resolve('button')"
101+
:component="WireUi::component('button')"
96102
class="bg-secondary-100 border-none dark:bg-secondary-800"
97103
x-on:click="selectYesterday"
98-
label="{{ __('wireui::messages.datePicker.yesterday') }}"
104+
:label="__('wireui::messages.datePicker.yesterday')"
99105
/>
100106

101107
<x-dynamic-component
102-
:component="WireUiComponent::resolve('button')"
108+
:component="WireUi::component('button')"
103109
class="bg-secondary-100 border-none dark:bg-secondary-800"
104110
x-on:click="selectToday"
105-
label="{{ __('wireui::messages.datePicker.today') }}"
111+
:label="__('wireui::messages.datePicker.today')"
106112
/>
107113

108114
<x-dynamic-component
109-
:component="WireUiComponent::resolve('button')"
115+
:component="WireUi::component('button')"
110116
class="bg-secondary-100 border-none dark:bg-secondary-800"
111117
x-on:click="selectTomorrow"
112-
label="{{ __('wireui::messages.datePicker.tomorrow') }}"
118+
:label="__('wireui::messages.datePicker.tomorrow')"
113119
/>
114120
</div>
115121
@endunless
116122

117123
<div class="flex items-center justify-between">
118124
<x-dynamic-component
119-
:component="WireUiComponent::resolve('button')"
125+
:component="WireUi::component('button')"
120126
class="rounded-lg shrink-0"
121127
x-show="!monthsPicker"
122128
x-on:click="previousMonth"
@@ -139,7 +145,7 @@ class="rounded-lg shrink-0"
139145

140146

141147
<x-dynamic-component
142-
:component="WireUiComponent::resolve('button')"
148+
:component="WireUi::component('button')"
143149
class="rounded-lg shrink-0"
144150
x-show="!monthsPicker"
145151
x-on:click="nextMonth"
@@ -154,7 +160,7 @@ class="rounded-lg shrink-0"
154160
x-transition>
155161
<template x-for="(monthName, index) in monthNames" :key="`month.${monthName}`">
156162
<x-dynamic-component
157-
:component="WireUiComponent::resolve('button')"
163+
:component="WireUi::component('button')"
158164
class="text-secondary-400 dark:border-0 dark:hover:bg-secondary-700 uppercase"
159165
x-on:click="selectMonth(index)"
160166
xs
@@ -165,21 +171,28 @@ class="text-secondary-400 dark:border-0 dark:hover:bg-secondary-700 uppercase"
165171

166172
<div class="grid grid-cols-7 gap-2">
167173
<template x-for="day in weekDays" :key="`week-day.${day}`">
168-
<span class="text-secondary-400 text-2xs text-center uppercase pointer-events-none"
169-
x-text="day"></span>
174+
<span class="text-secondary-400 text-3xs text-center uppercase pointer-events-none"
175+
x-text="day">
176+
</span>
170177
</template>
171178

172-
<template x-for="date in dates" :key="`week-date.${date.day}.${date.month}`">
179+
<template
180+
x-for="date in dates"
181+
:key="`week-date.${date.day}.${date.month}`">
173182
<div class="flex justify-center picker-days">
174183
<button class="text-sm w-7 h-6 focus:outline-none rounded-md focus:ring-2 focus:ring-ofsset-2 focus:ring-primary-600
175-
hover:bg-primary-100 dark:hover:bg-secondary-700 dark:focus:ring-secondary-400"
184+
hover:bg-primary-100 dark:hover:bg-secondary-700 dark:focus:ring-secondary-400
185+
disabled:cursor-not-allowed"
176186
:class="{
177-
'text-secondary-600 dark:text-secondary-400': date.month === month && !isSelected(date),
178-
'text-secondary-400 dark:text-secondary-600': date.month !== month,
179-
'text-primary-600 border border-primary-600 dark:border-gray-400': date.isToday && !isSelected(date),
180-
'text-white bg-primary-600 font-semibold border border-primary-600': isSelected(date),
181-
'hover:bg-primary-600 dark:bg-secondary-700 dark:border-secondary-400': isSelected(date),
187+
'text-secondary-600 dark:text-secondary-400': !date.isDisabled && !date.isSelected && date.month === month,
188+
'text-secondary-400 dark:text-secondary-600': date.isDisabled || date.month !== month,
189+
'text-primary-600 border border-primary-600 dark:border-gray-400': date.isToday && !date.isSelected,
190+
'disabled:text-primary-400 disabled:border-primary-400': date.isToday && !date.isSelected,
191+
'!text-white bg-primary-600 font-semibold border border-primary-600': date.isSelected,
192+
'disabled:bg-primary-400 disabled:border-primary-400': date.isSelected,
193+
'hover:bg-primary-600 dark:bg-secondary-700 dark:border-secondary-400': date.isSelected,
182194
}"
195+
:disabled="date.isDisabled"
183196
x-on:click="selectDate(date)"
184197
x-text="date.day"
185198
type="button">
@@ -192,17 +205,17 @@ class="text-secondary-400 dark:border-0 dark:hover:bg-secondary-700 uppercase"
192205

193206
<div x-show="tab === 'time'" x-transition>
194207
<x-dynamic-component
195-
:component="WireUiComponent::resolve('input')"
208+
:component="WireUi::component('input')"
196209
id="search.{{ $attributes->wire('model')->value() }}"
197210
label="Select time"
198211
x-model="searchTime"
199-
::placeholder="modelTime ? modelTime : '12:00'"
212+
x-bind:placeholder="getSearchPlaceholder"
200213
x-ref="searchTime"
201214
x-on:input.debounce.150ms="onSearchTime($event.target.value)"
202215
/>
203216

204217
<div x-ref="timesContainer"
205-
class="mt-1 w-full h-52 pb-1 pt-2 overflow-y-auto flex flex-col picker-times">
218+
class="mt-1 w-full max-h-52 pb-1 pt-2 overflow-y-auto flex flex-col picker-times">
206219
<template x-for="time in filteredTimes">
207220
<button class="group rounded-md focus:outline-none focus:bg-primary-100 dark:focus:bg-secondary-700
208221
relative py-2 pl-2 pr-9 text-left transition-colors ease-in-out duration-100 cursor-pointer select-none
@@ -211,15 +224,15 @@ class="mt-1 w-full h-52 pb-1 pt-2 overflow-y-auto flex flex-col picker-times">
211224
'text-primary-600': modelTime === time.value,
212225
'text-secondary-700': modelTime !== time.value,
213226
}"
214-
:name="`time.${time.value}`"
227+
:name="`times.${time.value}`"
215228
type="button"
216229
x-on:click="selectTime(time)">
217230
<span x-text="time.label"></span>
218231
<span class="text-primary-600 dark:text-secondary-400 group-hover:text-white
219232
absolute inset-y-0 right-0 flex items-center pr-4"
220233
x-show="modelTime === time.value">
221234
<x-dynamic-component
222-
:component="WireUiComponent::resolve('icon')"
235+
:component="WireUi::component('icon')"
223236
name="check"
224237
class="h-5 w-5"
225238
/>

0 commit comments

Comments
 (0)