-
Notifications
You must be signed in to change notification settings - Fork 67
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* Added pagination to openapi.yaml * Used projectId from parameter * Implemented fetching jobs * Added pinia store to store projects * Added pagination to jobs overview
- Loading branch information
1 parent
31eb09b
commit cbe6c59
Showing
20 changed files
with
357 additions
and
34 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
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
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
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
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,59 @@ | ||
| <!-- SPDX-License-Identifier: MIT --> | ||
| <template> | ||
| <div class="text-center"> | ||
| <v-container> | ||
| <v-row> | ||
| <v-col class="ma-0 pa-0"> | ||
| <v-container class="ma-0 pa-0"> | ||
| <v-pagination | ||
| v-model="localCurrentPage" | ||
| :length="totalPages" | ||
| :total-visible="7" | ||
| @update:model-value="onPageChange" | ||
| /> | ||
| </v-container> | ||
| </v-col> | ||
| </v-row> | ||
| </v-container> | ||
| </div> | ||
| </template> | ||
| <script lang="ts"> | ||
| import { defineComponent, ref, toRefs, watch } from 'vue' | ||
|
|
||
| interface Props { | ||
| currentPage: number | ||
| totalPages: number | ||
| } | ||
|
|
||
| export default defineComponent({ | ||
| props: { | ||
| currentPage: { | ||
| type: Number, | ||
| required: true, | ||
| }, | ||
| totalPages: { | ||
| type: Number, | ||
| required: true, | ||
| }, | ||
| }, | ||
| emits: ['pageChanged'], | ||
| setup (props: Props, { emit }) { | ||
| const { currentPage } = toRefs(props) | ||
| const localCurrentPage = ref(currentPage.value) | ||
|
|
||
| watch(currentPage, newVal => { | ||
| localCurrentPage.value = newVal | ||
| }) | ||
|
|
||
| function onPageChange (page: number) { | ||
| // calls function from parent component (emit) | ||
| emit('pageChanged', page) | ||
| } | ||
|
|
||
| return { | ||
| localCurrentPage, | ||
| onPageChange, | ||
| } | ||
| }, | ||
| }) | ||
| </script> |
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,143 @@ | ||
| <!-- SPDX-License-Identifier: MIT --> | ||
| <template> | ||
| <v-card class="mr-auto" color="background_paper" width="70%"> | ||
| <v-toolbar color="background_paper" width="70%"> | ||
| <v-toolbar-title>{{ projectId }}</v-toolbar-title> | ||
| <v-btn icon="mdi-refresh" @click="fetchProjectJobs(currentRequestParameters)" /> | ||
| </v-toolbar> | ||
|
|
||
| <div v-if="jobs.length === 0 && !loading"> | ||
| <v-list bg-color="background_paper" lines="two"> | ||
| <v-list-item v-if="error" class="ma-5 background-color" rounded="lg">{{ $t('ERROR_FETCHING_DATA') }}</v-list-item> | ||
| <v-list-item v-else class="ma-5" rounded="lg">{{ $t('NO_JOBS_RUNNED') }}</v-list-item> | ||
| </v-list> | ||
| </div> | ||
|
|
||
| <div v-else> | ||
| <v-table | ||
| class="background-color" | ||
| fixed-header | ||
| height="90%" | ||
| > | ||
| <thead> | ||
| <tr> | ||
| <th class="background-color">{{ $t('HEADER_JOB_TABLE_CREATED') }}</th> | ||
| <th class="background-color">{{ $t('HEADER_JOB_TABLE_STATUS') }}</th> | ||
| <th class="background-color">{{ $t('HEADER_JOB_TABLE_RESULT') }}</th> | ||
| <th class="text-center background-color">{{ $t('HEADER_JOB_TABLE_TRAFFIC_LIGHT') }}</th> | ||
| <th class="text-center background-color">{{ $t('HEADER_JOB_TABLE_REPORT') }}</th> | ||
| <th class="background-color">{{ $t('JOB_TABLE_DOWNLOAD_JOBUUID') }}</th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| <tr | ||
| v-for="job in jobs" | ||
| :key="job.jobUUID" | ||
| class="background-color" | ||
| > | ||
| <td>{{ formatDate(job.created) }}</td> | ||
| <td>{{ job.executionState }}</td> | ||
| <td>{{ job.executionResult }}</td> | ||
| <td class="text-center"><v-icon :class="getTrafficLightClass(job.trafficLight)" icon="mdi-circle" /></td> | ||
| <td class="text-center"><span v-if="job.executionResult === 'OK'"> | ||
| <v-btn class="ma-2">{{ $t('JOB_TABLE_DOWNLOAD_REPORT') }} | ||
| <v-icon end icon="mdi-arrow-down" /> | ||
| </v-btn> | ||
| </span> | ||
| </td> | ||
| <td>{{ job.jobUUID }}</td> | ||
| </tr> | ||
| </tbody> | ||
| </v-table> | ||
| </div> | ||
| <Pagination | ||
| :current-page="jobsObject.page + 1" | ||
| :total-pages="jobsObject.totalPages" | ||
| @page-changed="onPageChange" | ||
| /> | ||
| </v-card> | ||
| </template> | ||
|
|
||
| <script> | ||
| import { onMounted, ref } from 'vue' | ||
| import defaultClient from '@/services/defaultClient' | ||
| import { useRoute } from 'vue-router' | ||
| import { formatDate, getTrafficLightClass } from '@/utils/projectUtils' | ||
|
|
||
| export default { | ||
| name: 'ProjectComponent', | ||
|
|
||
| setup () { | ||
| // loads projectId from route | ||
| const route = useRoute() | ||
| const projectId = route.params.id | ||
|
|
||
| const currentRequestParameters = { | ||
| projectId, | ||
| size: 10, | ||
| page: 0, | ||
| } | ||
|
|
||
| const jobsObject = ref({}) | ||
| const jobs = ref([]) | ||
| const loading = ref(true) | ||
| const error = ref(null) | ||
|
|
||
| async function fetchProjectJobs (requestParameters) { | ||
| try { | ||
| jobsObject.value = await defaultClient.withOtherApi.userListJobsForProject(requestParameters) | ||
| jobs.value = jobsObject.value.content | ||
| } catch (err) { | ||
| error.value = 'ProjectAPI error fetching jobs for project.' | ||
| console.error('ProjectAPI error fetching jobs for project:', err) | ||
| } finally { | ||
| loading.value = false | ||
| } | ||
| } | ||
|
|
||
| function onPageChange (page) { | ||
| // the API page starts by 0 while vue pagination starts with 1 | ||
| currentRequestParameters.page = page - 1 | ||
| fetchProjectJobs(currentRequestParameters) | ||
| } | ||
|
|
||
| onMounted(async () => { | ||
| fetchProjectJobs(currentRequestParameters) | ||
| }) | ||
|
|
||
| return { | ||
| projectId, | ||
| jobsObject, | ||
| jobs, | ||
| loading, | ||
| error, | ||
| currentRequestParameters, | ||
| fetchProjectJobs, | ||
| onPageChange, | ||
| } | ||
| }, | ||
|
|
||
| methods: { | ||
| formatDate, | ||
| getTrafficLightClass, | ||
| }, | ||
| } | ||
| </script> | ||
|
|
||
| <style scoped> | ||
| .background-color{ | ||
| background-color: rgb(var(--v-theme-layer_01)) !important; | ||
| } | ||
| .traffic-light-none{ | ||
| color: rgb(var(--v-theme-layer_01)) !important; | ||
| } | ||
| .traffic-light-red{ | ||
| color: rgb(var(--v-theme-error)) !important; | ||
| } | ||
| .traffic-light-green{ | ||
| color: rgb(var(--v-theme-success)) !important; | ||
| } | ||
| .traffic-light-yellow{ | ||
| color: rgb(var(--v-theme-warning)) !important; | ||
| } | ||
| </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
Oops, something went wrong.