Implemented Todo management.

src/api/account.ts

@@ -3,25 +3,25 @@ import type { CurrentUser, SaveProfilePayload, SignInPayload, UserProfile } from
 import { useUserStore } from "@/stores/user";
 
 export async function getProfile(): Promise<UserProfile> {
-  await sleep(2500);
+  await sleep(1000);
   const users = useUserStore();
   return users.getProfile();
 }
 
 export async function saveProfile(payload: SaveProfilePayload): Promise<UserProfile> {
-  await sleep(2500);
+  await sleep(1000);
   const users = useUserStore();
   return users.saveProfile(payload);
 }
 
 export async function signIn(payload: SignInPayload): Promise<CurrentUser> {
-  await sleep(2500);
+  await sleep(1000);
   const users = useUserStore();
   return users.signIn(payload);
 }
 
 export async function signOut(): Promise<void> {
-  await sleep(2500);
+  await sleep(1000);
   const users = useUserStore();
   users.signOut();
 }

src/api/todos.ts

@@ -0,0 +1,34 @@
+import sleep from "./sleep";
+import type { CreateTodoPayload, ReplaceTodoPayload, SearchTodosPayload, Todo } from "@/types/todos";
+import type { SearchResults } from "@/types/search";
+import { useTodoStore } from "@/stores/todo";
+
+export async function createTodo(payload: CreateTodoPayload): Promise<Todo> {
+  await sleep(1000);
+  const todos = useTodoStore();
+  return todos.create(payload);
+}
+
+export async function deleteTodo(id: string): Promise<Todo> {
+  await sleep(1000);
+  const todos = useTodoStore();
+  return todos._delete(id);
+}
+
+export async function readTodo(id: string): Promise<Todo> {
+  await sleep(1000);
+  const todos = useTodoStore();
+  return todos.read(id);
+}
+
+export async function replaceTodo(id: string, payload: ReplaceTodoPayload, version?: number): Promise<Todo> {
+  await sleep(1000);
+  const todos = useTodoStore();
+  return todos.replace(id, payload, version);
+}
+
+export async function searchTodos(payload: SearchTodosPayload): Promise<SearchResults<Todo>> {
+  await sleep(1000);
+  const todos = useTodoStore();
+  return todos.search(payload);
+}

src/components/layout/AppNavbar.vue

