diff --git a/package-lock.json b/package-lock.json index b6eeed67..6f3c9515 100644 --- a/package-lock.json +++ b/package-lock.json @@ -21,6 +21,7 @@ "remark": "^15.0.1", "strip-markdown": "^6.0.0", "vue": "^2.7.16", + "vue-material-design-icons": "^5.3.0", "vuex": "^3.6.2" }, "devDependencies": { @@ -14739,6 +14740,12 @@ } } }, + "node_modules/vue-material-design-icons": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/vue-material-design-icons/-/vue-material-design-icons-5.3.0.tgz", + "integrity": "sha512-wnbRh+48RwX/Gt+iqwCSdWpm0hPBwwv9F7MSouUzZ2PsphYVMJB9KkG9iGs+tgBiT57ZiurFEK07Y/rFKx+Ekg==", + "license": "MIT" + }, "node_modules/vue-router": { "version": "3.6.5", "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.6.5.tgz", @@ -26015,6 +26022,11 @@ "vue-style-loader": "^4.1.0" } }, + "vue-material-design-icons": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/vue-material-design-icons/-/vue-material-design-icons-5.3.0.tgz", + "integrity": "sha512-wnbRh+48RwX/Gt+iqwCSdWpm0hPBwwv9F7MSouUzZ2PsphYVMJB9KkG9iGs+tgBiT57ZiurFEK07Y/rFKx+Ekg==" + }, "vue-router": { "version": "3.6.5", "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.6.5.tgz", diff --git a/package.json b/package.json index 84ad7ad8..fa72b3e1 100644 --- a/package.json +++ b/package.json @@ -33,6 +33,7 @@ "remark": "^15.0.1", "strip-markdown": "^6.0.0", "vue": "^2.7.16", + "vue-material-design-icons": "^5.3.0", "vuex": "^3.6.2" }, "devDependencies": { diff --git a/src/Components/NewForm.vue b/src/Components/NewForm.vue index 66977dfe..1b7bf892 100644 --- a/src/Components/NewForm.vue +++ b/src/Components/NewForm.vue @@ -35,31 +35,6 @@ rows="4" :placeholder="t('announcementcenter', 'Write announcement text, Markdown can be used …')" /> -
- - {{ t('announcementcenter', 'Schedule announcement time (optional)') }} - - -
-
- - {{ t('announcementcenter', 'Schedule deletion time (optional)') }} - - -
-
- - {{ t('announcementcenter', 'Everyone') }} - {{ t('announcementcenter', 'Create activities') }} @@ -96,6 +59,46 @@ :checked.sync="allowComments"> {{ t('announcementcenter', 'Allow comments') }} + + + {{ t('announcementcenter', 'Everyone') }} + + + + + + + + +
@@ -105,8 +108,7 @@ import NcActions from '@nextcloud/vue/dist/Components/NcActions.js' import NcActionCheckbox from '@nextcloud/vue/dist/Components/NcActionCheckbox.js' import NcActionInput from '@nextcloud/vue/dist/Components/NcActionInput.js' -import NcDateTimePicker from '@nextcloud/vue/dist/Components/NcDateTimePicker.js' -import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js' +import NcActionSeparator from '@nextcloud/vue/dist/Components/NcActionSeparator.js' import NcButton from '@nextcloud/vue/dist/Components/NcButton.js' import debounce from 'debounce' import { loadState } from '@nextcloud/initial-state' @@ -117,16 +119,19 @@ import { import { showError } from '@nextcloud/dialogs' import { remark } from 'remark' import strip from 'strip-markdown' +import ClockStart from 'vue-material-design-icons/ClockStart.vue' +import ClockEnd from 'vue-material-design-icons/ClockEnd.vue' export default { name: 'NewForm', components: { + ClockEnd, + ClockStart, NcActions, NcActionCheckbox, NcActionInput, - NcDateTimePicker, - NcCheckboxRadioSwitch, + NcActionSeparator, NcButton, }, @@ -140,8 +145,8 @@ export default { allowComments: loadState('announcementcenter', 'allowComments'), groups: [], groupOptions: [], - scheduleEnabled: false, - deleteEnabled: false, + scheduleEnabled: true, + deleteEnabled: true, scheduleTime: null, deleteTime: null, } @@ -160,26 +165,36 @@ export default { this.sendEmails = loadState('announcementcenter', 'sendEmails') this.allowComments = loadState('announcementcenter', 'allowComments') this.groups = [] - this.scheduleEnabled = false - this.deleteEnabled = false + this.scheduleEnabled = true + this.deleteEnabled = true this.scheduleTime = null this.deleteTime = null }, - disabledInPastDate(date) { - const today = new Date() - today.setHours(0, 0, 0, 0) - return date < today + onSearchChanged: debounce(function(search) { + this.searchGroups(search) + }, 300), + + setScheduleTime(event) { + this.scheduleTime = new Date(event.target.value) + if (this.deleteTime && this.scheduleTime > this.deleteTime) { + this.deleteTime = this.scheduleTime + } }, - disabledInPastTime(date) { - const today = new Date() - return date < today + setDeleteTime(event) { + this.deleteTime = new Date(event.target.value) + if (this.scheduleTime && this.scheduleTime > this.deleteTime) { + this.deleteTime = this.scheduleTime + } }, - onSearchChanged: debounce(function(search) { - this.searchGroups(search) - }, 300), + getMinDeleteTime() { + if (this.scheduleTime) { + return this.scheduleTime + } + return new Date() + }, async searchGroups(search) { const response = await searchGroups(search) @@ -249,10 +264,8 @@ export default { } } - &__delete, - &__schedule { - display: flex; - justify-content: space-between; + &__timepicker { + width: 100%; } }