[projects overview], changes

app/package-lock.json

@@ -10,6 +10,9 @@
 			"dependencies": {
 				"@capacitor/core": "^4.5.0",
 				"@capacitor/preferences": "^4.0.2",
+				"@fullcalendar/core": "^6.0.2",
+				"@fullcalendar/daygrid": "^6.0.2",
+				"@fullcalendar/vue3": "^6.0.2",
 				"@ionic/vue": "^6.3.6",
 				"@mdi/font": "5.9.55",
 				"@vuelidate/core": "^2.0.0",
@@ -1850,6 +1853,31 @@
 				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
+		"node_modules/@fullcalendar/core": {
+			"version": "6.0.2",
+			"resolved": "https://registry.npmjs.org/@fullcalendar/core/-/core-6.0.2.tgz",
+			"integrity": "sha512-mpJ+8l2t6b98umrRG2FfDnMqEr0Z+wNT2SjY7H49V3wcj4oe3gwuty8GBYHG/vgxS+DXR/NcEvW1CsMQh4Cr/A==",
+			"dependencies": {
+				"preact": "^10.0.5"
+			}
+		},
+		"node_modules/@fullcalendar/daygrid": {
+			"version": "6.0.2",
+			"resolved": "https://registry.npmjs.org/@fullcalendar/daygrid/-/daygrid-6.0.2.tgz",
+			"integrity": "sha512-OoHo+HbKmunq2hy5K6T2390DmSwXIENxHBeKFPlUXHK48xD/zXQI3N1zRlZRd83+Yrq+vDF6l8ObO9PMu2leJw==",
+			"peerDependencies": {
+				"@fullcalendar/core": "~6.0.2"
+			}
+		},
+		"node_modules/@fullcalendar/vue3": {
+			"version": "6.0.2",
+			"resolved": "https://registry.npmjs.org/@fullcalendar/vue3/-/vue3-6.0.2.tgz",
+			"integrity": "sha512-TuinDWNm39YYon4kNeO+8xU/bZ0ETzV8tV0eAFxDmArX8icrs1bUzIy3veUI8A11/WAt8ffuu65Hc93TK+SJZQ==",
+			"peerDependencies": {
+				"@fullcalendar/core": "~6.0.2",
+				"vue": "^3.0.11"
+			}
+		},
 		"node_modules/@hapi/hoek": {
 			"version": "9.3.0",
 			"resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.3.0.tgz",
@@ -10353,6 +10381,15 @@
 			"integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
 			"dev": true
 		},
+		"node_modules/preact": {
+			"version": "10.11.3",
+			"resolved": "https://registry.npmjs.org/preact/-/preact-10.11.3.tgz",
+			"integrity": "sha512-eY93IVpod/zG3uMF22Unl8h9KkrcKIRs2EGar8hwLZZDU1lkjph303V9HZBwufh2s736U6VXuhD109LYqPoffg==",
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/preact"
+			}
+		},
 		"node_modules/prelude-ls": {
 			"version": "1.2.1",
 			"resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
@@ -14980,6 +15017,26 @@
 				}
 			}
 		},
+		"@fullcalendar/core": {
+			"version": "6.0.2",
+			"resolved": "https://registry.npmjs.org/@fullcalendar/core/-/core-6.0.2.tgz",
+			"integrity": "sha512-mpJ+8l2t6b98umrRG2FfDnMqEr0Z+wNT2SjY7H49V3wcj4oe3gwuty8GBYHG/vgxS+DXR/NcEvW1CsMQh4Cr/A==",
+			"requires": {
+				"preact": "^10.0.5"
+			}
+		},
+		"@fullcalendar/daygrid": {
+			"version": "6.0.2",
+			"resolved": "https://registry.npmjs.org/@fullcalendar/daygrid/-/daygrid-6.0.2.tgz",
+			"integrity": "sha512-OoHo+HbKmunq2hy5K6T2390DmSwXIENxHBeKFPlUXHK48xD/zXQI3N1zRlZRd83+Yrq+vDF6l8ObO9PMu2leJw==",
+			"requires": {}
+		},
+		"@fullcalendar/vue3": {
+			"version": "6.0.2",
+			"resolved": "https://registry.npmjs.org/@fullcalendar/vue3/-/vue3-6.0.2.tgz",
+			"integrity": "sha512-TuinDWNm39YYon4kNeO+8xU/bZ0ETzV8tV0eAFxDmArX8icrs1bUzIy3veUI8A11/WAt8ffuu65Hc93TK+SJZQ==",
+			"requires": {}
+		},
 		"@hapi/hoek": {
 			"version": "9.3.0",
 			"resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.3.0.tgz",
@@ -21366,6 +21423,11 @@
 			"integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
 			"dev": true
 		},
