studiocms 0.1.0-beta.10

package/dist/components/dashboard/islands/content-mgmt/PageHeader.astro

@@ -0,0 +1,455 @@
+---
+import { type UiLanguageKeys, useTranslations } from 'studiocms:i18n';
+import { StudioCMSRoutes } from 'studiocms:lib';
+import studioCMS_SDK_Cache from 'studiocms:sdk/cache';
+import { Button, Center, Group, Icon, Input, Modal } from 'studiocms:ui/components';
+
+interface Props {
+	lang: UiLanguageKeys;
+	editPage?: boolean;
+	createPage?: boolean;
+	// title?: string;
+	editFolder?: boolean;
+	createFolder?: boolean;
+}
+
+const { editPage, createPage, createFolder, editFolder, lang } = Astro.props;
+
+const t = useTranslations(lang, '@studiocms/dashboard:content-header');
+
+const title = t('title');
+
+let pageTitle = title;
+let pageSlug: string | undefined = undefined;
+let currentId = '';
+let folderName = '';
+
+const urlParams = Astro.url.searchParams;
+const editId = urlParams.get('edit') || '';
+
+if (editId) {
+	const res = await studioCMS_SDK_Cache.GET.page.byId(editId);
+
+	if (editPage) {
+		pageTitle = `${res.data.title}`;
+		pageSlug = res.data.slug;
+		currentId = res.data.id;
+	}
+}
+
+const folderId = urlParams.get('folder') || '';
+
+if (folderId) {
+	const res = await studioCMS_SDK_Cache.GET.folderList();
+
+	const folder = res.data.find((folder) => folder.id === folderId);
+
+	if (editFolder && folder) {
+		pageTitle = `${folder.name}`;
+		currentId = folder.id;
+		folderName = folder.name;
+	}
+}
+
+const currentMode = editPage
+	? 'edit-page'
+	: editFolder
+		? 'edit-folder'
+		: createFolder
+			? 'create-folder'
+			: createPage
+				? 'create-page'
+				: 'none';
+---
+<header class="page-header">
+  <div class="page-title-container">
+    <Button color='primary' id='nav-open' class='mobile-btn'>
+      <Icon name="bars-3" height={24} width={24} slot="start-content" />
+    </Button>
+    <h1 class="page-title" data-link={StudioCMSRoutes.sdk.pages}>
+      {currentMode === 'none' ? (
+        <t-content-header key="title">
+          {pageTitle}
+        </t-content-header>
+      ) : currentMode === 'edit-folder' ? (
+        <><t-content-header key="edit-folder-title">{t('edit-folder-title')}</t-content-header>: {folderName}</>
+      ) : currentMode === 'edit-page' ? (
+        <><t-content-header key="edit-page-title">{t('edit-page-title')}</t-content-header>: {pageTitle}</>
+      ) : currentMode === 'create-folder' ? (
+        <t-content-header key="create-folder-title">
+          {t('create-folder-title')}
+        </t-content-header>
+      ) : (
+        <t-content-header key="create-page-title">
+          {t('create-page-title')}
+        </t-content-header>
+      )}
+    </h1>
+  </div>
+  <div id="page-actions-container" class="page-actions-container">
+
+    { editPage && ( 
+      <Group>
+        <Button id="delete-page-modal-trigger" color="danger" type="submit" size="sm" disabled={pageSlug === 'index'}>
+            <Icon name="trash-20-solid" width={20} height={20} />
+            <t-content-header key="delete-button">
+              {t('delete-button')}
+            </t-content-header>
+        </Button>
+        <Button id="edit-button" variant="solid" size="sm"  color="primary" type="submit" form="edit-page-form">
+          <Icon slot="start-content" name="check-20-solid" width={20} height={20} />
+          <t-content-header key="save-button">
+            {t('save-button')}
+          </t-content-header>
+        </Button>
+      </Group>
+      <Modal 
+        id='delete-page-modal'
+        isForm
+        cancelButton={{ label: 'Cancel', color: 'default' }}
+        actionButton={{ label: 'Confirm', color: 'danger' }}
+        >
+        <h2 slot='header'>
+          <t-content-header key="delete-modal-header">
+            {t('delete-modal-header')}
+          </t-content-header>
+        </h2>
+        <Center>
+          <div class="modal-body">
+            <input type="hidden" name="page-id" value={currentId} />
+            <input type="hidden" name="page-slug" value={pageSlug} />
+            <input type="hidden" name="action-route" value={StudioCMSRoutes.endpointLinks.content.page} />
+                    
+            <span><t-content-header key="delete-modal-desc-1">
+            {t('delete-modal-desc-1')}
+          </t-content-header> <code>{pageSlug}</code> <t-content-header key="delete-modal-desc-2">
+            {t('delete-modal-desc-2')}
+          </t-content-header></span>
+           
+            <Input name="slug-confirm" placeholder={`${pageSlug?.slice(0, pageSlug.length-2)}...`} isRequired />
+            
+            <span style="color: hsl(var(--danger-base))"><t-content-header key="delete-modal-warning">
+            {t('delete-modal-warning')}
+          </t-content-header></span>
+          </div>
+        </Center>
+      </Modal>
+    )}
+
+    { editFolder && ( 
+      <Group>
+        <Button id="delete-folder-modal-trigger" color="danger" type="submit" size="sm">
+          <Icon name="trash-20-solid" width={20} height={20} />
+          <t-content-header key="delete-button">
+            {t('delete-button')}
+          </t-content-header>
+        </Button>
+        <Button id="edit-button" variant="solid" size="sm"  color="primary" type="submit" form="edit-folder-form">
+          <Icon slot="start-content" name="check-20-solid" width={20} height={20} />
+          <t-content-header key="save-button">
+            {t('save-button')}
+          </t-content-header>
+        </Button>
+      </Group>
+      <Modal
+        id="delete-folder-modal"
+        isForm
+        cancelButton={{ label: 'Cancel', color: 'default' }}
+        actionButton={{ label: 'Delete', color: 'danger' }}
+        >
+        <h2 slot="header">
+          <t-content-header key="delete-modal-header">
+            {t('delete-modal-header')}
+          </t-content-header>
+        </h2>
+        <Center>
+          <div class="modal-body">
+            <input type="hidden" name="folder-id" value={currentId} />
+            <input type="hidden" name="folder-name" value={folderName} />
+            <input type="hidden" name="action-route" value={StudioCMSRoutes.endpointLinks.content.folder} />
+
+            <span><t-content-header key="delete-folder-modal-desc-1">
+            {t('delete-folder-modal-desc-1')}
+          </t-content-header> <code>{folderName}</code> <t-content-header key="delete-folder-modal-desc-2">
+            {t('delete-folder-modal-desc-2')}
+          </t-content-header></span>
+
+            <Input name="confirm-folder-name" placeholder={`${folderName.slice(0, folderName.length-2)}...`} isRequired />
+          
+            <span style="color: hsl(var(--danger-base))"><t-content-header key="delete-modal-warning">
+            {t('delete-modal-warning')}
+          </t-content-header></span>
+          </div>
+        </Center>
+      </Modal>
+    )}
+
+    { createFolder && ( 
+      <Button id="edit-button" variant="solid" size="sm"  color="primary" type="submit" form="create-folder-form">
+        <Icon slot="start-content" name="check-20-solid" width={20} height={20} />
+          <t-content-header key="create-button">
+            {t('create-button')}
+          </t-content-header>
+      </Button>
+    )}
+
+    {createPage && ( 
+      <Group>
+      <Button id="draft-button" variant="outlined" size="sm" color="primary" type="submit" form="page-create-form" disabled>
+        <Icon slot="start-content" name="document-text-20-solid" width={20} height={20} />
+          <t-content-header key="draft-button">
+            {t('draft-button')}
+          </t-content-header>
+      </Button>
+      <Button id="publish-button" variant="solid" size="sm"  color="primary" type="submit" form="page-create-form">
+        <Icon slot="start-content" name="check-20-solid" width={20} height={20} />
+          <t-content-header key="publish-button">
+            {t('publish-button')}
+          </t-content-header>
+      </Button>
+      </Group>
+    )}
+  </div>
+</header>
+
+<div
+  id="current-mode-selector"
+  style="display: none;"
+  data-mode={currentMode}
+></div>
+
+<script>
+    import { 
+        $i18n,
+        baseTranslation,
+        makeTranslation,
+    } from 'studiocms:i18n/client';
+
+    const currentPage = '@studiocms/dashboard:content-header';
+
+    const i18n = $i18n(currentPage, baseTranslation[currentPage]);
+    
+    if (!customElements.get('t-content-header')) {
+        customElements.define('t-content-header', makeTranslation(currentPage, i18n));
+    }
+</script>
+
+<script>
+    import { ModalHelper } from 'studiocms:ui/components';
+    import { toast } from "studiocms:ui/components";
+
+    const mode = (document.getElementById('current-mode-selector') as HTMLDivElement).dataset.mode;
+
+    switch (mode) {
+      case "edit-page": {
+        const deletePageModal = new ModalHelper('delete-page-modal', 'delete-page-modal-trigger');
+
+        deletePageModal.registerConfirmCallback(async (formData) => {
+            if (!formData) {
+              toast({
+                  title: 'Error',
+                  description: 'Something went wrong',
+                  type: 'danger'
+              })
+              return;
+            }
+
+            const slugConfirm = formData?.get('slug-confirm')?.toString();
+            const action = formData.get('action-route') as string;
+
+            const data = {
+              id: formData?.get('page-id')?.toString(),
+              slug: formData?.get('page-slug')?.toString(),
+            }
+
+            if (!slugConfirm) {
+              toast({
+                  title: 'Error',
+                  description: 'Something went wrong',
+                  type: 'danger'
+              })
+              return;
+            }
+
+            if (!data.id || !data.slug) {
+              toast({
+                  title: 'Error',
+                  description: 'Something went wrong',
+                  type: 'danger'
+              })
+              return;
+            }
+
+            if (slugConfirm !== data.slug) {
+              toast({
+                  title: 'Error',
+                  description: 'Slug does not match',
+                  type: 'danger'
+              })
+              return;
+            }
+
+            const response = await fetch(action, {
+              method: 'DELETE',
+              headers: {
+                  'Content-Type': 'application/json',
+              },
+              body: JSON.stringify(data),
+            });
+
+            const res = await response.json();
+
+            if (response.status !== 200) {
+              toast({
+                  title: 'Error',
+                  description: res.error,
+                  type: 'danger'
+              })
+              return;
+            }
+
+            if (response.status === 200) {
+              toast({
+                  title: 'Success',
+                  description: res.message,
+                  type: 'success'
+              })
+              return;
+            }
+        })
+        break;
+      }
+      case "edit-folder": {
+        const deleteFolderModal = new ModalHelper('delete-folder-modal', 'delete-folder-modal-trigger');
+
+        deleteFolderModal.registerConfirmCallback(async (formData) => {
+            if (!formData) {
+              toast({
+                  title: 'Error',
+                  description: 'Something went wrong',
+                  type: 'danger'
+              })
+              return;
+            }
+
+            type JsonData = {
+              id: string;
+              folderName: string;
+              parentFolder: string | null;
+            };
+
+            const folderName = formData.get('folder-name') as string;
+            const id = formData.get('folder-id') as string;
+            const confirmFolderName = formData?.get('confirm-folder-name');
+            const action = formData.get('action-route') as string;
+
+            if (!folderName || !confirmFolderName) {
+              toast({
+                  title: 'Error',
+                  description: 'Something went wrong',
+                  type: 'danger'
+              })
+              return;
+            }
+
+            if (folderName !== confirmFolderName) {
+              toast({
+                  title: 'Error',
+                  description: 'Folder name does not match',
+                  type: 'danger'
+              })
+              return;
+            }
+
+            const data: JsonData = {
+              id,
+              folderName: folderName,
+              parentFolder: null,
+            };
+
+            const response = await fetch(action, {
+              method: 'DELETE',
+              headers: {
+                  'Content-Type': 'application/json',
+              },
+              body: JSON.stringify(data),
+            });
+
+            const res = await response.json();
+
+            if (response.status !== 200) {
+              toast({
+                  title: 'Error',
+                  description: res.error,
+                  type: 'danger'
+              })
+              return;
+            }
+
+            if (response.status === 200) {
+              toast({
+                  title: 'Success',
+                  description: res.message,
+                  type: 'success'
+              })
+              return;
+            }
+        })
+        break;
+      }
+      case "create-folder":
+        break;
+      case "create-page":
+        break;
+      default:
+        break;
+    }
+</script>
+
+<style>
+.page-header {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  flex-wrap: wrap;
+  gap: 1rem;
+}
+
+.page-title-container {
+  display: flex;
+  flex-direction: row;
+  gap: 1rem;
+  width: fit-content;
+}
+
+.page-title {
+  display: block;
+  width: fit-content;
+  margin: 0;
+}
+
+.page-actions-container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 1rem;
+}
+
+.modal-body {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+
+    span {
+        font-size: .875rem;
+    }
+
+    code {
+        background-color: hsl(var(--background-step-3));
+        padding: .25rem;
+        border-radius: 4px;
+    }
+}
+</style>