@@ -96,29 +96,9 @@ watchEffect(() => {
             </ul>
           </li>
           <template v-if="user">
-            <!-- TODO(fpion): implement
             <li class="nav-item">
-              <RouterLink :to="{ name: 'ArticleList' }" class="nav-link"><font-awesome-icon icon="fas fa-carrot" /> {{ t("articles.title.list") }}</RouterLink>
+              <RouterLink :to="{ name: 'TodoList' }" class="nav-link"><font-awesome-icon icon="fas fa-list-check" /> {{ t("todos.title.list") }}</RouterLink>
             </li>
-            <li class="nav-item">
-              <RouterLink :to="{ name: 'BannerList' }" class="nav-link"><font-awesome-icon icon="fas fa-flag" /> {{ t("banners.title.list") }}</RouterLink>
-            </li>
-            <li class="nav-item">
-              <RouterLink :to="{ name: 'StoreList' }" class="nav-link"><font-awesome-icon icon="fas fa-store" /> {{ t("stores.title.list") }}</RouterLink>
-            </li>
-            <li class="nav-item">
-              <RouterLink :to="{ name: 'ProductList' }" class="nav-link">
-                <font-awesome-icon icon="fas fa-shopping-cart" /> {{ t("products.title.list") }}
-              </RouterLink>
-            </li>
-            <li class="nav-item">
-              <RouterLink :to="{ name: 'ReceiptList' }" class="nav-link">
-                <font-awesome-icon icon="fas fa-file-invoice-dollar" /> {{ t("receipts.title.list") }}
-              </RouterLink>
-            </li>
-            <li class="nav-item">
-              <RouterLink :to="{ name: 'TaxList' }" class="nav-link"><font-awesome-icon icon="fas fa-sack-dollar" /> {{ t("taxes.title.list") }}</RouterLink>
-            </li> -->
           </template>
         </ul>
 

src/components/shared/AppBackButton.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { TarButton } from "logitar-vue3-ui";
+import { useI18n } from "vue-i18n";
+import { useRouter } from "vue-router";
+
+const router = useRouter();
+const { t } = useI18n();
+
+withDefaults(
+  defineProps<{
+    hasChanges?: boolean;
+  }>(),
+  {
+    hasChanges: false,
+  },
+);
+</script>
+
+<template>
+  <TarButton icon="fas fa-chevron-left" :text="t('actions.back')" :variant="hasChanges ? 'warning' : 'secondary'" @click="router.back()" />
+</template>

src/components/shared/AppDelete.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import { TarButton, TarModal } from "logitar-vue3-ui";
+import { computed, ref } from "vue";
+import { nanoid } from "nanoid";
+import { useI18n } from "vue-i18n";
+
+const { t } = useI18n();
+
+const props = withDefaults(
+  defineProps<{
+    close?: string;
+    confirm: string;
+    displayName: string;
+    id?: string;
+    loading?: boolean;
+    title: string;
+  }>(),
+  {
+    close: "actions.close",
+    id: () => nanoid(),
+  },
+);
+
+const modalRef = ref<InstanceType<typeof TarModal> | null>(null);
+
+const modalId = computed<string>(() => `delete-modal_${props.id}`);
+
+function hide(): void {
+  modalRef.value?.hide();
+}
+
+defineEmits<{
+  (e: "confirmed", callback: () => void): void;
+}>();
+</script>
+
+<template>
+  <span>
+    <TarButton
+      :disabled="loading"
+      icon="fas fa-trash-can"
+      :loading="loading"
+      :text="t('actions.delete')"
+      variant="danger"
+      data-bs-toggle="modal"
+      :data-bs-target="`#${modalId}`"
+    />
+    <TarModal :close="t(close)" :id="modalId" ref="modalRef" :title="t(title)">
+      <p>
+        {{ t(confirm) }}
+        <br />
+        <span class="text-danger">{{ displayName }}</span>
+      </p>
+      <template #footer>
+        <TarButton icon="fas fa-ban" :text="t('actions.cancel')" variant="secondary" @click="hide" />
+        <TarButton
+          :disabled="loading"
+          icon="fas fa-trash-can"
+          :loading="loading"
+          :status="t('loading')"
+          :text="t('actions.delete')"
+          variant="danger"
+          @click="$emit('confirmed', hide)"
+        />
+      </template>
+    </TarModal>
+  </span>
+</template>

src/components/shared/AppPagination.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { TarPagination, type PaginationPosition } from "logitar-vue3-ui";
+import { useI18n } from "vue-i18n";
+
+const { t } = useI18n();
+
+withDefaults(
+  defineProps<{
+    ariaFirst?: string;
+    ariaLabel?: string;
+    ariaLast?: string;
+    ariaNext?: string;
+    ariaPrevious?: string;
+    count?: number;
+    modelValue?: number;
+    pages?: number;
+    position?: PaginationPosition;
+    total?: number;
+  }>(),
+  {
+    ariaFirst: "pagination.first",
+    ariaLabel: "pagination.label",
+    ariaLast: "pagination.last",
+    ariaNext: "pagination.next",
+    ariaPrevious: "pagination.previous",
+    pages: 5,
+    position: "center",
+  },
+);
+
+defineEmits<{
+  (e: "update:model-value", value: number): void;
+}>();
+</script>
+
+<template>
+  <TarPagination
+    :aria-first="t(ariaFirst)"
+    :aria-label="t(ariaLabel)"
+    :aria-last="t(ariaLast)"
+    :aria-next="t(ariaNext)"
+    :aria-previous="t(ariaPrevious)"
+    :count="count"
+    first="«"
+    last="»"
+    :model-value="modelValue"
+    next="›"
+    :pages="pages"
+    position="center"
+    previous="‹"
+    :total="total"
+    @update:model-value="$emit('update:model-value', $event)"
+  />
+</template>

src/components/shared/CountSelect.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { TarSelect, parsingUtils, type SelectOption } from "logitar-vue3-ui";
+import { ref } from "vue";
+import { useI18n } from "vue-i18n";
+
+const { parseNumber } = parsingUtils;
+const { t } = useI18n();
+
+defineProps<{
+  modelValue?: number;
+}>();
+
+const options = ref<SelectOption[]>([{ text: "10" }, { text: "25" }, { text: "50" }, { text: "100" }]);
+
+defineEmits<{
+  (e: "update:model-value", value?: number): void;
+}>();
+</script>
+
+<template>
+  <TarSelect
+    floating
+    id="count"
+    :label="t('count')"
+    :model-value="modelValue?.toString()"
+    :options="options"
+    @update:model-value="$emit('update:model-value', parseNumber($event))"
+  />
+</template>

src/components/shared/SearchInput.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import AppInput from "./AppInput.vue";
+
+defineProps<{
+  modelValue?: string;
+}>();
+
+defineEmits<{
+  (e: "update:model-value", value?: string): void;
+}>();
+</script>
+
+<template>
+  <AppInput
+    floating
+    id="search"
+    label="search"
+    :model-value="modelValue"
+    placeholder="search"
+    type="search"
+    validation="server"
+    @update:model-value="$emit('update:model-value', $event)"
+  />
+</template>

src/components/shared/SortSelect.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { TarCheckbox, TarSelect, type SelectOption } from "logitar-vue3-ui";
+import { useI18n } from "vue-i18n";
+
+const { t } = useI18n();
+
+withDefaults(
+  defineProps<{
+    descending?: boolean | string;
+    id?: string;
+    modelValue?: string;
+    options?: SelectOption[];
+  }>(),
+  {
+    id: "sort",
+  },
+);
+
+defineEmits<{
+  (e: "descending", value: boolean): void;
+  (e: "update:model-value", value?: string): void;
+}>();
+</script>
+
+<template>
+  <TarSelect
+    floating
+    :id="id"
+    :label="t('sort.select.label')"
+    :model-value="modelValue"
+    :options="options"
+    :placeholder="t('sort.select.placeholder')"
+    @update:model-value="$emit('update:model-value', $event)"
+  >
+    <template #after>
+      <TarCheckbox :id="`${id}_desc`" :label="t('sort.isDescending')" :model-value="descending" @update:model-value="$emit('descending', $event)" />
+    </template>
+  </TarSelect>
+</template>

src/components/shared/StatusBlock.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { TarAvatar } from "logitar-vue3-ui";
+import { computed } from "vue";
+import { useI18n } from "vue-i18n";
+
+import type { Actor } from "@/types/actor";
+
+const { d, t } = useI18n();
+
+const props = defineProps<{
+  actor: Actor;
+  date: string;
+}>();
+
+const displayName = computed<string>(() => {
+  const { displayName, type } = props.actor;
+  return type === "System" ? t("system") : displayName;
+});
+const icon = computed<string | undefined>(() => {
+  switch (props.actor.type) {
+    case "ApiKey":
+      return "fas fa-key";
+    case "System":
+      return "fas fa-robot";
+    case "User":
+      return "fas fa-user";
+  }
+  return undefined;
+});
+const variant = computed<string | undefined>(() => (props.actor.type === "ApiKey" ? "info" : undefined));
+</script>
+
+<template>
+  <div class="d-flex">
+    <div class="d-flex">
+      <div class="d-flex align-content-center flex-wrap mx-1">
+        <TarAvatar :display-name="displayName" :email-address="actor.emailAddress" :icon="icon" :url="actor.pictureUrl" :variant="variant" />
+      </div>
+    </div>
+    <div>
+      {{ d(date, "medium") }}
+      <br />
+      {{ t("by") }}
+      {{ displayName }}
+    </div>
+  </div>
+</template>