implement card reference widget, fix DeckIcon.vue

bring back eslint and stylelint on compilation, fix almost all warnings, ignore some

Signed-off-by: Julien Veyssier <eneiluj@posteo.net>

src/components/ActivityEntry.vue

@@ -39,7 +39,7 @@ import RichText from '@juliushaertl/vue-richtext'
 import { NcUserBubble } from '@nextcloud/vue'
 import moment from '@nextcloud/moment'
 import DOMPurify from 'dompurify'
-import relativeDate from '../mixins/relativeDate'
+import relativeDate from '../mixins/relativeDate.js'
 
 const InternalLink = {
 	name: 'InternalLink',

src/components/ActivityList.vue

@@ -37,7 +37,7 @@
 <script>
 import axios from '@nextcloud/axios'
 import { generateOcsUrl } from '@nextcloud/router'
-import ActivityEntry from './ActivityEntry'
+import ActivityEntry from './ActivityEntry.vue'
 import InfiniteLoading from 'vue-infinite-loading'
 
 const ACTIVITY_FETCH_LIMIT = 50

src/components/AttachmentDragAndDrop.vue

@@ -63,7 +63,7 @@
 
 <script>
 import { NcModal } from '@nextcloud/vue'
-import attachmentUpload from '../mixins/attachmentUpload'
+import attachmentUpload from '../mixins/attachmentUpload.js'
 import { loadState } from '@nextcloud/initial-state'
 
 let maxUploadSizeState

src/components/Controls.vue

@@ -217,13 +217,13 @@
 <script>
 import { mapState, mapGetters } from 'vuex'
 import { NcActions, NcActionButton, NcAvatar, NcButton, NcPopover } from '@nextcloud/vue'
-import labelStyle from '../mixins/labelStyle'
-import CardCreateDialog from '../CardCreateDialog'
-import ArchiveIcon from 'vue-material-design-icons/Archive'
-import FilterIcon from 'vue-material-design-icons/Filter'
-import FilterOffIcon from 'vue-material-design-icons/FilterOff'
-import ArrowCollapseVerticalIcon from 'vue-material-design-icons/ArrowCollapseVertical'
-import ArrowExpandVerticalIcon from 'vue-material-design-icons/ArrowExpandVertical'
+import labelStyle from '../mixins/labelStyle.js'
+import CardCreateDialog from '../CardCreateDialog.vue'
+import ArchiveIcon from 'vue-material-design-icons/Archive.vue'
+import FilterIcon from 'vue-material-design-icons/Filter.vue'
+import FilterOffIcon from 'vue-material-design-icons/FilterOff.vue'
+import ArrowCollapseVerticalIcon from 'vue-material-design-icons/ArrowCollapseVertical.vue'
+import ArrowExpandVerticalIcon from 'vue-material-design-icons/ArrowExpandVertical.vue'
 
 export default {
 	name: 'Controls',

src/components/board/Board.vue

@@ -73,11 +73,11 @@
 
 import { Container, Draggable } from 'vue-smooth-dnd'
 import { mapState, mapGetters } from 'vuex'
-import Controls from '../Controls'
-import Stack from './Stack'
+import Controls from '../Controls.vue'
+import Stack from './Stack.vue'
 import { NcEmptyContent } from '@nextcloud/vue'
-import GlobalSearchResults from '../search/GlobalSearchResults'
-import { showError } from '../../helpers/errors'
+import GlobalSearchResults from '../search/GlobalSearchResults.vue'
+import { showError } from '../../helpers/errors.js'
 
 export default {
 	name: 'Board',

src/components/board/BoardSidebar.vue

@@ -59,10 +59,10 @@
 
 <script>
 import { mapState, mapGetters } from 'vuex'
-import SharingTabSidebar from './SharingTabSidebar'
-import TagsTabSidebar from './TagsTabSidebar'
-import DeletedTabSidebar from './DeletedTabSidebar'
-import TimelineTabSidebar from './TimelineTabSidebar'
+import SharingTabSidebar from './SharingTabSidebar.vue'
+import TagsTabSidebar from './TagsTabSidebar.vue'
+import DeletedTabSidebar from './DeletedTabSidebar.vue'
+import TimelineTabSidebar from './TimelineTabSidebar.vue'
 import { NcAppSidebar, NcAppSidebarTab } from '@nextcloud/vue'
 
 const capabilities = window.OC.getCapabilities()

src/components/board/DeletedTabSidebar.vue

@@ -32,7 +32,7 @@
 
 <script>
 import { mapState } from 'vuex'
-import relativeDate from '../../mixins/relativeDate'
+import relativeDate from '../../mixins/relativeDate.js'
 
 export default {
 	name: 'DeletedTabSidebar',

src/components/board/Stack.vue

@@ -133,10 +133,10 @@ import { Container, Draggable } from 'vue-smooth-dnd'
 
 import { NcActions, NcActionButton, NcModal } from '@nextcloud/vue'
 import { showError, showUndo } from '@nextcloud/dialogs'
-import CardItem from '../cards/CardItem'
+import CardItem from '../cards/CardItem.vue'
 
 import '@nextcloud/dialogs/styles/toast.scss'
-import ArchiveIcon from 'vue-material-design-icons/Archive'
+import ArchiveIcon from 'vue-material-design-icons/Archive.vue'
 
 export default {
 	name: 'Stack',

src/components/board/TagsTabSidebar.vue

@@ -70,7 +70,7 @@
 <script>
 
 import { mapGetters } from 'vuex'
-import Color from '../../mixins/color'
+import Color from '../../mixins/color.js'
 import { NcColorPicker, NcActions, NcActionButton } from '@nextcloud/vue'
 
 export default {

src/components/board/TimelineTabSidebar.vue

@@ -7,7 +7,7 @@
 </template>
 
 <script>
-import ActivityList from '../ActivityList'
+import ActivityList from '../ActivityList.vue'
 
 export default {
 	name: 'TimelineTabSidebar',

src/components/boards/Boards.vue

@@ -43,8 +43,8 @@
 
 <script>
 
-import BoardItem from './BoardItem'
-import Controls from '../Controls'
+import BoardItem from './BoardItem.vue'
+import Controls from '../Controls.vue'
 
 export default {
 	name: 'Boards',

src/components/card/AttachmentList.vue

@@ -104,14 +104,14 @@
 <script>
 import axios from '@nextcloud/axios'
 import { NcActions, NcActionButton, ActionLink } from '@nextcloud/vue'
-import AttachmentDragAndDrop from '../AttachmentDragAndDrop'
-import relativeDate from '../../mixins/relativeDate'
+import AttachmentDragAndDrop from '../AttachmentDragAndDrop.vue'
+import relativeDate from '../../mixins/relativeDate.js'
 import { formatFileSize } from '@nextcloud/files'
 import { getCurrentUser } from '@nextcloud/auth'
 import { generateUrl, generateOcsUrl, generateRemoteUrl } from '@nextcloud/router'
 import { mapState, mapActions } from 'vuex'
 import { loadState } from '@nextcloud/initial-state'
-import attachmentUpload from '../../mixins/attachmentUpload'
+import attachmentUpload from '../../mixins/attachmentUpload.js'
 import { getFilePickerBuilder } from '@nextcloud/dialogs'
 const maxUploadSizeState = loadState('deck', 'maxUploadSize')
 

src/components/card/CardSidebar.vue

@@ -85,11 +85,11 @@
 import { NcActionButton, NcAppSidebar, NcAppSidebarTab } from '@nextcloud/vue'
 import { generateUrl } from '@nextcloud/router'
 import { mapState, mapGetters } from 'vuex'
-import CardSidebarTabDetails from './CardSidebarTabDetails'
-import CardSidebarTabAttachments from './CardSidebarTabAttachments'
-import CardSidebarTabComments from './CardSidebarTabComments'
-import CardSidebarTabActivity from './CardSidebarTabActivity'
-import relativeDate from '../../mixins/relativeDate'
+import CardSidebarTabDetails from './CardSidebarTabDetails.vue'
+import CardSidebarTabAttachments from './CardSidebarTabAttachments.vue'
+import CardSidebarTabComments from './CardSidebarTabComments.vue'
+import CardSidebarTabActivity from './CardSidebarTabActivity.vue'
+import relativeDate from '../../mixins/relativeDate.js'
 import moment from '@nextcloud/moment'
 import AttachmentIcon from 'vue-material-design-icons/Paperclip.vue'
 

src/components/card/CardSidebarTabActivity.vue

@@ -30,7 +30,7 @@
 </template>
 
 <script>
-import ActivityList from '../ActivityList'
+import ActivityList from '../ActivityList.vue'
 
 export default {
 	name: 'CardSidebarTabActivity',

src/components/card/CardSidebarTabAttachments.vue

@@ -28,7 +28,7 @@
 </template>
 
 <script>
-import AttachmentList from './AttachmentList'
+import AttachmentList from './AttachmentList.vue'
 export default {
 	name: 'CardSidebarTabAttachments',
 	components: {

src/components/card/CardSidebarTabComments.vue

@@ -36,8 +36,8 @@
 <script>
 import { mapState, mapGetters } from 'vuex'
 import { NcAvatar } from '@nextcloud/vue'
-import CommentItem from './CommentItem'
-import CommentForm from './CommentForm'
+import CommentItem from './CommentItem.vue'
+import CommentForm from './CommentForm.vue'
 import InfiniteLoading from 'vue-infinite-loading'
 import { getCurrentUser } from '@nextcloud/auth'
 

src/components/card/CardSidebarTabDetails.vue

@@ -129,14 +129,14 @@ import { NcAvatar, NcActions, NcActionButton, NcMultiselect, NcDatetimePicker }
 import { loadState } from '@nextcloud/initial-state'
 
 import { CollectionList } from 'nextcloud-vue-collections'
-import Color from '../../mixins/color'
+import Color from '../../mixins/color.js'
 import {
 	getLocale,
 	getDayNamesMin,
 	getFirstDay,
 	getMonthNamesShort,
 } from '@nextcloud/l10n'
-import Description from './Description'
+import Description from './Description.vue'
 
 export default {
 	name: 'CardSidebarTabDetails',

src/components/card/CommentForm.vue

@@ -65,7 +65,7 @@
 import { mapState } from 'vuex'
 import { NcUserBubble, NcAvatar } from '@nextcloud/vue'
 import At from 'vue-at'
-import { rawToParsed } from '../../helpers/mentions'
+import { rawToParsed } from '../../helpers/mentions.js'
 
 export default {
 	name: 'CommentForm',

src/components/card/CommentItem.vue

@@ -66,10 +66,10 @@
 <script>
 import { NcAvatar, NcActions, NcActionButton, NcUserBubble } from '@nextcloud/vue'
 import RichText from '@juliushaertl/vue-richtext'
-import CommentForm from './CommentForm'
+import CommentForm from './CommentForm.vue'
 import { getCurrentUser } from '@nextcloud/auth'
 import md5 from 'blueimp-md5'
-import relativeDate from '../../mixins/relativeDate'
+import relativeDate from '../../mixins/relativeDate.js'
 import ReplyIcon from 'vue-material-design-icons/Reply'
 
 const AtMention = {

src/components/card/Description.vue

@@ -78,7 +78,7 @@
 import MarkdownIt from 'markdown-it'
 import MarkdownItTaskCheckbox from 'markdown-it-task-checkbox'
 import MarkdownItLinkAttributes from 'markdown-it-link-attributes'
-import AttachmentList from './AttachmentList'
+import AttachmentList from './AttachmentList.vue'
 import { NcActions, NcActionButton, NcModal } from '@nextcloud/vue'
 import { formatFileSize } from '@nextcloud/files'
 import { generateUrl } from '@nextcloud/router'

src/components/cards/CardBadges.vue

@@ -49,8 +49,8 @@
 	</div>
 </template>
 <script>
-import NcAvatarList from './AvatarList'
-import CardMenu from './CardMenu'
+import NcAvatarList from './AvatarList.vue'
+import CardMenu from './CardMenu.vue'
 import TextIcon from 'vue-material-design-icons/Text.vue'
 import AttachmentIcon from 'vue-material-design-icons/Paperclip.vue'
 import CheckmarkIcon from 'vue-material-design-icons/CheckboxMarked.vue'

src/components/cards/CardItem.vue

@@ -83,12 +83,12 @@
 <script>
 import ClickOutside from 'vue-click-outside'
 import { mapState, mapGetters } from 'vuex'
-import CardBadges from './CardBadges'
-import Color from '../../mixins/color'
-import labelStyle from '../../mixins/labelStyle'
-import AttachmentDragAndDrop from '../AttachmentDragAndDrop'
-import CardMenu from './CardMenu'
-import DueDate from './badges/DueDate'
+import CardBadges from './CardBadges.vue'
+import Color from '../../mixins/color.js'
+import labelStyle from '../../mixins/labelStyle.js'
+import AttachmentDragAndDrop from '../AttachmentDragAndDrop.vue'
+import CardMenu from './CardMenu.vue'
+import DueDate from './badges/DueDate.vue'
 
 export default {
 	name: 'CardItem',

src/components/icons/DeckIcon.vue

@@ -1,38 +1,55 @@
 <template>
-	<svg xmlns="http://www.w3.org/2000/svg"
-		:height="size"
-		:width="size"
-		version="1.1"
-		viewBox="0 0 16 16">
-		<rect ry="1"
-			height="8"
-			width="14"
-			y="7"
-			x="1" />
-		<rect ry=".5"
-			height="1"
-			width="12"
-			y="5"
-			x="2" />
-		<rect ry=".5"
-			height="1"
-			width="10"
-			y="3"
-			x="3" />
-		<rect ry=".5"
-			height="1"
-			width="8"
-			y="1"
-			x="4" />
-	</svg>
+	<span :aria-hidden="!title"
+		:aria-label="title"
+		class="material-design-icon deck-icon"
+		role="img"
+		v-bind="$attrs"
+		@click="$emit('click', $event)">
+		<svg xmlns="http://www.w3.org/2000/svg"
+			:fill="fillColor"
+			:height="size"
+			:width="size"
+			version="1.1"
+			viewBox="0 0 16 16">
+			<rect ry="1"
+				height="8"
+				width="14"
+				y="7"
+				x="1" />
+			<rect ry=".5"
+				height="1"
+				width="12"
+				y="5"
+				x="2" />
+			<rect ry=".5"
+				height="1"
+				width="10"
+				y="3"
+				x="3" />
+			<rect ry=".5"
+				height="1"
+				width="8"
+				y="1"
+				x="4" />
+		</svg>
+	</span>
 </template>
+
 <script>
 export default {
 	name: 'DeckIcon',
 	props: {
+		title: {
+			type: String,
+			default: '',
+		},
+		fillColor: {
+			type: String,
+			default: 'currentColor',
+		},
 		size: {
 			type: Number,
-			default: 16,
+			default: 24,
 		},
 	},
 }

src/components/navigation/AppNavigation.vue

@@ -107,8 +107,8 @@ import axios from '@nextcloud/axios'
 import { mapGetters } from 'vuex'
 import ClickOutside from 'vue-click-outside'
 import { NcAppNavigation, NcAppNavigationItem, NcAppNavigationSettings, NcMultiselect } from '@nextcloud/vue'
-import AppNavigationAddBoard from './AppNavigationAddBoard'
-import AppNavigationBoardCategory from './AppNavigationBoardCategory'
+import AppNavigationAddBoard from './AppNavigationAddBoard.vue'
+import AppNavigationBoardCategory from './AppNavigationBoardCategory.vue'
 import { loadState } from '@nextcloud/initial-state'
 import { generateOcsUrl } from '@nextcloud/router'
 import { getCurrentUser } from '@nextcloud/auth'

src/components/navigation/AppNavigationBoardCategory.vue

@@ -34,7 +34,7 @@
 </template>
 
 <script>
-import AppNavigationBoard from './AppNavigationBoard'
+import AppNavigationBoard from './AppNavigationBoard.vue'
 import { NcAppNavigationItem } from '@nextcloud/vue'
 
 export default {

src/components/overview/Overview.vue

@@ -80,11 +80,11 @@
 
 <script>
 
-import Controls from '../Controls'
-import CardItem from '../cards/CardItem'
+import Controls from '../Controls.vue'
+import CardItem from '../cards/CardItem.vue'
 import { mapGetters } from 'vuex'
 import moment from '@nextcloud/moment'
-import GlobalSearchResults from '../search/GlobalSearchResults'
+import GlobalSearchResults from '../search/GlobalSearchResults.vue'
 
 const FILTER_UPCOMING = 'upcoming'
 

src/components/search/GlobalSearchResults.vue

@@ -52,13 +52,13 @@
 </template>
 
 <script>
-import CardItem from '../cards/CardItem'
+import CardItem from '../cards/CardItem.vue'
 import { mapState } from 'vuex'
 import axios from '@nextcloud/axios'
 import { generateOcsUrl } from '@nextcloud/router'
 import InfiniteLoading from 'vue-infinite-loading'
 import RichText from '@juliushaertl/vue-richtext'
-import Placeholder from './Placeholder'
+import Placeholder from './Placeholder.vue'
 import { NcActions, NcActionButton } from '@nextcloud/vue'
 
 const createCancelToken = () => axios.CancelToken.source()