Added search option to find specific accounts

assets/css/rop_core.css

@@ -3045,6 +3045,11 @@ a.active {
     -webkit-flex: 0 0 auto;
     -ms-flex: 0 0 auto;
     flex: 0 0 auto;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: 0.05rem solid #e7e9ed;
+    margin: 8px;
 }
 
 #rop_core .panel .panel-body {
@@ -3213,7 +3218,6 @@ a.active {
     display: flex;
     display: -ms-flexbox;
     margin: 0.2rem 0 0.15rem;
-    border-bottom: 0.05rem solid #e7e9ed;
     list-style: none;
 
     -webkit-align-items: center;
@@ -3223,6 +3227,7 @@ a.active {
     -webkit-flex-wrap: wrap;
     -ms-flex-wrap: wrap;
     flex-wrap: wrap;
+    margin-bottom: 0px;
 }
 
 #rop_core .tab .tab-item {

includes/class-rop-i18n.php

@@ -137,6 +137,8 @@ public static function get_labels( $key = '' ) {
 				'get_latest_pro_version'     => __( 'Get the latest Pro version to unlock.', 'tweet-old-post' ),
 				'tlg_app_desc'               => sprintf( __( 'You can check %1$shere%2$s for how to get these details.', 'tweet-old-post' ), '<a class="text-bold " href="https://docs.revive.social/article/2223-how-to-connect-revive-social-to-telegram" target="_blank">', '</a>' ),
 				'upsell_bz_service_body'     => __( 'We\'re sorry, %1$s is not available on your plan. Please upgrade to the business plan to unlock all these features and get more traffic.', 'tweet-old-post' ),
+				'search_account'             => __( 'Search account', 'tweet-old-post' ),
+				'no_account_found'           => __( 'No account found for search', 'tweet-old-post' ),
 			),
 			'settings'    => array(
 				'yes_text' => __( 'Yes', 'tweet-old-post' ),

vue/src/vue-elements/accounts-tab-panel.vue

@@ -4,7 +4,7 @@
       <div
         v-if="twitter_warning"
         class="toast  toast-warning"
         v-html="labels.twitter_warning"
       />
       <div class="container">
         <div
@@ -21,15 +21,24 @@
               v-if="accountsCount === 0 && is_preloading > 0"
               class="empty mb-2"
             >
-              <div class="empty-icon">
-                <i class="fa fa-3x fa-user-circle-o" />
+              <div
+                v-if="!searchAccount"
+              >
+                <div class="empty-icon">
+                  <i class="fa fa-3x fa-user-circle-o" />
+                </div>
+                <p class="empty-title h5">
+                  {{ labels.no_accounts }}
+                </p>
+                <p class="empty-subtitle">
+                  {{ labels.no_accounts_desc }}
+                </p>
+              </div>
+              <div
+                v-else
+              >
+                {{ labels.no_account_found }}: "{{ searchAccount }}"
               </div>
-              <p class="empty-title h5">
-                {{ labels.no_accounts }}
-              </p>
-              <p class="empty-subtitle">
-                {{ labels.no_accounts_desc }}
-              </p>
             </div>
             <template v-if="is_preloading > 0">
               <div
@@ -75,7 +84,7 @@
         >
           <div class="column col-12">
             <p class="upsell">
               <i class="fa fa-info-circle " /> <span v-html="labels.upsell_accounts" />
             </p>
           </div>
         </div>
@@ -109,11 +118,19 @@
 
     export default {
         name: 'AccountView',
+        props: {
+          searchAccount: {
+            default: function () {
+              return '';
+            },
+            type: String
+          }
+        },
         components: {
             SignInBtn,
             ServiceUserTile,
             AddAccountTile,
             WebhookAccountModal,
             'vue_spinner': vue_spinner
         },
         data: function () {
@@ -124,15 +141,16 @@
                 twitter_warning: false,
                 labels: this.$store.state.labels.accounts,
                 upsell_link: ropApiSettings.upsell_link,
-                pro_installed: ropApiSettings.pro_installed
+                pro_installed: ropApiSettings.pro_installed,
+                postTimeout: ''
             }
         },
         computed: {
             /**
              * Get all the available/active accounts.
              */
             accounts: function () {
-                const all_accounts = {};
+                let all_accounts = {};
                 let twitter = 0;
                 const services = this.$store.state.authenticatedServices;
                 for (const key in services) {
@@ -150,7 +168,10 @@
                         }
                     }
                 }
+                if (this.searchAccount){
+                  all_accounts = this.filteredAccounts(all_accounts);
+                }
                 this.twitter_warning = twitter > 1;
                 this.$log.info('All accounts: ', all_accounts);
                 this.$log.debug('Preloading: ', this.$store.state.hide_preloading);
                 this.accountsCount = Object.keys(all_accounts).length;
@@ -206,6 +227,21 @@
                     this.is_loading = false;
                     Vue.$log.error('Got nothing from server. Prompt user to check internet connection and try again', error)
                 })
+            },
+            filteredAccounts: function(accounts) {
+              const result = {};
+              const query = this.searchAccount?.toLowerCase() || '';
+
+              for (const account_id in accounts) {
+                const account = accounts[account_id];
+                if (
+                  account?.user &&
+                  account.user.toLowerCase().includes(query)
+                ) {
+                  result[account_id] = account;
+                }
+              }
+              return result;
             }
         }
     }

vue/src/vue-elements/main-page-panel.vue

@@ -70,7 +70,6 @@
         <div
           v-if="is_preloading_over > 0"
           class="panel-nav"
-          style="padding: 8px;"
         >
           <ul class="tab ">
             <li
@@ -87,10 +86,20 @@
               >{{ tab.name }}</a>
             </li>
           </ul>
+          <div class="search-accounts">
+            <input
+              v-model="searchAccount"
+              type="text"
+              name="search-accounts"
+              :placeholder="search_account"
+              class="form-input"
+            />
+          </div>
         </div>
         <component
           :is="page.template"
           :type="page.view"
+          :search-account="searchAccount"
         />
       </div>
 
@@ -258,7 +267,9 @@
                 license_data_view: this.$store.state.licenseDataView,
                 license_field_title: window.wp.i18n.sprintf(this.$store.state.labels.general.license_product, 'Revive Old Posts Pro Add-on'),
                 license_error: false,
-                password_mask: this.$store.state.licenseDataView?.passwordMask
+                password_mask: this.$store.state.licenseDataView?.passwordMask,
+                search_account: this.$store.state.labels.accounts.search_account,
+                searchAccount: ''
             }
         },
         computed: {