2018-12-20 04:31:32 -05:00
< script >
import { mapState , mapActions } from 'vuex' ;
2019-01-09 05:24:47 -05:00
import { GlSkeletonLoading , GlEmptyState } from '@gitlab/ui' ;
2019-11-22 13:06:00 -05:00
import {
getParameterByName ,
historyPushState ,
buildUrlWithCurrentLocation ,
} from '~/lib/utils/common_utils' ;
import TablePagination from '~/vue_shared/components/pagination/table_pagination.vue' ;
2018-12-20 04:31:32 -05:00
import ReleaseBlock from './release_block.vue' ;
export default {
name : 'ReleasesApp' ,
components : {
2019-01-09 05:24:47 -05:00
GlSkeletonLoading ,
2018-12-20 04:31:32 -05:00
GlEmptyState ,
ReleaseBlock ,
2019-11-22 13:06:00 -05:00
TablePagination ,
2018-12-20 04:31:32 -05:00
} ,
props : {
projectId : {
type : String ,
required : true ,
} ,
documentationLink : {
type : String ,
required : true ,
} ,
illustrationPath : {
type : String ,
required : true ,
} ,
} ,
computed : {
2020-02-14 16:09:08 -05:00
... mapState ( 'list' , [ 'isLoading' , 'releases' , 'hasError' , 'pageInfo' ] ) ,
2018-12-20 04:31:32 -05:00
shouldRenderEmptyState ( ) {
return ! this . releases . length && ! this . hasError && ! this . isLoading ;
} ,
shouldRenderSuccessState ( ) {
return this . releases . length && ! this . isLoading && ! this . hasError ;
} ,
} ,
created ( ) {
2019-11-22 13:06:00 -05:00
this . fetchReleases ( {
page : getParameterByName ( 'page' ) ,
projectId : this . projectId ,
} ) ;
2018-12-20 04:31:32 -05:00
} ,
methods : {
2020-02-14 16:09:08 -05:00
... mapActions ( 'list' , [ 'fetchReleases' ] ) ,
2019-11-22 13:06:00 -05:00
onChangePage ( page ) {
historyPushState ( buildUrlWithCurrentLocation ( ` ?page= ${ page } ` ) ) ;
this . fetchReleases ( { page , projectId : this . projectId } ) ;
} ,
2018-12-20 04:31:32 -05:00
} ,
} ;
< / script >
< template >
< div class = "prepend-top-default" >
2019-01-09 05:24:47 -05:00
< gl-skeleton-loading v-if = "isLoading" class="js-loading" / >
2018-12-20 04:31:32 -05:00
< gl-empty-state
v - else - if = "shouldRenderEmptyState"
class = "js-empty-state"
: title = "__('Getting started with releases')"
: svg - path = "illustrationPath"
: description = "
_ _ (
2020-01-10 13:07:43 -05:00
'Releases are based on Git tags and mark specific points in a project\'s development history. They can contain information about the type of changes and can also deliver binaries, like compiled versions of your software.' ,
2018-12-20 04:31:32 -05:00
)
"
: primary - button - link = "documentationLink"
: primary - button - text = "__('Open Documentation')"
/ >
< div v -else -if = " shouldRenderSuccessState " class = "js-success-state" >
< release-block
v - for = "(release, index) in releases"
2020-02-24 13:09:05 -05:00
: key = "release.tagName"
2018-12-20 04:31:32 -05:00
: release = "release"
: class = "{ 'linked-card': releases.length > 1 && index !== releases.length - 1 }"
/ >
< / div >
2019-11-22 13:06:00 -05:00
< table-pagination v-if = "!isLoading" :change="onChangePage" :page-info="pageInfo" / >
2018-12-20 04:31:32 -05:00
< / div >
< / template >
< style >
. linked - card : : after {
width : 1 px ;
content : ' ' ;
border : 1 px solid # e5e5e5 ;
height : 17 px ;
top : 100 % ;
position : absolute ;
left : 32 px ;
}
< / style >