Merge pull request #255 from frappe/folders

Author: surajshetty3416

builder/builder/doctype/builder_page/builder_page.json

@@ -35,7 +35,8 @@
   "set_meta_tags",
   "options_tab",
   "authenticated_access",
-  "disable_indexing"
+  "disable_indexing",
+  "project_folder"
  ],
  "fields": [
   {
@@ -194,11 +195,17 @@
    "fieldname": "disable_indexing",
    "fieldtype": "Check",
    "label": "Disable Indexing"
+  },
+  {
+   "fieldname": "project_folder",
+   "fieldtype": "Link",
+   "label": "Project Folder",
+   "options": "Builder Project Folder"
   }
  ],
  "index_web_pages_for_search": 1,
  "links": [],
- "modified": "2024-09-02 14:20:24.457766",
+ "modified": "2024-11-26 17:03:15.281018",
  "modified_by": "Administrator",
  "module": "Builder",
  "name": "Builder Page",

builder/builder/doctype/builder_project_folder/__init__.py

@@ -0,0 +1,8 @@
+// Copyright (c) 2024, Frappe Technologies Pvt Ltd and contributors
+// For license information, please see license.txt
+
+// frappe.ui.form.on("Builder Project Folder", {
+// 	refresh(frm) {
+
+// 	},
+// });

builder/builder/doctype/builder_project_folder/builder_project_folder.js

@@ -0,0 +1,56 @@
+{
+ "actions": [],
+ "allow_rename": 1,
+ "autoname": "field:folder_name",
+ "creation": "2024-11-26 16:57:02.359763",
+ "doctype": "DocType",
+ "engine": "InnoDB",
+ "field_order": [
+  "folder_name"
+ ],
+ "fields": [
+  {
+   "fieldname": "folder_name",
+   "fieldtype": "Data",
+   "label": "Folder Name",
+   "unique": 1
+  }
+ ],
+ "index_web_pages_for_search": 1,
+ "links": [],
+ "modified": "2024-11-26 17:04:15.337801",
+ "modified_by": "Administrator",
+ "module": "Builder",
+ "name": "Builder Project Folder",
+ "naming_rule": "By fieldname",
+ "owner": "Administrator",
+ "permissions": [
+  {
+   "create": 1,
+   "delete": 1,
+   "email": 1,
+   "export": 1,
+   "print": 1,
+   "read": 1,
+   "report": 1,
+   "role": "System Manager",
+   "share": 1,
+   "write": 1
+  },
+  {
+   "create": 1,
+   "delete": 1,
+   "email": 1,
+   "export": 1,
+   "print": 1,
+   "read": 1,
+   "report": 1,
+   "role": "Website Manager",
+   "share": 1,
+   "write": 1
+  }
+ ],
+ "sort_field": "creation",
+ "sort_order": "DESC",
+ "states": []
+}

builder/builder/doctype/builder_project_folder/builder_project_folder.json

@@ -0,0 +1,9 @@
+# Copyright (c) 2024, Frappe Technologies Pvt Ltd and contributors
+# For license information, please see license.txt
+
+# import frappe
+from frappe.model.document import Document
+
+
+class BuilderProjectFolder(Document):
+	pass

builder/builder/doctype/builder_project_folder/builder_project_folder.py

@@ -14,7 +14,7 @@
 		</template>
 		<template #body>
 			<div
-				class="flex w-fit min-w-32 max-w-48 flex-col rounded-lg border border-outline-gray-2 bg-surface-white p-1.5 text-sm text-text-icons-gray-8 shadow-xl auto-fill-[100px] dark:bg-surface-gray-1">
+				class="flex w-fit min-w-32 max-w-48 flex-col rounded-lg border border-outline-gray-2 bg-surface-white p-1.5 text-sm text-ink-gray-8 shadow-xl auto-fill-[100px] dark:bg-surface-gray-1">
 				<a
 					:href="app.route"
 					v-for="app in apps.data"

frontend/src/components/AppsMenu.vue

