Improve TODO app

locales/ar.yml

@@ -56,6 +56,8 @@ colors:
   validations:
     colorRequired: اللون غير محدد
     nameRequired: الاسم مطلوب
+commin:
+  create: يخلق
 common:
   403Error: ليس لديك صلاحية الوصول
   404Error: خطأ 404

locales/ch.yml

@@ -70,10 +70,10 @@ common:
   name: Na'an
   new: 新
   notFound: 未找到
-  oops: Palo Pali'e
   price: 价格
   search: 搜索
   status: 状态
+  create: 确认
 currencySign: ¥
 customers:
   customerName: 客户名称

locales/de.yml

@@ -58,6 +58,7 @@ colors:
   validations:
     colorRequired: Farbe nicht ausgewählt
     nameRequired: Name wird benötigt
+
 common:
   403Error: Sie haben keine Zugriffsberechtigung
   404Error: 404 Fehler
@@ -78,6 +79,7 @@ common:
   price: Price
   search: Suche
   status: Status
+  create: Erstellen
 currencySign: €
 customers:
   customerName: Kundenname

locales/en.yml

@@ -56,6 +56,7 @@ colors:
   validations:
     colorRequired: Color not selected
     nameRequired: Name is required
+
 common:
   403Error: You have not Permission to access
   404Error: 404 Error
@@ -76,6 +77,7 @@ common:
   price: Price
   search: Search
   status: Status
+  create: Create
 currencySign: $
 customers:
   customerName: Customer Name
@@ -273,7 +275,11 @@ reviews:
   rate: Rate
 title: Yummy Admin
 todoApp:
-  createGroup: Create Group
+  createGroup:
+    groupTitle: Group Title
+    taskTitle: Task Title
+    theme: Theme
+    title: Create Group
   createTask: Create new task
   today: Today
 userMenu:

locales/fa.yml

@@ -74,6 +74,7 @@ common:
   price: قیمت
   search: جستجو
   status: وضعیت
+  create: ایجاد
 currencySign: تومان
 customers:
   customerName: نام مشتری
@@ -271,7 +272,11 @@ reviews:
   rate: امتیاز
 title: پنل مدیریت Yummy
 todoApp:
-  createGroup: گروه جدید
+  createGroup:
+    groupTitle: عنوان
+    taskTitle: عنوان تسک
+    theme: تم
+    title: گروه جدید
   createTask: ایجاد تسک جدید
   today: امروز
 userMenu:

locales/tr.yml

@@ -76,6 +76,8 @@ common:
   price: Fiyat
   search: Ara
   status: Durum
+  create: Yaratmak
+
 currencySign: ₺
 customers:
   customerName: Müşteri Adı

src/components.d.ts

