Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Dashboard: set filters to be as text field #656

Merged
merged 1 commit into from
Jun 19, 2023
Merged

Dashboard: set filters to be as text field #656

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
56 changes: 19 additions & 37 deletions packages/dashboard/src/explorer/components/NodeFilter.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,31 +1,23 @@
<template>
<v-card flat color="transparent">
<v-subheader>{{ label.toLocaleUpperCase() }}</v-subheader>
<v-combobox
v-model="items"
:items="_values"
<v-text-field
v-model="item"
chips
clearable
:label="placeholder"
:multiple="multiple"
solo
type="text"
@input.native="validated($event.srcElement.value, filterKey)"
>
<template v-slot:selection="{ attrs, item, select, selected, index }">
<v-chip v-bind="attrs" :input-value="selected" :close="multiple" @click="select" @click:close="remove(index)">
<strong>{{ item }}</strong>
</v-chip>
</template>
</v-combobox>
:rules="[validated(item, filterKey)]"
/>
<v-alert dense type="error" v-if="errorMsg">
{{ errorMsg }}
</v-alert>
</v-card>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import { Component, Prop, Vue } from "vue-property-decorator";

import { ActionTypes } from "../store/actions";
import { MutationTypes } from "../store/mutations";
Expand All @@ -37,28 +29,15 @@ export default class InFilter extends Vue {
@Prop({ required: true }) placeholder!: string;
@Prop({ required: true }) filterKey!: string;
@Prop() value?: string[];

item = "";
invalid = false;

get multiple() {
return this.filterKey == "farm_ids";
}

get _values(): (string | number)[] {
// values are the suggested options; not needed for now.
return [];
}

get items(): string[] {
return this.$store.getters["explorer/getNodesFilter"][this.filterKey];
}

set items(value: string[]) {
setItem(value: string) {
if (!this.invalid) {
// add the current filter key to the query.
this.$store.commit("explorer/" + MutationTypes.SET_NODES_FILTER, {
key: this.filterKey,
value,
value: [value],
});
// reset to the first page
this.$store.commit("explorer/" + MutationTypes.SET_NODES_TABLE_PAGE_NUMBER, 1);
Expand All @@ -74,17 +53,20 @@ export default class InFilter extends Vue {
this.$store.dispatch(ActionTypes.REQUEST_NODES);
}

@Watch("errorMsg", { immediate: true }) onErrorMsg(value: string) {
if (value != "") {
this.invalid = true;
} else {
this.invalid = false;
}
}

errorMsg: any = "";
validated(value: string, key: string): string {
if (!value) {
// reset filter
this.setItem("");
return (this.errorMsg = "");
}
this.errorMsg = inputValidation(value, key);
if (!this.errorMsg) {
this.invalid = false;
this.setItem(value);
} else {
this.invalid = true;
}
return this.errorMsg;
}

Expand Down