[projects overview], changes

app/src/plugins/tm@dashboard/projects/_components/a-project-calendar.vue

@@ -0,0 +1,68 @@
+<template>
+  <div id="calendar" class="mb-12">
+    <FullCalendar ref="fullCalendar" :options="calendarOptions" />
+  </div>
+</template>
+<script>
+import FullCalendar from '@fullcalendar/vue3'
+import dayGridPlugin from '@fullcalendar/daygrid'
+
+export default {
+  components: {
+    FullCalendar
+  },
+  props: ['events', 'month'],
+  computed: {
+    calendarOptions() {
+      return {
+        plugins: [ dayGridPlugin ],
+        initialView: 'dayGridMonth',
+        headerToolbar: false,
+        locale: 'sk',
+        height: 650,
+        firstDay: 1,
+        dayHeaderClassNames: ['w-day-header'],
+        events: this.events
+      }
+    }
+  },
+  watch: {
+    month(selectedMonth) {
+      const currentYear = (new Date()).getFullYear()
+      this.$refs.fullCalendar?.getApi().gotoDate(new Date(currentYear, selectedMonth, 1))
+    }
+  },
+  mounted() {
+    const currentYear = (new Date()).getFullYear()
+    this.calendarOptions.events = this.events
+    this.$refs.fullCalendar?.getApi().gotoDate(new Date(currentYear, this.month, 1))
+  }
+}
+</script>
+<style lang="sass" scoped>
+#calendar
+  &:deep(.w-day-header)
+    text-align: left
+    padding-left: 10px
+  &:deep(.fc-daygrid-day-number)
+    color: black
+  &:deep(.fc-col-header-cell-cushion)
+    font-size: 20px
+    font-weight: 500
+    line-height: 45px
+    text-transform: capitalize
+    color: black
+  &:deep(.fc-theme-standard .fc-scrollgrid)
+    border: none
+  &:deep(.fc-event-start)
+    border-top-left-radius: 30px
+    border-bottom-left-radius: 30px
+  &:deep(.fc-event-end)
+    border-top-right-radius: 30px
+    border-bottom-right-radius: 30px
+  &:deep(.fc-event-title)
+    font-size: 12px
+    padding-left: 10px
+  &:deep(.fc-event)
+    margin-top: 5px
+</style>

app/src/plugins/tm@dashboard/projects/_components/a-project-filter.vue

@@ -0,0 +1,130 @@
+<template>
+  <v-row class="px-10 py-8 subheader">
+    <v-select
+        v-model="filter.selectedProject"
+        class="subheader-input"
+        :items="projects"
+        label="Projekt"
+        variant="outlined"
+    ></v-select>
+
+    <v-select
+        v-model="filter.selectedTeam"
+        class="subheader-input"
+        :items="teams"
+        label="Tím"
+        variant="outlined"
+    ></v-select>
+
+    <v-select
+        v-model="filter.selectedEmployee"
+        class="subheader-input"
+        :items="employees"
+        label="Zamestnanec"
+        variant="outlined"
+    ></v-select>
+
+    <v-select
+        v-model="filter.selectedMonth"
+        class="subheader-input"
+        :items="months"
+        label="Mesiac"
+        variant="outlined"
+    ></v-select>
+
+    <div class="subheader-input switch">
+      <p class="switch-label">Zobraziť ukončené</p>
+      <v-switch
+          v-model="filter.showFinishedTasks"
+          color="#6200EE"
+          hide-details
+      ></v-switch>
+    </div>
+  </v-row>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      months: [
+        { title: 'Január',       value: 0 },
+        { title: 'Február',      value: 1 },
+        { title: 'Marec',        value: 2 },
+        { title: 'Apríl',        value: 3 },
+        { title: 'Máj',          value: 4 },
+        { title: 'Jún',          value: 5 },
+        { title: 'Júl',          value: 6 },
+        { title: 'August',       value: 7 },
+        { title: 'September',    value: 8 },
+        { title: 'Október',      value: 9 },
+        { title: 'November',     value: 10 },
+        { title: 'December',     value: 11 },
+      ],
+      filter: {
+        selectedProject: null,
+        selectedTeam: null,
+        selectedEmployee: null,
+        selectedMonth: (new Date()).getMonth(),
+        showFinishedTasks: false
+      }
+    }
+  },
+  props: ['projects', 'teams', 'employees'],
+  emits: ['filterChanged'],
+  watch: {
+    filter: {
+      handler() {
+        this.$emit('filterChanged', this.filter)
+      },
+      deep: true
+    }
+  }
+}
+</script>
+<style lang="sass" scoped>
+// TODO: zjednotit styly ikon v hlobalnom sass subore
+// TODO: ↓
+.subheader
+  max-width: 100%
+  margin: 0
+  border-bottom: 1px solid rgba(33, 33, 33, 0.08)
+  gap: 25px
+  flex-wrap: wrap
+  position: sticky
+  top: 0
+  z-index: 9999
+  background: white
+
+.subheader-input
+  max-width: 250px !important
+  min-width: 250px
+
+  &:deep(.v-input__details)
+    display: none
+  &:deep(.v-selection-control)
+    height: 35px
+  &.disabled
+    pointer-events: none !important
+
+  @media (max-width: 600px)
+  .subheader
+    gap: 15px
+    padding: 20px !important
+
+  .subheader-input
+    max-width: 100% !important
+    min-width: 100%
+
+// TODO: ↑
+
+.subheader-input.switch
+  max-width: 100px !important
+  min-width: 100px !important
+.subheader-input
+  &:deep(.v-selection-control--dirty .v-switch__track)
+    background: rgba(187, 134, 252, 0.38) !important
+.switch-label
+  font-size: 12px
+  color: rgba(0, 0, 0, 0.6)
+</style>

app/src/plugins/tm@dashboard/projects/projects.vue

@@ -1,9 +1,54 @@
 <template>
-	<div></div>
+	<div>
+    <a-project-filter :projects="projects" @filterChanged="onFilterChanged"></a-project-filter>
+    <a-project-calendar :events="filteredEvents" :month="filter.selectedMonth"></a-project-calendar>
+  </div>
 </template>
 
 <script>
-export default {
+import AProjectCalendar from './_components/a-project-calendar.vue'
+import AProjectFilter from './_components/a-project-filter.vue'
 
+export default {
+  components: {
+    AProjectCalendar,
+    AProjectFilter
+  },
+  data() {
+    return {
+      filter: {
+        selectedEmployee: null,
+        selectedMonth: (new Date()).getMonth(),
+        selectedProject: null,
+        selectedTeam: null,
+        showFinishedTasks: false
+      },
+      projects: ['Projekt1', 'Projekt2', 'Projekt3', 'Projekt4'],
+      selectedProject: null,
+      events: [],
+      filteredEvents: []
+    }
+  },
+  async created() {
+    const events = await this.$axios.get_auth_data('v1/overview/projects')
+    this.events = events.map(item => ({
+      id: item.id,
+      title: `${item.project_code} - ${item.name}`,
+      start: item.starts_at,
+      end: item.deadline,
+      is_finished: item.is_finished,
+      project_code: item.project_code,
+      backgroundColor: item.color,
+      borderColor: item.color
+    }))
+    this.filteredEvents = this.events.filter(item => !item.is_finished)
+  },
+  methods: {
+    // TODO: prepojit filtrovanie na BE
+    onFilterChanged(filterValues) {
+      this.filter = filterValues
+      this.filteredEvents = this.events.filter(item => this.filter.showFinishedTasks || item.is_finished == false)
+    }
+  }
 }
-</script>
+</script>