Feat: Display histories of alablility status

app/controllers/api/v1/accounts/agent_histories_controller.rb

@@ -0,0 +1,18 @@
+class Api::V1::Accounts::AgentHistoriesController < ApplicationController
+  before_action :fetch_agent_histories, only: [:show]
+  def index
+    @agent_histories = agent_histories
+  end
+
+  def show
+    Rails.logger.info "--------------USER: #{@agent_histories}"
+    # return @agent_histories
+    render partial: 'api/v1/models/agent_histories.json.jbuilder', locals: { resource: @agent_histories }
+  end
+
+  private
+
+  def fetch_agent_histories
+    @agent_histories = Current.account.users.find(params[:id]).availability_statuses
+  end
+end

app/controllers/api/v1/profiles_controller.rb

@@ -7,6 +7,7 @@ def show
 
   def update
     @user.update!(profile_params)
+    current_user.availability_statuses.create!(profile_params)
   end
 
   private

app/helpers/api/v1/accounts/agent_histories_helper.rb

@@ -0,0 +1,2 @@
+module Api::V1::Accounts::AgentHistoriesHelper
+end

app/javascript/dashboard/api/agent_histories.js

@@ -0,0 +1,9 @@
+import ApiClient from './ApiClient';
+
+class AgentHistories extends ApiClient {
+  constructor() {
+    super('agent_histories', { accountScoped: true });
+  }
+}
+
+export default new AgentHistories();

app/javascript/dashboard/components/layout/AvailabilityStatus.vue

