From 61b3eb3ac38553ef4cda0512be19b1f4480d613c Mon Sep 17 00:00:00 2001
From: Vinzent <vinzent03@proton.me>
Date: Fri, 30 Sep 2022 20:24:59 +0200
Subject: [PATCH] feat: stage/unstage directory

close #
---
 src/gitManager.ts                             |   3 +-
 src/types.ts                                  |   1 +
 .../sidebar/components/fileComponent.svelte   |   7 +-
 .../components/pulledFileComponent.svelte     |   4 +
 .../components/stagedFileComponent.svelte     |  41 +++--
 .../sidebar/components/treeComponent.svelte   | 158 ++++++++++++------
 6 files changed, 141 insertions(+), 73 deletions(-)

diff --git a/src/gitManager.ts b/src/gitManager.ts
index 0d3d5f70..2c902e25 100644
--- a/src/gitManager.ts
+++ b/src/gitManager.ts
@@ -100,10 +100,11 @@ export abstract class GitManager {
                 childrenWithSameTitle.forEach((item) => children.remove(item));
                 list.push({
                     title: title,
+                    path: first.path,
                     children: this.getTreeStructure(childrenWithSameTitle, (beginLength > 0 ? (beginLength + title.length) : title.length) + 1)
                 });
             } else {
-                list.push({ title: restPath, statusResult: first });
+                list.push({ title: restPath, statusResult: first, path: first.path });
                 children.remove(first);
             }
         }