package/dist/components/dashboard/islands/content-mgmt/PageList.astro

@@ -0,0 +1,49 @@
+---
+import TreeRenderer from './TreeRenderer.astro';
+import { PageFolderTree } from './shared.js';
+
+interface Props {
+	isNewFolder?: boolean;
+	isNewPage?: boolean;
+}
+
+const { isNewFolder, isNewPage } = Astro.props;
+
+const testData = [
+	{
+		id: '1',
+		name: 'Page 1',
+		page: true,
+		pageData: null,
+		children: [],
+	},
+	{
+		id: '2',
+		name: 'Page 2',
+		page: true,
+		pageData: null,
+		children: [],
+	},
+	{
+		id: '3',
+		name: 'Test Folder',
+		page: false,
+		pageData: null,
+		children: [
+			{
+				id: '4',
+				name: 'Sub Folder',
+				page: false,
+				pageData: null,
+				children: [
+					{ id: '5', name: 'Page 3', page: true, children: [], pageData: null },
+					{ id: '6', name: 'Page 4', page: true, children: [], pageData: null },
+				],
+			},
+			{ id: '7', name: 'Page 5', page: true, children: [], pageData: null },
+		],
+	},
+];
+---
+
+<TreeRenderer data={PageFolderTree} {isNewFolder} {isNewPage} />

