-
Notifications
You must be signed in to change notification settings - Fork 38
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: add markups and data binding of task category page (#5073)
* feat(ops-flow): implement task category detail navigation and refactor stores Signed-off-by: Wanjin Noh <[email protected]> * feat(admin): add path handling and update task management store name Signed-off-by: Wanjin Noh <[email protected]> * feat: add task status management components and refactor category store methods Signed-off-by: Wanjin Noh <[email protected]> * feat(task-status): enhance draggable item with color and improved layout Signed-off-by: Wanjin Noh <[email protected]> * feat(task-status): add action button for editing and deleting tasks Signed-off-by: Wanjin Noh <[email protected]> * feat(task-status): add status form and update task status handling Signed-off-by: Wanjin Noh <[email protected]> * feat: refactor package store to use getters and add delete modal component Signed-off-by: Wanjin Noh <[email protected]> * refactor(buttons): rename TaskStatusActionButton to ActionMenuButton Signed-off-by: Wanjin Noh <[email protected]> * feat(task-type): add assignee pool to task type creation and update forms Signed-off-by: Wanjin Noh <[email protected]> --------- Signed-off-by: Wanjin Noh <[email protected]>
- Loading branch information
Showing
28 changed files
with
1,330 additions
and
173 deletions.
There are no files selected for viewing
69 changes: 69 additions & 0 deletions
69
apps/web/src/common/components/buttons/ActionMenuButton.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,69 @@ | ||
| <script setup lang="ts"> | ||
| import { onClickOutside } from '@vueuse/core'; | ||
| import { ref, computed } from 'vue'; | ||
| import { PIconButton, PContextMenu, useContextMenuStyle } from '@cloudforet/mirinae'; | ||
| import type { MenuItem } from '@cloudforet/mirinae/types/controls/context-menu/type'; | ||
| const emit = defineEmits<{(event: 'edit'): void; | ||
| (event: 'delete'): void; | ||
| }>(); | ||
| const containerRef = ref<HTMLElement|null>(null); | ||
| const targetRef = ref<HTMLElement|null>(null); | ||
| const menuRef = ref<any|null>(null); | ||
| const visibleMenu = ref<boolean>(false); | ||
| useContextMenuStyle({ | ||
| targetRef, | ||
| menuRef, | ||
| visibleMenu, | ||
| useFixedMenuStyle: true, | ||
| position: 'right', | ||
| menuWidth: '192px', | ||
| }); | ||
| const menu = computed<MenuItem[]>(() => [ | ||
| { name: 'edit', icon: 'ic_edit', label: 'Edit' }, | ||
| { name: 'delete', icon: 'ic_delete', label: 'Delete' }, | ||
| ]); | ||
| const toggleMenu = () => { | ||
| visibleMenu.value = !visibleMenu.value; | ||
| }; | ||
| const hideMenu = () => { | ||
| visibleMenu.value = false; | ||
| }; | ||
| onClickOutside(containerRef, hideMenu); | ||
| const handleSelectMenu = (item: MenuItem) => { | ||
| if (item.name === 'edit') { | ||
| emit('edit'); | ||
| } else if (item.name === 'delete') { | ||
| emit('delete'); | ||
| } | ||
| hideMenu(); | ||
| }; | ||
| </script> | ||
| <template> | ||
| <span ref="containerRef" | ||
| class="relative" | ||
| > | ||
| <p-icon-button ref="targetRef" | ||
| name="ic_ellipsis-horizontal" | ||
| @click="toggleMenu" | ||
| /> | ||
| <p-context-menu v-show="visibleMenu" | ||
| ref="menuRef" | ||
| :menu="menu" | ||
| :selected="[]" | ||
| class="action-menu" | ||
| @select="handleSelectMenu" | ||
| /> | ||
| </span> | ||
| </template> | ||
| <style scoped lang="postcss"> | ||
| .action-menu { | ||
| @apply bg-white; | ||
| z-index: 1; | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
30 changes: 30 additions & 0 deletions
30
apps/web/src/services/ops-flow/components/TaskStatusDeleteModal.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| <script setup lang="ts"> | ||
| import { ref } from 'vue'; | ||
| import DeleteModal from '@/common/components/modals/DeleteModal.vue'; | ||
| import { useTaskCategoryPageStore } from '@/services/ops-flow/stores/admin/task-category-page-store'; | ||
| const taskCategoryPageStore = useTaskCategoryPageStore(); | ||
| const loading = ref<boolean>(false); | ||
| const handleConfirm = async () => { | ||
| loading.value = true; | ||
| // await taskCategoryPageStore.deleteStatus(); | ||
| taskCategoryPageStore.closeDeleteStatusModal(); | ||
| loading.value = false; | ||
| }; | ||
| const handleCloseOrCancel = () => { | ||
| taskCategoryPageStore.closeDeleteStatusModal(); | ||
| }; | ||
| </script> | ||
|
|
||
| <template> | ||
| <delete-modal :visible="taskCategoryPageStore.state.visibleStatusDeleteModal" | ||
| header-title="Are you sure you want to delete this status?" | ||
| size="sm" | ||
| :loading="loading" | ||
| @confirm="handleConfirm" | ||
| @close="handleCloseOrCancel" | ||
| @cancel="handleCloseOrCancel" | ||
| /> | ||
| </template> |
67 changes: 67 additions & 0 deletions
67
apps/web/src/services/ops-flow/components/TaskStatusDraggableItem.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,67 @@ | ||
| <script setup lang="ts"> | ||
| import { PI, PBadge } from '@cloudforet/mirinae'; | ||
| import type { TaskStatusType } from '@/schema/opsflow/task/type'; | ||
| import ActionMenuButton from '@/common/components/buttons/ActionMenuButton.vue'; | ||
| import { useTaskCategoryPageStore } from '@/services/ops-flow/stores/admin/task-category-page-store'; | ||
| const props = defineProps<{ | ||
| index: number; | ||
| id: string; | ||
| name: string; | ||
| color: string; | ||
| type: TaskStatusType; | ||
| }>(); | ||
| const taskCategoryPageStore = useTaskCategoryPageStore(); | ||
| const handleEdit = () => { | ||
| taskCategoryPageStore.openEditStatusForm(props.index, props.type); | ||
| }; | ||
| const handleDelete = () => { | ||
| taskCategoryPageStore.openDeleteStatusModal(props.index, props.type); | ||
| }; | ||
| </script> | ||
|
|
||
| <template> | ||
| <li class="task-status-draggable-item"> | ||
| <p-i name="ic_drag-handle" | ||
| width="1rem" | ||
| height="1rem" | ||
| class="drag-handle" | ||
| /> | ||
| <div class="flex-grow"> | ||
| <p-badge class="ml-2" | ||
| badge-type="subtle" | ||
| shape="square" | ||
| :style-type="props.color" | ||
| > | ||
| {{ props.name }} | ||
| </p-badge> | ||
| </div> | ||
| <action-menu-button @edit="handleEdit" | ||
| @delete="handleDelete" | ||
| /> | ||
| </li> | ||
| </template> | ||
|
|
||
| <style lang="postcss" scoped> | ||
| .task-status-draggable-item { | ||
| @apply flex items-center px-2 border border-b-0 border-gray-150; | ||
| height: 2.625rem; | ||
| &:first-of-type { | ||
| @apply rounded-t-lg; | ||
| } | ||
| &:last-of-type { | ||
| @apply rounded-b-lg border-b; | ||
| } | ||
| &.ghost { | ||
| @apply rounded-lg border; | ||
| } | ||
| >.drag-handle { | ||
| cursor: grab; | ||
| } | ||
| } | ||
| </style> |
Oops, something went wrong.