1+ import { UMB_DOCUMENT_PROPERTY_DATASET_CONTEXT } from '../../../property-dataset-context/index.js' ;
2+ import { UMB_DOCUMENT_WORKSPACE_CONTEXT } from '../../document-workspace.context-token.js' ;
3+ import type { UmbDocumentVariantModel } from '../../../types.js' ;
14import { TimeOptions } from './utils.js' ;
2- import { css , customElement , html , ifDefined , repeat , state } from '@umbraco-cms/backoffice/external/lit' ;
5+ import { css , customElement , html , ifDefined , nothing , repeat , state } from '@umbraco-cms/backoffice/external/lit' ;
36import { DocumentVariantStateModel } from '@umbraco-cms/backoffice/external/backend-api' ;
47import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element' ;
58import { UmbModalRouteRegistrationController } from '@umbraco-cms/backoffice/router' ;
69import { UmbTextStyles } from '@umbraco-cms/backoffice/style' ;
7- import { UMB_DOCUMENT_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/document' ;
810import { UMB_MODAL_MANAGER_CONTEXT } from '@umbraco-cms/backoffice/modal' ;
911import { UMB_WORKSPACE_MODAL } from '@umbraco-cms/backoffice/workspace' ;
1012import { UMB_TEMPLATE_PICKER_MODAL , UmbTemplateItemRepository } from '@umbraco-cms/backoffice/template' ;
1113import type { DocumentUrlInfoModel } from '@umbraco-cms/backoffice/external/backend-api' ;
1214import type { UmbDocumentTypeDetailModel } from '@umbraco-cms/backoffice/document-type' ;
13- import type { UmbDocumentVariantModel } from '@umbraco-cms/backoffice/document' ;
1415import type { UmbModalRouteBuilder } from '@umbraco-cms/backoffice/router' ;
1516
1617// import of local components
@@ -28,9 +29,6 @@ export class UmbDocumentWorkspaceViewInfoElement extends UmbLitElement {
2829 @state ( )
2930 private _urls ?: Array < DocumentUrlInfoModel > ;
3031
31- @state ( )
32- private _createDate ?: string ;
33-
3432 /**Document Type */
3533 @state ( )
3634 private _documentTypeUnique = '' ;
@@ -52,7 +50,7 @@ export class UmbDocumentWorkspaceViewInfoElement extends UmbLitElement {
5250 private _templateName ?: string ;
5351
5452 @state ( )
55- private _variants : UmbDocumentVariantModel [ ] = [ ] ;
53+ private _variant ? : UmbDocumentVariantModel ;
5654
5755 #workspaceContext?: typeof UMB_DOCUMENT_WORKSPACE_CONTEXT . TYPE ;
5856
@@ -78,6 +76,13 @@ export class UmbDocumentWorkspaceViewInfoElement extends UmbLitElement {
7876 this . _documentTypeUnique = this . #workspaceContext. getContentTypeId ( ) ! ;
7977 this . #observeContent( ) ;
8078 } ) ;
79+
80+ this . consumeContext ( UMB_DOCUMENT_PROPERTY_DATASET_CONTEXT , ( context ) => {
81+ this . observe ( context . currentVariant , ( value ) => {
82+ // TODO: get the correct type automatically
83+ this . _variant = value as UmbDocumentVariantModel ;
84+ } ) ;
85+ } ) ;
8186 }
8287
8388 #observeContent( ) {
@@ -121,44 +126,10 @@ export class UmbDocumentWorkspaceViewInfoElement extends UmbLitElement {
121126 } ,
122127 '_templateUnique' ,
123128 ) ;
124-
125- this . observe (
126- this . #workspaceContext. variants ,
127- ( variants ) => {
128- this . _variants = variants ;
129- this . #observeVariants( ) ;
130- } ,
131- '_variants' ,
132- ) ;
133129 }
134130
135- #observeVariants( ) {
136- // Find the oldest variant
137- const oldestVariant =
138- this . _variants . length > 0
139- ? this . _variants
140- . filter ( ( v ) => ! ! v . createDate )
141- . reduce ( ( prev , current ) => ( prev . createDate ! < current . createDate ! ? prev : current ) )
142- : null ;
143-
144- this . _createDate = oldestVariant ?. createDate ?? new Date ( ) . toISOString ( ) ;
145- }
146-
147- #renderVariantStates( ) {
148- return repeat (
149- this . _variants ,
150- ( variant ) => `${ variant . culture } _${ variant . segment } ` ,
151- ( variant ) => html `
152- <div class= "variant-state" >
153- <span> ${ variant . culture ?? this . _invariantCulture } </ span>
154- ${ this . #renderStateTag( variant ) }
155- </ div>
156- ` ,
157- ) ;
158- }
159-
160- #renderStateTag( variant : UmbDocumentVariantModel ) {
161- switch ( variant . state ) {
131+ #renderStateTag( ) {
132+ switch ( this . _variant ?. state ) {
162133 case DocumentVariantStateModel . DRAFT :
163134 return html `
164135 <uui- tag look= "secondary" label = ${ this . localize . term ( 'content_unpublished' ) } >
@@ -174,13 +145,13 @@ export class UmbDocumentWorkspaceViewInfoElement extends UmbLitElement {
174145 case DocumentVariantStateModel . PUBLISHED_PENDING_CHANGES :
175146 return html `
176147 <uui- tag color = "positive" look = "primary" label = ${ this . localize . term ( 'content_publishedPendingChanges' ) } >
177- ${ this . localize . term ( 'content_published ' ) }
148+ ${ this . localize . term ( 'content_publishedPendingChanges ' ) }
178149 </ uui- tag>
179150 ` ;
180151 default :
181152 return html `
182- <uui- tag look= "primary" label = ${ this . localize . term ( 'content_published ' ) } >
183- ${ this . localize . term ( 'content_published ' ) }
153+ <uui- tag look= "primary" label = ${ this . localize . term ( 'content_notCreated ' ) } >
154+ ${ this . localize . term ( 'content_notCreated ' ) }
184155 </ uui- tag>
185156 ` ;
186157 }
@@ -240,14 +211,10 @@ export class UmbDocumentWorkspaceViewInfoElement extends UmbLitElement {
240211 return html `
241212 <div class= "general-item" >
242213 <strong> <umb- localize key= "content_publishStatus" > Publication Status </ umb- localize> </ strong>
243- <umb- stack look= "compact" > ${ this . #renderVariantStates( ) } </ umb- stack>
244- </ div>
245- <div class= "general-item" >
246- <strong> <umb- localize key= "content_createDate" > Created </ umb- localize> </ strong>
247- <span>
248- <umb- localize-date .date = ${ this . _createDate } .options = ${ TimeOptions } > </ umb- localize-date>
249- </ span>
214+ <span> ${ this . #renderStateTag( ) } </ span>
250215 </ div>
216+ ${ this . #renderCreateDate( ) }
217+
251218 <div class= "general-item" >
252219 <strong> <umb- localize key= "content_documentType" > Document Type </ umb- localize> </ strong>
253220 <uui- ref- node- document- type
@@ -287,6 +254,19 @@ export class UmbDocumentWorkspaceViewInfoElement extends UmbLitElement {
287254 ` ;
288255 }
289256
257+ #renderCreateDate( ) {
258+ if ( ! this . _variant ?. createDate ) return nothing ;
259+
260+ return html `
261+ <div class= "general-item" >
262+ <strong> <umb- localize key= "content_createDate" > Created </ umb- localize> </ strong>
263+ <span>
264+ <umb- localize-date .date = ${ this . _variant . createDate } .options = ${ TimeOptions } > </ umb- localize-date>
265+ </ span>
266+ </ div>
267+ ` ;
268+ }
269+
290270 async #openTemplatePicker( ) {
291271 const modalManager = await this . getContext ( UMB_MODAL_MANAGER_CONTEXT ) ;
292272 const modal = modalManager . open ( this , UMB_TEMPLATE_PICKER_MODAL , {
0 commit comments