kamilniemczycki/toby
1
0
Fork 0
Code Issues Pull Requests 2 Projects Releases Activity

#23 - wip

Browse Source
This commit is contained in:
Adrian Hopek
2022-01-21 15:17:59 +01:00
parent a62a428781
commit 5a51f24342
23 changed files with 2492 additions and 183 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
resources/js/Pages/VacationDays.vue → resources/js/Pages/VacationLimits.vue
View File

@@ -10,45 +10,6 @@
Zarządzaj dostepnymi dniami urlopów dla użytkowników.
</p>
</div>
<div class="ml-4">
<span class="relative z-0 inline-flex shadow-sm rounded-md">
<InertiaLink
v-if="yearPeriods.prev"
:preserve-scroll="true"
replace
href="/vacation-days"
:data="{year: yearPeriods.prev.year}"
class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-blumilk-500 focus:border-blumilk-500"
>
<ChevronLeftIcon class="h-5 w-5" />
</InertiaLink>
<span
v-else
class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500"
>
<ChevronLeftIcon class="h-5 w-5" />
</span>
<span class="-ml-px relative inline-flex items-center px-2 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-500">
{{ yearPeriods.current.year }}
</span>
<InertiaLink
v-if="yearPeriods.next"
:preserve-scroll="true"
href="/vacation-days"
replace
:data="{year: yearPeriods.next.year}"
class="-ml-px relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-blumilk-500 focus:border-blumilk-500"
>
<ChevronRightIcon class="h-5 w-5" />
</InertiaLink>
<span
v-else
class="-ml-px relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500"
>
<ChevronRightIcon class="h-5 w-5" />
</span>
</span>
</div>
</div>
<div class="border-t border-gray-200">
<div class="overflow-x-auto xl:overflow-x-visible overflow-y-auto xl:overflow-y-visible">
@@ -84,7 +45,7 @@
</thead>
<tbody class="bg-white divide-y divide-gray-100">
<tr
v-for="item in form.items"
v-for="(item, index) in form.items"
:key="item.id"
class="hover:bg-blumilk-25"
>
@@ -128,14 +89,15 @@
v-model="item.days"
type="number"
min="0"
class="block w-full shadow-sm rounded-md sm:text-sm"
:class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': false, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': true }"
class="block w-full shadow-sm rounded-md sm:text-sm disabled:bg-slate-50 disabled:text-slate-500 disabled:border-slate-200 disabled:shadow-none disabled:cursor-not-allowed"
:disabled="!item.hasVacation"
:class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors[`items.${index}.days`], 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors[`items.${index}.days`] }"
>
<p
v-if="false"
v-if="form.errors[`items.${index}.days`]"
class="mt-2 text-sm text-red-600"
>
{{ form.errors.name }}
{{ form.errors[`items.${index}.days`] }}
</p>
</div>
</td>
@@ -153,20 +115,12 @@
</tbody>
</table>
<div class="flex justify-end py-3 px-4">
<div class="space-x-3">
<InertiaLink
href="/users"
class="bg-white py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blumilk-500"
>
Anuluj
</InertiaLink>
<button
type="submit"
class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blumilk-600 hover:bg-blumilk-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blumilk-500"
>
Zapisz
</button>
</div>
<button
type="submit"
class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blumilk-600 hover:bg-blumilk-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blumilk-500"
>
Zapisz
</button>
</div>
</form>
</div>
@@ -175,30 +129,27 @@
</template>
<script>
import { Switch } from '@headlessui/vue';
import {ChevronLeftIcon, ChevronRightIcon} from '@heroicons/vue/solid';
import {Switch} from '@headlessui/vue';
import {useForm} from '@inertiajs/inertia-vue3';
export default {
name: 'VacationDays',
name: 'VacationLimits',
components: {
Switch,
ChevronLeftIcon,
ChevronRightIcon,
},
props: {
vacationLimits: {
limits: {
type: Object,
default: () => null,
},
yearPeriods: {
years: {
type: Object,
default: () => null,
},
},
setup(props) {
const form = useForm({
items: props.vacationLimits.data,
items: props.limits.data,
});
return {
@@ -209,9 +160,16 @@ export default {
submitVacationDays() {
this.form
.transform(data => ({
data,
items: data.items.map(item => ({
id: item.id,
hasVacation: item.hasVacation,
days: item.hasVacation ? item.days : null,
})),
}))
.put('/vacation-days');
.put('/vacation-days', {
preserveState: (page) => Object.keys(page.props.errors).length,
preserveScroll: true,
});
},
},
};

52
resources/js/Shared/MainMenu.vue
View File

@@ -19,6 +19,53 @@
<!-- Right section on desktop -->
<div class="hidden lg:ml-4 lg:flex lg:items-center lg:py-5 lg:pr-0.5">
<div class="mr-4">
<Menu
as="div"
class="relative inline-block text-left"
>
<div>
<MenuButton class="inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-1 focus:ring-gray-300">
{{ years.current }}
<ChevronDownIcon class="-mr-1 ml-2 h-5 w-5" />
</MenuButton>
</div>
<transition
enter-active-class="transition ease-out duration-100"
enter-from-class="transform opacity-0 scale-95"
enter-to-class="transform opacity-100 scale-100"
leave-active-class="transition ease-in duration-75"
leave-from-class="transform opacity-100 scale-100"
leave-to-class="transform opacity-0 scale-95"
>
<MenuItems class="origin-top-right absolute right-0 mt-2 w-32 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none">
<div class="py-1">
<MenuItem
v-for="(item, index) in years.navigation"
:key="index"
v-slot="{ active }"
>
<InertiaLink
:href="item.link"
as="button"
method="post"
:preserve-state="false"
:class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'flex w-full px-4 py-2 text-sm']"
>
{{ item.year }}
<CheckIcon
v-if="item.year === years.current"
class="h-5 w-5 text-blumilk-500 ml-2"
/>
</InertiaLink>
</MenuItem>
</div>
</MenuItems>
</transition>
</Menu>
</div>
<button
type="button"
class="flex-shrink-0 p-1 text-cyan-200 rounded-full hover:text-white hover:bg-white hover:bg-opacity-10 focus:outline-none focus:ring-2 focus:ring-white"
@@ -246,6 +293,7 @@ import {
import {BellIcon, MenuIcon, XIcon} from '@heroicons/vue/outline';
import {computed} from 'vue';
import {usePage} from '@inertiajs/inertia-vue3';
import {ChevronDownIcon, CheckIcon} from '@heroicons/vue/solid';
export default {
name: 'MainMenu',
@@ -263,9 +311,12 @@ export default {
BellIcon,
MenuIcon,
XIcon,
ChevronDownIcon,
CheckIcon,
},
setup() {
const user = computed(() => usePage().props.value.auth.user);
const years = computed(() => usePage().props.value.years);
const navigation = [
{name: 'Strona główna', href: '/', current: true},
@@ -282,6 +333,7 @@ export default {
return {
user,
years,
navigation,
userNavigation,
};