chore: start to implement FileEntry component

Signed-off-by: Vitor Mattos <vitor@php.rio>

src/Components/LeftSidebar/LeftSidebar.vue

@@ -39,6 +39,14 @@
 					<FolderIcon :size="20" />
 				</template>
 			</NcAppNavigationItem>
+			<NcAppNavigationItem id="fileslist"
+				:to="{ name: 'fileslist' }"
+				:name="t('libresign', 'New files')"
+				@click="unselectFile">
+				<template #icon>
+					<FolderIcon :size="20" />
+				</template>
+			</NcAppNavigationItem>
 			<NcAppNavigationItem id="validation"
 				:to="{name: 'validation'}"
 				:name="t('libresign', 'Validate')"

src/helpers/logger.js

@@ -1,5 +1,5 @@
 /**
- * SPDX-FileCopyrightText: 2020-2024 LibreCode coop and contributors
+ * SPDX-FileCopyrightText: 2024 LibreCode coop and contributors
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 

src/store/filters.js

@@ -1,9 +1,10 @@
 /**
- * SPDX-FileCopyrightText: 2020-2024 LibreCode coop and contributors
+ * SPDX-FileCopyrightText: 2024 LibreCode coop and contributors
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
 import { defineStore } from 'pinia'
+
 import logger from '../helpers/logger.js'
 
 export const useFiltersStore = defineStore('filter', {

src/store/userconfig.js

@@ -0,0 +1,18 @@
+/**
+ * SPDX-FileCopyrightText: 2024 LibreCode coop and contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { defineStore } from 'pinia'
+import Vue from 'vue'
+
+export const useUserConfigStore = defineStore('userconfig', {
+	state: () => ({
+		grid_view: true,
+	}),
+	actions: {
+		async update(key, value) {
+			Vue.set(this, key, value)
+		},
+	},
+})

src/views/FilesList/FileEntry/FileEntry.vue

@@ -0,0 +1,15 @@
+<!--
+  - SPDX-FileCopyrightText: 2024 LibreCode coop and contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<template>
+	<tr />
+</template>
+
+<script>
+
+export default {
+	name: 'FileEntry',
+}
+</script>

src/views/FilesList/FileEntry/FileEntryGrid.vue

@@ -0,0 +1,28 @@
+<!--
+  - SPDX-FileCopyrightText: 2024 LibreCode coop and contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<template>
+	<tr>
+		<td class="files-list__row-name">
+			<FileEntryPreview :source="source" />
+		</td>
+	</tr>
+</template>
+
+<script>
+import FileEntryPreview from './FileEntryPreview.vue'
+export default {
+	name: 'FileEntryGrid',
+	components: {
+		FileEntryPreview,
+	},
+	props: {
+		source: {
+			type: Object,
+			required: true,
+		},
+	},
+}
+</script>

src/views/FilesList/FileEntry/FileEntryPreview.vue

@@ -0,0 +1,86 @@
+<template>
+	<span class="files-list__row-icon">
+		<!-- Decorative images, should not be aria documented -->
+		<span v-if="previewUrl" class="files-list__row-icon-preview-container">
+			<img v-if="backgroundFailed !== true"
+				ref="previewImg"
+				alt=""
+				class="files-list__row-icon-preview"
+				:class="{'files-list__row-icon-preview--loaded': backgroundFailed === false}"
+				loading="lazy"
+				:src="previewUrl"
+				@error="backgroundFailed = true"
+				@load="backgroundFailed = false">
+		</span>
+
+		<FileIcon v-else v-once />
+
+		<!-- Favorite icon -->
+		<span v-if="isFavorite" class="files-list__row-icon-favorite">
+			<FavoriteIcon v-once />
+		</span>
+	</span>
+</template>
+
+<script>
+import FileIcon from 'vue-material-design-icons/File.vue'
+
+import { generateUrl, generateOcsUrl } from '@nextcloud/router'
+
+import { useUserConfigStore } from '../../../store/userconfig.js'
+
+export default {
+	name: 'FileEntryPreview',
+
+	components: {
+		FileIcon,
+	},
+	props: {
+		source: {
+			type: Object,
+			required: true,
+		},
+	},
+	setup() {
+		const userConfigStore = useUserConfigStore()
+		return { userConfigStore }
+	},
+	data() {
+		return {
+			backgroundFailed: false,
+		}
+	},
+	computed: {
+		isFavorite() {
+			return this.source?.attributes?.favorite === 1
+		},
+		previewUrl() {
+			if (this.backgroundFailed === true) {
+				return null
+			}
+
+			let previewUrl = ''
+			if (this.source?.uuid?.length > 0) {
+				previewUrl = generateOcsUrl('/apps/libresign/api/v1/file/thumbnail/{nodeId}', {
+					nodeId: this.source.nodeId,
+				})
+			} else {
+				previewUrl = window.location.origin + generateUrl('/core/preview?fileId={fileid}', {
+					fileid: this.source.nodeId,
+				})
+			}
+
+			const url = new URL(previewUrl)
+
+			// Request tiny previews
+			url.searchParams.set('x', this.userConfigStore.grid_view ? '128' : '32')
+			url.searchParams.set('y', this.userConfigStore.grid_view ? '128' : '32')
+			url.searchParams.set('mimeFallback', 'true')
+
+			// Handle cropping
+			url.searchParams.set('a', this.cropPreviews === true ? '0' : '1')
+			return url
+		},
+	},
+}
+</script>

src/views/FilesList/FileListFilter/FileListFilter.vue

@@ -19,8 +19,8 @@
 </template>
 
 <script>
-import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
 import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
+import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
 import NcActionSeparator from '@nextcloud/vue/dist/Components/NcActionSeparator.js'
 
 export default {

src/views/FilesList/FileListFilter/FileListFilterModified.vue

@@ -18,10 +18,13 @@
 
 <script>
 import { mdiCalendarRange } from '@mdi/js'
+import calendarSvg from '@mdi/svg/svg/calendar.svg?raw'
+
 import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
 import NcIconSvgWrapper from '@nextcloud/vue/dist/Components/NcIconSvgWrapper.js'
-import calendarSvg from '@mdi/svg/svg/calendar.svg?raw'
+
 import FileListFilter from './FileListFilter.vue'
+
 import { useFiltersStore } from '../../../store/filters.js'
 
 const startOfToday = () => (new Date()).setHours(0, 0, 0, 0)

src/views/FilesList/FileListFilter/FileListFilterStatus.vue

@@ -21,15 +21,17 @@
 
 <script>
 import { mdiListStatus } from '@mdi/js'
-
-import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
-import NcIconSvgWrapper from '@nextcloud/vue/dist/Components/NcIconSvgWrapper.js'
+import svgDelete from '@mdi/svg/svg/delete.svg?raw'
 import svgFile from '@mdi/svg/svg/file.svg?raw'
-import svgSignature from '@mdi/svg/svg/signature.svg?raw'
 import svgFractionOneHalf from '@mdi/svg/svg/fraction-one-half.svg?raw'
 import svgSignatureFreehand from '@mdi/svg/svg/signature-freehand.svg?raw'
-import svgDelete from '@mdi/svg/svg/delete.svg?raw'
+import svgSignature from '@mdi/svg/svg/signature.svg?raw'
+
+import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
+import NcIconSvgWrapper from '@nextcloud/vue/dist/Components/NcIconSvgWrapper.js'
+
 import FileListFilter from './FileListFilter.vue'
+
 import { useFiltersStore } from '../../../store/filters.js'
 
 const colorize = (svg, color) => {

src/views/FilesList/FileListFilters.vue

@@ -25,10 +25,12 @@
 </template>
 
 <script>
-import NcChip from '@nextcloud/vue/dist/Components/NcChip.js'
 import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
+import NcChip from '@nextcloud/vue/dist/Components/NcChip.js'
+
 import FileListFilterModified from './FileListFilter/FileListFilterModified.vue'
 import FileListFilterStatus from './FileListFilter/FileListFilterStatus.vue'
+
 import { useFiltersStore } from '../../store/filters.js'
 
 export default {

src/views/FilesList/FilesList.vue

@@ -51,7 +51,7 @@
 				type="tertiary"
 				@click="toggleGridView">
 				<template #icon>
-					<ListViewIcon v-if="userConfig.grid_view" />
+					<ListViewIcon v-if="userConfigStore.grid_view" />
 					<ViewGridIcon v-else />
 				</template>
 			</NcButton>
@@ -73,25 +73,30 @@
 </template>
 
 <script>
-import NcAppContent from '@nextcloud/vue/dist/Components/NcAppContent.js'
-import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
-import PlusIcon from 'vue-material-design-icons/Plus.vue'
 
 import HomeSvg from '@mdi/svg/svg/home.svg?raw'
-import ListViewIcon from 'vue-material-design-icons/FormatListBulletedSquare.vue'
-import ViewGridIcon from 'vue-material-design-icons/ViewGrid.vue'
-import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
+
 import FolderIcon from 'vue-material-design-icons/Folder.vue'
-import UploadIcon from 'vue-material-design-icons/Upload.vue'
+import ListViewIcon from 'vue-material-design-icons/FormatListBulletedSquare.vue'
 import LinkIcon from 'vue-material-design-icons/Link.vue'
+import PlusIcon from 'vue-material-design-icons/Plus.vue'
+import UploadIcon from 'vue-material-design-icons/Upload.vue'
+import ViewGridIcon from 'vue-material-design-icons/ViewGrid.vue'
+
+import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
+import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
+import NcAppContent from '@nextcloud/vue/dist/Components/NcAppContent.js'
 import NcBreadcrumb from '@nextcloud/vue/dist/Components/NcBreadcrumb.js'
 import NcBreadcrumbs from '@nextcloud/vue/dist/Components/NcBreadcrumbs.js'
-import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
-import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
 import NcIconSvgWrapper from '@nextcloud/vue/dist/Components/NcIconSvgWrapper.js'
+import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
+
 import FilesListVirtual from './FilesListVirtual.vue'
-import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
+
 import { useFilesStore } from '../../store/files.js'
+import { useUserConfigStore } from '../../store/userconfig.js'
 
 export default {
 	name: 'FilesList',
@@ -115,15 +120,16 @@ export default {
 	},
 	setup() {
 		const filesStore = useFilesStore()
-		return { filesStore }
+		const userConfigStore = useUserConfigStore()
+		return {
+			filesStore,
+			userConfigStore,
+		}
 	},
 	data() {
 		return {
 			isUploading: false,
 			loading: false,
-			userConfig: {
-				grid_view: false,
-			},
 			dirContentsFiltered: [],
 		}
 	},
@@ -132,7 +138,7 @@ export default {
 			return HomeSvg
 		},
 		gridViewButtonLabel() {
-			return this.userConfig.grid_view
+			return this.userConfigStore.grid_view
 				? t('libresign', 'Switch to list view')
 				: t('libresign', 'Switch to grid view')
 		},
@@ -158,9 +164,7 @@ export default {
 			console.log('Need to implement refresh')
 		},
 		toggleGridView() {
-			this.userConfig.grid_view = !this.userConfig.grid_view
-			console.log('Need to implement toggle')
-			// this.userConfigStore.update('grid_view', !this.userConfig.grid_view)
+			this.userConfigStore.update('grid_view', !this.userConfigStore.grid_view)
 		},
 		filterDirContent() {
 			const nodes = this.filesStore.files