diff --git a/src/types.ts b/src/types.ts
index d529bef3..5c0b9984 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -139,6 +139,7 @@ export interface BranchInfo {
 
 export interface TreeItem {
     title: string;
+    path: string;
     statusResult?: FileStatusResult;
     children?: TreeItem[];
 }
diff --git a/src/ui/sidebar/components/fileComponent.svelte b/src/ui/sidebar/components/fileComponent.svelte
index 33abdb5b..5b22edd4 100644
--- a/src/ui/sidebar/components/fileComponent.svelte
+++ b/src/ui/sidebar/components/fileComponent.svelte
@@ -132,6 +132,10 @@
 
 <style lang="scss">
 	main {
+		.nav-file-title-content {
+			display: flex;
+			align-items: center;
+		}
 		.tools {
 			display: flex;
 			margin-left: auto;
@@ -150,8 +154,7 @@
 			.buttons {
 				display: flex;
 				> * {
-					padding: var(--size-2-1) var(--size-2-1);
-					border-radius: var(--clickable-icon-radius);
+					padding: 0 0;
 					height: auto;
 				}
 			}
diff --git a/src/ui/sidebar/components/pulledFileComponent.svelte b/src/ui/sidebar/components/pulledFileComponent.svelte
index be7ab60c..4b8b9eda 100644
--- a/src/ui/sidebar/components/pulledFileComponent.svelte
+++ b/src/ui/sidebar/components/pulledFileComponent.svelte
@@ -54,6 +54,10 @@
 
 <style lang="scss">
 	main {
+		.nav-file-title-content {
+			display: flex;
+			align-items: center;
+		}
 		.tools {
 			display: flex;
 			margin-left: auto;
diff --git a/src/ui/sidebar/components/stagedFileComponent.svelte b/src/ui/sidebar/components/stagedFileComponent.svelte
index 20bffb53..f19aa704 100644
--- a/src/ui/sidebar/components/stagedFileComponent.svelte
+++ b/src/ui/sidebar/components/stagedFileComponent.svelte
@@ -66,7 +66,7 @@
 		aria-label={formattedPath.split("/").last() != formattedPath
 			? formattedPath
 			: ""}
-		on:click={showDiff}
+		on:click|self={showDiff}
 	>
 		<div class="nav-file-title-content">
 			{formattedPath.split("/").last()?.replace(".md", "")}
@@ -96,27 +96,32 @@
 </main>
 
 <style lang="scss">
-	.tools {
-		display: flex;
-		margin-left: auto;
-		.type {
-			padding-left: var(--size-2-1);
+	main {
+		.nav-file-title-content {
 			display: flex;
 			align-items: center;
-			justify-content: center;
-			&[data-type="M"] {
-				color: orange;
-			}
-			&[data-type="D"] {
-				color: red;
-			}
 		}
-		.buttons {
+		.tools {
 			display: flex;
-			> * {
-				padding: var(--size-2-1) var(--size-2-1);
-				border-radius: var(--clickable-icon-radius);
-				height: auto;
+			margin-left: auto;
+			.type {
+				padding-left: var(--size-2-1);
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				&[data-type="M"] {
+					color: orange;
+				}
+				&[data-type="D"] {
+					color: red;
+				}
+			}
+			.buttons {
+				display: flex;
+				> * {
+					padding: 0 0;
+					height: auto;
+				}
 			}
 		}
 	}
diff --git a/src/ui/sidebar/components/treeComponent.svelte b/src/ui/sidebar/components/treeComponent.svelte
index dbd20da1..bbbb2de0 100644
--- a/src/ui/sidebar/components/treeComponent.svelte
+++ b/src/ui/sidebar/components/treeComponent.svelte
@@ -12,14 +12,24 @@
 	export let view: GitView;
 	export let fileType: FileType;
 	export let topLevel = false;
-
 	const closed: Record<string, boolean> = {};
+
+	function stage(path: string) {
+		plugin.gitManager.stageAll({ dir: path }).finally(() => {
+			dispatchEvent(new CustomEvent("git-refresh"));
+		});
+	}
+	function unstage(path: string) {
+		plugin.gitManager.unstageAll({ dir: path }).finally(() => {
+			dispatchEvent(new CustomEvent("git-refresh"));
+		});
+	}
 </script>
 
 <main class:topLevel>
 	{#each hierarchy.children as entity}
 		{#if entity.statusResult}
-			<div class="file-view">
+			<div>
 				{#if fileType == FileType.staged}
 					<StagedFileComponent
 						change={entity.statusResult}
@@ -39,29 +49,86 @@
 		{:else}
 			<div class="nav-folder" class:is-collapsed={closed[entity.title]}>
 				<div
-					on:click={() =>
+					class="nav-folder-title"
+					on:click|self={() =>
 						(closed[entity.title] = !closed[entity.title])}
 				>
-					<div class="nav-folder-title">
-						<div
-							class="nav-folder-collapse-indicator collapse-icon"
+					<div class="nav-folder-collapse-indicator collapse-icon">
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							width="24"
+							height="24"
+							viewBox="0 0 24 24"
+							fill="none"
+							stroke="currentColor"
+							stroke-width="2"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							class="svg-icon right-triangle"
+							><path d="M3 8L12 17L21 8" /></svg
 						>
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								width="24"
-								height="24"
-								viewBox="0 0 24 24"
-								fill="none"
-								stroke="currentColor"
-								stroke-width="2"
-								stroke-linecap="round"
-								stroke-linejoin="round"
-								class="svg-icon right-triangle"
-								><path d="M3 8L12 17L21 8" /></svg
-							>
-						</div>
-						<div class="nav-folder-title-content">
-							{entity.title}
+					</div>
+					<div class="nav-folder-title-content">
+						{entity.title}
+					</div>
+					<div class="tools">
+						<div class="buttons">
+							{#if fileType == FileType.staged}
+								<div
+									data-icon="minus"
+									aria-label="Unstage"
+									on:click={() => unstage(entity.title)}
+									class="clickable-icon"
+								>
+									<svg
+										width="24"
+										height="24"
+										viewBox="0 0 24 24"
+										fill="none"
+										stroke="currentColor"
+										stroke-width="2"
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										class="svg-icon lucide-minus"
+										><line
+											x1="5"
+											y1="12"
+											x2="19"
+											y2="12"
+										/></svg
+									>
+								</div>
+							{:else}
+								<div
+									data-icon="plus"
+									aria-label="Stage"
+									on:click={() => stage(entity.path)}
+									class="clickable-icon"
+								>
+									<svg
+										width="24"
+										height="24"
+										viewBox="0 0 24 24"
+										fill="none"
+										stroke="currentColor"
+										stroke-width="2"
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										class="svg-icon lucide-plus"
+										><line
+											x1="12"
+											y1="5"
+											x2="12"
+											y2="19"
+										/><line
+											x1="5"
+											y1="12"
+											x2="19"
+											y2="12"
+										/></svg
+									>
+								</div>
+							{/if}
 						</div>
 					</div>
 				</div>
@@ -85,34 +152,21 @@
 </main>
 
 <style lang="scss">
-	// main:not(.topLevel) {
-	// 	margin-left: 5px;
-	// }
-
-	// .opener {
-	// 	display: flex;
-	// 	justify-content: space-between;
-	// 	align-items: center;
-	// 	padding: 0 4px;
-	// 	.collapse-icon::after {
-	// 		content: "\00a0";
-	// 	}
-
-	// 	div {
-	// 		display: flex;
-	// 	}
-	// 	svg {
-	// 		transform: rotate(-90deg);
-	// 	}
-	// 	&.open svg {
-	// 		transform: rotate(0);
-	// 	}
-	// 	span {
-	// 		font-size: 0.8rem;
-	// 	}
-	// }
-
-	// .file-view {
-	// 	margin-left: 9px;
-	// }
+	main {
+		.nav-folder-title-content {
+			display: flex;
+			align-items: center;
+		}
+		.tools {
+			display: flex;
+			margin-left: auto;
+			.buttons {
+				display: flex;
+				> * {
+					padding: 0 0;
+					height: auto;
+				}
+			}
+		}
+	}
 </style>