@raketa-cloud/admin 0.0.65 → 0.0.66

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@raketa-cloud/admin",
-  "version": "0.0.65",
+  "version": "0.0.66",
   "main": "src/index.js",
   "scripts": {
     "dev": "npx tailwindcss -i ./src/styles/application.css -o ../../apps/admin/static/application.css --watch",

package/src/handlers/_shared/SettingsHandler.js

@@ -0,0 +1,36 @@
+const edit_form = async (ctx) => {
+  const data = await ctx.client.settings.find(ctx.locale);
+
+  return {
+    assigns: {
+      errors: {},
+      resource: data,
+    },
+  };
+};
+
+const update = async (ctx) => {
+  const params = ctx.resourceParams.resource;
+  const current = await ctx.client.settings.find(ctx.locale);
+  const updated = ctx.client.settings.deepMerge(current, params);
+
+  const { errors } = await ctx.client.settings.update(ctx.locale, updated);
+
+  if (errors) {
+    return {
+      assigns: {
+        resource: { ...params },
+        errors: { resource: ctx.client.settings.formatErrors(errors) },
+      },
+    };
+  }
+
+  return {
+    redirect: `/${ctx.locale}/${ctx.resourceConfig.resource}/edit`,
+  };
+};
+
+export default {
+  edit_form,
+  update,
+};

package/src/index.js

@@ -49,8 +49,7 @@ export { default as PageTranslationsHandler } from "./handlers/pages/Translation
 export { default as PageURLsHandler } from "./handlers/pages/URLsHandler";
 export { default as PagesHandler } from "./handlers/pages/PagesHandler";
 
-export { default as SettingsLayoutHandler } from "./handlers/settings/LayoutHandler";
-export { default as SettingsMetaHandler } from "./handlers/settings/MetaHandler";
+export { default as SettingsHandler } from "./handlers/_shared/SettingsHandler";
 
 export { default as ArticleRevisionsHandler } from "./handlers/article_revisions/ArticleRevisionsHandler";
 export { default as ArticleRevisionsCodeHandler } from "./handlers/article_revisions/CodeHandler";

package/src/routeSettings.js

@@ -1,10 +1,14 @@
 import routeMember from "./routeMember";
-import LayoutHandler from "./handlers/settings/LayoutHandler";
-import MetaHandler from "./handlers/settings/MetaHandler";
+import SettingsHandler from "./handlers/_shared/SettingsHandler";
 
 function routeSettings(adapter) {
-  routeMember(adapter, "settings/meta", MetaHandler);
-  routeMember(adapter, "settings/layout", LayoutHandler);
+  routeMember(adapter, "settings/meta", SettingsHandler, {
+    resource: "settings/meta",
+  });
+
+  routeMember(adapter, "settings/layout", SettingsHandler, {
+    resource: "settings/layout",
+  });
 }
 
 export default routeSettings;

package/src/tests/handlers/_shared/SettingsHandler.test/edit_form.test.js

@@ -0,0 +1,36 @@
+import SettingsHandler from "../../../../handlers/_shared/SettingsHandler";
+import Settings from "../../../../cloud/Settings";
+
+import Factory from "../../../support/factory";
+
+function buildCtx() {
+  return {
+    client: {
+      settings: new Settings(() => ({}), "token"),
+    },
+    locale: "en",
+  };
+}
+
+describe("Settings edit", () => {
+  test("edit_form", async () => {
+    const settings = Factory.build("settings");
+
+    const ctx = buildCtx();
+
+    const mockFind = jest
+      .spyOn(ctx.client.settings, "find")
+      .mockImplementation(() => settings.value);
+
+    const result = await SettingsHandler.edit_form(ctx);
+
+    expect(mockFind).toHaveBeenCalledWith("en");
+
+    expect(result).toEqual({
+      assigns: {
+        resource: settings.value,
+        errors: {},
+      },
+    });
+  });
+});

package/src/tests/handlers/_shared/SettingsHandler.test/update.test.js

@@ -0,0 +1,114 @@
+import SettingsHandler from "../../../../handlers/_shared/SettingsHandler";
+import Settings from "../../../../cloud/Settings";
+
+import Factory from "../../../support/factory";
+
+function buildCtx(params) {
+  return {
+    client: {
+      settings: new Settings(() => ({}), "token"),
+    },
+    locale: "en",
+    resourceParams: {
+      resource: params,
+    },
+    locale: "en",
+    resourceConfig: {
+      resource: "settings/meta",
+    },
+  };
+}
+
+describe("Settings update", () => {
+  test("update succesfully", async () => {
+    const settings = Factory.build("settings", {
+      value: {
+        meta: {
+          title: "Not A title!",
+          description: "No, no!",
+        },
+      },
+    });
+
+    const ctx = buildCtx({
+      meta: {
+        title: "A title",
+        description: "A description",
+        image: JSON.stringify({ url: "https://image-url.com" }),
+      },
+    });
+
+    const mockFind = jest
+      .spyOn(ctx.client.settings, "find")
+      .mockImplementation(() => settings.value);
+
+    const mockUpdate = jest
+      .spyOn(ctx.client.settings, "update")
+      .mockImplementation(() => ({ setting: {}, errors: null }));
+
+    const result = await SettingsHandler.update(ctx);
+
+    expect(mockFind).toHaveBeenCalledWith("en");
+    expect(mockUpdate).toHaveBeenCalledWith("en", {
+      meta: {
+        title: "A title",
+        description: "A description",
+        image: { url: "https://image-url.com" },
+      },
+    });
+
+    expect(result).toEqual({
+      redirect: "/en/settings/meta/edit",
+    });
+  });
+
+  test("update failed", async () => {
+    const settings = Factory.build("settings", {
+      value: {
+        meta: {
+          title: "Not A title!",
+          description: "No, no!",
+        },
+      },
+    });
+
+    const updateParams = {
+      meta: {
+        title: "A title",
+        description: "A description",
+        image: JSON.stringify({ url: "https://image-url.com" }),
+      },
+    };
+
+    const ctx = buildCtx(updateParams);
+
+    const mockFind = jest
+      .spyOn(ctx.client.settings, "find")
+      .mockImplementation(() => settings.value);
+
+    const mockUpdate = jest
+      .spyOn(ctx.client.settings, "update")
+      .mockImplementation(() => ({
+        setting: null,
+        errors: [{ key: "generalError", message: "some error" }],
+      }));
+
+    const result = await SettingsHandler.update(ctx);
+
+    expect(mockFind).toHaveBeenCalledWith("en");
+    expect(mockUpdate).toHaveBeenCalledWith("en", {
+      meta: {
+        title: "A title",
+        description: "A description",
+        image: { url: "https://image-url.com" },
+      },
+    });
+
+    expect(result).toEqual({
+      assigns: {
+        resource: updateParams,
+        errors: { resource: { generalError: "some error" } },
+      },
+    });
+  });
+});

package/src/views/layouts/application.ejs

@@ -41,6 +41,10 @@
   }
 </style>
 
