-
Notifications
You must be signed in to change notification settings - Fork 902
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #8725 from rundeck/enh/job-list-page-nextui-job-fi…
…lters RUN-2081: nextUI: job list page: add job filters
- Loading branch information
Showing
12 changed files
with
436 additions
and
60 deletions.
There are no files selected for viewing
77 changes: 77 additions & 0 deletions
77
rundeckapp/grails-spa/packages/ui-trellis/src/app/pages/job/browse/JobFilterSaveModal.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,77 @@ | ||
| <template> | ||
| <modal v-model="visible" :title="$t('job.list.filter.save.modal.title')"> | ||
| <div class="form-horizontal"> | ||
| <div class="form-group"> | ||
| <label class="col-sm-2 control-label" for="jobFilter"> | ||
| {{ $t("jobquery.title.jobFilter") }}: | ||
| </label> | ||
| <div class="col-sm-10"> | ||
| <input | ||
| type="text" | ||
| name="jobFilter" | ||
| id="jobFilter" | ||
| v-model="filterName" | ||
| class="form-control" | ||
| /> | ||
| </div> | ||
| </div> | ||
| <div class="errors" v-if="error"> | ||
| {{error}} | ||
| </div> | ||
| </div> | ||
| <template #footer> | ||
| <btn @click="doClose"> | ||
| {{ $t("cancel") }} | ||
| </btn> | ||
| <btn type="primary" @click="doSave" :disabled="!filterName"> | ||
| {{ $t("job.list.filter.save.button") }} | ||
| </btn> | ||
| </template> | ||
| </modal> | ||
| </template> | ||
|
|
||
| <script lang="ts"> | ||
| import { defineComponent, ref } from "vue"; | ||
| export default defineComponent({ | ||
| name: "JobFilterSaveModal", | ||
| props: { | ||
| modelValue: { | ||
| type: Boolean, | ||
| required: true, | ||
| }, | ||
| error: { | ||
| type: String, | ||
| default: false, | ||
| }, | ||
| }, | ||
| emits: ["save", "update:modelValue"], | ||
| setup(props) { | ||
| return { | ||
| visible: ref(props.modelValue), | ||
| filterName: ref(""), | ||
| }; | ||
| }, | ||
| watch: { | ||
| visible(value) { | ||
| this.$emit("update:modelValue", value); | ||
| }, | ||
| modelValue(value) { | ||
| this.visible = value; | ||
| }, | ||
| }, | ||
| methods: { | ||
| doClose() { | ||
| this.visible = false; | ||
| this.$emit("update:modelValue", false); | ||
| }, | ||
| doSave() { | ||
| this.$emit("save", this.filterName); | ||
| this.filterName='' | ||
| this.doClose() | ||
| }, | ||
| }, | ||
| }); | ||
| </script> | ||
|
|
||
| <style scoped lang="scss"></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
88 changes: 88 additions & 0 deletions
88
rundeckapp/grails-spa/packages/ui-trellis/src/app/pages/job/browse/JobPageFiltersPopup.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,88 @@ | ||
| <template> | ||
| <dropdown v-if="filters"> | ||
| <btn class="dropdown-toggle" size="sm"> | ||
| Filters | ||
| <i class="caret" /> | ||
| </btn> | ||
| <template #dropdown> | ||
| <template v-if="jobPageStore.selectedFilter"> | ||
| <li> | ||
| <a role="button" @click="deleteSelectedFilter"> | ||
| <b class="glyphicon glyphicon-trash"></b> | ||
| {{ | ||
| $t("job.list.filter.delete.filter.link.text", [ | ||
| jobPageStore.selectedFilter, | ||
| ]) | ||
| }} | ||
| </a> | ||
| </li> | ||
| <li role="separator" class="divider"></li> | ||
| </template> | ||
| <li class="dropdown-header"> | ||
| <i class="glyphicon glyphicon-filter"></i> | ||
| {{$t('saved.filters')}} | ||
| </li> | ||
| <li v-for="item in filters" :key="item.name"> | ||
| <a | ||
| role="button" | ||
| :class="{ active: item.active }" | ||
| @click.prevent="selectFilter(item.name)" | ||
| > | ||
| <i | ||
| class="glyphicon glyphicon-check" | ||
| v-if="jobPageStore.selectedFilter === item.name" | ||
| > | ||
| </i> | ||
| {{ item.name }} | ||
| </a> | ||
| </li> | ||
| </template> | ||
| </dropdown> | ||
| </template> | ||
|
|
||
| <script lang="ts"> | ||
| import { | ||
| JobListFilter, | ||
| JobListFilterStore, | ||
| JobListFilterStoreInjectionKey, | ||
| } from "@/library/stores/JobListFilterStore"; | ||
| import { | ||
| JobPageStore, | ||
| JobPageStoreInjectionKey, | ||
| } from "@/library/stores/JobPageStore"; | ||
| import { defineComponent, inject, ref } from "vue"; | ||
| export default defineComponent({ | ||
| name: "JobPageFiltersPopup", | ||
| emits: ["select","delete"], | ||
| setup(props) { | ||
| const jobListFilterStore: JobListFilterStore = inject( | ||
| JobListFilterStoreInjectionKey | ||
| ) as JobListFilterStore; | ||
| const jobPageStore: JobPageStore = inject( | ||
| JobPageStoreInjectionKey | ||
| ) as JobPageStore; | ||
| return { | ||
| jobListFilterStore, | ||
| jobPageStore, | ||
| filters: ref<JobListFilter[]>([]), | ||
| }; | ||
| }, | ||
| methods: { | ||
| selectFilter(name: string) { | ||
| this.$emit("select", name); | ||
| }, | ||
| deleteSelectedFilter(){ | ||
| this.$emit("delete", this.jobPageStore.selectedFilter); | ||
| this.filters = this.jobListFilterStore.getFilters(); | ||
| } | ||
| }, | ||
| computed: {}, | ||
| async mounted() { | ||
| await this.jobListFilterStore.load(); | ||
| this.filters = this.jobListFilterStore.getFilters(); | ||
| }, | ||
| }); | ||
| </script> | ||
|
|
||
| <style scoped lang="scss"></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
Oops, something went wrong.