Merge pull request #26 from launcher-host/feature-user-slug-#22

- Users Slugs logic (#22) - Messages Delivery Status to inform when messages are seen (#27) - MigrationsHandler publish timestamped migrations
launcher-host · Nov 9, 2018 · 3e4b21d · 3e4b21d
2 parents 43c954c + 0fd9cc7
commit 3e4b21d
Show file tree

Hide file tree

Showing 32 changed files with 383 additions and 183 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,10 +1,38 @@
 # CHANGELOG
 
-## [0.0.10] - 2018-11-04
+<a name="1.0-alpha"></a>
+# [1.0-alpha](https://github.com/launcher-host/mercurius/releases/tag/1.0-alpha) (2018-11-xx)
+
+- docs: general changes add notes on updating Mercurius
+- chore: MigrationsHandler publish timestamped migrations
+- feature: Users Slugs logic ([#22](https://github.com/launcher-host/mercurius/issues/22))
+- feature: Messages Delivery Status to inform when messages are seen ([#27](https://github.com/launcher-host/mercurius/issues/27))
+
+![mercurius_feature_message_delivery_status_2018-11-09](https://user-images.githubusercontent.com/34574/48246723-7171c780-e3e8-11e8-8355-6af23d425d64.gif)
+
+
+### Update instructions
+Publish changes and run migration
+```php
+php artisan vendor:publish --tag="mercurius-lang" --force
+php artisan vendor:publish --tag="mercurius-public" --force
+php artisan vendor:publish --tag="mercurius-seeds" --force
+php artisan vendor:publish --tag="mercurius-migrations"
+php artisan migrate
+```
+
+**(Optional)** Refresh dummy data
+```php
+php artisan migrate:fresh
+php artisan db:seed --class=MercuriusDatabaseSeeder
+```
+
+
+# [0.0.10](https://github.com/launcher-host/mercurius/releases/tag/0.0.10) (2018-11-04)
 - Fix Chrome error, Promise was not loading.
 - Fix replace sizeof() to count() on event UserStatusChanged.
 
-## [0.0.9] - 2018-11-04
+# [0.0.9](https://github.com/launcher-host/mercurius/releases/tag/0.0.9) (2018-11-04)
 - Feature #12 Broadcast User Status.
 - Added Events:
     * UserGoesActive
@@ -13,8 +41,9 @@
 - Fix ConversationRepository->recipients() to return a Collection.
 - Updated documentation.
 
+![mercurius_feature_broadcast_user_status_2018-11-04](https://user-images.githubusercontent.com/34574/47960355-1576ff80-dff2-11e8-8e33-43ba6d4a3eab.gif)
 
-## [0.0.8] - 2018-10-31
+# [0.0.8](https://github.com/launcher-host/mercurius/releases/tag/0.0.8) (2018-10-31)
 - Updated documentation in general.
 - Added make SCSS + JS publishable.
 - Added instructions how to customize Mercurius (Views, SCSS, JS).
@@ -23,36 +52,36 @@
 - Fix #9 removing active conversation.
 
 
-## [0.0.7] - 2018-10-20
+# [0.0.7](https://github.com/launcher-host/mercurius/releases/tag/0.0.7) (2018-10-20)
 - Changed Improve receivers controller #6
 - Fix MessageModel: add return types #5
 - Fix composer: set fixed versions and other configs #4
 - Fix MessageRepository: Check user for deletion #3
 - Fix some stuff #2
 
 
-## [0.0.6] - 2018-10-15
+# [0.0.6](https://github.com/launcher-host/mercurius/releases/tag/0.0.6) (2018-10-15)
 - Fix scroll to the bottom when sending/receiving a message.
 
 
-## [0.0.5] - 2018-10-12
+# [0.0.5](https://github.com/launcher-host/mercurius/releases/tag/0.0.5) (2018-10-12)
 - Fix when sending/receiving a message, scroll to the bottom.
 - Fix ensure use of boolean types in order to support PostgreSQL.
 - Changed documentation.
 
 
-## [0.0.4] - 2018-10-11
+# [0.0.4](https://github.com/launcher-host/mercurius/releases/tag/0.0.4) (2018-10-11)
 - Fix SQL query to support PostgreSQL.
 
 
-## [0.0.3] - 2018-10-11
+# [0.0.3](https://github.com/launcher-host/mercurius/releases/tag/0.0.3) (2018-10-11)
 - Fix messages id collision when appending a message, and request more data.
 
 
-## [0.0.2] - 2018-10-11
+# [0.0.2](https://github.com/launcher-host/mercurius/releases/tag/0.0.2) (2018-10-11)
 - Changed documentation.
 - Fix messages panel initialScrollY.
 
 
-## [0.0.1] - 2018-10-10
-- First Release beta.
+# [0.0.1](https://github.com/launcher-host/mercurius/releases/tag/0.0.1) (2018-10-10)
+- First Release.
diff --git a/README.md b/README.md
@@ -20,7 +20,6 @@
 * [Features](#features)
 * [Screenshots](#screenshots)
 * [Demo](#demo)
-* [Requirements](#requirements)
 * [Installation](#installation)
 * [Customization](#customization)
 * [Roadmap](#roadmap)
@@ -84,18 +83,10 @@ Password: `password`
 Tip: Open 2 different browsers and login with different usernames, so you can test send/receiving messages.
 
 
-<br>
-
-## Requirements
-
-- Laravel 5.6 or 5.7
-- Pusher account
-- Vue.js 2.0
-- Bootstrap 4
-
 <br>
 
 ## Installation
+Make sure Laravel `5.6`+ is installed before proceed.
 
 ##### 1. Setup Pusher
 If you don't have an account, create a free one on [pusher.com website](https://pusher.com/).
@@ -182,6 +173,12 @@ Demo Users:
 Password: `password`
 
 
+#### Update Mercurius
+Whenever you update Mercurius, make sure to publish assets to apply the new versions of CSS/JS.
+```php
+php artisan vendor:publish --tag=mercurius-public --force
+```
+
 <br>
 
 
@@ -197,15 +194,14 @@ Check the [roadmap](https://github.com/launcher-host/mercurius/issues/8) for mor
 
 - Unit Tests
 - Typing indicator
-- Broadcast user status (when he goes on/off)
 - Conversation with multiple users
 - Search in messages content
 - Upload photos and attach files
 - Preview images and videos
 - Emoji support
 - Video Chat
 - Support socket.io
-- Web Hooks
+- Webhooks
 
 
 

diff --git a/publishable/database/migrations/add_slug_mercurius_user_table.php b/publishable/database/migrations/add_slug_mercurius_user_table.php
@@ -0,0 +1,28 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+
+class AddSlugMercuriusUserTable extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up()
+    {
+        if (!Schema::hasColumn('users', 'slug')) {
+            Schema::table('users', function ($table) {
+                $table->string('slug')->nullable()->after('email');
+            });
+        }
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down()
+    {
+        Schema::table('users', function ($table) {
+            $table->dropColumn('slug');
+        });
+    }
+}
diff --git a/publishable/database/seeds/MercuriusMessagesTableSeeder.php b/publishable/database/seeds/MercuriusMessagesTableSeeder.php
@@ -26,10 +26,6 @@ class MercuriusMessagesTableSeeder extends Seeder
      */
     public function run()
     {
-        DB::statement('SET FOREIGN_KEY_CHECKS=0');
-        DB::table('mercurius_messages')->truncate();
-        DB::statement('SET FOREIGN_KEY_CHECKS=1');
-
         $ian = $this->getUser('[email protected]');
         $noa = $this->getUser('[email protected]');
         $lua = $this->getUser('[email protected]');
@@ -117,7 +113,7 @@ private function createDummyConversations($dt, $dummyUser, $demoUsers)
      */
     private function addMessage($message, $sender_id, $receiver_id, $datetime)
     {
-        DB::table('mercurius_messages')->insert([
+        config('mercurius.models.messages')::insert([
             'message'     => $message,
             'sender_id'   => $sender_id,
             'receiver_id' => $receiver_id,

diff --git a/publishable/database/seeds/MercuriusUsersTableSeeder.php b/publishable/database/seeds/MercuriusUsersTableSeeder.php
@@ -17,12 +17,14 @@ public function run()
         $this->createUser('Noa Robison', '[email protected]', 'avatar_noa.png');
         $this->createUser('Lua Adison', '[email protected]', 'avatar_lua.png');
 
-        // Seed dummy users to test Conversations scroll
-        //
+        // Seed random dummy users
         factory(config('mercurius.models.user'), 20)->create([
             'is_online'   => array_rand([true, false]),
             'be_notified' => array_rand([true, false]),
-        ]);
+        ])->each(function ($usr) {
+            $usr->slug = str_slug($usr->name, '_');
+            $usr->save();
+        });
     }
 
     /**
@@ -37,6 +39,7 @@ private function createUser($name, $email, $avatar)
             'email' => $email,
         ], [
             'name'           => $name,
+            'slug'           => str_slug($name, '_'),
             'avatar'         => 'vendor/mercurius/img/avatar/'.$avatar,
             'password'       => bcrypt('password'),
             'remember_token' => null,

diff --git a/publishable/lang/en/mercurius.json b/publishable/lang/en/mercurius.json
@@ -25,7 +25,8 @@
     "message_delete_btn": "Delete message",
 
     "search_messages": "Search messages",
-    "msg_status_read": "Read",
+    "msg_sent": "Sent",
+    "msg_seen_at": "Seen at",
     "type_message": "Type message...",
     "new_message": "New message",
     "to_message": "To",

diff --git a/publishable/public/css/mercurius.css b/publishable/public/css/mercurius.css
diff --git a/publishable/public/js/mercurius.js b/publishable/public/js/mercurius.js
diff --git a/publishable/views/inc/icons-svg.blade.php b/publishable/views/inc/icons-svg.blade.php
@@ -14,8 +14,8 @@
         <title>bin</title>
         <path d="M 18 13 L 18 7 C 18 4 21 1 24 1 L 36 1 C 39 1 42 4 42 7 L 42 13 L 56 13 C 58 13 59 14 59 16 C 59 17 58 18 56 18 L 53 18 L 53 53 C 53 56 51 59 47 59 L 13 59 C 9 59 7 56 7 53 L 7 18 L 4 18 C 2 18 1 17 1 16 C 1 14 2 13 4 13 L 18 13 Z  M 13 18 L 13 53 L 47 53 L 47 18 L 13 18 Z  M 36 13 L 36 7 L 24 7 L 24 13 L 36 13 Z  M 24 24 C 26 24 27 25 27 27 L 27 45 C 27 46 26 47 24 47 C 23 47 21 46 21 45 L 21 27 C 21 25 23 24 24 24 Z  M 36 24 C 37 24 39 25 39 27 L 39 45 C 39 46 37 47 36 47 C 34 47 33 46 33 45 L 33 27 C 33 25 34 24 36 24 Z"/>
     </symbol>
-    <symbol id="icon-clear" viewBox="0 0 60 60">
-        <title>clear</title>
+    <symbol id="icon-check" viewBox="0 0 60 60">
+        <title>check</title>
         <path d="M 13 25 L 23 34 L 47 10 C 50 7 54 8 57 10 C 60 13 60 17 57 20 L 28 50 C 25 53 20 53 18 50 L 3 35 C 0 32 0 28 3 25 C 6 22 10 22 13 25 L 13 25 Z"/>
     </symbol>
     <symbol id="icon-clock" viewBox="0 0 60 60">

diff --git a/resources/js/conversations/Conversations.vue b/resources/js/conversations/Conversations.vue
@@ -32,7 +32,7 @@
                 <div
                     class="conversation"
                     :class="conversationClass(conversation)"
-                    :key="conversation.id"
+                    :key="conversation.slug"
                     >
                     <a
                         href="#"
@@ -56,7 +56,7 @@
                     <!-- Delete Conversation -->
                     <div
                         class="conversation__action"
-                        @click="deleteConversation(conversation.id)"
+                        @click="deleteConversation(conversation.slug)"
                     ><svg class="ic ic-bin"><use xlink:href="#icon-bin"></use></svg>
                     </div>
                 </div>
@@ -130,7 +130,7 @@ export default {
 
     methods: {
         conversationClass(conv) {
-            return (!!this.active && this.active.id === conv.id ? 'active' : '')
+            return (!!this.active && this.active.slug === conv.slug ? 'active' : '')
                  + (this._received(conv) && _.isNull(conv.seen_at) ? ' unseen' : '');
         },
         getMsg(conv) {
@@ -147,24 +147,24 @@ export default {
             Bus.$emit('mercuriusOpenConversation', this.active);
         },
         refreshMessage(msg) {
-            this.active.sender     = msg.sender_id
+            this.active.sender     = msg.sender
             this.active.message    = msg.message
             this.active.created_at = msg.created_at
         },
 
 
         // Private helpers
         //
-        _find(id) {
+        _find(slug) {
             return _.find(this.conversations, (c) => {
-                return c.id===id
+                return c.slug===slug
             })
         },
         _create(recipient) {
             let item = {
-                "id":         recipient.id,
+                "slug":       recipient.slug,
                 "user":       recipient.name,
-                "sender":     recipient.id,
+                "sender":     recipient.slug,
                 "avatar":     recipient.avatar,
                 "is_online":  recipient.is_online,
                 "message":    '',
@@ -176,10 +176,10 @@ export default {
         },
         // Check if last message was received, or sent
         _received(conv) {
-            return conv.sender!==Mercurius.user.id
+            return conv.sender!==Mercurius.user.slug
         },
         _findOrCreate(recipient) {
-            return this._find(recipient.id) || this._create(recipient)
+            return this._find(recipient.slug) || this._create(recipient)
         },
 
 
@@ -194,7 +194,7 @@ export default {
         },
         onMessageReceived(sender, msg) {
             let item = this._findOrCreate(sender);
-            item.sender  = sender.id;
+            item.sender  = sender.slug;
             item.message = msg.message;
             item.seen_at = null;
         },

diff --git a/resources/js/conversations/conversations-http.js b/resources/js/conversations/conversations-http.js
@@ -81,7 +81,7 @@ module.exports = {
                             'error'
                         )
                     })
-                    .then(() => swal.close())
+                    .finally(() => swal.close())
             });
         }
     },

diff --git a/resources/js/core/I18N.js b/resources/js/core/I18N.js
@@ -7,7 +7,7 @@
  * @param  {array} args  attributes used with translations
  * @return {string}
  */
-const __ = (key, args) => {
+const __ = function(key, args) {
     let trans = _.get(Mercurius.i18n, key);
 
     _.eachRight(args, (value, key) => {

diff --git a/resources/js/mercurius.js b/resources/js/mercurius.js
@@ -49,7 +49,7 @@ module.exports = {
          * Setup event listener using Laravel Echo and Pusher.
          */
         listen() {
-            Echo.private('mercurius.'+this.user.id)
+            Echo.private('mercurius.'+this.user.slug)
                 .listen('.mercurius.message.sent', e => this.onMessageReceived(e))
                 .listen('.mercurius.user.status.changed', user => this.onUserStatusChanged(user));
         },
@@ -103,12 +103,12 @@ module.exports = {
         /**
          * Conversation was deleted.
          */
-        onConversationDeleted(recipientId) {
+        onConversationDeleted(recipient) {
             let _c = this.conversations
-            let _i = _.findIndex(_c, ['id', recipientId])
+            let _i = _.findIndex(_c, ['slug', recipient])
             Vue.delete(_c, _i)
 
-            if (this.conversation.id === recipientId) {
+            if (this.conversation.slug === recipient) {
                 this.conversation = {}
             }
         },
@@ -120,7 +120,7 @@ module.exports = {
          * @param {object} user
          */
         onUserStatusChanged(ev) {
-            let _c = _.find(this.conversations, ['id', ev.user])
+            let _c = _.find(this.conversations, ['slug', ev.user])
             if (!_c) return
 
             _c.is_online = (ev.status === 'active')
-Original file line number
+Diff line change
@@ Expand Up / @@ -81,7 +81,7 @@ module.exports = { @@
                                 'error'
                             )
                         })
-                        .then(() => swal.close())
+                        .finally(() => swal.close())
                 });
             }
         },
@@ Expand Down @@