@@ -16,7 +16,7 @@ const classes = computed(() => {
 	if (props.variant === "solid") {
 		_classes.push([
 			"bg-surface-gray-7",
-			"text-ink-white",
+			"!text-ink-white",
 			"hover:bg-surface-gray-6",
 			"active:bg-surface-gray-5",
 		]);

frontend/src/components/Controls/BuilderButton.vue

@@ -0,0 +1,63 @@
+<template>
+	<section
+		class="sticky bottom-0 left-0 top-0 flex w-60 flex-col gap-3 bg-surface-gray-1 p-2 shadow-lg max-lg:hidden">
+		<div class="flex flex-col">
+			<span
+				class="flex cursor-pointer gap-2 rounded p-2 text-base text-ink-gray-6"
+				@click="() => setFolderActive('')"
+				:class="{ 'bg-surface-modal text-ink-gray-8 shadow-sm dark:bg-surface-gray-2': !store.activeFolder }">
+				<FilesIcon class="size-4"></FilesIcon>
+				All Pages
+			</span>
+			<span class="flex cursor-pointer gap-2 p-2 text-base text-ink-gray-6" @click="emit('openSettings')">
+				<SettingsIcon class="size-4"></SettingsIcon>
+				Settings
+			</span>
+		</div>
+		<div class="flex flex-col">
+			<div class="flex items-center justify-between p-2 text-base text-ink-gray-6">
+				<span>Folders</span>
+				<BuilderButton
+					variant="subtle"
+					icon="plus"
+					class="size-4 cursor-pointer hover:text-ink-gray-8"
+					@click="showNewFolderDialog = true"></BuilderButton>
+			</div>
+			<span
+				class="flex cursor-pointer gap-2 rounded p-2 text-base text-ink-gray-6"
+				v-for="project in builderProjectFolder.data"
+				:class="{
+					'bg-surface-modal text-ink-gray-8 shadow-sm dark:bg-surface-gray-2': isFolderActive(
+						project.folder_name,
+					),
+				}"
+				@click="setFolderActive(project.folder_name)">
+				<FolderIcon class="size-4"></FolderIcon>
+				{{ project.folder_name }}
+			</span>
+		</div>
+		<NewFolder v-model="showNewFolderDialog"></NewFolder>
+	</section>
+</template>
+<script lang="ts" setup>
+import FilesIcon from "@/components/Icons/Files.vue";
+import FolderIcon from "@/components/Icons/Folder.vue";
+import SettingsIcon from "@/components/Icons/SettingsGear.vue";
+import NewFolder from "@/components/Modals/NewFolder.vue";
+import builderProjectFolder from "@/data/builderProjectFolder";
+import useStore from "@/store";
+import { ref } from "vue";
+
+const store = useStore();
+
+const emit = defineEmits(["openSettings", "setActiveFolder"]);
+
+const showNewFolderDialog = ref(false);
+
+const isFolderActive = (folderName: string) => {
+	return store.activeFolder === folderName;
+};
+const setFolderActive = (folderName: string) => {
+	store.activeFolder = folderName;
+};
+</script>

frontend/src/components/DashboardSidebar.vue

@@ -0,0 +1,10 @@
+<template>
+	<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<path
+			fill-rule="evenodd"
+			clip-rule="evenodd"
+			d="M8 6.375C9.00102 6.375 9.8125 5.56352 9.8125 4.5625C9.8125 3.56148 9.00102 2.75 8 2.75C6.99898 2.75 6.1875 3.56148 6.1875 4.5625C6.1875 5.56352 6.99898 6.375 8 6.375ZM8 7.375C9.5533 7.375 10.8125 6.1158 10.8125 4.5625C10.8125 3.0092 9.5533 1.75 8 1.75C6.4467 1.75 5.1875 3.0092 5.1875 4.5625C5.1875 6.1158 6.4467 7.375 8 7.375ZM11.9375 13.125C12.9385 13.125 13.75 12.3135 13.75 11.3125C13.75 10.3115 12.9385 9.5 11.9375 9.5C10.9365 9.5 10.125 10.3115 10.125 11.3125C10.125 12.3135 10.9365 13.125 11.9375 13.125ZM11.9375 14.125C13.4908 14.125 14.75 12.8658 14.75 11.3125C14.75 9.7592 13.4908 8.5 11.9375 8.5C10.3842 8.5 9.125 9.7592 9.125 11.3125C9.125 12.8658 10.3842 14.125 11.9375 14.125ZM5.875 11.3125C5.875 12.3135 5.06352 13.125 4.0625 13.125C3.06148 13.125 2.25 12.3135 2.25 11.3125C2.25 10.3115 3.06148 9.5 4.0625 9.5C5.06352 9.5 5.875 10.3115 5.875 11.3125ZM6.875 11.3125C6.875 12.8658 5.6158 14.125 4.0625 14.125C2.5092 14.125 1.25 12.8658 1.25 11.3125C1.25 9.7592 2.5092 8.5 4.0625 8.5C5.6158 8.5 6.875 9.7592 6.875 11.3125Z"
+			fill="currentColor"
+			style="fill: currentColor; fill-opacity: 1" />
+	</svg>
+</template>

frontend/src/components/Icons/Files.vue

@@ -0,0 +1,9 @@
+<template>
+	<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<path
+			fill-rule="evenodd"
+			clip-rule="evenodd"
+			d="M10.023 2.5L8.43184 3.68632C8.25916 3.81507 8.04952 3.88462 7.83412 3.88462H2V12.5C2 13.0523 2.44772 13.5 3 13.5H13C13.5523 13.5 14 13.0523 14 12.5V2.5H10.023ZM9.49179 1.64872C9.6213 1.55216 9.77853 1.5 9.94008 1.5H14.35C14.709 1.5 15 1.79101 15 2.15V12.5C15 13.6046 14.1046 14.5 13 14.5H3C1.89543 14.5 1 13.6046 1 12.5V3.53462C1 3.17563 1.29102 2.88462 1.65 2.88462H7.83412L9.49179 1.64872Z"
+			fill="currentColor" />
+	</svg>
+</template>

frontend/src/components/Icons/Folder.vue

@@ -0,0 +1,52 @@
+<template>
+	<Dialog
+		class="overscroll-none"
+		v-model="showModel"
+		:options="{
+			title: 'Create New Folder',
+			size: 'sm',
+			actions: [
+				{
+					label: 'Create Folder',
+					variant: 'solid',
+					loading: builderProjectFolder.loading,
+					onClick: createFolder,
+				},
+			],
+		}">
+		<template #body-content>
+			<BuilderInput
+				@input="folderName = $event"
+				type="Input"
+				label="Folder Name"
+				:required="true"></BuilderInput>
+		</template>
+	</Dialog>
+</template>
+<script setup lang="ts">
+import builderProjectFolder from "@/data/builderProjectFolder";
+import { useVModel } from "@vueuse/core";
+import { ref } from "vue";
+
+const folderName = ref("");
+const props = defineProps<{
+	modelValue: boolean;
+}>();
+const emit = defineEmits(["update:modelValue"]);
+
+const showModel = useVModel(props, "modelValue", emit);
+
+const createFolder = () => {
+	if (!folderName.value) {
+		return;
+	}
+	builderProjectFolder.insert
+		.submit({
+			folder_name: folderName.value,
+		})
+		.then(() => {
+			folderName.value = "";
+			showModel.value = false;
+		});
+};
+</script>

frontend/src/components/Modals/NewFolder.vue

@@ -0,0 +1,52 @@
+<template>
+	<Dialog
+		class="overscroll-none"
+		v-model="showModel"
+		:options="{
+			title: 'Select Folder',
+			size: 'sm',
+		}">
+		<template #body-content>
+			<span
+				class="flex gap-2 rounded p-2 text-base text-ink-gray-3"
+				:class="{
+					'cursor-pointer text-ink-gray-6 hover:text-ink-gray-9': currentFolder,
+				}"
+				@click="folderSelected('')">
+				<FeatherIcon name="home" class="size-4"></FeatherIcon>
+				Home
+			</span>
+			<span
+				class="flex cursor-default gap-2 rounded p-2 text-base text-ink-gray-2"
+				v-for="project in builderProjectFolder.data"
+				:class="{
+					'cursor-pointer !text-ink-gray-6 hover:!text-ink-gray-9': currentFolder !== project.folder_name,
+				}"
+				@click="folderSelected(project.folder_name)">
+				<FolderIcon class="size-4"></FolderIcon>
+				{{ project.folder_name }}
+			</span>
+		</template>
+	</Dialog>
+</template>
+<script setup lang="ts">
+import FolderIcon from "@/components/Icons/Folder.vue";
+import builderProjectFolder from "@/data/builderProjectFolder";
+import { useVModel } from "@vueuse/core";
+
+const props = defineProps<{
+	currentFolder: string;
+	modelValue: boolean;
+}>();
+
+const emit = defineEmits(["update:modelValue", "folderSelected"]);
+const showModel = useVModel(props, "modelValue", emit);
+
+const folderSelected = (folder: string | null) => {
+	if (folder === props.currentFolder) {
+		return;
+	}
+	emit("folderSelected", folder);
+	showModel.value = false;
+};
+</script>

