@worksafevictoria/wcl7.5 1.1.0-beta.112 → 1.1.0-beta.114
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -3,51 +3,51 @@
|
|
|
3
3
|
<!-- Main details -->
|
|
4
4
|
<container>
|
|
5
5
|
<row class="records">
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
6
|
+
<column md="2" sm="12" class="title" >
|
|
7
|
+
<a name="titleLink" v-if="item.title" href="javascript:void(0)" :aria-expanded="visible ? 'true' : 'false'" @click="this.visible = !this.visible">
|
|
8
|
+
{{ item.title }}
|
|
9
|
+
</a>
|
|
10
|
+
</column>
|
|
11
|
+
<column md="2" sm="12" class="address" >
|
|
12
|
+
<a v-if="item.fullAddress" target="_blank" :href="gMapLink"><span class="sr-only visually-hidden">Address</span>
|
|
13
|
+
{{ item.fullAddress }}
|
|
14
|
+
</a>
|
|
15
|
+
</column>
|
|
16
|
+
<column md="2" sm="12" class="coldata longstring" >
|
|
17
|
+
<div class="label">Email</div>
|
|
18
|
+
<a v-if="item.email" target="_blank" :href="`mailto:${item.email}`"><span class="sr-only visually-hidden">Email address</span>
|
|
19
|
+
{{ item.email }}
|
|
20
|
+
</a>
|
|
21
|
+
</column>
|
|
22
|
+
<column md="3" sm="12" class="coldata longstring" >
|
|
23
|
+
<div class="label">Website</div>
|
|
24
|
+
<a v-if="item.website" target="_blank" :href="`${item.website}`"><span class="sr-only visually-hidden">Website address</span>
|
|
25
|
+
{{ item.website }}
|
|
26
|
+
</a>
|
|
27
|
+
</column>
|
|
28
|
+
<column md="2" sm="12" class="coldata" >
|
|
29
|
+
<div class="label">Phone</div>
|
|
30
|
+
<a v-if="item.tollfreePhone || item.workPhone" :href="`tel:${item.tollfreephone || item.workphone}`"><span class="sr-only visually-hidden">Phone number</span>
|
|
31
|
+
{{ item.tollfreePhone || item.workPhone }}
|
|
32
|
+
</a>
|
|
33
|
+
</column>
|
|
34
|
+
</row>
|
|
35
|
+
<div class="hscp-caret" >
|
|
36
|
+
<a v-if="visible" href="javascript:void(0)" @click="this.visible = false">
|
|
37
|
+
<img
|
|
38
|
+
:src="CaretUp"
|
|
39
|
+
height="12"
|
|
40
|
+
width="17"
|
|
41
|
+
alt="Expand Detail">
|
|
26
42
|
</a>
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
43
|
+
<a v-if="!visible" href="javascript:void(0)" @click="this.visible = true">
|
|
44
|
+
<img
|
|
45
|
+
:src="CaretDown"
|
|
46
|
+
height="12"
|
|
47
|
+
width="17"
|
|
48
|
+
alt="Expand Detail">
|
|
32
49
|
</a>
|
|
33
|
-
</
|
|
34
|
-
</row>
|
|
35
|
-
<div class="hscp-caret" >
|
|
36
|
-
<a v-if="visible" href="javascript:void(0)" @click="this.visible = false">
|
|
37
|
-
<img
|
|
38
|
-
:src="CaretUp"
|
|
39
|
-
height="12"
|
|
40
|
-
width="17"
|
|
41
|
-
alt="Expand Detail">
|
|
42
|
-
</a>
|
|
43
|
-
<a v-if="!visible" href="javascript:void(0)" @click="this.visible = true">
|
|
44
|
-
<img
|
|
45
|
-
:src="CaretDown"
|
|
46
|
-
height="12"
|
|
47
|
-
width="17"
|
|
48
|
-
alt="Expand Detail">
|
|
49
|
-
</a>
|
|
50
|
-
</div>
|
|
50
|
+
</div>
|
|
51
51
|
</container>
|
|
52
52
|
|
|
53
53
|
<!-- Additional Content -->
|
|
@@ -156,7 +156,7 @@ export default {
|
|
|
156
156
|
item: {
|
|
157
157
|
type: Object,
|
|
158
158
|
required: true
|
|
159
|
-
}
|
|
159
|
+
},
|
|
160
160
|
},
|
|
161
161
|
data() {
|
|
162
162
|
return {
|
|
@@ -169,6 +169,7 @@ export default {
|
|
|
169
169
|
gMapLink() {
|
|
170
170
|
return `https://google.com/maps?q=${this.item.title}%20${this.item.fullAddress}`
|
|
171
171
|
},
|
|
172
|
+
|
|
172
173
|
},
|
|
173
174
|
methods: {
|
|
174
175
|
handleClick(title) {
|
|
@@ -7,25 +7,25 @@
|
|
|
7
7
|
<label class="visually-hidden" for="search-directory">
|
|
8
8
|
Search by keyword (typed keyword automatically filters below results)
|
|
9
9
|
</label>
|
|
10
|
-
<input type="text" v-model="searchOrg" placeholder="
|
|
10
|
+
<input type="text" v-model="searchOrg" placeholder="Organisation" class="search">
|
|
11
11
|
</column>
|
|
12
12
|
<column xxl="2" xl="3" md="4" sm="6">
|
|
13
13
|
<label class="visually-hidden" for="search-directory">
|
|
14
14
|
Search by suburb (typed suburb automatically filters below results)
|
|
15
15
|
</label>
|
|
16
|
-
<input type="text" v-model="searchSub" placeholder="
|
|
16
|
+
<input type="text" v-model="searchSub" placeholder="Training location" class="search">
|
|
17
17
|
</column>
|
|
18
18
|
<!-- Other Filters -->
|
|
19
19
|
<column xxl="2" xl="3" md="4" sm="6">
|
|
20
20
|
<select id="filterType" v-model="searchCourse" name="filter" class="selectClass">
|
|
21
|
-
<option class="placeholder" value="" disabled hidden selected>
|
|
21
|
+
<option class="placeholder" value="" disabled hidden selected>Course type</option>
|
|
22
22
|
<option value="HSR Initial">HSR Initial</option>
|
|
23
23
|
<option value="HSR Refresher">HSR Refresher</option>
|
|
24
24
|
</select>
|
|
25
25
|
</column>
|
|
26
26
|
<column xxl="2" xl="3" md="4" sm="6">
|
|
27
27
|
<select id="filterTheme" v-model="searchThemes" name="filter1" class="selectClass">
|
|
28
|
-
<option class="placeholder" value="" disabled hidden selected>
|
|
28
|
+
<option class="placeholder" value="" disabled hidden selected>Theme</option>
|
|
29
29
|
<option v-for="(opt, i) in themeOptions" :key="i" :value="opt">
|
|
30
30
|
{{ opt }}
|
|
31
31
|
</option>
|
|
@@ -42,9 +42,9 @@
|
|
|
42
42
|
</column>
|
|
43
43
|
</row>
|
|
44
44
|
<!-- HSCP Records -->
|
|
45
|
-
<div class="hscpRecords">
|
|
46
|
-
<template v-for="(item, index) in resultChunks[page]">
|
|
47
|
-
<hscp-record v-if="item.type === 'hscp'" :key="index" :item="item"
|
|
45
|
+
<div class="hscpRecords" >
|
|
46
|
+
<template v-for="(item, index) in resultChunks[page]" >
|
|
47
|
+
<hscp-record v-if="item.type === 'hscp'" :key="index" :item="item"/>
|
|
48
48
|
</template>
|
|
49
49
|
</div>
|
|
50
50
|
<div v-if="filteredRecords.length > 0" align-items="center">
|
|
@@ -88,7 +88,7 @@ export default {
|
|
|
88
88
|
perPage: 10,
|
|
89
89
|
page: 0,
|
|
90
90
|
searchIcon,
|
|
91
|
-
hideReset: true
|
|
91
|
+
hideReset: true
|
|
92
92
|
}
|
|
93
93
|
},
|
|
94
94
|
props: {
|
|
@@ -137,7 +137,7 @@ export default {
|
|
|
137
137
|
|
|
138
138
|
filteredRecords() {
|
|
139
139
|
let results = this.flatRecords
|
|
140
|
-
|
|
140
|
+
|
|
141
141
|
if (this.searchOrg.length) {
|
|
142
142
|
this.hideReset = false
|
|
143
143
|
results = results.filter(item => item.title.toLowerCase().includes(this.searchOrg.toLowerCase()))
|
|
@@ -155,6 +155,11 @@ export default {
|
|
|
155
155
|
results = results.filter(item => item.courses.toLowerCase().includes(this.searchThemes.toLowerCase()))
|
|
156
156
|
}
|
|
157
157
|
this.filteredItems = results
|
|
158
|
+
|
|
159
|
+
if (this.searchOrg.length || this.searchSub.length || this.searchCourse.length || this.searchThemes.length) {
|
|
160
|
+
this.pageChanged(1)
|
|
161
|
+
}
|
|
162
|
+
|
|
158
163
|
return results
|
|
159
164
|
},
|
|
160
165
|
|
|
@@ -244,30 +249,23 @@ export default {
|
|
|
244
249
|
|
|
245
250
|
pageChanged(ev) {
|
|
246
251
|
this.page = ev - 1
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
const top = element.offsetTop
|
|
256
|
-
|
|
257
|
-
const buttons = [...element.querySelectorAll('button')]
|
|
258
|
-
if (Array.isArray(buttons) && buttons.length > 0) {
|
|
259
|
-
buttons
|
|
260
|
-
.filter((button) => button.getAttribute('aria-expanded') === 'true')
|
|
261
|
-
.forEach((button) => button.click())
|
|
252
|
+
|
|
253
|
+
const aLinks = document.getElementsByName('titleLink')
|
|
254
|
+
// Convert nodelist to array
|
|
255
|
+
let linksArr = Array.from(aLinks)
|
|
256
|
+
if (Array.isArray(linksArr) && linksArr.length > 0) {
|
|
257
|
+
linksArr
|
|
258
|
+
.filter((link) => link.getAttribute('aria-expanded') === 'true')
|
|
259
|
+
.forEach((link) => link.click())
|
|
262
260
|
|
|
263
|
-
|
|
261
|
+
if (this.searchOrg.length || this.searchSub.length || this.searchCourse.length || this.searchThemes.length) {
|
|
262
|
+
// don't set focus
|
|
263
|
+
} else {
|
|
264
|
+
linksArr[0].focus()
|
|
264
265
|
}
|
|
265
|
-
|
|
266
|
-
window.scrollTo({
|
|
267
|
-
top,
|
|
268
|
-
behavior: 'smooth',
|
|
269
|
-
})
|
|
266
|
+
|
|
270
267
|
}
|
|
268
|
+
|
|
271
269
|
},
|
|
272
270
|
}
|
|
273
271
|
}
|
|
@@ -16,6 +16,7 @@
|
|
|
16
16
|
:borderless="false"
|
|
17
17
|
:responsive="!isFluid"
|
|
18
18
|
:stacked="!isFluid ? 'sm' : false"
|
|
19
|
+
:must-sort="true"
|
|
19
20
|
>
|
|
20
21
|
<template #head()="data">
|
|
21
22
|
<span
|
|
@@ -133,6 +134,7 @@ export default {
|
|
|
133
134
|
.table td {
|
|
134
135
|
margin: 1rem;
|
|
135
136
|
vertical-align: middle;
|
|
137
|
+
padding: 12px;
|
|
136
138
|
@media screen and (max-width: 540px) {
|
|
137
139
|
margin: 0.5rem;
|
|
138
140
|
}
|
|
@@ -142,6 +144,8 @@ export default {
|
|
|
142
144
|
display: flex;
|
|
143
145
|
flex-direction: row;
|
|
144
146
|
flex-wrap: nowrap;
|
|
147
|
+
align-items: center;
|
|
148
|
+
width: 100%;
|
|
145
149
|
}
|
|
146
150
|
|
|
147
151
|
.rtl {
|
|
@@ -150,7 +154,7 @@ export default {
|
|
|
150
154
|
|
|
151
155
|
.sortImg {
|
|
152
156
|
vertical-align: middle;
|
|
153
|
-
margin-left:
|
|
157
|
+
margin-left: auto;
|
|
154
158
|
}
|
|
155
159
|
|
|
156
160
|
.b-table-sortable-column svg {
|