feat(ui): tabs counters and order

AxaFrance · Jan 6, 2021 · 69b4b7e · 69b4b7e
1 parent 682242c
commit 69b4b7e
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 39 deletions.
diff --git a/src/components/Accounts/Accounts.svelte b/src/components/Accounts/Accounts.svelte
@@ -11,6 +11,17 @@
 		[ProviderEnum.AzureDevOps]: AzureDevOps,
 		[ProviderEnum.Github]: Github,
 	};
+
+	const tabs = {
+		[ProviderEnum.AzureDevOps]: {
+			label: 'Azure DevOps',
+			icon: Icons.AzureDevOps,
+		},
+		[ProviderEnum.Github]: {
+			label: 'Github',
+			icon: Icons.Github,
+		},
+	};
 </script>
 
 <style>
@@ -26,8 +37,7 @@
 <Tabs
 	current={currentProvider}
 	onChange={provider => (currentProvider = provider)}
-	data={{ [ProviderEnum.AzureDevOps]: 'Azure DevOps', [ProviderEnum.Github]: 'Github' }}
-	icons={{ [ProviderEnum.AzureDevOps]: Icons.AzureDevOps, [ProviderEnum.Github]: Icons.Github }} />
+	data={tabs} />
 <div class="content">
 	<svelte:component this={views[currentProvider]} />
 </div>
diff --git a/src/components/Main/Main.svelte b/src/components/Main/Main.svelte
@@ -9,27 +9,60 @@
 
 	let creatingList: boolean = false;
 
+	const filterList = list =>
+		$pullRequests
+			.filter(pullRequest => {
+				return list.projectsIds
+					? list.projectsIds.includes(pullRequest.projectId)
+					: true;
+			})
+			.filter(pullRequest => {
+				return list.repositoriesIds
+					? list.repositoriesIds.includes(pullRequest.repositoryId)
+					: true;
+			});
+
 	const customLists: CustomListType[] = [
 		{
+			id: '123',
+			order: 0,
 			name: 'Agenda partagé',
 			projectsIds: ['51f756a1-4881-4ff4-ad15-91f43256bb86'],
 			withoutOwnedByUserPR: true,
 		},
 		{
+			id: '456',
+			order: 1,
 			name: 'Skizzle',
 			repositoriesIds: [218745280],
 		},
 	];
 
 	$: fetchedComments = Promise.resolve<CommentType[]>([]);
+
 	const tabs = {
-		all: 'Toutes',
+		all: {
+			label: 'Toutes',
+			order: 0,
+		},
 	};
 
-	customLists.forEach(({ name }, index) => {
-		tabs[index] = name;
+	customLists.forEach(list => {
+		tabs[list.id] = {
+			label: list.name,
+			order: list.order + 1,
+			counter: filterList(list).length,
+		};
 	});
+
 	let currentTab: string = 'all';
+
+	$: console.log(currentTab);
+
+	$: displayedList =
+		currentTab === 'all'
+			? $pullRequests
+			: filterList(customLists.find(({ id }) => id === currentTab));
 </script>
 
 <style>
@@ -59,33 +92,15 @@
 	}} />
 
 <div class="content">
-	{#if currentTab === 'all'}
-		<ul class="list">
-			{#each $pullRequests as pullRequest}
-				<li>
-					<PullRequest
-						{pullRequest}
-						on:comments={event => (fetchedComments = event.detail.fetchedComment)} />
-				</li>
-			{/each}
-		</ul>
-	{:else}
-		<ul class="list">
-			{#each $pullRequests
-				.filter(pullRequest => {
-					return customLists[currentTab].projectsIds ? customLists[currentTab].projectsIds.includes(pullRequest.projectId) : true;
-				})
-				.filter(pullRequest => {
-					return customLists[currentTab].repositoriesIds ? customLists[currentTab].repositoriesIds.includes(pullRequest.repositoryId) : true;
-				}) as pullRequest}
-				<li>
-					<PullRequest
-						{pullRequest}
-						on:comments={event => (fetchedComments = event.detail.fetchedComment)} />
-				</li>
-			{/each}
-		</ul>
-	{/if}
+	<ul class="list">
+		{#each displayedList as pullRequest}
+			<li>
+				<PullRequest
+					{pullRequest}
+					on:comments={event => (fetchedComments = event.detail.fetchedComment)} />
+			</li>
+		{/each}
+	</ul>
 </div>
 {#if creatingList}
 	<Modale

diff --git a/src/components/Tabs/Tabs.svelte b/src/components/Tabs/Tabs.svelte
@@ -3,10 +3,7 @@
 	export let data;
 	export let onChange;
 	export let current;
-	export let icons;
 	export let onCreation: () => void;
-
-	console.log({ data });
 </script>
 
 <style>
@@ -57,18 +54,26 @@
 		height: auto;
 		margin-right: 0.5rem;
 	}
+
+	small {
+		margin-left: 0.2rem;
+		color: #ff8a00;
+	}
 </style>
 
 <nav>
-	{#each Object.keys(data) as tab}
+	{#each Object.keys(data).sort((a, b) =>
+		data[a].order < data[b].order ? -1 : 1,
+	) as tab}
 		<button
 			class="tab"
 			class:current={current === tab || Object.keys(data).length === 1}
 			on:click={() => onChange(tab)}>
-			{#if icons}
-				<svelte:component this={icons[tab]} />
+			{#if data[tab].icon}
+				<svelte:component this={data[tab].icon} />
 			{/if}
-			{data[tab]}
+			{data[tab].label}
+			{#if data[tab].counter}<small>({data[tab].counter})</small>{/if}
 		</button>
 	{/each}
 	{#if onCreation}