TT#37654 Filter PBXDevices by phone model

What has been done:
- TT#37670, Implement field for model selection with "apply filter on
  select" handling
- TT#37673, Implement API method with filtering by query parameter
- TT#37654, Implement reset button with reset functionality
- TT#37675, Implement UI labels

Change-Id: I051f9a57fc3393ec6555ab12bc0a2f50e9457b46

src/api/pbx-config.js

@@ -198,6 +198,15 @@ export function getDeviceList(page) {
     });
 }
 
+export function filterDeviceList(params) {
+    let defaultParams = {
+        order_by: PBX_CONFIG_ORDER_BY,
+        order_by_direction: PBX_CONFIG_ORDER_DIRECTION
+    };
+    let mergedParams = _.merge(defaultParams, params);
+    return getDevices({ params: mergedParams });
+}
+
 export function addGroup(group) {
     return new Promise((resolve, reject)=>{
         Promise.resolve().then(()=>{

src/components/pages/PbxConfiguration/CscPbxDevices.vue

@@ -1,20 +1,60 @@
 <template>
-    <csc-page :title="$t('pbxConfig.devicesTitle')" class="csc-list-page">
-        <div v-if="isListLoadingVisible" class="row justify-center">
-            <q-spinner-dots color="primary" :size="40" />
+    <csc-page
+        :title="$t('pbxConfig.devicesTitle')"
+        class="csc-list-page"
+    >
+        <q-select
+            v-model="profile"
+            :float-label="$t('pbxConfig.filterPhoneModel')"
+            :options="profileOptions"
+            @change="filterByProfile"
+            :after="modelButtons"
+            :class="{ 'filter-model-select': this.platform.mobile }"
+        />
+        <div
+            v-if="isListLoadingVisible"
+            class="row justify-center"
+        >
+            <q-spinner-dots
+                color="primary"
+                :size="40"
+            />
         </div>
-        <div v-if="devices.length > 0 && !isListRequesting && listLastPage > 1" class="row justify-center">
-            <q-pagination :value="listCurrentPage" :max="listLastPage" @change="changePage" />
+        <div
+            v-if="devices.length > 0 && !isListRequesting && listLastPage > 1"
+            class="row justify-center"
+        >
+            <q-pagination
+                :value="listCurrentPage"
+                :max="listLastPage"
+                @change="changePage"
+            />
         </div>
-        <q-list no-border separator sparse multiline>
+        <q-list
+            no-border
+            separator
+            sparse
+            multiline
+        >
             <q-item> </q-item>
-            <csc-pbx-device v-for="device in devices" :key="device.id" :device="device" @remove="removeDevice"
-                            :modelOptions="modelOptions" :loading="isDeviceLoading(device.id)"
-                            :groupsAndSeatsOptions="groupsAndSeatsOptions" :subscribers="getGroupOrSeatById"
-                            @loadGroupsAndSeats="loadGroupsAndSeats()"  @deviceKeysChanged="deviceKeysChanged" />
+            <csc-pbx-device
+                v-for="device in devices"
+                :key="device.id"
+                :device="device"
+                @remove="removeDevice"
+                :modelOptions="modelOptions"
+                :loading="isDeviceLoading(device.id)"
+                :groupsAndSeatsOptions="groupsAndSeatsOptions"
+                :subscribers="getGroupOrSeatById"
+                @loadGroupsAndSeats="loadGroupsAndSeats()"
+                @deviceKeysChanged="deviceKeysChanged"
+            />
         </q-list>
-        <div v-if="devices.length === 0 && !isListRequesting" class="row justify-center csc-no-entities">
-            {{ $t('pbxConfig.noDevices') }}
+        <div
+            v-if="devices.length === 0 && !isListRequesting"
+            class="row justify-center csc-no-entities"
+        >
+            {{ noDeviceMessage }}
         </div>
     </csc-page>
 </template>
@@ -23,18 +63,30 @@
     import { mapGetters } from 'vuex'
     import CscPage  from '../../CscPage'
     import CscPbxDevice from './CscPbxDevice'
-    import { QSpinnerDots, QPagination, QList, Dialog, QItem } from 'quasar-framework'
-    import { showToast } from '../../../helpers/ui'
+    import {
+        showGlobalError,
+        showToast
+    } from '../../../helpers/ui'
+    import {
+        QSpinnerDots,
+        QPagination,
+        QList,
+        Dialog,
+        QItem,
+        QBtn,
+        QSelect
+    } from 'quasar-framework'
 
     export default {
         data () {
             return {
+                profile: null,
+                platform: this.$q.platform.is
             }
         },
         mounted() {
-            this.$store.dispatch('pbxConfig/listDevices', {
-                page: 1
-            });
+            this.listDevices();
+            this.$store.dispatch('pbxConfig/listProfiles');
         },
         components: {
             CscPage,
@@ -43,7 +95,9 @@
             QPagination,
             QList,
             Dialog,
-            QItem
+            QItem,
+            QBtn,
+            QSelect
         },
         computed: {
             ...mapGetters('pbxConfig', [
@@ -58,10 +112,45 @@
                 'groupsAndSeatsOptions',
                 'groupsAndSeats',
                 'getGroupOrSeatById',
-                'updatedDeviceKey'
-            ])
+                'updatedDeviceKey',
+                'profileOptions',
+                'listProfilesState',
+                'listProfilesError'
+            ]),
+            noDeviceMessage() {
+                if (this.profile) {
+                    return this.$t('pbxConfig.noModel');
+                }
+                else {
+                    return this.$t('pbxConfig.noDevices');
+                }
+            },
+            modelButtons() {
+                let self = this;
+                let buttons = [];
+                if (this.profile) {
+                    buttons = [{
+                        icon: 'clear',
+                        error: false,
+                        handler (event) {
+                            event.stopPropagation();
+                            self.resetFilter();
+                        }
+                    }];
+                }
+                return buttons;
+            }
         },
         methods: {
+            resetFilter() {
+                this.profile = null;
+                this.listDevices();
+            },
+            filterByProfile(profile) {
+                this.$store.dispatch('pbxConfig/filterDevices', {
+                    profile_id: profile
+                });
+            },
             changePage(page) {
                 this.$store.dispatch('pbxConfig/listDevices', {
                     page: page
@@ -93,6 +182,11 @@
             },
             deviceKeysChanged(data) {
                 this.$store.dispatch('pbxConfig/updateDeviceKeys', data);
+            },
+            listDevices() {
+                this.$store.dispatch('pbxConfig/listDevices', {
+                    page: 1
+                });
             }
         },
         watch: {
@@ -109,11 +203,19 @@
                         name: data.device.station_name
                     }));
                 }
+            },
+            listProfilesState(state) {
+                if (state === 'failed') {
+                    showGlobalError(this.listProfilesError);
+                }
             }
         }
     }
 </script>
 
 <style lang="stylus" rel="stylesheet/stylus">
