Add notification settings UI on settings page #326

config/locale.php

@@ -36,12 +36,22 @@
         'tr-TR' => 'Turkish (Turkey)',
     ],
 
+    /*
+    |--------------------------------------------------------------------------
+    | Route to File mapping
+    |--------------------------------------------------------------------------
+    |
+    | This settings determine which language file to load for a route.
+    | Route name as key and file name as value.
+    |
+    */
     'route_to_file' => [
         '/'                  => 'home',
         'projects/{project}' => 'project',
         'teams/{team}'       => 'project',
         'offices/{office}'   => 'project',
         'admin'              => 'admin',
         'users/{user}'       => 'user',
+        'settings'           => 'user',
     ],
 ];

public/mix-manifest.json

@@ -1,27 +1,29 @@
 {
     "/js/manifest.js": "/js/manifest.js?id=004313bac53cfe69b0f6",
-    "/js/vendor.js": "/js/vendor.js?id=35d68e33880fb857066a",
-    "/js/admin/index.js": "/js/admin/index.js?id=a54d3ee3296d9739adb7",
-    "/js/auth/login.js": "/js/auth/login.js?id=38cc8ca253f852c868a6",
-    "/css/main.css": "/css/main.css?id=c56fe41e827d4bb6e098",
-    "/js/auth/register.js": "/js/auth/register.js?id=4cd607e31ec98b4ea167",
-    "/js/errors/404.js": "/js/errors/404.js?id=69d0d268f46dcf719ec0",
-    "/js/home.js": "/js/home.js?id=63f21406b880db8d5ded",
-    "/js/offices/single.js": "/js/offices/single.js?id=24d2dbe6e2bc817101d9",
-    "/js/projects/single.js": "/js/projects/single.js?id=1ae6cc8b4ff7b66df3a3",
-    "/js/teams/single.js": "/js/teams/single.js?id=93f47581e4be33689644",
-    "/js/users/profile.js": "/js/users/profile.js?id=b72e07728c9b732a101f",
-    "/css/main.min.css": "/css/main.min.css?id=c56fe41e827d4bb6e098",
+    "/js/vendor.js": "/js/vendor.js?id=1983795cedc06cf177d7",
+    "/js/admin/index.js": "/js/admin/index.js?id=6299c13e4481257509bb",
+    "/js/auth/login.js": "/js/auth/login.js?id=587587ba0080725daab2",
+    "/css/main.css": "/css/main.css?id=c3c7fad5c113593e8d42",
+    "/js/auth/register.js": "/js/auth/register.js?id=a06294f91a3bb4233edf",
+    "/js/errors/404.js": "/js/errors/404.js?id=95d0e33f3efa323d8092",
+    "/js/home.js": "/js/home.js?id=2048969e9967a19ca3fe",
+    "/js/offices/single.js": "/js/offices/single.js?id=d1da0eb0d605dac12336",
+    "/js/projects/single.js": "/js/projects/single.js?id=a9052778432b592a8dd9",
+    "/js/teams/single.js": "/js/teams/single.js?id=b3e3fd2df220fbf60a9c",
+    "/js/users/profile.js": "/js/users/profile.js?id=ca4f13f4e0ffe09bb3cc",
+    "/js/users/settings.js": "/js/users/settings.js?id=b67c16558be0c336553d",
+    "/css/main.min.css": "/css/main.min.css?id=c3c7fad5c113593e8d42",
     "/css/editor.css": "/css/editor.css?id=416ddc3977523e1012ae",
     "/css/editor.min.css": "/css/editor.min.css?id=416ddc3977523e1012ae",
-    "/js/auth/login.min.js": "/js/auth/login.min.js?id=38cc8ca253f852c868a6",
-    "/js/auth/register.min.js": "/js/auth/register.min.js?id=4cd607e31ec98b4ea167",
-    "/js/errors/404.min.js": "/js/errors/404.min.js?id=69d0d268f46dcf719ec0",
-    "/js/projects/single.min.js": "/js/projects/single.min.js?id=1ae6cc8b4ff7b66df3a3",
-    "/js/teams/single.min.js": "/js/teams/single.min.js?id=93f47581e4be33689644",
-    "/js/offices/single.min.js": "/js/offices/single.min.js?id=24d2dbe6e2bc817101d9",
-    "/js/users/profile.min.js": "/js/users/profile.min.js?id=b72e07728c9b732a101f",
-    "/js/admin/index.min.js": "/js/admin/index.min.js?id=a54d3ee3296d9739adb7",
-    "/js/home.min.js": "/js/home.min.js?id=63f21406b880db8d5ded",
-    "/js/vendor.min.js": "/js/vendor.min.js?id=35d68e33880fb857066a"
+    "/js/auth/login.min.js": "/js/auth/login.min.js?id=587587ba0080725daab2",
+    "/js/auth/register.min.js": "/js/auth/register.min.js?id=a06294f91a3bb4233edf",
+    "/js/errors/404.min.js": "/js/errors/404.min.js?id=95d0e33f3efa323d8092",
+    "/js/projects/single.min.js": "/js/projects/single.min.js?id=a9052778432b592a8dd9",
+    "/js/teams/single.min.js": "/js/teams/single.min.js?id=b3e3fd2df220fbf60a9c",
+    "/js/offices/single.min.js": "/js/offices/single.min.js?id=d1da0eb0d605dac12336",
+    "/js/users/profile.min.js": "/js/users/profile.min.js?id=ca4f13f4e0ffe09bb3cc",
+    "/js/users/settings.min.js": "/js/users/settings.min.js?id=b67c16558be0c336553d",
+    "/js/admin/index.min.js": "/js/admin/index.min.js?id=6299c13e4481257509bb",
+    "/js/home.min.js": "/js/home.min.js?id=2048969e9967a19ca3fe",
+    "/js/vendor.min.js": "/js/vendor.min.js?id=1983795cedc06cf177d7"
 }

