add some handlers

src/Umbraco.Web.UI.Client/src/mocks/data/stylesheet.data.ts

@@ -1,13 +1,13 @@
 import { UmbEntityData } from './entity.data.js';
-import { createFileSystemTreeItem } from './utils.js';
+import { createFileSystemTreeItem, createTextFileItem } from './utils.js';
 import {
+	CreateTextFileViewModelBaseModel,
 	FileSystemTreeItemPresentationModel,
 	PagedFileSystemTreeItemPresentationModel,
+	StylesheetResponseModel,
 } from '@umbraco-cms/backoffice/backend-api';
 
-type StylesheetDBItem = FileSystemTreeItemPresentationModel & {
-	content: string;
-};
+type StylesheetDBItem = StylesheetResponseModel & FileSystemTreeItemPresentationModel;
 
 export const data: Array<StylesheetDBItem> = [
 	{
@@ -16,7 +16,26 @@ export const data: Array<StylesheetDBItem> = [
 		name: 'Stylesheet File 1.css',
 		type: 'stylesheet',
 		hasChildren: false,
-		content: `Stylesheet content 1`,
+		content: `
+		h1 {
+			color: blue;
+		}
+		
+		/**umb_name:bjjh*/
+		h1 {
+			color: blue;
+		}
+		
+		/**umb_name:comeone*/
+		h1 {
+			color: blue;
+		}
+		
+		/**umb_name:lol*/
+		h1 {
+			color: blue;
+		}
+		`,
 	},
 	{
 		path: 'Stylesheet File 2.css',
@@ -24,7 +43,24 @@ export const data: Array<StylesheetDBItem> = [
 		name: 'Stylesheet File 2.css',
 		type: 'stylesheet',
 		hasChildren: false,
-		content: `Stylesheet content 2`,
+		content: `		h1 {
+			color: green;
+		}
+		
+		/**umb_name:bjjh*/
+		h1 {
+			color: green;
+		}
+		
+		/**umb_name:comeone*/
+		h1 {
+			color: green;
+		}
+		
+		/**umb_name:lol*/
+		h1 {
+			color: green;
+		}`,
 	},
 	{
 		path: 'Folder 1',
@@ -32,7 +68,24 @@ export const data: Array<StylesheetDBItem> = [
 		name: 'Folder 1',
 		type: 'stylesheet',
 		hasChildren: true,
-		content: `Stylesheet content 3`,
+		content: `		h1 {
+			color: pink;
+		}
+		
+		/**umb_name:bjjh*/
+		h1 {
+			color: pink;
+		}
+		
+		/**umb_name:comeone*/
+		h1 {
+			color: pink;
+		}
+		
+		/**umb_name:lol*/
+		h1 {
+			color: pink;
+		}`,
 	},
 	{
 		path: 'Folder 1/Stylesheet File 3.css',
@@ -40,7 +93,24 @@ export const data: Array<StylesheetDBItem> = [
 		name: 'Stylesheet File 3.css',
 		type: 'stylesheet',
 		hasChildren: false,
-		content: `Stylesheet content 3`,
+		content: `		h1 {
+			color: red;
+		}
+		
+		/**umb_name:bjjh*/
+		h1 {
+			color: red;
+		}
+		
+		/**umb_name:comeone*/
+		h1 {
+			color: red;
+		}
+		
+		/**umb_name:lol*/
+		h1 {
+			color: red;
+		}`,
 	},
 ];
 
@@ -71,6 +141,23 @@ class UmbStylesheetData extends UmbEntityData<StylesheetDBItem> {
 		const items = this.data.filter((item) => paths.includes(item.path ?? ''));
 		return items.map((item) => createFileSystemTreeItem(item));
 	}
+
+	getStylesheet(path: string): StylesheetDBItem | undefined {
+		return createTextFileItem(this.data.find((item) => item.path === path));
+	}
+
+	insertStyleSheet(item: CreateTextFileViewModelBaseModel) {
+		const newItem: StylesheetDBItem = {
+			...item,
+			path: `${item.parentPath}/${item.name}.cshtml}`,
+			isFolder: false,
+			hasChildren: false,
+			type: 'partial-view',
+		};
+
+		this.insert(newItem);
+		return newItem;
+	}
 }
 
 export const umbStylesheetData = new UmbStylesheetData();

src/Umbraco.Web.UI.Client/src/mocks/handlers/stylesheet.handlers.ts

@@ -1,8 +1,9 @@
 const { rest } = window.MockServiceWorker;
+import { CreateTextFileViewModelBaseModel } from '@umbraco-cms/backoffice/backend-api';
 import { umbStylesheetData } from '../data/stylesheet.data.js';
 import { umbracoPath } from '@umbraco-cms/backoffice/utils';
 
-export const handlers = [
+const treeHandlers = [
 	rest.get(umbracoPath('/tree/stylesheet/root'), (req, res, ctx) => {
 		const response = umbStylesheetData.getTreeRoot();
 		return res(ctx.status(200), ctx.json(response));
@@ -24,3 +25,34 @@ export const handlers = [
 		return res(ctx.status(200), ctx.json(items));
 	}),
 ];
+
+const detailHandlers = [
+	rest.get(umbracoPath('/v1/stylesheet'), (req, res, ctx) => {
+		const path = req.url.searchParams.get('path');
+		if (!path) return;
+
+		const response = umbStylesheetData.getStylesheet(path);
+		return res(ctx.status(200), ctx.json(response));
+	}),
+	rest.post(umbracoPath('/partial-view'), (req, res, ctx) => {
+		const requestBody = req.json() as CreateTextFileViewModelBaseModel;
+		if (!requestBody) return res(ctx.status(400, 'no body found'));
+		const response = umbStylesheetData.insertStyleSheet(requestBody);
+		return res(ctx.status(200), ctx.json(response));
+	}),
+
+	rest.delete(umbracoPath('/partial-view'), (req, res, ctx) => {
+		const path = req.url.searchParams.get('path');
+		if (!path) return res(ctx.status(400));
+		const response = umbStylesheetData.delete([path]);
+		return res(ctx.status(200), ctx.json(response));
+	}),
+	rest.put(umbracoPath('/partial-view'), (req, res, ctx) => {
+		const requestBody = req.json() as CreateTextFileViewModelBaseModel;
+		if (!requestBody) return res(ctx.status(400, 'no body found'));
+		const response = umbStylesheetData.updateData(requestBody);
+		return res(ctx.status(200));
+	}),
+];
+
+export const handlers = [...treeHandlers, ...detailHandlers];