Merge remote-tracking branch 'origin/develop-redesign' into redesign-…

…profile
MerginMaps · Jan 9, 2024 · bd296df · bd296df
2 parents 1750f04 + 2f2a7b9
commit bd296df
Show file tree

Hide file tree

Showing 7 changed files with 75 additions and 94 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
@@ -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
@@ -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
@@ -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"
@@ -53,14 +52,26 @@ 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)"
               :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
@@ -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"
@@ -52,12 +51,24 @@ 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"
+              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/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
@@ -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,11 +16,17 @@ 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-section-banner>
         <template #title>Advanced</template>
-        <div class="flex text-sm py-2">
+        <div class="flex align-items-cente 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>
@@ -52,11 +52,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">
@@ -75,6 +78,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'
 
@@ -160,7 +164,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,
@@ -172,7 +176,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
@@ -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.',