#22 - wip

resources/js/Shared/Activity.vue

@@ -6,9 +6,9 @@
     />
     <div class="relative flex space-x-3">
       <div>
-        <span :class="[statusInfo.iconBackground, statusInfo.iconForeground, 'h-8 w-8 rounded-full flex items-center justify-center ring-8 ring-white']">
+        <span :class="[statusInfo.outline.background, statusInfo.outline.foreground, 'h-8 w-8 rounded-full flex items-center justify-center ring-8 ring-white']">
           <component
-            :is="statusInfo.icon"
+            :is="statusInfo.outline.icon"
             class="w-5 h-5 text-white"
           />
         </span>
@@ -32,8 +32,8 @@
 </template>
 
 <script>
-import {CheckIcon, ClockIcon, DocumentTextIcon, ThumbDownIcon, ThumbUpIcon, XIcon} from '@heroicons/vue/outline'
 import {computed} from 'vue'
+import {useStatusInfo} from '@/Composables/statusInfo'
 
 export default {
   name: 'VacationRequestActivity',
@@ -48,65 +48,7 @@ export default {
     },
   },
   setup(props) {
-    const statuses = [
-      {
-        text: 'Utworzony',
-        icon: DocumentTextIcon,
-        value: 'created',
-        iconForeground: 'text-white',
-        iconBackground: 'bg-gray-400',
-      },
-      {
-        text: 'Czeka na akceptację od technicznego',
-        icon: ClockIcon,
-        value: 'waiting_for_technical',
-        iconForeground: 'text-white',
-        iconBackground: 'bg-amber-400',
-      },
-      {
-        text: 'Czeka na akceptację od administracyjnego',
-        icon: ClockIcon,
-        value: 'waiting_for_administrative',
-        iconForeground: 'text-white',
-        iconBackground: 'bg-amber-400',
-      },
-      {
-        text: 'Odrzucony',
-        icon: ThumbDownIcon,
-        value: 'rejected',
-        iconForeground: 'text-white',
-        iconBackground: 'bg-rose-600',
-      },
-      {
-        text: 'Zaakceptowany przez technicznego',
-        icon: ThumbUpIcon,
-        value: 'accepted_by_technical',
-        iconForeground: 'text-white',
-        iconBackground: 'bg-green-500',
-      },
-      {
-        text: 'Zaakceptowany przez administracyjnego',
-        icon: ThumbUpIcon,
-        value: 'accepted_by_administrative',
-        iconForeground: 'text-white',
-        iconBackground: 'bg-green-500',
-      },
-      {
-        text: 'Zatwierdzony',
-        icon: CheckIcon,
-        value: 'approved',
-        iconForeground: 'text-white',
-        iconBackground: 'bg-blumilk-500',
-      },
-      {
-        text: 'Anulowany',
-        icon: XIcon,
-        value: 'canceled',
-        iconForeground: 'text-white',
-        iconBackground: 'bg-gray-900',
-      },
-    ]
-    const statusInfo = computed(() => statuses.find(status => status.value === props.activity.state))
+    const statusInfo = computed(() => useStatusInfo(props.activity.state))
 
     return {
       statusInfo,

resources/js/Shared/Status.vue

@@ -1,16 +1,16 @@
 <template>
   <div class="flex items-center">
     <component
-      :is="statusInfo.icon"
-      :class="[statusInfo.color ,'w-5 h-5 mr-1']"
+      :is="statusInfo.solid.icon"
+      :class="[statusInfo.solid.color ,'w-5 h-5 mr-1']"
     />
     <span>{{ statusInfo.text }}</span>
   </div>
 </template>
 
 <script>
-import {CheckIcon, ClockIcon, DocumentTextIcon, ThumbDownIcon, ThumbUpIcon, XIcon} from '@heroicons/vue/solid'
 import {computed} from 'vue'
+import {useStatusInfo} from '@/Composables/statusInfo'
 
 export default {
   name: 'VacationRequestStatus',
@@ -25,57 +25,7 @@ export default {
     },
   },
   setup(props) {
-    const statuses = [
-      {
-        text: 'Utworzony',
-        icon: DocumentTextIcon,
-        value: 'created',
-        color: 'text-gray-400',
-      },
-      {
-        text: 'Czeka na akceptację od technicznego',
-        icon: ClockIcon,
-        value: 'waiting_for_technical',
-        color: 'text-amber-400',
-      },
-      {
-        text: 'Czeka na akceptację od administracyjnego',
-        icon: ClockIcon,
-        value: 'waiting_for_administrative',
-        color: 'text-amber-400',
-      },
-      {
-        text: 'Odrzucony',
-        icon: ThumbDownIcon,
-        value: 'rejected',
-        color: 'text-rose-600',
-      },
-      {
-        text: 'Zaakceptowany przez technicznego',
-        icon: ThumbUpIcon,
-        value: 'accepted_by_technical',
-        color: 'text-green-500',
-      },
-      {
-        text: 'Zaakceptowany przez administracyjnego',
-        icon: ThumbUpIcon,
-        value: 'accepted_by_administrative',
-        color: 'text-green-500',
-      },
-      {
-        text: 'Zatwierdzony',
-        icon: CheckIcon,
-        value: 'approved',
-        color: 'text-blumilk-500',
-      },
-      {
-        text: 'Anulowany',
-        icon: XIcon,
-        value: 'canceled',
-        color: 'text-gray-900',
-      },
-    ]
-    const statusInfo = computed(() => statuses.find(status => status.value === props.status))
+    const statusInfo = computed(() => useStatusInfo(props.status))
 
     return {
       statusInfo,