feat(ui): accounts view

package.json

@@ -57,6 +57,7 @@
 		"rollup-plugin-livereload": "^2.0.0",
 		"rollup-plugin-node-polyfills": "^0.2.1",
 		"rollup-plugin-svelte": "^7.0.0",
+		"rollup-plugin-svelte-svg": "^0.2.3",
 		"rollup-plugin-terser": "^7.0.2",
 		"sass": "^1.30.0",
 		"svelte": "^3.31.0",

public/index.html

@@ -6,7 +6,6 @@
 
 		<title>Skizzle</title>
 
-		<link rel="stylesheet" href="./global.css" />
 		<link rel="stylesheet" href="./build/bundle.css" />
 
 		<script defer src="./build/bundle.js"></script>

rollup.config.js

@@ -7,6 +7,8 @@ import { terser } from 'rollup-plugin-terser';
 import filesize from 'rollup-plugin-filesize';
 import typescript from '@rollup/plugin-typescript';
 import css from 'rollup-plugin-css-only';
+import replace from '@rollup/plugin-replace';
+import svg from 'rollup-plugin-svelte-svg';
 
 const createPreprocessors = require('./svelte.config').createPreprocessors;
 const production = !process.env.ROLLUP_WATCH;
@@ -20,6 +22,10 @@ export default {
 		file: 'public/build/bundle.js',
 	},
 	plugins: [
+		svg(),
+		replace({
+			'process.env.NODE_ENV': JSON.stringify('production'),
+		}),
 		nodePolyfills(),
 		svelte({
 			compilerOptions: {

src/App.svelte

@@ -12,17 +12,38 @@
 		[Views.Settings]: Settings,
 	};
 
-	let currentView: Views = Views.List;
+	let currentView: Views = Views.Accounts;
 	const onViewChange = (view: Views) => (currentView = view);
 </script>
 
 <style>
+	:global(*) {
+		margin: 0;
+		padding: 0;
+		box-sizing: border-box;
+	}
+
+	:global(html, body) {
+		height: 100%;
+	}
+
+	:global(body) {
+		display: flex;
+		flex-direction: column;
+		font-family: sans-serif;
+		color: #fff;
+		background-color: #333;
+	}
+
 	main {
 		display: flex;
 		flex: 1 0 auto;
 	}
 
 	div {
+		display: flex;
+		flex-direction: column;
+		height: 100%;
 		flex: 1 1 auto;
 	}
 </style>

src/components/AccountSummary/AccountSummary.svelte

@@ -0,0 +1,143 @@
+<script>
+	import { Service } from 'services/Service';
+	import { ProviderEnum } from 'models/skizzle/ProviderEnum';
+	import { isFetchingData } from 'shared/stores/default.store';
+	import Settings from './settings.svg';
+	import Modale from 'components/Modale';
+	import AccountTitle from 'components/AccountTitle';
+	export let profile;
+	import {
+		checkOrganization,
+		checkProject,
+		checkRepository,
+		deleteRepository,
+	} from 'utils';
+
+	let isSettingsDisplayed = false;
+	const onModaleClose = () => (isSettingsDisplayed = false);
+</script>
+
+<style>
+	.container {
+		display: flex;
+		align-items: center;
+		padding: 1rem;
+		border-radius: 8px;
+		background-color: #5c5c5c;
+	}
+
+	.avatar {
+		width: 3rem;
+		height: 3rem;
+		margin-right: 0.5rem;
+		overflow: hidden;
+		border-radius: 50%;
+	}
+
+	img {
+		display: block;
+		width: 100%;
+		height: auto;
+	}
+
+	span {
+		display: block;
+	}
+
+	.name {
+		font-size: 1rem;
+		font-weight: bold;
+	}
+
+	.email {
+		font-size: 0.8rem;
+	}
+
+	.settings {
+		width: 1.5rem;
+		height: 1.5rem;
+		cursor: pointer;
+		border: none;
+		background-color: transparent;
+		transition: opacity linear 0.2s;
+	}
+
+	.settings:hover {
+		opacity: 0.5;
+	}
+
+	.user {
+		margin-right: auto;
+	}
+
+	.big {
+		width: 6rem;
+		height: 6rem;
+	}
+
+	.header {
+		margin: -2rem -2rem 2rem;
+		padding: 2rem 2rem 1rem;
+		border-bottom-right-radius: 0;
+		border-bottom-left-radius: 0;
+		background-color: #444;
+	}
+
+	.header .avatar {
+		margin-top: -2.5rem;
+	}
+
+	.organizations {
+		list-style: none;
+	}
+
+	.organizations li {
+		margin-bottom: 0.5rem;
+	}
+</style>
+
+<div class="container">
+	<div class="avatar">
+		<img width="64" height="64" src={profile.avatar} alt={profile.name} />
+	</div>
+	<div class="user">
+		<span class="name">{profile.name}</span>
+		<span class="email">{profile.email}</span>
+	</div>
+	<button
+		class="settings"
+		on:click={() => (isSettingsDisplayed = !isSettingsDisplayed)}><Settings /></button>
+</div>
+{#if isSettingsDisplayed}
+	<Modale onClose={onModaleClose}>
+		{#await Service.getOrganizations(ProviderEnum.AzureDevOps, { profile })}
+			<p>Chargement...</p>
+		{:then organizations}
+			<div class="container header">
+				<div class="avatar big">
+					<img width="64" height="64" src={profile.avatar} alt={profile.name} />
+				</div>
+				<div class="user">
+					<span class="name">{profile.name}</span>
+					<span class="email">{profile.email}</span>
+				</div>
+			</div>
+			<AccountTitle>Organisations</AccountTitle>
+			<ul class="organizations">
+				{#each organizations as organization}
+					<li>
+						<input
+							type="checkbox"
+							id={organization.organizationName}
+							checked={organization.checked}
+							on:change={event => checkOrganization(event, organization)}
+							disabled={$isFetchingData} />
+						<label for={organization.organizationName}>
+							{organization.organizationName}
+						</label>
+					</li>
+				{/each}
+			</ul>
+		{/await}
+	</Modale>
+{/if}

src/components/AccountSummary/index.js

@@ -0,0 +1,3 @@
+import AccountSummary from './AccountSummary.svelte';
+
+export default AccountSummary;

src/components/AccountTitle/AccountTitle.svelte

@@ -0,0 +1,12 @@
+<style>
+	h1 {
+		margin-bottom: 0.5rem;
+		color: #fff;
+		font-size: 1rem;
+		font-weight: bold;
+	}
+</style>
+
+<h1>
+	<slot />
+</h1>

src/components/AccountTitle/index.js

@@ -0,0 +1,3 @@
+import AccountTitle from './AccountTitle.svelte';
+
+export default AccountTitle;