resources/assets/js/components/partials/messageBox.vue

@@ -6,14 +6,14 @@
     </div>
     <div class="flex flex-row">
       <div class="bg-blue-200">
-        <div class="overflow-auto overflow-y-scroll overflow-x-hidden h-70-vh">
+        <div class="overflow-auto overflow-y-scroll overflow-x-hidden h-70-vh w-16 lg:w-20 xxl:w-24">
           <div @click="selectUserMessage(user, index)"
             v-for="(user, index) in users"
             v-if="user.id !== authUser.id"
-            class="relative p-4"
+            class="relative p-2 lg:p-4"
             :class="{'bg-white': user.id === selectedUser.id, 'jelly bg-white': user.unread_messages_for_auth_user_count > 0}">
-            <img class="w-12 h-12 rounded-full cursor-pointer" :title="user.name" :src="generateUrl(user.avatar)">
-            <div :class="[user.online ? 'bg-teal-500' : 'bg-gray-500']" :title="[user.online ? 'online' : 'offline']" class="absolute w-4 h-4 rounded-full border-2 border-white mb-4 mr-4 right-0 bottom-0"></div>
+            <img class="w-10 lg:w-12 h-10 lg:h-12 rounded-full cursor-pointer" :title="user.name" :src="generateUrl(user.avatar)">
+            <div :class="[user.online ? 'bg-teal-500' : 'bg-gray-500']" :title="[user.online ? 'online' : 'offline']" class="absolute w-4 h-4 rounded-full border-2 border-white mb-2 mr-2 lg:mb-4 lg:mr-4 right-0 bottom-0"></div>
           </div>
         </div>
       </div>

resources/assets/js/components/partials/profileDropdown.vue

@@ -20,7 +20,7 @@
       </span>
       {{ 'Admin' | localize }}
     </a>
-    <a class="px-4 py-2 hover:bg-teal-500 hover:text-white text-gray-600 font-medium no-underline block" href="#">
+    <a v-if="authenticated" class="px-4 py-2 hover:bg-teal-500 hover:text-white text-gray-600 font-medium no-underline block" href="/settings">
       <span class="w-6 inline-block">
         <font-awesome-icon :icon="faCog" class="pr-1 font-regular"></font-awesome-icon>
       </span>
