Skip to content

Commit

Permalink
refactor: move link role dropdown to a re-usable component
Browse files Browse the repository at this point in the history
  • Loading branch information
@JammingBen
JammingBen committed Nov 28, 2023
1 parent cb4d481 commit d5d6061
Show file tree
Hide file tree
Showing 7 changed files with 233 additions and 168 deletions.
149 changes: 34 additions & 115 deletions packages/web-app-files/src/components/SideBar/Shares/Links/DetailsAndEdit.vue
View file
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"
/>
</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
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

0 comments on commit d5d6061

Please sign in to comment.