@@ -3,9 +3,19 @@ import type {
33 UmbMediaCreateOptionsModalData ,
44 UmbMediaCreateOptionsModalValue ,
55} from './media-create-options-modal.token.js' ;
6- import { html , nothing , customElement , state , ifDefined } from '@umbraco-cms/backoffice/external/lit' ;
6+ import {
7+ html ,
8+ nothing ,
9+ customElement ,
10+ state ,
11+ ifDefined ,
12+ repeat ,
13+ css ,
14+ when ,
15+ } from '@umbraco-cms/backoffice/external/lit' ;
716import { UmbModalBaseElement } from '@umbraco-cms/backoffice/modal' ;
817import { UmbMediaTypeStructureRepository , type UmbAllowedMediaTypeModel } from '@umbraco-cms/backoffice/media-type' ;
18+ import { UmbTextStyles } from '@umbraco-cms/backoffice/style' ;
919
1020@customElement ( 'umb-media-create-options-modal' )
1121export class UmbMediaCreateOptionsModalElement extends UmbModalBaseElement <
@@ -63,21 +73,10 @@ export class UmbMediaCreateOptionsModalElement extends UmbModalBaseElement<
6373 return html `
6474 <umb- body- layout headline= ${ this . _headline ?? '' } >
6575 <uui- box>
66- ${ this . _allowedMediaTypes . length === 0
67- ? html `< umb-localize key ="create_noMediaTypes "> </ umb-localize > `
68- : nothing }
69- ${ this . _allowedMediaTypes . map (
70- ( mediaType ) => html `
71- < uui-ref-node-document-type
72- data-id =${ ifDefined ( mediaType . unique ) }
73- .name =${ mediaType . name }
74- .alias=${ mediaType . description }
75- select-only
76- selectable
77- @selected=${ ( ) => this . #onNavigate( mediaType ) } >
78- ${ mediaType . icon ? html `< umb-icon slot ="icon " name =${ mediaType . icon } > </ umb-icon > ` : nothing }
79- </ uui-ref-node-document-type >
80- ` ,
76+ ${ when (
77+ this . _allowedMediaTypes . length === 0 ,
78+ ( ) => this . #renderNotAllowed( ) ,
79+ ( ) => this . #renderAllowedMediaTypes( ) ,
8180 ) }
8281 </ uui- box>
8382 <uui- butto n
@@ -88,6 +87,46 @@ export class UmbMediaCreateOptionsModalElement extends UmbModalBaseElement<
8887 </ umb- body- layout>
8988 ` ;
9089 }
90+
91+ #renderNotAllowed( ) {
92+ return html `<umb- localize key= "create_noMediaTypes" >
93+ There are no allowed Media Types available for creating media here . You must enable these in
94+ <strong> Media Types </ strong> within the <strong> Settings </ strong> section , by editing the
95+ <strong> Allowed child node types </ strong> under <strong> Permissions </ strong> . </ umb- localize
96+ > <br / >
97+ <uui- butto n
98+ id= "edit-permissions"
99+ look = "secondary"
100+ @click = ${ ( ) => this . _rejectModal ( ) }
101+ href= ${ `/section/settings/workspace/media-type/edit/${ this . data ?. mediaType ?. unique } /view/structure` }
102+ label= ${ this . localize . term ( 'create_noMediaTypesEditPermissions' ) } > </ uui- butto n> ` ;
103+ }
104+
105+ #renderAllowedMediaTypes( ) {
106+ return repeat (
107+ this . _allowedMediaTypes ,
108+ ( mediaType ) => mediaType . unique ,
109+ ( mediaType ) =>
110+ html `<uui- ref- node- document- type
111+ data- id= ${ ifDefined ( mediaType . unique ) }
112+ .name = ${ mediaType . name }
113+ .alias = ${ mediaType . description ?? '' }
114+ select- only
115+ selectable
116+ @selected = ${ ( ) => this . #onNavigate( mediaType ) } >
117+ ${ mediaType . icon ? html `<umb- icon slot= "icon" name = ${ mediaType . icon } > </ umb- icon> ` : nothing }
118+ </ uui- ref- node- document- type> ` ,
119+ ) ;
120+ }
121+
122+ static styles = [
123+ UmbTextStyles ,
124+ css `
125+ # edit-permissions {
126+ margin-top : var (--uui-size-6 );
127+ }
128+ ` ,
129+ ] ;
91130}
92131
93132export default UmbMediaCreateOptionsModalElement ;
0 commit comments