From 95adec5fac2afaed8c52ffabc5249a65b823896e Mon Sep 17 00:00:00 2001
From: "marcel.kocisek" <marcel.kocisek@lutraconsulting.co.uk>
Date: Thu, 21 Dec 2023 19:03:48 +0100
Subject: [PATCH 01/14] First prototype of app dropdown

---
 .../lib/src/common/components/AppDropdown.vue | 87 +++++++++++++++++++
 .../lib/src/common/components/AppSection.vue  |  2 +-
 .../src/common/components/AppSidebarRight.vue |  4 +-
 .../lib/src/common/components/index.ts        |  1 +
 .../lib/src/common/components/types.ts        |  9 ++
 .../ProjectAccessRequestTableTemplate.vue     |  5 +-
 .../project/views/ProjectViewTemplate.vue     |  8 +-
 7 files changed, 109 insertions(+), 7 deletions(-)
 create mode 100644 web-app/packages/lib/src/common/components/AppDropdown.vue
 create mode 100644 web-app/packages/lib/src/common/components/types.ts

diff --git a/web-app/packages/lib/src/common/components/AppDropdown.vue b/web-app/packages/lib/src/common/components/AppDropdown.vue
new file mode 100644
index 00000000..f7e950ba
--- /dev/null
+++ b/web-app/packages/lib/src/common/components/AppDropdown.vue
@@ -0,0 +1,87 @@
+<!--
+Copyright (C) Lutra Consulting Limited
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
+-->
+
+<template>
+  <PDropdown
+    :options="options"
+    option-label="label"
+    option-value="value"
+    v-model="model"
+    @show="toggle"
+    @hide="toggle"
+    :pt="{
+      root: {
+        class: 'border-transparent w-full bg-transparent'
+      },
+      input: {
+        class: 'text-xs'
+      },
+      item({ context }) {
+        return {
+          class: [
+            'text-color p-2 hover:bg-gray-100',
+            context.focused ? 'bg-gray-200' : 'bg-transparent'
+          ]
+        }
+      }
+    }"
+  >
+    <template #dropdownicon="scope">
+      <i
+        :class="[
+          scope.class,
+          'ti',
+          isOpen ? 'ti-chevron-up' : 'ti-chevron-down',
+          'text-color-forest font-semibold text-xl'
+        ]"
+      ></i>
+    </template>
+    <template #option="{ option }">
+      <div class="flex text-xs align-items-center">
+        <div class="flex flex-column">
+          <p class="font-semibold">{{ option.label }}</p>
+          <span>{{ option.description }}</span>
+        </div>
+        <div class="ml-auto pl-2">
+          <i
+            :class="[
+              'ti ti-circle-check-filled text-color-forest',
+              modelValue === option.value ? 'visible' : 'hidden'
+            ]"
+          ></i>
+        </div>
+      </div>
+    </template>
+  </PDropdown>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref } from 'vue'
+
+import { DropdownOption } from './types'
+
+const props = defineProps<{
+  modelValue: string
+  options: DropdownOption[]
+}>()
+const isOpen = ref(false)
+
+const emitModelValue = defineEmits(['update:modelValue'])
+const model = computed({
+  get() {
+    return props.modelValue
+  },
+  set(value) {
+    return emitModelValue('update:modelValue', value)
+  }
+})
+
+function toggle() {
+  isOpen.value = !isOpen.value
+}
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/web-app/packages/lib/src/common/components/AppSection.vue b/web-app/packages/lib/src/common/components/AppSection.vue
index 6d146fec..e2bec11b 100644
--- a/web-app/packages/lib/src/common/components/AppSection.vue
+++ b/web-app/packages/lib/src/common/components/AppSection.vue
@@ -24,7 +24,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 </template>
 
 <script lang="ts" setup>
