@soleil-se/config-svelte 1.16.2 → 1.17.0

package/CHANGELOG.md

@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.17.0] - 2022-12-01
+
+- New component: [RepositoryNodeSelector](./components/RepositoryNodeSelector).
+- New utility API: [getAppContext](./#getappcontext).
+- New server API: [createAppContext](./#context)
+
 ## [1.16.2] - 2022-11-24
 
 - [ListSelector](./components/ListSelector) now works properly in [CustomList](./components/CustomList).

package/components/CustomList/Component.svelte

@@ -2,12 +2,13 @@
   import { createEventDispatcher, onMount } from 'svelte';
   import { generateId, addGeneratedIds } from '../../utils';
   import { resizer } from '../../actions';
+  import i18n from './i18n';
 
   import Sortable from './internal/Sortable.svelte';
   import SortableItem from './internal/SortableItem.svelte';
   import DataHolder from './internal/DataHolder.svelte';
   import EditModal from './internal/EditModal.svelte';
-  import CreateItem from './internal/CreateItem.svelte';
+  import AddModal from './internal/AddModal.svelte';
 
   const values = window.CONFIG_VALUES || {};
   const dispatch = createEventDispatcher();
@@ -29,6 +30,15 @@
   let items = [];
   let editId;
   let dragDisabled = disabled;
+  let addModalOpen = false;
+
+  const onAddOpen = () => {
+    addModalOpen = true;
+  };
+
+  const onAddClose = () => {
+    addModalOpen = false;
+  };
 
   const updateItems = () => {
     items = value.map((id) => ({
@@ -43,7 +53,7 @@
     dispatch('change', value);
   };
 
-  const onCreate = ({ detail }) => {
+  const onAddSave = ({ detail }) => {
     items = items.concat(detail);
     modals = modals.concat(detail.id);
     onChange();
@@ -97,6 +107,9 @@
     <slot {id} {index} />
   </EditModal>
 {/each}
+<AddModal {name} open={addModalOpen} on:save={onAddSave} on:close={onAddClose} let:id>
+  <slot {id} index={items.length} />
+</AddModal>
 
 <div class="form-group" class:hidden={!show}>
   <label for={domId} class="control-label {required ? 'control-label--required' : ''}">
@@ -116,10 +129,11 @@
       </Sortable>
       <div use:resizer class="ui-resizable-handle ui-resizable-s" />
     </div>
+    <button class="list-component__add-item btn btn-link" on:click={onAddOpen} {disabled}>
+      <i class="glyphicons plus" aria-hidden="true" />
+      {i18n('add')}
+    </button>
 
-    <CreateItem {name} {disabled} on:create={onCreate} let:id>
-      <slot {id} index={items.length} />
-    </CreateItem>
     {#if disabled}
       <div class="disabled-overlay" />
     {/if}
@@ -148,4 +162,16 @@
     cursor: not-allowed;
     background-color: rgb(255 255 255 / 30%);
   }
+
+  button {
+    &:focus,
+    &:active {
+      color: #585858;
+      outline: none;
+    }
+
+    &:focus-visible {
+      outline: 2px solid #66afe9;
+    }
+  }
 </style>

package/components/CustomList/i18n.js

@@ -3,17 +3,17 @@ import createI18n from '../../utils/createI18n';
 export default createI18n({
   sv: {
     add: 'Lägg till...',
-    validation: 'Lägg till minst en post i listan',
+    validation: 'Lägg till minst en post i listan.',
     edit: 'Redigera',
   },
   no: {
     add: 'Legg till...',
-    validation: 'Legg til minst ett element i listen',
+    validation: 'Legg til minst ett element i listen.',
     edit: 'Redigere',
   },
   en: {
     add: 'Add...',
-    validation: 'Add at least one item to the list',
+    validation: 'Add at least one item to the list.',
     edit: 'Edit',
   },
 });

package/components/CustomList/internal/{CreateItem.svelte → AddModal.svelte}

@@ -6,26 +6,22 @@
   import Modal from '../../Modal';
 
   export let name;
-  export let disabled;
+  export let open = false;
 
   let id;
   let element;
-  let open = false;
 
   const dispatch = createEventDispatcher();
 
-  const addItem = async () => {
-    open = true;
-    id = generateId(name || 'item');
-  };
+  $: if (open) id = generateId(name || 'item');
 
   const onClose = () => {
-    open = false;
+    dispatch('close');
     setTimeout(() => (id = undefined), 300);
   };
 
   const onSave = async () => {
-    dispatch('create', {
+    dispatch('save', {
       id,
       name: element.querySelector('input')?.value || id,
     });
@@ -38,22 +34,3 @@
     <slot {id} />
   {/if}
 </Modal>
-
-<button class="list-component__add-item btn btn-link" on:click={addItem} {disabled}>
-  <i class="glyphicons plus" aria-hidden="true" />
-  {i18n('add')}
-</button>
-
-<style lang="scss">
-  button {
-    &:focus,
-    &:active {
-      color: #585858;
-      outline: none;
-    }
-
-    &:focus-visible {
-      outline: 2px solid #66afe9;
-    }
-  }
-</style>

package/components/CustomSelector/Component.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { createEventDispatcher, onMount } from 'svelte';
+  import { createEventDispatcher, onMount, tick } from 'svelte';
   import { generateId, setupComponent } from '../../utils';
 
   const values = window.CONFIG_VALUES || {};
@@ -10,7 +10,6 @@
   export let name = undefined;
   export let options = [];
   export let searchable = false;
-  export let placeholder;
   export let required = false;
   export let disabled = false;
   export let multiple = false;
@@ -18,21 +17,29 @@
 
   export let value = multiple ? [] : '';
 
-  value = name ? values[name] ?? value : value;
-  // value = value === Object(value) ? value.value : value;
+  value = name ? values[name]?.value ?? values[name] ?? value : value;
+  value = Array.isArray(value) ? value.map((v) => v.value ?? v) : value;
 
   let className = '';
   export { className as class };
 
+  let element;
+
+  async function triggerChange() {
+    await tick();
+    jQuery(element).val(value).trigger('change');
+  }
+
+  $: if (element && options) triggerChange();
+
   onMount(() => {
-    const [el] = setupComponent(id)
-      .on('change', (e) => {
-        value = e.val || value;
+    [element] = setupComponent(id).on('change', (e) => {
+      if (e.val !== undefined && value !== e.val) {
+        value = e.val;
         dispatch('input', value);
         dispatch('change', value);
-      });
-
-    jQuery(el).val(value).trigger('change');
+      }
+    });
   });
 </script>
 
@@ -54,7 +61,6 @@
     data-component="custom-selector"
     data-removable
     data-searchable={searchable ? '' : undefined}
-    data-placeholder={placeholder ? '' : undefined}
   >
     {#each options as option}
       <option value={option.value ?? option}>

package/components/CustomSelector/README.md

@@ -13,7 +13,6 @@ export let label; // Required
 export let name = undefined;
 export let options = [];
 export let searchable = false;
-export let placeholder;
 export let required = false;
 export let disabled = false;
 export let multiple = false;

package/components/RepositoryNodeSelector/Component.svelte

@@ -0,0 +1,79 @@
+<!-- prettier-ignore -->
+<script>
+  import { onMount } from 'svelte';
+  import { getAppContext } from '../../utils';
+  import CustomSelector from '../CustomSelector';
+  import i18n from './i18n';
+
+  export let id;
+  export let label;
+  export let name;
+  export let searchable;
+  export let required;
+  export let disabled;
+  export let multiple;
+  export let show;
+  export let value;
+
+  export let type;
+
+  let options = [];
+  let error = false;
+
+  function toTitleCase(str) {
+    return str
+      .replace(/^[-_]*(.)/, (_, c) => c.toUpperCase())
+      .replace(/[-_]+(.)/g, (_, c) => ` ${c.toUpperCase()}`);
+  }
+
+  function getEndpoint() {
+    const { siteName } = getAppContext();
+    let repository = toTitleCase(type);
+    repository = !repository.endsWith('Repository') ? `${repository} Repository` : repository;
+    const endpoint = repository.includes('Alias') ? 'aliases' : 'nodes';
+
+    return `/rest-api/1/0/${siteName}/${repository}/${endpoint}`;
+  }
+
+  onMount(async () => {
+    const endpoint = getEndpoint();
+    const result = await fetch(endpoint)
+      .then((res) => {
+        if (res.ok) return res;
+        error = true;
+        throw new Error(
+          `Error (${res.status}) - Unable to fetch nodes, is site name and repository correct?`,
+        );
+      })
+      .then((res) => res.json())
+      .catch((e) => console.error(e.message));
+
+    options = (result || []).map((item) => ({ label: item.name, value: item.id }));
+  });
+</script>
+
+<CustomSelector
+  {id}
+  {label}
+  {name}
+  {searchable}
+  {required}
+  {disabled}
+  {multiple}
+  {show}
+  {options}
+  {value}
+  on:input
+  on:change
+>
+  <slot />
+  {#if error}
+    <p class="alert alert-danger">{@html i18n('error')}</p>
+  {/if}
+</CustomSelector>
+
+<style>
+  p.alert {
+    margin-top: 10px;
+  }
+</style>

package/components/RepositoryNodeSelector/README.md

@@ -0,0 +1,135 @@
+# RepositoryNodeSelector
+
+Component for selecting one or multiple nodes from a repository, is using [CustomSelector](../CustomSelector).  
+
+![RepositoryNodeSelector1](../../images/RepositoryNodeSelector1.png)
+![RepositoryNodeSelector2](../../images/RepositoryNodeSelector2.png)
+
+## Props
+
+```javascript
+export let id = generateId();
+export let label; // Required
+export let name = undefined;
+export let options = [];
+export let searchable = false;
+export let required = false;
+export let disabled = false;
+export let multiple = false;
+export let show = true;
+export let value = '';
+export let type;
+```
+
+### Types
+
+All repositories that are children to the site are valid types, some are more useful than others.
+
+::: details Available types
+
+Following types are available, not all are useful though.
+
+#### Useful
+
+* `alias` - Alias Repository.
+* `named-reference` - Named Reference Repository.
+* `rss-feed` - RSS Feed Repository.
+* `rating-type` - Rating Type Repository.
+* `responsive-breakpoint` - Responsive Breakpoint Repository.
+* `role` - Role Repository.
+* `site-cookie` - Site Cookie Repository.
+* `tag-group` - Tag Group Repository.
+* `tag` - Tag Repository.
+* `user-field` - User Field Repository.
+
+#### Do not use
+
+* `color` - Color Repository, use `<DropdownSelector type="color" />` instead.
+* `file` - File Repository, use `<NodeSelector type="file" />` instead.
+* `font` - Font Repository, use `<DropdownSelector type="font" />` instead.
+* `image` - Image Repository, use `<NodeSelector type="image" />` instead.
+* `index` - Index Repository, use `<DropdownSelector type="search-index" />` instead.
+* `metadata` - Metadata Definition Template Repository, use `<DropdownSelector type="metadata" />` instead.
+* `oAuth2` - OAuth2 Configuration Repository, use `<DropdownSelector type="oauth2-configuration" />` instead.
+* `page` - Page Repository, use `<NodeSelector type="page" />` instead.
+* `principal` - Principal Repository, use `<NodeSelector type="user" />` instead.
+* `template` - Template Repository, use `<DropdownSelector type="template" />` instead.
+
+#### Other
+
+* `addon` - Addon Repository.
+* `data-store` - Data Store Repository.
+* `decoration` - Decoration Repository.
+* `default-image` - Default Image Repository.
+* `externaltopicintegration` - ExternalTopicIntegration Repository.
+* `icon` - Icon Repository.
+* `list-style` - List Style Repository.
+* `module-element-draft` - Module Element Draft Repository.
+* `module-element` - Module Element Repository.
+* `restApp` - RestApp Repository.
+* `topic` - Topic Repository.
+* `webApp` - WebApp Repository.
+
+:::
+
+## App context
+
+To be able to use this component app context must be created in `config/index.js`.  
+The options are fetched using the REST-API and the site name is needed for building the URL.
+
+```js
+import router from '@sitevision/api/common/router';
+import { createAppContext } from '@soleil-se/svelte-config/server';
+
+router.get('/', (req, res) => {
+  createAppContext(res);
+});
+```
+
+## Example
+
+### Standard
+
+```svelte
+<script>
+  import { Panel, RepositoryNodeSelector } from '@soleil-se/svelte-config';
+</script>
+
+<Panel heading="Inställningar">     
+  <RepositoryNodeSelector name="tagGroup" label="Tag group" type="tag-group" /> 
+  <RepositoryNodeSelector name="cookies" label="Cookies" type="site-cookie" multiple /> 
+</Panel>
+```
+
+### Advanced
+
+```svelte
+<script>
+  import { Panel, RepositoryNodeSelector } from '@soleil-se/svelte-config';
+  import { onSave } from '@soleil-se/svelte-config/utils';
+
+  export let values;
+
+  values = {
+    tagGroup: '',
+    ...values
+  }
+
+  onSave(() => values);
+
+</script>
+
+<Panel heading="Inställningar">     
+  <RepositoryNodeSelector label="Tag group" type="tag-group" bind:value={values.tagGroup} /> 
+</Panel>
+```
+
+## Slots
+
+Default slot after selector.
+
+```svelte
+<RepositoryNodeSelector name="tagGroup" label="Tag group" type="tag-group"> 
+  <p class="help-block">Some helpful text.</p>
+</RepositoryNodeSelector>
+```

package/components/RepositoryNodeSelector/i18n.js

@@ -0,0 +1,13 @@
+import createI18n from '../../utils/createI18n';
+
+export default createI18n({
+  sv: {
+    error: '<strong>Fel:</strong> Det gick inte att hämta noder, se konsolen för mer information.',
+  },
+  no: {
+    error: '<strong>Feil:</strong> Noder kunne ikke hentes, se konsollen for mer informasjon.',
+  },
+  en: {
+    error: '<strong>Error:</strong> Nodes could not be fetched, see console for more information.',
+  },
+});

package/components/RepositoryNodeSelector/index.js

@@ -0,0 +1 @@
+export { default } from './Component.svelte';

package/index.js

@@ -15,6 +15,7 @@ export { default as TagSelector } from './components/TagSelector';
 export { default as CustomSelector } from './components/CustomSelector';
 export { default as Modal } from './components/Modal';
 export { default as CustomList } from './components/CustomList';
+export { default as RepositoryNodeSelector } from './components/RepositoryNodeSelector';
 
 export { default as createConfigApp } from './createConfigApp';
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soleil-se/config-svelte",
-  "version": "1.16.2",
+  "version": "1.17.0",
   "main": "./index.js",
   "module": "./index.js",
   "svelte": "./index.js",
@@ -8,13 +8,14 @@
   "license": "UNLICENSED",
   "sideEffects": false,
   "peerDependencies": {
+    "@sitevision/api": "^1.0.20",
     "svelte": "^3.46.0"
   },
   "devDependencies": {
     "svelte": "^3.46.4"
   },
   "dependencies": {
-    "@soleil-se/config-validate": "^1.1.1",
+    "@soleil-se/config-validate": "^1.1.2",
     "a11y-dialog": "7.4.0",
     "focus-visible": "^5.2.0",
     "svelte-dnd-action": "^0.9.18"

package/server/index.js

@@ -1,3 +1,7 @@
+import { getCurrentPage } from '@sitevision/api/server/PortletContextUtil';
+import appInfo from '@sitevision/api/server/appInfo';
+import { getSite } from '@sitevision/api/server/ResourceLocatorUtil';
+
 /**
  * Creates a HTML string for passing data to the app.
  * @param {object} props Props to be passed to the app.
@@ -5,7 +9,7 @@
  */
 export function createAppProps(props) {
   return `
-<script> 
+<script>
   window.CONFIG_APP_PROPS = ${JSON.stringify(props)};
 </script>
 <div id="app_root"></div>
@@ -21,3 +25,24 @@ export function createAppProps(props) {
 export function createAppData(data) {
   return createAppProps(data);
 }
+
+/**
+ * Creates app context global variable.
+ * @param {Response} res Response from @sitevision/common/router.
+ */
+export function createAppContext(res) {
+  const siteNode = getSite();
+
+  const context = {
+    ...appInfo,
+    pageId: getCurrentPage().getIdentifier(),
+    siteId: siteNode.getIdentifier(),
+    siteName: siteNode.toString(),
+  };
+
+  res.send(`
+<script>
+  window.CONFIG_APP_CONTEXT = ${JSON.stringify(context)};
+</script>
+  `);
+}

package/utils/getAppContext.js

@@ -0,0 +1,21 @@
+/**
+ * Get app context value or object that is created for app when rendering.
+ * @export
+ * @param {string} [key] - Key for value.
+ * @return {*|object} - Value or object.
+ */
+export default function getAppContext(key) {
+  if (!window.CONFIG_APP_CONTEXT) {
+    console.warn(`App context is not created, add the following in config/index.js:
+
+import router from '@sitevision/api/common/router';
+import { createAppContext } from '@soleil-se/svelte-config/server';
+
+router.get('/', (req, res) => {
+  createAppContext(res);
+});`);
+    return {};
+  }
+  const context = { ...window?.sv?.context, ...window.CONFIG_APP_CONTEXT };
+  return key ? context[key] : context;
+}

package/utils/index.js

@@ -6,3 +6,4 @@ export { default as pluckPrefix } from './pluckPrefix';
 export { default as triggerInput } from './triggerInput';
 export { default as createI18n } from './createI18n';
 export { default as getAppProps } from './getAppProps';
+export { default as getAppContext } from './getAppContext';