package/dist/components/dashboard/islands/content-mgmt/PluginFields.astro

@@ -0,0 +1,29 @@
+---
+import type { SettingsField } from 'studiocms:plugin-helpers';
+import { Row } from 'studiocms:ui/components';
+import { Checkbox, Input, RadioGroup, Select, Textarea } from 'studiocms:ui/components';
+
+interface Props {
+	fields: SettingsField[];
+}
+
+const { fields } = Astro.props;
+---
+{
+  fields.map((field) => {
+    switch (field.input) {
+      case 'checkbox':
+        return <Checkbox label={field.label} size={field.size} color={field.color} defaultChecked={field.defaultChecked} disabled={field.readOnly} name={field.name} isRequired={field.required} />
+      case 'input':
+        return <Input label={field.label} type={field.type} placeholder={field.placeholder} isRequired={field.required} name={field.name} disabled={field.readOnly} defaultValue={field.defaultValue} />
+      case 'textarea':
+        return <Textarea label={field.label} placeholder={field.placeholder} isRequired={field.required} name={field.name} disabled={field.readOnly} defaultValue={field.defaultValue} />
+      case 'radio':
+        return <RadioGroup label={field.label} name={field.name} options={field.options} isRequired={field.required} disabled={field.readOnly} color={field.color} defaultValue={field.defaultValue} horizontal={field.direction === 'horizontal'} />
+      case 'select':
+        return <Select label={field.label} name={field.name} options={field.options} isRequired={field.required} disabled={field.readOnly} defaultValue={field.defaultValue} />
+      case 'row':
+        return <Row alignCenter={field.alignCenter} gapSize={field.gapSize}><Astro.self fields={field.fields} /></Row>
+      }
+    })
+}

