Skip to content

Commit 228a856

Browse files
staniel359staniel359
committed
Refactor containers
1 parent 491a296 commit 228a856

55 files changed

Lines changed: 633 additions & 595 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎src/components/containers/artist/BaseArtistHorizontalCardContainer.vue‎

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,13 @@
11
<template>
22
<BaseHorizontalCardContainer>
3-
<template #default>
4-
<BaseSegmentContainer
5-
class="basic segment-container"
6-
:is-loading="isLoading"
7-
:error="error"
8-
@refresh="handleRefresh"
9-
>
10-
<slot />
11-
</BaseSegmentContainer>
12-
</template>
3+
<BaseSegmentContainer
4+
class="basic segment-container"
5+
:is-loading="isLoading"
6+
:error="error"
7+
@refresh="handleRefresh"
8+
>
9+
<slot />
10+
</BaseSegmentContainer>
1311
</BaseHorizontalCardContainer>
1412
</template>
1513

‎src/components/containers/modals/BasePaginatedSegmentModalContainer.vue‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
<template>
2+
<BaseModalContainer
3+
ref="modal"
4+
@show.once="handleCall"
5+
>
6+
<BasePaginatedSegmentContainer
7+
ref="segment"
8+
:class="[
9+
'basic scrolling content',
10+
'main-scrolling-segment',
11+
{
12+
'main-modal-content-full-height':
13+
responseData
14+
}
15+
]"
16+
:slot-props-data="slotPropsData"
17+
:response-data-name="responseDataName"
18+
:scope="scope"
19+
:limit="limit"
20+
@focus="handleFocus"
21+
>
22+
<template #default="slotProps">
23+
<slot
24+
:[scope]="slotProps[scope]"
25+
/>
26+
</template>
27+
</BasePaginatedSegmentContainer>
28+
</BaseModalContainer>
29+
</template>
30+
31+
<script>
32+
import BaseModalContainer
33+
from '*/components/containers/modals/BaseModalContainer.vue'
34+
import BasePaginatedSegmentContainer
35+
from '*/components/containers/segments/BasePaginatedSegmentContainer.vue'
36+
37+
export default {
38+
name: 'BasePaginatedSegmentModalContainer',
39+
components: {
40+
BaseModalContainer,
41+
BasePaginatedSegmentContainer
42+
},
43+
props: {
44+
slotPropsData: Object,
45+
responseDataName: String,
46+
scope: String,
47+
limit: Number
48+
},
49+
emits: [
50+
'call'
51+
],
52+
computed: {
53+
responseData () {
54+
return this.slotPropsData[
55+
this.responseDataName
56+
]
57+
}
58+
},
59+
methods: {
60+
handleCall () {
61+
this.$emit(
62+
'call'
63+
)
64+
},
65+
handleFocus () {
66+
this.scrollToTop()
67+
},
68+
show () {
69+
this.$refs
70+
.modal
71+
.show()
72+
},
73+
hide () {
74+
this.$refs
75+
.modal
76+
.hide()
77+
},
78+
scrollToTop () {
79+
this.$refs
80+
.segment
81+
.scrollToTop()
82+
}
83+
}
84+
}
85+
</script>
86+
87+
<style lang="sass" scoped></style>

src/components/containers/modals/BaseModalContentContainer.vue renamed to src/components/containers/modals/BaseSegmentModalContainer.vue

