2018-12-20 04:31:32 -05:00
< script >
import { mapState , mapActions } from 'vuex' ;
2020-03-13 08:09:22 -04:00
import { GlSkeletonLoading , GlEmptyState , GlLink } from '@gitlab/ui' ;
2019-11-22 13:06:00 -05:00
import {
getParameterByName ,
historyPushState ,
buildUrlWithCurrentLocation ,
} from '~/lib/utils/common_utils' ;
2020-03-13 08:09:22 -04:00
import { _ _ } from '~/locale' ;
2019-11-22 13:06:00 -05:00
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 ,
2020-03-13 08:09:22 -04:00
GlLink ,
2018-12-20 04:31:32 -05:00
} ,
props : {
projectId : {
type : String ,
required : true ,
} ,
2020-03-13 08:09:22 -04:00
documentationPath : {
2018-12-20 04:31:32 -05:00
type : String ,
required : true ,
} ,
illustrationPath : {
type : String ,
required : true ,
} ,
2020-03-13 08:09:22 -04:00
newReleasePath : {
type : String ,
required : false ,
default : '' ,
} ,
2018-12-20 04:31:32 -05:00
} ,
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 ;
} ,
2020-03-13 08:09:22 -04:00
emptyStateText ( ) {
return _ _ (
"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
} ,
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 >
2020-03-13 08:09:22 -04:00
< div class = "flex flex-column mt-2" >
< gl-link
v - if = "newReleasePath"
: href = "newReleasePath"
: aria - describedby = "shouldRenderEmptyState && 'releases-description'"
class = "btn btn-success align-self-end mb-2 js-new-release-btn"
>
{ { _ _ ( 'New release' ) } }
< / gl-link >
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"
2020-03-13 08:09:22 -04:00
>
< template # description >
< span id = "releases-description" >
{ { emptyStateText } }
< gl-link
: href = "documentationPath"
: aria - label = "__('Releases documentation')"
target = "_blank"
>
{ { _ _ ( 'More information' ) } }
< / gl-link >
< / span >
< / template >
< / gl-empty-state >
2018-12-20 04:31:32 -05:00
< 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 >