@@ -66,6 +66,7 @@ export default {
     profileUrl: navUrl.site + '/users/' + user.username,
     profileDropdownShown: false,
     impersonating: impersonating,
+    authenticated,
     faAngleDown,
     faCog,
     faShieldAlt,

resources/assets/js/components/users/settings.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="container mx-auto mt-8 px-4 md:px-0 w-full md:max-w-2xl lg:max-w-4xl xl:max-w-6xl text-gray-800">
+    <div class="bg-white rounded shadow-md">
+      <div class="text-center text-xl px-8 py-4">
+        Notification Settings
+      </div>
+      <div class="bg-indigo-100 p-8 rounded-b">
+        <div class="font-medium text-gray-700 pb-4">
+          Email Notifications
+        </div>
+        <div class="flex items-center py-1">
+          <div @click="" :class="[true ? 'bg-indigo-400 justify-end' : 'bg-gray-500 justify-start']" class="w-12 h-4 rounded-full flex flex-row items-center cursor-pointer mr-4" :title="[true ? 'Disable' : 'Enable']">
+            <div class="rounded-full shadow-lg w-6 h-6 bg-white"></div>
+          </div>
+          <div>
+            Send email on direct messages
+          </div>
+        </div>
+        <div class="flex items-center py-1">
+          <div @click="" :class="[false ? 'bg-indigo-400 justify-end' : 'bg-gray-500 justify-start']" class="w-12 h-4 rounded-full flex flex-row items-center cursor-pointer mr-4" :title="[false ? 'Disable' : 'Enable']">
+            <div class="rounded-full shadow-lg w-6 h-6 bg-white"></div>
+          </div>
+          <div>
+            Send email on mention in tasks, discussions and comments
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>

resources/assets/js/pages/users/settings.js

@@ -0,0 +1,14 @@
+import './../../bootstrap'
+import componentMixin from './../commonComponent'
+import settings from './../../components/users/settings.vue'
+import store from './../../store/settings'
+
+/* eslint-disable no-unused-vars */
+const app = new Vue({
+  el: '#app',
+  mixins: [componentMixin],
+  components: {
+    settings
+  },
+  store
+})

resources/assets/js/store/settings.js

@@ -0,0 +1,14 @@
+import Vuex from 'vuex'
+import notification from './modules/notification'
+
+window.Vue.use(Vuex)
+
+export default new Vuex.Store({
+  modules: {
+    notification
+  },
+
+  state: {
+    loading: false
+  }
+})

resources/views/users/settings.blade.php

@@ -0,0 +1,12 @@
+@component('layouts.app')
+
+@slot('title') User Settings @endslot
+
+<settings></settings>
+
+@slot('script')
+<script src="//{{ Request::getHost() }}:6001/socket.io/socket.io.js"></script>
+<script src="{{ mix('/js/users/settings.min.js') }}"></script>
+@endslot
+
+@endcomponent

routes/web.php

@@ -322,6 +322,14 @@
     Route::get('roles', 'RoleController@index');
 
     Route::get('activities', 'ActivityController@index');
+
+    /**********************************
+        Settings
+    **********************************/
+
+    Route::get('settings', function () {
+        return view('users.settings');
+    });
 });
 
     /**********************************

webpack.mix.js

@@ -22,6 +22,7 @@ mix.js('resources/assets/js/pages/auth/login.js', 'public/js/auth').minify('publ
   .js('resources/assets/js/pages/teams/single.js', 'public/js/teams').minify('public/js/teams/single.js')
   .js('resources/assets/js/pages/offices/single.js', 'public/js/offices').minify('public/js/offices/single.js')
   .js('resources/assets/js/pages/users/profile.js', 'public/js/users').minify('public/js/users/profile.js')
+  .js('resources/assets/js/pages/users/settings.js', 'public/js/users').minify('public/js/users/settings.js')
   .js('resources/assets/js/pages/admin/index.js', 'public/js/admin').minify('public/js/admin/index.js')
   .js('resources/assets/js/pages/home.js', 'public/js').minify('public/js/home.js')
   .extract(['vue', 'axios', 'luxon'])