@@ -92,6 +92,7 @@ export default {
       this.isStatusMenuOpened = false;
     },
     changeAvailabilityStatus(availability) {
+      console.log(availability);
       if (this.isUpdating) {
         return;
       }

app/javascript/dashboard/i18n/default-sidebar.js

@@ -42,6 +42,7 @@ export const getSidebarItems = accountId => ({
   settings: {
     routes: [
       'agent_list',
+      'agent_histories',
       'canned_list',
       'labels_list',
       'codes_list',

app/javascript/dashboard/i18n/locale/en/agentMgmt.json

@@ -63,6 +63,19 @@
         "NO": "No, Keep "
       }
     },
+    "VIEW_TRACKS": {
+      "HEADER": "Agents Availability Statuses"
+      "BUTTON_TEXT": "Histories",
+      "SIDEBAR_TXT": "<p><b>Histories of changes of availability status</b></p><p>You can track the histries of chages of every agents availability statues.</p>",
+      "LIST": {
+        "404": "There are no chnages of availability status associated to this agent.",
+        "TABLE_HEADER": [
+          "Agent Name",
+          "Availability",
+          "Date/Time"
+        ]
+      }
+    },
     "EDIT": {
       "TITLE": "Edit agent",
       "FORM": {

app/javascript/dashboard/routes/dashboard/settings/agents/Histories.vue

@@ -0,0 +1,106 @@
+<template>
+  <div class="column content-box">
+    <div class="row">
+      <div class="small-8 columns">
+        <p v-if="!historyList.length" class="no-items-erro-message">
+          {{ $t('AGENT_MGMT.VIEW_TRACKS.LIST.404') }}
+        </p>
+        <table v-if="historyList.length" class="woot-table">
+          <!-- Header -->
+          <thead>
+            <th
+              v-for="thHeader in $t('AGENT_MGMT.VIEW_TRACKS.LIST.TABLE_HEADER')"
+              :key="thHeader"
+            >
+              {{ thHeader}}
+            </th>
+          </thead>
+          <tbody>
+            <tr v-for="(history, index) in historyList" :key="history.availability">
+              <td>
+                <span class="agent-name">{{ agent.name }}</span>
+              </td>
+              <td>
+                <span class="history-availability">{{ history.availability }}</span>
+              </td>
+              <td>
+                <span class="history-time">{{ history.updated_at }}</span>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <div class="small-4 columns">
+        <span
+          v-html="
+            useInstallationName(
+              $t('AGENT_MGMT.VIEW_TRACKS.SIDEBAR_TXT'),
+              globalConfig.installationName
+            )
+          "
+        />
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { mapGetters } from 'vuex';
+import globalConfigMixin from 'shared/mixins/globalConfigMixin';
+import accountMixin from '../../../../mixins/account';
+
+export default {
+  components: {
+  },
+  mixins: [globalConfigMixin, accountMixin],
+  data() {
+    return {
+      historyList: [],
+      currentAgent: {},
+      showHistories: false,
+      agent: {},
+    };
+  },
+  computed: {
+    ...mapGetters({
+      // historyList: 'agents/getAgentHistories',
+      agentList: 'agents/getAgents',
+      globalConfig: 'globalConfig/get',
+    }),
+    selectedAgentId() {
+      return this.$route.params.agent_id;
+    },
+  },
+  watch: {
+    $route(to) {
+      if (to.name === 'agent_histories') {
+        this.fetchHistories();
+        this.getSelectedAgent();
+      }
+    },
+  },
+  mounted() {
+    this.fetchHistories();
+    this.getSelectedAgent();
+  },
+  methods: {
+    // Show SnackBar
+    showAlert(message) {
+      // Reset loading, current selected agent
+      this.loading[this.currentAgent.id] = false;
+      this.currentAgent = {};
+      // Show message
+      this.agentAPI.message = message;
+      bus.$emit('newToastMessage', message);
+    },
+    fetchHistories() {
+      this.$store.dispatch('agents/getHistories', this.selectedAgentId).then(() => {
+        this.historyList = this.$store.getters['agents/getAgentHistories'];
+      });
+    },
+    getSelectedAgent() {
+      this.agent = this.agentList.filter(agent => this.selectedAgentId.includes(agent.id))[0];
+      console.log(this.agent);
+    },
+  },
+};
+</script>

app/javascript/dashboard/routes/dashboard/settings/agents/Index.vue

@@ -70,6 +70,17 @@
                       button-class="link hollow grey-btn"
                       @click="openDeletePopup(agent, index)"
                     />
+                    <router-link
+                      :to="addAccountScoping(`settings/agents/${agent.id}/histories`)"
+                    >
+                      <woot-submit-button
+                        v-if="showViewHistoriesAction(agent)"
+                        :button-text="$t('AGENT_MGMT.VIEW_TRACKS.BUTTON_TEXT')"
+                        :loading="loading[agent.id]"
+                        icon-class="ion-clock"
+                        button-class="link hollow grey-btn"
+                      />
+                    </router-link>
                   </div>
                 </td>
               </tr>
@@ -88,6 +99,12 @@
         />
       </div>
     </div>
+    <histories
+      v-if="showHistories"
+      :show.sync="showHistories"
+      :on-close="closeHistories"
+      :agent="selectedAgent"
+    />
     <!-- Add Agent -->
     <woot-modal :show.sync="showAddPopup" :on-close="hideAddPopup">
       <add-agent :on-close="hideAddPopup" />
@@ -122,14 +139,17 @@ import globalConfigMixin from 'shared/mixins/globalConfigMixin';
 import Thumbnail from '../../../../components/widgets/Thumbnail';
 import AddAgent from './AddAgent';
 import EditAgent from './EditAgent';
+import accountMixin from '../../../../mixins/account';
+import Histories from './Histories';
 
 export default {
   components: {
     AddAgent,
     EditAgent,
     Thumbnail,
+    Histories,
   },
-  mixins: [globalConfigMixin],
+  mixins: [globalConfigMixin, accountMixin],
   data() {
     return {
       loading: {},
@@ -140,6 +160,8 @@ export default {
         message: '',
       },
       currentAgent: {},
+      showHistories: false,
+      selectedAgent: {},
     };
   },
   computed: {
@@ -186,6 +208,9 @@ export default {
       }
       return true;
     },
+    showViewHistoriesAction(agent) {
+      return this.currentUserId !== agent.id;
+    },
     verifiedAdministrators() {
       return this.agentList.filter(
         agent => agent.role === 'administrator' && agent.confirmed
@@ -229,6 +254,15 @@ export default {
         this.showAlert(this.$t('AGENT_MGMT.DELETE.API.ERROR_MESSAGE'));
       }
     },
+    // Get Agent for histories
+    openHistories(agent) {
+      this.showHistories = true;
+      this.selectedAgent = agent;
+    },
+    closeHistories() {
+      this.showHistories = false;
+      this.selectedAgent = {};
+    },
     // Show SnackBar
     showAlert(message) {
       // Reset loading, current selected agent

app/javascript/dashboard/routes/dashboard/settings/agents/agent.routes.js

@@ -1,16 +1,27 @@
 import SettingsContent from '../Wrapper';
 import AgentHome from './Index';
+import Histories from './Histories';
 import { frontendURL } from '../../../../helper/URLHelper';
 
 export default {
   routes: [
     {
       path: frontendURL('accounts/:accountId/settings/agents'),
       component: SettingsContent,
-      props: {
-        headerTitle: 'AGENT_MGMT.HEADER',
-        icon: 'ion-person-stalker',
-        showNewButton: false,
+      // props: {
+      //   headerTitle: 'AGENT_MGMT.HEADER',
+      //   icon: 'ion-person-stalker',
+      //   showNewButton: false,
+      // },
+      props: params => {
+        const showBackButton = params.name !== 'agent_list';
+        return {
+          headerTitle: 'AGENT_MGMT.VIEW_TRACKS.HEADER',
+          icon: 'ion-person-stalker',
+          newButtonRoutes: ['agent_list'],
+          showBackButton,
+          showNewButton: false,
+        };
       },
       children: [
         {
@@ -24,6 +35,12 @@ export default {
           component: AgentHome,
           roles: ['administrator'],
         },
+        {
+          path: ':agent_id/histories',
+          name: 'agent_histories',
+          component: Histories,
+          roles: ['administrator'],
+        },
       ],
     },
   ],

app/javascript/dashboard/store/modules/agents.js

@@ -1,6 +1,8 @@
+import Vue from 'vue';
 import * as MutationHelpers from 'shared/helpers/vuex/mutationHelpers';
 import * as types from '../mutation-types';
 import AgentAPI from '../../api/agents';
+import AgentHistoriesAPI from '../../api/agent_histories';
 
 export const state = {
   records: [],
@@ -10,6 +12,7 @@ export const state = {
     isUpdating: false,
     isDeleting: false,
   },
+  records_status: [],
 };
 
 export const getters = {
@@ -22,6 +25,9 @@ export const getters = {
   getUIFlags($state) {
     return $state.uiFlags;
   },
+  getAgentHistories($state) {
+    return $state.records_status;
+  }
 };
 
 export const actions = {
@@ -75,6 +81,16 @@ export const actions = {
       throw new Error(error);
     }
   },
+
+  getHistories: async ({ commit }, agentId) => {
+    try {
+      const response = await AgentHistoriesAPI.show(agentId);
+      console.log(response);
+      commit(types.default.SET_AGENT_HISTORIES, response.data);
+    } catch (error) {
+      // Ignore error
+    }
+  },
 };
 
 export const mutations = {
@@ -96,6 +112,10 @@ export const mutations = {
   [types.default.EDIT_AGENT]: MutationHelpers.update,
   [types.default.DELETE_AGENT]: MutationHelpers.destroy,
   [types.default.UPDATE_AGENTS_PRESENCE]: MutationHelpers.updatePresence,
+
+  [types.default.SET_AGENT_HISTORIES]($state, data) {
+    $state.records_status = data;
+  }
 };
 
 export default {

app/javascript/dashboard/store/mutation-types.js

@@ -60,6 +60,9 @@ export default {
   EDIT_AGENT: 'EDIT_AGENT',
   DELETE_AGENT: 'DELETE_AGENT',
   UPDATE_AGENTS_PRESENCE: 'UPDATE_AGENTS_PRESENCE',
+
+  // Agent availability status histories
+  SET_AGENT_HISTORIES: 'SET_AGENT_HISTORIES',
 
   // Canned Response
   SET_CANNED_UI_FLAG: 'SET_CANNED_UI_FLAG',

app/models/availability_status.rb

@@ -0,0 +1,14 @@
+# == Schema Information
+#
+# Table name: availability_statuses
+#
+#  id           :bigint           not null, primary key
+#  availability :string
+#  created_at   :datetime         not null
+#  updated_at   :datetime         not null
+#  user_id      :integer
+#
+class AvailabilityStatus < ApplicationRecord
+  include RegexHelper
+  belongs_to :user
+end

app/models/code.rb

@@ -10,4 +10,6 @@
 #  account_id  :integer
 #
 class Code < ApplicationRecord
+  include RegexHelper
+  belongs_to :account
 end