From c37608b429032f77b17ded1c059c8a1e1f1223ad Mon Sep 17 00:00:00 2001 From: Julia Gru <56249914+julczka@users.noreply.github.com> Date: Wed, 6 Sep 2023 16:38:27 +0200 Subject: [PATCH] correct the alias --- .../src/mocks/data/scripts.data.ts | 84 +++++++++++++------ .../src/mocks/handlers/scripts.handlers.ts | 12 +-- .../templating/scripts/workspace/manifests.ts | 10 +-- .../scripts-workspace-edit.element.ts | 19 ++++- .../workspace/scripts-workspace.context.ts | 74 ++++++++-------- 5 files changed, 123 insertions(+), 76 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/mocks/data/scripts.data.ts b/src/Umbraco.Web.UI.Client/src/mocks/data/scripts.data.ts index 74016f97fc..9803695a1b 100644 --- a/src/Umbraco.Web.UI.Client/src/mocks/data/scripts.data.ts +++ b/src/Umbraco.Web.UI.Client/src/mocks/data/scripts.data.ts @@ -1,3 +1,4 @@ +import { UmbData } from './data.js'; import { UmbEntityData } from './entity.data.js'; import { createFileSystemTreeItem, createTextFileItem } from './utils.js'; import { @@ -6,13 +7,13 @@ import { FileSystemTreeItemPresentationModel, PagedFileSystemTreeItemPresentationModel, ScriptResponseModel, + UpdateScriptRequestModel, } from '@umbraco-cms/backoffice/backend-api'; -type ScriptsDataItem = ScriptResponseModel & FileSystemTreeItemPresentationModel & { id: string }; +type ScriptsDataItem = ScriptResponseModel & FileSystemTreeItemPresentationModel; export const data: Array = [ { - id: 'some-folder', path: 'some-folder', isFolder: true, name: 'some-folder', @@ -20,7 +21,6 @@ export const data: Array = [ hasChildren: true, }, { - id: 'another-folder', path: 'another-folder', isFolder: true, name: 'another-folder', @@ -28,7 +28,6 @@ export const data: Array = [ hasChildren: true, }, { - id: 'very important folder', path: 'very important folder', isFolder: true, name: 'very important folder', @@ -36,7 +35,6 @@ export const data: Array = [ hasChildren: true, }, { - id: 'some-folder/ugly script.js', path: 'some-folder/ugly script.js', isFolder: false, name: 'ugly script.js', @@ -55,7 +53,6 @@ export const data: Array = [ console.log(makeid(5));`, }, { - id: 'some-folder/nice script.js', path: 'some-folder/nice script.js', isFolder: false, name: 'nice script.js', @@ -71,7 +68,6 @@ export const data: Array = [ }`, }, { - id: 'another-folder/only bugs.js', path: 'another-folder/only bugs.js', isFolder: false, name: 'only bugs.js', @@ -84,7 +80,6 @@ export const data: Array = [ console.log(my_arr);`, }, { - id: 'very important folder/no bugs at all.js', path: 'very important folder/no bugs at all.js', isFolder: false, name: 'no bugs at all.js', @@ -100,7 +95,6 @@ export const data: Array = [ // -> TO get the short day name e.g. Tue`, }, { - id: 'very important folder/nope.js', path: 'very important folder/nope.js', isFolder: false, name: 'nope.js', @@ -120,7 +114,7 @@ export const data: Array = [ }, ]; -class UmbScriptsTreeData extends UmbEntityData { +class UmbScriptsData extends UmbData { constructor() { super(data); } @@ -143,12 +137,6 @@ class UmbScriptsTreeData extends UmbEntityData paths.includes(item.path ?? '')); return items.map((item) => createFileSystemTreeItem(item)); } -} - -class UmbScriptsFolderData extends UmbEntityData { - constructor() { - super(data); - } getFolder(path: string): FileSystemTreeItemPresentationModel { const items = data.filter((item) => item.isFolder && item.path === path); @@ -157,7 +145,6 @@ class UmbScriptsFolderData extends UmbEntityData { postFolder(payload: CreatePathFolderRequestModel) { const newFolder = { - id: `${payload.parentPath ?? ''}/${payload.name}`, path: `${payload.parentPath ?? ''}/${payload.name}`, isFolder: true, name: payload.name, @@ -170,15 +157,6 @@ class UmbScriptsFolderData extends UmbEntityData { deleteFolder(path: string) { return this.delete([path]); } -} - -export const umbScriptsTreeData = new UmbScriptsTreeData(); -export const umbScriptsFolderData = new UmbScriptsFolderData(); - -class UmbScriptsData extends UmbEntityData { - constructor() { - super(data); - } getScript(path: string): ScriptResponseModel | undefined { return createTextFileItem(this.data.find((item) => item.path === path)); @@ -188,7 +166,6 @@ class UmbScriptsData extends UmbEntityData { const newItem: ScriptsDataItem = { ...item, path: `${item.parentPath}/${item.name}.js}`, - id: `${item.parentPath}/${item.name}.js}`, isFolder: false, hasChildren: false, type: 'script', @@ -197,6 +174,59 @@ class UmbScriptsData extends UmbEntityData { this.insert(newItem); return newItem; } + + insert(item: ScriptsDataItem) { + const exits = this.data.find((i) => i.path === item.path); + + if (exits) { + throw new Error(`Item with path ${item.path} already exists`); + } + + this.data.push(item); + + return item; + } + + updateData(updateItem: UpdateScriptRequestModel) { + const itemIndex = this.data.findIndex((item) => item.path === updateItem.existingPath); + const item = this.data[itemIndex]; + if (!item) return; + + // TODO: revisit this code, seems like something we can solve smarter/type safer now: + const itemKeys = Object.keys(item); + const newItem = { ...item }; + + for (const [key] of Object.entries(updateItem)) { + if (itemKeys.indexOf(key) !== -1) { + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + newItem[key] = updateItem[key]; + } + } + // Specific to fileSystem, we need to update path based on name: + const dirName = updateItem.existingPath?.substring(0, updateItem.existingPath.lastIndexOf('/')); + newItem.path = `${dirName}${dirName ? '/' : ''}${updateItem.name}`; + + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + this.data[itemIndex] = newItem; + } + + delete(paths: Array) { + const deletedPaths = this.data + .filter((item) => { + if (!item.path) throw new Error('Item has no path'); + paths.includes(item.path); + }) + .map((item) => item.path); + + this.data = this.data.filter((item) => { + if (!item.path) throw new Error('Item has no path'); + paths.indexOf(item.path) === -1; + }); + + return deletedPaths; + } } export const umbScriptsData = new UmbScriptsData(); diff --git a/src/Umbraco.Web.UI.Client/src/mocks/handlers/scripts.handlers.ts b/src/Umbraco.Web.UI.Client/src/mocks/handlers/scripts.handlers.ts index 0ed02833d8..819b83a4ae 100644 --- a/src/Umbraco.Web.UI.Client/src/mocks/handlers/scripts.handlers.ts +++ b/src/Umbraco.Web.UI.Client/src/mocks/handlers/scripts.handlers.ts @@ -1,12 +1,12 @@ const { rest } = window.MockServiceWorker; import { RestHandler, MockedRequest, DefaultBodyType } from 'msw'; -import { umbScriptsTreeData, umbScriptsData, umbScriptsFolderData } from '../data/scripts.data.js'; +import { umbScriptsData } from '../data/scripts.data.js'; import { umbracoPath } from '@umbraco-cms/backoffice/utils'; import { CreatePathFolderRequestModel, CreateTextFileViewModelBaseModel } from '@umbraco-cms/backoffice/backend-api'; const treeHandlers = [ rest.get(umbracoPath('/tree/script/root'), (req, res, ctx) => { - const response = umbScriptsTreeData.getTreeRoot(); + const response = umbScriptsData.getTreeRoot(); return res(ctx.status(200), ctx.json(response)); }), @@ -14,7 +14,7 @@ const treeHandlers = [ const path = req.url.searchParams.get('path'); if (!path) return; - const response = umbScriptsTreeData.getTreeItemChildren(path); + const response = umbScriptsData.getTreeItemChildren(path); return res(ctx.status(200), ctx.json(response)); }), @@ -22,7 +22,7 @@ const treeHandlers = [ const paths = req.url.searchParams.getAll('paths'); if (!paths) return; - const items = umbScriptsTreeData.getTreeItem(paths); + const items = umbScriptsData.getTreeItem(paths); return res(ctx.status(200), ctx.json(items)); }), ]; @@ -59,7 +59,7 @@ const folderHandlers: RestHandler>[] = [ rest.get(umbracoPath('script/folder'), (req, res, ctx) => { const path = decodeURIComponent(req.url.searchParams.get('path') ?? '').replace('-js', '.js'); if (!path) return res(ctx.status(400)); - const response = umbScriptsFolderData.getFolder(path); + const response = umbScriptsData.getFolder(path); return res(ctx.status(200), ctx.json(response)); }), rest.post(umbracoPath('script/folder'), (req, res, ctx) => { @@ -70,7 +70,7 @@ const folderHandlers: RestHandler>[] = [ rest.delete(umbracoPath('script/folder'), (req, res, ctx) => { const path = decodeURIComponent(req.url.searchParams.get('path') ?? '').replace('-js', '.js'); if (!path) return res(ctx.status(400)); - const response = umbScriptsFolderData.deleteFolder(path); + const response = umbScriptsData.deleteFolder(path); return res(ctx.status(200), ctx.json(response)); }), ]; diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/scripts/workspace/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/scripts/workspace/manifests.ts index 25f16bb705..580cf9eef4 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/templating/scripts/workspace/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/templating/scripts/workspace/manifests.ts @@ -12,22 +12,22 @@ const workspace: ManifestWorkspace = { }, }; +//TODO: this does not work for some reason const workspaceActions: Array = [ { type: 'workspaceAction', - alias: SCRIPTS_WORKSPACE_ACTION_SAVE_ALIAS, - name: 'Save Scripts Workspace Action', - weight: 70, + alias: 'Umb.WorkspaceAction.Scripts.Save', + name: 'Save Script Workspace Action', meta: { + label: 'Save', look: 'primary', color: 'positive', - label: 'Save', api: UmbSaveWorkspaceAction, }, conditions: [ { alias: 'Umb.Condition.WorkspaceAlias', - match: SCRIPTS_WORKSPACE_ALIAS, + match: workspace.alias, }, ], }, diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/scripts/workspace/scripts-workspace-edit.element.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/scripts/workspace/scripts-workspace-edit.element.ts index 53177e8713..6ec39342e5 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/templating/scripts/workspace/scripts-workspace-edit.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/templating/scripts/workspace/scripts-workspace-edit.element.ts @@ -113,6 +113,19 @@ export class UmbScriptsWorkspaceEditElement extends UmbLitElement { `} +
+ + + Keyboard Shortcuts + + ALT + + + shift + + + k + + +
`; } @@ -127,15 +140,15 @@ export class UmbScriptsWorkspaceEditElement extends UmbLitElement { #loader-container { display: grid; place-items: center; - min-height: calc(100dvh - 230px); + min-height: calc(100dvh - 260px); } umb-code-editor { - --editor-height: calc(100dvh - 230px); + --editor-height: calc(100dvh - 260px); } uui-box { - min-height: calc(100dvh - 230px); + min-height: calc(100dvh - 260px); margin: var(--uui-size-layout-1); --uui-box-default-padding: 0; /* remove header border bottom as code editor looks better in this box */ diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/scripts/workspace/scripts-workspace.context.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/scripts/workspace/scripts-workspace.context.ts index d4dbea94d6..5fac75728e 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/templating/scripts/workspace/scripts-workspace.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/templating/scripts/workspace/scripts-workspace.context.ts @@ -1,4 +1,4 @@ -import { ScriptDetails } from '../config.js'; +import { ScriptDetails, SCRIPTS_WORKSPACE_ALIAS } from '../config.js'; import { UmbScriptsRepository } from '../repository/scripts.repository.js'; import { createObservablePart, UmbBooleanState, UmbDeepState } from '@umbraco-cms/backoffice/observable-api'; import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller-api'; @@ -7,39 +7,6 @@ import { loadCodeEditor } from '@umbraco-cms/backoffice/code-editor'; import { UpdateScriptRequestModel } from '@umbraco-cms/backoffice/backend-api'; export class UmbScriptsWorkspaceContext extends UmbWorkspaceContext { - getEntityId(): string | undefined { - return this.getData()?.path; - } - getEntityType(): string { - throw new Error('Method not implemented.'); - } - save(): Promise { - const script = this.getData(); - - if (!script) return Promise.reject('Something went wrong, there is no data for script view you want to save...'); - if (this.getIsNew()) { - const createRequestBody = { - name: script.name, - content: script.content, - parentPath: script.path + '/', - }; - - this.repository.create(createRequestBody); - console.log('create'); - return Promise.resolve(); - } - if (!script.path) return Promise.reject('There is no path'); - const updateRequestBody: UpdateScriptRequestModel = { - name: script.name, - existingPath: script.path, - content: script.content, - }; - this.repository.save(script.path, updateRequestBody); - return Promise.resolve(); - } - destroy(): void { - throw new Error('Method not implemented.'); - } #data = new UmbDeepState(undefined); data = this.#data.asObservable(); name = createObservablePart(this.#data, (data) => data?.name); @@ -50,7 +17,7 @@ export class UmbScriptsWorkspaceContext extends UmbWorkspaceContext { + const script = this.getData(); + + if (!script) return Promise.reject('Something went wrong, there is no data for script view you want to save...'); + if (this.getIsNew()) { + const createRequestBody = { + name: script.name, + content: script.content, + parentPath: script.path + '/', + }; + + this.repository.create(createRequestBody); + console.log('create'); + return Promise.resolve(); + } + if (!script.path) return Promise.reject('There is no path'); + const updateRequestBody: UpdateScriptRequestModel = { + name: script.name, + existingPath: script.path, + content: script.content, + }; + this.repository.save(script.path, updateRequestBody); + return Promise.resolve(); + } + + destroy(): void { + throw new Error('Method not implemented.'); + } + + getEntityType(): string { + throw new Error('Method not implemented.'); + } }