studiocms 0.1.0-beta.10

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

@@ -0,0 +1,118 @@
+---
+import { type UiLanguageKeys, useTranslations } from 'studiocms:i18n';
+import { StudioCMSRoutes } from 'studiocms:lib';
+import { Input, Select } from 'studiocms:ui/components';
+import { parentFolderOptions } from './shared.js';
+
+interface Props {
+	lang: UiLanguageKeys;
+}
+
+const { lang } = Astro.props;
+
+const t = useTranslations(lang, '@studiocms/dashboard:content-folder');
+---
+<div id="create-folder-container">
+
+    <form id="create-folder-form" action={StudioCMSRoutes.endpointLinks.content.folder}>
+    
+        <Input label={t('input-folder-name')} name="folder-name" isRequired />
+        
+        <Select label={t('input-folder-parent')} name="parent-folder" fullWidth options={parentFolderOptions} defaultValue='null' />
+    
+    </form>
+
+</div>
+
+<script>
+    import { 
+        $i18n,
+        baseTranslation,
+        updateElmLabel,
+        updateSelectElmLabel
+    } from 'studiocms:i18n/client';
+
+    const currentPage = '@studiocms/dashboard:content-folder';
+
+    const i18n = $i18n(currentPage, baseTranslation[currentPage]);
+      
+    i18n.subscribe(comp => {
+        updateElmLabel('folder-name', comp['input-folder-name']);
+        updateSelectElmLabel('parent-folder', comp['input-folder-parent']);
+    });
+</script>
+
+<script>
+import { toast } from "studiocms:ui/components";
+
+    const form = document.getElementById('create-folder-form') as HTMLFormElement;
+
+    form.addEventListener('submit', async (e) => {
+        e.preventDefault();
+
+        const formData = new FormData(form);
+
+        function parseParentFolder(value: string) {
+            if (value === 'null') {
+                return null;
+            }
+
+            return value;
+        }
+
+        type JsonData = {
+            folderName: string;
+            parentFolder: string | null;
+        }
+        
+        const data: JsonData = {
+            folderName: formData.get('folder-name') as string,
+            parentFolder: parseParentFolder(formData.get('parent-folder') as string),
+        }
+
+        console.log(data);
+
+        const response = await fetch(form.action, {
+            method: 'POST',
+            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;
+        }
+    });
+</script>
+
+<style>
+    #create-folder-container {
+        height: 100%;
+        width: 100%;
+        min-width: 100%;
+    }
+
+    #create-folder-form {
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+        padding-top: .5rem;
+    }
+</style>

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

