1 files changed, 107 insertions, 0 deletions
diff --git a/core/src/components/UnifiedSearch/CustomDateRangeModal.vue b/core/src/components/UnifiedSearch/CustomDateRangeModal.vue
new file mode 100644
index 00000000000..d86192d156e
--- /dev/null
+++ b/core/src/components/UnifiedSearch/CustomDateRangeModal.vue
@@ -0,0 +1,107 @@
+<!--
+ - SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors
+ - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+<template>
+	<NcModal v-if="isModalOpen"
+		id="unified-search"
+		:name="t('core', 'Custom date range')"
+		:show.sync="isModalOpen"
+		:size="'small'"
+		:clear-view-delay="0"
+		:title="t('core', 'Custom date range')"
+		@close="closeModal">
+		<!-- Custom date range -->
+		<div class="unified-search-custom-date-modal">
+			<h1>{{ t('core', 'Custom date range') }}</h1>
+			<div class="unified-search-custom-date-modal__pickers">
+				<NcDateTimePicker :id="'unifiedsearch-custom-date-range-start'"
+					v-model="dateFilter.startFrom"
+					:label="t('core', 'Pick start date')"
+					type="date" />
+				<NcDateTimePicker :id="'unifiedsearch-custom-date-range-end'"
+					v-model="dateFilter.endAt"
+					:label="t('core', 'Pick end date')"
+					type="date" />
+			</div>
+			<div class="unified-search-custom-date-modal__footer">
+				<NcButton @click="applyCustomRange">
+					{{ t('core', 'Search in date range') }}
+					<template #icon>
+						<CalendarRangeIcon :size="20" />
+					</template>
+				</NcButton>
+			</div>
+		</div>
+	</NcModal>
+</template>
+
+<script>
+import NcButton from '@nextcloud/vue/components/NcButton'
+import NcDateTimePicker from '@nextcloud/vue/components/NcDateTimePickerNative'
+import NcModal from '@nextcloud/vue/components/NcModal'
+import CalendarRangeIcon from 'vue-material-design-icons/CalendarRange.vue'
+
+export default {
+	name: 'CustomDateRangeModal',
+	components: {
+		NcButton,
+		NcModal,
+		CalendarRangeIcon,
+		NcDateTimePicker,
+	},
+	props: {
+		isOpen: {
+			type: Boolean,
+			required: true,
+		},
+	},
+	data() {
+		return {
+			dateFilter: { startFrom: null, endAt: null },
+		}
+	},
+	computed: {
+		isModalOpen: {
+			get() {
+				return this.isOpen
+			},
+			set(value) {
+				this.$emit('update:is-open', value)
+			},
+		},
+	},
+	methods: {
+		closeModal() {
+			this.isModalOpen = false
+		},
+		applyCustomRange() {
+			this.$emit('set:custom-date-range', this.dateFilter)
+			this.closeModal()
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+.unified-search-custom-date-modal {
+	padding: 10px 20px 10px 20px;
+
+	h1 {
+		font-size: 16px;
+		font-weight: bolder;
+		line-height: 2em;
+	}
+
+	&__pickers {
+		display: flex;
+		flex-direction: column;
+	}
+
+	&__footer {
+		display: flex;
+		justify-content: end;
+	}
+
+}
+</style>