Skip to content

Commit

Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: move expiration date to a drop
Browse files Browse the repository at this point in the history
LukasHirt committed Sep 19, 2021
1 parent a2e0215 commit 0579eca
Showing 4 changed files with 103 additions and 89 deletions.
3 changes: 3 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
@@ -127,5 +127,8 @@
},
"engines": {
"node": ">=14 <=16"
},
"dependencies": {
"v-calendar": "^2.3.2"
}
}
Original file line number Diff line number Diff line change
@@ -6,6 +6,7 @@
appearance="raw"
justify-content="left"
gap-size="xsmall"
class="oc-mr-s"
>
<translate v-if="isAdvancedRoleSelected" key="advanced-permissions-select"
>Invite with custom permissions</translate
@@ -34,6 +35,37 @@
</oc-list>
</template>
</oc-drop>
<template v-if="expirationSupported">
<date-picker
v-model="enteredExpirationDate"
:min-date="minExpirationDate"
:max-date="maxExpirationDate"
:locale="$language.current"
class="files-recipient-expiration-datepicker"
>
<template #default="{ togglePopover }">
<oc-button
id="files-collaborators-expiration-button"
appearance="raw"
justify-content="left"
gap-size="xsmall"
@click="togglePopover"
>
<translate v-if="!enteredExpirationDate" key="no-expiration-date-label"
>Set expiration date</translate
>
<translate
v-else
key="set-expiration-date-label"
:translate-params="{ expires: relativeExpirationDate }"
>
Expires %{expires}
</translate>
<oc-icon name="expand_more" />
</oc-button>
</template>
</date-picker>
</template>
<template v-if="$_ocCollaborators_hasAdditionalPermissions">
<label v-if="!isAdvancedRoleSelected" class="oc-label oc-mt-s">
<translate>Additional permissions</translate>
@@ -46,35 +78,14 @@
/>
</template>
<hr />
<div v-if="expirationSupported" class="oc-mt-m">
<div class="uk-position-relative">
<oc-datepicker
id="files-collaborators-collaborator-expiration-input"
:key="`collaborator-datepicker-${enteredExpirationDate}`"
:date="enteredExpirationDate"
:max-datetime="maxExpirationDate"
:min-datetime="minExpirationDate"
:label="datePickerLabel"
@input="setExpirationDate"
/>
<div
v-if="canResetExpirationDate"
id="files-collaborators-collaborator-expiration-delete"
v-oc-tooltip="expirationDateRemoveTooltip"
class="uk-position-small uk-position-center-right oc-cursor-pointer"
uk-close
@click="resetExpirationDate"
/>
</div>
<hr />
</div>
</div>
</template>

<script>
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;
}
</style>
Original file line number Diff line number Diff line change
@@ -25,7 +25,11 @@
>
<oc-icon name="repeat" class="oc-mr-s" /> {{ collaborator.owner.displayName }}
</p>
<collaborator class="uk-width-expand" :collaborator="collaborator" :first-column="false" />
<collaborator
class="uk-width-expand oc-mb"
:collaborator="collaborator"
:first-column="false"
/>
<collaborators-edit-options
:existing-role="$_originalRole"
:collaborators-permissions="$_originalPermissions"
@@ -153,10 +157,10 @@ export default {
}
// FIXME: Datepicker is not displaying correct timezone so for now we add it manually
const originalExpirationDate = this.originalExpirationDate
? DateTime.fromJSDate(this.originalExpirationDate)
.plus({ minutes: DateTime.now().offset })
.toISO()
: null
// ? DateTime.fromJSDate(this.originalExpirationDate)
// .plus({ minutes: DateTime.now().offset })
// .toISO()
// : null
const exactExpirationDate = DateTime.fromISO(this.expirationDate).ts
const exactOriginalExpirationDate = DateTime.fromISO(originalExpirationDate).ts
20 changes: 20 additions & 0 deletions yarn.lock
Original file line number Diff line number Diff line change
@@ -4149,6 +4149,16 @@ data-urls@^2.0.0:
whatwg-mimetype "^2.3.0"
whatwg-url "^8.0.0"

date-fns-tz@^1.1.4:
version "1.1.6"
resolved "https://registry.yarnpkg.com/date-fns-tz/-/date-fns-tz-1.1.6.tgz#93cbf354e2aeb2cd312ffa32e462c1943cf20a8e"
integrity sha512-nyy+URfFI3KUY7udEJozcoftju+KduaqkVfwyTIE0traBiVye09QnyWKLZK7drRr5h9B7sPJITmQnS3U6YOdQg==

date-fns@^2.22.1:
version "2.23.0"
resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.23.0.tgz#4e886c941659af0cf7b30fafdd1eaa37e88788a9"
integrity sha512-5ycpauovVyAk0kXNZz6ZoB9AYMZB4DObse7P3BPWmyEjXNORTI8EJ6X0uaSAq4sCHzM1uajzrkr6HnsLQpxGXA==

de-indent@^1.0.2:
version "1.0.2"
resolved "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz"
@@ -11652,6 +11662,16 @@ uuid@^3.3.2, uuid@^3.3.3:
resolved "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz"
integrity sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==

v-calendar@^2.3.2:
version "2.3.2"
resolved "https://registry.yarnpkg.com/v-calendar/-/v-calendar-2.3.2.tgz#bc45d1258001d6a061ad942eedacad39209604c1"
integrity sha512-F/gS1EiMUVf8yPPdUxvgPgq+rQ8cNlXoQHn0nzx36dHmyjd3SybPpzMnlQ9P4lzv8Fni1kSTvonDUS2gYYenkA==
dependencies:
core-js "^3.15.2"
date-fns "^2.22.1"
date-fns-tz "^1.1.4"
lodash "^4.17.21"

v8-compile-cache@^2.0.3:
version "2.3.0"
resolved "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz"

0 comments on commit 0579eca

Please sign in to comment.