add time_interval feature in notification

app/Http/Controllers/NotificationController.php

@@ -42,8 +42,11 @@ class NotificationController extends Controller
 
     public function getUserMessage()
     {
+        $user_all_notification = Notification::Where("user_id",Auth::user()->id)->orderby('updated_at','desc')->get();
+
+
     	return response()->json([
-    		"message"			=>Notification::Where("user_id",Auth::user()->id)->orderby('updated_at','desc')->get(),
+    		"message"			=>$user_all_notification,
 			"unread_message"	=>Notification::Where([
     			["user_id",Auth::user()->id],
 				["is_read",0]
@@ -57,4 +60,6 @@ class NotificationController extends Controller
             ->update(array('is_read' => 1));
     	return response()->json("Read message", 200);
     }
+
+
 }

app/Notification.php

@@ -7,4 +7,71 @@ use Illuminate\Database\Eloquent\Model;
 class Notification extends Model
 {
     protected $fillable = ['detail','user_id','is_read'];
+    protected $appends = ['time_interval'];
+
+    public function getTimeIntervalAttribute()
+	{
+		$created_time = $this->created_at;
+
+		date_default_timezone_set('Asia/Kuala_Lumpur'); //Change as per your default time
+        $str = strtotime($created_time);
+        $today = strtotime(date('Y-m-d H:i:s'));
+
+        // It returns the time difference in Seconds...
+        $time_differnce = $today-$str;
+
+        // To Calculate the time difference in Years...
+        $years = 60*60*24*365;
+
+        // To Calculate the time difference in Months...
+        $months = 60*60*24*30;
+
+        // To Calculate the time difference in Days...
+        $days = 60*60*24;
+
+        // To Calculate the time difference in Hours...
+        $hours = 60*60;
+
+        // To Calculate the time difference in Minutes...
+        $minutes = 60;
+
+        if(intval($time_differnce/$years) > 1)
+        {
+            return intval($time_differnce/$years)." years ago";
+        }else if(intval($time_differnce/$years) > 0)
+        {
+            return intval($time_differnce/$years)." year ago";
+        }else if(intval($time_differnce/$months) > 1)
+        {
+            return intval($time_differnce/$months)." months ago";
+        }else if(intval(($time_differnce/$months)) > 0)
+        {
+            return intval(($time_differnce/$months))." month ago";
+        }else if(intval(($time_differnce/$days)) > 1)
+        {
+            return intval(($time_differnce/$days))." days ago";
+        }else if (intval(($time_differnce/$days)) > 0) 
+        {
+            return intval(($time_differnce/$days))." day ago";
+        }else if (intval(($time_differnce/$hours)) > 1) 
+        {
+            return intval(($time_differnce/$hours))." hours ago";
+        }else if (intval(($time_differnce/$hours)) > 0) 
+        {
+            return intval(($time_differnce/$hours))." hour ago";
+        }else if (intval(($time_differnce/$minutes)) > 1) 
+        {
+            return intval(($time_differnce/$minutes))." minutes ago";
+        }else if (intval(($time_differnce/$minutes)) > 0) 
+        {
+            return intval(($time_differnce/$minutes))." minute ago";
+        }else if (intval(($time_differnce)) > 1) 
+        {
+            return intval(($time_differnce))." seconds ago";
+        }else
+        {
+            return "few seconds ago";
+        }
+	}
+
 }

resources/assets/js/components/Navbar.vue

@@ -22,7 +22,7 @@
                 <el-button icon="el-icon-bell" circle></el-button>
               </el-badge>
               <el-dropdown-menu slot="dropdown" id="notification">
-                <span v-for="(item,index) in notification.message">
+                <div v-for="(item,index) in notification.message">
                   <a v-on:click.prevent='readNotification(item.id);navigateTo(item.link)'>
                     <el-dropdown-item>
                       <b v-if="item.is_read == 0">
@@ -31,9 +31,13 @@
                       <span v-else >
                         {{item.detail}}
                       </span>
+                      <br/>
+                      <span class="opacity80">
+                        {{item.time_interval}}
+                      </span>
                     </el-dropdown-item>
                   </a>
-                </span>
+                </div>
               </el-dropdown-menu>
             </el-dropdown>
 
@@ -119,6 +123,7 @@ export default {
           this.loadingNotification=false;
           this.notification = response.data;
           this.bellBadge = this.notification.unread_message.length;
+          console.log(response.data);
         }).catch((error) => {
           console.log(error)
           this.$router.push({
@@ -130,7 +135,6 @@ export default {
       axios
         .post('/api/notification/read-notification/'+notification_id)
         .then((response) => {
-          console.log(1211);
           this.getNotification();
         }).catch((error) => {
           console.log(error)
@@ -157,6 +161,12 @@ export default {
   overflow-y: scroll;
   overflow-x: hidden;
 }
+.el-dropdown-menu__item {
+  line-height: 26px;
+}
+.opacity80{
+  opacity: 0.8 ;
+}
 ::-webkit-scrollbar {
     width: 0px;
     background: transparent; /* make scrollbar transparent */