@@ -0,0 +1,380 @@
+---
+import '../../../../styles/dashboard-tiny-mde.css';
+import { type UiLanguageKeys, useTranslations } from 'studiocms:i18n';
+import { StudioCMSRoutes } from 'studiocms:lib';
+import type { SettingsField } from 'studiocms:plugin-helpers';
+import pluginList from 'studiocms:plugins';
+import { Card, Input, Select, TabItem, Tabs } from 'studiocms:ui/components';
+import { editorKeys } from 'virtual:studiocms/components/Editors';
+import { convertToSafeString, importEditorKeys } from './runtime.js';
+import {
+	categoriesOptions,
+	pageTypeOptions,
+	parentFolderOptions,
+	tagsOptions,
+	trueFalse,
+} from './shared.js';
+
+const editors = await importEditorKeys(editorKeys);
+
+// biome-ignore lint/suspicious/noExplicitAny: <explanation>
+let editor: any = editors[convertToSafeString('studiocms/markdown')];
+
+const CurrentEditorComponent = editor;
+
+const pluginFields = pluginList.flatMap(({ pageTypes }) => {
+	const pageTypeOutput: {
+		identifier: string;
+		fields?: SettingsField[];
+	}[] = [];
+
+	if (!pageTypes) {
+		return pageTypeOutput;
+	}
+
+	for (const pageType of pageTypes) {
+		pageTypeOutput.push(pageType);
+	}
+
+	return pageTypeOutput;
+});
+
+interface Props {
+	lang: UiLanguageKeys;
+}
+
+const { lang } = Astro.props;
+
+const t = useTranslations(lang, '@studiocms/dashboard:content-page');
+---
+<div id="create-page-container">
+    <form id="page-create-form" action={StudioCMSRoutes.endpointLinks.content.page}>
+
+      <Tabs variant={'starlight'}>
+        <TabItem label={t('tab-label-basic-info')} icon={'information-circle-20-solid'} color={'primary'}>
+          <div class="tab-section">
+            <div class="form-row">
+                <Input label={t('input-page-title')} name='page-title' isRequired />
+                <Input label={t('input-page-slug')} name='page-slug' isRequired />
+            </div>
+    
+            <div class="form-row">
+              <Input label={t('input-page-description')} name='page-description' isRequired />
+              <Input label={t('input-page-hero-image')} name='page-hero-image' placeholder='https://...' />
+            </div>
+    
+            <div class="form-row">
+                <Select 
+                    label={t('select-page-type')}
+                    name="page-type" 
+                    isRequired 
+                    fullWidth 
+                    defaultValue='studiocms/markdown'
+                    options={pageTypeOptions} 
+                    />
+                <Select 
+                    label={t('select-page-show-in-nav')}
+                    name="show-in-nav" 
+                    isRequired 
+                    defaultValue='false'
+                    fullWidth 
+                    options={trueFalse} 
+                    />
+            </div>
+    
+            <div class="form-row">
+                <Select label={t('select-page-parent-folder')} name="parent-folder" fullWidth options={parentFolderOptions} defaultValue='null' />
+                <Select label={t('select-page-draft')} name="draft" fullWidth options={trueFalse} disabled placeholder='Use submission buttons above'/>
+            </div>
+    
+            <div class="form-row">
+                <Select label={t('select-page-categories')} name="categories" placeholder="Work in Progress" fullWidth options={categoriesOptions} disabled />
+                <Select label={t('select-page-tags')} name="tags" placeholder="Work in Progress" fullWidth options={tagsOptions} disabled />
+            </div>
+    
+            <div class="form-row">
+                <Select label={t('select-page-show-author')} name="show-author" defaultValue="false" fullWidth options={trueFalse} />
+                <Select label={t('select-page-show-contributors')} name="show-contributors" defaultValue="false" fullWidth options={trueFalse} />
+            </div>
+
+            <div id="custom-page-type-fields" style="display: none;">
+              <Card fullWidth>
+                <div slot="header">
+                  <span>
+                    <t-content-create-page key="custom-page-type-fields-header">{t('custom-page-type-fields-header')}</t-content-create-page>
+                  </span>
+                </div>
+                <div>
+                  <t-content-create-page key="custom-page-types-description-new">{t('custom-page-types-description-new')}</t-content-create-page>
+                </div>
+              </Card>
+            </div>
+
+          </div>
+          </TabItem>
+          <TabItem label={t('tab-label-content')} icon={'document-text-20-solid'} color={'success'}>
+            <div class="tab-section">
+              <div class="page-content-editor">
+                <CurrentEditorComponent />
+                <div id="page-content-editor-placeholder" style="display: none;"></div>
+              </div>
+            </div>
+          </TabItem>
+        </Tabs>
+
+    </form>
+</div>
+
+<script>
+    import { 
+        $i18n,
+        baseTranslation,
+        makeTranslation,
+        updateElmLabel,
+        updateSelectElmLabel
+    } from 'studiocms:i18n/client';
+
+    const currentPage = '@studiocms/dashboard:content-page';
+
+    const i18n = $i18n(currentPage, baseTranslation[currentPage]);
+      
+    i18n.subscribe(comp => {
+        updateElmLabel('page-title', comp['input-page-title']);
+        updateElmLabel('page-slug', comp['input-page-slug']);
+        updateElmLabel('page-description', comp['input-page-description']);
+        updateElmLabel('page-hero-image', comp['input-page-hero-image']);
+
+        updateSelectElmLabel('page-type', comp['select-page-type']);
+        updateSelectElmLabel('show-in-nav', comp['select-page-show-in-nav']);
+        updateSelectElmLabel('parent-folder', comp['select-page-parent-folder']);
+        updateSelectElmLabel('draft', comp['select-page-draft']);
+        updateSelectElmLabel('categories', comp['select-page-categories']);
+        updateSelectElmLabel('tags', comp['select-page-tags']);
+        updateSelectElmLabel('show-author', comp['select-page-show-author']);
+        updateSelectElmLabel('show-contributors', comp['select-page-show-contributors']);
+    });
+    
+    if (!customElements.get('t-content-create-page')) {
+        customElements.define('t-content-create-page', makeTranslation(currentPage, i18n));
+    }
+</script>
+
+
+<script is:inline define:vars={{ editors, pluginFields }}>
+
+// TODO: Make this work to be able to swap in new editors instead... This almost works but does not load scripts once the partial is loaded.
+
+  async function setupPluginFields() {
+    const pageTypeDropdown = document.querySelector('#page-type-dropdown');
+    const pageTypeOptions = pageTypeDropdown.querySelectorAll('.sui-select-option');
+
+    pageTypeOptions.forEach((option) => {
+      option.addEventListener('click', async () => {
+        const selectedValue = option.getAttribute('value');
+
+        const pluginFields = pluginFields.find((pluginField) => pluginField.identifier === selectedValue);
+
+        if (!pluginFields) {
+          return;
+        }
+
+        const customPageTypeFields = document.getElementById('custom-page-type-fields');
+
+        if (pluginFields.fields > 0) {
+          customPageTypeFields.style.display = 'block';
+        }
+      })
+    })
+  }
+
+  async function setupPageEditorSwapper() {
+    const currentPageTypeOptions = document.querySelector('#page-type-dropdown').querySelectorAll('.sui-select-option');
+
+    currentPageTypeOptions.forEach((option) => {
+      option.addEventListener('click', async () => {
+
+        const selectedValue = option.getAttribute('value');
+
+        if (selectedValue !== 'studiocms/markdown') {
+          const editorContainer = document.querySelector('.page-content-editor');
+          const editorPlaceholder = document.getElementById('page-content-editor-placeholder');
+
+          if (editors.find((editor) => editor.identifier !== selectedValue)) {
+            return;
+          }
+
+          editorContainer.style.display = 'none';
+          editorPlaceholder.style.display = 'block';
+          editorPlaceholder.innerText = 'You have changed your pageType. Please save your changes and refresh the page to see the new editor.';
+        }
+
+        if (selectedValue === 'studiocms/markdown') {
+          const editorContainer = document.querySelector('.page-content-editor');
+          const editorPlaceholder = document.getElementById('page-content-editor-placeholder');
+
+          editorContainer.style.display = 'block';
+          editorPlaceholder.style.display = 'none';
+        }
+      })
+    })
+  }
+
+  setupPluginFields();
+  setupPageEditorSwapper();
+</script>
+
+<script>
+import { toast } from "studiocms:ui/components";
+    // get the elements
+    const createPageForm = document.getElementById('page-create-form') as HTMLFormElement;
+
+    function getParentFolderValue(value?: string) {
+      if (value === 'null') return null;
+      return value;
+    }
+
+    const draftButton = document.getElementById('draft-button') as HTMLElement;
+    const publishButton = document.getElementById('publish-button') as HTMLElement;
+
+    createPageForm.addEventListener('submit', (e) => {
+      e.preventDefault();
+      console.warn('Form not submitted. Please use the buttons above to save or publish the page.');
+    });
+
+    draftButton.addEventListener('click', async (e) => {
+      e.preventDefault();
+      const formData = new FormData(createPageForm);
+
+      const response = await fetch(createPageForm.action, {
+          method: 'POST',
+          body: formData,
+          headers: {
+              'Content-Type': 'application/json',
+          },
+      });
+
+      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;
+      }
+      })
+
+    publishButton.addEventListener('click', async (e) => {
+      e.preventDefault();
+      const formData = new FormData(createPageForm);
+
+      const data = {
+        title: formData.get('page-title')?.toString(),
+        slug: formData.get('page-slug')?.toString(),
+        description: formData.get('page-description')?.toString(),
+        type: formData.get('page-type')?.toString(),
+        showInNav: formData.get('show-in-nav')?.toString() === 'true',
+        heroImage: formData.get('page-hero-image')?.toString(),
+        parentFolder: getParentFolderValue(formData.get('parent-folder')?.toString()),
+        showAuthor: formData.get('show-author')?.toString() === 'true',
+        showContributors: formData.get('show-contributors')?.toString() === 'true',
+        categories: [],
+        tags: [],
+        draft: false,
+      };
+
+      const content = {
+        id: crypto.randomUUID(),
+        content: formData.get('page-content')?.toString(),
+      }
+
+      const response = await fetch(createPageForm.action, {
+          method: 'POST',
+          body: formData,
+      });
+
+      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;
+      }
+      })
+  </script>
+
+<style>
+  #create-page-container {
+      height: 100%;
+      width: 100%;
+      min-width: 100%;
+  }
+
+  #page-create-form {
+      display: flex;
+      flex-direction: column;
+      gap: .75rem;
+      padding-top: .5rem;
+  }
+
+  .tab-section {
+      display: flex;
+      flex-direction: column;
+      gap: 1rem;
+  }
+
+  .form-row {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: .75rem;
+  }
+
+  @media screen and (max-width: 768px) {
+      .form-row {
+          grid-template-columns: 1fr;
+      }
+  }
+
+  .page-content-editor {
+      height: 250px;
+      margin-bottom: 1rem;
+
+      .editor-container {
+          height: 100%;
+          overflow: hidden;
+          margin-bottom: 1rem;
+      }
+
+      #page-content {
+          height: 100%;
+          width: 100%;
+          border: 1px solid hsl(var(--border));
+          border-radius: 4px;
+          padding: 1rem;
+          font-size: 1rem;
+          overflow-y: auto;
+      }
+  }
+</style>

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

