מסך העדפות משתמש

Author: ShlomoCode

src/components/AppBar.vue

@@ -9,6 +9,9 @@
     <v-spacer></v-spacer>
     <v-btn v-if="isLoggedIn && !isVerified" :to="{ name: 'VerifyPage' }">אימות דוא"ל</v-btn>
     <template v-if="isLoggedIn && isVerified">
+      <v-btn :to="{ name: 'SettingsPage' }">
+        <v-icon>mdi-cog</v-icon>
+      </v-btn>
       <v-btn :to="{ name: 'UnreadPage' }">
         <v-icon>
           mdi-inbox-full

src/components/ConfirmLeavePageDialog.vue

@@ -0,0 +1,40 @@
+<template>
+    <v-dialog max-width="500px">
+        <v-card>
+            <v-card-title>
+                יש לך שינויים שלא נשמרו!
+            </v-card-title>
+            <v-card-text>
+                האם אתה בטוח שברצונך לצאת מהדף?
+            </v-card-text>
+            <v-card-actions>
+                <v-spacer></v-spacer>
+                <v-btn color="black" variant="text" @click="emit('cancel')">
+                    ביטול
+                </v-btn>
+                <v-btn color="green-darken-1" variant="text" @click="leavePage()">
+                    כן, צא
+                </v-btn>
+            </v-card-actions>
+        </v-card>
+    </v-dialog>
+</template>
+
+<script setup>
+import { toRefs } from 'vue';
+import { useRouter } from 'vue-router';
+
+const $router = useRouter()
+const props = defineProps({
+    leaveTo: {
+        type: [null, Object]
+    }
+})
+const { leaveTo } = toRefs(props)
+const emit = defineEmits(['ok', 'cancel'])
+
+function leavePage () {
+    $router.push(leaveTo.value)
+    emit('ok')
+}
+</script>

src/components/SettingsForm.vue

@@ -0,0 +1,45 @@
+<template>
+    <v-form @submit.prevent="emit('save')">
+        <v-card :width="width < 400 ? 350 : 400" class="mx-auto mt-3 mb-3">
+            <v-card-title class="text-h5">
+                העדפות התראות
+            </v-card-title>
+            <v-switch v-model="settings.enableEmailNotifications" label="קבלת מאמרים ממקורות במעקב ישירות למייל" class="mx-5" color="green" />
+            <v-switch v-model="settings.allowAttachmentsInEmail" label="אפשר שליחת תמונת מאמר כקובץ מצורף" class="mx-5" color="green" />
+            <v-divider></v-divider>
+            <v-card-actions>
+                <v-spacer></v-spacer>
+                <v-btn color="green" :variant="props.hasChanges ? 'outlined' : 'text'" type="submit" :loading="props.loadingSaveSettings">
+                    שמירה
+                </v-btn>
+            </v-card-actions>
+        </v-card>
+    </v-form>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue';
+import { useDisplay } from 'vuetify';
+
+const { width } = useDisplay();
+const props = defineProps({
+    initialSettings: {
+        type: Object,
+        required: true
+    },
+    loadingSaveSettings: {
+        type: Boolean,
+        required: true,
+    },
+    hasChanges: {
+        type: Boolean,
+        required: true
+    }
+})
+const settings = ref({ ...props.initialSettings })
+const emit = defineEmits(['changeSettings', 'save'])
+
+watch(settings, (newSettings) => {
+    emit('changeSettings', newSettings);
+}, { deep: true })
+</script>

src/components/TheSettings.vue

@@ -0,0 +1,59 @@
+<template>
+    <ConfirmLeavePageDialog @cancel="() => { showConfirmLeaveDialog = false; leaveTo = null }"
+        @ok="() => { showConfirmLeaveDialog = false; skipConfirmLeavePageDialog = true }"
+        v-model="showConfirmLeaveDialog" :leaveTo="leaveTo" />
+    <SettingsForm v-bind="{ initialSettings, loadingSaveSettings, hasChanges }" @changeSettings="settings = $event" @save="saveSettings" />
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+import ConfirmLeavePageDialog from './ConfirmLeavePageDialog.vue'
+import SettingsForm from './SettingsForm.vue'
+import { onBeforeRouteLeave } from 'vue-router'
+import axios from '@/services/axios'
+import { useSnacksStore } from '@/stores/snacks'
+
+const snacksStore = useSnacksStore()
+const initialSettings = ref({});
+await axios.get('/users/settings').then(({ data }) => {
+    initialSettings.value = data;
+})
+
+const settings = ref({ ...initialSettings.value });
+const showConfirmLeaveDialog = ref(false);
+const leaveTo = ref(null);
+const skipConfirmLeavePageDialog = ref(false);
+const loadingSaveSettings = ref(false);
+
+const hasChanges = computed(() => {
+    return JSON.stringify(initialSettings.value) !== JSON.stringify(settings.value);
+})
+
+onBeforeRouteLeave(to => {
+    if (!hasChanges.value || skipConfirmLeavePageDialog.value) {
+        return true
+    }
+    showConfirmLeaveDialog.value = true
+    leaveTo.value = to
+    return false
+});
+
+async function saveSettings () {
+    loadingSaveSettings.value = true
+    try {
+        await axios.put('/users/settings', { ...settings.value });
+        initialSettings.value = { ...settings.value }
+        snacksStore.addSnack({
+            text: '⚙️ ההעדפות שלך נשמרו בהצלחה',
+            color: 'success'
+        })
+    } catch (err) {
+        snacksStore.addSnack({
+            text: err.message,
+            color: 'error'
+        })
+    } finally {
+        loadingSaveSettings.value = false
+    }
+}
+</script>

src/router/index.js

@@ -10,6 +10,7 @@ import TagView from '@/views/TagPage.vue'
 import ForgotPasswordView from '@/views/ForgotPasswordPage.vue'
 import UnreadView from '@/views/UnreadPage.vue'
 import TagsView from '@/views/TagsPage.vue'
+import SettingsView from '@/views/SettingsPage.vue'
 
 import { useUserStore } from '@/stores/user'
 import { useSnacksStore } from '@/stores/snacks'
@@ -70,6 +71,16 @@ const router = createRouter({
         nextRoute: route.query.next
       }),
     },
+    {
+      path: '/settings',
+      name: 'SettingsPage',
+      component: SettingsView,
+      meta: {
+        viewName: 'הגדרות',
+        requiresLogin: true,
+        requiresVerification: true,
+      },
+    },
     {
       path: '/subscriptions',
       name: 'SubscriptionsPage',

src/views/SettingsPage.vue

@@ -0,0 +1,14 @@
+<template>
+    <Suspense>
+        <template #default>
+            <TheSettings />
+        </template>
+        <template #fallback>
+            <v-progress-linear indeterminate color="green" />
+        </template>
+    </Suspense>
+</template>
+
+<script setup>
+import TheSettings from '@/components/TheSettings.vue'
+</script>