-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
chore: refactor workflows components
- Loading branch information
Showing
11 changed files
with
148 additions
and
171 deletions.
There are no files selected for viewing
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
14 changes: 0 additions & 14 deletions
14
apps/client/src/modules/workflows/components/SectionSign.vue
This file was deleted.
Oops, something went wrong.
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
63 changes: 63 additions & 0 deletions
63
apps/client/src/modules/workflows/components/WorkflowsManager.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,63 @@ | ||
| <script setup lang="ts" generic="TData"> | ||
| import { type ComponentPublicInstance, computed, ref, useTemplateRef } from 'vue' | ||
| import { storeToRefs } from 'pinia' | ||
| import { useWorkflowsStore } from '../stores/workflows' | ||
| import { provideFilteredWorkflowsContext, useFilteredWorkflows } from '../composables/filtered' | ||
| import GeneralActionsPanel from './GeneralActionsPanel.vue' | ||
| import WorkflowsCards from './WorkflowsCards.vue' | ||
| import WorkflowsDataTable from './WorkflowsDataTable.vue' | ||
| import type { Table } from '@tanstack/vue-table' | ||
| import ViewControl from '@/modules/common/components/controls/ViewControl.vue' | ||
| import TableControls from '@/modules/common/components/controls/TableControls.vue' | ||
| interface WorkflowsDataTableExpose { | ||
| getTable: () => Table<TData> | ||
| } | ||
| const sortModel = ref('default') | ||
| const search = ref('') | ||
| const dataTable = useTemplateRef< | ||
| ComponentPublicInstance<typeof WorkflowsDataTable, WorkflowsDataTableExpose> | ||
| >('table') | ||
| const selectedWorkflows = ref<Record<string, boolean>>({}) | ||
| const isSelected = computed(() => { | ||
| return Object.values(selectedWorkflows.value).some(value => value) | ||
| }) | ||
| const idxs = computed(() => Object.keys(selectedWorkflows.value)) | ||
| const workflowsStore = useWorkflowsStore() | ||
| const { workflows } = storeToRefs(workflowsStore) | ||
| const { | ||
| filteredWorkflows, | ||
| } = useFilteredWorkflows(workflows, sortModel) | ||
| provideFilteredWorkflowsContext({ | ||
| sortModel, | ||
| search, | ||
| }) | ||
| </script> | ||
|
|
||
| <template> | ||
| <ViewControl> | ||
| <GeneralActionsPanel :workflows :idxs :is-selected /> | ||
| <template #table> | ||
| <div | ||
| class="relative w-full h-full flex flex-col" | ||
| :class="workflows.length > 0 && 'justify-between'" | ||
| > | ||
| <div class="flex flex-col overflow-auto"> | ||
| <WorkflowsDataTable ref="table" v-model:search="search" v-model:select="selectedWorkflows" :data="filteredWorkflows" /> | ||
| </div> | ||
| <TableControls v-if="workflows.length > 0" :table="(dataTable?.getTable()! as Table<TData>)" /> | ||
| </div> | ||
| </template> | ||
| <template #cards> | ||
| <WorkflowsCards :cards="filteredWorkflows" /> | ||
| </template> | ||
| </ViewControl> | ||
| </template> |
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,82 +1,30 @@ | ||
| import { ref, shallowRef } from 'vue' | ||
| import { ref, shallowRef, triggerRef } from 'vue' | ||
| import { acceptHMRUpdate, defineStore } from 'pinia' | ||
| import type { Workflow } from '../types' | ||
|
|
||
| export const useWorkflowsStore = defineStore('workflows', () => { | ||
| const workflows = shallowRef<Workflow[]>( | ||
| [ | ||
| { | ||
| _id: '1', | ||
| name: 'Workflow 1', | ||
| description: 'Workflow 1 description', | ||
| state: 'draft', | ||
| runsCount: 1, | ||
| creator: { | ||
| _id: '1', | ||
| email: '[email protected]', | ||
| photoUrl: 'https://avatars.githubusercontent.com/u/95149637?s=100&v=4', | ||
| }, | ||
| updatedAt: new Date(), | ||
| }, | ||
| { | ||
| _id: '2', | ||
| name: 'Workflow 2', | ||
| description: 'Workflow 2 description', | ||
| state: 'production', | ||
| runsCount: 4, | ||
| creator: { | ||
| _id: '1', | ||
| email: '[email protected]', | ||
| photoUrl: 'https://avatars.githubusercontent.com/u/95149637?s=100&v=4', | ||
| }, | ||
| updatedAt: new Date(), | ||
| }, | ||
| { | ||
| _id: '3', | ||
| name: 'Workflow 3', | ||
| description: 'dsklajdjlkasjdklasj djhsgjdhasghjdjsad sa', | ||
| state: 'production', | ||
| runsCount: 23, | ||
| creator: { | ||
| _id: '1', | ||
| email: '[email protected]', | ||
| photoUrl: 'https://avatars.githubusercontent.com/u/95149637?s=100&v=4', | ||
| }, | ||
| updatedAt: new Date(), | ||
| }, | ||
| { | ||
| _id: '4', | ||
| name: 'Workflow 5', | ||
| description: 'dsklajdjlkasjdklasj', | ||
| state: 'production', | ||
| runsCount: 23, | ||
| creator: { | ||
| _id: '1', | ||
| email: '[email protected]', | ||
| photoUrl: 'https://avatars.githubusercontent.com/u/95149637?s=100&v=4', | ||
| }, | ||
| updatedAt: new Date(), | ||
| }, | ||
| { | ||
| _id: '5', | ||
| name: 'Workflow 5', | ||
| description: 'dsklajdjlkasjdklasj ', | ||
| state: 'draft', | ||
| runsCount: 23, | ||
| creator: { | ||
| _id: '1', | ||
| email: '[email protected]', | ||
| photoUrl: 'https://avatars.githubusercontent.com/u/95149637?s=100&v=4', | ||
| }, | ||
| updatedAt: new Date(), | ||
| }, | ||
| ], | ||
| ) | ||
| const workflows = shallowRef<Workflow[]>([]) | ||
| const workflow = ref<Workflow>() | ||
|
|
||
| function addNewWorkflow(workflow: Omit<Workflow, '_id'>) { | ||
| workflows.value.push(workflow) | ||
| } | ||
|
|
||
| function removeWorkflows(idxs: string[]) { | ||
| idxs.forEach((id) => { | ||
| const index = workflows.value.findIndex(workflow => workflow._id === id) | ||
| if (index !== -1) { | ||
| workflows.value.splice(index, 1) | ||
| triggerRef(workflows) | ||
| } | ||
| }) | ||
| } | ||
|
|
||
| return { | ||
| workflows, | ||
| workflow, | ||
| addNewWorkflow, | ||
| removeWorkflows, | ||
| } | ||
| }) | ||
|
|
||
|
|
||
Oops, something went wrong.