Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

refactor: move link role dropdown to a re-usable component #10079

Merged
merged 1 commit into from
Nov 29, 2023
Merged

refactor: move link role dropdown to a re-usable component #10079

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
149 changes: 34 additions & 115 deletions packages/web-app-files/src/components/SideBar/Shares/Links/DetailsAndEdit.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,66 +1,12 @@
<template>
<div class="link-details oc-flex oc-flex-between oc-flex-middle">
<div v-if="isModifiable">
<oc-button
:id="`edit-public-link-role-dropdown-toggle-${link.id}`"
appearance="raw"
class="edit-public-link-role-dropdown-toggle oc-text-left"
gap-size="none"
>
<span
class="link-current-role"
v-text="currentLinkRoleLabel || $gettext('Select a role')"
/>
<oc-icon name="arrow-down-s" />
</oc-button>
<oc-drop
ref="editPublicLinkRoleDropdown"
class="edit-public-link-role-dropdown"
:drop-id="`edit-public-link-role-dropdown`"
:toggle="`#edit-public-link-role-dropdown-toggle-${link.id}`"
padding-size="small"
offset="0"
mode="click"
>
<oc-list class="role-dropdown-list">
<li v-for="roleOption in availableRoleOptions" :key="`role-dropdown-${roleOption.key}`">
<oc-button
:id="`files-role-${roleOption.name}`"
:class="{
selected: isSelectedRole(roleOption),
'oc-background-primary-gradient': isSelectedRole(roleOption)
}"
:appearance="isSelectedRole(roleOption) ? 'raw-inverse' : 'raw'"
:variation="isSelectedRole(roleOption) ? 'primary' : 'passive'"
justify-content="space-between"
class="oc-p-s"
@click="
updateLink({
link: {
...link,
permissions: roleOption.bitmask(false)
},
dropRef: $refs.editPublicLinkRoleDropdown
})
"
>
<span class="oc-flex oc-flex-middle">
<oc-icon :name="roleOption.icon" class="oc-pl-s oc-pr-m" variation="inherit" />
<span>
<span
class="oc-text-bold oc-display-block oc-width-1-1"
v-text="$gettext(roleOption.label)"
/>
<span class="oc-text-small">{{ $gettext(roleOption.description(false)) }}</span>
</span>
</span>
<span class="oc-flex">
<oc-icon v-if="isSelectedRole(roleOption)" name="check" variation="inherit" />
</span>
</oc-button>
</li>
</oc-list>
</oc-drop>
<link-role-dropdown
:model-value="currentLinkRole"
:available-role-options="availableRoleOptions"
drop-offset="0"
@update:model-value="updateSelectedRole"
JammingBen marked this conversation as resolved.
Show resolved Hide resolved
/>
</div>
<p v-else class="oc-my-rm">
<span
Expand Down Expand Up @@ -199,15 +145,19 @@ import { basename } from 'path'
import { DateTime } from 'luxon'
import { mapActions, mapGetters } from 'vuex'
import * as EmailValidator from 'email-validator'
import { createLocationSpaces, useConfigurationManager } from '@ownclouders/web-pkg'
import {
createLocationSpaces,
useConfigurationManager,
LinkRoleDropdown
} from '@ownclouders/web-pkg'
import {
linkRoleInternalFile,
linkRoleInternalFolder,
linkRoleUploaderFolder,
LinkShareRoles,
ShareRole
} from '@ownclouders/web-client/src/helpers/share'
import { computed, defineComponent, inject, PropType, Ref } from 'vue'
import { computed, defineComponent, inject, PropType, Ref, ref } from 'vue'
import { formatDateFromDateTime, formatRelativeDateFromDateTime } from '@ownclouders/web-pkg'
import { Resource, SpaceResource } from '@ownclouders/web-client/src/helpers'
import { createFileRouteOptions } from '@ownclouders/web-pkg'
Expand All @@ -217,6 +167,7 @@ import { useGettext } from 'vue3-gettext'