+		"preact": {
+			"version": "10.11.3",
+			"resolved": "https://registry.npmjs.org/preact/-/preact-10.11.3.tgz",
+			"integrity": "sha512-eY93IVpod/zG3uMF22Unl8h9KkrcKIRs2EGar8hwLZZDU1lkjph303V9HZBwufh2s736U6VXuhD109LYqPoffg=="
+		},
 		"prelude-ls": {
 			"version": "1.2.1",
 			"resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",

app/package.json

@@ -10,6 +10,9 @@
 	"dependencies": {
 		"@capacitor/core": "^4.5.0",
 		"@capacitor/preferences": "^4.0.2",
+		"@fullcalendar/core": "^6.0.2",
+		"@fullcalendar/daygrid": "^6.0.2",
+		"@fullcalendar/vue3": "^6.0.2",
 		"@ionic/vue": "^6.3.6",
 		"@mdi/font": "5.9.55",
 		"@vuelidate/core": "^2.0.0",

app/public/mock/v1/overview/projects.GET.json

@@ -3,37 +3,41 @@
 		{
 			"id": 1,
 			"name": "Master task 1",
-			"starts_at": "2022-05-10T00:00:00+00:00",
-			"deadline": "2022-05-10T00:00:00+00:00",
-			"is_finished": false,
-			"project_code": "CO-2201"
+			"starts_at": "2023-01-01",
+			"deadline": "2023-01-09",
+			"is_finished": true,
+			"project_code": "CO-2201",
+			"color": "#BB86FC"
 		},
 
 		{
-			"id": 1,
-			"name": "Master task 1",
-			"starts_at": "2022-05-10T00:00:00+00:00",
-			"deadline": "2022-11-10T00:00:00+00:00",
+			"id": 2,
+			"name": "Master task 2",
+			"starts_at": "2023-01-02",
+			"deadline": "2023-01-05",
 			"is_finished": false,
-			"project_code": "CO-2201"
+			"project_code": "CO-2201",
+			"color": "#FF7B5E"
 		},
 
 		{
-			"id": 1,
-			"name": "Master task 1",
-			"starts_at": "2022-05-10T00:00:00+00:00",
-			"deadline": "2022-15-10T00:00:00+00:00",
+			"id": 3,
+			"name": "Master task 3",
+			"starts_at": "2023-01-12",
+			"deadline": "2023-01-15",
 			"is_finished": false,
-			"project_code": "CO-2201"
+			"project_code": "CO-2201",
+			"color": "#011995"
 		},
 
 		{
-			"id": 1,
-			"name": "Master task 1",
-			"starts_at": "2022-05-10T00:00:00+00:00",
-			"deadline": "2022-20-10T00:00:00+00:00",
+			"id": 4,
+			"name": "Master task 4",
+			"starts_at": "2023-01-12",
+			"deadline": "2023-02-12",
 			"is_finished": false,
-			"project_code": "CO-2201"
+			"project_code": "CO-2201",
+			"color": "#BABE00"
 		}
 	],
 	"status": 200

app/src/plugins/app/_config/router.ts

@@ -84,7 +84,18 @@ const routes: Array<RouteRecordRaw> = [
 						name: 'Dashboard - User',
 						meta: { title: 'Váš profil' },
 						component: () => import('@/plugins/tm@profile/profile/my-profile.vue')
-					}
+					},
+					// {
+					// 	path: '/app/search/:searchText',
+					// 	redirect: to => {
+					// 	return { path: '/app/search', query: { q: to.params.searchText } }
+					// 	},
+					// },
+					// {
+					// 	path: '/app/search',
+					// 	name: 'Search',
+					// 	component: () => import('@/plugins/lib@search/search/search.vue')
+					// }
 				]
 			}
 		]

app/src/plugins/lib@search/search/search.vue

@@ -0,0 +1,4 @@
+<template>
+	<div>
+	</div>
+</template>

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>

app/src/plugins/tm@overview/_components/z-tasks-search.vue

@@ -62,14 +62,11 @@ export default {
 	border-bottom: 1px solid rgba(33, 33, 33, 0.08)
 	gap: 25px
 	flex-wrap: wrap
-	position: sticky
-	top: 0
-	z-index: 9999
-	background: white
-
+	flex: 0 0 auto
 .subheader-input
 	max-width: 250px !important
 	min-width: 250px
+	height: 56px
 
 	&:deep(.v-input__details)
 		display: none

app/src/plugins/tm@overview/tasks-unscheduled/tasks-unscheduled.vue

@@ -37,7 +37,6 @@ export default {
 		try {
 			this.unscheduledTasks = await this.$axios.get_auth_data('v1/overview/unscheduled-tasks')
 			this.filterUnscheduledTasks()
-			console.log(this.unscheduledTasks)
 		} catch (error) {
 			this.unscheduledTasks = error
 			this.$toast.error(error)