+<script src="https://storage.googleapis.com/cdn-raketa-cloud/js/raketa-menu-builder-webcomponent.umd.js"></script>
+
+<script src="https://storage.googleapis.com/cdn-raketa-cloud/js/raketa-list-input-webcomponent.umd.js"></script>
+
 <body class="relative max-h-screen overflow-hidden">
   <%- include('header.ejs') %>
 

package/src/views/settings/layout/edit_form.ejs

@@ -5,11 +5,47 @@
 
   <%- render_partial('../_nav.ejs', { active: 'layout' }) %>
 
+  <% const WIDGETS = {
+    HTML: {
+      defaults: {
+        code: "<div>HTML</div>"
+      },
+      admin: {
+        code: { type: "textarea" }
+      }
+    },
+    Image: {
+      primaryField: "image",
+      defaults: {
+        image: "https://placeholder.raketa.cloud/images/1920x1080"
+      },
+      admin: {
+        image: { type: "text" }
+      }
+    },
+    Title: {
+      primaryField: "title",
+      defaults: {
+        title: "Title"
+      },
+      admin: {
+        title: { type: "text" }
+      }
+    }
+  }; %>
+
   <div>
-    <% form_for({ layout_settings }, errors, (f) => { %>
+    <% form_for({ resource }, errors, (f) => { %>
     <form action="<%= `/${_context.locale}/settings/layout` %>" method="post" class="form">
-      <%- f.field('layout_settings.header', {as: "textarea"}) %>
-      <%- f.field('layout_settings.footer', {as: "textarea"}) %>
+      <div class="mb-4">
+        <label>Header</label>
+        <raketa-menu-builder-input id="header-menu" name="resource[menus][header]" value="<%= JSON.stringify(resource.menus?.header || []) %>" widgets="<%= JSON.stringify(WIDGETS) %>"></raketa-menu-builder-input>
+      </div>
+
+      <div class="mb-4">
+        <label>Footer</label>
+        <raketa-menu-builder-input id="header-menu" name="resource[menus][footer]" value="<%= JSON.stringify(resource.menus?.footer || []) %>" widgets="<%= JSON.stringify(WIDGETS) %>"></raketa-menu-builder-input>
+      </div>
 
       <div class="form-actions">
         <div class="btn-toolbar">

package/src/views/settings/meta/edit_form.ejs

@@ -6,12 +6,12 @@
   <%- render_partial('../_nav.ejs', { active: 'meta' }) %>
 
   <div class="grid gap-4 md:grid-cols-3">
-    <% form_for({ meta_settings }, errors, (f) => { %>
+    <% form_for({ resource }, errors, (f) => { %>
     <form action="<%= `/${_context.locale}/settings/meta` %>" method="post" class="form">
-      <%- f.field('meta_settings.title', { label: "Meta title", hint: "Used for both meta and OpenGraph" }) %>
-      <%- f.field('meta_settings.description', { as: "textarea", label: "Meta description", hint: "Used for both meta and OpenGraph" }) %>
+      <%- f.field('resource.meta.title', { label: "Meta title", hint: "Used for both meta and OpenGraph" }) %>
+      <%- f.field('resource.meta.description', { as: "textarea", label: "Meta description", hint: "Used for both meta and OpenGraph" }) %>
 
-      <raketa-image-picker name="meta_settings[image]" value="<%= JSON.stringify(meta_settings.image) %>" label="OpenGraph image"></raketa-image-picker>
+      <raketa-image-picker name="resource[image]" value="<%= JSON.stringify(resource.meta?.image || {}) %>" label="OpenGraph image"></raketa-image-picker>
 
       <div class="form-actions">
         <div class="btn-toolbar">
@@ -21,4 +21,4 @@
     </form>
     <% }) %>
   </div>
-</div>
+</div>

package/src/handlers/settings/LayoutHandler.js

@@ -1,51 +0,0 @@
-const edit_form = async (ctx) => {
-  const data = await ctx.client.settings.find(ctx.locale);
-
-  const layout_settings = {
-    header: JSON.stringify(data.menus?.header),
-    footer: JSON.stringify(data.menus?.footer),
-  };
-
-  return {
-    assigns: {
-      errors: {},
-      layout_settings,
-    },
-  };
-};
-
-const update = async (ctx) => {
-  const params = ctx.resourceParams.layout_settings;
-
-  const currentSettings = await ctx.client.settings.find(ctx.locale);
-
-  if (!currentSettings.menus) {
-    currentSettings.menus = {};
-  }
-
-  currentSettings.menus.header = JSON.parse(params.header);
-  currentSettings.menus.footer = JSON.parse(params.footer);
-
-  const { errors } = await ctx.client.settings.update(
-    ctx.locale,
-    currentSettings
-  );
-
-  if (errors) {
-    return {
-      assigns: {
-        setting: { ...params },
-        errors: { setting: ctx.client.settings.formatErrors(errors) },
-      },
-    };
-  }
-
-  return {
-    redirect: `/${ctx.locale}/settings/layout/edit`,
-  };
-};
-
-export default {
-  edit_form,
-  update,
-};

package/src/handlers/settings/MetaHandler.js

@@ -1,52 +0,0 @@
-const edit_form = async (ctx) => {
-  const data = await ctx.client.settings.find(ctx.locale);
-  const meta_settings = {
-    ...data.meta,
-    image: data.meta?.image || {},
-  };
-  const errors = {};
-
-  return {
-    assigns: {
-      errors,
-      meta_settings,
-    },
-  };
-};
-
-const update = async (ctx) => {
-  const params = ctx.resourceParams.meta_settings;
-
-  const currentSettings = await ctx.client.settings.find(ctx.locale);
-
-  if (!currentSettings.meta) {
-    currentSettings.meta = {};
-  }
-
-  currentSettings.meta.title = params.title;
-  currentSettings.meta.description = params.description;
-  currentSettings.meta.image = JSON.parse(params.image);
-
-  const { errors } = await ctx.client.settings.update(
-    ctx.locale,
-    currentSettings
-  );
-
-  if (errors) {
-    return {
-      assigns: {
-        setting: { ...params },
-        errors: { setting: ctx.client.settings.formatErrors(errors) },
-      },
-    };
-  }
-
-  return {
-    redirect: `/${ctx.locale}/settings/meta/edit`,
-  };
-};
-
-export default {
-  edit_form,
-  update,
-};