@worksafevictoria/wcl7.5 1.9.0 → 1.11.0

package/src/components/Paragraphs/Directory/Asbestos/Records/SingleRecord/index.vue

@@ -3,137 +3,133 @@
     <!-- Main details -->
     <container>
       <row class="records">
-        <column md="2" sm="12" class="title" >
-          <a name="titleLink" v-if="item.title" href="javascript:void(0)" :aria-expanded="visible ? 'true' : 'false'" @click="this.visible = !this.visible">
+        <column md="2" sm="12" class="title">
+          <a
+            name="titleLink"
+            v-if="item.title"
+            href="javascript:void(0)"
+            :aria-expanded="visible ? 'true' : 'false'"
+            @click="this.visible = !this.visible"
+          >
             {{ item.title }}
           </a>
         </column>
-        <column md="2" sm="12" class="address" >
+        <column md="2" sm="12" class="address">
           <div class="label">Location</div>
-          <a v-if="item.fullAddress" target="_blank" :href="gMapLink"><span class="sr-only visually-hidden">Address</span>
+          <a v-if="item.fullAddress" target="_blank" :href="gMapLink"
+            ><span class="sr-only visually-hidden">Address</span>
             {{ item.fullAddress }}
           </a>
         </column>
-        <column md="2" sm="12" class="coldata longstring" >
+        <column md="2" sm="12" class="coldata longstring">
           <div class="label">Email</div>
-          <a v-if="item.email" target="_blank" :href="`mailto:${item.email}`"><span class="sr-only visually-hidden">Email address</span>
+          <a v-if="item.email" target="_blank" :href="`mailto:${item.email}`"
+            ><span class="sr-only visually-hidden">Email address</span>
             {{ item.email }}
           </a>
         </column>
-        <column md="3" sm="12" class="coldata longstring" >
+        <column md="3" sm="12" class="coldata longstring">
           <div class="label">Website</div>
-          <a v-if="item.website" target="_blank" :href="`${item.website}`"><span class="sr-only visually-hidden">Website address</span>
+          <a v-if="item.website" target="_blank" :href="`${item.website}`"
+            ><span class="sr-only visually-hidden">Website address</span>
             {{ item.website }}
           </a>
         </column>
-        <column md="2" sm="12" class="coldata" >
+        <column md="2" sm="12" class="coldata">
           <div class="label">Phone</div>
-          <a v-if="item.workPhone || item.mobilePhone" :href="`tel:${item.workPhone || item.mobilePhone}`"><span class="sr-only visually-hidden">Phone number</span>
+          <a
+            v-if="item.workPhone || item.mobilePhone"
+            :href="`tel:${item.workPhone || item.mobilePhone}`"
+            ><span class="sr-only visually-hidden">Phone number</span>
             {{ item.workPhone || item.mobilePhone }}
           </a>
         </column>
       </row>
-      <div class="dir-caret" >
+      <div class="dir-caret">
         <a v-if="visible" href="javascript:void(0)" @click="this.visible = false">
-          <img
-            :src="CaretUp"
-            height="12"
-            width="17"
-            alt="Expand Detail">
+          <img :src="CaretUp" height="12" width="17" alt="collapse icon" />
         </a>
         <a v-if="!visible" href="javascript:void(0)" @click="this.visible = true">
-          <img
-            :src="CaretDown"
-            height="12"
-            width="17"
-            alt="Expand Detail">
+          <img :src="CaretDown" height="12" width="17" alt="expand icon" />
         </a>
       </div>
     </container>
-    
+
     <!-- Additional Content -->
     <container>
       <div v-if="this.visible">