Lines changed: 3 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -5,16 +5,9 @@
55
>
66
<BaseSegmentContainer
77
ref="segment"
8-
:class="[
9-
'basic scrolling content',
10-
'main-scrolling-segment',
11-
{
12-
'main-modal-content-full-height':
13-
responseData
14-
}
15-
]"
8+
class="basic scrolling content"
169
:is-loading="isLoading"
17-
:error="errorConditional"
10+
:error="error"
1811
@refresh="handleRefresh"
1912
>
2013
<slot
@@ -31,7 +24,7 @@ import BaseSegmentContainer
3124
from '*/components/containers/segments/BaseSegmentContainer.vue'
3225
3326
export default {
34-
name: 'BaseModalContentContainer',
27+
name: 'BaseSegmentModalContainer',
3528
components: {
3629
BaseModalContainer,
3730
BaseSegmentContainer
@@ -45,21 +38,6 @@ export default {
4538
'call',
4639
'refresh'
4740
],
48-
computed: {
49-
errorConditional () {
50-
if (this.isError) {
51-
return this.error
52-
} else {
53-
return null
54-
}
55-
},
56-
isError () {
57-
return !!(
58-
!this.responseData &&
59-
this.error
60-
)
61-
}
62-
},
6341
methods: {
6442
handleCall () {
6543
this.$emit(

‎src/components/containers/modals/album/BaseAlbumModalContainer.vue‎

Lines changed: 13 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,22 @@
11
<template>
2-
<BaseModalContentContainer
2+
<BaseSegmentModalContainer
33
ref="modal"
44
:key="key"
55
:response-data="albumData"
66
:is-loading="isLoading"
77
:error="error"
8-
@call="handleModalCall"
9-
@refresh="handleModalRefresh"
8+
@call="handleCall"
9+
@refresh="handleRefresh"
1010
>
11-
<template #default>
12-
<slot
13-
:[scope]="albumData[scope]"
14-
/>
15-
</template>
16-
</BaseModalContentContainer>
11+
<slot
12+
:[scope]="albumData[scope]"
13+
/>
14+
</BaseSegmentModalContainer>
1715
</template>
1816

1917
<script>
20-
import BaseModalContentContainer
21-
from '*/components/containers/modals/BaseModalContentContainer.vue'
18+
import BaseSegmentModalContainer
19+
from '*/components/containers/modals/BaseSegmentModalContainer.vue'
2220
import getAlbum from '*/helpers/actions/api/album/get'
2321
import {
2422
generateKey
@@ -27,7 +25,7 @@ import {
2725
export default {
2826
name: 'BaseAlbumModalContainer',
2927
components: {
30-
BaseModalContentContainer
28+
BaseSegmentModalContainer
3129
},
3230
props: {
3331
requestAlbumData: {
@@ -59,18 +57,18 @@ export default {
5957
requestAlbumData: 'handleRequestAlbumDataChange'
6058
},
6159
methods: {
62-
handleModalCall () {
60+
getAlbum,
61+
handleCall () {
6362
this.fetchData()
6463
},
65-
handleModalRefresh () {
64+
handleRefresh () {
6665
this.fetchData()
6766
},
6867
handleRequestAlbumDataChange () {
6968
this.albumData = null
7069
7170
this.key = generateKey()
7271
},
73-
getAlbum,
7472
fetchData () {
7573
this.getAlbum(
7674
this.albumArgs

‎src/components/containers/modals/artist/BaseArtistModalContainer.vue‎

Lines changed: 13 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,27 @@
11
<template>
2-
<BaseModalContentContainer
2+
<BaseSegmentModalContainer
33
ref="modal"
44
:response-data="artistData"
55
:is-loading="isLoading"
66
:error="error"
7-
@call="handleModalCall"
8-
@refresh="handleModalRefresh"
7+
@call="handleCall"
8+
@refresh="handleRefresh"
99
>
10-
<template #default>
11-
<slot
12-
:[scope]="artistData[scope]"
13-
/>
14-
</template>
15-
</BaseModalContentContainer>
10+
<slot
11+
:[scope]="artistData[scope]"
12+
/>
13+
</BaseSegmentModalContainer>
1614
</template>
1715

1816
<script>
19-
import BaseModalContentContainer
20-
from '*/components/containers/modals/BaseModalContentContainer.vue'
17+
import BaseSegmentModalContainer
18+
from '*/components/containers/modals/BaseSegmentModalContainer.vue'
2119
import getArtist from '*/helpers/actions/api/artist/get'
2220
2321
export default {
2422
name: 'BaseArtistModalContainer',
2523
components: {
26-
BaseModalContentContainer
24+
BaseSegmentModalContainer
2725
},
2826
props: {
2927
artistName: {
@@ -51,13 +49,13 @@ export default {
5149
}
5250
},
5351
methods: {
54-
handleModalCall () {
52+
getArtist,
53+
handleCall () {
5554
this.fetchData()
5655
},
57-
handleModalRefresh () {
56+
handleRefresh () {
5857
this.fetchData()
5958
},
60-
getArtist,
6159
fetchData () {
6260
this.getArtist(
6361
this.artistArgs

0 commit comments

Comments
 (0)