Skip to content

Commit

Permalink
Added:
Browse files Browse the repository at this point in the history 
- alternative views for status codes Project view
- responsive FileBrowser table
  • Loading branch information
@MarcelGeo
MarcelGeo committed Dec 15, 2023
1 parent 2c47b21 commit 5658b6c
Show file tree
Hide file tree
Showing 5 changed files with 137 additions and 113 deletions.
52 changes: 33 additions & 19 deletions web-app/packages/lib/src/modules/project/components/CloneDialogTemplate.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,33 +5,47 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
-->

<template>
<v-card v-on:keyup.enter="onCloneProject" data-cy="clone-dialog-card">
<v-card-title>
<span class="text-h5">Clone Project</span>
</v-card-title>
<v-card-text>
<v-text-field
<div class="py-4">
<span class="flex p-float-label w-full pb-3">
<PInputText
autofocus
label="new project"
id="name"
v-model="newProjectName"
type="text"
aria-describedby="text-error"
data-cy="clone-dialog-project-name"
class="border-round-xl flex-grow-1"
:style="{ backgroundColor: 'var(--light-green-color)' }"
/>
<slot name="dynamic-items"></slot>
</v-card-text>
<v-card-actions>
<v-spacer />
<v-btn @click="close" data-cy="clone-dialog-close-btn"> Close </v-btn>
<v-btn
<label for="name">Project name</label>
</span>
<!-- Dynamic items to pass other inputs -->
<slot name="dynamic-items"></slot>

<!-- Footer -->
<div
class="flex flex-column lg:flex-row justify-content-between align-items-center pt-3"
>
<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"
>Cancel</PButton
>

<PButton
id="clone-project-btn"
class="primary"
:disabled="!newProjectName || !currentWorkspace"
@click="onCloneProject"
data-cy="clone-dialog-clone-btn"
data-cy="project-form-create-btn"
class="flex w-12 lg:w-6 justify-content-center"
>
Clone
</v-btn>
</v-card-actions>
</v-card>
Clone project
</PButton>
</div>
</div>
</template>

<script lang="ts">
Expand Down
42 changes: 23 additions & 19 deletions web-app/packages/lib/src/modules/project/components/FileDetailSidebar.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,26 +56,23 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
</dl>

<!-- render only if file is smaller than 100MB-->
<div
class="flex flex-column align-items-center w-full py-4"
<output
v-if="mimetype && file.size < 104857600"
class="flex flex-column align-items-center w-full py-4"
>
<output>
<PImage
:src="downloadLink"
v-if="mimetype.match('image')"
preview
/>
<v-textarea
v-else-if="mimetype.match('text')"
:auto-grow="true"
:readonly="true"
:model-value="content"
variant="solo-filled"
>
</v-textarea>
</output>
</div>
<PImage
:src="downloadLink"
v-if="mimetype.match('image')"
preview
imageClass="w-full"
/>
<div
class="file-detail-code border-round-xl p-4 line-height-3 w-full"
v-else-if="mimetype.match('text')"
>
<span class="opacity-80 text-sm">{{ content }}</span>
</div>
</output>
</div>

<!-- foooter -->
Expand Down Expand Up @@ -238,4 +235,11 @@ export default defineComponent({
})
</script>

<style lang="scss" scoped></style>
<style lang="scss" scoped>
.file-detail {
&-code {
background-color: var(--light-green-color);
word-wrap: break-word;
}
}
</style>
19 changes: 9 additions & 10 deletions web-app/packages/lib/src/modules/project/components/ProjectShareButtonTemplate.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,20 +5,19 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
-->

<template>
<action-button :disabled="false" @click="onShareProject" v-if="loggedUser">
<template #icon>
<plus-icon />
</template>
Share
</action-button>
<PButton
@click="onShareProject"
v-if="loggedUser"
icon="ti ti-send"
label="Share"
class="mr-2"
/>
</template>

