Skip to content

Commit f8eb2bb

Browse files
SteindelSESteindelSE
committed
- Add missing page tree control
1 parent 572a783 commit f8eb2bb

3 files changed

Lines changed: 471 additions & 0 deletions

File tree

‎Rock.JavaScript.Obsidian.Blocks/src/Example/ControlGallery/pageTreeGallery.partial.obs‎

Lines changed: 210 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,210 @@
1+
<template>
2+
<GalleryAndResult :value="value"
3+
:importCode="importCode"
4+
:exampleCode="exampleCode"
5+
:scriptSetupCode="scriptSetupCode"
6+
enableReflection>
7+
8+
<PageTree v-model="value"
9+
:rules="isRequired ? 'required' : undefined"
10+
:rootPageGuid="rootPageGuid?.page?.value"
11+
:siteType="siteType"
12+
:multiple="multiple"
13+
:disableParentPageSelection="disableParentPageSelection"
14+
:showChildCount="showChildCount"
15+
:height="height"
16+
:enableDeselect="enableDeselect" />
17+
18+
<template #settings>
19+
<div class="d-flex flex-row gap-3">
20+
<ContentSection title="Demonstratable Settings" icon="ti ti-user" disableCollapse>
21+
<ContentStack title="Toggle Properties"
22+
description="Properties that typically are either true or false.">
23+
<div class="d-flex flex-row gap-3">
24+
<Switch v-model="isRequired"
25+
label="Required" />
26+
<Switch v-model="multiple"
27+
label="Multiple Selection"
28+
help="Allows selection of multiple pages." />
29+
<Switch v-model="disableParentPageSelection"
30+
label="Disable Parent Page Selection"
31+
help="Only allows the select of bottom-level pages which have no children of their own." />
32+
<Switch v-model="enableDeselect"
33+
label="Enable Deselect"
34+
help="Allows the deselection of a selected page." />
35+
</div>
36+
</ContentStack>
37+
<ContentStack title="Value Properties"
38+
description="Properties that typically require a value to be set.">
39+
<div class="d-flex flex-row gap-3">
40+
<PagePicker v-model="rootPageGuid"
41+
label="Root Page"
42+
:multiple="false"
43+
showSelectCurrentPage
44+
help="Chooses a root page from which to enumerate children, rather than all root pages." />
45+
<BaseAsyncPicker v-model="selectedSiteType"
46+
label="Site Type"
47+
:multiple="false"
48+
:items="siteTypeItems"
49+
showBlankItem
50+
help="Filter pages down to a particular SiteType." />
51+
<TextBox v-model="height"
52+
label="Height"
53+
help="Sets the height of the control (e.g., '300px', '30em', '30%', etc.)." />
54+
</div>
55+
</ContentStack>
56+
</ContentSection>
57+
<ContentSection title="Context-Specific Settings" icon="ti ti-user" disableCollapse>
58+
<p class="text-semibold font-italic">The settings are too context-specific, so their usage will show if enabled, but no demonstration will occur.</p>
59+
<ContentStack title="Toggle Properties"
60+
description="Properties that typically are either true or false.">
61+
<div class="d-flex flex-row gap-3">
62+
<Switch v-model="hasSelectedPageGuids"
63+
label="Selected Page GUIDs"
64+
help="Allows the underlying TreeList to pre-select items based on the Guids provided." />
65+
<Switch v-model="hasHiddenPageGuids"
66+
label="Hidden Page GUIDs"
67+
help="Allows the underlying TreeList to hide items based on the Guids provided." />
68+
</div>
69+
</ContentStack>
70+
</ContentSection>
71+
</div>
72+
<p class="text-semibold font-italic">Not all settings are demonstrated in this gallery.</p>
73+
<p>Additional props extend and are passed to the underlying Rock Form Field.</p>
74+
</template>
75+
</GalleryAndResult>
76+
</template>
77+
78+
<script setup lang="ts">
79+
import { ref, computed } from "vue";
80+
import { SiteType } from "@Obsidian/Enums/Cms/siteType";
81+
import { ListItemBag } from "@Obsidian/ViewModels/Utility/listItemBag";
82+
import { PageRouteValueBag } from "@Obsidian/ViewModels/Rest/Controls/pageRouteValueBag";
83+
import { getSfcControlImportPath, ComponentUsage } from "./common/utils.partial";
84+
import ContentSection from "@Obsidian/Controls/contentSection.obs";
85+
import ContentStack from "@Obsidian/Controls/contentStack.obs";
86+
import GalleryAndResult from "./common/galleryAndResult.partial.obs";
87+
import PageTree from "@Obsidian/Controls/pageTree.obs";
88+
import Switch from "@Obsidian/Controls/switch.obs";
89+
import PagePicker from "@Obsidian/Controls/pagePicker.obs";
90+
import BaseAsyncPicker from "@Obsidian/Controls/baseAsyncPicker.obs";
91+
import TextBox from "@Obsidian/Controls/textBox.obs";
92+
93+
const value = ref({});
94+
const isRequired = ref<boolean>(false);
95+
const rootPageGuid = ref<PageRouteValueBag | undefined>(undefined);
96+
const siteType = ref<SiteType | undefined>(undefined);
97+
const hasSelectedPageGuids = ref<boolean>(false);
98+
const hasHiddenPageGuids = ref<boolean>(false);
99+
const multiple = ref<boolean>(false);
100+
const disableParentPageSelection = ref<boolean>(false);
101+
const showChildCount = ref<boolean>(false);
102+
const height = ref<string>("300px");
103+
const enableDeselect = ref<boolean>(false);
104+
105+
const siteTypeItems: ListItemBag[] = [
106+
{ text: "Web", value: "0" },
107+
{ text: "Mobile", value: "1" },
108+
{ text: "TV", value: "2" }
109+
];
110+
111+
const selectedSiteType = computed<ListItemBag | undefined>({
112+
get() {
113+
if (siteType.value === undefined || siteType.value === null || isNaN(siteType.value)) {
114+
return undefined;
115+
}
116+
117+
return siteTypeItems.find(i => i.value === siteType.value!.toString());
118+
},
119+
set(val: ListItemBag | undefined) {
120+
if (val === null || val === undefined || val.value === null || val.value === undefined || val.value === "") {
121+
siteType.value = undefined;
122+
}
123+
else {
124+
siteType.value = Number(val.value) as SiteType;
125+
}
126+
}
127+
});
128+
129+
const importCode = getSfcControlImportPath("pageTree");
130+
const exampleCode = computed(() => {
131+
const usage = new ComponentUsage("PageTree");
132+
133+
usage.addAttribute('v-model="value"', true, false);
134+
usage.addAttribute(':rules="required"', isRequired.value, false);
135+
usage.addAttribute(`:multiple="isMultipleSelect"`, multiple.value, false);
136+
usage.addAttribute(`:rootPageGuid="rootPageGuid"`, rootPageGuid.value !== undefined && rootPageGuid.value !== null, false);
137+
usage.addAttribute(`:siteType="siteType"`, siteType.value !== undefined && siteType.value !== null, false);
138+
usage.addAttribute(`:selectedPageGuids="selectedPageGuids"`, hasSelectedPageGuids.value, false);
139+
usage.addAttribute(`:hidePageGuids="hasHiddenPageGuids"`, hasHiddenPageGuids.value, false);
140+
usage.addAttribute(`:disableParentPageSelection="disableParentPageSelection"`, disableParentPageSelection.value, false);
141+
usage.addAttribute(`:showChildCount="${showChildCount.value}"`, showChildCount.value, false);
142+
usage.addAttribute(`:height="'${height.value}'"`, height.value !== "300px", false);
143+
usage.addAttribute(`:enableDeselect="enableDeselect"`, enableDeselect.value, false);
144+
145+
return usage.toString();
146+
});
147+
const scriptSetupCode = computed(() => {
148+
const usage = new ComponentUsage("PageTree");
149+
150+
usage.addScriptImport('import { ListItemBag } from "@Obsidian/ViewModels/Utility/listItemBag";');
151+
usage.addScriptBody("const value = ref<{ListItemBag | ListItemBag[] | null | undefined}>(undefined);");
152+
153+
if (multiple.value) {
154+
usage.addScriptBody("const isMultipleSelect = ref<boolean>(true);");
155+
}
156+
157+
if (rootPageGuid.value !== undefined && rootPageGuid.value !== null) {
158+
usage.addScriptImport('import { PageRouteValueBag } from "@Obsidian/ViewModels/Rest/Controls/pageRouteValueBag";');
159+
usage.addScriptBodyWithComment(
160+
"Define the root page GUID, use PagePicker to allow the person to set this value.",
161+
"const rootPageGuid = ref<PageRouteValueBag | undefined>(undefined);"
162+
);
163+
}
164+
165+
if (siteType.value !== undefined && siteType.value !== null) {
166+
usage.addScriptImport('import { SiteType } from "@Obsidian/Enums/Cms/siteType";');
167+
usage.addScriptBodyWithComment(
168+
"Define the site type",
169+
"const siteType = ref<SiteType | undefined>(undefined);"
170+
);
171+
}
172+
173+
if (hasSelectedPageGuids.value) {
174+
usage.addScriptBodyWithComment(
175+
"Define the selected page GUIDs.",
176+
"const selectedPageGuids = ref<string[]>([]);"
177+
);
178+
}
179+
180+
if (hasHiddenPageGuids.value) {
181+
usage.addScriptBodyWithComment(
182+
"Define the hidden page GUIDs.",
183+
"const hiddenPageGuids = ref<string[]>([]);"
184+
);
185+
}
186+
187+
if (disableParentPageSelection.value) {
188+
usage.addScriptBodyWithComment(
189+
"Define whether parent page selection is disabled.",
190+
"const disableParentPageSelection = ref<boolean>(false);"
191+
);
192+
}
193+
194+
if (height.value !== "" && height.value !== "300px") {
195+
usage.addScriptBodyWithComment(
196+
"Define the height of the PageTree.",
197+
`const height = ref<string>("300px");`
198+
);
199+
}
200+
201+
if (enableDeselect.value) {
202+
usage.addScriptBodyWithComment(
203+
"Define whether deselect is enabled.",
204+
"const enableDeselect = ref<boolean>(false);"
205+
);
206+
}
207+
208+
return usage.toScriptSetupString();
209+
});
210+
</script>

‎Rock.JavaScript.Obsidian.Blocks/src/Example/controlGallery.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -258,6 +258,7 @@ import CampusContextPickerGallery from "./ControlGallery/campusContextPickerGall
258258
import BarChartGallery from "./ControlGallery/barChartGallery.partial.obs";
259259
import PieChartGallery from "./ControlGallery/pieChartGallery.partial.obs";
260260
import ExperieceModePickerGallery from "./ControlGallery/experienceModePickerGallery.partial.obs";
261+
import PageTreeGallery from "./ControlGallery/pageTreeGallery.partial.obs";
261262

262263
const controlGalleryComponents: Record<string, Component> = [
263264
NotificationBoxGallery,
@@ -461,6 +462,7 @@ const controlGalleryComponents: Record<string, Component> = [
461462
BarChartGallery,
462463
PieChartGallery,
463464
ExperieceModePickerGallery,
465+
PageTreeGallery,
464466
]
465467
// Fix vue 3 SFC putting name in __name.
466468
.map(a => {

0 commit comments

Comments
 (0)