Added:

- version detail sidebar (not view)
- File detail version view to primevue
- small design updates for upload panel

Fix:
- row click for whole row in versions
- duplicate rendering for <router-view> in Project detail

Router:
- change router for version detail to query with version_id

web-app/packages/app/src/router.ts

@@ -7,7 +7,6 @@ import {
   FileBrowserView,
   FileVersionDetailView,
   ProjectVersionsView,
-  VersionDetailView,
   NotFoundView,
   VerifyEmailView,
   routeUtils,
@@ -146,6 +145,23 @@ export const createRouter = (pinia: Pinia) => {
           return
         }
       },
+      /** Redirect of unused /history/:version_id path to /history?version_id */
+      {
+        path: '/projects/:namespace/:projectName/history/:version_id',
+        name: 'project-versions-detail',
+        component: NotFoundView,
+        props: true,
+        meta: { public: true },
+        beforeEnter: (to, from, next) => {
+          next({
+            path: `/projects/${to.params.namespace}/${
+              to.params.projectName
+            }/history`,
+            query: { version_id: to.params.version_id }
+          })
+          return
+        }
+      },
       {
         path: '/projects/:namespace/:projectName',
         name: 'project',
@@ -182,12 +198,6 @@ export const createRouter = (pinia: Pinia) => {
             component: ProjectVersionsView,
             props: true
           },
-          {
-            path: 'history/:version_id',
-            name: 'project-versions-detail',
-            component: VersionDetailView,
-            props: true
-          },
           {
             path: 'history/:version_id/:path',
             name: 'file-version-detail',

web-app/packages/lib/components.d.ts

@@ -7,13 +7,16 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
+    PAccordion: typeof import('primevue/accordion')['default']
+    PAccordionTab: typeof import('primevue/accordiontab')['default']
     PAvatar: typeof import('primevue/avatar')['default']
     PBreadcrumb: typeof import('primevue/breadcrumb')['default']
     PButton: typeof import('primevue/button')['default']
     PColumn: typeof import('primevue/column')['default']
     PDataTable: typeof import('primevue/datatable')['default']
     PDataView: typeof import('primevue/dataview')['default']
     PDialog: typeof import('primevue/dialog')['default']
+    PDivider: typeof import('primevue/divider')['default']
     PDropdown: typeof import('primevue/dropdown')['default']
     PImage: typeof import('primevue/image')['default']
     PInlineMessage: typeof import('primevue/inlinemessage')['default']
@@ -48,7 +51,6 @@ declare module 'vue' {
     VImg: typeof import('vuetify/components')['VImg']
     VLayout: typeof import('vuetify/components')['VLayout']
     VList: typeof import('vuetify/components')['VList']
-    VListGroup: typeof import('vuetify/components')['VListGroup']
     VListItem: typeof import('vuetify/components')['VListItem']
     VListItemSubtitle: typeof import('vuetify/components')['VListItemSubtitle']
     VListItemTitle: typeof import('vuetify/components')['VListItemTitle']

web-app/packages/lib/src/common/components/AppSidebarRight.vue

@@ -59,7 +59,7 @@ const model = computed({
   get() {
     return props.modelValue
   },
-  set(value) {
+  set() {
     return emitModelValue('update:modelValue')
   }
 })

web-app/packages/lib/src/modules/project/components/DropArea.vue

@@ -63,6 +63,8 @@ import { useInstanceStore } from '@/modules/instance/store'
 import { useNotificationStore } from '@/modules/notification/store'
 import { useProjectStore } from '@/modules/project/store'
 
+type ExtendedFile = File & { isFile: boolean }
+
 export default defineComponent({
   props: ['location'],
   data() {
@@ -114,9 +116,9 @@ export default defineComponent({
         })
       }
       // prepare all entries because they will be not accessible after this callback ends (after 'await')
-      const entries = Array.from(evt.dataTransfer.items).map(
-        (i: DataTransferItem) => i.webkitGetAsEntry()
-      )
+      const entries = Array.from(
+        evt.dataTransfer.items as DataTransferItem[]
+      ).map((i) => i.webkitGetAsEntry())
       if (entries.some((e) => e === null)) {
         return this.error({
           text: 'Drop only files or folders'
@@ -129,9 +131,11 @@ export default defineComponent({
         this.$refs.selectFilesInput.click()
       }
     },
-    onFileSelected(evt) {
+    onFileSelected(evt: Event) {
       // prepare all entries because they will be not accessible after this callback ends (after 'await')
-      const entries = Array.from(evt.target.files).map((i: any) => {
+      const entries = Array.from(
+        (evt.target as HTMLInputElement).files as unknown as ExtendedFile[]
+      ).map((i) => {
         i.isFile = true
         return i
       })

web-app/packages/lib/src/modules/project/components/FileChangesetSummaryTable.vue

@@ -5,69 +5,76 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 -->
 
 <template>
-  <div>
-    <v-data-table
-      :headers="headers"
-      :items="displayedChangeset"
-      footer-props.items-per-page-options='[10, 25, {"text": "$vuetify.dataIterator.rowsPerPageAll","value": -1}]'
-      :hide-default-footer="displayedChangeset.length <= 10"
+  <div class="mt-2">
+    <PDataView
+      :value="displayedChangeset"
+      :data-key="'table'"
+      :paginator="displayedChangeset.length > itemsPerPage"
+      :rows="itemsPerPage"
+      :paginator-template="'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink'"
+      :pt="{
+        root: {
+          class: 'border-round-xl'
+        },
+        header: {
+          class: 'px-4 py-2'
+        }
+      }"
     >
-      <!-- headers -->
-      <template v-slot:header.insert="{ header }">
-        <v-tooltip location="bottom">
-          <template v-slot:activator="{ props }">
-            <v-icon v-bind="props" size="small" :color="header.color"
-              >{{ header.icon }}
-            </v-icon>
-          </template>
-          <span>Added</span>
-        </v-tooltip>
-      </template>
-      <template v-slot:header.delete="{ header }">
-        <v-tooltip location="bottom">
-          <template v-slot:activator="{ props }">
-            <v-icon v-bind="props" size="small" :color="header.color"
-              >{{ header.icon }}
-            </v-icon>
-          </template>
-          <span>Deleted</span>
-        </v-tooltip>
+      <template #header>
+        <div class="grid grid-nogutter">
+          <div v-for="col in columns" class="col-3 text-xs" :key="col.text">
+            <i
+              v-if="col.icon"
+              :class="['ti', `ti-${col.icon}`]"
+              v-tooltip.top="col.text"
+            ></i>
+            <span v-else>{{ col.text }}</span>
+          </div>
+        </div>
       </template>
-      <template v-slot:header.update="{ header }">
-        <v-tooltip location="bottom">
-          <template v-slot:activator="{ props }">
-            <v-icon v-bind="props" size="small" :color="header.color"
-              >{{ header.icon }}
-            </v-icon>
-          </template>
-          <span>Modified</span>
-        </v-tooltip>
+      <template #list="slotProps">
+        <div
+          v-for="item in slotProps.items"
+          :key="item.id"
+          class="grid grid-nogutter px-4 py-2 mt-0 border-bottom-1 border-gray-200 text-sm hover:bg-gray-200 cursor-pointer"
+        >
+          <div
+            v-for="col in columns"
+            class="flex align-items-center col-3"
+            :key="col.value"
+          >
+            {{ item[col.value] }}
+          </div>
+        </div>
       </template>
-    </v-data-table>
+    </PDataView>
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { PropType, defineComponent } from 'vue'
+
+import { ProjectVersion } from '../types'
 
 export default defineComponent({
   name: 'file-changeset-summary-table',
   props: {
-    changesets: Array
+    changesets: Array as PropType<ProjectVersion['changesets']['summary']>
   },
   data() {
     return {
-      headers: [
-        { text: 'Table', value: 'table' },
+      columns: [
+        { text: 'Layer', value: 'table' },
         {
           text: 'Inserts',
-          icon: 'add_circle',
-          color: 'green',
+          icon: 'plus',
           value: 'insert'
         },
-        { text: 'Updates', icon: 'edit', color: 'orange', value: 'update' },
-        { text: 'Deletes', icon: 'delete', color: 'red', value: 'delete' }
-      ]
+        { text: 'Updates', icon: 'pencil', value: 'update' },
+        { text: 'Deletes', icon: 'trash', value: 'delete' }
+      ],
+      itemsPerPage: 10
     }
   },
   computed: {

web-app/packages/lib/src/modules/project/components/FileDetailSidebar.vue

@@ -61,7 +61,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
           class="flex flex-column align-items-center w-full py-4"
         >
           <PImage
-            :src="downloadLink"
+            :src="downloadUrl"
             v-if="mimetype.match('image')"
             preview
             imageClass="w-full"
@@ -127,7 +127,7 @@ export default defineComponent({
     fileName() {
       return Path.basename(this.file?.path)
     },
-    downloadLink() {
+    downloadUrl() {
       // added random number to request avoid to browser caching files
       return ProjectApi.constructDownloadProjectFileUrl(
         this.namespace,
@@ -205,7 +205,7 @@ export default defineComponent({
   methods: {
     ...mapActions(useProjectStore, ['deleteFiles']),
     txtPreview() {
-      ProjectApi.getProjectFileByUrl(this.downloadLink).then((resp) => {
+      ProjectApi.getProjectFileByUrl(this.downloadUrl).then((resp) => {
         this.mimetype = resp.headers['content-type']
         if (resp.headers['content-type'].match('text')) {
           if (resp.data.constructor === Object) {
@@ -228,7 +228,7 @@ export default defineComponent({
       this.deleteFiles({ files: [this.file.path] })
     },
     downloadFile() {
-      window.location.href = this.downloadLink
+      window.location.href = this.downloadUrl
     }
   },
   components: { AppSidebarRight, FileIcon }

web-app/packages/lib/src/modules/project/components/UploadPanel.vue

@@ -45,7 +45,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
         </div>
         <span class="text-sm opacity-80 capitalize">{{ key }}</span>
         <div
-          class="upload-panel-diff-count border-circle p-2 w-2rem h-2rem ml-auto text-center"
+          class="upload-panel-diff-count border-circle p-2 w-2rem h-2rem ml-auto text-center text-color-forest"
         >
           {{ upload.diff[key].length }}
         </div>