feat: misc review

Signed-off-by: David Dal Busco <[email protected]>
junobuild · Nov 6, 2023 · d995621 · d995621
1 parent 471ff21
commit d995621
Show file tree

Hide file tree

Showing 7 changed files with 85 additions and 52 deletions.
diff --git a/src/frontend/src/lib/components/docs/DocForm.svelte b/src/frontend/src/lib/components/docs/DocForm.svelte
@@ -6,7 +6,7 @@
 	import { toasts } from '$lib/stores/toasts.store';
 	import { RULES_CONTEXT_KEY, type RulesContext } from '$lib/types/rules.context';
 	import { createEventDispatcher, getContext } from 'svelte';
-	import { isNullish } from '$lib/utils/utils';
+	import { isNullish, nonNullish } from '$lib/utils/utils';
 	import { i18n } from '$lib/stores/i18n.store';
 	import { nanoid } from 'nanoid';
 	import {
@@ -15,6 +15,8 @@
 		type DataContext
 	} from '$lib/types/data.context';
 	import type Doc from './Doc.svelte';
+	import IconAutoRenew from '$lib/components/icons/IconAutoRenew.svelte';
+	import { fade } from 'svelte/transition';
 
 	const { store, reload }: RulesContext = getContext<RulesContext>(RULES_CONTEXT_KEY);
 	const { store: docsStore }: DataContext<Doc> = getContext<DataContext<Doc>>(DATA_CONTEXT_KEY);
@@ -28,41 +30,30 @@
 	let key: string | undefined;
 	$: key = $docsStore?.key;
 