frontend/src/components/Modals/SelectFolder.vue

@@ -0,0 +1,72 @@
+<template>
+	<router-link :to="{ name: 'builder', params: { pageId: page.page_name } }">
+		<div
+			class="group relative flex w-full cursor-pointer flex-col gap-2 rounded-2xl bg-surface-white p-3"
+			:class="{
+				'!bg-surface-gray-2': selected,
+			}">
+			<img
+				width="250"
+				height="140"
+				:src="page.preview"
+				onerror="this.src='/assets/builder/images/fallback.png'"
+				class="w-full overflow-hidden rounded-md object-cover shadow dark:border dark:border-outline-gray-1" />
+			<div class="flex items-center justify-between border-outline-gray-2">
+				<span class="inline-block max-w-[160px]">
+					<div class="flex items-center gap-1">
+						<p class="truncate text-base font-medium text-ink-gray-7 group-hover:text-ink-gray-9">
+							{{ page.page_title || page.page_name }}
+						</p>
+					</div>
+					<UseTimeAgo v-slot="{ timeAgo }" :time="page.modified">
+						<p class="mt-1 block text-sm text-ink-gray-5 group-hover:text-ink-gray-6">Edited {{ timeAgo }}</p>
+					</UseTimeAgo>
+				</span>
+				<Dropdown
+					:options="[
+						{
+							group: 'Actions',
+							hideLabel: true,
+							items: [
+								{ label: 'Duplicate', onClick: () => store.duplicatePage(page), icon: 'copy' },
+								{
+									label: 'View in Desk',
+									onClick: () => store.openInDesk(page),
+									icon: 'arrow-up-right',
+								},
+							],
+						},
+						{
+							group: 'Delete',
+							hideLabel: true,
+							items: [{ label: 'Delete', onClick: () => store.deletePage(page), icon: 'trash' }],
+						},
+					]"
+					size="xs"
+					placement="right">
+					<template v-slot="{ open }">
+						<BuilderButton
+							icon="more-horizontal"
+							size="sm"
+							variant="subtle"
+							class="bg-surface-white !text-ink-gray-5 hover:!text-ink-gray-9"
+							@click="open"></BuilderButton>
+					</template>
+				</Dropdown>
+			</div>
+		</div>
+	</router-link>
+</template>
+<script setup lang="ts">
+import useStore from "@/store";
+import { BuilderPage } from "@/types/Builder/BuilderPage";
+import { UseTimeAgo } from "@vueuse/components";
+import { Dropdown } from "frappe-ui";
+
+const store = useStore();
+
+defineProps<{
+	page: BuilderPage;
+	selected: boolean;
+}>();
+</script>