Skip to content

Commit

Permalink
Fix multiple pattern occurrences on one page with context stores
Browse files Browse the repository at this point in the history
  • Loading branch information
@petschki
petschki committed Mar 15, 2024
1 parent 8a6ee0f commit e330b3b
Show file tree
Hide file tree
Showing 8 changed files with 150 additions and 179 deletions.
29 changes: 8 additions & 21 deletions src/pat/contentbrowser/contentbrowser.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,10 +37,9 @@ parser.addArgument(
true
);
parser.addArgument("max-depth", "200");
// parser.addArgument("base-path", `/`);
parser.addArgument("base-path", `/`);
parser.addArgument("maximum-selection-size", -1);
// parser.addArgument("selectable-types", [],[], true);
//parser.addArgument("selectable-types", [],[], true);
parser.addArgument("selectable-types", [], null, true);
parser.addArgument("separator", ";");
parser.addArgument("selection", []);

Expand All @@ -52,38 +51,26 @@ class Pattern extends BasePattern {
async init() {
this.el.setAttribute('style', 'display: none');

// ensure an id on our elemen (eg TinyMCE doesn't have one)
// ensure an id on our elemen (TinyMCE doesn't have one)
let nodeId = this.el.getAttribute("id");
if (!nodeId) {
nodeId = utils.generateId();
this.el.setAttribute("id", nodeId);
}

const ContentBrowser = (await import("./src/ContentBrowser.svelte")).default;
const ContentBrowserApp = (await import("./src/App.svelte")).default;

// create wrapper
// create browser node
const contentBrowserEl = document.createElement("div");
contentBrowserEl.classList.add("content-browser-wrapper");
this.el.parentNode.insertBefore(contentBrowserEl, this.el);

this.component_instance_browser = new ContentBrowser({
this.component_content_browser = new ContentBrowserApp({
target: contentBrowserEl,
props: this.options,
});

const selectedItemsEl = document.createElement("div");
selectedItemsEl.classList.add("selected-items");
contentBrowserEl.append(selectedItemsEl);

const SelectedItems = (await import("./src/SelectedItems.svelte")).default;

this.component_instance_sel_items = new SelectedItems({
target: selectedItemsEl,
props: {
maximumSelectionSize: this.options.maximumSelectionSize,
selectedItemsNode: this.el,
fieldId: nodeId,
...this.options,
},
}
});
}
}
Expand Down
45 changes: 45 additions & 0 deletions src/pat/contentbrowser/src/App.svelte
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
<script>
import { getContext } from "svelte";
import ContentBrowser from "./ContentBrowser.svelte";
import SelectedItems from "./SelectedItems.svelte";
import {
setConfig,
setSelectedItems,
setSelectedUids,
setShowContentBrowser,
} from "./stores";
export let maxDepth;
export let basePath = "";
export let selectableTypes = [];
export let maximumSelectionSize = -1;
export let attributes;
export let separator;
export let selection = [];
export let vocabularyUrl;
export let fieldId;
// initialize context stores
setConfig();
setSelectedItems();
setShowContentBrowser();
setSelectedUids();
let config = getContext("config");
$config = {
maxDepth: maxDepth,
basePath: basePath,
selectableTypes: selectableTypes,
maximumSelectionSize: maximumSelectionSize,
attributes: attributes,
separator: separator,
selection: selection,
vocabularyUrl: vocabularyUrl,
fieldId: fieldId,
}
console.log(`Initialized App<${fieldId}> with config ${JSON.stringify($config)}`);
</script>

<ContentBrowser />
<SelectedItems />
40 changes: 14 additions & 26 deletions src/pat/contentbrowser/src/ContentBrowser.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<script>
import utils from "@patternslib/patternslib/src/core/utils";
import { onDestroy, onMount } from "svelte";
import { getContext, onMount } from "svelte";
import * as animateScroll from "svelte-scrollto";
import { fly } from "svelte/transition";
import contentStore from "./ContentStore";
Expand All @@ -9,12 +9,7 @@
import Upload from "../../upload/upload";
import {
setConfig,
getConfig,
currentPath,
selectedItemsMap,
selectedUids,
showContentBrowser,
} from "./stores.js";
// import Keydown from "svelte-keydown";
Expand All @@ -24,17 +19,14 @@
duration: 500,
});
export let maxDepth;
export let basePath = "";
export let attributes;
export let vocabularyUrl;
export let fieldId;
export const contentItems = contentStore();
// get context stores
const config = getContext("config");
const showContentBrowser = getContext("showContentBrowser");
const selectedItems = getContext("selectedItems");
const selectedUids = getContext("selectedUids");
// initialize reactive context config
setConfig();
// get creative context config
const config = getConfig();
// initialize content browser store
const contentItems = contentStore($config);
let showUpload = false;
let previewItem = { UID: "" };
Expand Down Expand Up @@ -65,10 +57,6 @@
}
onMount(() => {
$config.maxDepth = maxDepth;
$config.basePath = basePath;
$config.vocabularyUrl = vocabularyUrl;
$config.attributes = attributes;
breakPoint = getBreakPoint();
console.log(
`ContentBrowser initialized reactive context config: ${JSON.stringify($config)}`,
Expand Down Expand Up @@ -113,12 +101,12 @@
}
async function selectItem(item) {
console.log(`add ${JSON.stringify(item)} to ${fieldId}`);
$selectedItemsMap.push(fieldId, item);
selectedUids.update(() => $selectedItemsMap.get(fieldId).map((x) => x.UID));
console.log(`add ${JSON.stringify(item)} to ${$config.fieldId}`);
selectedItems.update((n) => [...n, item]);
selectedUids.update(() => $selectedItems.map((x) => x.UID));
$showContentBrowser = false;
previewItem = { UID: "" };
console.log($selectedItemsMap.get(fieldId));
console.log($selectedItems);
console.log($selectedUids);
}
Expand Down Expand Up @@ -225,7 +213,7 @@
<button
class="btn btn-primary btn-sm"
disabled={!isSelectable(level)}
on:click={() => selectItem(level)}
on:click|preventDefault={() => selectItem(level)}
>
select
</button>
Expand Down Expand Up @@ -275,7 +263,7 @@
<button
class="btn btn-primary btn-sm"
disabled={!isSelectable(previewItem)}
on:click={() => selectItem(previewItem)}
on:click|preventDefault={() => selectItem(previewItem)}
>select</button
>
</div>
Expand Down
39 changes: 25 additions & 14 deletions src/pat/contentbrowser/src/ContentStore.js
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,8 @@
import { writable, get } from "svelte/store";
import { config, cache } from "./stores";
import { cache } from "./stores";

let cfg = get(config);

// update cfg when config store changes
export const config_unsubscribe = config.subscribe((value) => {
cfg = value;
});

export default function () {
export default function (config) {
const store = writable([]);

store.request = async ({
Expand All @@ -17,8 +11,11 @@ export default function () {
uids = null,
params = null,
searchTerm = null,
selectableTypes = [],

Check failure on line 14 in src/pat/contentbrowser/src/ContentStore.js

View workflow job for this annotation

GitHub Actions / test 

'selectableTypes' is assigned a value but never used
}) => {
let vocabQuery;
let vocabQuery = {
criteria: [],
};
if (path) {
vocabQuery = {
criteria: [
Expand Down Expand Up @@ -51,10 +48,21 @@ export default function () {

})
}

let url = `${cfg.vocabularyUrl}&query=${JSON.stringify(
// if(selectableTypes) {
// if(selectableTypes.indexOf("Folder") == -1) {
// // add Folder always to preserve browsing through structure
// selectableTypes.push("Folder");
// }
// // query only selectable types
// vocabQuery.criteria.push({
// i: "portal_type",
// o: "plone.app.querystring.operation.selection.any",
// v: selectableTypes,
// });
// }
let url = `${config.vocabularyUrl}&query=${JSON.stringify(
vocabQuery
)}&attributes=${JSON.stringify(cfg.attributes)}&batch=${JSON.stringify({
)}&attributes=${JSON.stringify(config.attributes)}&batch=${JSON.stringify({
page: 1,
size: 100,
})}`;
Expand Down Expand Up @@ -86,7 +94,7 @@ export default function () {

store.get = async (path, searchTerm, levelData) => {
let parts = path.split("/") || [];
const depth = parts.length >= cfg.maxDepth ? cfg.maxDepth : parts.length;
const depth = parts.length >= config.maxDepth ? config.maxDepth : parts.length;
let paths = [];

let partsToShow = parts.slice(parts.length - depth, parts.length);
Expand All @@ -113,7 +121,7 @@ export default function () {
let query = {
method: "GET"
};
let queryPath = cfg.basePath;
let queryPath = config.basePath;
if (queryPath === "/") {
queryPath = "";
}
Expand All @@ -122,6 +130,9 @@ export default function () {
if(isFirstPath && searchTerm){
query["searchTerm"] = searchTerm + "*";
}
if(config.selectableTypes.length) {
query["selectableTypes"] = config.selectableTypes;
}
level = await store.request(query);
if(!skipCache){
cache.update((n) => {
Expand Down
Loading

0 comments on commit e330b3b

Please sign in to comment.