+
+
-
-
-
-
-
-
-
-
-
+
-
-
-
-
-
-
+
+ {{ $t('list.gantt.showTasksWithoutDates') }}
+
@@ -53,9 +29,8 @@
@@ -72,8 +47,9 @@ import {useI18n} from 'vue-i18n'
import {useAuthStore} from '@/stores/auth'
import ListWrapper from './ListWrapper.vue'
-import GanttChart from '@/components/tasks/gantt-component.vue'
+import GanttChart from '@/components/tasks/gantt-chart.vue'
import Fancycheckbox from '@/components/input/fancycheckbox.vue'
+import {format} from 'date-fns'
const props = defineProps({
listId: {
@@ -82,14 +58,16 @@ const props = defineProps({
},
})
-const DEFAULT_DAY_COUNT = 35
+const showTasksWithoutDates = ref(false)
-const showTaskswithoutDates = ref(false)
-const dayWidth = ref(DEFAULT_DAY_COUNT)
+const now = new Date()
+const defaultFrom = format(new Date((new Date()).setDate(now.getDate() - 15)), 'yyyy-LL-dd')
+const defaultTo = format(new Date((new Date()).setDate(now.getDate() + 55)), 'yyyy-LL-dd')
+const range = ref(`${defaultFrom} to ${defaultTo}`)
-const now = ref(new Date())
-const dateFrom = ref(new Date((new Date()).setDate(now.value.getDate() - 15)))
-const dateTo = ref(new Date((new Date()).setDate(now.value.getDate() + 30)))
+// TODO: only update once both dates are available (maybe use a watcher + refs instead?)
+const dateFrom = computed(() => range.value?.split(' to ')[0] ?? defaultFrom)
+const dateTo = computed(() => range.value?.split(' to ')[1] ?? defaultTo)
const {t} = useI18n({useScope: 'global'})
const authStore = useAuthStore()
@@ -98,6 +76,7 @@ const flatPickerConfig = computed(() => ({
altInput: true,
dateFormat: 'Y-m-d',
enableTime: false,
+ mode: 'range',
locale: {
firstDayOfWeek: authStore.settings.weekStart,
},
@@ -119,46 +98,35 @@ const flatPickerConfig = computed(() => ({
flex-direction: column;
}
- .range-picker {
- display: flex;
- margin-bottom: 1rem;
- width: 50%;
+ .field {
+ margin-bottom: 0;
+ width: 33%;
- @media screen and (max-width: $tablet) {
- flex-direction: column;
- width: 100%;
+ &:not(:last-child) {
+ padding-right: .5rem;
}
- .field {
- margin-bottom: 0;
- width: 33%;
+ @media screen and (max-width: $tablet) {
+ width: 100%;
+ max-width: 100%;
+ margin-top: .5rem;
+ padding-right: 0 !important;
+ }
- &:not(:last-child) {
- padding-right: .5rem;
- }
+ &, .input {
+ font-size: .8rem;
+ }
- @media screen and (max-width: $tablet) {
- width: 100%;
- max-width: 100%;
- margin-top: .5rem;
- padding-right: 0 !important;
- }
-
- &, .input {
- font-size: .8rem;
- }
-
- .select, .select select {
- height: auto;
- width: 100%;
- font-size: .8rem;
- }
+ .select, .select select {
+ height: auto;
+ width: 100%;
+ font-size: .8rem;
+ }
- .label {
- font-size: .9rem;
- padding-left: .4rem;
- }
+ .label {
+ font-size: .9rem;
+ padding-left: .4rem;
}
}
}
diff --git a/vendor/infectoone-vue-ganttastic-2.1.1.tgz b/vendor/infectoone-vue-ganttastic-2.1.1.tgz
new file mode 100644
index 00000000..69aba877
Binary files /dev/null and b/vendor/infectoone-vue-ganttastic-2.1.1.tgz differ