studiocms 0.1.0-beta.10

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

@@ -0,0 +1,432 @@
+---
+import '../../../../styles/dashboard-tiny-mde.css';
+import { FormattedDate } from 'studiocms:components';
+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 studioCMS_SDK from 'studiocms:sdk';
+import studioCMS_SDK_Cache from 'studiocms:sdk/cache';
+import { Button, Card, Center, Icon, Input, Select, TabItem, Tabs } from 'studiocms:ui/components';
+import { editorKeys } from 'virtual:studiocms/components/Editors';
+import PluginFields from './PluginFields.astro';
+import { convertToSafeString, importEditorKeys } from './runtime.js';
+import {
+	categoriesOptions,
+	pageTypeOptions,
+	parentFolderOptions,
+	tagsOptions,
+	trueFalse,
+} from './shared.js';
+
+const urlParams = Astro.url.searchParams;
+const editId = urlParams.get('edit') || '';
+
+const { data: pageData } = await studioCMS_SDK_Cache.GET.page.byId(editId);
+
+function getParentFolderValue(value: string | null): string | undefined {
+	const options = parentFolderOptions;
+	if (value === null) return 'null';
+	return options.find((option: { value: FormDataEntryValue }) => option.value === value)?.value;
+}
+
+const {
+	data: { enableDiffs },
+} = await studioCMS_SDK_Cache.GET.siteConfig();
+
+const diffs = await studioCMS_SDK.diffTracking.get.byPageId.latest(pageData.id, 10);
+
+const users = await studioCMS_SDK.GET.database.users();
+
+const user = (id: string) => users.find((u) => u.id === id)?.name;
+
+const editors = await importEditorKeys(editorKeys);
+
+// biome-ignore lint/suspicious/noExplicitAny: <explanation>
+let editor: any = editors[convertToSafeString(pageData.package)];
+
+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;
+	})
+	.find((pageType) => pageType.identifier === pageData.package);
+
+interface Props {
+	lang: UiLanguageKeys;
+}
+
+const { lang } = Astro.props;
+
+const t = useTranslations(lang, '@studiocms/dashboard:content-page');
+---
+<div id="edit-page-container">
+    <form id="edit-page-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 defaultValue={pageData.title} />
+                    <Input label={t('input-page-slug')} name='page-slug' disabled isRequired defaultValue={pageData.slug} />
+        
+                    <input type="hidden" name="page-slug" value={pageData.slug} />
+                    <input type="hidden" name="page-id" value={pageData.id} />
+                </div>
+        
+                <div class="form-row">
+                    <Input label={t('input-page-description')} name='page-description' isRequired defaultValue={pageData.description}/>
+                    <Input label={t('input-page-hero-image')} name='page-hero-image' placeholder='https://...' defaultValue={pageData.heroImage} />
+                </div>
+        
+                <div class="form-row">
+                    <Select 
+                        label={t('select-page-type')} 
+                        name="page-type" 
+                        isRequired 
+                        fullWidth 
+                        defaultValue={pageData.package}
+                        options={pageTypeOptions} 
+                        />
+                    <Select 
+                        label={t('select-page-show-in-nav')} 
+                        name="show-in-nav" 
+                        isRequired 
+                        defaultValue={`${pageData.showOnNav}`}
+                        fullWidth 
+                        options={trueFalse} 
+                        />
+                </div>
+        
+                <div class="form-row">
+                    <Select label={t('select-page-parent-folder')}  name="parent-folder" fullWidth options={parentFolderOptions} defaultValue={getParentFolderValue(pageData.parentFolder)} />
+                    <Select label={t('select-page-draft')} name="draft" fullWidth options={trueFalse} defaultValue={`${pageData.draft ?? false}`} disabled={pageData.slug === 'index'} />
+                </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={`${pageData.showAuthor}`} fullWidth options={trueFalse} />
+                    <Select label={t('select-page-show-contributors')} name="show-contributors" defaultValue={`${pageData.showContributors}`} fullWidth options={trueFalse} />
+                </div>
+
+                  <div id="custom-page-type-fields" class:list={[pluginFields?.fields ? '' : 'page-types-hidden']}>
+                    <Card fullWidth>
+                      <div slot="header">
+                        <span>
+                          <t-content-edit-page key="custom-page-type-fields-header">{t('custom-page-type-fields-header')}</t-content-edit-page>
+                        </span>
+                      </div>
+                      {pluginFields?.fields && (<PluginFields fields={pluginFields.fields} /> )}
+                    </Card>
+                  </div>
+            </div>
+          </TabItem>
+          <TabItem label={t('tab-label-content')} icon={'document-text-20-solid'} color={'success'}>
+
+            <input type="hidden" name="page-content-id" value={pageData.defaultContent?.id} />
+
+            <div class="tab-section">
+                <div class="page-content-editor">
+                    <CurrentEditorComponent content={pageData.defaultContent?.content} />
+                    <div id="page-content-editor-placeholder" style="display: none;"></div>
+                </div>
+            </div>
+          </TabItem>
+
+          {
+            enableDiffs && (
+                <TabItem label={t('tab-label-diff')} icon={'archive-box-20-solid'} color={'warning'}>
+                    <div class="tab-section">
+                        <div class="edit-card-list">
+                    
+                        {
+                            diffs.length > 0 ? (
+                            diffs.map((diff) => (
+                                <Card fullWidth class={'edit-card'}>
+                                <div class="card-row">
+                                    <span class="card-title">{pageData.title}</span>
+                                    <span class="card-date"><t-content-edit-page key="diff-edited-by-1">{t('diff-edited-by-1')}</t-content-edit-page>: <FormattedDate date={diff.timestamp!} /> <t-content-edit-page key="diff-edited-by-2">{t('diff-edited-by-2')}</t-content-edit-page> {user(diff.userId)}</span>
+                                </div>
+                    
+                                <div class="card-row">
+                                    <span class="card-description">{pageData.description}</span>
+                                    <Button size='sm' as='a' href={StudioCMSRoutes.mainLinks.contentManagementDiff + `?diff=${diff.id}`}>
+                                    <Icon name="eye" width={24} height={24} class="card-icon" />
+                                    </Button>
+                                </div>
+                                </Card>
+                            ))
+                            ) : (
+                            <Card fullWidth style="background-color: hsl(var(--background-step-1));">
+                                <Center><t-content-edit-page key="diff-no-history">{t('diff-no-history')}</t-content-edit-page></Center>
+                            </Card>
+                            )
+                        }
+                    
+                        </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-edit-page')) {
+        customElements.define('t-content-edit-page', makeTranslation(currentPage, i18n));
+    }
+</script>
+
+<script is:inline define:vars={{ editors: editorKeys }}>
+
+// 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.classList.remove('page-types-hidden');
+          customPageTypeFields.style.display = 'block';
+        }
+
+        if (pluginFields.fields === 0) {
+          customPageTypeFields.classList.add('page-types-hidden');
+          customPageTypeFields.style.display = 'none';
+        }
+      })
+    })
+  }
+
+
+  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 !== 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 editPageForm = document.getElementById('edit-page-form') as HTMLFormElement;
+
+editPageForm.addEventListener('submit', async (e) => {
+    e.preventDefault();
+    const formData = new FormData(editPageForm);
+
+    const response = await fetch(editPageForm.action, {
+        method: 'PATCH',
+        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>
+    .page-types-hidden {
+      display: none;
+    }
+
+    #edit-page-container {
+        height: 100%;
+        width: 100%;
+        min-width: 100%;
+    }
+
+    #edit-page-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: 2rem;
+
+        .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;
+        }
+    }
+
+.edit-card-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.875rem;
+}
+
+.edit-card {
+  display: flex;
+  flex-direction: column;
+  background-color: hsl(var(--background-step-2));
+  
+  & .card-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    & .card-title {
+      font-weight: 600;
+      font-size: 1.25rem;
+    }
+
+    & .card-date {
+      color: hsl(var(--text-muted));
+      font-size: .8rem;
+    }
+
+    & .card-description {
+      font-size: 1rem;
+      color: hsl(var(--text-muted));
+      line-clamp: 1;
+    }
+
+    & .card-icon {
+      color: hsl(var(--text-muted));
+    }
+  }
+}
+
+</style>