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

Furniture Model Proposed Update #22

Closed
wants to merge 7 commits into from
Closed

Furniture Model Proposed Update #22

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
c33ad9e
test git repo setup
crencricca Nov 8, 2019
8be32c4
remove test; success
crencricca Nov 8, 2019
e5ce0f8
Merge branch 'master' of https://github.com/n2n-milstein/inventory
crencricca Jan 2, 2020
359b50b
add basic template for filter bar
crencricca Jan 8, 2020
67f6c2c
Add button change when filter applied or cleared
crencricca Jan 8, 2020
61d43a5
Filter works with furniture type ONLY
crencricca Jan 8, 2020
10b3af5
proposed changes for furniture model
crencricca Jan 13, 2020
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
226 changes: 226 additions & 0 deletions src/components/FiltersBar.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,226 @@
<template>
<v-toolbar flat dense class="transparent toolbar">
<v-toolbar-items>
<v-layout row wrap>
<v-flex pr-3>
<v-menu
v-model="showTypes"
:close-on-content-click="false"
:nudge-width="20"
:nudge-bottom="10"
offset-y
>
<template v-slot:activator="{ on }">
<v-btn
color="primary"
round
v-on="on"
:flat="!typeSubmit"
:outline="!typeSubmit"
>
Type
</v-btn>
</template>
<v-card>
<v-card-text>
<v-radio-group v-model="typeSelect" :mandatory="false">
<v-radio
v-for="t in furnType"
:key="t"
:label="`${t}`"
:value="t"
></v-radio>
</v-radio-group>
</v-card-text>
<v-card-actions>
<v-btn
color="primary"
:value="submit"
flat
small
@click="applyFilter('type')"
>Apply Type</v-btn
>
<v-btn
color="error"
:value="submit"
flat
small
@click="clearFilter('type')"
>Clear</v-btn
>
</v-card-actions>
</v-card>
</v-menu>
</v-flex>
<v-flex pr-3>
<v-menu
v-model="showStatus"
:close-on-content-click="false"
:nudge-width="20"
:nudge-bottom="10"
offset-y
>
<template v-slot:activator="{ on }">
<v-btn
color="primary"
v-on="on"
round
:flat="!statusSubmit"
:outline="!statusSubmit"
>
Status
</v-btn>
</template>
<v-card>
<v-card-text>
<v-radio-group v-model="statusSelect" :mandatory="false">
<v-radio
v-for="s in furnStatus"
:key="s"
:label="`${s}`"
:value="s"
></v-radio>
</v-radio-group>
</v-card-text>
<v-card-actions>
<v-btn
color="primary"
:value="submit"
flat
small
@click="applyFilter('status')"
>Apply Status</v-btn
>
<v-btn
color="error"
:value="submit"
flat
small
@click="clearFilter('status')"
>Clear</v-btn
>
</v-card-actions>
</v-card>
</v-menu>
</v-flex>
<v-flex pr-3>
<v-menu
v-model="showMaterial"
:close-on-content-click="false"
:nudge-width="70"
:nudge-bottom="10"
offset-y
>
<template v-slot:activator="{ on }">
<v-btn
color="primary"
round
v-on="on"
:flat="!matSubmit"
:outline="!matSubmit"
>
Material
</v-btn>
</template>
<v-card>
<v-card-text>
<v-radio-group v-model="matSelect" :mandatory="false">
<v-radio
v-for="m in furnMaterial"
:key="m"
:label="`${m}`"
:value="m"
></v-radio>
</v-radio-group>
</v-card-text>
<v-card-actions>
<v-btn
color="primary"
:value="submit"
flat
small
@click="applyFilter('material')"
>Apply Material</v-btn
>
<v-btn
color="error"
:value="submit"
flat
small
@click="clearFilter('material')"
>Clear</v-btn
>
</v-card-actions>
</v-card>
</v-menu>
</v-flex>
</v-layout>
</v-toolbar-items>
</v-toolbar>
</template>

<script lang="ts">
import Vue from "vue";
import { Prop, Component } from "vue-property-decorator";
import { FClass, Material, Status, Furniture } from "@/data/Furniture";

@Component
export default class FiltersBar extends Vue {
@Prop()
search!: string;

furnType = ["Bed", "Chair", "Couch", "Table", "Dresser"];
furnStatus = ["Donor", "On Truck", "Shed", "Delivered", "Unknown"];
furnMaterial = ["Wood", "Glass", "Metal", "Plastic"];

showTypes = false;
showStatus = false;
showMaterial = false;

typeSelect = "";
statusSelect = "";
matSelect = "";

typeSubmit = false;
statusSubmit = false;
matSubmit = false;

// TODO: Should only apply if a value is selected
applyFilter(btn: string) {
if (btn == "type") {
this.typeSubmit = true;
this.$emit("filter", this.typeSelect);
} else if (btn == "status") {
this.statusSubmit = true;
} else if (btn == "material") {
this.matSubmit = true;
}
// TODO: Modify search function so works with stacked filters and ignores whitespace
}

clearFilter(btn: string) {
if (btn == "type") {
this.typeSubmit = false;
this.typeSelect = "";
this.$emit("filter", this.typeSelect);
} else if (btn == "status") {
this.statusSubmit = false;
} else if (btn == "material") {
this.matSubmit = false;
}
}
}
</script>

<style lang="scss" scoped>
.overlay {
z-index: 100;
opacity: 100%;
}

// .toolbar >>> .v-toolbar__content {
// padding: 10%;
// margin: 10%;
// }
</style>
Loading