export default defineComponent({
name: 'DetailsAndEdit',
components: { LinkRoleDropdown },
props: {
availableRoleOptions: {
type: Array as PropType<ShareRole[]>,
Expand Down Expand Up @@ -253,22 +204,41 @@ export default defineComponent({
}
},
emits: ['removePublicLink', 'updateLink'],
setup(props) {
setup(props, { emit }) {
const { current } = useGettext()
const configurationManager = useConfigurationManager()
const passwordPolicyService = usePasswordPolicyService()

const currentLinkRole = ref<ShareRole>(
LinkShareRoles.getByBitmask(props.link.permissions, props.isFolderShare)
) as Ref<ShareRole>

const dateExpire = computed(() => {
return formatRelativeDateFromDateTime(
DateTime.fromISO(props.link.expiration).endOf('day'),
current
)
})

const updateLink = ({ link, onSuccess = () => {} }) => {
link = link || props.link
emit('updateLink', { link, onSuccess })
}
const updateSelectedRole = (role: ShareRole) => {
currentLinkRole.value = role
updateLink({
link: { ...props.link, permissions: role.bitmask(false) }
})
}

return {
space: inject<Ref<SpaceResource>>('space'),
resource: inject<Ref<Resource>>('resource'),
passwordPolicyService,
dateExpire,
updateLink,
updateSelectedRole,
currentLinkRole,
isRunningOnEos: computed(() => configurationManager.options.isRunningOnEos)
}
},
Expand All @@ -279,9 +249,7 @@ export default defineComponent({
},
computed: {
...mapGetters('runtime/spaces', ['spaces']),
currentLinkRole() {
return LinkShareRoles.getByBitmask(this.link.permissions, this.isFolderShare)
},

currentLinkRoleDescription() {
return this.currentLinkRole?.description(false) || ''
},
Expand Down Expand Up @@ -492,15 +460,6 @@ export default defineComponent({
'setModalConfirmButtonDisabled'
]),

isSelectedRole(role: ShareRole) {
return this.link.permissions === role.bitmask(false)
},
updateLink({ link, dropRef = undefined, onSuccess = () => {} }) {
link = link || this.link
dropRef = dropRef || this.$refs.editPublicLinkDropdown
dropRef.hide()
this.$emit('updateLink', { link, onSuccess })
},
deleteLink() {
this.$emit('removePublicLink', { link: this.link })
;(this.$refs.editPublicLinkDropdown as InstanceType<typeof OcDrop>).hide()
Expand Down Expand Up @@ -634,46 +593,6 @@ export default defineComponent({
justify-content: flex-end;
}

@media (max-width: $oc-breakpoint-medium-default) {
.edit-public-link-role-dropdown {
width: 100%;
}
}

@media (min-width: $oc-breakpoint-medium-default) {
.edit-public-link-role-dropdown {
width: 400px;
}
}

.role-dropdown-list span {
line-height: 1.3;
}

.role-dropdown-list li {
margin: var(--oc-space-xsmall) 0;

&:first-child {
margin-top: 0;
}

&:last-child {
margin-bottom: 0;
}

.oc-button {
text-align: left;
width: 100%;
gap: var(--oc-space-medium);

&:hover,
&:focus {
background-color: var(--oc-color-background-hover);
text-decoration: none;
}
}
}

.edit-public-link-dropdown-menu {
.action-menu-item {
width: 100%;
Expand Down
51 changes: 1 addition & 50 deletions ...iles/tests/unit/components/SideBar/Shares/Links/__snapshots__/DetailsAndEdit.spec.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,56 +3,7 @@
exports[`DetailsAndEdit component if user can edit renders dropdown and edit button 1`] = `
<div class="link-details oc-flex oc-flex-between oc-flex-middle" file="undefined">
<div>
<oc-button-stub appearance="raw" class="edit-public-link-role-dropdown-toggle oc-text-left" disabled="false" gapsize="none" id="edit-public-link-role-dropdown-toggle-undefined" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" variation="passive">
<span class="link-current-role">Anyone with the link can view</span>
<oc-icon-stub accessiblelabel="" color="" filltype="fill" name="arrow-down-s" size="medium" type="span" variation="passive"></oc-icon-stub>
</oc-button-stub>
<oc-drop-stub class="edit-public-link-role-dropdown" closeonclick="false" dropid="edit-public-link-role-dropdown" isnested="false" mode="click" offset="0" paddingsize="small" position="bottom-start" toggle="#edit-public-link-role-dropdown-toggle-undefined">
<oc-list-stub class="role-dropdown-list" raw="false">
<li>
<oc-button-stub appearance="raw" class="oc-p-s" disabled="false" gapsize="medium" id="files-role-internal" justifycontent="space-between" showspinner="false" size="medium" submit="button" type="button" variation="passive">
<span class="oc-flex oc-flex-middle">
<oc-icon-stub accessiblelabel="" class="oc-pl-s oc-pr-m" color="" filltype="fill" name="user" size="medium" type="span" variation="inherit"></oc-icon-stub>
<span>
<span class="oc-text-bold oc-display-block oc-width-1-1">Invited People</span>
<span class="oc-text-small">Link works only for invited people. Login is required.</span>
</span>
</span>
<span class="oc-flex">
<!--v-if-->
</span>
</oc-button-stub>
</li>
<li>
<oc-button-stub appearance="raw-inverse" class="selected oc-background-primary-gradient oc-p-s" disabled="false" gapsize="medium" id="files-role-viewer" justifycontent="space-between" showspinner="false" size="medium" submit="button" type="button" variation="primary">
<span class="oc-flex oc-flex-middle">
<oc-icon-stub accessiblelabel="" class="oc-pl-s oc-pr-m" color="" filltype="fill" name="eye" size="medium" type="span" variation="inherit"></oc-icon-stub>
<span>
<span class="oc-text-bold oc-display-block oc-width-1-1">Can view</span>
<span class="oc-text-small">Anyone with the link can view and download.</span>
</span>
</span>
<span class="oc-flex">
<oc-icon-stub accessiblelabel="" color="" filltype="fill" name="check" size="medium" type="span" variation="inherit"></oc-icon-stub>
</span>
</oc-button-stub>
</li>
<li>
<oc-button-stub appearance="raw" class="oc-p-s" disabled="false" gapsize="medium" id="files-role-editor" justifycontent="space-between" showspinner="false" size="medium" submit="button" type="button" variation="passive">
<span class="oc-flex oc-flex-middle">
<oc-icon-stub accessiblelabel="" class="oc-pl-s oc-pr-m" color="" filltype="fill" name="pencil" size="medium" type="span" variation="inherit"></oc-icon-stub>
<span>
<span class="oc-text-bold oc-display-block oc-width-1-1">Can edit</span>
<span class="oc-text-small">Anyone with the link can view, download and edit.</span>
</span>
</span>
<span class="oc-flex">
<!--v-if-->
</span>
</oc-button-stub>
</li>
</oc-list-stub>
</oc-drop-stub>
<link-role-dropdown-stub availableroleoptions="[object Object],[object Object],[object Object]" dropoffset="0" modelvalue="[object Object]"></link-role-dropdown-stub>
</div>
<!--v-if-->
<div class="details-buttons">
Expand Down
Loading