<script lang="ts">
import { mapActions, mapState } from 'pinia'
import { defineComponent } from 'vue'
import { PlusIcon } from 'vue-tabler-icons'
import ActionButton from '@/common/components/ActionButton.vue'
import { useDialogStore } from '@/modules/dialog/store'
import ProjectShareDialog from '@/modules/project/components/ProjectShareDialog.vue'
import { useUserStore } from '@/modules/user/store'
Expand All @@ -27,7 +26,6 @@ export default defineComponent({
props: {
allowInvite: Boolean
},
components: { ActionButton, PlusIcon },
computed: {
...mapState(useUserStore, ['loggedUser'])
},
Expand All @@ -43,7 +41,8 @@ export default defineComponent({
}
const dialog = {
maxWidth: 600,
persistent: true
persistent: true,
header: 'Share project'
}
this.show({
component: ProjectShareDialog,
Expand Down
21 changes: 16 additions & 5 deletions web-app/packages/lib/src/modules/project/views/FileBrowserView.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,9 +87,16 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
>
<template #header>
<div class="grid grid-nogutter">
<div v-for="col in columns" class="col-4 text-xs" :key="col.text">
<!-- Visible on lg breakpoint > -->
<div
v-for="col in columns"
class="col-4 text-xs hidden lg:flex"
:key="col.text"
>
{{ col.text }}
</div>
<!-- else -->
<div class="col-12 flex lg:hidden">Name</div>
</div>
</template>
<template #list="slotProps">
Expand All @@ -100,24 +107,27 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
@click.prevent="rowClick(item.link)"
>
<!-- Columns, we are using data view instead table, it is better handling of respnsive state -->
<div class="flex align-items-center col-4">
<div class="flex align-items-center col-12 lg:col-4">
<p class="font-semibold">
<file-icon :file="item" />{{ item.name }}
</p>
<div>
<folder-diff v-if="item.diffStats" v-bind="item.diffStats" />
</div>
</div>
<div class="flex align-items-center col-4">
<div class="flex align-items-center col-12 lg:col-4">
<span
v-if="item.mtime"
v-tooltip.bottom="{ value: $filters.datetime(item.mtime) }"
class="text-sm opacity-80"
>
{{ $filters.timediff(item.mtime) }}
</span>
</div>
<div class="flex align-items-center col-4">
<span v-if="item.size">{{ $filters.filesize(item.size) }}</span>
<div class="flex align-items-center col-12 lg:col-4">
<span class="text-sm opacity-80" v-if="item.size">{{
$filters.filesize(item.size)
}}</span>
</div>
</div>
</template>
Expand Down Expand Up @@ -192,6 +202,7 @@ export default defineComponent({
descending: false,
sortBy: 'name'
},
// Setup this to lower number in case of testing
itemPerPage: 50,
searchFilter: '',
filter: '',
Expand Down
116 changes: 56 additions & 60 deletions web-app/packages/lib/src/modules/project/views/ProjectViewTemplate.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,43 +7,42 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
<template>
<div>
<template v-if="project">
<app-container class="flex justify-content-end xl:pb-1 -mb-6">
<app-container class="flex justify-content-end xl:pb-1 lg:-mb-6">
<!-- Z indexes based on minus margin, its not possible to add additional buttons to tab view -->
<div class="relative z-1">
<!-- Toolbar -->
<portal-target name="project-toolbar" class="layout row shrink" />
<slot name="shareButton">
<project-share-button />
</slot>
<action-button
<PButton
severity="secondary"
outlined
@click="downloadArchive({ url: downloadUrl })"
data-cy="project-download-btn"
>
<template #icon>
<download-icon />
</template>
Download
</action-button>
<action-button
icon="ti ti-download"
class="mr-2"
label="Download"
/>
<PButton
severity="secondary"
outlined
@click="cloneDialog"
v-if="canCloneProject"
data-cy="project-clone-btn"
>
<template #icon>
<copy-icon />
</template>
Clone
</action-button>
<action-button
icon="ti ti-copy"
label="Clone"
class="mr-2"
/>
<PButton
severity="secondary"
outlined
@click="unsubscribeDialog"
data-cy="project-leave-btn"
icon="ti ti-logout"
label="Leave project"
v-if="canLeaveProject"
>
<template #icon>
<square-minus-icon />
</template>
Leave project
</action-button>
/>
</div>
</app-container>

Expand Down Expand Up @@ -87,38 +86,41 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
</PTabPanel>
</PTabView>
</template>
<app-section v-else-if="fetchProjectsResponseStatus === 403">
<v-layout
class="public-private-zone"
style="padding-top: 25px; padding-left: 25px"
>
<v-btn id="request-access-btn" @click="createAccessRequest"
>Request access
</v-btn>
<span class="private-public-text">
<b>This is a private project</b><br />
You don't have permissions to access this project.
</span>
</v-layout>
</app-section>
<app-section v-else-if="fetchProjectsResponseStatus === 404">
<span
class="private-public-text"
style="padding-top: 25px; padding-left: 25px"
>
<b>Project not found</b><br />
Please check if address is written correctly
</span>
</app-section>
<app-section v-else-if="fetchProjectsResponseStatus === 409">
<span
class="private-public-text"
style="padding-top: 25px; padding-left: 25px"
>
<b>You don't have permission to access this project</b><br />
You already requested access
</span>
</app-section>
<app-container v-else-if="fetchProjectsResponseStatus">
<app-section v-if="fetchProjectsResponseStatus === 403">
<div class="flex flex-column align-items-center p-4 text-center">
<img src="@/assets/map-circle.svg" alt="No project" />
<p class="font-semibold">This is a private project</p>
<p class="text-sm opacity-80 mt-2 mb-4">
You don't have permissions to access this project.
</p>
<PButton id="request-access-btn" @click="createAccessRequest"
>Request access</PButton
>
</div>
</app-section>
<app-section v-else-if="fetchProjectsResponseStatus === 404">
<div class="flex flex-column align-items-center p-4 text-center">
<img src="@/assets/map-circle.svg" alt="No project" />
<p class="font-semibold">Project not found</p>
<p class="text-sm opacity-80 mt-2 mb-4">
Please check if address is written correctly
</p>
</div>
</app-section>
<app-section v-else-if="fetchProjectsResponseStatus === 409">
<div class="flex flex-column align-items-center p-4 text-center">
<img src="@/assets/map-circle.svg" alt="No project" />
<p class="font-semibold">
You don't have permission to access this project
</p>
<p class="text-sm opacity-80 mt-2 mb-4">
You already requested access
</p>
</div>
</app-section>
</app-container>

<div slot="right">
<upload-panel v-if="upload" :namespace="namespace" class="my-1 mr-1" />
</div>
Expand All @@ -129,10 +131,8 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
import { mapActions, mapState } from 'pinia'
import { TabPanelPassThroughOptions } from 'primevue/tabpanel'
import { defineComponent, PropType } from 'vue'
import { CopyIcon, DownloadIcon, SquareMinusIcon } from 'vue-tabler-icons'
import { AppContainer, AppSection } from '@/common'
import ActionButton from '@/common/components/ActionButton.vue'
import { waitCursor } from '@/common/html_utils'
import { USER_ROLE_NAME_BY_ROLE, UserRole } from '@/common/permission_utils'
import ConfirmDialog from '@/modules/dialog/components/ConfirmDialog.vue'
Expand All @@ -152,12 +152,8 @@ interface TabItem {
export default defineComponent({
name: 'ProjectViewTemplate',
components: {
ActionButton,
ProjectShareButton,
UploadPanel,
CopyIcon,
DownloadIcon,
SquareMinusIcon,
AppContainer,
AppSection
},
Expand Down

0 comments on commit 5658b6c

Please sign in to comment.