diff --git a/package.json b/package.json index a20dc22403c..adbbec2cbf1 100644 --- a/package.json +++ b/package.json @@ -127,5 +127,8 @@ }, "engines": { "node": ">=14 <=16" + }, + "dependencies": { + "v-calendar": "^2.3.2" } } diff --git a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/CollaboratorsEditOptions.vue b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/CollaboratorsEditOptions.vue index a0832d14218..71fad8fd66f 100644 --- a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/CollaboratorsEditOptions.vue +++ b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/CollaboratorsEditOptions.vue @@ -6,6 +6,7 @@ appearance="raw" justify-content="left" gap-size="xsmall" + class="oc-mr-s" > Invite with custom permissions +
-
-
- -
-
-
-
@@ -75,6 +85,7 @@ import { mapGetters } from 'vuex' import { DateTime } from 'luxon' import get from 'lodash-es/get' +import DatePicker from 'v-calendar/lib/components/date-picker.umd' import collaboratorsMixins from '../../../../mixins/collaborators' @@ -86,7 +97,8 @@ export default { components: { RoleItem, - AdditionalPermissions + AdditionalPermissions, + DatePicker }, mixins: [collaboratorsMixins], @@ -140,13 +152,6 @@ export default { return this.selectedRole && this.selectedRole.additionalPermissions }, - datePickerLabel() { - if (this.expirationDateEnforced) { - return this.$gettext('Expiration date (required)') - } - return this.$gettext('Expiration date') - }, - expirationSupported() { return this.userExpirationDate && this.groupExpirationDate }, @@ -178,35 +183,23 @@ export default { const userMaxExpirationDays = parseInt(this.userExpirationDate.days, 10) const groupMaxExpirationDays = parseInt(this.groupExpirationDate.days, 10) - - if (this.editingUser) { - return DateTime.now() - .plus({ days: userMaxExpirationDays }) - .endOf('day') - .toISO() - } - - if (this.editingGroup) { - return DateTime.now() - .plus({ days: groupMaxExpirationDays }) - .endOf('day') - .toISO() - } - - // Since we are not separating process for adding users and groups as collaborators - // we are using the one which is smaller as enforced date let days = 0 - if (userMaxExpirationDays && groupMaxExpirationDays) { + if (this.editingUser) { + days = userMaxExpirationDays + } else if (this.editingGroup) { + days = groupMaxExpirationDays + } else if (userMaxExpirationDays && groupMaxExpirationDays) { days = Math.min(userMaxExpirationDays, groupMaxExpirationDays) } else { days = userMaxExpirationDays || groupMaxExpirationDays } - return DateTime.now() - .plus({ days }) - .endOf('day') - .toISO() + const date = new Date() + + date.setDate(new Date().getDate() + days) + + return date }, expirationDateEnforced() { @@ -230,22 +223,11 @@ export default { }, minExpirationDate() { - return DateTime.now() - .plus({ days: 1 }) - .endOf('day') - .toISO() - }, - - expirationDatePlaceholder() { - return this.$gettext('Expiration date') - }, + const date = new Date() - expirationDateRemoveTooltip() { - return this.$gettext('Remove expiration date') - }, + date.setDate(new Date().getDate() + 1) - canResetExpirationDate() { - return !this.expirationDateEnforced && this.enteredExpirationDate + return date }, isAdvancedRoleSelected() { @@ -254,12 +236,23 @@ export default { rolesListAriaLabel() { return this.$gettext('Sharing roles') + }, + + relativeExpirationDate() { + return DateTime.fromJSDate(this.enteredExpirationDate) + .setLocale(this.$language.current) + .endOf('day') + .toRelative() } }, watch: { selectedRole: { handler: 'publishChange' + }, + + enteredExpirationDate: { + handler: 'publishChange' } }, @@ -283,12 +276,7 @@ export default { mounted() { if (this.expirationSupported) { if (this.editingUser || this.editingGroup) { - // FIXME: Datepicker is not displaying correct timezone so for now we add it manually this.enteredExpirationDate = this.expirationDate - ? DateTime.fromJSDate(this.expirationDate) - .plus({ minutes: DateTime.now().offset }) - .toISO() - : null } else { this.enteredExpirationDate = this.defaultExpirationDate } @@ -303,23 +291,13 @@ export default { this.publishChange() }, - setExpirationDate(date) { - // Expiration date picker is emitting empty string when the component is initialised - // This ensures it will be null as we treat it everywhere in that way - this.enteredExpirationDate = date === '' ? null : date - this.publishChange() - }, - - resetExpirationDate() { - this.enteredExpirationDate = null - this.publishChange() - }, - publishChange() { this.$emit('optionChange', { role: this.selectedRole, permissions: this.additionalPermissions, - expirationDate: this.enteredExpirationDate + expirationDate: DateTime.fromJSDate(this.enteredExpirationDate) + .endOf('day') + .toISO() }) }, @@ -392,6 +370,10 @@ export default { // the next active role index is greater than 0 // the next active role index is less than the amount of all available role selects activateRoleSelect(activeRoleSelectIndex + (isArrowUp ? -1 : 1)) + }, + + disabledExpirationDates(date) { + return date < this.minExpirationDate || date > this.maxExpirationDate } } } @@ -430,4 +412,9 @@ export default { } } } + +.files-recipient-expiration-datepicker::v-deep .vc-highlight { + // !important to overwrite the inline style + background-color: var(--oc-color-swatch-primary-default) !important; +} diff --git a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/EditCollaborator.vue b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/EditCollaborator.vue index b33f260eb42..742aeb94c4d 100644 --- a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/EditCollaborator.vue +++ b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/EditCollaborator.vue @@ -25,7 +25,11 @@ > {{ collaborator.owner.displayName }}

- +