+
-
-
-
-
-
-
+
+
+
-
+ Daily
+
+
+ From Monday to Friday (results from
+ previous day)
+
+
+
-
-
- Daily
-
-
- From Monday to Friday (results from
- previous day)
-
-
-
+
-
- Weekly
-
-
- Every Monday (results from previous
- week)
-
-
-
-
-
-
+
Update email results based on your current
@@ -222,7 +213,8 @@
type="primary"
class="btn btn--md btn--primary"
:loading="loadingUpdateSettings"
- @click="doSubmit(formRef)"
+ :disabled="$v.$invalid || !hasFormChanged"
+ @click="doSubmit()"
>Update
@@ -248,6 +240,10 @@ import {
} from '@/shared/vuex/vuex.helpers'
import Message from '@/shared/message/message'
import platformOptions from '@/premium/eagle-eye/constants/eagle-eye-platforms.json'
+import { email, required } from '@vuelidate/validators'
+import useVuelidate from '@vuelidate/core'
+import AppFormItem from '@/shared/form/form-item.vue'
+import formChangeDetector from '@/shared/form/form-change'
const props = defineProps({
modelValue: {
@@ -263,36 +259,24 @@ const { loadingUpdateSettings } = mapState('eagleEye')
const emit = defineEmits(['update:modelValue'])
const rules = {
- email: [
- {
- required: true,
- message: 'This field is required',
- trigger: 'blur'
- }
- ],
- frequency: [
- {
- required: true,
- message: 'This field is required',
- trigger: 'blur'
- }
- ],
- time: [
- {
- required: true,
- message: 'This field is required',
- trigger: 'blur'
- }
- ]
+ email: {
+ required,
+ email
+ }
}
-const model = reactive({
+const form = reactive({
+ active: false,
+ email: '',
frequency: 'daily',
time: '09:00',
updateResults: true
})
+const { hasFormChanged, formSnapshot } =
+ formChangeDetector(form)
+
+const $v = useVuelidate(rules, form)
-const active = ref(false)
const formRef = ref()
const drawerModel = computed({
@@ -307,7 +291,7 @@ const drawerModel = computed({
const feed = ref(null)
const results = computed(() => {
- if (!model.updateResults) {
+ if (!form.updateResults) {
if (currentUser.value && feed.value) {
return feed.value
}
@@ -316,7 +300,7 @@ const results = computed(() => {
})
const displayFeedWarning = computed(() => {
- if (model.updateResults) {
+ if (form.updateResults) {
return false
}
if (
@@ -348,40 +332,40 @@ const updateFeed = () => {
const fillForm = (user) => {
const { eagleEyeSettings } = user
- active.value = eagleEyeSettings.emailDigestActive || false
- model.email =
+ form.active = eagleEyeSettings.emailDigestActive || false
+ form.email =
eagleEyeSettings.emailDigest?.email || user.email
- model.frequency =
+ form.frequency =
eagleEyeSettings.emailDigest?.frequency || 'daily'
- model.time = eagleEyeSettings.emailDigest?.time || '09:00'
- model.updateResults = !eagleEyeSettings.emailDigest
+ form.time = eagleEyeSettings.emailDigest?.time || '09:00'
+ form.updateResults = !eagleEyeSettings.emailDigest
? true
: eagleEyeSettings.emailDigest?.matchFeedSettings
feed.value = user.eagleEyeSettings.emailDigest.feed
+
+ formSnapshot()
}
-const doSubmit = async (formEl) => {
- if (!formEl) return
- await formEl.validate((valid) => {
- if (valid) {
- const data = {
- email: model.email,
- frequency: model.frequency,
- time: model.time,
- matchFeedSettings: model.updateResults,
- feed: !model.updateResults ? feed.value : undefined
- }
- doUpdateSettings({
- ...currentUser.value.eagleEyeSettings,
- emailDigestActive: active.value,
- emailDigest: data
- }).then(() => {
- Message.success(
- 'Email Digest settings successfully updated'
- )
- emit('update:modelValue', false)
- })
+const doSubmit = async () => {
+ $v.value.$touch()
+ if (!$v.value.$invalid) {
+ const data = {
+ email: form.email,
+ frequency: form.frequency,
+ time: form.time,
+ matchFeedSettings: form.updateResults,
+ feed: !form.updateResults ? feed.value : undefined
}
- })
+ doUpdateSettings({
+ ...currentUser.value.eagleEyeSettings,
+ emailDigestActive: form.active,
+ emailDigest: data
+ }).then(() => {
+ Message.success(
+ 'Email Digest settings successfully updated'
+ )
+ emit('update:modelValue', false)
+ })
+ }
}
const handleCancel = () => {
diff --git a/frontend/src/premium/eagle-eye/components/list/eagle-eye-settings-drawer.vue b/frontend/src/premium/eagle-eye/components/list/eagle-eye-settings-drawer.vue
index 83db052560..a44b7dd21d 100644
--- a/frontend/src/premium/eagle-eye/components/list/eagle-eye-settings-drawer.vue
+++ b/frontend/src/premium/eagle-eye/components/list/eagle-eye-settings-drawer.vue
@@ -6,7 +6,7 @@
Keywords
-
+
*
-
-
-
-
-
-
+
-
-
-
- Semantic match
-
-
- Results semantically related
-
-
-
-
- Exact match
-
-
- Results containing the keyword
-
-
-
-
-
-
-
+
Date published
-
+
@@ -156,9 +101,12 @@
+
+ For better results, we recommend choosing at
+ least 3 platforms.
+
@@ -172,12 +120,11 @@
@click="emit('update:modelValue', false)"
>Cancel
-
Update
@@ -187,7 +134,6 @@
diff --git a/frontend/src/premium/eagle-eye/components/onboard/eagle-eye-platforms-step.vue b/frontend/src/premium/eagle-eye/components/onboard/eagle-eye-platforms-step.vue
index b06138f996..e7e08b4fbb 100644
--- a/frontend/src/premium/eagle-eye/components/onboard/eagle-eye-platforms-step.vue
+++ b/frontend/src/premium/eagle-eye/components/onboard/eagle-eye-platforms-step.vue
@@ -20,12 +20,16 @@
-
+
Platforms
*
+
+ For better results, we recommend choosing at least 3
+ platforms.
+
{
+ a[b] = true
+ return a
+ }, {})
})
const headerContent = computed(() => {
diff --git a/frontend/src/shared/form/form-change.js b/frontend/src/shared/form/form-change.js
new file mode 100644
index 0000000000..b159178e9e
--- /dev/null
+++ b/frontend/src/shared/form/form-change.js
@@ -0,0 +1,19 @@
+import { ref, computed } from 'vue'
+
+export default function formChangeDetector(form) {
+ const temporaryForm = ref('')
+
+ function formSnapshot() {
+ temporaryForm.value = JSON.stringify(form)
+ }
+
+ const hasFormChanged = computed(() => {
+ return temporaryForm.value !== JSON.stringify(form)
+ })
+
+ return {
+ temporaryForm,
+ formSnapshot,
+ hasFormChanged
+ }
+}
diff --git a/frontend/src/shared/form/form-item.vue b/frontend/src/shared/form/form-item.vue
new file mode 100644
index 0000000000..ce6a022b26
--- /dev/null
+++ b/frontend/src/shared/form/form-item.vue
@@ -0,0 +1,84 @@
+
+
+
+
+
+
+