Complete Move to group feature

app/Http/Controllers/GroupController.php

@@ -111,13 +111,24 @@ class GroupController extends Controller
      */
     public function associateAccounts(Request $request)
     {
+        if( $request->input('groupId') > 0 ) {
+
+            $twofaccounts = TwoFAccount::find($request->input('accountsIds'));
+            $group = Group::FindOrFail($request->input('groupId'));
+            
+            $group->twofaccounts()->saveMany($twofaccounts);
+            
+            return response()->json($group, 200);
+        }
+        else {
+
+            TwoFAccount::whereIn('id', $request->input('accountsIds'))
+                        ->update(['group_id' => NULL]);
+            
+            return response()->json(['message' => 'moved to null'], 200);
+        }
 
-        $twofaccounts = TwoFAccount::find($request->input('accountsIds'));
-        $group = Group::FindOrFail($request->input('groupId'));
-        
-        $group->twofaccounts()->saveMany($twofaccounts);
 
-        return response()->json($group, 200);
     }
 
 

resources/js/views/Accounts.vue

@@ -1,7 +1,7 @@
 <template>
     <div>
-        <!-- Group selector -->
-        <div class="container groups" v-if="showGroupSelector">
+        <!-- Group switch -->
+        <div class="container groups" v-if="showGroupSwitch">
             <div class="columns is-centered">
                 <div class="column is-one-third-tablet is-one-quarter-desktop is-one-quarter-widescreen is-one-quarter-fullhd">
                     <div class="columns is-multiline">
@@ -17,6 +17,25 @@
                 </div>
             </div>
         </div>
+        <!-- Group selector -->
+        <div class="container groups with-heading" v-if="showGroupSelector">
+            <div class="columns is-centered">
+                <div class="column is-one-third-tablet is-one-quarter-desktop is-one-quarter-widescreen is-one-quarter-fullhd">
+                    <div class="columns is-multiline">
+                        <div class="column is-full" v-for="group in groups" :key="group.id">
+                            <button class="button is-fullwidth is-dark has-text-light is-outlined" :class="{ 'is-link' : moveAccountsTo === group.id}" @click="moveAccountsTo = group.id">
+                                <span v-if="group.id === 0">
+                                    {{ $t('groups.no_group') }}
+                                </span>
+                                <span v-else>
+                                    {{ group.name }}
+                                </span>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
         <!-- show accounts list -->
         <div class="container" v-if="this.showAccounts">
             <!-- accounts -->
@@ -64,14 +83,14 @@
             <!-- </vue-pull-refresh> -->
         </div>
         <!-- header -->
-        <div class="header has-background-black-ter" v-if="this.showAccounts || this.showGroupSelector">
+        <div class="header has-background-black-ter" v-if="this.showAccounts || this.showGroupSwitch">
             <div class="columns is-gapless is-mobile is-centered">
                 <div class="column is-three-quarters-mobile is-one-third-tablet is-one-quarter-desktop is-one-quarter-widescreen is-one-quarter-fullhd">
                     <!-- toolbar -->
                     <div class="toolbar has-text-centered" v-if="editMode">
                         <div class="manage-buttons tags has-addons are-medium">
                             <span class="tag is-dark">{{ selectedAccounts.length }}&nbsp;{{ $t('commons.selected') }}</span>
-                            <a class="tag is-link" v-if="selectedAccounts.length > 0" @click="moveAccounts">
+                            <a class="tag is-link" v-if="selectedAccounts.length > 0" @click="showGroupSelector = true">
                                 {{ $t('commons.move') }}&nbsp;<font-awesome-icon :icon="['fas', 'layer-group']" />
                             </a>
                             <a class="tag is-danger" v-if="selectedAccounts.length > 0" @click="destroyAccounts">
@@ -89,10 +108,10 @@
                             </span>
                         </div>
                     </div>
-                    <!-- group selector -->
-                    <div class="group-selector has-text-centered" v-if="!editMode">
-                        <div class="columns" @click="toggleGroupSelector">
-                            <div class="column" v-if="!showGroupSelector">
+                    <!-- group switch toggle -->
+                    <div class="is-clickable has-text-centered" v-if="!editMode">
+                        <div class="columns" @click="toggleGroupSwitch">
+                            <div class="column" v-if="!showGroupSwitch">
                                 {{ this.activeGroupName }} ({{ this.accounts.length }})
                                 <font-awesome-icon  :icon="['fas', 'caret-down']" />
                             </div>
@@ -111,7 +130,7 @@
             <twofaccount-show ref="TwofaccountShow" ></twofaccount-show>
         </modal>
         <!-- footer -->
-        <vue-footer v-if="showFooter && !showGroupSelector" :showButtons="accounts.length > 0">
+        <vue-footer v-if="showFooter && !showGroupSwitch" :showButtons="accounts.length > 0">
             <!-- New item buttons -->
             <p class="control" v-if="!showUploader && !editMode">
                 <a class="button is-link is-rounded is-focus" @click="showUploader = true">
