@umbraco-cms/backoffice 14.0.0--preview004-a571bca2 → 14.0.0--preview004.preview.182.g50025fa

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,6 +1,5 @@
1
1
  const { rest } = window.MockServiceWorker;
2
2
  import { umbDictionaryData } from '../data/dictionary.data.js';
3
- import { umbracoPath } from '../../shared/utils/index.js';
4
3
  const uploadResponse = {
5
4
  temporaryFileId: 'c:/path/to/tempfilename.udt',
6
5
  parentId: 'b7e7d0ab-53ba-485d-dddd-12537f9925aa',
@@ -39,14 +38,14 @@ const overviewData = [
39
38
  ];
40
39
  // TODO: add schema
41
40
  export const handlers = [
42
- rest.get(umbracoPath('/dictionary/:id'), (req, res, ctx) => {
41
+ rest.get('/umbraco/management/api/v1/dictionary/:id', (req, res, ctx) => {
43
42
  const id = req.params.id;
44
43
  if (!id)
45
44
  return;
46
45
  const dictionary = umbDictionaryData.getById(id);
47
46
  return res(ctx.status(200), ctx.json(dictionary));
48
47
  }),
49
- rest.get(umbracoPath('/dictionary'), (req, res, ctx) => {
48
+ rest.get('/umbraco/management/api/v1/dictionary', (req, res, ctx) => {
50
49
  const skip = req.url.searchParams.get('skip');
51
50
  const take = req.url.searchParams.get('take');
52
51
  if (!skip || !take)
@@ -61,21 +60,31 @@ export const handlers = [
61
60
  };
62
61
  return res(ctx.status(200), ctx.json(response));
63
62
  }),
64
- rest.post(umbracoPath('/dictionary'), async (req, res, ctx) => {
63
+ rest.post('/umbraco/management/api/v1/dictionary', async (req, res, ctx) => {
65
64
  const data = await req.json();
66
65
  if (!data)
67
66
  return;
68
67
  data.icon = 'umb:book-alt';
69
68
  data.hasChildren = false;
70
69
  data.type = 'dictionary-item';
71
- const value = umbDictionaryData.insert(data);
70
+ data.translations = [
71
+ {
72
+ isoCode: 'en-US',
73
+ translation: '',
74
+ },
75
+ {
76
+ isoCode: 'fr',
77
+ translation: '',
78
+ },
79
+ ];
80
+ const value = umbDictionaryData.save(data.id, data);
72
81
  const createdResult = {
73
82
  value,
74
83
  statusCode: 200,
75
84
  };
76
85
  return res(ctx.status(200), ctx.json(createdResult));
77
86
  }),
78
- rest.patch(umbracoPath('/dictionary/:id'), async (req, res, ctx) => {
87
+ rest.patch('/umbraco/management/api/v1/dictionary/:id', async (req, res, ctx) => {
79
88
  const data = await req.json();
80
89
  if (!data)
81
90
  return;
@@ -86,17 +95,7 @@ export const handlers = [
86
95
  const saved = umbDictionaryData.save(dataToSave.id, dataToSave);
87
96
  return res(ctx.status(200), ctx.json(saved));
88
97
  }),
89
- rest.put(umbracoPath('/dictionary/:id'), async (req, res, ctx) => {
90
- const data = await req.json();
91
- if (!data)
92
- return;
93
- const id = req.params.id;
94
- if (!id)
95
- return;
96
- const saved = umbDictionaryData.save(id, data);
97
- return res(ctx.status(200), ctx.json(saved));
98
- }),
99
- rest.get(umbracoPath('/tree/dictionary/root'), (req, res, ctx) => {
98
+ rest.get('/umbraco/management/api/v1/tree/dictionary/root', (req, res, ctx) => {
100
99
  const items = umbDictionaryData.getTreeRoot();
101
100
  const response = {
102
101
  total: items.length,
@@ -104,7 +103,7 @@ export const handlers = [
104
103
  };
105
104
  return res(ctx.status(200), ctx.json(response));
106
105
  }),
107
- rest.get(umbracoPath('/tree/dictionary/children'), (req, res, ctx) => {
106
+ rest.get('/umbraco/management/api/v1/tree/dictionary/children', (req, res, ctx) => {
108
107
  const parentId = req.url.searchParams.get('parentId');
109
108
  if (!parentId)
110
109
  return;
@@ -115,14 +114,14 @@ export const handlers = [
115
114
  };
116
115
  return res(ctx.status(200), ctx.json(response));
117
116
  }),
118
- rest.get(umbracoPath('/tree/dictionary/item'), (req, res, ctx) => {
117
+ rest.get('/umbraco/management/api/v1/tree/dictionary/item', (req, res, ctx) => {
119
118
  const ids = req.url.searchParams.getAll('id');
120
119
  if (!ids)
121
120
  return;
122
121
  const items = umbDictionaryData.getTreeItem(ids);
123
122
  return res(ctx.status(200), ctx.json(items));
124
123
  }),
125
- rest.delete(umbracoPath('/dictionary/:id'), (req, res, ctx) => {
124
+ rest.delete('/umbraco/management/api/v1/dictionary/:id', (req, res, ctx) => {
126
125
  const id = req.params.id;
127
126
  if (!id)
128
127
  return;
@@ -130,7 +129,7 @@ export const handlers = [
130
129
  return res(ctx.status(200));
131
130
  }),
132
131
  // TODO => handle properly, querystring breaks handler
133
- rest.get(umbracoPath('/dictionary/:id/export'), (req, res, ctx) => {
132
+ rest.get('/umbraco/management/api/v1/dictionary/:id/export', (req, res, ctx) => {
134
133
  const id = req.params.id;
135
134
  if (!id)
136
135
  return;
@@ -139,12 +138,12 @@ export const handlers = [
139
138
  alert(`Downloads file for dictionary "${item?.name}", ${includeChildren === 'true' ? 'with' : 'without'} children.`);
140
139
  return res(ctx.status(200));
141
140
  }),
142
- rest.post(umbracoPath('/dictionary/upload'), async (req, res, ctx) => {
141
+ rest.post('/umbraco/management/api/v1/dictionary/upload', async (req, res, ctx) => {
143
142
  if (!req.arrayBuffer())
144
143
  return;
145
144
  return res(ctx.status(200), ctx.json(uploadResponse));
146
145
  }),
147
- rest.post(umbracoPath('/dictionary/import'), async (req, res, ctx) => {
146
+ rest.post('/umbraco/management/api/v1/dictionary/import', async (req, res, ctx) => {
148
147
  const file = req.url.searchParams.get('file');
149
148
  if (!file || !importResponse.id)
150
149
  return;
@@ -5,12 +5,15 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
5
5
  return c > 3 && r && Object.defineProperty(target, key, r), r;
6
6
  };
7
7
  import { UmbDictionaryRepository } from '../../dictionary/repository/dictionary.repository.js';
8
- import { UmbTextStyles } from '../../../../shared/style/index.js';
8
+ import { UmbTextStyles } from "../../../../shared/style/index.js";
9
9
  import { css, html, customElement, state, when } from '../../../../external/lit/index.js';
10
10
  import { UmbLitElement } from '../../../../shared/lit-element/index.js';
11
+ import { UMB_MODAL_MANAGER_CONTEXT_TOKEN, UMB_CREATE_DICTIONARY_MODAL, } from '../../../core/modal/index.js';
12
+ import { UmbContextConsumerController } from '../../../../libs/context-api/index.js';
11
13
  export let UmbDashboardTranslationDictionaryElement = class UmbDashboardTranslationDictionaryElement extends UmbLitElement {
12
14
  #dictionaryItems;
13
15
  #repo;
16
+ #modalContext;
14
17
  #tableItems;
15
18
  #tableColumns;
16
19
  #languages;
@@ -24,6 +27,9 @@ export let UmbDashboardTranslationDictionaryElement = class UmbDashboardTranslat
24
27
  this.#tableItems = [];
25
28
  this.#tableColumns = [];
26
29
  this.#languages = [];
30
+ new UmbContextConsumerController(this, UMB_MODAL_MANAGER_CONTEXT_TOKEN, (instance) => {
31
+ this.#modalContext = instance;
32
+ });
27
33
  }
28
34
  async connectedCallback() {
29
35
  super.connectedCallback();
@@ -47,7 +53,7 @@ export let UmbDashboardTranslationDictionaryElement = class UmbDashboardTranslat
47
53
  #setTableColumns() {
48
54
  this.#tableColumns = [
49
55
  {
50
- name: this.localize.term('general_name'),
56
+ name: 'Name',
51
57
  alias: 'name',
52
58
  },
53
59
  ];
@@ -71,7 +77,7 @@ export let UmbDashboardTranslationDictionaryElement = class UmbDashboardTranslat
71
77
  columnAlias: 'name',
72
78
  value: html `<a
73
79
  style="font-weight:bold"
74
- href="section/dictionary/workspace/dictionary-item/edit/${dictionary.id}">
80
+ href="/section/dictionary/workspace/dictionary-item/edit/${dictionary.id}">
75
81
  ${dictionary.name}</a
76
82
  > `,
77
83
  },
@@ -85,11 +91,11 @@ export let UmbDashboardTranslationDictionaryElement = class UmbDashboardTranslat
85
91
  value: dictionary.translatedIsoCodes?.includes(l.isoCode)
86
92
  ? html `<uui-icon
87
93
  name="check"
88
- title="${this.localize.term('visuallyHiddenTexts_hasTranslation')} (${l.name})"
94
+ title="Translation exists for ${l.name}"
89
95
  style="color:var(--uui-color-positive-standalone);display:inline-block"></uui-icon>`
90
96
  : html `<uui-icon
91
97
  name="alert"
92
- title="${this.localize.term('visuallyHiddenTexts_noTranslation')} (${l.name})"
98
+ title="Translation does not exist for ${l.name}"
93
99
  style="color:var(--uui-color-danger-standalone);display:inline-block"></uui-icon>`,
94
100
  });
95
101
  });
@@ -98,26 +104,38 @@ export let UmbDashboardTranslationDictionaryElement = class UmbDashboardTranslat
98
104
  this._tableItemsFiltered = this.#tableItems;
99
105
  }
100
106
  #filter(e) {
101
- const searchValue = e.target.value.toLocaleLowerCase();
102
- this._tableItemsFiltered = searchValue
103
- ? this.#tableItems.filter((t) => t.id.toLocaleLowerCase().includes(searchValue))
107
+ this._tableItemsFiltered = e.target.value
108
+ ? this.#tableItems.filter((t) => t.id.includes(e.target.value))
104
109
  : this.#tableItems;
105
110
  }
111
+ async #create() {
112
+ // TODO: what to do if modal service is not available?
113
+ if (!this.#modalContext)
114
+ return;
115
+ if (!this.#repo)
116
+ return;
117
+ const modalContext = this.#modalContext?.open(UMB_CREATE_DICTIONARY_MODAL, { parentId: null });
118
+ const { name, parentId } = await modalContext.onSubmit();
119
+ if (!name || parentId === undefined)
120
+ return;
121
+ const { data: url } = await this.#repo.create({ name, parentId });
122
+ if (!url)
123
+ return;
124
+ //TODO: Why do we need to extract the id like this?
125
+ const id = url.substring(url.lastIndexOf('/') + 1);
126
+ history.pushState({}, '', `/section/dictionary/workspace/dictionary-item/edit/${id}`);
127
+ }
106
128
  render() {
107
129
  return html `
108
130
  <umb-body-layout header-transparent>
109
131
  <div id="header" slot="header">
110
- <uui-button
111
- type="button"
112
- look="outline"
113
- label=${this.localize.term('dictionary_createNew')}
114
- href="section/dictionary/workspace/dictionary-item/create/null">
115
- ${this.localize.term('dictionary_createNew')}
116
- </uui-button>
132
+ <uui-button type="button" look="outline" label="Create dictionary item" @click=${this.#create}
133
+ >Create dictionary item</uui-button
134
+ >
117
135
  <uui-input
118
136
  @keyup="${this.#filter}"
119
- placeholder=${this.localize.term('placeholders_filter')}
120
- label=${this.localize.term('placeholders_filter')}
137
+ placeholder="Type to filter..."
138
+ label="Type to filter dictionary"
121
139
  id="searchbar">
122
140
  <div slot="prepend">
123
141
  <uui-icon name="search" id="searchbar_icon"></uui-icon>
@@ -125,9 +143,9 @@ export let UmbDashboardTranslationDictionaryElement = class UmbDashboardTranslat
125
143
  </uui-input>
126
144
  </div>
127
145
  ${when(this._tableItemsFiltered.length, () => html ` <umb-table
128
- .config=${this._tableConfig}
129
- .columns=${this.#tableColumns}
130
- .items=${this._tableItemsFiltered}></umb-table>`, () => html `<umb-empty-state>${this.localize.term('emptyStates_emptyDictionaryTree')}</umb-empty-state>`)}
146
+ .config=${this._tableConfig}
147
+ .columns=${this.#tableColumns}
148
+ .items=${this._tableItemsFiltered}></umb-table>`, () => html `<umb-empty-state>There were no dictionary items found.</umb-empty-state>`)}
131
149
  </umb-body-layout>
132
150
  `;
133
151
  }
@@ -36,13 +36,10 @@ export let UmbDictionaryWorkspaceEditorElement = class UmbDictionaryWorkspaceEdi
36
36
  return html `
37
37
  <umb-workspace-editor alias="Umb.Workspace.Dictionary">
38
38
  <div id="header" slot="header">
39
- <uui-button href="section/dictionary/dashboard" label=${this.localize.term('general_backToOverview')} compact>
39
+ <uui-button href="/section/dictionary/dashboard" label="Back to list" compact>
40
40
  <uui-icon name="umb:arrow-left"></uui-icon>
41
41
  </uui-button>
42
- <uui-input
43
- .value=${this._name ?? ''}
44
- @input="${this.#handleInput}"
45
- label="${this.localize.term('general_dictionary')} ${this.localize.term('general_name')}"></uui-input>
42
+ <uui-input .value=${this._name} @input="${this.#handleInput}" label="Dictionary name"></uui-input>
46
43
  </div>
47
44
  </umb-workspace-editor>
48
45
  `;
@@ -61,16 +61,8 @@ export class UmbDictionaryWorkspaceContext extends UmbWorkspaceContext {
61
61
  return;
62
62
  if (!this.#data.value.id)
63
63
  return;
64
- if (this.getIsNew()) {
65
- await this.repository.create(this.#data.value);
66
- this.setIsNew(false);
67
- }
68
- else {
69
- await this.repository.save(this.#data.value.id, this.#data.value);
70
- }
71
- const data = this.getData();
72
- if (data)
73
- this.saveComplete(data);
64
+ await this.repository.save(this.#data.value.id, this.#data.value);
65
+ this.setIsNew(false);
74
66
  }
75
67
  destroy() {
76
68
  this.#data.complete();
@@ -6,7 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
6
6
  };
7
7
  import { UmbDictionaryWorkspaceContext } from './dictionary-workspace.context.js';
8
8
  import { UmbDictionaryWorkspaceEditorElement } from './dictionary-workspace-editor.element.js';
9
- import { UmbTextStyles } from '../../../../shared/style/index.js';
9
+ import { UmbTextStyles } from "../../../../shared/style/index.js";
10
10
  import { html, customElement, state } from '../../../../external/lit/index.js';
11
11
  import { UmbLitElement } from '../../../../shared/lit-element/index.js';
12
12
  export let UmbWorkspaceDictionaryElement = class UmbWorkspaceDictionaryElement extends UmbLitElement {
@@ -23,14 +23,6 @@ export let UmbWorkspaceDictionaryElement = class UmbWorkspaceDictionaryElement e
23
23
  this.#workspaceContext.load(id);
24
24
  },
25
25
  },
26
- {
27
- path: 'create/:parentId',
28
- component: () => this.#element,
29
- setup: (_component, info) => {
30
- const parentId = info.match.params.parentId === 'null' ? null : info.match.params.parentId;
31
- this.#workspaceContext.create(parentId);
32
- },
33
- },
34
26
  ];
35
27
  }
36
28
  #workspaceContext;
@@ -7,7 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
7
7
  import { UMB_DICTIONARY_WORKSPACE_CONTEXT } from '../../dictionary-workspace.context.js';
8
8
  import { UmbDictionaryRepository } from '../../../repository/dictionary.repository.js';
9
9
  import { UUITextareaEvent } from '../../../../../../external/uui/index.js';
10
- import { css, html, customElement, state, repeat, ifDefined, unsafeHTML } from '../../../../../../external/lit/index.js';
10
+ import { css, html, customElement, state, repeat, ifDefined } from '../../../../../../external/lit/index.js';
11
11
  import { UmbLitElement } from '../../../../../../shared/lit-element/index.js';
12
12
  export let UmbWorkspaceViewDictionaryEditorElement = class UmbWorkspaceViewDictionaryEditorElement extends UmbLitElement {
13
13
  constructor() {
@@ -54,7 +54,8 @@ export let UmbWorkspaceViewDictionaryEditorElement = class UmbWorkspaceViewDicti
54
54
  render() {
55
55
  return html `
56
56
  <uui-box>
57
- ${unsafeHTML(this.localize.term('dictionaryItem_description', this._dictionary?.name || 'unnamed'))}
57
+ <p>Edit the different language versions for the dictionary item '<em>${this._dictionary?.name}</em>' below.</p>
58
+
58
59
  ${repeat(this._languages, (item) => item.isoCode, (item) => this.#renderTranslation(item))}
59
60
  </uui-box>
60
61
  `;