Sync progress
This commit is contained in:
@@ -29,28 +29,7 @@
|
||||
<p class="text-sm text-zinc-500">{steps[rota.currentStep - 1].description}</p>
|
||||
</header>
|
||||
|
||||
{#if rota.forbiddenPairs.length === 0}
|
||||
<div class="rounded-3xl border-2 border-dashed border-zinc-200 bg-white/50 py-16 text-center">
|
||||
<div class="mx-auto mb-3 flex size-12 items-center justify-center rounded-full bg-zinc-100">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
class="text-zinc-500"
|
||||
><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" /><circle cx="9" cy="7" r="4" /><path
|
||||
d="M22 21v-2a4 4 0 0 0-3-3.87"
|
||||
/><path d="M16 3.13a4 4 0 0 1 0 7.75" /></svg
|
||||
>
|
||||
</div>
|
||||
<p class="text-sm font-medium text-zinc-500">Δεν έχουν οριστεί περιορισμοί.</p>
|
||||
</div>
|
||||
{:else}
|
||||
{#if rota.forbiddenPairs.length > 0}
|
||||
<div class="space-y-3">
|
||||
{#each rota.forbiddenPairs as pair, i (pair)}
|
||||
<div
|
||||
|
||||
@@ -36,37 +36,68 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<header class="mb-2">
|
||||
<header class="mb-6">
|
||||
<p class="text-sm text-zinc-500">{steps[rota.currentStep - 1].description}</p>
|
||||
</header>
|
||||
<div class="grid grid-cols-2 gap-4 rounded-2xl border border-zinc-200 bg-white p-6">
|
||||
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="space-y-2">
|
||||
<p class="ml-1 text-[10px] font-black tracking-widest text-zinc-500 uppercase">Month</p>
|
||||
<select
|
||||
bind:value={rota.selectedMonth}
|
||||
class="w-full rounded-xl border border-zinc-200 bg-zinc-50 px-2 py-2 font-semibold text-zinc-600 outline-none focus:border-blue-600 focus:ring-2 focus:ring-blue-600/10"
|
||||
>
|
||||
{#each monthOptions as month}
|
||||
<option value={month.value}>{month.label}</option>
|
||||
{/each}
|
||||
</select>
|
||||
<p class="ml-1 text-[10px] font-black tracking-widest text-zinc-500 uppercase">MONTH</p>
|
||||
<div class="relative">
|
||||
<select
|
||||
bind:value={rota.selectedMonth}
|
||||
class="w-full appearance-none rounded-xl border border-zinc-200 bg-white px-4 py-3 font-semibold text-zinc-700 transition-all outline-none focus:border-zinc-400 focus:ring-4 focus:ring-zinc-100"
|
||||
>
|
||||
{#each monthOptions as month}
|
||||
<option value={month.value}>{month.label}</option>
|
||||
{/each}
|
||||
</select>
|
||||
<div class="pointer-events-none absolute top-1/2 right-4 -translate-y-1/2 text-zinc-400">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="14"
|
||||
height="14"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="3"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"><path d="m6 9 6 6 6-6" /></svg
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<p class="ml-1 text-[10px] font-black tracking-widest text-zinc-500 uppercase">Year</p>
|
||||
<select
|
||||
bind:value={rota.selectedYear}
|
||||
class="w-full rounded-xl border border-zinc-200 bg-zinc-50 px-2 py-2 font-semibold text-zinc-600 outline-none focus:border-blue-600 focus:ring-2 focus:ring-blue-600/10"
|
||||
>
|
||||
{#each yearOptions as year}
|
||||
<option value={year}>{year}</option>
|
||||
{/each}
|
||||
</select>
|
||||
<p class="ml-1 text-[10px] font-black tracking-widest text-zinc-500 uppercase">YEAR</p>
|
||||
<div class="relative">
|
||||
<select
|
||||
bind:value={rota.selectedYear}
|
||||
class="w-full appearance-none rounded-xl border border-zinc-200 bg-white px-4 py-3 font-semibold text-zinc-700 transition-all outline-none focus:border-zinc-400 focus:ring-4 focus:ring-zinc-100"
|
||||
>
|
||||
{#each yearOptions as year}
|
||||
<option value={year}>{year}</option>
|
||||
{/each}
|
||||
</select>
|
||||
<div class="pointer-events-none absolute top-1/2 right-4 -translate-y-1/2 text-zinc-400">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="14"
|
||||
height="14"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="3"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"><path d="m6 9 6 6 6-6" /></svg
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-span-4 mt-8 space-y-2">
|
||||
<p class="ml-1 text-[10px] font-black tracking-widest text-zinc-500 uppercase">Holidays</p>
|
||||
<div class="mt-8 space-y-2">
|
||||
<p class="ml-1 text-[10px] font-black tracking-widest text-zinc-500 uppercase">HOLIDAYS</p>
|
||||
|
||||
<Popover.Root>
|
||||
<Popover.Trigger>
|
||||
@@ -74,45 +105,47 @@
|
||||
<Button
|
||||
{...props}
|
||||
variant="outline"
|
||||
class="w-full justify-start rounded-xl border-zinc-200 bg-white px-4 py-5 font-normal hover:bg-zinc-50"
|
||||
class="flex h-12 w-full items-center justify-between rounded-xl border-zinc-200 bg-white px-5 font-normal transition-all hover:bg-zinc-50"
|
||||
>
|
||||
<span class="mr-2 text-zinc-500"
|
||||
><svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
class="mr-3 text-teal-800"
|
||||
>
|
||||
<path d="M8 2v4" /><path d="M16 2v4" /><rect
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="text-zinc-500">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="18"
|
||||
height="18"
|
||||
x="3"
|
||||
y="4"
|
||||
rx="2"
|
||||
/><path d="m3 10 18 18" /><path d="m21 10-18 18" />
|
||||
</svg></span
|
||||
>
|
||||
{#if rota.holidays.length > 0}
|
||||
<span class="font-bold text-teal-800">
|
||||
Επιλέχθηκαν {rota.holidays.length}
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
class="text-teal-800"
|
||||
>
|
||||
<path d="M8 2v4" /><path d="M16 2v4" /><rect
|
||||
width="18"
|
||||
height="18"
|
||||
x="3"
|
||||
y="4"
|
||||
rx="2"
|
||||
/><path d="m3 10 18 18" /><path d="m21 10-18 18" />
|
||||
</svg>
|
||||
</span>
|
||||
{:else}
|
||||
<span class="text-zinc-500">Αργίες</span>
|
||||
{/if}
|
||||
|
||||
<div class="flex flex-col items-start leading-tight">
|
||||
{#if rota.holidays.length > 0}
|
||||
<span class="text-sm font-bold text-teal-800"
|
||||
>Επιλέχθηκαν {rota.holidays.length}</span
|
||||
>
|
||||
{:else}
|
||||
<span class="text-sm font-medium text-zinc-500">Αργίες</span>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</Button>
|
||||
{/snippet}
|
||||
</Popover.Trigger>
|
||||
|
||||
<Popover.Content
|
||||
class="z-50 rounded-2xl border border-zinc-200 bg-white p-4"
|
||||
sideOffset={8}
|
||||
>
|
||||
<Popover.Content class="z-50 rounded-2xl border border-zinc-200 bg-white p-4" sideOffset={8}>
|
||||
<Calendar.Root
|
||||
type="multiple"
|
||||
placeholder={rota.projectMonth}
|
||||
@@ -124,7 +157,6 @@
|
||||
<Calendar.Heading
|
||||
class="items-center justify-between pb-4 text-center text-sm font-bold text-zinc-800"
|
||||
/>
|
||||
|
||||
<div class="flex flex-col gap-4 sm:flex-row">
|
||||
{#each months as month}
|
||||
<Calendar.Grid>
|
||||
@@ -147,15 +179,8 @@
|
||||
<div
|
||||
{...props}
|
||||
class="flex size-8 items-center justify-center rounded-lg text-sm transition-all
|
||||
hover:bg-teal-100 hover:text-teal-800
|
||||
data-outside-month:opacity-20 data-selected:bg-teal-800 data-selected:font-bold
|
||||
data-selected:text-white
|
||||
data-unavailable:pointer-events-none
|
||||
data-unavailable:cursor-not-allowed
|
||||
data-unavailable:bg-zinc-200
|
||||
data-unavailable:text-zinc-500
|
||||
data-unavailable:line-through
|
||||
data-unavailable:opacity-50"
|
||||
hover:bg-teal-100 hover:text-teal-800
|
||||
data-outside-month:opacity-20 data-selected:bg-teal-800 data-selected:font-bold data-selected:text-white"
|
||||
>
|
||||
{date.day}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user