-    @import '../../../themes/app.common';
+
+    .filter-model-select
+        margin 16px 16px 8px 16px
+
 </style>

src/locales/en.json

@@ -281,6 +281,7 @@
         "groupsTitle": "Groups",
         "seatsTitle": "Seats",
         "noDevices": "No devices created yet",
+        "noModel": "Could not find any device with model matching the filter criteria",
         "noGroups": "No groups created yet",
         "noSeats": "No seats created yet",
         "toasts": {
@@ -304,7 +305,8 @@
         "keyBothLabel": "Group/Seat",
         "keyTypeShared": "Shared",
         "keyTypeBLF": "Busy Lamp Field",
-        "keyTypePrivate": "Private"
+        "keyTypePrivate": "Private",
+        "filterPhoneModel": "Filter by phone model"
     },
     "communication": {
         "sendFax": "Send Fax",

src/store/pbx-config/actions.js

@@ -5,7 +5,8 @@ import { assignNumbers } from '../../api/user';
 import { addGroup, removeGroup, addSeat, removeSeat, setGroupName,
     setGroupExtension, setGroupHuntPolicy, setGroupHuntTimeout, updateDeviceKeys,
     updateGroupSeats, setSeatName, setSeatExtension, removeDevice, getAllGroupsAndSeats,
-    updateSeatGroups, getGroupList, getSeatList, getDeviceList, getDevice } from '../../api/pbx-config'
+    updateSeatGroups, getGroupList, getSeatList, getDeviceList, filterDeviceList,
+    getProfiles, getDevice } from '../../api/pbx-config'
 
 export default {
     listGroups(context, options) {
@@ -238,5 +239,26 @@ export default {
         }).catch((err)=>{
             context.commit('updateDeviceKeyFailed', data.device.id, err);
         });
+    },
+    filterDevices(context, params) {
+        context.commit('deviceListRequesting', {
+            silent: false
+        });
+        filterDeviceList(params).then((devices)=>{
+            context.commit('deviceListSucceeded', devices);
+            devices.items.forEach((device)=>{
+                context.dispatch('loadDevice', device.id);
+            });
+        }).catch((err)=>{
+            context.commit('deviceListFailed', err.message);
+        });
+    },
+    listProfiles(context) {
+        context.commit('listProfilesRequesting');
+        getProfiles({ all: true }).then((profiles)=>{
+            context.commit('listProfilesSucceeded', profiles);
+        }).catch((err)=>{
+            context.commit('listProfilesFailed', err.message);
+        });
     }
 }

src/store/pbx-config/getters.js

@@ -57,7 +57,7 @@ export default {
         return (state.listLoadingSilently === true);
     },
     pilotId(state) {
-        return state.pilot.id;
+        return state.pilot ? state.pilot.id : null;
     },
     isAdding(state) {
         return state.addState === RequestState.requesting;
@@ -212,5 +212,21 @@ export default {
     },
     updatedDeviceKey(state) {
         return state.updatedDeviceKey;
+    },
+    profileOptions(state) {
+        let profileOptions = [];
+        state.profilesOrdered.forEach((profile) => {
+            profileOptions.push({
+                label: profile.name,
+                value: profile.id
+            });
+        });
+        return profileOptions;
+    },
+    listProfilesState(state) {
+        return state.listState;
+    },
+    listProfilesError(state) {
+        return state.listError;
     }
 }

src/store/pbx-config/mutations.js

@@ -226,5 +226,22 @@ export default {
         Vue.set(state.deviceStates, deviceId + "", RequestState.failed);
         Vue.set(state.deviceErrors, deviceId + "", error);
         state.updatedDeviceKey = null;
+    },
+    listProfilesRequesting(state) {
+        state.listProfilesState = RequestState.requesting;
+        state.listProfilesError = null;
+    },
+    listProfilesSucceeded(state, profiles) {
+        state.listProfilesState = RequestState.succeeded;
+        state.listProfilesError = null;
+        state.profiles = profiles;
+        profiles.items.forEach((profile)=>{
+            state.profiles[profile.id] = profile;
+            state.profilesOrdered.push(profile);
+        });
+    },
+    listProfilesFailed(state, error) {
+        state.listProfilesState = RequestState.failed;
+        state.listProfilesError = error;
     }
 }

src/store/pbx-config/state.js

@@ -45,5 +45,7 @@ export default {
     groupsAndSeats: [],
     groupsAndSeatsState: RequestState.initiated,
     groupsAndSeatsError: null,
-    updatedDeviceKey: null
+    updatedDeviceKey: null,
+    listProfilesState: RequestState.initiated,
+    listProfilesError: null
 }