package/dist/components/dashboard/islands/content-mgmt/TreeRenderer.astro

@@ -0,0 +1,75 @@
+---
+import { StudioCMSRoutes } from 'studiocms:lib';
+import type { CombinedPageData } from 'studiocms:sdk/types';
+import type { FolderNode } from '../../../../sdk/types/index.js';
+import TreeSidebarFolder from './TreeSidebarFolder.astro';
+import TreeSidebarLink from './TreeSidebarLink.astro';
+
+// Props passed to the component
+interface Props {
+	data: FolderNode[];
+	isNewPage?: boolean;
+	isNewFolder?: boolean;
+}
+
+const { data, isNewFolder, isNewPage } = Astro.props;
+
+/**
+ * Recursively sorts a tree of pages and folders by name (A to Z).
+ * @param data - The array of folders and pages to sort.
+ * @returns A new array with the sorted structure.
+ */
+function sortTree(data: FolderNode[]): FolderNode[] {
+	return data
+		.map((node) => ({
+			...node,
+			children: sortTree(node.children), // Recursively sort children
+		}))
+		.sort((a, b) => a.name.localeCompare(b.name)); // Sort current level by name
+}
+
+const sortedData = sortTree(data);
+
+function getIcon(pageData: CombinedPageData | null) {
+	if (pageData?.slug === 'index') {
+		return 'home-modern';
+	}
+
+	if (pageData?.draft) {
+		return 'pencil';
+	}
+
+	return 'document-text';
+}
+---
+
+{sortedData.map(({ id, name, page, children, pageData }) => (
+    page ? (
+        <TreeSidebarLink 
+            icon={getIcon(pageData)} 
+            href={`${StudioCMSRoutes.mainLinks.contentManagementEdit}/?edit=${id}`}
+            >
+            {name}
+        </TreeSidebarLink>
+    ) : (
+        <TreeSidebarFolder 
+            {name} 
+            icon="folder" 
+            href={`${StudioCMSRoutes.mainLinks.contentManagementFolderEdit}/?folder=${id}`}
+            >
+            {children && children.length > 0 && (
+                <div class="inner-sidebar-folder-child-nodes">
+                    <Astro.self data={children} />
+                </div>
+            )}
+        </TreeSidebarFolder>
+    )
+))}
+{isNewPage && (
+    <TreeSidebarLink icon="document-plus" href='#'>
+        New Page...
+    </TreeSidebarLink>
+)}
+{isNewFolder && (
+    <TreeSidebarFolder name="New Folder..." icon="folder-plus" href="#" />
+)}