-      <div style="padding-top: 20px;">
-        <hr>
-      </div>
-      <!-- Contacts, if any -->
-      <div v-if="validContacts">
-        <row >
-        <column >
-          <h4>Contact Information</h4>
-        </column>
-      </row>
-      <row v-if="item.contact1 !== ''">
-        <column sm="2" class="label" >
-          Contact
-        </column>
-        <column sm="4" class="dir-additional-records">
-          {{item.contact1}}
-        </column>
-      </row>
-      <row v-if="item.phone1 !== ''">
-        <column sm="2" class="label" >
-          Phone
-        </column>
-        <column sm="4" class="dir-additional-records" >
-          {{item.phone1}}
-        </column>
-      </row>
-      <row v-if="item.mobile1 !== ''">
-        <column sm="2" class="label" >
-          Mobile
-        </column>
-        <column sm="4" class="dir-additional-records" >
-          {{item.mobile1}}
-        </column>
-      </row>
-      <row v-if="item.email1 !== ''">
-        <column sm="2" class="label" >
-          Email
-        </column>
-        <column sm="4" class="dir-additional-records">
-          {{item.email1}}
-        </column>
-      </row>
+        <div style="padding-top: 20px">
+          <hr />
+        </div>
+        <!-- Contacts, if any -->
+        <div v-if="validContacts">
+          <row>
+            <column>
+              <h4>Contact Information</h4>
+            </column>
+          </row>
+          <row v-if="item.contact1 !== ''">
+            <column sm="2" class="label"> Contact </column>
+            <column sm="4" class="dir-additional-records">
+              {{ item.contact1 }}
+            </column>
+          </row>
+          <row v-if="item.phone1 !== ''">
+            <column sm="2" class="label"> Phone </column>
+            <column sm="4" class="dir-additional-records">
+              {{ item.phone1 }}
+            </column>
+          </row>
+          <row v-if="item.mobile1 !== ''">
+            <column sm="2" class="label"> Mobile </column>
+            <column sm="4" class="dir-additional-records">
+              {{ item.mobile1 }}
+            </column>
+          </row>
+          <row v-if="item.email1 !== ''">
+            <column sm="2" class="label"> Email </column>
+            <column sm="4" class="dir-additional-records">
+              {{ item.email1 }}
+            </column>
+          </row>
+        </div>
+        <div v-if="item.serviceCategory">
+          <row class="row-dir-additional">
+            <column>
+              <h4>{{ item.serviceCategory }}</h4>
+            </column>
+          </row>
+          <row class="dir-additional-records">
+            <column>
+              <ul>
+                <li v-for="serv in item.services.split(',')" :key="serv.id">
+                  {{ serv }}
+                </li>
+              </ul>
+            </column>
+          </row>
+        </div>
       </div>
-     <div v-if="item.serviceCategory">
-      <row class="row-dir-additional">
-        <column>
-          <h4> {{ item.serviceCategory }}</h4>
-        </column>
-      </row>
-      <row class="dir-additional-records">
-        <column  >
-          <ul>
-            <li v-for="(serv) in item.services.split(',')" :key="serv.id">
-              {{serv}}
-            </li>
-          </ul> 
-        </column>
-      </row>
-     </div>
-    </div>
     </container>
   </div>
 </template>
 <script>
-import Container from '../../../../../Containers/Container/index.vue'
-import Row from '../../../../../Containers/Row/index.vue'
-import Column from '../../../../../Containers/Column/index.vue'
-import CaretUp from './../../../../../../assets/icons/caret-up.svg?url'
-import CaretDown from './../../../../../../assets/icons/caret-down.svg?url'
+import Container from "../../../../../Containers/Container/index.vue";
+import Row from "../../../../../Containers/Row/index.vue";
+import Column from "../../../../../Containers/Column/index.vue";
+import CaretUp from "./../../../../../../assets/icons/caret-up.svg?url";
+import CaretDown from "./../../../../../../assets/icons/caret-down.svg?url";
 
 export default {
   components: {
     Container,
     Row,
     Column,
-},
+  },
   props: {
     item: {
       type: Object,
-      required: true
+      required: true,
     },
   },
   data() {
@@ -141,42 +137,43 @@ export default {
       visible: false,
       CaretUp,
       CaretDown,
-    }
+    };
   },
   computed: {
     gMapLink() {
-      return `https://google.com/maps?q=${this.item.fullAddress}`
+      return `https://google.com/maps?q=${this.item.fullAddress}`;
     },
     validContacts() {
-      if (this.item.contact1 === '' && this.item.phone1 === '' && this.item.email1 === '' && this.item.mobile1 === '') {
-        return false
+      if (
+        this.item.contact1 === "" &&
+        this.item.phone1 === "" &&
+        this.item.email1 === "" &&
+        this.item.mobile1 === ""
+      ) {
+        return false;
       } else {
-        return true
+        return true;
       }
-    }
-
+    },
   },
   methods: {
     handleClick(title) {
-      this.visible = !this.visible
+      this.visible = !this.visible;
       if (this.$gtm) {
         if (this.visible) {
-          this.$gtm.push({ event: 'custom.search.prs.open', title })
+          this.$gtm.push({ event: "custom.search.prs.open", title });
         } else {
           this.$gtm.push({
-            event: 'custom.search.prs.close',
-            title
-          })
+            event: "custom.search.prs.close",
+            title,
+          });
         }
       }
-    }
-  }
-}
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
-
-@import '../../../HSCP/Records/SingleRecord/styles.scss'
-
+@import "../../../HSCP/Records/SingleRecord/styles.scss";
 </style>
-