-	let fields: DocField[] = [
-		{
-			name: '',
-			fieldType: DocFieldTypeEnum.STRING,
-			value: ''
-		}
-	];
-
-	const onAddFieldButtonPressed = () => {
-		fields = [
-			...fields,
-			{
-				name: '',
-				fieldType: DocFieldTypeEnum.STRING,
-				value: ''
-			}
-		];
+	const EMPTY_FIELD: DocField = {
+		name: '',
+		fieldType: DocFieldTypeEnum.STRING,
+		value: ''
 	};
 
+	let fields: DocField[] = [EMPTY_FIELD];
+
+	const onAddFieldButtonPressed = () => (fields = [...fields, EMPTY_FIELD]);
+
 	const onDeleteFieldPressed = (index: number) => {
-		if (fields.length > 1) {
-			fields = fields.filter((_, i) => i !== index);
+		if (fields.length <= 1) {
+			return;
 		}
+
+		fields = fields.filter((_, i) => i !== index);
 	};
 
 	let isFormValid = false;
 	$: isFormValid =
 		!isNullish(key) &&
 		!isNullish(
 			fields.find(
-				(field) =>
-					!isNullish(field.name) &&
-					field.name !== '' &&
-					!isNullish(field.value) &&
-					field.value !== ''
+				({ name, value }) => nonNullish(name) && name !== '' && nonNullish(value) && value !== ''
 			)
 		);
 
@@ -99,10 +90,16 @@
 	$: isActive = action === 'create' || action === 'edit';
 </script>
 
-<p class="title doc-form">{isActive ? $i18n.document.title_add_new_document : ''}</p>
+<p class="title doc-form">
+	{#if isActive}
+		{$i18n.document.title_add_new_document}
+	{:else}
+		&ZeroWidthSpace;
+	{/if}
+</p>
 
 {#if isActive}
-	<article class="doc-form">
+	<article class="doc-form" in:fade>
 		<form on:submit|preventDefault={onSubmit}>
 			<div>
 				<div>
@@ -111,22 +108,28 @@
 						<input
 							id="doc-id"
 							type="text"
-							placeholder="Document ID"
+							placeholder={$i18n.document.field_doc_id_placeholder}
 							name="doc_id"
 							bind:value={key}
 						/>
-						<button type="button" class="primary" on:click={() => (key = nanoid())}>
-							{$i18n.document.field_doc_id_btn_auto_id}
+						<button
+							class="text action start"
+							type="button"
+							on:click={() => (key = nanoid())}
+							aria-label={$i18n.document.field_doc_id_btn_auto_id}
+						>
+							<IconAutoRenew />
 						</button>
 					</div>
 				</div>
+
 				{#each fields as field, i (i)}
 					<DocFormField
 						bind:name={field.name}
 						bind:fieldType={field.fieldType}
 						bind:value={field.value}
-						isShowDeleteButton={fields.length > 1}
-						onDeleteFieldPressed={() => onDeleteFieldPressed(i)}
+						deleteButton={fields.length > 1}
+						on:junoDelete={() => onDeleteFieldPressed(i)}
 					/>
 				{/each}
 
@@ -137,7 +140,7 @@
 			</div>
 
 			<div class="button-wrapper">
-				<button type="submit" class="primary" disabled={!isFormValid}>Submit</button>
+				<button type="submit" class="primary" disabled={!isFormValid}>{$i18n.core.submit}</button>
 			</div>
 		</form>
 	</article>

diff --git a/src/frontend/src/lib/components/docs/DocFormField.svelte b/src/frontend/src/lib/components/docs/DocFormField.svelte
@@ -2,12 +2,14 @@
 	import { i18n } from '$lib/stores/i18n.store';
 	import { DocFieldTypeEnum } from '$lib/types/doc-form';
 	import IconDelete from '../icons/IconDelete.svelte';
+	import { createEventDispatcher } from 'svelte';
 
-	export let name: string = '';
+	export let name = '';
 	export let fieldType: DocFieldTypeEnum = DocFieldTypeEnum.STRING;
 	export let value: string | boolean | number = '';
-	export let isShowDeleteButton: boolean = false;
-	export let onDeleteFieldPressed = () => {};
+	export let deleteButton = false;
+
+	const dispatch = createEventDispatcher();
 </script>
 
 <div class="form-field">
@@ -21,6 +23,7 @@
 			bind:value={name}
 		/>
 	</div>
+
 	<div class="form-field-item">
 		<label for="field_type">{$i18n.document.field_type_label}</label>
 		<select id="field_type" name="field_type" bind:value={fieldType}>
@@ -29,6 +32,7 @@
 			<option value={DocFieldTypeEnum.NUMBER}>{$i18n.document.field_type_number}</option>
 		</select>
 	</div>
+
 	<div class="form-field-item">
 		<div>
 			<label for="value">{$i18n.document.field_value_label}</label>
@@ -43,14 +47,14 @@
 				{/if}
 
 				{#if fieldType === DocFieldTypeEnum.BOOLEAN}
-					<select id="field_value" name="field_value" placeholder="Field value" bind:value>
+					<select id="field_value" name="field_value" bind:value>
 						<option value={true}>{$i18n.document.field_value_true}</option>
 						<option value={false}>{$i18n.document.field_value_false}</option>
 					</select>
 				{/if}
 
-				{#if isShowDeleteButton}
-					<button class="text action start" type="button" on:click={() => onDeleteFieldPressed()}>
+				{#if deleteButton}
+					<button class="text action start" type="button" on:click={() => dispatch('junoDelete')}>
 						<IconDelete size="24px" />
 					</button>
 				{/if}
@@ -64,7 +68,7 @@
 		display: flex;
 		flex-direction: row;
 		align-items: center;
-		gap: 16px;
+		gap: var(--padding-1_5x);
 		margin-bottom: var(--padding-2x);
 	}
 
@@ -76,7 +80,6 @@
 
 	.value-input-wrapper {
 		display: flex;
-		flex-direction: row;
 		align-items: center;
 		justify-content: center;
 	}

diff --git a/src/frontend/src/lib/components/docs/Docs.svelte b/src/frontend/src/lib/components/docs/Docs.svelte
@@ -17,6 +17,7 @@
 	import type { ListParams } from '$lib/types/list';
 	import { compare } from 'semver';
 	import { listDocs008 } from '$lib/api/satellites.deprecated.api';
+	import IconNew from '$lib/components/icons/IconNew.svelte';
 
 	const { store }: RulesContext = getContext<RulesContext>(RULES_CONTEXT_KEY);
 
@@ -94,6 +95,18 @@
 		class:data-nullish={isNullish($paginationStore.items)}
 	>
 		{#if nonNullish($paginationStore.items)}
+			{#if empty}
+				<CollectionEmpty {collection} rule={$store.rule?.[1]}>
+					<svelte:fragment slot="filter">{$i18n.document.no_match}</svelte:fragment>
+				</CollectionEmpty>
+			{/if}
+
+			<button
+				class="text action start"
+				on:click={() => docsStore.set({ key: undefined, data: undefined, action: 'create' })}
+				><IconNew size="16px" /> <span>{$i18n.document.btn_add_document}</span></button
+			>
+
 			{#each $paginationStore.items as [key, doc]}
 				<button
 					class="text action"
@@ -105,12 +118,6 @@
 			{#if !empty}
 				<DataPaginator />
 			{/if}
-
-			{#if empty}
-				<CollectionEmpty {collection} rule={$store.rule?.[1]}>
-					<svelte:fragment slot="filter">{$i18n.document.no_match}</svelte:fragment>
-				</CollectionEmpty>
-			{/if}
 		{/if}
 	</div>
 {/if}

diff --git a/src/frontend/src/lib/components/icons/IconAutoRenew.svelte b/src/frontend/src/lib/components/icons/IconAutoRenew.svelte
@@ -0,0 +1,15 @@
+<!-- https://fonts.google.com/icons?selected=Material%20Symbols%20Outlined%3Aautorenew%3AFILL%400%3Bwght%40400%3BGRAD%400%3Bopsz%4024 -->
+<script lang="ts">
+	export let size = '24px';
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	height={size}
+	viewBox="0 -960 960 960"
+	width={size}
+	fill="currentColor"
+	><path
+		d="M204-318q-22-38-33-78t-11-82q0-134 93-228t227-94h7l-64-64 56-56 160 160-160 160-56-56 64-64h-7q-100 0-170 70.5T240-478q0 26 6 51t18 49l-60 60ZM481-40 321-200l160-160 56 56-64 64h7q100 0 170-70.5T720-482q0-26-6-51t-18-49l60-60q22 38 33 78t11 82q0 134-93 228t-227 94h-7l64 64-56 56Z"
+	/></svg
+>
diff --git a/src/frontend/src/lib/components/icons/IconNew.svelte b/src/frontend/src/lib/components/icons/IconNew.svelte
@@ -3,7 +3,12 @@
 	export let size = '24px';
 </script>
 
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 61.09 61.09" height={size} width={size}
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	viewBox="0 0 61.09 61.09"
+	height={size}
+	width={size}
+	fill="currentColor"
 	><g
 		><path
 			class="icon-new"

diff --git a/src/frontend/src/lib/styles/mixins/_collections.scss b/src/frontend/src/lib/styles/mixins/_collections.scss
@@ -50,7 +50,7 @@
 
 	&:hover,
 	&:focus {
-		color: var(--color-primary-contrast);
+		color: var(--text-color);
 
 		span {
 			background: var(--color-primary);

diff --git a/src/frontend/src/lib/types/data.context.ts b/src/frontend/src/lib/types/data.context.ts
@@ -3,9 +3,9 @@ import type { Writable } from 'svelte/store';
 export type DataStoreAction = 'create' | 'view' | 'edit';
 
 export interface DataStore<T> {
-	key: string;
-	data: T;
-	action?: DataStoreAction;
+	key: string | undefined;
+	data: T | undefined;
+	action: DataStoreAction;
 }
 
 export type DataStoreData<T> = DataStore<T> | undefined | null;