package/dist/components/dashboard/islands/content-mgmt/TreeSidebarFolder.astro

@@ -0,0 +1,53 @@
+---
+import { Icon } from 'studiocms:ui/components';
+import type { HeroIconName } from '@studiocms/ui/components/Icon/iconType.js';
+import type { HTMLAttributes } from 'astro/types';
+
+interface Props extends HTMLAttributes<'a'> {
+	/**
+	 * ONLY USE OUTLINED ICONS! Shit will break otherwise
+	 */
+	icon: HeroIconName;
+	name: string;
+	href: string;
+}
+
+const { icon, name, ...props } = Astro.props;
+
+const activeIcon = `${icon}-solid`;
+
+const compId = crypto.randomUUID();
+---
+
+<a id={compId} class="inner-sidebar-link" {...props} data-astro-reload>
+  <Icon name={icon} id="not-selected-icon" class='sidebar-link-icon not-selected' width={24} height={24} />
+  <Icon name={activeIcon as HeroIconName} id="selected-icon" class="sidebar-link-icon selected" width={24} height={24} />
+  <span class="sidebar-link-text">
+    {name}
+  </span>
+</a>
+<slot />
+
+<script is:inline data-astro-rerun define:vars={{ compId }}>
+  function setInnerSidebarLinks() {
+    const link = document.getElementById(compId)
+
+    const notSelectedIcon = link.querySelector('#not-selected-icon')
+    const selectedIcon = link.querySelector('#selected-icon')
+
+    notSelectedIcon.style.display = 'block';
+    selectedIcon.style.display = 'none';
+    link.classList.remove('active');
+
+    const LinkQueryParams = new URL(link.href).searchParams.get('folder');
+    const CurrentQueryParams = new URL(window.location.href).searchParams.get('folder');
+
+    if (LinkQueryParams === CurrentQueryParams) {
+      notSelectedIcon.style.display = 'none';
+      selectedIcon.style.display = 'block';
+      link.classList.add('active');
+    }
+  }
+  document.addEventListener('astro:page-load', setInnerSidebarLinks);
+  setInnerSidebarLinks();
+</script>