@@ -0,0 +1,138 @@
+---
+import { type UiLanguageKeys, useTranslations } from 'studiocms:i18n';
+import { StudioCMSRoutes } from 'studiocms:lib';
+import studioCMS_SDK_Cache from 'studiocms:sdk/cache';
+import { Input, Select } from 'studiocms:ui/components';
+import { parentFolderOptions } from './shared.js';
+
+const urlParams = Astro.url.searchParams;
+const editId = urlParams.get('folder') || '';
+
+const currentFolder = await studioCMS_SDK_Cache.GET.folder(editId);
+
+if (!currentFolder) {
+	return new Response(null, { status: 404 });
+}
+interface Props {
+	lang: UiLanguageKeys;
+}
+
+const { lang } = Astro.props;
+
+const t = useTranslations(lang, '@studiocms/dashboard:content-folder');
+---
+<div id="edit-folder-container">
+
+    <form id="edit-folder-form" action={StudioCMSRoutes.endpointLinks.content.folder}>
+
+        <input type="hidden" name="folder-id" value={currentFolder.id} />
+    
+        <Input 
+            label={t('input-folder-name')}
+            name="folder-name" 
+            defaultValue={currentFolder.name}
+            isRequired 
+            />
+        
+        <Select 
+            label={t('input-folder-parent')}
+            name="parent-folder" 
+            options={parentFolderOptions} 
+            defaultValue={currentFolder.parent || 'null'} 
+            fullWidth 
+            />
+    
+    </form>
+
+</div>
+
+<script>
+    import { 
+        $i18n,
+        baseTranslation,
+        updateElmLabel,
+        updateSelectElmLabel
+    } from 'studiocms:i18n/client';
+
+    const currentPage = '@studiocms/dashboard:content-folder';
+
+    const i18n = $i18n(currentPage, baseTranslation[currentPage]);
+      
+    i18n.subscribe(comp => {
+        updateElmLabel('folder-name', comp['input-folder-name']);
+        updateSelectElmLabel('parent-folder', comp['input-folder-parent']);
+    });
+</script>
+
+<script>
+import { toast } from "studiocms:ui/components";
+
+    const form = document.getElementById('edit-folder-form') as HTMLFormElement;
+
+    form.addEventListener('submit', async (e) => {
+        e.preventDefault();
+
+        const formData = new FormData(form);
+
+        function parseParentFolder(value: string) {
+            if (value === 'null') {
+                return null;
+            }
+
+            return value;
+        }
+
+        type JsonData = {
+            id: string;
+            folderName: string;
+            parentFolder: string | null;
+        }
+        
+        const data: JsonData = {
+            id: formData.get('folder-id') as string,
+            folderName: formData.get('folder-name') as string,
+            parentFolder: parseParentFolder(formData.get('parent-folder') as string),
+        }
+
+        const response = await fetch(form.action, {
+            method: 'PATCH',
+            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'
+            })
+        }
+
+        if (response.status === 200) {
+            toast({
+                title: 'Success',
+                description: res.message,
+                type: 'success'
+            })
+        }
+    });
+</script>
+
+<style>
+    #edit-folder-container {
+        height: 100%;
+        width: 100%;
+        min-width: 100%;
+    }
+
+    #edit-folder-form {
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+        padding-top: .5rem;
+    }
+</style>