2020-04-22 19:07:51 +05:30
< script >
import { mapState , mapActions , mapGetters } from 'vuex' ;
import {
GlSprintf ,
GlLink ,
GlFormGroup ,
GlButton ,
GlIcon ,
GlTooltipDirective ,
GlFormInput ,
} from '@gitlab/ui' ;
export default {
name : 'AssetLinksForm' ,
components : { GlSprintf , GlLink , GlFormGroup , GlButton , GlIcon , GlFormInput } ,
directives : { GlTooltip : GlTooltipDirective } ,
computed : {
... mapState ( 'detail' , [ 'release' , 'releaseAssetsDocsPath' ] ) ,
... mapGetters ( 'detail' , [ 'validationErrors' ] ) ,
} ,
created ( ) {
this . ensureAtLeastOneLink ( ) ;
} ,
methods : {
... mapActions ( 'detail' , [
'addEmptyAssetLink' ,
'updateAssetLinkUrl' ,
'updateAssetLinkName' ,
'removeAssetLink' ,
] ) ,
onAddAnotherClicked ( ) {
this . addEmptyAssetLink ( ) ;
} ,
onRemoveClicked ( linkId ) {
this . removeAssetLink ( linkId ) ;
this . ensureAtLeastOneLink ( ) ;
} ,
onUrlInput ( linkIdToUpdate , newUrl ) {
this . updateAssetLinkUrl ( { linkIdToUpdate , newUrl } ) ;
} ,
onLinkTitleInput ( linkIdToUpdate , newName ) {
this . updateAssetLinkName ( { linkIdToUpdate , newName } ) ;
} ,
hasDuplicateUrl ( link ) {
return Boolean ( this . getLinkErrors ( link ) . isDuplicate ) ;
} ,
hasBadFormat ( link ) {
return Boolean ( this . getLinkErrors ( link ) . isBadFormat ) ;
} ,
hasEmptyUrl ( link ) {
return Boolean ( this . getLinkErrors ( link ) . isUrlEmpty ) ;
} ,
hasEmptyName ( link ) {
return Boolean ( this . getLinkErrors ( link ) . isNameEmpty ) ;
} ,
getLinkErrors ( link ) {
return this . validationErrors . assets . links [ link . id ] || { } ;
} ,
isUrlValid ( link ) {
return ! this . hasDuplicateUrl ( link ) && ! this . hasBadFormat ( link ) && ! this . hasEmptyUrl ( link ) ;
} ,
isNameValid ( link ) {
return ! this . hasEmptyName ( link ) ;
} ,
/ * *
* Make sure the form is never completely empty by adding an
* empty row if the form contains 0 links
* /
ensureAtLeastOneLink ( ) {
if ( this . release . assets . links . length === 0 ) {
this . addEmptyAssetLink ( ) ;
}
} ,
} ,
} ;
< / script >
< template >
< div class = "d-flex flex-column release-assets-links-form" >
< h2 class = "text-4" > { { _ _ ( 'Release assets' ) } } < / h2 >
< p class = "m-0" >
< gl-sprintf
: message = "
_ _ (
'Add %{linkStart}assets%{linkEnd} to your Release. GitLab automatically includes read-only assets, like source code and release evidence.' ,
)
"
>
< template # link = "{ content }" >
< gl-link
: href = "releaseAssetsDocsPath"
target = "_blank"
: aria - label = "__('Release assets documentation')"
>
{ { content } }
< / gl-link >
< / template >
< / gl-sprintf >
< / p >
< h3 class = "text-3" > { { _ _ ( 'Links' ) } } < / h3 >
< p >
{ {
_ _ (
'Point to any links you like: documentation, built binaries, or other related materials. These can be internal or external links from your GitLab instance. Duplicate URLs are not allowed.' ,
)
} }
< / p >
< div
v - for = "(link, index) in release.assets.links"
: key = "link.id"
class = "row flex-column flex-sm-row align-items-stretch align-items-sm-start"
>
< gl-form-group
class = "url-field form-group col"
: label = "__('URL')"
: label - for = "`asset-url-${index}`"
>
< gl-form-input
: id = "`asset-url-${index}`"
ref = "urlInput"
: value = "link.url"
type = "text"
class = "form-control"
: state = "isUrlValid(link)"
@ change = "onUrlInput(link.id, $event)"
/ >
< template # invalid -feedback >
< span v-if = "hasEmptyUrl(link)" class="invalid-feedback d-inline" >
{ { _ _ ( 'URL is required' ) } }
< / span >
< span v -else -if = " hasBadFormat ( link ) " class = "invalid-feedback d-inline" >
< gl-sprintf
: message = "
_ _ (
'URL must start with %{codeStart}http://%{codeEnd}, %{codeStart}https://%{codeEnd}, or %{codeStart}ftp://%{codeEnd}' ,
)
"
>
< template # code = "{ content }" >
< code > { { content } } < / code >
< / template >
< / gl-sprintf >
< / span >
< span v -else -if = " hasDuplicateUrl ( link ) " class = "invalid-feedback d-inline" >
{ { _ _ ( 'This URL is already used for another link; duplicate URLs are not allowed' ) } }
< / span >
< / template >
< / gl-form-group >
< gl-form-group
class = "link-title-field col"
: label = "__('Link title')"
: label - for = "`asset-link-name-${index}`"
>
< gl-form-input
: id = "`asset-link-name-${index}`"
ref = "nameInput"
: value = "link.name"
type = "text"
class = "form-control"
: state = "isNameValid(link)"
@ change = "onLinkTitleInput(link.id, $event)"
/ >
2020-05-24 23:13:21 +05:30
< template # invalid -feedback >
2020-04-22 19:07:51 +05:30
< span v-if = "hasEmptyName(link)" class="invalid-feedback d-inline" >
{ { _ _ ( 'Link title is required' ) } }
< / span >
< / template >
< / gl-form-group >
< div class = "mb-5 mb-sm-3 mt-sm-4 col col-sm-auto" >
< gl-button
v - gl - tooltip
class = "remove-button w-100"
: aria - label = "__('Remove asset link')"
: title = "__('Remove asset link')"
@ click = "onRemoveClicked(link.id)"
>
< gl-icon class = "mr-1 mr-sm-0 mb-1" :size = "16" name = "remove" / >
< span class = "d-inline d-sm-none" > { { _ _ ( 'Remove asset link' ) } } < / span >
< / gl-button >
< / div >
< / div >
< gl-button
ref = "addAnotherLinkButton"
variant = "link"
class = "align-self-end mb-5 mb-sm-0"
@ click = "onAddAnotherClicked"
>
{ { _ _ ( 'Add another link' ) } }
< / gl-button >
< / div >
< / template >