@@ -25,6 +25,7 @@ declare module 'vue' {
     CreateBrand: typeof import('./components/Brand/CreateBrand.vue')['default']
     CreateCategory: typeof import('./components/Category/CreateCategory.vue')['default']
     CreateColor: typeof import('./components/Color/CreateColor.vue')['default']
+    CreateGroup: typeof import('./components/Apps/Todo/CreateGroup.vue')['default']
     CreateProduct: typeof import('./components/Products/CreateProduct.vue')['default']
     CustomerDetail: typeof import('./components/Customers/CustomerDetail.vue')['default']
     CustomerManagement: typeof import('./components/Customers/CustomerManagement.vue')['default']
@@ -50,11 +51,16 @@ declare module 'vue' {
     NBreadcrumb: typeof import('naive-ui')['NBreadcrumb']
     NBreadcrumbItem: typeof import('naive-ui')['NBreadcrumbItem']
     NButton: typeof import('naive-ui')['NButton']
+    NCard: typeof import('naive-ui')['NCard']
     NConfigProvider: typeof import('naive-ui')['NConfigProvider']
     NDataTable: typeof import('naive-ui')['NDataTable']
     NDialogProvider: typeof import('naive-ui')['NDialogProvider']
     NDropdown: typeof import('naive-ui')['NDropdown']
+    NDynamicTags: typeof import('naive-ui')['NDynamicTags']
     NEmpty: typeof import('naive-ui')['NEmpty']
+    NFlex: typeof import('naive-ui')['NFlex']
+    NForm: typeof import('naive-ui')['NForm']
+    NFormItem: typeof import('naive-ui')['NFormItem']
     NIcon: typeof import('naive-ui')['NIcon']
     NInput: typeof import('naive-ui')['NInput']
     NLayout: typeof import('naive-ui')['NLayout']
@@ -64,6 +70,7 @@ declare module 'vue' {
     NListItem: typeof import('naive-ui')['NListItem']
     NMenu: typeof import('naive-ui')['NMenu']
     NMessageProvider: typeof import('naive-ui')['NMessageProvider']
+    NModal: typeof import('naive-ui')['NModal']
     NNotificationProvider: typeof import('naive-ui')['NNotificationProvider']
     Notifications: typeof import('./components/Navbar/Notifications.vue')['default']
     NPageHeader: typeof import('naive-ui')['NPageHeader']
@@ -72,12 +79,15 @@ declare module 'vue' {
     NRadioButton: typeof import('naive-ui')['NRadioButton']
     NRadioGroup: typeof import('naive-ui')['NRadioGroup']
     NScrollbar: typeof import('naive-ui')['NScrollbar']
+    NSelect: typeof import('naive-ui')['NSelect']
     NSpace: typeof import('naive-ui')['NSpace']
     NSwitch: typeof import('naive-ui')['NSwitch']
     NTag: typeof import('naive-ui')['NTag']
     NText: typeof import('naive-ui')['NText']
     NThing: typeof import('naive-ui')['NThing']
     NTooltip: typeof import('naive-ui')['NTooltip']
+    NTreeSelect: typeof import('naive-ui')['NTreeSelect']
+    NUpload: typeof import('naive-ui')['NUpload']
     OrderManagement: typeof import('./components/Orders/OrderManagement.vue')['default']
     PersianIcon: typeof import('./components/CustomIcons/PersianIcon.vue')['default']
     ProductsManagement: typeof import('./components/Products/ProductsManagement.vue')['default']

src/components/Apps/Todo/CreateGroup.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+interface Props {
+  show: boolean
+}
+
+import { Checkmark48Filled as CheckIcon } from '@vicons/fluent'
+import type { TaskGroup } from '~/models/Todo'
+
+const props = defineProps<Props>()
+const emits = defineEmits(['close'])
+const showModal = computed(() => props.show)
+const { t } = useI18n()
+const colors = useColors().primaryColors
+const selectedColorIndex = ref(-1)
+
+const groupItem = ref<TaskGroup>({})
+function setColor(index: number) {
+  selectedColorIndex.value = index
+}
+
+const store = useTodoAppStore()
+
+function createGroup() {
+  if (groupItem.value.title.length === 0) return //TODO: add form validation
+
+  const color =
+    selectedColorIndex.value >= 0 ? colors[selectedColorIndex.value] : null
+  groupItem.value.bgColor = color
+  groupItem.value.icon = '📁'
+  store.createGroup(groupItem.value)
+  emits('close')
+  window.umami?.track('Todo:CreateGroup', { title: groupItem.value.title })
+  groupItem.value = {}
+  selectedColorIndex.value = -1
+}
+</script>
+
+
+<template>
+    <div>
+        <n-modal v-model:show="showModal" @close="emits('close')" preset="card" style="width: 500px" :title="t('todoApp.createGroup.title')">
+            <n-input v-model:value="groupItem.title" :placeholder="t('todoApp.createGroup.groupTitle')" />
+
+            <div py-4>
+                <div>
+                    <NTag type="primary" :bordered="false" size="small" class="mb-3 font-bold">
+                        {{ t('todoApp.createGroup.theme') }}
+                    </NTag>
+                </div>
+                <div>
+                    <NButton key="-1" color="#EEE" size="medium" circle icon="CheckIcon" class="mx-1"
+                        @click="setColor(-1)">
+                        <template #icon>
+                            <CheckIcon color="#333" v-if="selectedColorIndex === -1" />
+                            <span v-else />
+                        </template>
+                    </NButton>
+                    <NButton v-for="(color, index) of colors" :key="index" :color="color" size="medium" circle
+                        icon="CheckIcon" class="mx-1" @click="setColor(index)">
+                        <template #icon>
+                            <CheckIcon v-if="selectedColorIndex === index" />
+                            <span v-else />
+                        </template>
+                    </NButton>
+                </div>
+            </div>
+
+            <div pt-4>
+                <n-button attr-type="submit" size="large" type="primary" @click="createGroup">
+                    {{ t('common.create') }}
+                </n-button>
+            </div>
+        </n-modal>
+    </div>
+</template>
+
+<style scoped></style>

src/components/Apps/Todo/TaskItem.vue

@@ -13,7 +13,7 @@ const isDone = ref(props.task.isDone)
 const emits = defineEmits(['done', 'fav'])
 watch(
   () => isDone.value,
-  () => emits('done', isDone.value),
+  (newValue: boolean) => newValue === true && emits('done'),
 )
 function toggleFav() {
   emits('fav')

src/components/Apps/Todo/TasksList.vue

@@ -41,6 +41,18 @@ function createTask() {
 function doneTask(id: number) {
   store.toggleDoneTask(id)
   window.umami?.track('Todo:DoneTask')
+  playSound()
+}
+
+function playSound() {
+  const audioEl = document.createElement('audio')
+  audioEl.style.display = 'none'
+  audioEl.src = '../../../assets/sounds/done.mp3'
+  audioEl.autoplay = true
+  document.body.appendChild(audioEl)
+  setTimeout(() => {
+    document.body.getElementsByTagName('audio')[0].remove()
+  }, 890)
 }
 
 function favTask(id: number) {
@@ -53,7 +65,7 @@ function favTask(id: number) {
     <section class="tasks-box flex flex-col items-stretch justify-stretch p-8"
         :style="{ 'background-color': group?.bgColor }">
 
-        <GroupTitle :group="group" @edit="updateGroup" />
+        <GroupTitle :group="group" />
 
         <div class="flex-1 flex-col justify-end mb-1 overflow-y-auto">
             <n-scrollbar>

src/components/Apps/Todo/TodoApp.vue

@@ -31,10 +31,11 @@ function searchInList(keyword: string) {
     (x: TaskGroup) => x.title.toLowerCase().indexOf(keyword.toLowerCase()) >= 0,
   )
 }
-
+const showCreateModal = ref(false)
 function createGroup() {
-  store.createGroup()
-  window.umami?.track('Todo:CreateGroup')
+  showCreateModal.value = true
+  //   store.createGroup()
+  //   window.umami?.track('Todo:CreateGroup')
 }
 </script>
 
@@ -57,9 +58,10 @@ function createGroup() {
                             <AddIcon />
                         </NIcon>
                     </template>
-                    {{ t('todoApp.createGroup') }}
+                    {{ t('todoApp.createGroup.title') }}
                 </NButton>
             </div>
+            <CreateGroup :show="showCreateModal" @close="showCreateModal = false" />
         </NLayoutSider>
         <NLayoutContent>
             <TasksList v-if="selectedGroup" :group="selectedGroup" />

src/components/Apps/Todo/TodoGroupsList.vue

@@ -1,40 +1,91 @@
 <script lang="ts" setup>
+import { Delete20Regular as DeleteIcon } from '@vicons/fluent'
 import type { TaskGroup } from '~/models/Todo'
 
 interface Props {
   groups: TaskGroup[]
 }
-defineProps<Props>()
+const props = defineProps<Props>()
 const emits = defineEmits(['select'])
 const selectedGroup = ref<TaskGroup | null>(null)
+
+onMounted(() => {
+  setTimeout(() => {
+    const item = props.groups.at(0)
+    if (item) {
+      selectedGroup.value = item
+      emits('select', item)
+    }
+  }, 100)
+})
+
+const { t } = useI18n()
+const { renderIcon } = useRender()
+
+const options = [
+  {
+    label: t('common.delete'),
+    key: 'delete',
+    icon: renderIcon(DeleteIcon),
+  },
+]
+
 function selectGroup(item: TaskGroup) {
   selectedGroup.value = item
   emits('select', item)
   window.umami?.track('Todo:SelectGroup', { title: item.title })
 }
+
+const showDropdown = ref(false)
+const x = ref(0)
+const y = ref(0)
+const selectedMenuId = ref(null)
+function handleContextMenu(item: any, e: MouseEvent) {
+  selectedMenuId.value = item.id
+  e.preventDefault()
+  showDropdown.value = false
+  nextTick().then(() => {
+    showDropdown.value = true
+    x.value = e.clientX
+    y.value = e.clientY
+  })
+}
+const store = useTodoAppStore()
+function handleSelect(action: string) {
+  if (action === 'delete') {
+    store.deleteGroup(selectedMenuId.value)
+  }
+  showDropdown.value = false
+}
 </script>
 
 <template>
-    <NList hoverable clickable class="px-1">
-        <NListItem v-for="item of groups" :key="item.id" @click="selectGroup(item)"
-            :class="{ selected: item.id === selectedGroup?.id }">
-            <template #prefix>
-                <span class="icon text-lg">{{ item.icon }}</span>
-            </template>
-            <div class="flex flex-col">
-                <span class="text-sm text-gray-800 dark:text-white">
-                    {{ item.title }}
-                </span>
-            </div>
-        </NListItem>
-    </NList>
+    <div>
+        <NList hoverable clickable class="px-1">
+            <NListItem v-for="item of groups" :key="item.id" @click="selectGroup(item)" @contextmenu="(e: MouseEvent) => handleContextMenu(item, e)"
+                :class="{ selected: item.id === selectedGroup?.id }">
+                <template #prefix>
+                    <span class="icon text-lg">{{ item.icon }}</span>
+                </template>
+                <div class="flex flex-col">
+                    <span class="text-sm text-gray-800 dark:text-white">
+                        {{ item.title }}
+                    </span>
+                </div>
+
+            </NListItem>
+            <n-dropdown :on-clickoutside="() => showDropdown = false" placement="bottom-start" trigger="manual" :x="x"
+                :y="y" :options="options" :show="showDropdown" @select="handleSelect" />
+        </NList>
+    </div>
 </template>
 
 
 <style scoped lang="scss">
 .icon {
     position: relative;
 }
+
 .selected {
     font-weight: bold;
     background: var(--n-merged-color-hover);