make subject filter optional, add filter summary

Author: samuelcolvin

src/components/grid.vue

@@ -1,8 +1,10 @@
 <template>
   <div class="tcs-grid">
-    <div class="tcs-flex">
-      <div class="subject-select"></div>
+    <div v-if="$root.config.subject_filter">
       <subject_select class="subject-select"></subject_select>
+      <div class="tcs-summary">
+        {{ description }}
+      </div>
     </div>
     <div class="tcs-flex">
       <div v-for="contractor in contractors" class="tcs-col">
@@ -23,8 +25,19 @@ export default {
   components: { subject_select },
   data () {
     // very weird but this works, while $root.contractors used directly in the template above sometimes gives
-    // an array containing one empty object: [object{}]
+    // an array containing one empty object: [object{}] and therefore fails
     return {contractors: this.$root.contractors}
+  },
+  computed: {
+    description () {
+      if (this.$root.selected_subject_id) {
+        const msg_id_suffix = this.$root.contractors.length === 1 ? 'single' : 'plural'
+        return this.$root.get_text('subject_filter_summary_' + msg_id_suffix, {
+          count: this.$root.contractors.length,
+          subject: this.$root.get_selected_subject().name,
+        })
+      }
+    }
   }
 }
 </script>

src/main.js

@@ -87,6 +87,8 @@ const STRINGS = {
   grecaptcha_missing: 'This captcha is required',
   required: ' (Required)',
   subject_filter: 'Filter by subject',
+  subject_filter_summary_single: '{subject}: showing 1 result',
+  subject_filter_summary_plural: '{subject}: showing {count} results',
 }
 
 const MODES = ['grid', 'enquiry', 'enquiry-modal']
@@ -138,6 +140,10 @@ module.exports = function (public_key, config) {
     config.element = '#socket'
   }
 
+  if (config.subject_filter === undefined) {
+    config.subject_filter = true
+  }
+
   if (document.querySelector(config.element) === null) {
     config.console.error(`SOCKET: page element "${config.element}" does not exist, unable to start socket view.`)
     return

src/styles/grid.scss

@@ -6,6 +6,23 @@
 
 .subject-select {
   width: 50%;
+  margin: 0 0 0 auto;
+  padding: 0 2px;
+  box-sizing: border-box;
+}
+
+.tcs-summary {
+  padding: 5px 2px;
+  text-align: right;
+  font-size: 13px;
+  color: #666;
+  min-height: 18px;
+}
+
+@media(max-width: 600px) {
+  .subject-select {
+    width: 100%;
+  }
 }
 
 .tcs-flex {
@@ -51,6 +68,9 @@
 }
 
 @media(max-width: 400px) {
+  .subject-select {
+    width: 100%;
+  }
   .tcs-grid {
     padding: 10px 2px;
   }

test/unit/specs/grid.js

@@ -15,6 +15,7 @@ describe('grid.vue', () => {
       data: {
         contractors: [{name: 'Fred Bloggs', link: '123-fred-bloggs', photo: 'http://path/to/img.jpg'}],
         subjects: [],
+        config: {subject_filter: true},
       },
       methods: {
         get_contractor_list: () => null,