#22 - vacation calendar (#51)

* change layout * change layout * #22 - wip * wip * wip * #22 - wip * #22 - wip * #22 - wip * #22 - wip * #22 - fix * #22 - wip * #22 - added some tests * #22 - wip * #22 - wip * #22 - fix * #22 - wip * #22 - wip * #22 - wip * #22 - fix * #22 - fix * #22 - fix * #22 - fix * #22 - fix * #22 - fix * #22 - cr fixes * #22 - cr fix Co-authored-by: EwelinaLasowy <ewelina.lasowy@blumilk.pl>
2022-02-15 15:08:26 +01:00
parent b161981d5a
commit 6c352b629c
50 changed files with 1682 additions and 397 deletions
--- a/resources/js/Shared/Activity.vue
+++ b/resources/js/Shared/Activity.vue
@@ -0,0 +1,58 @@
+<template>
+  <div :class="{'relative pb-8': last}">
+    <span
+      v-if="last"
+      class="absolute top-4 left-4 -ml-px h-full w-0.5 bg-gray-200"
+    />
+    <div class="relative flex space-x-3">
+      <div>
+        <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.outline.icon"
+            class="w-5 h-5 text-white"
+          />
+        </span>
+      </div>
+      <div class="min-w-0 flex-1 pt-1.5 flex justify-between space-x-4">
+        <div class="flex flex-col items-start">
+          <div class="text-sm font-medium text-gray-700">
+            {{ statusInfo.text }}
+          </div>
+          <div class="text-right text-sm whitespace-nowrap font-medium text-gray-400">
+            {{ activity.user }}
+          </div>
+        </div>
+        <div class="text-right text-sm whitespace-nowrap text-gray-500 flex flex-col">
+          <time>{{ activity.date }}</time>
+          <time>{{ activity.time }}</time>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {computed} from 'vue'
+import {useStatusInfo} from '@/Composables/statusInfo'
+
+export default {
+  name: 'VacationRequestActivity',
+  props: {
+    activity: {
+      type: Object,
+      default: () => null,
+    },
+    last: {
+      type: Boolean,
+      default: () => false,
+    },
+  },
+  setup(props) {
+    const statusInfo = computed(() => useStatusInfo(props.activity.state))
+
+    return {
+      statusInfo,
+    }
+  },
+}
+</script>