@@ -141,10 +160,20 @@
                 </a>
             </p>
         </vue-footer>
+        <vue-footer v-if="showFooter && showGroupSwitch" :showButtons="true">
+            <!-- Close Group switch button -->
+            <p class="control">
+                <a class="button is-dark is-rounded" @click="closeGroupSwitch()">{{ $t('commons.close') }}</a>
+            </p>
+        </vue-footer>
         <vue-footer v-if="showFooter && showGroupSelector" :showButtons="true">
-            <!-- Close Group selector button -->
+            <!-- Move to selected group button -->
             <p class="control">
-                <a class="button is-dark is-rounded" @click="closeGroupSelector()">{{ $t('commons.close') }}</a>
+                <a class="button is-link is-rounded" @click="moveAccounts()">{{ $t('commons.move') }}</a>
+            </p>
+            <!-- Cancel button -->
+            <p class="control">
+                <a class="button is-dark is-rounded" @click="showGroupSelector = false">{{ $t('commons.cancel') }}</a>
             </p>
         </vue-footer>
     </div>
@@ -175,8 +204,10 @@
                 editMode: this.InitialEditMode,
                 showUploader: false,
                 showFooter: true,
+                showGroupSwitch: false,
                 showGroupSelector: false,
                 drag: false,
+                moveAccountsTo: false,
             }
         },
 
@@ -195,7 +226,7 @@
             },
 
             showAccounts() {
-                return this.accounts.length > 0 && !this.showUploader && !this.showGroupSelector ? true : false
+                return this.accounts.length > 0 && !this.showUploader && !this.showGroupSwitch && !this.showGroupSelector ? true : false
             },
 
             activeGroupName() {
@@ -323,11 +354,13 @@
                 this.selectedAccounts.forEach(id => accountsIds.push(id))
 
                 // Backend will associate all accounts with the selected group in the same move
-                await this.axios.patch('/api/group/accounts', {accountsIds: accountsIds, groupId: '3'} )
+                await this.axios.patch('/api/group/accounts', {accountsIds: accountsIds, groupId: this.moveAccountsTo} )
 
                 // we fetch the accounts again to prevent the js collection being
                 // desynchronize from the backend php collection
                 this.fetchAccounts()
+                this.fetchGroups()
+                this.showGroupSelector = false
 
             },
 
@@ -355,7 +388,7 @@
 
                     this.$root.appSettings.activeGroup = response.data.settings.activeGroup
 
-                    this.closeGroupSelector()
+                    this.closeGroupSwitch()
 
                 })
                 .catch(error => {
@@ -366,21 +399,21 @@
                 this.fetchAccounts()
             },
 
-            toggleGroupSelector: function(event) {
+            toggleGroupSwitch: function(event) {
 
                 if (event) {
-                    this.showGroupSelector ? this.closeGroupSelector() : this.openGroupSelector()
+                    this.showGroupSwitch ? this.closeGroupSwitch() : this.openGroupSwitch()
                 }
             },
 
-            openGroupSelector: function(event) {
+            openGroupSwitch: function(event) {
 
-                this.showGroupSelector = true
+                this.showGroupSwitch = true
             },
 
-            closeGroupSelector: function(event) {
+            closeGroupSwitch: function(event) {
 
-                this.showGroupSelector = false
+                this.showGroupSwitch = false
             },
 
             setEditModeTo(state) {

resources/js/views/Groups.vue

@@ -20,7 +20,7 @@
                 </router-link>
                 <span class="is-family-primary is-size-6 is-size-7-mobile has-text-grey">{{ group.count }} {{ $t('twofaccounts.accounts') }}</span>
             </div>
-            <p class="is-size-7 is-pulled-right">
+            <p class="is-size-7 is-pulled-right" v-if="groups.length > 0">
                 {{ $t('groups.deleting_group_does_not_delete_accounts')}}
             </p>
             <!-- footer -->

resources/lang/en/groups.php

@@ -16,8 +16,9 @@ return [
     'groups' => 'Groups',
     'select_accounts_to_show' => 'Select accounts to show',
     'manage_groups' => 'Manage groups',
-    'manage_groups_legend' => 'You can create groups to manage your accounts the way you want. All your accounts remain visible in the pseudo group named \'All\', regardless of the group they belong to.',
+    'manage_groups_legend' => 'You can create groups to organize your accounts the way you want. All accounts remain visible in the pseudo group named \'All\', regardless of the group they belong to.',
     'deleting_group_does_not_delete_accounts' => 'Deleting a group does not delete accounts',
+    'no_group' => 'No group',
     'forms' => [
         'new_group' => 'New group',
         'new_name' => 'New name',
@@ -26,5 +27,4 @@ return [
     'confirm' => [
         'delete' => 'Are you sure you want to delete this group?',
     ],
-
 ];

resources/sass/app.scss

@@ -51,10 +51,6 @@ a:hover {
   }
 }
 
-.group-selector {
-  cursor: pointer;
-}
-
 .group-item {
   border-bottom: 1px solid hsl(0, 0%, 21%);
   padding: 0.75rem;