-withDefaults(defineProps<{ ground: boolean }>(), {
+withDefaults(defineProps<{ ground?: boolean }>(), {
   ground: false
 })
 </script>
diff --git a/web-app/packages/lib/src/common/components/AppSidebarRight.vue b/web-app/packages/lib/src/common/components/AppSidebarRight.vue
index 9443da1d..a0da8864 100644
--- a/web-app/packages/lib/src/common/components/AppSidebarRight.vue
+++ b/web-app/packages/lib/src/common/components/AppSidebarRight.vue
@@ -59,8 +59,8 @@ const model = computed({
   get() {
     return props.modelValue
   },
-  set() {
-    return emitModelValue('update:modelValue')
+  set(value) {
+    return emitModelValue('update:modelValue', value)
   }
 })
 </script>
diff --git a/web-app/packages/lib/src/common/components/index.ts b/web-app/packages/lib/src/common/components/index.ts
index 9c838114..62a10e87 100644
--- a/web-app/packages/lib/src/common/components/index.ts
+++ b/web-app/packages/lib/src/common/components/index.ts
@@ -9,6 +9,7 @@ export { default as AppContainer } from './AppContainer.vue'
 export { default as AppPanelToggleable } from './AppPanelToggleable.vue'
 export { default as AppsidebarRight } from './AppSidebarRight.vue'
 export { default as AppMenu } from './AppMenu.vue'
+export { default as AppDropdwown } from './AppDropdown.vue'
 export { default as ActionButton } from './ActionButton.vue'
 export { default as CustomPage } from './CustomPage.vue'
 export { default as FullStorageWarning } from './FullStorageWarning.vue'
diff --git a/web-app/packages/lib/src/common/components/types.ts b/web-app/packages/lib/src/common/components/types.ts
new file mode 100644
index 00000000..2001ddc2
--- /dev/null
+++ b/web-app/packages/lib/src/common/components/types.ts
@@ -0,0 +1,9 @@
+// Copyright (C) Lutra Consulting Limited
+//
+// SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
+
+export interface DropdownOption {
+  value: string
+  label: string
+  description?: string
+}
diff --git a/web-app/packages/lib/src/modules/project/components/ProjectAccessRequestTableTemplate.vue b/web-app/packages/lib/src/modules/project/components/ProjectAccessRequestTableTemplate.vue
index 9920eeb1..9111faa4 100644
--- a/web-app/packages/lib/src/modules/project/components/ProjectAccessRequestTableTemplate.vue
+++ b/web-app/packages/lib/src/modules/project/components/ProjectAccessRequestTableTemplate.vue
@@ -47,7 +47,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
             >
               Expiring in {{ $filters.remainingtime(item.expire) }}
             </p>
-            <PDropdown
+            <AppDropdown
               v-if="showAccept"
               :options="[
                 { value: 'read', label: 'Reader' },
@@ -94,9 +94,11 @@ import { DataViewPageEvent } from 'primevue/dataview'
 import { DropdownChangeEvent } from 'primevue/dropdown'
 import { defineComponent } from 'vue'
 
+import AppDropdown from '@/common/components/AppDropdown.vue'
 import { ProjectPermissionName } from '@/common/permission_utils'
 import { useNotificationStore } from '@/modules/notification/store'
 import { useProjectStore } from '@/modules/project/store'
+
 import {
   GetProjectAccessRequestsPayload,
   ProjectAccessRequest
@@ -104,6 +106,7 @@ import {
 
 export default defineComponent({
   name: 'ProjectAccessRequestTableTemplate',
+  components: { AppDropdown },
   props: {
     namespace: {
       type: String,
diff --git a/web-app/packages/lib/src/modules/project/views/ProjectViewTemplate.vue b/web-app/packages/lib/src/modules/project/views/ProjectViewTemplate.vue
index ba97df00..fca2f388 100644
--- a/web-app/packages/lib/src/modules/project/views/ProjectViewTemplate.vue
+++ b/web-app/packages/lib/src/modules/project/views/ProjectViewTemplate.vue
@@ -109,7 +109,6 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
         </div>
       </app-section>
     </app-container>
-
     <div slot="right">
       <upload-panel v-if="upload" :namespace="namespace" class="my-1 mr-1" />
     </div>
@@ -134,6 +133,7 @@ import UploadPanel from '@/modules/project/components/UploadPanel.vue'
 import { ProjectApi } from '@/modules/project/projectApi'
 import { useProjectStore } from '@/modules/project/store'
 import { useUserStore } from '@/modules/user/store'
+import AppDropdown from '@/common/components/AppDropdown.vue'
 
 interface TabItem {
   route: string
@@ -145,7 +145,8 @@ export default defineComponent({
     ProjectShareButton,
     UploadPanel,
     AppContainer,
-    AppSection
+    AppSection,
+    AppDropdown
   },
   props: {
     /**  Show namespace (ws) label in breadcrumb of page */
@@ -170,7 +171,8 @@ export default defineComponent({
   data() {
     return {
       fetchProjectsResponseStatus: null,
-      tab: null
+      tab: null,
+      value: 'read'
     }
   },
   computed: {

From 45720bfffb84c421ecea28678f189431e788ffaf Mon Sep 17 00:00:00 2001
From: "marcel.kocisek" <marcel.kocisek@lutraconsulting.co.uk>
Date: Fri, 22 Dec 2023 09:48:06 +0100
Subject: [PATCH 02/14] Refactor @mergin/lib: - rename project access requests
 table to more sensible name - it is handling global access requests notonly
 projects - method getProjectAccessRequests is handling also global access
 requests (namespace) - rename to getAccessRequests

Cleanup @mergin/lib:
- remove unused BaseItem component
---
 .../modules/dashboard/views/DashboardView.vue |   6 +-
 .../src/common/components/base/BaseItem.vue   | 105 ------------------
 .../lib/src/common/components/base/index.ts   |   5 -
 .../lib/src/common/components/index.ts        |   2 -
 ...equestTable.vue => AccessRequestTable.vue} |   8 +-
 ...ate.vue => AccessRequestTableTemplate.vue} |  11 +-
 .../src/modules/project/components/index.ts   |   4 +-
 .../packages/lib/src/modules/project/store.ts |   4 +-
 .../packages/lib/src/modules/project/types.ts |   3 +-
 .../project/views/ProjectViewTemplate.vue     |   4 +-
 .../components/ProfileAccessRequestsRow.vue   |   6 +-
 11 files changed, 21 insertions(+), 137 deletions(-)
 delete mode 100644 web-app/packages/lib/src/common/components/base/BaseItem.vue
 delete mode 100644 web-app/packages/lib/src/common/components/base/index.ts
 rename web-app/packages/lib/src/modules/project/components/{ProjectAccessRequestTable.vue => AccessRequestTable.vue} (81%)
 rename web-app/packages/lib/src/modules/project/components/{ProjectAccessRequestTableTemplate.vue => AccessRequestTableTemplate.vue} (96%)

diff --git a/web-app/packages/app/src/modules/dashboard/views/DashboardView.vue b/web-app/packages/app/src/modules/dashboard/views/DashboardView.vue
index d7e5bc84..dbe3fd78 100644
--- a/web-app/packages/app/src/modules/dashboard/views/DashboardView.vue
+++ b/web-app/packages/app/src/modules/dashboard/views/DashboardView.vue
@@ -15,7 +15,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
     <template #content>
       <dashboard-access-requests-row v-if="userStore.isGlobalWorkspaceAdmin">
         <template v-slot:table="{ namespace }">
-          <project-access-request-table :namespace="namespace" />
+          <access-request-table :namespace="namespace" />
         </template>
       </dashboard-access-requests-row>
       <dashboard-projects-row :canCreateProject="canCreateProject" />
@@ -29,7 +29,7 @@ import {
   DashboardUsageInfoRow,
   DashboardFullStorageWarningRow,
   DashboardAccessRequestsRow,
-  ProjectAccessRequestTable,
+  AccessRequestTable,
   FullStorageWarning,
   useUserStore,
   DashboardProjectsRow
@@ -43,7 +43,7 @@ export default defineComponent({
     DashboardAccessRequestsRow,
     DashboardFullStorageWarningRow,
     DashboardUsageInfoRow,
-    ProjectAccessRequestTable,
+    AccessRequestTable,
     FullStorageWarning,
     DashboardProjectsRow
   },
diff --git a/web-app/packages/lib/src/common/components/base/BaseItem.vue b/web-app/packages/lib/src/common/components/base/BaseItem.vue
deleted file mode 100644
index 459a16cd..00000000
--- a/web-app/packages/lib/src/common/components/base/BaseItem.vue
+++ /dev/null
@@ -1,105 +0,0 @@
-<!--
-Based on template:
-Product Page: https://www.creative-tim.com/product/vuetify-material-dashboard
-Copyright 2019 Creative Tim (https://www.creative-tim.com)
-
-Modifications by:
-Copyright (C) Lutra Consulting Limited
-
-SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
--->
-
-<template>
-  <v-list-item
-    :href="href"
-    :rel="href && href !== '#' ? 'noopener' : undefined"
-    :target="href && href !== '#' ? '_blank' : undefined"
-    :to="item.to"
-    active-class="baseItemActiveColor"
-  >
-    <!--  TODO: VUE 3 - problematic upgrade, check this   -->
-    <template #prepend>
-      <v-list-item
-        v-if="text"
-        class="v-list-item__icon--text"
-        v-text="computedText"
-        :class="`${color}--text`"
-        icon
-      />
-
-      <v-list-item
-        v-else-if="item.icon || item.tablerIcon"
-        class="mr-2"
-        :class="`${color}--text`"
-        icon
-      >
-        <v-icon v-if="item.icon" :class="`${color}--text`" v-text="item.icon" />
-        <slot v-if="item.tablerIcon" name="icon"></slot>
-      </v-list-item>
-    </template>
-
-    <v-layout v-if="item.title || item.subtitle" :class="`${color}--text`">
-      <v-list-item-title v-text="item.title" />
-
-      <v-list-item-subtitle v-text="item.subtitle" />
-    </v-layout>
-  </v-list-item>
-</template>
-
-<script lang="ts">
-import { defineComponent, PropType } from 'vue'
-
-import { SideBarItemModel } from '@/modules/layout/types'
-// import Themeable from 'vuetify/lib/mixins/themeable'
-
-export default defineComponent({
-  name: 'BaseItem',
-
-  // mixins: [Themeable],
-
-  props: {
-    color: {
-      type: String,
-      default: 'white'
-    },
-    item: {
-      type: Object as PropType<SideBarItemModel>,
-      default: () => ({
-        href: undefined,
-        icon: undefined,
-        tablerIcon: false,
-        subtitle: undefined,
-        title: undefined,
-        to: undefined
-      })
-    },
-    text: {
-      type: Boolean,
-      default: false
-    }
-  },
-
-  computed: {
-    computedText() {
-      if (!this.item || !this.item.title) return ''
-
-      let text = ''
-
-      this.item.title.split(' ').forEach((val) => {
-        text += val.substring(0, 1)
-      })
-
-      return text
-    },
-    href() {
-      return this.item.href || (this.item.to ? undefined : '#')
-    }
-  }
-})
-</script>
-
-<style lang="scss" scoped>
-.baseItemActiveColor {
-  background-color: #f3f4f8;
-}
-</style>
diff --git a/web-app/packages/lib/src/common/components/base/index.ts b/web-app/packages/lib/src/common/components/base/index.ts
deleted file mode 100644
index 2e184c3a..00000000
--- a/web-app/packages/lib/src/common/components/base/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-// Copyright (C) Lutra Consulting Limited
-//
-// SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
-
-export { default as BaseItem } from './BaseItem.vue'
diff --git a/web-app/packages/lib/src/common/components/index.ts b/web-app/packages/lib/src/common/components/index.ts
index 62a10e87..35dc9a88 100644
--- a/web-app/packages/lib/src/common/components/index.ts
+++ b/web-app/packages/lib/src/common/components/index.ts
@@ -2,8 +2,6 @@
 //
 // SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 
-export * from './base'
-
 export { default as AppSection } from './AppSection.vue'
 export { default as AppContainer } from './AppContainer.vue'
 export { default as AppPanelToggleable } from './AppPanelToggleable.vue'
diff --git a/web-app/packages/lib/src/modules/project/components/ProjectAccessRequestTable.vue b/web-app/packages/lib/src/modules/project/components/AccessRequestTable.vue
similarity index 81%
rename from web-app/packages/lib/src/modules/project/components/ProjectAccessRequestTable.vue
rename to web-app/packages/lib/src/modules/project/components/AccessRequestTable.vue
index e17d9f22..c2c2a85d 100644
--- a/web-app/packages/lib/src/modules/project/components/ProjectAccessRequestTable.vue
+++ b/web-app/packages/lib/src/modules/project/components/AccessRequestTable.vue
@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 -->
 
 <template>
-  <project-access-request-table-template
+  <access-request-table-template
     :namespace="namespace"
     @accept-access-request-error="onAcceptAccessRequestError"
   />
@@ -16,14 +16,14 @@ import { AxiosError } from 'axios'
 import { mapActions } from 'pinia'
 import { defineComponent } from 'vue'
 
-import ProjectAccessRequestTableTemplate from './ProjectAccessRequestTableTemplate.vue'
+import AccessRequestTableTemplate from './AccessRequestTableTemplate.vue'
 
 import { getErrorMessage } from '@/common/error_utils'
 import { useNotificationStore } from '@/modules/notification/store'
 
 export default defineComponent({
-  name: 'ProjectAccessRequestTable',
-  components: { ProjectAccessRequestTableTemplate },
+  name: 'AccessRequestTable',
+  components: { AccessRequestTableTemplate },
   props: {
     namespace: {
       type: String,
diff --git a/web-app/packages/lib/src/modules/project/components/ProjectAccessRequestTableTemplate.vue b/web-app/packages/lib/src/modules/project/components/AccessRequestTableTemplate.vue
similarity index 96%
rename from web-app/packages/lib/src/modules/project/components/ProjectAccessRequestTableTemplate.vue
rename to web-app/packages/lib/src/modules/project/components/AccessRequestTableTemplate.vue
index 9111faa4..a1717e60 100644
--- a/web-app/packages/lib/src/modules/project/components/ProjectAccessRequestTableTemplate.vue
+++ b/web-app/packages/lib/src/modules/project/components/AccessRequestTableTemplate.vue
@@ -98,14 +98,13 @@ import AppDropdown from '@/common/components/AppDropdown.vue'
 import { ProjectPermissionName } from '@/common/permission_utils'
 import { useNotificationStore } from '@/modules/notification/store'
 import { useProjectStore } from '@/modules/project/store'
-
 import {
-  GetProjectAccessRequestsPayload,
+  GetAccessRequestsPayload,
   ProjectAccessRequest
 } from '@/modules/project/types'
 
 export default defineComponent({
-  name: 'ProjectAccessRequestTableTemplate',
+  name: 'AccessRequestTableTemplate',
   components: { AppDropdown },
   props: {
     namespace: {
@@ -160,7 +159,7 @@ export default defineComponent({
     ...mapActions(useProjectStore, [
       'cancelProjectAccessRequest',
       'acceptProjectAccessRequest',
-      'getProjectAccessRequests'
+      'getAccessRequests'
     ]),
     ...mapActions(useNotificationStore, ['error']),
 
@@ -209,7 +208,7 @@ export default defineComponent({
     async fetchItems() {
       this.loading = true
       try {
-        const payload: GetProjectAccessRequestsPayload = {
+        const payload: GetAccessRequestsPayload = {
           namespace: this.namespace,
           params: {
             page: this.options.page,
@@ -219,7 +218,7 @@ export default defineComponent({
               `${this.options.sortBy} ${this.options.sortDesc ? 'DESC' : 'ASC'}`
           }
         }
-        await this.getProjectAccessRequests(payload)
+        await this.getAccessRequests(payload)
       } finally {
         this.loading = false
       }
diff --git a/web-app/packages/lib/src/modules/project/components/index.ts b/web-app/packages/lib/src/modules/project/components/index.ts
index 2fc104a5..c1a1ce8a 100644
--- a/web-app/packages/lib/src/modules/project/components/index.ts
+++ b/web-app/packages/lib/src/modules/project/components/index.ts
@@ -11,7 +11,7 @@ export { default as FileIcon } from './FileIcon.vue'
 export { default as FolderDiff } from './FolderDiff.vue'
 export { default as PermissionInfo } from './PermissionInfo.vue'
 export { default as ProjectAccessRequests } from './ProjectAccessRequests.vue'
-export { default as ProjectAccessRequestTable } from './ProjectAccessRequestTable.vue'
+export { default as AccessRequestTable } from './AccessRequestTable.vue'
 export { default as ProjectForm } from './ProjectForm.vue'
 export { default as ProjectPermissionsTemplate } from './ProjectPermissionsTemplate.vue'
 export { default as ProjectShareDialog } from './ProjectShareDialog.vue'
@@ -20,6 +20,6 @@ export { default as ProjectShareButtonTemplate } from './ProjectShareButtonTempl
 export { default as ProjectsTable } from './ProjectsTable.vue'
 export { default as ProjectsTableDataLoader } from './ProjectsTableDataLoader.vue'
 export { default as UploadPanel } from './UploadPanel.vue'
-export { default as ProjectAccessRequestTableTemplate } from './ProjectAccessRequestTableTemplate.vue'
+export { default as AccessRequestTableTemplate } from './AccessRequestTableTemplate.vue'
 export { default as FileDetailSidebar } from './FileDetailSidebar.vue'
 export { default as VersionDetailSidebar } from './VersionDetailSidebar.vue'
diff --git a/web-app/packages/lib/src/modules/project/store.ts b/web-app/packages/lib/src/modules/project/store.ts
index 9aae18f2..15fc0549 100644
--- a/web-app/packages/lib/src/modules/project/store.ts
+++ b/web-app/packages/lib/src/modules/project/store.ts
@@ -29,7 +29,7 @@ import {
   ProjectVersionsPayload,
   ProjectAccessRequest,
   GetUserAccessRequestsPayload,
-  GetProjectAccessRequestsPayload,
+  GetAccessRequestsPayload,
   DownloadPayload,
   DeleteProjectPayload,
   ProjectsSortingParams
@@ -355,7 +355,7 @@ export const useProjectStore = defineStore('projectModule', {
       }
     },
 
-    async getProjectAccessRequests(payload: GetProjectAccessRequestsPayload) {
+    async getAccessRequests(payload: GetAccessRequestsPayload) {
       if (payload.namespace) {
         await this.fetchNamespaceAccessRequests({
           namespace: payload.namespace,
diff --git a/web-app/packages/lib/src/modules/project/types.ts b/web-app/packages/lib/src/modules/project/types.ts
index 96c4ca91..e5e11892 100644
--- a/web-app/packages/lib/src/modules/project/types.ts
+++ b/web-app/packages/lib/src/modules/project/types.ts
@@ -176,8 +176,7 @@ export interface AcceptProjectAccessRequestData {
   permissions: ProjectPermissionName
 }
 
-export interface GetProjectAccessRequestsPayload
-  extends GetUserAccessRequestsPayload {
+export interface GetAccessRequestsPayload extends GetUserAccessRequestsPayload {
   namespace?: string
 }
 
diff --git a/web-app/packages/lib/src/modules/project/views/ProjectViewTemplate.vue b/web-app/packages/lib/src/modules/project/views/ProjectViewTemplate.vue
index fca2f388..f9af2a56 100644
--- a/web-app/packages/lib/src/modules/project/views/ProjectViewTemplate.vue
+++ b/web-app/packages/lib/src/modules/project/views/ProjectViewTemplate.vue
@@ -133,7 +133,6 @@ import UploadPanel from '@/modules/project/components/UploadPanel.vue'
 import { ProjectApi } from '@/modules/project/projectApi'
 import { useProjectStore } from '@/modules/project/store'
 import { useUserStore } from '@/modules/user/store'
-import AppDropdown from '@/common/components/AppDropdown.vue'
 
 interface TabItem {
   route: string
@@ -145,8 +144,7 @@ export default defineComponent({
     ProjectShareButton,
     UploadPanel,
     AppContainer,
-    AppSection,
-    AppDropdown
+    AppSection
   },
   props: {
     /**  Show namespace (ws) label in breadcrumb of page */
diff --git a/web-app/packages/lib/src/modules/user/components/ProfileAccessRequestsRow.vue b/web-app/packages/lib/src/modules/user/components/ProfileAccessRequestsRow.vue
index 77fe96e0..7df0c71c 100644
--- a/web-app/packages/lib/src/modules/user/components/ProfileAccessRequestsRow.vue
+++ b/web-app/packages/lib/src/modules/user/components/ProfileAccessRequestsRow.vue
@@ -8,7 +8,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
   <v-card class="table" v-if="accessRequests && accessRequestsCount > 0" flat>
     <v-card-text>
       <h3>You requested access to this projects</h3>
-      <project-access-request-table />
+      <access-request-table />
     </v-card-text>
   </v-card>
 </template>
@@ -17,12 +17,12 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 import { mapActions, mapState } from 'pinia'
 import { defineComponent } from 'vue'
 
-import ProjectAccessRequestTable from '@/modules/project/components/ProjectAccessRequestTable.vue'
+import AccessRequestTable from '@/modules/project/components/AccessRequestTable.vue'
 import { useProjectStore } from '@/modules/project/store'
 
 export default defineComponent({
   name: 'ProfileAccessRequestsRow',
-  components: { ProjectAccessRequestTable },
+  components: { AccessRequestTable },
   computed: {
     ...mapState(useProjectStore, ['accessRequests', 'accessRequestsCount'])
   },

From f1e860a478c175f98f60a5c37438e93f54377be8 Mon Sep 17 00:00:00 2001
From: "marcel.kocisek" <marcel.kocisek@lutraconsulting.co.uk>
Date: Fri, 22 Dec 2023 13:39:31 +0100
Subject: [PATCH 03/14] Fix: - disable accept in expired access requests -
 clean transitions from menu and header - main transition optimizations -
 loading styles fro tables more smooth - primary color handling fix in sass -
 spacing in section title

---
 web-app/packages/app/src/App.vue              |  31 +-
 .../themes/mm-theme-light/_variables.scss     |   2 +-
 .../lib/src/common/components/AppSection.vue  |   2 +-
 .../components/AccessRequestTableTemplate.vue |   6 +-
 .../components/ProjectAccessRequests.vue      | 335 ++++++------------
 .../project/components/ProjectsTable.vue      |   5 +
 .../views/ProjectsListViewTemplate.vue        |   2 +-
 7 files changed, 121 insertions(+), 262 deletions(-)

diff --git a/web-app/packages/app/src/App.vue b/web-app/packages/app/src/App.vue
index 11058bb7..9c460c8d 100644
--- a/web-app/packages/app/src/App.vue
+++ b/web-app/packages/app/src/App.vue
@@ -12,11 +12,9 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
       v-slot="{ Component, route }"
       :key="$route.fullPath"
     >
-      <transition name="fade">
-        <div :key="route.name">
-          <component :is="Component" />
-        </div>
-      </transition>
+      <div :key="route.name">
+        <component :is="Component" />
+      </div>
     </router-view>
 
     <main
@@ -31,13 +29,11 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
       ]"
     >
       <router-view name="header" v-slot="{ Component, route }">
-        <transition name="fade">
-          <div :key="route.name">
-            <component :is="Component" />
-          </div>
-        </transition>
+        <div :key="route.name">
+          <component :is="Component" />
+        </div>
       </router-view>
-      <PDivider :pt="{ root: { class: 'm-0'}}"></PDivider>
+      <PDivider :pt="{ root: { class: 'm-0' } }"></PDivider>
       <v-card
         v-if="pingData && pingData.maintenance"
         variant="outlined"
@@ -169,17 +165,8 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
-.fade-leave-active {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-}
-
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 0.25s;
+.fade-enter-active {
+  transition: opacity ease-in 0.25s;
 }
 
 .fade-enter-from,
diff --git a/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/_variables.scss b/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/_variables.scss
index 98cd5328..220ab8d1 100644
--- a/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/_variables.scss
+++ b/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/_variables.scss
@@ -52,7 +52,7 @@ $colors: (
     --surface-f:#ffffff;
     --text-color: #{map-get($colors , "night")};
     --text-color-secondary:#aaacad;
-    --primary-color:$primaryColor;
+    --primary-color:#{$primaryColor};
     --primary-color-text:#ffffff;
     --font-family:inherit;
     --surface-0: #ffffff;
diff --git a/web-app/packages/lib/src/common/components/AppSection.vue b/web-app/packages/lib/src/common/components/AppSection.vue
index e2bec11b..aaeaa861 100644
--- a/web-app/packages/lib/src/common/components/AppSection.vue
+++ b/web-app/packages/lib/src/common/components/AppSection.vue
@@ -16,7 +16,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
       v-if="!!$slots.title"
       class="flex justify-content-between align-items-center p-4"
     >
-      <h2 class="text-sm text-color"><slot name="title"></slot></h2>
+      <h2 class="text-sm text-color m-0"><slot name="title"></slot></h2>
       <slot name="extra"></slot>
     </header>
     <slot></slot>
diff --git a/web-app/packages/lib/src/modules/project/components/AccessRequestTableTemplate.vue b/web-app/packages/lib/src/modules/project/components/AccessRequestTableTemplate.vue
index a1717e60..c6c6c3e8 100644
--- a/web-app/packages/lib/src/modules/project/components/AccessRequestTableTemplate.vue
+++ b/web-app/packages/lib/src/modules/project/components/AccessRequestTableTemplate.vue
@@ -58,6 +58,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
               option-value="value"
               v-model="permissions[item.id]"
               @change="(e) => permissionsChange(e, item)"
+              :disabled="expired(item.expire)"
               class="w-6 lg:w-4 p-1"
             />
             <div class="flex justify-content-end w-6 lg:w-4 p-1">
@@ -75,6 +76,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
                 rounded
                 aria-label="Accept"
                 severity="success"
+                :disabled="expired(item.expire)"
                 @click="acceptRequest(item)"
               />
             </div>
@@ -100,7 +102,7 @@ import { useNotificationStore } from '@/modules/notification/store'
 import { useProjectStore } from '@/modules/project/store'
 import {
   GetAccessRequestsPayload,
-  ProjectAccessRequest
+  AccessRequest
 } from '@/modules/project/types'
 
 export default defineComponent({
@@ -168,7 +170,7 @@ export default defineComponent({
       this.options.itemsPerPage = e.rows
       this.fetchItems()
     },
-    permissionsChange(e: DropdownChangeEvent, item: ProjectAccessRequest) {
+    permissionsChange(e: DropdownChangeEvent, item: AccessRequest) {
       const { value } = e
       const { id } = item
       this.selectedPermissions[id] = value
diff --git a/web-app/packages/lib/src/modules/project/components/ProjectAccessRequests.vue b/web-app/packages/lib/src/modules/project/components/ProjectAccessRequests.vue
index 2e825398..27f63e90 100644
--- a/web-app/packages/lib/src/modules/project/components/ProjectAccessRequests.vue
+++ b/web-app/packages/lib/src/modules/project/components/ProjectAccessRequests.vue
@@ -5,149 +5,103 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 -->
 
 <template>
-  <v-layout class="no-shrink column">
-    <label class="mt-4 text-grey-darken-1">Access requests:</label>
-    <!-- <v-data-table
-      :loading="loading"
-      :headers="tableHeaders"
-      :items="accessRequests"
-      :server-items-length="accessRequestsCount"
-      no-data-text="No access requests"
-      :options="options"
-      v-on:update:options="onUpdateOptions"
-      :footer-props="{ 'items-per-page-options': [10, 25, 50] }"
-    >
-      <template #header.user="{ header }">
-        <v-tooltip v-if="header.tooltip" location="top">
-          <template v-slot:activator="{ props }">
-            <span v-bind="props">
-              {{ header.text }}
-            </span>
-          </template>
-          <span>
-            {{ header.tooltip }}
-          </span>
-        </v-tooltip>
-        <span v-else>
-          {{ header.text }}
-        </span>
-      </template>
-      <template #header.expire="{ header }">
-        <v-tooltip v-if="header.tooltip" location="top">
-          <template v-slot:activator="{ props }">
-            <span v-bind="props">
-              {{ header.text }}
-            </span>
-          </template>
-          <span>
-            {{ header.tooltip }}
-          </span>
-        </v-tooltip>
-        <span v-else>
-          {{ header.text }}
-        </span>
-      </template>
-      <template #item.user="{ value }">
-        <v-tooltip
-          top
-          v-if="
-            value.profile &&
-            (value.profile.first_name || value.profile.last_name)
-          "
+  <PDataView
+    :value="accessRequests"
+    :lazy="true"
+    :paginator="accessRequestsCount > 10"
+    :loading="loading"
+    :rows="options.itemsPerPage"
+    :totalRecords="accessRequestsCount"
+    :data-key="'id'"
+    :paginator-template="'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink'"
+    size="small"
+    @page="onPage"
+    :pt="{
+      header: {
+        class: 'px-4 py-2'
+      },
+      loadingOverlay: {
+        class: 'bg-primary-reverse opacity-50'
+      }
+    }"
+  >
+    <template #header>
+      <h3 class="font-semibold text-xs text-color m-0">Access requests</h3>
+    </template>
+    <template #list="slotProps">
+      <template v-for="item in slotProps.items" :key="item.id">
+        <!-- Row -->
+        <div
+          class="flex flex-column lg:flex-row align-items-center justify-content-between px-4 py-2 mt-0 border-bottom-1 border-gray-200"
         >
-          <template v-slot:activator="{ props }">
-            <b v-bind="props">
-              {{ value.username }}
-            </b>
-          </template>
-          <span>
-            <span v-if="value.profile && value.profile.first_name">{{
-              value.profile.first_name
-            }}</span>
-            <span v-if="value.profile && value.profile.last_name">
-              {{ value.profile.last_name }}</span
+          <p class="w-12 lg:w-4 text-xs p-2 lg:p-0">
+            User
+            <span class="font-semibold">{{ item.requested_by }}</span>
+            wants to transfer project
+            <span class="font-semibold">{{ item.project_name }}</span>
+            to your workspace.
+          </p>
+          <div
+            class="flex w-12 lg:w-4 align-items-center flex-wrap lg:flex-nowrap"
+          >
+            <p
+              v-tooltip.top="{ value: $filters.datetime(item.expire) }"
+              class="opacity-80 text-xs w-12 lg:w-4 p-2 lg:p-1"
             >
-          </span>
-        </v-tooltip>
-        <b v-else>
-          {{ value.username }}
-        </b>
-      </template>
-      <template #item.expire="{ value }">
-        <v-tooltip location="bottom">
-          <template v-slot:activator="{ props }">
-            <span v-bind="props">{{ $filters.remainingtime(value) }}</span>
-          </template>
-          <span>{{ $filters.datetime(value) }}</span>
-        </v-tooltip>
-      </template>
-      <template #item.permissions="{ item }">
-        <v-select
-          :items="['read', 'write', 'owner']"
-          v-model="permissions[item.id]"
-          return-object
-        >
-        </v-select>
-      </template>
-      <template #item.confirm="{ item }">
-        <div class="justify-center px-0">
-          <v-tooltip location="bottom">
-            <template v-slot:activator="{ props }">
-              <span v-bind="props">
-                <v-chip
-                  :disabled="!canAcceptAccessRequest(item.user.id, item.expire)"
-                  @click="acceptRequest(item)"
-                  elevation="0"
-                  color="green"
-                  class="white--text"
-                >
-                  accept
-                </v-chip>
-              </span>
-            </template>
-            <span>Accept request</span>
-          </v-tooltip>
+              Expiring in {{ $filters.remainingtime(item.expire) }}
+            </p>
+            <AppDropdown
+              :options="[
+                { value: 'read', label: 'Reader' },
+                { value: 'write', label: 'Writer' },
+                { value: 'owner', label: 'Owner' }
+              ]"
+              option-label="label"
+              option-value="value"
+              v-model="permissions[item.id]"
+              class="w-6 lg:w-4 p-1"
+            />
+            <div class="flex justify-content-end w-6 lg:w-4 p-1">
+              <PButton
+                :disabled="!canCancelAccessRequest(item.user.id)"
+                icon="ti ti-x"
+                rounded
+                aria-label="Disallow"
+                severity="danger"
+                class="mr-2"
+                @click="cancelRequest(item)"
+              />
+              <PButton
+                :disabled="!canAcceptAccessRequest(item.user.id, item.expire)"
+                icon="ti ti-check"
+                rounded
+                aria-label="Accept"
+                severity="success"
+                @click="acceptRequest(item)"
+              />
+            </div>
+          </div>
         </div>
       </template>
-      <template #item.cancel="{ item }">
-        <div class="justify-center">
-          <v-tooltip location="bottom">
-            <template v-slot:activator="{ props }">
-              <span v-bind="props">
-                <v-chip
-                  :disabled="!canCancelAccessRequest(item.user.id)"
-                  @click="cancelRequest(item)"
-                  elevation="0"
-                  color="red"
-                  class="white--text"
-                >
-                  cancel
-                </v-chip>
-              </span>
-            </template>
-            <span>Cancel access request</span>
-          </v-tooltip>
-        </div>
-      </template>
-    </v-data-table> -->
-    <button
-      ref="hidden-btn"
-      id="accept-request-access-btn"
-      style="visibility: hidden"
-    />
-  </v-layout>
+    </template>
+    <template #empty>
+      <p class="text-center p-4 m-0">No access requests found</p>
+    </template>
+  </PDataView>
 </template>
 
 <script lang="ts">
 import { mapActions, mapState } from 'pinia'
 import { defineComponent } from 'vue'
 
+import AppDropdown from '@/common/components/AppDropdown.vue'
 import { getErrorMessage } from '@/common/error_utils'
 import { isAtLeastProjectRole, ProjectRole } from '@/common/permission_utils'
-import { GetProjectAccessRequestsPayload } from '@/modules'
+import { GetAccessRequestsPayload } from '@/modules'
 import { useNotificationStore } from '@/modules/notification/store'
 import { useProjectStore } from '@/modules/project/store'
 import { useUserStore } from '@/modules/user/store'
+import { DataViewPageEvent } from 'primevue/dataview'
 
 export default defineComponent({
   data() {
@@ -155,52 +109,15 @@ export default defineComponent({
       loading: false,
       options: {
         // Default is order_params=expire ASC
-        sortBy: ['expire'],
-        sortDesc: [false],
+        sortBy: 'expire',
+        sortDesc: false,
         itemsPerPage: 10,
         page: 1
       },
-      permissions: {},
-      tableHeaders: [
-        {
-          text: 'User',
-          value: 'user',
-          align: 'left',
-          sortable: false,
-          tooltip: 'Request from user'
-        },
-        {
-          text: 'Expire',
-          value: 'expire',
-          align: 'left',
-          sortable: false,
-          tooltip: 'Project access request expiration date'
-        },
-        {
-          text: 'Permissions',
-          value: 'permissions',
-          align: 'right',
-          sortable: false,
-          width: 60
-        },
-        {
-          text: ' ',
-          value: 'confirm',
-          align: 'right',
-          sortable: false,
-          width: 60
-        },
-        {
-          text: '',
-          value: 'cancel',
-          align: 'right',
-          sortable: false,
-          width: 60
-        }
-      ],
-      originalValue: null
+      permissions: {}
     }
   },
+  components: { AppDropdown },
   computed: {
     ...mapState(useProjectStore, [
       'project',
@@ -209,11 +126,14 @@ export default defineComponent({
     ]),
     ...mapState(useUserStore, ['loggedUser'])
   },
+  created() {
+    this.fetchItems()
+  },
   methods: {
     ...mapActions(useProjectStore, [
       'cancelProjectAccessRequest',
       'acceptProjectAccessRequest',
-      'getProjectAccessRequests'
+      'getAccessRequests'
     ]),
     ...mapActions(useNotificationStore, ['error']),
 
@@ -244,9 +164,6 @@ export default defineComponent({
     },
     async acceptRequest(request) {
       try {
-        const el = this.$refs['hidden-btn']
-        el.value = this.permissions[request.id]
-        el.dispatchEvent(new Event('click', {}))
         const data = {
           permissions: this.permissions[request.id]
         }
@@ -275,86 +192,34 @@ export default defineComponent({
     async fetchItems() {
       this.loading = true
       try {
-        const payload: GetProjectAccessRequestsPayload = {
+        const payload: GetAccessRequestsPayload = {
           namespace: this.project.namespace,
           params: {
+            project_name: this.project.name,
             page: this.options.page,
             per_page: this.options.itemsPerPage,
             order_params:
               this.options.sortBy[0] &&
               `${this.options.sortBy[0]} ${
                 this.options.sortDesc[0] ? 'DESC' : 'ASC'
-              }`,
-            project_name: this.project.name
+              }`
           }
         }
-        await this.getProjectAccessRequests(payload)
+        await this.getAccessRequests(payload)
         this.accessRequests.forEach((request) => {
           this.permissions[request.id] = 'read'
         })
       } finally {
         this.loading = false
       }
+    },
+    onPage(e: DataViewPageEvent) {
+      this.options.page = e.page + 1
+      this.options.itemsPerPage = e.rows
+      this.fetchItems()
     }
   }
 })
 </script>
 
-<style lang="scss" scoped>
-.no-shrink {
-  flex: 0 0 auto;
-}
-
-label {
-  font-weight: 500;
-}
-
-:deep(*) {
-  .v-data-table__overflow {
-    margin: 0.5em 0;
-    border: 1px solid #ddd;
-    border-radius: 3px;
-    padding: 0.5em;
-    background-color: #f9f9f9;
-
-    .v-datatable {
-      background-color: transparent;
-    }
-  }
-}
-
-.div {
-  b {
-    margin-right: 10px;
-  }
-
-  span {
-    margin-right: 3px;
-    font-size: 12px;
-  }
-}
-
-.private-public-btn {
-  font-size: 12px;
-  padding-left: 20px;
-  padding-right: 20px;
-
-  span {
-    font-weight: 700;
-  }
-}
-
-.private-public-text {
-  font-size: 14px;
-}
-
-.public-private-zone {
-  margin-top: 20px;
-  margin-bottom: 20px;
-
-  button {
-    margin-right: 20px;
-    margin-top: 1px;
-  }
-}
-</style>
+<style lang="scss" scoped></style>
diff --git a/web-app/packages/lib/src/modules/project/components/ProjectsTable.vue b/web-app/packages/lib/src/modules/project/components/ProjectsTable.vue
index 761658c9..06b18a1a 100644
--- a/web-app/packages/lib/src/modules/project/components/ProjectsTable.vue
+++ b/web-app/packages/lib/src/modules/project/components/ProjectsTable.vue
@@ -19,6 +19,11 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
       :paginator-template="'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink'"
       @row-click="rowClick"
       @page="onPage"
+      :pt="{
+        loadingOverlay: {
+          class: 'bg-primary-reverse opacity-50'
+        }
+      }"
     >
       <template v-for="col in columns" :key="col.field">
         <PColumn
diff --git a/web-app/packages/lib/src/modules/project/views/ProjectsListViewTemplate.vue b/web-app/packages/lib/src/modules/project/views/ProjectsListViewTemplate.vue
index 07c67359..26d32206 100644
--- a/web-app/packages/lib/src/modules/project/views/ProjectsListViewTemplate.vue
+++ b/web-app/packages/lib/src/modules/project/views/ProjectsListViewTemplate.vue
@@ -7,7 +7,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 <template>
   <app-container>
     <template v-if="!namespace">
-      <app-section ground class="pb-4">
+      <app-section ground class="pb-3">
         <!-- Title with buttons -->
         <header class="flex flex-column lg:flex-row lg:align-items-center">
           <h1 class="text-3xl font-semibold">

From 9e385d38529f79119158d658f4ba70e4a4e00b9c Mon Sep 17 00:00:00 2001
From: "marcel.kocisek" <marcel.kocisek@lutraconsulting.co.uk>
Date: Fri, 22 Dec 2023 16:06:33 +0100
Subject: [PATCH 04/14] Added: - project permissions table template

---
 .../project/views/ProjectSettingsView.vue     |   5 +-
 .../components/AccessRequestTableTemplate.vue |   3 +
 .../components/ProjectPermissionsTemplate.vue | 127 ++++++++++++---
 .../project/components/ProjectsTable.vue      |   5 +-
 .../packages/lib/src/modules/project/store.ts |   4 +-
 .../packages/lib/src/modules/project/types.ts |   6 +-
 .../views/ProjectSettingsViewTemplate.vue     | 152 +++++++++---------
 .../views/ProjectVersionsViewTemplate.vue     |  36 ++---
 8 files changed, 212 insertions(+), 126 deletions(-)

diff --git a/web-app/packages/app/src/modules/project/views/ProjectSettingsView.vue b/web-app/packages/app/src/modules/project/views/ProjectSettingsView.vue
index 70feaebb..5e64e70e 100644
--- a/web-app/packages/app/src/modules/project/views/ProjectSettingsView.vue
+++ b/web-app/packages/app/src/modules/project/views/ProjectSettingsView.vue
@@ -5,8 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 -->
 
 <template>
-  Hopaa
-  <!-- <project-settings-view-template
+  <project-settings-view-template
     :namespace="namespace"
     :projectName="projectName"
     :asAdmin="asAdmin"
@@ -20,7 +19,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
         @save-project="saveProject(...arguments)"
       />
     </template>
-  </project-settings-view-template> -->
+  </project-settings-view-template>
 </template>
 
 <script lang="ts">
diff --git a/web-app/packages/lib/src/modules/project/components/AccessRequestTableTemplate.vue b/web-app/packages/lib/src/modules/project/components/AccessRequestTableTemplate.vue
index c6c6c3e8..8461416e 100644
--- a/web-app/packages/lib/src/modules/project/components/AccessRequestTableTemplate.vue
+++ b/web-app/packages/lib/src/modules/project/components/AccessRequestTableTemplate.vue
@@ -19,6 +19,9 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
     :pt="{
       header: {
         class: 'px-4 py-2'
+      },
+      loadingOverlay: {
+        class: 'bg-primary-reverse opacity-50'
       }
     }"
   >
diff --git a/web-app/packages/lib/src/modules/project/components/ProjectPermissionsTemplate.vue b/web-app/packages/lib/src/modules/project/components/ProjectPermissionsTemplate.vue
index c311653f..08fdf1dc 100644
--- a/web-app/packages/lib/src/modules/project/components/ProjectPermissionsTemplate.vue
+++ b/web-app/packages/lib/src/modules/project/components/ProjectPermissionsTemplate.vue
@@ -5,11 +5,83 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 -->
 
 <template>
-  <v-layout class="no-shrink column">
-    <label class="mt-4 text-grey-darken-1">Manage Access:</label>
-    <slot name="banner" />
-    <v-data-table
-      :headers="header"
+  <AppContainer>
+    <AppSection>
+      <PDataView
+        :value="displayedValues"
+        :data-key="'id'"
+        data-cy="project-verision-table"
+        lazy
+        :pt="{
+          header: {
+            // small header
+            class: 'px-3 py-2'
+          }
+        }"
+      >
+        <template #header>
+          <div class="w-11 grid grid-nogutter">
+            <!-- Visible on lg breakpoint > -->
+            <div
+              v-for="col in columns.filter((item) => !item.fixed)"
+              :class="['text-xs hidden lg:flex', `col-${col.cols ?? 4}`]"
+              :key="col.text"
+            >
+              {{ col.text }}
+            </div>
+            <!-- else -->
+            <div class="col-12 flex lg:hidden">Members</div>
+          </div>
+        </template>
+
+        <!-- table rows -->
+        <template #list="slotProps">
+          <div
+            v-for="item in slotProps.items"
+            :key="item.id"
+            class="flex align-items-center hover:bg-gray-50 cursor-pointer border-bottom-1 border-gray-200 text-sm px-3 py-2 mt-0"
+            @click.prevent="rowClick(item.name)"
+          >
+            <div class="flex-grow-1 grid grid-nogutter">
+              <!-- Columns, we are using data view instead table, it is better handling of respnsive state -->
+              <div
+                v-for="col in columns.filter((item) => !item.fixed)"
+                :key="col.value"
+                :class="[
+                  'flex flex-column justify-content-center col-12',
+                  `lg:col-${col.cols ?? 4}`
+                ]"
+              >
+                <p class="text-xs opacity-80 mb-1 lg:hidden">
+                  {{ col.text }}
+                </p>
+                <span :class="col.textClass">
+                  {{ item[col.value] }}
+                </span>
+              </div>
+              <!-- actions -->
+            </div>
+            <div class="flex flex-shrink-0 justify-content-end">
+              <PButton
+                icon="ti ti-download"
+                severity="secondary"
+                text
+                :disabled="!canRemoveUser(item.user.id)"
+                @click.stop="removeUser(item.user)"
+              />
+            </div>
+          </div>
+        </template>
+        <template #empty>
+          <div class="w-full text-center p-4">
+            <span>No versions found.</span>
+          </div>
+        </template>
+      </PDataView>
+    </AppSection>
+
+    <!-- <v-data-table
+      :headers="columns"
       :items="displayedValues"
       no-data-text="No users"
       :hide-default-footer="displayedValues.length <= 10"
@@ -80,13 +152,14 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
           </v-btn>
         </div>
       </template>
-    </v-data-table>
+    </v-data-table> -->
+    <slot name="banner" />
     <button
       ref="hidden-input"
       id="change-permissions-input"
       style="visibility: hidden"
     />
-  </v-layout>
+  </AppContainer>
 </template>
 
 <script lang="ts">
@@ -104,6 +177,16 @@ import { isAtLeastProjectRole, ProjectRole } from '@/common/permission_utils'
 import { useProjectStore } from '@/modules/project/store'
 import { useUserStore } from '@/modules/user/store'
 import { UserSearchParams } from '@/modules/user/types'
+import AppContainer from '@/common/components/AppContainer.vue'
+import AppSection from '@/common/components/AppSection.vue'
+
+interface ColumnItem {
+  text: string
+  value: string
+  cols?: number
+  fixed?: boolean
+  textClass?: string
+}
 
 export default defineComponent({
   props: {
@@ -114,29 +197,24 @@ export default defineComponent({
       // search data
       isLoading: false,
       users: [],
-      header: [
+      columns: [
         {
-          text: 'User',
-          value: 'user',
-          align: 'left',
-          sortable: false
+          text: 'Email address',
+          value: 'email',
+          textClass: 'font-semibold',
+          cols: 10
         },
         {
-          text: 'Permissions',
+          text: 'Project permissions',
           value: 'permissions',
-          width: 60,
-          align: 'left',
-          sortable: false,
-          tooltip: 'Has permission to change project settings'
+          cols: 2
         },
         {
           text: 'Remove',
           value: 'remove',
-          align: 'right',
-          sortable: false,
-          width: 60
+          fixed: true
         }
-      ],
+      ] as ColumnItem[],
       originalValue: null,
       clonedValue: null
     }
@@ -148,7 +226,6 @@ export default defineComponent({
       'project',
       'isProjectOwner'
     ]),
-
     permissionStates() {
       return ['owner', 'writer', 'reader']
     },
@@ -156,6 +233,7 @@ export default defineComponent({
       const { ownersnames, readersnames, writersnames } = this.modelValue
       const users = this.users.map((user) => ({
         username: user.username,
+        email: user.email,
         user,
         owner: ownersnames?.includes(user.username),
         read: readersnames?.includes(user.username),
@@ -223,7 +301,6 @@ export default defineComponent({
       const el = this.$refs['hidden-input']
       el.value = permission
       el.dispatchEvent(new Event('click', {}))
-
       if (permission === 'owner') {
         this.setOwnerPermission(user)
       } else if (permission === 'writer') {
@@ -252,7 +329,6 @@ export default defineComponent({
       })
       // emit change of value
       this.emit(this.clonedValue)
-
       this.users.splice(this.users.indexOf(user), 1)
     },
     setWritePermission(user) {
@@ -325,7 +401,8 @@ export default defineComponent({
         JSON.stringify({ ...this.modelValue, ...modifiedValues })
       )
     }
-  }
+  },
+  components: { AppContainer, AppSection }
 })
 </script>
 
diff --git a/web-app/packages/lib/src/modules/project/components/ProjectsTable.vue b/web-app/packages/lib/src/modules/project/components/ProjectsTable.vue
index 06b18a1a..546de507 100644
--- a/web-app/packages/lib/src/modules/project/components/ProjectsTable.vue
+++ b/web-app/packages/lib/src/modules/project/components/ProjectsTable.vue
@@ -22,6 +22,9 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
       :pt="{
         loadingOverlay: {
           class: 'bg-primary-reverse opacity-50'
+        },
+        bodyRow: {
+          class: 'text-xs hover:bg-gray-50 cursor-pointer'
         }
       }"
     >
@@ -69,7 +72,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
                 value: $filters.datetime(slotProps.data.updated),
                 pt: { root: { 'data-cy': 'project-form-updated' } }
               }"
-              class="text-color-secondary text-xs mt-0"
+              class="text-color-secondary mt-0"
             >
               Updated {{ $filters.timediff(slotProps.data.updated) }}
             </p>
diff --git a/web-app/packages/lib/src/modules/project/store.ts b/web-app/packages/lib/src/modules/project/store.ts
index 15fc0549..398af288 100644
--- a/web-app/packages/lib/src/modules/project/store.ts
+++ b/web-app/packages/lib/src/modules/project/store.ts
@@ -27,7 +27,7 @@ import {
   FetchProjectVersionsPayload,
   ProjectVersion,
   ProjectVersionsPayload,
-  ProjectAccessRequest,
+  AccessRequest,
   GetUserAccessRequestsPayload,
   GetAccessRequestsPayload,
   DownloadPayload,
@@ -45,7 +45,7 @@ export interface UploadFilesPayload {
 }
 
 export interface ProjectState {
-  accessRequests: ProjectAccessRequest[]
+  accessRequests: AccessRequest[]
   accessRequestsCount: number
   project: EnhancedProjectDetail
   projects: ProjectListItem[]
diff --git a/web-app/packages/lib/src/modules/project/types.ts b/web-app/packages/lib/src/modules/project/types.ts
index e5e11892..6481e012 100644
--- a/web-app/packages/lib/src/modules/project/types.ts
+++ b/web-app/packages/lib/src/modules/project/types.ts
@@ -142,7 +142,7 @@ export interface ProjectParams {
   namespace: string
 }
 
-export interface ProjectAccessRequest {
+export interface AccessRequest {
   expire: string
   id: number
   namespace: string
@@ -153,14 +153,14 @@ export interface ProjectAccessRequest {
 }
 
 export type ProjectAccessRequestResponse =
-  PaginatedResponse<ProjectAccessRequest>
+  PaginatedResponse<AccessRequest>
 
 export interface ProjectAccessRequestParams extends PaginatedRequestParamsApi {
   project_name?: string
 }
 
 export interface AccessRequestsPayload extends PaginatedResponseDefaults {
-  accessRequests: ProjectAccessRequest[]
+  accessRequests: AccessRequest[]
 }
 
 export interface GetUserAccessRequestsPayload {
diff --git a/web-app/packages/lib/src/modules/project/views/ProjectSettingsViewTemplate.vue b/web-app/packages/lib/src/modules/project/views/ProjectSettingsViewTemplate.vue
index 85818e86..10fd3c65 100644
--- a/web-app/packages/lib/src/modules/project/views/ProjectSettingsViewTemplate.vue
+++ b/web-app/packages/lib/src/modules/project/views/ProjectSettingsViewTemplate.vue
@@ -5,69 +5,76 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 -->
 
 <template>
-  <v-layout class="settings column">
+  <div>
     <slot
       name="permissions"
       :settings="settings"
       :key-prop="key"
       :save-project="saveProject"
     ></slot>
-    <project-access-requests v-if="showAccessRequests" />
-    <v-layout class="public-private-zone">
-      <v-container>
-        <v-row>
-          <v-col>
-            <span class="private-public-text" v-if="settings.access.public">
-              <b>This is public project</b><br />
-              <span class="description-text"
-                >Hide this project from everyone.</span
-              >
-            </span>
-            <span class="private-public-text" v-else>
-              <b>This is private project</b><br />
-              <span class="description-text"
-                >Make this project visible to anyone.</span
-              >
-            </span>
-          </v-col>
-          <v-col>
-            <v-btn
-              @click="confirmPublicPrivate()"
-              class="private-public-btn"
-              variant="outlined"
-            >
-              <span v-if="settings.access.public">Make private</span>
-              <span v-else>Make public</span>
-            </v-btn>
-          </v-col>
-        </v-row>
-        <slot name="operations"></slot>
-        <v-row
-          v-if="project && project.permissions && project.permissions.delete"
-        >
-          <v-col>
-            <span class="private-public-text">
-              <b>Delete project</b><br />
-              <span class="description-text">All data will be lost</span></span
+    <app-container v-if="showAccessRequests">
+      <app-section
+        ><template #title
+          >Requests
+          <span class="text-color-secondary"
+            >({{ accessRequestsCount }})</span
+          ></template
+        ><project-access-requests
+      /></app-section>
+    </app-container>
+
+    <v-container>
+      <v-row>
+        <v-col>
+          <span class="private-public-text" v-if="settings.access.public">
+            <b>This is public project</b><br />
+            <span class="description-text"
+              >Hide this project from everyone.</span
             >
-          </v-col>
-          <v-col self-align="end">
-            <v-btn
-              @click="confirmDelete"
-              class="private-public-btn"
-              variant="outlined"
+          </span>
+          <span class="private-public-text" v-else>
+            <b>This is private project</b><br />
+            <span class="description-text"
+              >Make this project visible to anyone.</span
             >
-              <span>Delete</span>
-            </v-btn>
-          </v-col>
-        </v-row>
-      </v-container>
-    </v-layout>
-  </v-layout>
+          </span>
+        </v-col>
+        <v-col>
+          <v-btn
+            @click="confirmPublicPrivate()"
+            class="private-public-btn"
+            variant="outlined"
+          >
+            <span v-if="settings.access.public">Make private</span>
+            <span v-else>Make public</span>
+          </v-btn>
+        </v-col>
+      </v-row>
+      <slot name="operations"></slot>
+      <v-row
+        v-if="project && project.permissions && project.permissions.delete"
+      >
+        <v-col>
+          <span class="private-public-text">
+            <b>Delete project</b><br />
+            <span class="description-text">All data will be lost</span></span
+          >
+        </v-col>
+        <v-col self-align="end">
+          <v-btn
+            @click="confirmDelete"
+            class="private-public-btn"
+            variant="outlined"
+          >
+            <span>Delete</span>
+          </v-btn>
+        </v-col>
+      </v-row>
+    </v-container>
+  </div>
 </template>
 
 <script lang="ts">
-import debounce from 'lodash/debounce'
 import { mapActions, mapState } from 'pinia'
 import { PropType, defineComponent } from 'vue'
 
@@ -78,11 +85,16 @@ import { useNotificationStore } from '@/modules/notification/store'
 import ProjectAccessRequests from '@/modules/project/components/ProjectAccessRequests.vue'
 import { useProjectStore } from '@/modules/project/store'
 import { useUserStore } from '@/modules/user/store'
+import AppContainer from '@/common/components/AppContainer.vue'
+import AppSection from '@/common/components/AppSection.vue'
+import { ProjectAccess } from '@/modules'
 
 export default defineComponent({
   name: 'ProjectSettingsViewTemplate',
   components: {
-    ProjectAccessRequests
+    ProjectAccessRequests,
+    AppContainer,
+    AppSection
   },
   props: {
     namespace: String,
@@ -99,13 +111,13 @@ export default defineComponent({
   },
   data() {
     return {
-      settings: {},
+      settings: {} as { access?: ProjectAccess },
       key: 0
     }
   },
   computed: {
     ...mapState(useUserStore, ['loggedUser']),
-    ...mapState(useProjectStore, ['project'])
+    ...mapState(useProjectStore, ['project', 'accessRequestsCount'])
   },
   watch: {
     project: {
@@ -133,7 +145,7 @@ export default defineComponent({
   },
   methods: {
     ...mapActions(useProjectStore, ['deleteProject', 'saveProjectSettings']),
-    ...mapActions(useDialogStore, ['show']),
+    ...mapActions(useDialogStore, { showDialog: 'show' }),
     ...mapActions(useNotificationStore, ['error']),
 
     saveProject(newSettingsAccessValues) {
@@ -146,7 +158,7 @@ export default defineComponent({
       this.settings.access.writersnames = newSettings.access.writersnames
       this.saveSettings(newSettings)
     },
-    saveSettings: debounce(function (newSettings) {
+    saveSettings(newSettings) {
       try {
         this.saveProjectSettings({
           namespace: this.namespace,
@@ -158,7 +170,7 @@ export default defineComponent({
           text: getErrorMessage(err, 'Failed to save project settings')
         })
       }
-    }, 2000),
+    },
     togglePublicPrivate() {
       this.settings.access.public = !this.settings.access.public
     },
@@ -174,9 +186,13 @@ export default defineComponent({
       const listeners = {
         confirm: () => this.onDeleteProject()
       }
-      this.show({
+      this.showDialog({
         component: ConfirmDialog,
-        params: { props, listeners, dialog: { maxWidth: 500 } }
+        params: {
+          props,
+          listeners,
+          dialog: { header: 'Confirm delete project' }
+        }
       })
     },
     confirmPublicPrivate() {
@@ -189,9 +205,9 @@ export default defineComponent({
       const listeners = {
         confirm: () => this.togglePublicPrivate()
       }
-      this.show({
+      this.showDialog({
         component: ConfirmDialog,
-        params: { props, listeners, dialog: { maxWidth: 500 } }
+        params: { props, listeners, dialog: { header: 'Public project' } }
       })
     },
     onDeleteProject() {
@@ -203,14 +219,4 @@ export default defineComponent({
 })
 </script>
 
-<style lang="scss" scoped>
-.settings {
-  display: flex;
-  flex-direction: column;
-  flex: 1 0 auto;
-}
-
-.actions {
-  flex: 0 0 auto;
-}
-</style>
+<style lang="scss" scoped></style>
diff --git a/web-app/packages/lib/src/modules/project/views/ProjectVersionsViewTemplate.vue b/web-app/packages/lib/src/modules/project/views/ProjectVersionsViewTemplate.vue
index 3e78e39d..671a5dd8 100644
--- a/web-app/packages/lib/src/modules/project/views/ProjectVersionsViewTemplate.vue
+++ b/web-app/packages/lib/src/modules/project/views/ProjectVersionsViewTemplate.vue
@@ -34,7 +34,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
             <!-- Visible on lg breakpoint > -->
             <div
               v-for="col in columns.filter((item) => !item.fixed)"
-              :class="['text-xs hidden lg:flex', `col-${col.cols ?? 1}`]"
+              :class="['text-xs hidden lg:flex', `col-${col.cols ?? 2}`]"
               :key="col.text"
             >
               {{ col.text }}
@@ -49,7 +49,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
           <div
             v-for="item in slotProps.items"
             :key="item.id"
-            class="flex align-items-center hover:bg-gray-200 cursor-pointer border-bottom-1 border-gray-200 text-sm px-3 py-2 mt-0"
+            class="flex align-items-center hover:bg-gray-50 cursor-pointer border-bottom-1 border-gray-200 text-sm px-3 py-2 mt-0"
             :style="[rowStyle(item)]"
             @click.prevent="!item.disabled && rowClick(item.name)"
           >
@@ -63,7 +63,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
                   v-if="col.value === 'name'"
                   :class="[
                     'flex flex-column justify-content-center col-12',
-                    `lg:col-${col.cols ?? 1}`
+                    `lg:col-${col.cols ?? 2}`
                   ]"
                 >
                   <p class="text-xs opacity-80 mb-1 lg:hidden">
@@ -77,7 +77,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
                   v-else-if="col.value === 'created'"
                   :class="[
                     'flex flex-column justify-content-center col-12',
-                    `lg:col-${col.cols ?? 1}`
+                    `lg:col-${col.cols ?? 2}`
                   ]"
                 >
                   <p class="text-xs opacity-80 mb-1 lg:hidden">
@@ -96,7 +96,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
                   v-else-if="col.value === 'changes.added'"
                   :class="[
                     'flex flex-column justify-content-center col-12',
-                    `lg:col-${col.cols ?? 1}`
+                    `lg:col-${col.cols ?? 2}`
                   ]"
                 >
                   <p class="text-xs opacity-80 mb-1 lg:hidden">
@@ -110,7 +110,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
                   v-else-if="col.value === 'changes.updated'"
                   :class="[
                     'flex flex-column justify-content-center col-12',
-                    `lg:col-${col.cols ?? 1}`
+                    `lg:col-${col.cols ?? 2}`
                   ]"
                 >
                   <p class="text-xs opacity-80 mb-1 lg:hidden">
@@ -124,7 +124,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
                   v-else-if="col.value === 'changes.removed'"
                   :class="[
                     'flex flex-column justify-content-center col-12',
-                    `lg:col-${col.cols ?? 1}`
+                    `lg:col-${col.cols ?? 2}`
                   ]"
                 >
                   <p class="text-xs opacity-80 mb-1 lg:hidden">
@@ -138,7 +138,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
                   v-else-if="col.value === 'project_size'"
                   :class="[
                     'flex flex-column justify-content-center col-12',
-                    `lg:col-${col.cols ?? 1}`
+                    `lg:col-${col.cols ?? 2}`
                   ]"
                 >
                   <p class="text-xs opacity-80 mb-1 lg:hidden">
@@ -152,7 +152,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
                   v-else
                   :class="[
                     'flex flex-column justify-content-center col-12',
-                    `lg:col-${col.cols ?? 1}`
+                    `lg:col-${col.cols ?? 2}`
                   ]"
                 >
                   <p class="text-xs opacity-80 mb-1 lg:hidden">
@@ -252,26 +252,24 @@ export default defineComponent({
         {
           text: 'Version',
           value: 'name',
-          textClass: 'font-semibold white-space-normal'
+          textClass: 'font-semibold white-space-normal',
+          cols: 1
         },
-        { text: 'Created', value: 'created', cols: 2 },
-        { text: 'Author', value: 'author', cols: 2 },
+        { text: 'Created', value: 'created' },
+        { text: 'Author', value: 'author' },
         {
           text: 'Files added',
-          value: 'changes.added',
-          cols: 2
+          value: 'changes.added'
         },
         {
           text: 'Files edited',
-          value: 'changes.updated',
-          cols: 2
+          value: 'changes.updated'
         },
         {
           text: 'Files removed',
-          value: 'changes.removed',
-          cols: 2
+          value: 'changes.removed'
         },
-        { text: 'Size', value: 'project_size' },
+        { text: 'Size', value: 'project_size', cols: 1 },
         { text: '', value: 'archived', fixed: true }
       ].map((item) => ({
         ...item,

From 72f57a5c109afcc5200edd08bec0dd4963215872 Mon Sep 17 00:00:00 2001
From: "marcel.kocisek" <marcel.kocisek@lutraconsulting.co.uk>
Date: Wed, 3 Jan 2024 11:09:03 +0100
Subject: [PATCH 05/14] Upgrade deps: - vue plugin vite

---
 web-app/package.json | 2 +-
 web-app/yarn.lock    | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/web-app/package.json b/web-app/package.json
index 476bf3a3..22a2385b 100755
--- a/web-app/package.json
+++ b/web-app/package.json
@@ -49,7 +49,7 @@
     "@esbuild-plugins/node-modules-polyfill": "^0.2.2",
     "@typescript-eslint/eslint-plugin": "^5.61.0",
     "@typescript-eslint/parser": "^5.61.0",
-    "@vitejs/plugin-vue": "^4.2.3",
+    "@vitejs/plugin-vue": "^4.6.2",
     "@vitejs/plugin-vue2": "^2.2.0",
     "@vue/eslint-config-standard": "^8.0.1",
     "@vue/eslint-config-typescript": "^11.0.2",
diff --git a/web-app/yarn.lock b/web-app/yarn.lock
index cd82f626..ed86b962 100644
--- a/web-app/yarn.lock
+++ b/web-app/yarn.lock
@@ -752,10 +752,10 @@
   resolved "https://registry.yarnpkg.com/@vitejs/plugin-vue2/-/plugin-vue2-2.2.0.tgz#7453207197d6ac2b7023cedc7133b142c604c356"
   integrity sha512-1km7zEuZ/9QRPvzXSjikbTYGQPG86Mq1baktpC4sXqsXlb02HQKfi+fl8qVS703JM7cgm24Ga9j+RwKmvFn90A==
 
-"@vitejs/plugin-vue@^4.2.3":
-  version "4.2.3"
-  resolved "https://registry.yarnpkg.com/@vitejs/plugin-vue/-/plugin-vue-4.2.3.tgz#ee0b6dfcc62fe65364e6395bf38fa2ba10bb44b6"
-  integrity sha512-R6JDUfiZbJA9cMiguQ7jxALsgiprjBeHL5ikpXfJCH62pPHtI+JdJ5xWj6Ev73yXSlYl86+blXn1kZHQ7uElxw==
+"@vitejs/plugin-vue@^4.6.2":
+  version "4.6.2"
+  resolved "https://registry.yarnpkg.com/@vitejs/plugin-vue/-/plugin-vue-4.6.2.tgz#057d2ded94c4e71b94e9814f92dcd9306317aa46"
+  integrity sha512-kqf7SGFoG+80aZG6Pf+gsZIVvGSCKE98JbiWqcCV9cThtg91Jav0yvYFC9Zb+jKetNGF6ZKeoaxgZfND21fWKw==
 
 "@volar/language-core@1.4.1":
   version "1.4.1"

From a4ea436fd2d2c3ad7d35d712c2136266135cf591 Mon Sep 17 00:00:00 2001
From: "marcel.kocisek" <marcel.kocisek@lutraconsulting.co.uk>
Date: Wed, 3 Jan 2024 11:10:02 +0100
Subject: [PATCH 06/14] Update: - confirm dialog redesign

---
 .../dialog/components/ConfirmDialog.vue       | 128 ++++++++++--------
 .../dialog/components/DialogWindows.vue       |   5 +-
 2 files changed, 76 insertions(+), 57 deletions(-)

diff --git a/web-app/packages/lib/src/modules/dialog/components/ConfirmDialog.vue b/web-app/packages/lib/src/modules/dialog/components/ConfirmDialog.vue
index 6a21b752..0280974b 100644
--- a/web-app/packages/lib/src/modules/dialog/components/ConfirmDialog.vue
+++ b/web-app/packages/lib/src/modules/dialog/components/ConfirmDialog.vue
@@ -5,71 +5,87 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 -->
 
 <template>
-  <v-card>
-    <v-card-title class="text-h5">{{ headline }}</v-card-title>
-    <v-card-text v-html="text" />
-    <v-card-actions>
-      <v-text-field
-        v-if="confirmField"
+  <div class="flex flex-column align-items-center p-4 text-center gap-4">
+    <img
+      v-if="severity === 'danger'"
+      src="@/assets/trash.svg"
+      alt="Cover for confirm dialog"
+    />
+    <img v-else src="@/assets/map-circle.svg" alt="Cover for confirm dialog" />
+    <span class="font-semibold text-color-forest text-xl">{{ text }}</span>
+    <span class="text-sm opacity-80">{{ description }}</span>
+    <span v-if="confirmField" class="flex p-float-label w-full">
+      <PInputText
         autofocus
-        :label="confirmField.label"
+        id="confirmValue"
         v-model="confirmValue"
-        style="margin-left: 15px"
+        type="text"
+        class="border-round-xl flex-grow-1"
+        :style="{ backgroundColor: 'var(--light-green-color)' }"
       />
-      <v-spacer />
-      <v-btn variant="text" @click="close">
-        {{ cancelText }}
-      </v-btn>
-      <v-btn :disabled="!isConfirmed" color="primary" @click="confirm">
+      <label for="confirmValue">{{ confirmField.label }}</label>
+    </span>
+
+    <slot></slot>
+
+    <!-- Footer -->
+    <div
+      class="w-full flex flex-column lg:flex-row justify-content-between align-items-center mt-4"
+    >
+      <PButton
+        severity="secondary"
+        outlined
+        @click="close"
+        class="flex w-12 mb-2 lg:mb-0 lg:mr-2 lg:w-6 justify-content-center"
+        data-cy="clone-dialog-close-btn"
+        >{{ cancelText }}</PButton
+      >
+
+      <PButton
+        :disabled="!isConfirmed"
+        @click="confirm"
+        :severity="severity"
+        class="flex w-12 lg:w-6 justify-content-center"
+      >
         {{ confirmText }}
-      </v-btn>
-    </v-card-actions>
-  </v-card>
+      </PButton>
+    </div>
+  </div>
 </template>
 
-<script lang="ts">
-import { mapActions } from 'pinia'
-import { defineComponent } from 'vue'
+<script setup lang="ts">
+import { ref, computed, defineEmits, withDefaults } from 'vue'
+
+import { ConfirmDialogProps } from '../types'
 
 import { useDialogStore } from '@/modules/dialog/store'
 
-export default defineComponent({
-  name: 'confirm-dialog',
-  props: {
-    text: String,
-    confirmField: Object,
-    confirmText: {
-      type: String,
-      default: 'Ok'
-    },
-    cancelText: {
-      type: String,
-      default: 'Cancel'
-    },
-    headline: {
-      type: String,
-      default: 'Confirm'
-    }
-  },
-  data() {
-    return {
-      confirmValue: ''
-    }
-  },
-  computed: {
-    isConfirmed() {
-      return this.confirmField
-        ? this.confirmField.expected === this.confirmValue
-        : true
-    }
-  },
-  methods: {
-    ...mapActions(useDialogStore, ['close']),
+const props = withDefaults(defineProps<ConfirmDialogProps>(), {
+  confirmText: 'Ok',
+  cancelText: 'Cancel',
+  severity: 'primary'
+})
+
+const confirmValue = ref('')
+const emit = defineEmits(['confirm'])
 
-    confirm() {
-      this.close()
-      this.$emit('confirm')
-    }
-  }
+const isConfirmed = computed(() => {
+  return props.confirmField
+    ? props.confirmField.expected === confirmValue.value
+    : true
 })
+const src = computed(
+  () =>
+    ({
+      primary: 'map-circle.svg',
+      danger: 'trash.svg'
+    }[props.severity])
+)
+
+const { close } = useDialogStore()
+
+function confirm() {
+  close()
+  emit('confirm')
+}
 </script>
diff --git a/web-app/packages/lib/src/modules/dialog/components/DialogWindows.vue b/web-app/packages/lib/src/modules/dialog/components/DialogWindows.vue
index bbcead49..f1be5a76 100644
--- a/web-app/packages/lib/src/modules/dialog/components/DialogWindows.vue
+++ b/web-app/packages/lib/src/modules/dialog/components/DialogWindows.vue
@@ -21,11 +21,14 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
         class: 'w-10 lg:w-4 border-round-2xl'
       },
       header: {
-        class: 'text-sm border-none border-round-top-2xl',
+        class: 'border-none border-round-top-2xl',
         style: {
           color: 'var(--forest-color)'
         }
       },
+      title: {
+        class: 'text-base font-semibold'
+      },
       closeButton: {
         style: {
           backgroundColor: 'var(--light-green-color)'

From 551d041a7975f4e3f7f53ef7c0a97cf59f011ce6 Mon Sep 17 00:00:00 2001
From: "marcel.kocisek" <marcel.kocisek@lutraconsulting.co.uk>
Date: Wed, 3 Jan 2024 11:11:08 +0100
Subject: [PATCH 07/14] Refactor: - project versions to template instead div
 with same class

---
 .../views/ProjectVersionsViewTemplate.vue     | 78 +++++--------------
 1 file changed, 20 insertions(+), 58 deletions(-)

diff --git a/web-app/packages/lib/src/modules/project/views/ProjectVersionsViewTemplate.vue b/web-app/packages/lib/src/modules/project/views/ProjectVersionsViewTemplate.vue
index 671a5dd8..1bc3bff0 100644
--- a/web-app/packages/lib/src/modules/project/views/ProjectVersionsViewTemplate.vue
+++ b/web-app/packages/lib/src/modules/project/views/ProjectVersionsViewTemplate.vue
@@ -55,31 +55,23 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
           >
             <div class="flex-grow-1 grid grid-nogutter w-11">
               <!-- Columns, we are using data view instead table, it is better handling of respnsive state -->
-              <template
+              <div
                 v-for="col in columns.filter((item) => !item.fixed)"
                 :key="col.value"
+                :class="[
+                  'flex flex-column justify-content-center col-12',
+                  `lg:col-${col.cols ?? 2}`
+                ]"
               >
-                <div
-                  v-if="col.value === 'name'"
-                  :class="[
-                    'flex flex-column justify-content-center col-12',
-                    `lg:col-${col.cols ?? 2}`
-                  ]"
-                >
+                <template v-if="col.value === 'name'">
                   <p class="text-xs opacity-80 mb-1 lg:hidden">
                     {{ col.text }}
                   </p>
                   <span :class="col.textClass">
                     {{ item.name }}
                   </span>
-                </div>
-                <div
-                  v-else-if="col.value === 'created'"
-                  :class="[
-                    'flex flex-column justify-content-center col-12',
-                    `lg:col-${col.cols ?? 2}`
-                  ]"
-                >
+                </template>
+                <template v-else-if="col.value === 'created'">
                   <p class="text-xs opacity-80 mb-1 lg:hidden">
                     {{ col.text }}
                   </p>
@@ -91,76 +83,46 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
                   >
                     {{ $filters.timediff(item.created) }}
                   </span>
-                </div>
-                <div
-                  v-else-if="col.value === 'changes.added'"
-                  :class="[
-                    'flex flex-column justify-content-center col-12',
-                    `lg:col-${col.cols ?? 2}`
-                  ]"
-                >
+                </template>
+                <template v-else-if="col.value === 'changes.added'">
                   <p class="text-xs opacity-80 mb-1 lg:hidden">
                     {{ col.text }}
                   </p>
                   <span :class="col.textClass">{{
                     item.changes.added.length
                   }}</span>
-                </div>
-                <div
-                  v-else-if="col.value === 'changes.updated'"
-                  :class="[
-                    'flex flex-column justify-content-center col-12',
-                    `lg:col-${col.cols ?? 2}`
-                  ]"
-                >
+                </template>
+                <template v-else-if="col.value === 'changes.updated'">
                   <p class="text-xs opacity-80 mb-1 lg:hidden">
                     {{ col.text }}
                   </p>
                   <span :class="col.textClass">
                     {{ item.changes.updated.length }}
                   </span>
-                </div>
-                <div
-                  v-else-if="col.value === 'changes.removed'"
-                  :class="[
-                    'flex flex-column justify-content-center col-12',
-                    `lg:col-${col.cols ?? 2}`
-                  ]"
-                >
+                </template>
+                <template v-else-if="col.value === 'changes.removed'">
                   <p class="text-xs opacity-80 mb-1 lg:hidden">
                     {{ col.text }}
                   </p>
                   <span :class="col.textClass">
                     {{ item.changes.removed.length }}
                   </span>
-                </div>
-                <div
-                  v-else-if="col.value === 'project_size'"
-                  :class="[
-                    'flex flex-column justify-content-center col-12',
-                    `lg:col-${col.cols ?? 2}`
-                  ]"
-                >
+                </template>
+                <template v-else-if="col.value === 'project_size'">
                   <p class="text-xs opacity-80 mb-1 lg:hidden">
                     {{ col.text }}
                   </p>
                   <span :class="col.textClass">{{
                     $filters.filesize(item.project_size)
                   }}</span>
-                </div>
-                <div
-                  v-else
-                  :class="[
-                    'flex flex-column justify-content-center col-12',
-                    `lg:col-${col.cols ?? 2}`
-                  ]"
-                >
+                </template>
+                <template v-else>
                   <p class="text-xs opacity-80 mb-1 lg:hidden">
                     {{ col.text }}
                   </p>
                   <span :class="col.textClass">{{ item[col.value] }}</span>
-                </div>
-              </template>
+                </template>
+              </div>
             </div>
             <!-- actions -->
             <div class="flex w-1 flex-shrink-0 justify-content-end">

From 06b657f8ba8b778ef9dbce9e18e3889135e80495 Mon Sep 17 00:00:00 2001
From: "marcel.kocisek" <marcel.kocisek@lutraconsulting.co.uk>
Date: Wed, 3 Jan 2024 12:44:01 +0100
Subject: [PATCH 08/14] Added: - ProjectSettings redesign for CE version
 (missing figma ee features) - ConfirmDialog redesign

Design:
- some margin / padding updates for header menu and sidebar

Fix:
- ProjectView fixes for non admin user and non project manager user
- app dropdown description tunning and stop bubling click event
---
 .../project/views/ProjectSettingsView.vue     |   2 +-
 web-app/packages/lib/components.d.ts          |   2 -
 web-app/packages/lib/src/assets/trash.svg     |  32 ++
 .../lib/src/common/components/AppDropdown.vue |  20 +-
 .../common/components/AppPanelToggleable.vue  |  10 +-
 .../dialog/components/ConfirmDialog.vue       |   7 -
 .../packages/lib/src/modules/dialog/types.ts  |  11 +-
 .../layout/components/AppHeaderTemplate.vue   |   8 +-
 .../modules/layout/components/SideBarItem.vue |   2 +-
 .../components/AccessRequestTableTemplate.vue |   2 -
 .../components/ProjectAccessRequests.vue      |   4 +-
 .../components/ProjectPermissionsTemplate.vue | 284 ++++++++----------
 .../modules/project/views/FileBrowserView.vue |  24 +-
 .../views/ProjectSettingsViewTemplate.vue     | 128 ++++----
 .../project/views/ProjectViewTemplate.vue     |  49 +--
 web-app/packages/lib/vite.config.ts           |   1 +
 16 files changed, 309 insertions(+), 277 deletions(-)
 create mode 100644 web-app/packages/lib/src/assets/trash.svg

diff --git a/web-app/packages/app/src/modules/project/views/ProjectSettingsView.vue b/web-app/packages/app/src/modules/project/views/ProjectSettingsView.vue
index 5e64e70e..4b38ce6e 100644
--- a/web-app/packages/app/src/modules/project/views/ProjectSettingsView.vue
+++ b/web-app/packages/app/src/modules/project/views/ProjectSettingsView.vue
@@ -16,7 +16,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
       <project-permissions-template
         v-model="settings.access"
         :key="keyProp"
-        @save-project="saveProject(...arguments)"
+        @save-project="saveProject"
       />
     </template>
   </project-settings-view-template>
diff --git a/web-app/packages/lib/components.d.ts b/web-app/packages/lib/components.d.ts
index eea7b432..f96b3c37 100644
--- a/web-app/packages/lib/components.d.ts
+++ b/web-app/packages/lib/components.d.ts
@@ -44,7 +44,6 @@ declare module 'vue' {
     VChipGroup: typeof import('vuetify/components')['VChipGroup']
     VCol: typeof import('vuetify/components')['VCol']
     VContainer: typeof import('vuetify/components')['VContainer']
-    VDataTable: typeof import('vuetify/components')['VDataTable']
     VDivider: typeof import('vuetify/components')['VDivider']
     VForm: typeof import('vuetify/components')['VForm']
     VIcon: typeof import('vuetify/components')['VIcon']
@@ -56,7 +55,6 @@ declare module 'vue' {
     VProgressCircular: typeof import('vuetify/components')['VProgressCircular']
     VResponsive: typeof import('vuetify/components')['VResponsive']
     VRow: typeof import('vuetify/components')['VRow']
-    VSelect: typeof import('vuetify/components')['VSelect']
     VSnackbar: typeof import('vuetify/components')['VSnackbar']
     VSpacer: typeof import('vuetify/components')['VSpacer']
     VTextField: typeof import('vuetify/components')['VTextField']
diff --git a/web-app/packages/lib/src/assets/trash.svg b/web-app/packages/lib/src/assets/trash.svg
new file mode 100644
index 00000000..eadbcf99
--- /dev/null
+++ b/web-app/packages/lib/src/assets/trash.svg
@@ -0,0 +1,32 @@
+<svg width="124" height="101" viewBox="0 0 124 101" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M67.2 100.8C93.7088 100.8 115.2 79.3512 115.2 52.8003C115.2 26.2484 93.6142 4.7998 67.2 4.7998C40.6911 4.7998 19.2 26.2484 19.2 52.8003C19.2 79.3512 40.6911 100.8 67.2 100.8Z" fill="#F0C4BC"/>
+<path d="M79.2276 71.7083C78.1765 71.0394 76.3609 72.0906 75.3097 74.0017C74.2586 75.9129 74.2586 77.9196 75.3097 78.4929L74.2586 77.9196C73.2074 77.2507 73.2074 75.244 74.2586 73.4284C75.3097 71.5172 77.1253 70.5616 78.1765 71.135L79.2276 71.7083Z" fill="#131528"/>
+<path d="M79.228 71.7082C80.2791 72.3771 80.2791 74.3838 79.228 76.1994C78.1768 78.1106 76.3612 79.0662 75.3101 78.4928C74.2589 77.8239 74.2589 75.8172 75.3101 74.0016C76.3612 72.0905 78.0813 71.1349 79.228 71.7082Z" fill="#101224"/>
+<path d="M79.1325 73.2365C78.4636 72.8543 77.3169 73.5232 76.5525 74.6699C75.8836 75.9122 75.8836 77.1544 76.5525 77.6322L76.0747 77.3455C75.4058 76.9633 75.4058 75.6255 76.0747 74.3832C76.7436 73.141 77.8903 72.4721 78.6548 72.9499L79.1325 73.2365Z" fill="#322B4E"/>
+<path d="M79.1328 73.2369C79.8017 73.6191 79.8017 74.9569 79.1328 76.1992C78.4639 77.4414 77.3172 78.1103 76.5527 77.6326C75.8838 77.2503 75.8838 75.9125 76.5527 74.6703C77.3172 73.5236 78.4639 72.8547 79.1328 73.2369Z" fill="#201B3C"/>
+<path d="M73.9715 76.8682L62.1223 83.6528L43.2974 72.7592L55.1466 65.9746L73.9715 76.8682Z" fill="#293773"/>
+<path d="M62.1223 83.6534V84.8001L43.2974 73.9065V72.7598L62.1223 83.6534Z" fill="#4A692B"/>
+<path d="M73.972 76.8682V77.9193L62.1228 84.7995V83.6528L73.972 76.8682Z" fill="#405224"/>
+<path d="M56.7712 47.5313L59.5424 82.1233C59.5424 82.9833 59.8291 83.5567 60.3069 83.8434L41.4819 72.9497C41.0042 72.6631 40.7175 72.0897 40.7175 71.2297L37.9463 36.6377L56.7712 47.5313Z" fill="#73D19C"/>
+<path d="M78.654 34.8223L77.5073 70.7521C75.3095 71.9943 73.8761 74.3833 73.7806 76.9634L62.218 83.5569C61.4536 84.0347 60.7847 84.0347 60.3069 83.748C59.8291 83.4613 59.5424 82.888 59.5424 82.0279L56.7712 46.767L78.654 34.8223Z" fill="#64B888"/>
+<path d="M36.8003 36.9255C36.8003 37.3078 36.9914 37.5944 37.4692 37.8811L54.5741 47.8191C55.4341 48.2969 56.8675 48.2969 57.8231 47.8191L78.7503 35.7788C79.2281 35.4921 79.4192 35.2055 79.4192 34.8232V36.7344C79.4192 37.1166 79.2281 37.4033 78.7503 37.69L57.8231 49.7303C56.963 50.2081 55.5297 50.2081 54.5741 49.7303L37.4692 39.7923C36.9914 39.5056 36.8003 39.2189 36.8003 38.8367V36.9255Z" fill="#64B888"/>
+<path d="M36.8003 36.9255C36.8003 36.5433 36.9914 36.2566 37.4692 35.9699L58.3964 23.9296C59.2564 23.4518 60.6898 23.4518 61.6454 23.9296L78.7503 33.8677C79.2281 34.1543 79.4192 34.441 79.4192 34.8232C79.4192 35.2055 79.2281 35.4922 78.7503 35.7788L57.8231 47.8191C56.963 48.2969 55.5297 48.2969 54.5741 47.8191L37.4692 37.8811C36.9914 37.5944 36.8003 37.3078 36.8003 36.9255Z" fill="#004C45"/>
+<path d="M75.6924 35.1097L56.7719 46.0033C56.6763 46.0033 56.4852 46.0988 56.1985 46.0988C55.9119 46.0988 55.6252 46.0033 55.6252 46.0033L40.527 37.3075C40.2403 37.2119 40.2403 36.8297 40.527 36.6386L59.4475 25.745C59.5431 25.745 59.7342 25.6494 60.0209 25.6494C60.1164 25.6494 60.212 25.6494 60.3075 25.6494C60.4031 25.6494 60.4986 25.745 60.5942 25.745L75.6924 34.4408C75.979 34.6319 75.979 34.9185 75.6924 35.1097Z" fill="#203565"/>
+<path d="M36.8003 34.1539C36.8003 34.5361 36.9914 34.8228 37.4692 35.1095L54.5741 45.0475C55.4341 45.5253 56.8675 45.5253 57.8231 45.0475L78.7503 32.9116C79.2281 32.625 79.4192 32.3383 79.4192 31.9561V33.9628C79.4192 34.345 79.2281 34.6317 78.7503 34.9184L57.8231 46.9587C56.963 47.4365 55.5297 47.4365 54.5741 46.9587L37.4692 37.0206C36.9914 36.734 36.8003 36.4473 36.8003 36.065V34.1539Z" fill="#64B888"/>
+<path d="M36.8 34.154C36.8 33.7718 36.9912 33.4851 37.469 33.1985L58.3962 21.1581C59.2562 20.6804 60.6896 20.6804 61.6451 21.1581L78.75 31.0962C79.2278 31.3829 79.4189 31.6695 79.4189 32.0518C79.4189 32.434 79.2278 32.7207 78.75 33.0073L57.8228 45.0477C56.9628 45.5254 55.5294 45.5254 54.5738 45.0477L37.469 35.1096C36.9912 34.8229 36.8 34.5363 36.8 34.154Z" fill="#73D19C"/>
+<path d="M44.1577 31.9558C44.1577 32.1469 44.3488 32.4336 44.6355 32.5292L55.8158 39.0271C56.3892 39.4094 57.3447 39.4094 57.9181 39.0271L71.5829 31.0958C71.8696 30.9047 72.0607 30.7136 72.0607 30.5225V32.7203C72.0607 32.9114 71.8696 33.1981 71.5829 33.2936L57.9181 41.225C57.3447 41.6072 56.3892 41.6072 55.8158 41.225L44.6355 34.727C44.3488 34.5359 44.1577 34.3448 44.1577 34.1537V31.9558Z" fill="#64B888"/>
+<path d="M44.1577 31.9564C44.1577 31.7653 44.3488 31.4786 44.6355 31.383L58.3003 23.4517C58.8736 23.0695 59.8292 23.0695 60.4026 23.4517L71.5829 29.9497C71.8696 30.1408 72.0607 30.3319 72.0607 30.523C72.0607 30.7141 71.8696 31.0008 71.5829 31.0964L57.9181 39.0277C57.3447 39.4099 56.3892 39.4099 55.8158 39.0277L44.6355 32.6253C44.3488 32.4342 44.1577 32.2431 44.1577 31.9564Z" fill="#73D19C"/>
+<path d="M41.8652 32.5297V30.7141L47.2165 27.6562V29.4719L41.8652 32.5297Z" fill="#004C45"/>
+<path d="M41.865 30.7146C41.3872 30.4279 41.0049 30.4279 40.7183 30.6191L46.0695 27.5612C46.3562 27.3701 46.7384 27.4656 47.2162 27.6568L41.865 30.7146Z" fill="#9CF9C5"/>
+<path d="M41.8651 32.53L40.3362 31.67C40.3362 31.1922 40.5273 30.8099 40.814 30.6188C41.1006 30.4277 41.4829 30.5233 41.9607 30.7144V32.53H41.8651Z" fill="#004C45"/>
+<path d="M60.5949 43.3272C60.5949 43.3272 59.9259 41.1294 59.0659 40.6516L64.4172 37.5938C65.2772 38.0715 65.9461 40.2694 65.9461 40.2694L60.5949 43.3272Z" fill="#9CF9C5"/>
+<path d="M61.0729 42.754C60.8817 42.2762 60.7862 41.9895 60.4995 41.4162L64.7996 38.9316C64.9907 39.4094 65.0863 39.6005 65.373 40.2695L61.0729 42.754Z" fill="#004C45"/>
+<path d="M60.5944 43.327L59.0654 42.467V40.6514C59.9255 41.1292 60.5944 43.327 60.5944 43.327Z" fill="#64B888"/>
+<path d="M114.4 20.7998C116.609 20.7998 118.4 19.0096 118.4 16.7998C118.4 14.591 116.609 12.7998 114.4 12.7998C112.191 12.7998 110.4 14.591 110.4 16.7998C110.4 19.0096 112.191 20.7998 114.4 20.7998Z" fill="#F0C4BC"/>
+<path d="M120.8 4.8C122.126 4.8 123.2 3.72516 123.2 2.40003C123.2 1.07403 122.126 0 120.8 0C119.475 0 118.4 1.07403 118.4 2.40003C118.4 3.72516 119.475 4.8 120.8 4.8Z" fill="#F0C4BC"/>
+<path d="M28.0001 10.3996C29.3261 10.3996 30.4001 9.32562 30.4001 7.99961C30.4001 6.67446 29.3261 5.59961 28.0001 5.59961C26.675 5.59961 25.6001 6.67446 25.6001 7.99961C25.6001 9.32562 26.675 10.3996 28.0001 10.3996Z" fill="#F0C4BC"/>
+<path d="M4.8 68.8002C7.45108 68.8002 9.6 66.6494 9.6 64.0002C9.6 61.351 7.45108 59.2002 4.8 59.2002C2.14892 59.2002 0 61.351 0 64.0002C0 66.6494 2.14892 68.8002 4.8 68.8002Z" fill="#F0C4BC"/>
+<circle cx="87.2" cy="71.2" r="15.2" fill="#5A2740"/>
+<path d="M87.2003 77.5994C88.084 77.5994 88.8003 76.8831 88.8003 75.9994C88.8003 75.1158 88.084 74.3994 87.2003 74.3994C86.3167 74.3994 85.6003 75.1158 85.6003 75.9994C85.6003 76.8831 86.3167 77.5994 87.2003 77.5994Z" fill="white"/>
+<path d="M87.2007 73.3331C87.4836 73.3331 87.7549 73.2208 87.9549 73.0207C88.155 72.8207 88.2674 72.5494 88.2674 72.2665V65.8665C88.2674 65.5836 88.155 65.3123 87.9549 65.1122C87.7549 64.9122 87.4836 64.7998 87.2007 64.7998C86.9178 64.7998 86.6465 64.9122 86.4465 65.1122C86.2464 65.3123 86.134 65.5836 86.134 65.8665V72.2665C86.134 72.5494 86.2464 72.8207 86.4465 73.0207C86.6465 73.2208 86.9178 73.3331 87.2007 73.3331Z" fill="white"/>
+</svg>
diff --git a/web-app/packages/lib/src/common/components/AppDropdown.vue b/web-app/packages/lib/src/common/components/AppDropdown.vue
index f7e950ba..59c8e3cb 100644
--- a/web-app/packages/lib/src/common/components/AppDropdown.vue
+++ b/web-app/packages/lib/src/common/components/AppDropdown.vue
@@ -14,7 +14,11 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
     @hide="toggle"
     :pt="{
       root: {
-        class: 'border-transparent w-full bg-transparent'
+        class: 'border-transparent w-full bg-transparent',
+        onclick: (e) => {
+          // if in clickable area, there is problem with bubbling
+          e.stopPropagation()
+        }
       },
       input: {
         class: 'text-xs'
@@ -23,7 +27,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
         return {
           class: [
             'text-color p-2 hover:bg-gray-100',
-            context.focused ? 'bg-gray-200' : 'bg-transparent'
+            context.focused ? 'bg-gray-50' : 'bg-transparent'
           ]
         }
       }
@@ -40,12 +44,14 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
       ></i>
     </template>
     <template #option="{ option }">
-      <div class="flex text-xs align-items-center">
-        <div class="flex flex-column">
-          <p class="font-semibold">{{ option.label }}</p>
-          <span>{{ option.description }}</span>
+      <div class="flex text-xs align-items-center py-2">
+        <div class="flex flex-column mr-6">
+          <p class="font-semibold m-0">{{ option.label }}</p>
+          <span v-if="option.description" class="pt-2">{{
+            option.description
+          }}</span>
         </div>
-        <div class="ml-auto pl-2">
+        <div class="ml-auto px-2">
           <i
             :class="[
               'ti ti-circle-check-filled text-color-forest',
diff --git a/web-app/packages/lib/src/common/components/AppPanelToggleable.vue b/web-app/packages/lib/src/common/components/AppPanelToggleable.vue
index 0a77edee..ac7247d9 100644
--- a/web-app/packages/lib/src/common/components/AppPanelToggleable.vue
+++ b/web-app/packages/lib/src/common/components/AppPanelToggleable.vue
@@ -7,7 +7,6 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 <template>
   <PPanel
     toggleable
-    v-bind="$props"
     :pt="{
       header(options) {
         return {
@@ -21,13 +20,16 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
         }
       },
       content: {
-        class: 'border-none border-round-bottom-2xl p-4 pt-2'
+        class: 'border-none border-round-bottom-2xl p-4 pt-0'
       }
     }"
   >
-    <template #header>
+    <template v-if="$slots.header" #header>
+      <slot name="header"></slot>
+    </template>
+    <template v-else-if="$slots.title" #header>
       <h3 class="text-color-forest font-semibold m-0">
-        <slot name="header"></slot>
+        <slot name="title"></slot>
       </h3>
     </template>
     <template v-if="$slots.footer" #footer>
diff --git a/web-app/packages/lib/src/modules/dialog/components/ConfirmDialog.vue b/web-app/packages/lib/src/modules/dialog/components/ConfirmDialog.vue
index 0280974b..c272bd86 100644
--- a/web-app/packages/lib/src/modules/dialog/components/ConfirmDialog.vue
+++ b/web-app/packages/lib/src/modules/dialog/components/ConfirmDialog.vue
@@ -74,13 +74,6 @@ const isConfirmed = computed(() => {
     ? props.confirmField.expected === confirmValue.value
     : true
 })
-const src = computed(
-  () =>
-    ({
-      primary: 'map-circle.svg',
-      danger: 'trash.svg'
-    }[props.severity])
-)
 
 const { close } = useDialogStore()
 
diff --git a/web-app/packages/lib/src/modules/dialog/types.ts b/web-app/packages/lib/src/modules/dialog/types.ts
index 1d7b1a5d..955e7012 100644
--- a/web-app/packages/lib/src/modules/dialog/types.ts
+++ b/web-app/packages/lib/src/modules/dialog/types.ts
@@ -4,6 +4,15 @@
 
 import { Component } from 'vue'
 
+export interface ConfirmDialogProps {
+  text: string
+  severity?: 'primary' | 'danger'
+  confirmText?: string
+  cancelText?: string
+  description?: string
+  confirmField?: { label: string; expected: string }
+}
+
 export interface DialogParams {
   dialog: {
     maxWidth?: number
@@ -13,7 +22,7 @@ export interface DialogParams {
   }
   // TODO: clear unknown based on 'on-listener' in template
   listeners?: unknown | Record<string, (...args: unknown[]) => void>
-  props?: Record<string, unknown>
+  props?: Record<string, unknown> | ConfirmDialogProps
 }
 
 export interface DialogPayload {
diff --git a/web-app/packages/lib/src/modules/layout/components/AppHeaderTemplate.vue b/web-app/packages/lib/src/modules/layout/components/AppHeaderTemplate.vue
index 3659d06f..67ccdf90 100644
--- a/web-app/packages/lib/src/modules/layout/components/AppHeaderTemplate.vue
+++ b/web-app/packages/lib/src/modules/layout/components/AppHeaderTemplate.vue
@@ -57,7 +57,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
         <POverlayPanel
           id="app-header-profile"
           ref="menu"
-          :pt="{ root: { class: 'p-2' } }"
+          :pt="{ root: { class: 'p-3' }, content: { class: 'p-0' } }"
         >
           <div class="flex align-items-center mb-2">
             <PAvatar
@@ -66,7 +66,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
               shape="circle"
               :pt="{
                 root: {
-                  class: 'surface-ground mr-2',
+                  class: 'surface-ground mr-2 text-color-forest font-semibold',
                   style: {
                     borderRadius: '50%'
                   }
@@ -84,7 +84,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
               root: { style: { width: '100%' }, class: 'border-none' },
               label: { class: 'font-semibold' },
               icon: { class: 'text-color text-2xl' },
-              action: { class: 'flex align-items-center pl-0 pr-0' }
+              action: { class: 'flex align-items-center' }
             }"
           ></PMenu>
         </POverlayPanel>
@@ -172,7 +172,7 @@ export default defineComponent({
           location.href = '/'
         }
       } catch (e) {
-        console.log(e)
+        console.error(e)
       }
     }
   }
diff --git a/web-app/packages/lib/src/modules/layout/components/SideBarItem.vue b/web-app/packages/lib/src/modules/layout/components/SideBarItem.vue
index 94227c87..99b5abc5 100644
--- a/web-app/packages/lib/src/modules/layout/components/SideBarItem.vue
+++ b/web-app/packages/lib/src/modules/layout/components/SideBarItem.vue
@@ -20,7 +20,7 @@ export default defineComponent({
   <li class="p-2">
     <router-link
       :class="[
-        'sidebar-item__link px-3 py-2 flex align-items-center transition-color transition-duration-200 no-underline border-round-lg text-sm',
+        'sidebar-item__link p-3 flex align-items-center transition-color transition-duration-200 no-underline border-round-lg text-sm',
         item.active && 'sidebar-item__link--active'
       ]"
       :to="item.to"
diff --git a/web-app/packages/lib/src/modules/project/components/AccessRequestTableTemplate.vue b/web-app/packages/lib/src/modules/project/components/AccessRequestTableTemplate.vue
index 8461416e..8adc83ce 100644
--- a/web-app/packages/lib/src/modules/project/components/AccessRequestTableTemplate.vue
+++ b/web-app/packages/lib/src/modules/project/components/AccessRequestTableTemplate.vue
@@ -57,8 +57,6 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
                 { value: 'write', label: 'Writer' },
                 { value: 'owner', label: 'Owner' }
               ]"
-              option-label="label"
-              option-value="value"
               v-model="permissions[item.id]"
               @change="(e) => permissionsChange(e, item)"
               :disabled="expired(item.expire)"
diff --git a/web-app/packages/lib/src/modules/project/components/ProjectAccessRequests.vue b/web-app/packages/lib/src/modules/project/components/ProjectAccessRequests.vue
index 27f63e90..0cb259d1 100644
--- a/web-app/packages/lib/src/modules/project/components/ProjectAccessRequests.vue
+++ b/web-app/packages/lib/src/modules/project/components/ProjectAccessRequests.vue
@@ -56,8 +56,6 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
                 { value: 'write', label: 'Writer' },
                 { value: 'owner', label: 'Owner' }
               ]"
-              option-label="label"
-              option-value="value"
               v-model="permissions[item.id]"
               class="w-6 lg:w-4 p-1"
             />
@@ -92,6 +90,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 
 <script lang="ts">
 import { mapActions, mapState } from 'pinia'
+import { DataViewPageEvent } from 'primevue/dataview'
 import { defineComponent } from 'vue'
 
 import AppDropdown from '@/common/components/AppDropdown.vue'
@@ -101,7 +100,6 @@ import { GetAccessRequestsPayload } from '@/modules'
 import { useNotificationStore } from '@/modules/notification/store'
 import { useProjectStore } from '@/modules/project/store'
 import { useUserStore } from '@/modules/user/store'
-import { DataViewPageEvent } from 'primevue/dataview'
 
 export default defineComponent({
   data() {
diff --git a/web-app/packages/lib/src/modules/project/components/ProjectPermissionsTemplate.vue b/web-app/packages/lib/src/modules/project/components/ProjectPermissionsTemplate.vue
index 08fdf1dc..b0d4723a 100644
--- a/web-app/packages/lib/src/modules/project/components/ProjectPermissionsTemplate.vue
+++ b/web-app/packages/lib/src/modules/project/components/ProjectPermissionsTemplate.vue
@@ -5,161 +5,109 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 -->
 
 <template>
-  <AppContainer>
-    <AppSection>
-      <PDataView
-        :value="displayedValues"
-        :data-key="'id'"
-        data-cy="project-verision-table"
-        lazy
-        :pt="{
-          header: {
-            // small header
-            class: 'px-3 py-2'
-          }
-        }"
-      >
-        <template #header>
-          <div class="w-11 grid grid-nogutter">
-            <!-- Visible on lg breakpoint > -->
-            <div
-              v-for="col in columns.filter((item) => !item.fixed)"
-              :class="['text-xs hidden lg:flex', `col-${col.cols ?? 4}`]"
-              :key="col.text"
-            >
-              {{ col.text }}
-            </div>
-            <!-- else -->
-            <div class="col-12 flex lg:hidden">Members</div>
-          </div>
-        </template>
-
-        <!-- table rows -->
-        <template #list="slotProps">
-          <div
-            v-for="item in slotProps.items"
-            :key="item.id"
-            class="flex align-items-center hover:bg-gray-50 cursor-pointer border-bottom-1 border-gray-200 text-sm px-3 py-2 mt-0"
-            @click.prevent="rowClick(item.name)"
-          >
-            <div class="flex-grow-1 grid grid-nogutter">
-              <!-- Columns, we are using data view instead table, it is better handling of respnsive state -->
+  <div>
+    <AppContainer>
+      <AppSection>
+        <PDataView
+          :value="displayedValues"
+          :data-key="'id'"
+          :pt="{
+            header: {
+              // small header
+              class: 'px-4 py-2'
+            }
+          }"
+        >
+          <template #header>
+            <div class="w-11 grid grid-nogutter">
+              <!-- Visible on lg breakpoint > -->
               <div
                 v-for="col in columns.filter((item) => !item.fixed)"
-                :key="col.value"
-                :class="[
-                  'flex flex-column justify-content-center col-12',
-                  `lg:col-${col.cols ?? 4}`
-                ]"
+                :class="['text-xs hidden lg:flex', `col-${col.cols ?? 4}`]"
+                :key="col.text"
               >
-                <p class="text-xs opacity-80 mb-1 lg:hidden">
-                  {{ col.text }}
-                </p>
-                <span :class="col.textClass">
-                  {{ item[col.value] }}
-                </span>
+                {{ col.text }}
               </div>
-              <!-- actions -->
+              <!-- else -->
+              <div class="col-12 flex lg:hidden">Members</div>
             </div>
-            <div class="flex flex-shrink-0 justify-content-end">
-              <PButton
-                icon="ti ti-download"
-                severity="secondary"
-                text
-                :disabled="!canRemoveUser(item.user.id)"
-                @click.stop="removeUser(item.user)"
-              />
-            </div>
-          </div>
-        </template>
-        <template #empty>
-          <div class="w-full text-center p-4">
-            <span>No versions found.</span>
-          </div>
-        </template>
-      </PDataView>
-    </AppSection>
-
-    <!-- <v-data-table
-      :headers="columns"
-      :items="displayedValues"
-      no-data-text="No users"
-      :hide-default-footer="displayedValues.length <= 10"
-    >
-      <template #header.permissions="{ header }">
-        <v-tooltip v-if="header.tooltip" location="top">
-          <template v-slot:activator="{ props }">
-            <span v-bind="props">
-              {{ header.text }}
-            </span>
           </template>
-          <span>
-            {{ header.tooltip }}
-          </span>
-        </v-tooltip>
-        <span v-else>
-          {{ header.text }}
-        </span>
-      </template>
 
-      <template #item.user="{ modelValue }">
-        <v-tooltip
-          location="top"
-          v-if="modelValue.profile.first_name || modelValue.profile.last_name"
-        >
-          <template v-slot:activator="{ props }">
-            <b v-bind="props">
-              {{ modelValue.username }}
-            </b>
-          </template>
-          <span>
-            <span v-if="modelValue.profile.first_name">{{
-              modelValue.profile.first_name
-            }}</span>
-            <span v-if="modelValue.profile.last_name">
-              {{ modelValue.profile.last_name }}</span
+          <!-- table rows -->
+          <template #list="slotProps">
+            <div
+              v-for="item in slotProps.items"
+              :key="item.id"
+              class="flex align-items-center hover:bg-gray-50 border-bottom-1 border-gray-200 text-sm px-4 py-2 mt-0"
             >
-          </span>
-        </v-tooltip>
-        <b v-else>
-          {{ modelValue.username }}
-        </b>
-      </template>
-
-      <template #item.permissions="{ item }">
-        <v-select
-          :model-value="actualPermissions(item)"
-          :items="permissionStates"
-          @update:model-value="(e) => valueChanged(item, e)"
-          :disabled="!isProjectOwner"
-          hide-details
-          label="reader"
-          single-line
-          class="input-selection"
-          style="width: 120px"
-        >
-        </v-select>
-      </template>
-
-      <template #item.remove="{ item }">
-        <div class="justify-center px-0">
-          <v-btn
-            :disabled="!canRemoveUser(item.user.id)"
-            @click="removeUser(item.user)"
-            icon
-          >
-            <v-icon color="red darken-3">delete</v-icon>
-          </v-btn>
-        </div>
-      </template>
-    </v-data-table> -->
-    <slot name="banner" />
-    <button
-      ref="hidden-input"
-      id="change-permissions-input"
-      style="visibility: hidden"
-    />
-  </AppContainer>
+              <div class="w-11 grid grid-nogutter">
+                <!-- Columns, we are using data view instead table, it is better handling of responsive state -->
+                <div
+                  v-for="col in columns.filter((item) => !item.fixed)"
+                  :key="col.value"
+                  :class="[
+                    'flex flex-column justify-content-center col-12',
+                    `lg:col-${col.cols ?? 4}`
+                  ]"
+                >
+                  <p class="text-xs opacity-80 mb-1 lg:hidden">
+                    {{ col.text }}
+                  </p>
+                  <span :class="col.textClass">
+                    <PAvatar
+                      v-if="col.value === 'email'"
+                      :label="(item.username ?? '').charAt(0).toUpperCase()"
+                      shape="circle"
+                      :pt="{
+                        root: {
+                          class:
+                            'surface-ground mr-2 font-semibold text-color-forest',
+                          style: {
+                            borderRadius: '50%'
+                          }
+                        }
+                      }"
+                    />
+                    <AppDropdown
+                      v-if="col.value === 'permissions'"
+                      :options="permissionStates"
+                      :model-value="actualPermissions(item)"
+                      @update:model-value="(e) => valueChanged(item, e)"
+                      :disabled="!isProjectOwner"
+                      class="w-6 lg:w-full"
+                    />
+                    <template v-else>{{ item[col.value] }}</template>
+                  </span>
+                </div>
+                <!-- actions -->
+              </div>
+              <div class="w-1 flex justify-content-end">
+                <PButton
+                  icon="ti ti-trash"
+                  severity="secondary"
+                  text
+                  rounded
+                  @click.stop="removeUser(item.user)"
+                  class="text-xl p-0"
+                  :style="{
+                    visibility: canRemoveUser(item.user.id)
+                      ? 'visible'
+                      : 'hidden'
+                  }"
+                />
+              </div>
+            </div>
+          </template>
+          <template #empty>
+            <div class="w-full text-center p-4">
+              <span>No members found.</span>
+            </div>
+          </template>
+        </PDataView>
+      </AppSection>
+    </AppContainer>
+    <AppContainer v-if="$slots.banner">Hej<slot name="banner" /></AppContainer>
+  </div>
 </template>
 
 <script lang="ts">
@@ -173,12 +121,14 @@ import union from 'lodash/union'
 import { mapState, mapActions } from 'pinia'
 import { defineComponent } from 'vue'
 
+import AppContainer from '@/common/components/AppContainer.vue'
+import AppDropdown from '@/common/components/AppDropdown.vue'
+import AppSection from '@/common/components/AppSection.vue'
+import { DropdownOption } from '@/common/components/types'
 import { isAtLeastProjectRole, ProjectRole } from '@/common/permission_utils'
 import { useProjectStore } from '@/modules/project/store'
 import { useUserStore } from '@/modules/user/store'
 import { UserSearchParams } from '@/modules/user/types'
-import AppContainer from '@/common/components/AppContainer.vue'
-import AppSection from '@/common/components/AppSection.vue'
 
 interface ColumnItem {
   text: string
@@ -202,7 +152,12 @@ export default defineComponent({
           text: 'Email address',
           value: 'email',
           textClass: 'font-semibold',
-          cols: 10
+          cols: 5
+        },
+        {
+          text: 'Username',
+          value: 'username',
+          cols: 5
         },
         {
           text: 'Project permissions',
@@ -226,8 +181,24 @@ export default defineComponent({
       'project',
       'isProjectOwner'
     ]),
-    permissionStates() {
-      return ['owner', 'writer', 'reader']
+    permissionStates(): DropdownOption[] {
+      return [
+        {
+          value: 'owner',
+          label: 'Manage',
+          description: 'Can edit and remove projects in the workspace'
+        },
+        {
+          value: 'writer',
+          label: 'Write',
+          description: 'Can edit projects in the workspace'
+        },
+        {
+          value: 'reader',
+          label: 'Read only',
+          description: 'Can view projects in the workspace'
+        }
+      ]
     },
     displayedValues() {
       const { ownersnames, readersnames, writersnames } = this.modelValue
@@ -298,9 +269,6 @@ export default defineComponent({
       )
     },
     valueChanged(user, permission) {
-      const el = this.$refs['hidden-input']
-      el.value = permission
-      el.dispatchEvent(new Event('click', {}))
       if (permission === 'owner') {
         this.setOwnerPermission(user)
       } else if (permission === 'writer') {
@@ -317,7 +285,7 @@ export default defineComponent({
       } else if (this.project.access.readers.includes(item.user.id)) {
         return 'reader'
       }
-      return ''
+      return undefined
     },
     removeUser(user) {
       // remove user.username from owners, writers and readers
@@ -378,7 +346,7 @@ export default defineComponent({
         'readersnames'
       ])
       const current = {
-        ...pick(this.value, [
+        ...pick(this.modelValue, [
           'ownersnames',
           'writersnames',
           'readersnames',
@@ -402,7 +370,7 @@ export default defineComponent({
       )
     }
   },
-  components: { AppContainer, AppSection }
+  components: { AppContainer, AppSection, AppDropdown }
 })
 </script>
 
diff --git a/web-app/packages/lib/src/modules/project/views/FileBrowserView.vue b/web-app/packages/lib/src/modules/project/views/FileBrowserView.vue
index 9afae92d..3d5e9fd8 100644
--- a/web-app/packages/lib/src/modules/project/views/FileBrowserView.vue
+++ b/web-app/packages/lib/src/modules/project/views/FileBrowserView.vue
@@ -23,9 +23,16 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
       </app-section>
     </app-container>
 
-    <app-container>
+    <app-container
+      v-if="
+        project &&
+        $route.name === 'project-tree' &&
+        project.permissions &&
+        project.permissions.upload
+      "
+    >
       <app-panel-toggleable :collapsed="dataTableOpen">
-        <template #header>Upload files</template>
+        <template #title>Upload files</template>
         <div class="flex flex-column lg:flex-row">
           <div
             class="flex flex-column align-items-center w-12 lg:w-6 mb-4 lg:mb-0 lg:mr-4 border-round-xl surface-ground p-4"
@@ -54,16 +61,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
             </p>
           </div>
           <div class="w-12 lg:w-6 border-round-xl surface-ground">
-            <drop-area
-              v-if="
-                project &&
-                $route.name === 'project-tree' &&
-                project.permissions &&
-                project.permissions.upload
-              "
-              :location="location"
-              data-cy="project-drop-area"
-            >
+            <drop-area :location="location" data-cy="project-drop-area">
             </drop-area>
           </div>
         </div>
@@ -103,7 +101,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
             <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"
+              class="grid grid-nogutter px-4 py-2 mt-0 border-bottom-1 border-gray-200 text-sm hover:bg-gray-50 cursor-pointer"
               @click.prevent="rowClick(item.link)"
             >
               <!-- Columns, we are using data view instead table, it is better handling of respnsive state -->
diff --git a/web-app/packages/lib/src/modules/project/views/ProjectSettingsViewTemplate.vue b/web-app/packages/lib/src/modules/project/views/ProjectSettingsViewTemplate.vue
index 10fd3c65..b1872428 100644
--- a/web-app/packages/lib/src/modules/project/views/ProjectSettingsViewTemplate.vue
+++ b/web-app/packages/lib/src/modules/project/views/ProjectSettingsViewTemplate.vue
@@ -23,54 +23,56 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
       /></app-section>
     </app-container>
 
-    <v-container>
-      <v-row>
-        <v-col>
-          <span class="private-public-text" v-if="settings.access.public">
-            <b>This is public project</b><br />
-            <span class="description-text"
-              >Hide this project from everyone.</span
+    <app-container>
+      <app-panel-toggleable>
+        <template #header
+          ><h3 class="font-semibold text-color text-sm">Advanced</h3></template
+        >
+        <div class="flex text-sm py-2">
+          <div class="flex-grow-1">
+            <template v-if="settings.access.public">
+              <p class="font-semibold py-1 m-0">This is public project</p>
+              <span class="text-xs opacity-80"
+                >Hide this project from everyone.</span
+              >
+            </template>
+            <template v-else>
+              <p class="font-semibold py-1 m-0">This is private project</p>
+              <span class="text-xs opacity-80"
+                >Make this project visible to anyone.</span
+              >
+            </template>
+          </div>
+          <div class="flex-shrink-0">
+            <PButton
+              @click="confirmPublicPrivate()"
+              severity="secondary"
+              outlined
             >
-          </span>
-          <span class="private-public-text" v-else>
-            <b>This is private project</b><br />
-            <span class="description-text"
-              >Make this project visible to anyone.</span
+              <template v-if="settings.access.public">Make private</template>
+              <template v-else>Make public</template>
+            </PButton>
+          </div>
+        </div>
+        <div class="flex text-sm py-2" v-if="$slots.operations">
+          <slot name="operations"></slot>
+        </div>
+        <div
+          class="flex text-sm py-2"
+          v-if="project && project.permissions && project.permissions.delete"
+        >
+          <div class="flex-grow-1">
+            <p class="font-semibold m-0 py-1">Delete project</p>
+            <span class="text-xs opacity-80">All data will be lost</span>
+          </div>
+          <div class="flex-shrink-0">
+            <PButton @click="confirmDelete" severity="danger">
+              Delete project</PButton
             >
-          </span>
-        </v-col>
-        <v-col>
-          <v-btn
-            @click="confirmPublicPrivate()"
-            class="private-public-btn"
-            variant="outlined"
-          >
-            <span v-if="settings.access.public">Make private</span>
-            <span v-else>Make public</span>
-          </v-btn>
-        </v-col>
-      </v-row>
-      <slot name="operations"></slot>
-      <v-row
-        v-if="project && project.permissions && project.permissions.delete"
-      >
-        <v-col>
-          <span class="private-public-text">
-            <b>Delete project</b><br />
-            <span class="description-text">All data will be lost</span></span
-          >
-        </v-col>
-        <v-col self-align="end">
-          <v-btn
-            @click="confirmDelete"
-            class="private-public-btn"
-            variant="outlined"
-          >
-            <span>Delete</span>
-          </v-btn>
-        </v-col>
-      </v-row>
-    </v-container>
+          </div>
+        </div>
+      </app-panel-toggleable>
+    </app-container>
   </div>
 </template>
 
@@ -78,23 +80,25 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 import { mapActions, mapState } from 'pinia'
 import { PropType, defineComponent } from 'vue'
 
+import AppContainer from '@/common/components/AppContainer.vue'
+import AppPanelToggleable from '@/common/components/AppPanelToggleable.vue'
+import AppSection from '@/common/components/AppSection.vue'
 import { getErrorMessage } from '@/common/error_utils'
+import { ConfirmDialogProps, ProjectAccess } from '@/modules'
 import ConfirmDialog from '@/modules/dialog/components/ConfirmDialog.vue'
 import { useDialogStore } from '@/modules/dialog/store'
 import { useNotificationStore } from '@/modules/notification/store'
 import ProjectAccessRequests from '@/modules/project/components/ProjectAccessRequests.vue'
 import { useProjectStore } from '@/modules/project/store'
 import { useUserStore } from '@/modules/user/store'
-import AppContainer from '@/common/components/AppContainer.vue'
-import AppSection from '@/common/components/AppSection.vue'
-import { ProjectAccess } from '@/modules'
 
 export default defineComponent({
   name: 'ProjectSettingsViewTemplate',
   components: {
     ProjectAccessRequests,
     AppContainer,
-    AppSection
+    AppSection,
+    AppPanelToggleable
   },
   props: {
     namespace: String,
@@ -173,10 +177,13 @@ export default defineComponent({
     },
     togglePublicPrivate() {
       this.settings.access.public = !this.settings.access.public
+      this.saveSettings(this.settings)
     },
     confirmDelete() {
-      const props = {
-        text: `Are you sure to delete project: ${this.projectName}? All files will be lost. <br> <br> Type in project name to confirm:`,
+      const props: ConfirmDialogProps = {
+        text: `Are you sure to delete project: ${this.projectName}?`,
+        description: 'All files will be lost. Type in project name to confirm:',
+        severity: 'danger',
         confirmText: 'Delete',
         confirmField: {
           label: 'Project name',
@@ -196,18 +203,29 @@ export default defineComponent({
       })
     },
     confirmPublicPrivate() {
-      const props = {
+      const props: ConfirmDialogProps = {
         text: `Do you really want to make this project ${
           this.settings.access.public ? 'private' : 'public'
         }?`,
-        confirmText: 'Yes'
+        confirmText: 'Yes',
+        description: this.settings.access.public
+          ? 'Once you make your project private it can not be accessed by the community.'
+          : 'Once you make your project public it can be accessed by the community.'
       }
       const listeners = {
         confirm: () => this.togglePublicPrivate()
       }
       this.showDialog({
         component: ConfirmDialog,
-        params: { props, listeners, dialog: { header: 'Public project' } }
+        params: {
+          props,
+          listeners,
+          dialog: {
+            header: this.settings.access.public
+              ? 'Private project'
+              : 'Public project'
+          }
+        }
       })
     },
     onDeleteProject() {
diff --git a/web-app/packages/lib/src/modules/project/views/ProjectViewTemplate.vue b/web-app/packages/lib/src/modules/project/views/ProjectViewTemplate.vue
index f9af2a56..5704aad5 100644
--- a/web-app/packages/lib/src/modules/project/views/ProjectViewTemplate.vue
+++ b/web-app/packages/lib/src/modules/project/views/ProjectViewTemplate.vue
@@ -37,7 +37,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
           <PButton
             severity="secondary"
             outlined
-            @click="unsubscribeDialog"
+            @click="leaveDialog"
             data-cy="project-leave-btn"
             icon="ti ti-logout"
             label="Leave project"
@@ -68,10 +68,15 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
           }
         }"
       >
-        <PTabPanel header="Files" :pt="ptHeaderAction"></PTabPanel>
+        <PTabPanel :header="tabs[0].header" :pt="ptHeaderAction"></PTabPanel>
         <slot name="map.tab" :ptHeaderAction="ptHeaderAction" />
-        <PTabPanel header="History" :pt="ptHeaderAction"></PTabPanel>
-        <PTabPanel header="Settings" :pt="ptHeaderAction"></PTabPanel>
+        <!-- Render other tabs with header -->
+        <PTabPanel
+          v-for="tab in tabs.slice(1).filter((item) => item.header)"
+          :header="tab.header"
+          :pt="ptHeaderAction"
+          :key="tab.route"
+        ></PTabPanel>
       </PTabView>
       <router-view />
     </template>
@@ -123,7 +128,7 @@ import { defineComponent, PropType } from 'vue'
 import { AppContainer, AppSection } from '@/common'
 import { waitCursor } from '@/common/html_utils'
 import { USER_ROLE_NAME_BY_ROLE, UserRole } from '@/common/permission_utils'
-import { ProjectRouteName } from '@/modules'
+import { ConfirmDialogProps, ProjectRouteName } from '@/modules'
 import ConfirmDialog from '@/modules/dialog/components/ConfirmDialog.vue'
 import { useDialogStore } from '@/modules/dialog/store'
 import { useLayoutStore } from '@/modules/layout/store'
@@ -136,6 +141,7 @@ import { useUserStore } from '@/modules/user/store'
 
 interface TabItem {
   route: string
+  header?: string
 }
 
 export default defineComponent({
@@ -181,31 +187,34 @@ export default defineComponent({
     ...mapState(useUserStore, ['currentWorkspace', 'isLoggedIn']),
 
     tabs(): TabItem[] {
-      const defaultTabs: TabItem[] = [
+      const tabs: TabItem[] = [
         {
-          route: ProjectRouteName.ProjectTree
+          route: ProjectRouteName.ProjectTree,
+          header: 'Files'
         }
       ]
 
       if (this.loggedUser) {
         // If map in slots, add route to map tab
         if (this.$slots['map.tab']) {
-          defaultTabs.push({
+          tabs.push({
             route: this.mapRoute
           })
         }
         if (this.showHistory) {
-          defaultTabs.push({
-            route: ProjectRouteName.ProjectHistory
+          tabs.push({
+            route: ProjectRouteName.ProjectHistory,
+            header: 'History'
           })
         }
         if (this.showSettings) {
-          defaultTabs.push({
-            route: ProjectRouteName.ProjectSettings
+          tabs.push({
+            route: ProjectRouteName.ProjectSettings,
+            header: 'Settings'
           })
         }
       }
-      return defaultTabs
+      return tabs
     },
 
     activeTabIndex(): number {
@@ -335,12 +344,14 @@ export default defineComponent({
           waitCursor(false)
         })
     },
-    unsubscribeDialog() {
+    leaveDialog() {
       const projPath = `${this.namespace}/${this.projectName}`
-      const props = {
-        text: `Are you sure to leave the project <strong>${projPath}</strong>?
-        You will not have access to it anymore.`,
-        confirmText: 'OK'
+      const props: ConfirmDialogProps = {
+        text: `Are you sure to leave the project ${projPath}?`,
+        description: 'You will not have access to it anymore.',
+        severity: 'danger',
+        confirmText: 'Yes',
+        cancelText: 'No'
       }
       const listeners = {
         confirm: async () => {
@@ -355,7 +366,7 @@ export default defineComponent({
         params: {
           props,
           listeners,
-          dialog: { maxWidth: 500, header: 'Leave project' }
+          dialog: { header: 'Leave project' }
         }
       })
     },
diff --git a/web-app/packages/lib/vite.config.ts b/web-app/packages/lib/vite.config.ts
index 40fe71a0..79c2825e 100644
--- a/web-app/packages/lib/vite.config.ts
+++ b/web-app/packages/lib/vite.config.ts
@@ -59,6 +59,7 @@ export default defineConfig(({ mode }) => ({
       transformMixedEsModules: true
     },
     // Fix for watching, if watch:lib, disable this
+    // sourcemap: mode !== 'production',
     sourcemap: false,
     lib: {
       // Could also be a dictionary or array of multiple entry points

From 3576dbb398df5c71db020575e67b44b39656532f Mon Sep 17 00:00:00 2001
From: "marcel.kocisek" <marcel.kocisek@lutraconsulting.co.uk>
Date: Wed, 3 Jan 2024 13:42:56 +0100
Subject: [PATCH 09/14] Linting: - fixe some errors in lintjng of lib and app -
 allow extending of parent eslint config (not extended properly ... :( )

---
 web-app/.eslintrc.cjs                         |  7 +++----
 web-app/packages/app/.eslintrc.cjs            |  6 ++----
 web-app/packages/app/src/App.vue              |  2 +-
 web-app/packages/app/src/app.ts               | 16 +++++++---------
 web-app/packages/app/src/main.ts              |  2 +-
 .../src/modules/project/views/ProjectView.vue |  6 +++++-
 .../app/src/modules/user/views/LoginView.vue  |  2 +-
 web-app/packages/app/src/router.ts            | 10 ++++------
 web-app/packages/lib/.eslintrc.cjs            |  6 ++----
 .../packages/lib/src/common/route_utils.ts    | 19 ++++++++++---------
 web-app/packages/lib/src/common/types.ts      |  4 ++--
 .../packages/lib/src/modules/project/types.ts |  3 +--
 .../packages/lib/src/modules/user/store.ts    |  2 +-
 13 files changed, 40 insertions(+), 45 deletions(-)

diff --git a/web-app/.eslintrc.cjs b/web-app/.eslintrc.cjs
index 753811d3..c3e9d504 100644
--- a/web-app/.eslintrc.cjs
+++ b/web-app/.eslintrc.cjs
@@ -1,7 +1,8 @@
 module.exports = {
   root: true,
   env: {
-    es2021: true
+    es2021: true,
+    browser: true
   },
   extends: [
     'plugin:vue/essential',
@@ -42,8 +43,6 @@ module.exports = {
       {
         allowModifiers: true
       }
-    ],
-    'vue/multi-word-component-names': 'off',
-    'vue/no-v-model-argument': 'off',
+    ]
   }
 }
diff --git a/web-app/packages/app/.eslintrc.cjs b/web-app/packages/app/.eslintrc.cjs
index c62b242c..9a294e26 100644
--- a/web-app/packages/app/.eslintrc.cjs
+++ b/web-app/packages/app/.eslintrc.cjs
@@ -1,11 +1,9 @@
 module.exports = {
-  env: {
-    node: true
-  },
   extends: [
     'plugin:vue/essential',
     'eslint:recommended',
     '@vue/typescript/recommended',
+    '../../.eslintrc.cjs'
   ],
   parser: 'vue-eslint-parser',
   parserOptions: {
@@ -16,7 +14,7 @@ module.exports = {
   plugins: ['@typescript-eslint'],
   rules: {
     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
-    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
     // Vue 3 opt https://v3-migration.vuejs.org/breaking-changes/key-attribute.html#with-template-v-for
     'vue/no-v-for-template-key-on-child': 'error',
     'vue/no-v-for-template-key': 'off',
diff --git a/web-app/packages/app/src/App.vue b/web-app/packages/app/src/App.vue
index 9c460c8d..3f34f990 100644
--- a/web-app/packages/app/src/App.vue
+++ b/web-app/packages/app/src/App.vue
@@ -47,7 +47,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
           >
         </v-card-text>
       </v-card>
-      <router-view v-slot="{ Component, route }">
+      <router-view v-slot="{ Component }">
         <transition name="fade">
           <component :is="Component" />
         </transition>
diff --git a/web-app/packages/app/src/app.ts b/web-app/packages/app/src/app.ts
index 56e2114b..40e42b7d 100644
--- a/web-app/packages/app/src/app.ts
+++ b/web-app/packages/app/src/app.ts
@@ -6,14 +6,6 @@
 import 'material-icons/iconfont/material-icons.scss'
 import '@fortawesome/fontawesome-free/css/all.css'
 import '@mdi/font/css/materialdesignicons.css'
-import PrimeVue from 'primevue/config';
-import "primevue/resources/primevue.min.css";
-import "primeflex/primeflex.min.css"
-import "@mergin/lib/dist/sass/themes/mm-theme-light/theme.scss"
-import "@tabler/icons-webfont/tabler-icons.min.css"
-
-import '@mergin/lib/dist/style.css'
-
 import {
   dateUtils,
   textUtils,
@@ -22,6 +14,13 @@ import {
   MerginComponentUuidMixin
 } from '@mergin/lib'
 import PortalVue from 'portal-vue'
+import 'primevue/resources/primevue.min.css'
+import 'primeflex/primeflex.min.css'
+import '@mergin/lib/dist/sass/themes/mm-theme-light/theme.scss'
+import '@tabler/icons-webfont/tabler-icons.min.css'
+import '@mergin/lib/dist/style.css'
+import PrimeVue from 'primevue/config'
+import Tooltip from 'primevue/tooltip'
 import { createApp } from 'vue'
 import { createMetaManager } from 'vue-meta'
 
@@ -31,7 +30,6 @@ import { addRouterToPinia, getPiniaInstance } from './store'
 
 import i18n from '@/plugins/i18n/i18n'
 import vuetify from '@/plugins/vuetify/vuetify'
-import Tooltip from 'primevue/tooltip';
 
 const createMerginApp = () => {
   const pinia = getPiniaInstance()
diff --git a/web-app/packages/app/src/main.ts b/web-app/packages/app/src/main.ts
index 1349fafa..f140ca1d 100644
--- a/web-app/packages/app/src/main.ts
+++ b/web-app/packages/app/src/main.ts
@@ -13,7 +13,7 @@ import {
   LayoutModule,
   InstanceModule,
   useInstanceStore,
-  initCsrfToken,
+  initCsrfToken
 } from '@mergin/lib'
 
 import { createMerginApp } from './app'
diff --git a/web-app/packages/app/src/modules/project/views/ProjectView.vue b/web-app/packages/app/src/modules/project/views/ProjectView.vue
index b495a588..a57ff595 100644
--- a/web-app/packages/app/src/modules/project/views/ProjectView.vue
+++ b/web-app/packages/app/src/modules/project/views/ProjectView.vue
@@ -59,7 +59,11 @@ export default defineComponent({
         namespace: props.namespace,
         project: props.projectName
       }
-      const dialog = { maxWidth: 580, persistent: true, header: 'Clone project' }
+      const dialog = {
+        maxWidth: 580,
+        persistent: true,
+        header: 'Clone project'
+      }
       const listeners = {
         error: (error, data) => {
           formStore.handleError({
diff --git a/web-app/packages/app/src/modules/user/views/LoginView.vue b/web-app/packages/app/src/modules/user/views/LoginView.vue
index 6eb1705b..44081ee5 100644
--- a/web-app/packages/app/src/modules/user/views/LoginView.vue
+++ b/web-app/packages/app/src/modules/user/views/LoginView.vue
@@ -36,7 +36,7 @@ export default defineComponent({
             currentRoute: payload.currentRoute
           })
         }
-      } catch(err) {
+      } catch (err) {
         console.error(err)
       }
     }
diff --git a/web-app/packages/app/src/router.ts b/web-app/packages/app/src/router.ts
index aadd4e7b..ed640888 100644
--- a/web-app/packages/app/src/router.ts
+++ b/web-app/packages/app/src/router.ts
@@ -14,6 +14,10 @@ import {
   SideBarTemplate as SideBar
 } from '@mergin/lib'
 import { Pinia } from 'pinia'
+import {
+  createWebHistory,
+  createRouter as createRouterInstance
+} from 'vue-router'
 
 import DashboardView from '@/modules/dashboard/views/DashboardView.vue'
 import AppHeader from '@/modules/layout/components/AppHeader.vue'
@@ -22,10 +26,6 @@ import ProjectsListView from '@/modules/project/views/ProjectsListView.vue'
 import ProjectView from '@/modules/project/views/ProjectView.vue'
 import LoginView from '@/modules/user/views/LoginView.vue'
 import ProfileView from '@/modules/user/views/ProfileView.vue'
-import {
-  createWebHistory,
-  createRouter as createRouterInstance
-} from 'vue-router'
 
 export const createRouter = (pinia: Pinia) => {
   const router = createRouterInstance({
@@ -146,7 +146,6 @@ export const createRouter = (pinia: Pinia) => {
             }/tree${from.params.location ? `/${from.params.location}` : ''}`,
             query: { file_path: to.params.location }
           })
-          return
         }
       },
       /** Redirect of unused /history/:version_id path to /history?version_id */
@@ -161,7 +160,6 @@ export const createRouter = (pinia: Pinia) => {
             path: `/projects/${to.params.namespace}/${to.params.projectName}/history`,
             query: { version_id: to.params.version_id }
           })
-          return
         }
       },
       {
diff --git a/web-app/packages/lib/.eslintrc.cjs b/web-app/packages/lib/.eslintrc.cjs
index 85505c99..785ba939 100644
--- a/web-app/packages/lib/.eslintrc.cjs
+++ b/web-app/packages/lib/.eslintrc.cjs
@@ -1,11 +1,9 @@
 module.exports = {
-  env: {
-    node: true
-  },
   extends: [
     'plugin:vue/essential',
     'eslint:recommended',
-    '@vue/typescript/recommended'
+    '@vue/typescript/recommended',
+    '../../.eslintrc.cjs'
   ],
   parser: 'vue-eslint-parser',
   parserOptions: {
diff --git a/web-app/packages/lib/src/common/route_utils.ts b/web-app/packages/lib/src/common/route_utils.ts
index 4889853a..74503788 100644
--- a/web-app/packages/lib/src/common/route_utils.ts
+++ b/web-app/packages/lib/src/common/route_utils.ts
@@ -4,28 +4,29 @@
 
 import isEqual from 'lodash/isEqual'
 import pick from 'lodash/pick'
-import { Route, NavigationGuardNext } from 'vue-router'
-
-import { useUserStore } from '@/modules/user/store'
+import { NavigationGuardNext, RouteLocationNormalized } from 'vue-router'
 
 export type IsAuthenticatedGuardOptions = {
   notAuthenticatedRedirectPath?: string
 }
 
-export function isTheSameRoute(from: Route, to: Route) {
+export function isTheSameRoute(
+  from: RouteLocationNormalized,
+  to: RouteLocationNormalized
+) {
   const properties = ['name', 'path', 'hash', 'params', 'query']
   return isEqual(pick(from, properties), pick(to, properties))
 }
 
-export function getTagsFromQuery(route: Route) {
+export function getTagsFromQuery(route: RouteLocationNormalized) {
   const tags = route.query.tags
   return tags ? (typeof tags === 'string' ? tags.split(',') : tags) : []
 }
 
 /** Handles redirect to /login when user is not authenticated. */
 export function isAuthenticatedGuard(
-  to: Route,
-  from: Route,
+  to: RouteLocationNormalized,
+  from: RouteLocationNormalized,
   next: NavigationGuardNext,
   userStore,
   options?: IsAuthenticatedGuardOptions
@@ -47,8 +48,8 @@ export function isAuthenticatedGuard(
 
 /** Handles redirect to /login when user is not superUser. */
 export function isSuperUser(
-  to: Route,
-  from: Route,
+  to: RouteLocationNormalized,
+  from: RouteLocationNormalized,
   next: NavigationGuardNext,
   userStore
 ) {
diff --git a/web-app/packages/lib/src/common/types.ts b/web-app/packages/lib/src/common/types.ts
index 992e06f2..ee5c592a 100644
--- a/web-app/packages/lib/src/common/types.ts
+++ b/web-app/packages/lib/src/common/types.ts
@@ -16,7 +16,7 @@ export type RouteOverrides = Record<
 export interface ModuleService {
   httpService?: HttpService
   routerService?: Router
-  [key: string]: any
+  [key: string]: unknown
 }
 
 export interface BaseModule {
@@ -62,7 +62,7 @@ export interface PaginatedResponse<T> extends PaginatedResponseDefaults {
   items: readonly T[]
 }
 
-export interface ApiRequestSuccessInfo<T = any> {
+export interface ApiRequestSuccessInfo<T> {
   success: boolean
   message?: string
   data?: T
diff --git a/web-app/packages/lib/src/modules/project/types.ts b/web-app/packages/lib/src/modules/project/types.ts
index 6481e012..1a60ceb7 100644
--- a/web-app/packages/lib/src/modules/project/types.ts
+++ b/web-app/packages/lib/src/modules/project/types.ts
@@ -152,8 +152,7 @@ export interface AccessRequest {
   user: UserSearch
 }
 
-export type ProjectAccessRequestResponse =
-  PaginatedResponse<AccessRequest>
+export type ProjectAccessRequestResponse = PaginatedResponse<AccessRequest>
 
 export interface ProjectAccessRequestParams extends PaginatedRequestParamsApi {
   project_name?: string
diff --git a/web-app/packages/lib/src/modules/user/store.ts b/web-app/packages/lib/src/modules/user/store.ts
index 6d835764..048fb025 100644
--- a/web-app/packages/lib/src/modules/user/store.ts
+++ b/web-app/packages/lib/src/modules/user/store.ts
@@ -5,7 +5,7 @@
 import isObject from 'lodash/isObject'
 import { defineStore, getActivePinia } from 'pinia'
 import Cookies from 'universal-cookie'
-import { isNavigationFailure, NavigationFailureType } from 'vue-router'
+import { isNavigationFailure } from 'vue-router'
 
 import { getErrorMessage } from '@/common/error_utils'
 import { waitCursor } from '@/common/html_utils'

From a80f706846d8d0900093a1d0294d0a1b75e0012a Mon Sep 17 00:00:00 2001
From: "marcel.kocisek" <marcel.kocisek@lutraconsulting.co.uk>
Date: Thu, 4 Jan 2024 14:57:06 +0100
Subject: [PATCH 10/14] Center for Advanced settings label and button

---
 .../project/views/ProjectSettingsViewTemplate.vue        | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/web-app/packages/lib/src/modules/project/views/ProjectSettingsViewTemplate.vue b/web-app/packages/lib/src/modules/project/views/ProjectSettingsViewTemplate.vue
index b1872428..711f6424 100644
--- a/web-app/packages/lib/src/modules/project/views/ProjectSettingsViewTemplate.vue
+++ b/web-app/packages/lib/src/modules/project/views/ProjectSettingsViewTemplate.vue
@@ -28,7 +28,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
         <template #header
           ><h3 class="font-semibold text-color text-sm">Advanced</h3></template
         >
-        <div class="flex text-sm py-2">
+        <div class="flex align-items-center text-sm py-2">
           <div class="flex-grow-1">
             <template v-if="settings.access.public">
               <p class="font-semibold py-1 m-0">This is public project</p>
@@ -54,11 +54,14 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
             </PButton>
           </div>
         </div>
-        <div class="flex text-sm py-2" v-if="$slots.operations">
+        <div
+          class="flex align-items-center text-sm py-2"
+          v-if="$slots.operations"
+        >
           <slot name="operations"></slot>
         </div>
         <div
-          class="flex text-sm py-2"
+          class="flex align-items-center text-sm py-2"
           v-if="project && project.permissions && project.permissions.delete"
         >
           <div class="flex-grow-1">

From b23dc116003daabcdbfd83ac60823ab2942f7e57 Mon Sep 17 00:00:00 2001
From: "marcel.kocisek" <marcel.kocisek@lutraconsulting.co.uk>
Date: Thu, 4 Jan 2024 15:06:21 +0100
Subject: [PATCH 11/14] Moving access requests to top

---
 .../project/views/ProjectSettingsViewTemplate.vue  | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/web-app/packages/lib/src/modules/project/views/ProjectSettingsViewTemplate.vue b/web-app/packages/lib/src/modules/project/views/ProjectSettingsViewTemplate.vue
index 711f6424..cb967b4b 100644
--- a/web-app/packages/lib/src/modules/project/views/ProjectSettingsViewTemplate.vue
+++ b/web-app/packages/lib/src/modules/project/views/ProjectSettingsViewTemplate.vue
@@ -6,13 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 
 <template>
   <div>
-    <slot
-      name="permissions"
-      :settings="settings"
-      :key-prop="key"
-      :save-project="saveProject"
-    ></slot>
-    <app-container v-if="showAccessRequests">
+    <app-container v-if="showAccessRequests && accessRequestsCount > 0">
       <app-section
         ><template #title
           >Requests
@@ -22,6 +16,12 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
         ><project-access-requests
       /></app-section>
     </app-container>
+    <slot
+      name="permissions"
+      :settings="settings"
+      :key-prop="key"
+      :save-project="saveProject"
+    ></slot>
 
     <app-container>
       <app-panel-toggleable>

From 0ef11423a27ccd29e54d2dbb68a37f56729242f0 Mon Sep 17 00:00:00 2001
From: "marcel.kocisek" <marcel.kocisek@lutraconsulting.co.uk>
Date: Mon, 8 Jan 2024 11:41:38 +0100
Subject: [PATCH 12/14] Fix text in Acces  requests tables (no transfer)

---
 .../project/components/AccessRequestTableTemplate.vue        | 5 ++---
 .../src/modules/project/components/ProjectAccessRequests.vue | 5 ++---
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/web-app/packages/lib/src/modules/project/components/AccessRequestTableTemplate.vue b/web-app/packages/lib/src/modules/project/components/AccessRequestTableTemplate.vue
index 8adc83ce..5a118c1b 100644
--- a/web-app/packages/lib/src/modules/project/components/AccessRequestTableTemplate.vue
+++ b/web-app/packages/lib/src/modules/project/components/AccessRequestTableTemplate.vue
@@ -37,9 +37,8 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
           <p class="w-12 lg:w-4 text-xs p-2 lg:p-0">
             User
             <span class="font-semibold">{{ item.requested_by }}</span>
-            wants to transfer project
-            <span class="font-semibold">{{ item.project_name }}</span>
-            to your workspace.
+            requested an access to your project
+            <span class="font-semibold">{{ item.project_name }}.</span>
           </p>
           <div
             class="flex w-12 lg:w-4 align-items-center flex-wrap lg:flex-nowrap"
diff --git a/web-app/packages/lib/src/modules/project/components/ProjectAccessRequests.vue b/web-app/packages/lib/src/modules/project/components/ProjectAccessRequests.vue
index 0cb259d1..fdb28f80 100644
--- a/web-app/packages/lib/src/modules/project/components/ProjectAccessRequests.vue
+++ b/web-app/packages/lib/src/modules/project/components/ProjectAccessRequests.vue
@@ -37,9 +37,8 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
           <p class="w-12 lg:w-4 text-xs p-2 lg:p-0">
             User
             <span class="font-semibold">{{ item.requested_by }}</span>
-            wants to transfer project
-            <span class="font-semibold">{{ item.project_name }}</span>
-            to your workspace.
+            requested an access to your project
+            <span class="font-semibold">{{ item.project_name }}.</span>
           </p>
           <div
             class="flex w-12 lg:w-4 align-items-center flex-wrap lg:flex-nowrap"

From 7e0642395603b66fe53babef52893279db36b763 Mon Sep 17 00:00:00 2001
From: "marcel.kocisek" <marcel.kocisek@lutraconsulting.co.uk>
Date: Mon, 8 Jan 2024 16:54:50 +0100
Subject: [PATCH 13/14] Small changes based on comments: - unify access
 requests dropdowns with project permissions - disabled opacity .8 -> .4 -
 show nampesapce in leave project dialog if props.showNamespace === true

---
 .../mm-theme-light/variables/_general.scss    |  2 +-
 .../lib/src/common/components/AppDropdown.vue |  7 +-
 .../components/AccessRequestTableTemplate.vue | 18 ++++-
 .../components/ProjectAccessRequests.vue      | 18 ++++-
 .../components/ProjectPermissionsTemplate.vue | 78 ++++---------------
 .../views/ProjectSettingsViewTemplate.vue     |  5 +-
 .../project/views/ProjectViewTemplate.vue     |  4 +-
 7 files changed, 56 insertions(+), 76 deletions(-)

diff --git a/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/variables/_general.scss b/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/variables/_general.scss
index 4e68cf12..f8dccc05 100644
--- a/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/variables/_general.scss
+++ b/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/variables/_general.scss
@@ -64,7 +64,7 @@ $inlineSpacing: .5rem;
 
 /// Opacity of the disabled elements
 /// @group general
-$disabledOpacity: .8;
+$disabledOpacity: .4;
 
 /// Background of the modal layer
 /// @group general
diff --git a/web-app/packages/lib/src/common/components/AppDropdown.vue b/web-app/packages/lib/src/common/components/AppDropdown.vue
index 59c8e3cb..b7f2d6b9 100644
--- a/web-app/packages/lib/src/common/components/AppDropdown.vue
+++ b/web-app/packages/lib/src/common/components/AppDropdown.vue
@@ -30,6 +30,11 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
             context.focused ? 'bg-gray-50' : 'bg-transparent'
           ]
         }
+      },
+      trigger(options) {
+        return {
+          class: options.props?.disabled ? 'text-color' : 'text-color-forest'
+        }
       }
     }"
   >
@@ -39,7 +44,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
           scope.class,
           'ti',
           isOpen ? 'ti-chevron-up' : 'ti-chevron-down',
-          'text-color-forest font-semibold text-xl'
+          'font-semibold text-base'
         ]"
       ></i>
     </template>
diff --git a/web-app/packages/lib/src/modules/project/components/AccessRequestTableTemplate.vue b/web-app/packages/lib/src/modules/project/components/AccessRequestTableTemplate.vue
index 5a118c1b..92f48483 100644
--- a/web-app/packages/lib/src/modules/project/components/AccessRequestTableTemplate.vue
+++ b/web-app/packages/lib/src/modules/project/components/AccessRequestTableTemplate.vue
@@ -52,9 +52,21 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
             <AppDropdown
               v-if="showAccept"
               :options="[
-                { value: 'read', label: 'Reader' },
-                { value: 'write', label: 'Writer' },
-                { value: 'owner', label: 'Owner' }
+                {
+                  value: 'owner',
+                  label: 'Manage',
+                  description: 'Can edit and remove projects in the workspace'
+                },
+                {
+                  value: 'write',
+                  label: 'Write',
+                  description: 'Can edit projects in the workspace'
+                },
+                {
+                  value: 'read',
+                  label: 'Read only',
+                  description: 'Can view projects in the workspace'
+                }
               ]"
               v-model="permissions[item.id]"
               @change="(e) => permissionsChange(e, item)"
diff --git a/web-app/packages/lib/src/modules/project/components/ProjectAccessRequests.vue b/web-app/packages/lib/src/modules/project/components/ProjectAccessRequests.vue
index fdb28f80..f208ce9a 100644
--- a/web-app/packages/lib/src/modules/project/components/ProjectAccessRequests.vue
+++ b/web-app/packages/lib/src/modules/project/components/ProjectAccessRequests.vue
@@ -51,9 +51,21 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
             </p>
             <AppDropdown
               :options="[
-                { value: 'read', label: 'Reader' },
-                { value: 'write', label: 'Writer' },
-                { value: 'owner', label: 'Owner' }
+                {
+                  value: 'owner',
+                  label: 'Manage',
+                  description: 'Can edit and remove projects in the workspace'
+                },
+                {
+                  value: 'write',
+                  label: 'Write',
+                  description: 'Can edit projects in the workspace'
+                },
+                {
+                  value: 'read',
+                  label: 'Read only',
+                  description: 'Can view projects in the workspace'
+                }
               ]"
               v-model="permissions[item.id]"
               class="w-6 lg:w-4 p-1"
diff --git a/web-app/packages/lib/src/modules/project/components/ProjectPermissionsTemplate.vue b/web-app/packages/lib/src/modules/project/components/ProjectPermissionsTemplate.vue
index b0d4723a..dd4dc5d7 100644
--- a/web-app/packages/lib/src/modules/project/components/ProjectPermissionsTemplate.vue
+++ b/web-app/packages/lib/src/modules/project/components/ProjectPermissionsTemplate.vue
@@ -73,10 +73,19 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
                       :options="permissionStates"
                       :model-value="actualPermissions(item)"
                       @update:model-value="(e) => valueChanged(item, e)"
-                      :disabled="!isProjectOwner"
+                      :disabled="item.user.id === loggedUser.id"
                       class="w-6 lg:w-full"
                     />
-                    <template v-else>{{ item[col.value] }}</template>
+                    <template v-else
+                      >{{ item[col.value] }}
+                      <span
+                        v-if="
+                          col.value === 'email' &&
+                          item.user.id === loggedUser.id
+                        "
+                        >(me)</span
+                      ></template
+                    >
                   </span>
                 </div>
                 <!-- actions -->
@@ -106,7 +115,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
         </PDataView>
       </AppSection>
     </AppContainer>
-    <AppContainer v-if="$slots.banner">Hej<slot name="banner" /></AppContainer>
+    <AppContainer v-if="$slots.banner"><slot name="banner" /></AppContainer>
   </div>
 </template>
 
@@ -374,65 +383,4 @@ export default defineComponent({
 })
 </script>
 
-<style lang="scss" scoped>
-.no-shrink {
-  flex: 0 0 auto;
-}
-
-label {
-  font-weight: 500;
-}
-
-:deep(*) .v-data-table__overflow {
-  margin: 0.5em 0;
-  border: 1px solid #ddd;
-  border-radius: 3px;
-  padding: 0.5em;
-  background-color: #f9f9f9;
-
-  .v-datatable {
-    background-color: transparent;
-  }
-}
-
-.v-list {
-  :deep(.v-list-item) {
-    min-height: unset;
-  }
-}
-
-.div {
-  b {
-    margin-right: 10px;
-  }
-
-  span {
-    margin-right: 3px;
-    font-size: 12px;
-  }
-}
-
-.private-public-btn {
-  font-size: 12px;
-  padding-left: 20px;
-  padding-right: 20px;
-
-  span {
-    font-weight: 700;
-  }
-}
-
-.private-public-text {
-  font-size: 14px;
-}
-
-.public-private-zone {
-  margin-top: 20px;
-  margin-bottom: 20px;
-
-  button {
-    margin-right: 20px;
-    margin-top: 1px;
-  }
-}
-</style>
+<style lang="scss" scoped></style>
diff --git a/web-app/packages/lib/src/modules/project/views/ProjectSettingsViewTemplate.vue b/web-app/packages/lib/src/modules/project/views/ProjectSettingsViewTemplate.vue
index cb967b4b..4c3cb349 100644
--- a/web-app/packages/lib/src/modules/project/views/ProjectSettingsViewTemplate.vue
+++ b/web-app/packages/lib/src/modules/project/views/ProjectSettingsViewTemplate.vue
@@ -80,6 +80,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 </template>
 
 <script lang="ts">
+import debounce from 'lodash/debounce'
 import { mapActions, mapState } from 'pinia'
 import { PropType, defineComponent } from 'vue'
 
@@ -165,7 +166,7 @@ export default defineComponent({
       this.settings.access.writersnames = newSettings.access.writersnames
       this.saveSettings(newSettings)
     },
-    saveSettings(newSettings) {
+    saveSettings: debounce(function (newSettings) {
       try {
         this.saveProjectSettings({
           namespace: this.namespace,
@@ -177,7 +178,7 @@ export default defineComponent({
           text: getErrorMessage(err, 'Failed to save project settings')
         })
       }
-    },
+    }, 2000),
     togglePublicPrivate() {
       this.settings.access.public = !this.settings.access.public
       this.saveSettings(this.settings)
diff --git a/web-app/packages/lib/src/modules/project/views/ProjectViewTemplate.vue b/web-app/packages/lib/src/modules/project/views/ProjectViewTemplate.vue
index 5704aad5..a5714817 100644
--- a/web-app/packages/lib/src/modules/project/views/ProjectViewTemplate.vue
+++ b/web-app/packages/lib/src/modules/project/views/ProjectViewTemplate.vue
@@ -345,7 +345,9 @@ export default defineComponent({
         })
     },
     leaveDialog() {
-      const projPath = `${this.namespace}/${this.projectName}`
+      const projPath = this.showNamespace
+        ? `${this.namespace}/${this.projectName}`
+        : this.projectName
       const props: ConfirmDialogProps = {
         text: `Are you sure to leave the project ${projPath}?`,
         description: 'You will not have access to it anymore.',

From e38a980c06d628ed738a75476336208edd4e7c1e Mon Sep 17 00:00:00 2001
From: "marcel.kocisek" <marcel.kocisek@lutraconsulting.co.uk>
Date: Mon, 8 Jan 2024 17:15:51 +0100
Subject: [PATCH 14/14] Added wider permissions dropdwon

---
 .../modules/project/components/AccessRequestTableTemplate.vue   | 2 +-
 .../src/modules/project/components/ProjectAccessRequests.vue    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/web-app/packages/lib/src/modules/project/components/AccessRequestTableTemplate.vue b/web-app/packages/lib/src/modules/project/components/AccessRequestTableTemplate.vue
index 92f48483..08704ccf 100644
--- a/web-app/packages/lib/src/modules/project/components/AccessRequestTableTemplate.vue
+++ b/web-app/packages/lib/src/modules/project/components/AccessRequestTableTemplate.vue
@@ -71,7 +71,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
               v-model="permissions[item.id]"
               @change="(e) => permissionsChange(e, item)"
               :disabled="expired(item.expire)"
-              class="w-6 lg:w-4 p-1"
+              class="w-6 lg:w-5 p-1"
             />
             <div class="flex justify-content-end w-6 lg:w-4 p-1">
               <PButton
diff --git a/web-app/packages/lib/src/modules/project/components/ProjectAccessRequests.vue b/web-app/packages/lib/src/modules/project/components/ProjectAccessRequests.vue
index f208ce9a..a2823076 100644
--- a/web-app/packages/lib/src/modules/project/components/ProjectAccessRequests.vue
+++ b/web-app/packages/lib/src/modules/project/components/ProjectAccessRequests.vue
@@ -68,7 +68,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
                 }
               ]"
               v-model="permissions[item.id]"
-              class="w-6 lg:w-4 p-1"
+              class="w-6 lg:w-5 p-1"
             />
             <div class="flex justify-content-end w-6 lg:w-4 p-1">
               <PButton