Merge pull request #630 from appwrite/feat-messaging-create-message

Support creating email messages

.github/workflows/tests.yml

@@ -18,8 +18,8 @@ jobs:
               uses: actions/setup-node@v3
               with:
                   node-version: 18
-            # - name: Audit dependencies
-            #   run: npm audit --audit-level low
+            - name: Audit dependencies
+              run: npm audit --audit-level low
             - name: Install dependencies
               run: npm ci
             - name: Svelte Diagnostics

src/lib/actions/analytics.ts

@@ -290,5 +290,6 @@ export enum Submit {
     SmsUpdateVerificationTemplate = 'submit_sms_update_verification_template',
     MessagingProviderCreate = 'submit_messaging_provider_create',
     MessagingProviderDelete = 'submit_messaging_provider_delete',
-    MessagingProviderUpdate = 'submit_messaging_provider_update'
+    MessagingProviderUpdate = 'submit_messaging_provider_update',
+    MessagingMessageCreate = 'submit_messaging_message_create'
 }

src/lib/elements/forms/index.ts

@@ -29,3 +29,4 @@ export { default as Label } from './label.svelte';
 export { default as InputProjectId } from './inputProjectId.svelte';
 export { default as InputDate } from './inputDate.svelte';
 export { default as InputDateRange } from './inputDateRange.svelte';
+export { default as InputTime } from './inputTime.svelte';

src/lib/elements/forms/inputCheckbox.svelte

@@ -1,13 +1,10 @@
 <script lang="ts">
