Merge pull request #7812 from aparcar/gantt

feat: add Gantt chart view for boards

Author: grnd-alt

package-lock.json

@@ -48,6 +48,7 @@
     "blueimp-md5": "^2.19.0",
     "chroma-js": "^3.2.0",
     "dompurify": "^3.4.0",
+    "frappe-gantt": "^1.2.2",
     "lodash": "^4.18.1",
     "markdown-it": "^14.1.1",
     "markdown-it-link-attributes": "^4.0.1",

package.json

@@ -226,6 +226,21 @@
 
 				<NcActions :aria-label="t('deck', 'View Modes')"
 					:name="t('deck', 'Toggle View Modes')">
+					<NcActionButton :model-value="viewMode === 'kanban'"
+						@click="setViewMode('kanban')">
+						<template #icon>
+							<ViewColumnIcon :size="20" decorative />
+						</template>
+						{{ t('deck', 'Kanban view') }}
+					</NcActionButton>
+					<NcActionButton :model-value="viewMode === 'gantt'"
+						@click="setViewMode('gantt')">
+						<template #icon>
+							<ChartGanttIcon :size="20" decorative />
+						</template>
+						{{ t('deck', 'Gantt view') }}
+					</NcActionButton>
+					<NcActionSeparator />
 					<NcActionButton @click="toggleShowArchived">
 						<template #icon>
 							<ArchiveIcon :size="20" decorative />
@@ -264,7 +279,7 @@
 <script>
 import { mapState, mapGetters } from 'vuex'
 import { subscribe, unsubscribe } from '@nextcloud/event-bus'
-import { NcActions, NcActionButton, NcAvatar, NcButton, NcPopover, NcModal } from '@nextcloud/vue'
+import { NcActions, NcActionButton, NcActionSeparator, NcAvatar, NcButton, NcPopover, NcModal } from '@nextcloud/vue'
 import labelStyle from '../mixins/labelStyle.js'
 import ArchiveIcon from 'vue-material-design-icons/ArchiveOutline.vue'
 import ImageIcon from 'vue-material-design-icons/ImageMultipleOutline.vue'
@@ -273,6 +288,8 @@ import FilterOffIcon from 'vue-material-design-icons/FilterOffOutline.vue'
 import TableColumnPlusAfter from 'vue-material-design-icons/TableColumnPlusAfter.vue'
 import ArrowCollapseVerticalIcon from 'vue-material-design-icons/ArrowCollapseVertical.vue'
 import ArrowExpandVerticalIcon from 'vue-material-design-icons/ArrowExpandVertical.vue'
+import ViewColumnIcon from 'vue-material-design-icons/ViewColumn.vue'
+import ChartGanttIcon from 'vue-material-design-icons/ChartGantt.vue'
 import SessionList from './SessionList.vue'
 import { isNotifyPushEnabled } from '../sessions.js'
 import CreateNewCardCustomPicker from '../views/CreateNewCardCustomPicker.vue'
@@ -294,6 +311,9 @@ export default {
 		FilterOffIcon,
 		ArrowCollapseVerticalIcon,
 		ArrowExpandVerticalIcon,
+		ViewColumnIcon,
+		ChartGanttIcon,
+		NcActionSeparator,
 		TableColumnPlusAfter,
 		SessionList,
 	},
@@ -327,6 +347,7 @@ export default {
 		...mapGetters([
 			'canEdit',
 			'canManage',
+			'viewMode',
 		]),
 		...mapState({
 			isFullApp: state => state.isFullApp,
@@ -406,6 +427,9 @@ export default {
 		toggleShowCardCover() {
 			this.$store.dispatch('toggleShowCardCover')
 		},
+		setViewMode(mode) {
+			this.$store.dispatch('setViewMode', mode)
+		},
 		toggleShowArchived() {
 			this.$store.dispatch('toggleShowArchived')
 		},

src/components/Controls.vue

@@ -46,6 +46,10 @@
 					</form>
 				</template>
 			</NcEmptyContent>
+			<GanttView v-else-if="!isEmpty && !loading && viewMode === 'gantt'"
+				key="gantt"
+				:board="board"
+				:stacks="stacksByBoard" />
 			<div v-else-if="!isEmpty && !loading"
 				key="board"
 				ref="board"
@@ -88,6 +92,7 @@ import Controls from '../Controls.vue'
 import DeckIcon from '../icons/DeckIcon.vue'
 import CheckIcon from 'vue-material-design-icons/Check.vue'
 import Stack from './Stack.vue'
+import GanttView from './GanttView.vue'
 import { NcEmptyContent, NcModal, NcButton, NcTextField, NcLoadingIcon } from '@nextcloud/vue'
 import GlobalSearchResults from '../search/GlobalSearchResults.vue'
 import { showError } from '../../helpers/errors.js'
@@ -102,6 +107,7 @@ export default {
 		DeckIcon,
 		Draggable,
 		Stack,
+		GanttView,
 		NcEmptyContent,
 		NcModal,
 		NcTextField,
@@ -138,6 +144,7 @@ export default {
 		...mapGetters([
 			'canEdit',
 			'canManage',
+			'viewMode',
 		]),
 		stacksByBoard() {
 			return this.board?.id ? this.$store.getters.stacksByBoard(this.board.id) : []