wip
This commit is contained in:
		@@ -125,7 +125,7 @@ const statuses = [
 | 
			
		||||
 | 
			
		||||
export function useStatusInfo() {
 | 
			
		||||
  const getStatues = () => statuses
 | 
			
		||||
  const findStatus = value => statuses.find(month => month.value === value)
 | 
			
		||||
  const findStatus = value => statuses.find(status => status.value === value)
 | 
			
		||||
 | 
			
		||||
  return {
 | 
			
		||||
    getStatues,
 | 
			
		||||
 
 | 
			
		||||
@@ -8,7 +8,7 @@ import HandHeartOutlineIcon from 'vue-material-design-icons/HandHeartOutline.vue
 | 
			
		||||
import CalendarCheckIcon from 'vue-material-design-icons/CalendarCheck.vue'
 | 
			
		||||
import MedicalBagIcon from 'vue-material-design-icons/MedicalBag.vue'
 | 
			
		||||
 | 
			
		||||
const statuses = [
 | 
			
		||||
const types = [
 | 
			
		||||
  {
 | 
			
		||||
    text: 'Urlop wypoczynkowy',
 | 
			
		||||
    value: 'vacation',
 | 
			
		||||
@@ -129,11 +129,11 @@ const statuses = [
 | 
			
		||||
]
 | 
			
		||||
 | 
			
		||||
export function useVacationTypeInfo() {
 | 
			
		||||
  const getStatues = () => statuses
 | 
			
		||||
  const findStatus = value => statuses.find(month => month.value === value)
 | 
			
		||||
  const getTypes = () => types
 | 
			
		||||
  const findType = value => types.find(type => type.value === value)
 | 
			
		||||
 | 
			
		||||
  return {
 | 
			
		||||
    getStatues,
 | 
			
		||||
    findStatus,
 | 
			
		||||
    getTypes,
 | 
			
		||||
    findType,
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
 
 | 
			
		||||
@@ -112,14 +112,7 @@
 | 
			
		||||
                v-if="day.vacations.includes(user.id)"
 | 
			
		||||
                class="flex justify-center items-center"
 | 
			
		||||
              >
 | 
			
		||||
                <Popper hover>
 | 
			
		||||
                  <VacationTypeCalendarIcon :status="day.vacationTypes[user.id]" />
 | 
			
		||||
                  <template #content>
 | 
			
		||||
                    <div class="px-2 py-1 bg-white text-xs text-gray-900 shadow-md ">
 | 
			
		||||
                      {{ day.vacationTypes[user.id] }}
 | 
			
		||||
                    </div>
 | 
			
		||||
                  </template>
 | 
			
		||||
                </Popper>
 | 
			
		||||
                <VacationTypeCalendarIcon :type="day.vacationTypes[user.id]" />
 | 
			
		||||
              </div>
 | 
			
		||||
            </td>
 | 
			
		||||
          </tr>
 | 
			
		||||
@@ -135,7 +128,6 @@ import {CheckIcon, ChevronDownIcon} from '@heroicons/vue/solid'
 | 
			
		||||
import {computed} from 'vue'
 | 
			
		||||
import {useMonthInfo} from '@/Composables/monthInfo'
 | 
			
		||||
import VacationTypeCalendarIcon from '@/Shared/VacationTypeCalendarIcon'
 | 
			
		||||
import Popper from 'vue3-popper'
 | 
			
		||||
 | 
			
		||||
export default {
 | 
			
		||||
  name: 'VacationCalendar',
 | 
			
		||||
@@ -147,7 +139,6 @@ export default {
 | 
			
		||||
    MenuItems,
 | 
			
		||||
    CheckIcon,
 | 
			
		||||
    ChevronDownIcon,
 | 
			
		||||
    Popper,
 | 
			
		||||
  },
 | 
			
		||||
  props: {
 | 
			
		||||
    users: {
 | 
			
		||||
 
 | 
			
		||||
@@ -119,7 +119,7 @@
 | 
			
		||||
                        class="hover:underline focus:outline-none"
 | 
			
		||||
                      >
 | 
			
		||||
                        <span class="absolute inset-0" />
 | 
			
		||||
                        Wniosek o {{ request.type.toLowerCase() }}
 | 
			
		||||
                        Wniosek o {{ findType(request.type).text.toLowerCase() }}
 | 
			
		||||
                        [{{ request.name }}]
 | 
			
		||||
                      </InertiaLink>
 | 
			
		||||
                    </h3>
 | 
			
		||||
@@ -185,7 +185,7 @@
 | 
			
		||||
                        class="hover:underline focus:outline-none"
 | 
			
		||||
                      >
 | 
			
		||||
                        <span class="absolute inset-0" />
 | 
			
		||||
                        Wniosek o {{ request.type.toLowerCase() }}
 | 
			
		||||
                        Wniosek o {{ findType(request.type).text.toLowerCase() }}
 | 
			
		||||
                        [{{ request.name }}]
 | 
			
		||||
                      </InertiaLink>
 | 
			
		||||
                    </h3>
 | 
			
		||||
@@ -302,6 +302,7 @@ import {computed} from 'vue'
 | 
			
		||||
import {usePage} from '@inertiajs/inertia-vue3'
 | 
			
		||||
import Status from '@/Shared/Status'
 | 
			
		||||
import VacationChart from '@/Shared/VacationChart'
 | 
			
		||||
import {useVacationTypeInfo} from '@/Composables/vacationTypeInfo'
 | 
			
		||||
 | 
			
		||||
export default {
 | 
			
		||||
  name: 'DashboardPage',
 | 
			
		||||
@@ -335,8 +336,11 @@ export default {
 | 
			
		||||
  setup() {
 | 
			
		||||
    const user = computed(() => usePage().props.value.auth.user)
 | 
			
		||||
 | 
			
		||||
    const { findType } = useVacationTypeInfo()
 | 
			
		||||
 | 
			
		||||
    return {
 | 
			
		||||
      user,
 | 
			
		||||
      findType,
 | 
			
		||||
    }
 | 
			
		||||
  },
 | 
			
		||||
}
 | 
			
		||||
 
 | 
			
		||||
@@ -85,7 +85,7 @@
 | 
			
		||||
              </InertiaLink>
 | 
			
		||||
            </td>
 | 
			
		||||
            <td class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-500">
 | 
			
		||||
              <VacationType :status="request.type" />
 | 
			
		||||
              <VacationType :type="request.type" />
 | 
			
		||||
            </td>
 | 
			
		||||
            <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
 | 
			
		||||
              {{ request.from }}
 | 
			
		||||
 
 | 
			
		||||
@@ -247,7 +247,7 @@
 | 
			
		||||
              </div>
 | 
			
		||||
            </td>
 | 
			
		||||
            <td class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-500">
 | 
			
		||||
              <VacationType :status="request.type" />
 | 
			
		||||
              <VacationType :type="request.type" />
 | 
			
		||||
            </td>
 | 
			
		||||
            <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
 | 
			
		||||
              {{ request.from }}
 | 
			
		||||
 
 | 
			
		||||
@@ -44,7 +44,7 @@
 | 
			
		||||
                Rodzaj urlopu
 | 
			
		||||
              </dt>
 | 
			
		||||
              <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
 | 
			
		||||
                <VacationType :status="request.type" />
 | 
			
		||||
                <VacationType :type="request.type" />
 | 
			
		||||
              </dd>
 | 
			
		||||
            </div>
 | 
			
		||||
            <div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
 | 
			
		||||
 
 | 
			
		||||
@@ -16,7 +16,7 @@ import {useVacationTypeInfo} from '@/Composables/vacationTypeInfo'
 | 
			
		||||
export default {
 | 
			
		||||
  name: 'VacationType',
 | 
			
		||||
  props: {
 | 
			
		||||
    status: {
 | 
			
		||||
    type: {
 | 
			
		||||
      type: String,
 | 
			
		||||
      default: () => null,
 | 
			
		||||
    },
 | 
			
		||||
@@ -26,9 +26,9 @@ export default {
 | 
			
		||||
    },
 | 
			
		||||
  },
 | 
			
		||||
  setup(props) {
 | 
			
		||||
    const { findStatus } = useVacationTypeInfo()
 | 
			
		||||
    const { findType } = useVacationTypeInfo()
 | 
			
		||||
 | 
			
		||||
    const vacationTypeInfo = computed(() => findStatus(props.status))
 | 
			
		||||
    const vacationTypeInfo = computed(() => findType(props.type))
 | 
			
		||||
 | 
			
		||||
    return {
 | 
			
		||||
      vacationTypeInfo,
 | 
			
		||||
 
 | 
			
		||||
@@ -1,24 +1,35 @@
 | 
			
		||||
<template>
 | 
			
		||||
  <div class="flex items-center">
 | 
			
		||||
    <div>
 | 
			
		||||
      <span :class="[statusInfo.outline.background, statusInfo.outline.foreground, 'flex items-center justify-center']">
 | 
			
		||||
        <component
 | 
			
		||||
          :is="statusInfo.outline.icon"
 | 
			
		||||
          :class="statusInfo.outline.background"
 | 
			
		||||
        />
 | 
			
		||||
      </span>
 | 
			
		||||
  <Popper hover>
 | 
			
		||||
    <div class="flex items-center">
 | 
			
		||||
      <div>
 | 
			
		||||
        <span :class="[typeInfo.outline.background, typeInfo.outline.foreground, 'flex items-center justify-center']">
 | 
			
		||||
          <component
 | 
			
		||||
            :is="typeInfo.outline.icon"
 | 
			
		||||
            :class="typeInfo.outline.background"
 | 
			
		||||
          />
 | 
			
		||||
        </span>
 | 
			
		||||
      </div>
 | 
			
		||||
    </div>
 | 
			
		||||
  </div>
 | 
			
		||||
    <template #content>
 | 
			
		||||
      <div class="px-2 py-1 bg-white text-xs text-gray-900 shadow-md ">
 | 
			
		||||
        {{ typeInfo.text }}
 | 
			
		||||
      </div>
 | 
			
		||||
    </template>
 | 
			
		||||
  </Popper>
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
<script>
 | 
			
		||||
import {computed} from 'vue'
 | 
			
		||||
import {useVacationTypeInfo} from '@/Composables/vacationTypeInfo'
 | 
			
		||||
import Popper from 'vue3-popper'
 | 
			
		||||
 | 
			
		||||
export default {
 | 
			
		||||
  name: 'VacationTypeCalendarIcon',
 | 
			
		||||
  components: {
 | 
			
		||||
    Popper,
 | 
			
		||||
  },
 | 
			
		||||
  props: {
 | 
			
		||||
    status: {
 | 
			
		||||
    type: {
 | 
			
		||||
      type: String,
 | 
			
		||||
      default: () => null,
 | 
			
		||||
    },
 | 
			
		||||
@@ -28,12 +39,12 @@ export default {
 | 
			
		||||
    },
 | 
			
		||||
  },
 | 
			
		||||
  setup(props) {
 | 
			
		||||
    const { findStatus } = useVacationTypeInfo()
 | 
			
		||||
    const { findType } = useVacationTypeInfo()
 | 
			
		||||
 | 
			
		||||
    const statusInfo = computed(() => findStatus(props.status))
 | 
			
		||||
    const typeInfo = computed(() => findType(props.type))
 | 
			
		||||
 | 
			
		||||
    return {
 | 
			
		||||
      statusInfo,
 | 
			
		||||
      typeInfo,
 | 
			
		||||
    }
 | 
			
		||||
  },
 | 
			
		||||
}
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user