-    import { FormItem, Helper, Label } from '.';
+    import { FormItem, Helper } from '.';
     import type { FormItemTag } from './formItem.svelte';
 
     interface $$Props extends Partial<HTMLLabelElement> {
         id: string;
         label?: string;
-        optionalText?: string;
-        tooltip?: string;
-        showLabel?: boolean;
         checked?: boolean;
         required?: boolean;
         disabled?: boolean;
@@ -26,7 +23,6 @@
     export let disabled = false;
     export let element: HTMLInputElement | undefined = undefined;
     export let wrapperTag: FormItemTag = 'li';
-
     let error: string;
 
     const handleInvalid = (event: Event) => {
@@ -44,25 +40,27 @@
 </script>
 
 <FormItem tag={wrapperTag}>
-    {#if label}
-        <Label {required} {tooltip} {optionalText} hide={!showLabel} for={id}>
-            {label}
-        </Label>
-    {/if}
-
-    <div class="input-text-wrapper">
-        <input
-            {id}
-            {disabled}
-            {required}
-            {...$$restProps}
-            type="checkbox"
-            bind:this={element}
-            bind:checked
-            on:invalid={handleInvalid}
-            on:click
-            on:change />
-    </div>
+    <label class="choice-item" for={id}>
+        <div class="input-text-wrapper">
+            <input
+                {id}
+                {disabled}
+                {required}
+                {...$$restProps}
+                type="checkbox"
+                bind:this={element}
+                bind:checked
+                on:invalid={handleInvalid}
+                on:click
+                on:change />
+        </div>
+        <div class="choice-item-content">
+            {#if label}
+                <div class="choice-item-title">{label}</div>
+            {/if}
+            <slot name="description" />
+        </div>
+    </label>
     {#if error}
         <Helper type="warning">{error}</Helper>
     {/if}

src/lib/elements/forms/inputDate.svelte

@@ -10,6 +10,8 @@
     export let value = '';
     export let required = false;
     export let nullable = false;
+    export let min: string | number | undefined = undefined;
+    export let max: string | number | undefined = undefined;
     export let disabled = false;
     export let readonly = false;
     export let autofocus = false;
@@ -65,6 +67,8 @@
             {readonly}
             {required}
             step=".001"
+            {min}
+            {max}
             autocomplete={autocomplete ? 'on' : 'off'}
             type="date"
             class="input-text"

src/lib/elements/forms/inputRadio.svelte

@@ -3,12 +3,14 @@
 
     export let label: string = null;
     export let showLabel = true;
+    // export let label: string;
     export let id: string;
     export let group: string;
     export let value: string;
     export let name: string;
     export let required = false;
     export let disabled = false;
+    export let fullWidth = false;
 
     let element: HTMLInputElement;
     let error: string;
@@ -47,6 +49,24 @@
                 <slot />
             {/if}
         </Label>
+        <!-- <label class="choice-item" for={id}>
+            <input
+                {id}
+                {name}
+                {disabled}
+                {required}
+                {value}
+                type="radio"
+                bind:group
+                bind:this={element}
+                on:invalid={handleInvalid} />
+            <div
+                class="choice-item-content u-cross-child-center"
+                class:u-width-full-line={fullWidth}>
+                <div class="choice-item-title">{label}</div>
+                <slot name="description" />
+            </div>
+        </label> -->
     </div>
     {#if error}
         <Helper type="warning">{error}</Helper>

src/lib/elements/forms/inputTime.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+    import { onMount } from 'svelte';
+    import { FormItem, Helper, Label } from '.';
+
+    export let label: string;
+    export let showLabel = true;
+    export let optionalText: string | undefined = undefined;
+    export let id: string;
+    export let value = '';
+    export let required = false;
+    export let min: string | number | undefined = undefined;
+    export let max: string | number | undefined = undefined;
+    export let disabled = false;
+    export let readonly = false;
+    export let autofocus = false;
+    export let autocomplete = false;
+
+    let element: HTMLInputElement;
+    let error: string;
+
+    onMount(() => {
+        if (element && autofocus) {
+            element.focus();
+        }
+    });
+
+    function handleInvalid(event: Event) {
+        event.preventDefault();
+
+        if (element.validity.valueMissing) {
+            error = 'This field is required';
+            return;
+        }
+
+        error = element.validationMessage;
+    }
+
+    $: if (value) {
+        error = null;
+    }
+</script>
+
+<FormItem>
+    <Label {required} {optionalText} hide={!showLabel} for={id}>
+        {label}
+    </Label>
+
+    <div class="input-text-wrapper" style="--amount-of-buttons:1; --button-size: 1rem">
+        <input
+            {id}
+            {disabled}
+            {readonly}
+            {required}
+            {min}
+            {max}
+            step="60"
+            autocomplete={autocomplete ? 'on' : 'off'}
+            type="time"
+            class="input-text"
+            bind:value
+            bind:this={element}
+            on:invalid={handleInvalid} />
+    </div>
+    {#if error}
+        <Helper type="warning">{error}</Helper>
+    {/if}
+</FormItem>

src/routes/console/project-[project]/messaging/+page.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-    import { goto } from '$app/navigation';
     import { base } from '$app/paths';
     import { page } from '$app/stores';
     import {
@@ -21,16 +20,15 @@
         TableCellHeadCheck,
         TableCellText,
         TableHeader,
-        TableRowLink
+        TableRowLink,
+        TableScroll
     } from '$lib/elements/table';
-    import TableScroll from '$lib/elements/table/tableScroll.svelte';
     import { toLocaleDateTime } from '$lib/helpers/date';
     import { Container } from '$lib/layout';
-    import type { Models } from '@appwrite.io/console';
     import type { PageData } from './$types';
-    import Create from './create.svelte';
     import { columns, showCreate } from './store';
     import MessageStatusPill from './messageStatusPill.svelte';
+    import CreateMessageDropdown from './createMessageDropdown.svelte';
     import ProviderType, { ProviderTypes } from './providerType.svelte';
     import Filters from '$lib/components/filters/filters.svelte';
     import FailedModal from './failedModal.svelte';
@@ -40,24 +38,19 @@
     let showDelete = false;
     let showFailed = false;
     let errors: string[] = [];
+    let showCreateDropdownMobile = false;
+    let showCreateDropdownDesktop = false;
+    let showCreateDropdownEmpty = false;
 
     const project = $page.params.project;
-
-    async function messageCreated(event: CustomEvent<Models.Bucket>) {
-        $showCreate = false;
-        await goto(`${base}/console/project-${project}/messaging/message-${event.detail.$id}`);
-    }
 </script>
 
 <Container>
     <div class="u-flex u-flex-vertical">
         <div class="u-flex u-main-space-between">
             <Heading tag="h2" size="5">Messages</Heading>
             <div class="is-only-mobile">
-                <Button on:click={() => ($showCreate = true)} event="create_message">
-                    <span class="icon-plus" aria-hidden="true" />
-                    <span class="text">Create message</span>
-                </Button>
+                <CreateMessageDropdown bind:showCreateDropdown={showCreateDropdownMobile} />
             </div>
         </div>
         <!-- TODO: fix width of search input in mobile -->
@@ -71,10 +64,7 @@
                     hideView
                     allowNoColumns
                     showColsTextMobile />
-                <Button on:click={() => ($showCreate = true)} event="create_message">
-                    <span class="icon-plus" aria-hidden="true" />
-                    <span class="text">Create message</span>
-                </Button>
+                <CreateMessageDropdown bind:showCreateDropdown={showCreateDropdownDesktop} />
             </div>
         </SearchQuery>
         <div class="u-flex u-gap-16 is-only-mobile u-margin-block-start-16">
@@ -219,11 +209,35 @@
             single
             href="https://appwrite.io/docs"
             target="message"
-            on:click={() => ($showCreate = true)} />
+            on:click={() => ($showCreate = true)}>
+            <div class="u-text-center">
+                <Heading size="7" tag="h2" trimmed={false}>
+                    Create your first message to get started.
+                </Heading>
+                <p class="body-text-2 u-bold u-margin-block-start-4">
+                    Need a hand? Learn more in our documentation.
+                </p>
+            </div>
+            <div class="u-flex u-flex-wrap u-gap-16 u-main-center">
+                <Button
+                    external
+                    href="https://appwrite.io/docs/references/cloud/client-web/messages"
+                    text
+                    event="empty_documentation"
+                    ariaLabel={`create message`}>
+                    Documentation
+                </Button>
+                <CreateMessageDropdown bind:showCreateDropdown={showCreateDropdownEmpty}>
+                    <Button
+                        secondary
+                        on:click={() => (showCreateDropdownEmpty = !showCreateDropdownEmpty)}
+                        event="create_message">
+                        <span class="text">Create message</span>
+                    </Button>
+                </CreateMessageDropdown>
+            </div>
+        </Empty>
     {/if}
 </Container>
 
 <FailedModal bind:show={showFailed} {errors} />
-
-<!-- TODO: handle create -->
-<Create bind:showCreate={$showCreate} on:created={messageCreated} />