Skip to content

Commit

Permalink
Merge branch 'feature/npc_filters_extended' into develop
Browse files Browse the repository at this point in the history
  • Loading branch information
Lakeyzer committed Feb 16, 2024
2 parents f46e8bc + 876a19e commit f7f27ef
Show file tree
Hide file tree
Showing 11 changed files with 322 additions and 161 deletions.
2 changes: 2 additions & 0 deletions src/boot/hk-components.js
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ import HkActionRollForm from "../components/hk-components/hk-action-rolls/hk-act
import HkActionRollsTable from "../components/hk-components/hk-action-rolls/hk-action-rolls-table";
import HkActionRollScaling from "../components/hk-components/hk-action-rolls/hk-action-roll-scaling";
import HkPane from "../components/hk-components/hk-pane";
import HkFilter from "../components/hk-components/hk-filter";

export default async ({ Vue }) => {
Vue.component("hk-input", HkInput);
Expand Down Expand Up @@ -52,4 +53,5 @@ export default async ({ Vue }) => {
Vue.component("hk-action-rolls-table", HkActionRollsTable);
Vue.component("hk-action-roll-scaling", HkActionRollScaling);
Vue.component("hk-pane", HkPane);
Vue.component("hk-filter", HkFilter);
};
118 changes: 83 additions & 35 deletions src/components/CopyContent.vue
Original file line number Diff line number Diff line change
Expand Up @@ -9,14 +9,11 @@
toggle-color="primary"
@input="changeCopyResource($event)"
:options="[
{ label: `Custom ${type === 'monster' ? 'NPCs' : type}s`, value: 'custom' },
{ label: `Custom ${type === 'monster' ? 'NPC' : type}s`, value: 'custom' },
{ label: `SRD ${type}s`, value: 'srd' },
]"
/>
<q-input
:dark="$store.getters.theme === 'dark'"
filled
square
<hk-input
:label="
copy_resource === 'custom'
? `Search ${type === 'monster' ? 'NPCs' : type}`
Expand All @@ -31,10 +28,22 @@
:error="!!noResult"
:error-message="noResult"
>
<template v-slot:append>
<q-icon name="fas fa-search" size="xs" @click="search()" />
</template>
</q-input>
<button v-if="copy_resource === 'srd'" slot="before" class="btn btn" @click="show_filter = !show_filter">
<q-icon name="fas fa-filter" size="xs" />
</button>
<button slot="append" class="btn btn-sm btn-clear" @click="search()">
<q-icon name="fas fa-search" size="xs" />
</button>
</hk-input>
<q-slide-transition v-if="copy_resource === 'srd'">
<div v-show="show_filter" class="filter">
<h3>Filter {{ type }}s</h3>
<hk-filter
v-model="filter"
:type="type"
@change="search()" />
</div>
</q-slide-transition>
<q-list :dark="$store.getters.theme === 'dark'">
<q-item
v-for="(result, index) in searchResults"
Expand All @@ -60,6 +69,16 @@
</q-item-section>
</q-item>
</q-list>
<q-pagination
v-if="copy_resource === 'srd' && totalPages > 1"
v-model="page"
:max="totalPages"
:max-pages="5"
flat
direction-links
class="mt-3"
@input="fetchApiContent()"
/>
</div>
</template>

Expand Down Expand Up @@ -112,6 +131,11 @@ export default {
searchResults: [],
noResult: "",
copy_resource_setter: undefined,
show_filter: false,
filter: {},
pageSize: 10,
page: 1,
totalPages: 0,
};
},
computed: {
Expand Down Expand Up @@ -168,11 +192,13 @@ export default {
this.query = "";
this.searchResults = [];
this.noResult = "";
this.page = 1;
this.totalPages = 0;
},
async search() {
if (this.query) {
// CUSTOM
if (this.copy_resource === "custom") {
// CUSTOM
if (this.copy_resource === "custom") {
if (this.query) {
const results = this.custom_content.filter((result) => {
return result.name.toLowerCase().includes(this.query.toLowerCase());
});
Expand All @@ -184,33 +210,49 @@ export default {
this.searchResults = [];
this.noResult = 'Nothing found for "' + this.query + '"';
}
} else {
this.noResult = "";
this.searchResults = [];
}
// API
else {
let data;
}
// API
else {
await this.fetchApiContent();
this.page = 1;
}
},
if (this.type === "monster") {
data = this.fetch_monsters;
} else if (this.type === "item") {
data = this.fetch_api_items;
} else if (this.type === "spell") {
data = this.fetch_api_spells;
}
async fetchApiContent() {
let data;
await data({ query: { search: this.query } }).then((results) => {
if (results.meta.count === 0) {
this.noResult = 'Nothing found for "' + this.query + '"';
} else {
this.noResult = "";
this.searchResults = results.results;
}
});
}
} else {
this.noResult = "";
this.searchResults = [];
if (this.type === "monster") {
data = this.fetch_monsters;
} else if (this.type === "item") {
data = this.fetch_api_items;
} else if (this.type === "spell") {
data = this.fetch_api_spells;
}
},
await data(
{
pageNumber: this.page,
pageSize: this.pageSize,
query: {
search: this.query,
...this.filter
}
}).then((result) => {
if (result.meta.count === 0) {
this.noResult = 'Nothing found for "' + this.query + '"';
this.totalPages = 0;
} else {
this.noResult = "";
this.searchResults = result.results;
this.totalPages = Math.ceil(result.meta.count / this.pageSize);
}
}
);
},
/**
* Emit the selected result
Expand Down Expand Up @@ -264,4 +306,10 @@ export default {
.q-item {
margin-bottom: 1px;
}
.filter {
padding: 20px;
margin-bottom: 15px;
background-color: $neutral-7;
border-radius: $border-radius;
}
</style>
6 changes: 4 additions & 2 deletions src/components/combat/Turns.vue
Original file line number Diff line number Diff line change
Expand Up @@ -107,8 +107,10 @@
<template v-if="!demo">
{{ encounter.name }}
</template>
<router-link v-if="!userId" to="/sign-up" class="btn">Create Account</router-link>
<router-link v-else to="/content" class="btn">Create custom content</router-link>
<template v-else>
<router-link v-if="!userId" to="/sign-up" class="btn">Create Account</router-link>
<router-link v-else to="/content" class="btn">Create custom content</router-link>
</template>
</span>
</div>

Expand Down
135 changes: 135 additions & 0 deletions src/components/hk-components/hk-filter.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,135 @@
<template>
<div class="hk-filter">
<template v-if="type === 'monster'">
<hk-select
class="mb-3"
label="Type"
v-model="filter.types"
use-chips
multiple
clearable
:options="monster_types"
/>
<hk-select
class="mb-3"
label="Size"
v-model="filter.sizes"
use-chips
multiple
clearable
:options="monster_sizes"
/>

<strong class="block mb-5">Challenge rating</strong>
<q-range
v-model="cr"
label-always
:min="0"
:max="30"
class="px-2"
@input="setCR"
/>
</template>
<template v-if="type === 'spell'">
<hk-select
:dark="$store.getters.theme !== 'light'"
filled
square
class="mb-3"
label="School"
v-model="filter.schools"
use-chips
multiple
clearable
map-options
emit-value
:options="spell_schools"
/>

<!-- Level -->
<strong class="block mb-5">Level</strong>
<q-range
v-model="levels"
class="px-2"
label-always
:min="0"
:max="9"
:left-label-value="minLevelMarker"
:right-label-value="maxLevelMarker"
@input="setLevels"
/>
</template>
</div>
</template>

<script>
import { monsterMixin } from "src/mixins/monster.js";
import { spell_schools } from "src/utils/spellConstants";
import numeral from "numeral";
export default {
name: "hk-filter",
mixins: [monsterMixin],
props: {
value: {
type: Object,
required: true,
},
type: {
type: String,
default: "monster"
},
},
data() {
return {
spell_schools: spell_schools,
cr: this.value?.challenge_ratings || { min: 0, max: 30 },
levels: this.value?.levels || { min: 0, max: 9 },
}
},
computed: {
filter: {
get() {
const filter = this.value;
return filter;
},
set(newVal) {
this.$emit("input", newVal);
this.$emit("change");
}
},
minLevelMarker() {
return this.levels?.min ? numeral(this.levels.min).format("0o") : "Cantrip";
},
maxLevelMarker() {
return this.levels?.max ? numeral(this.levels.max).format("0o") : "Cantrip";
},
},
watch: {
value: {
deep: true,
handler() {
this.$emit("change");
}
}
},
methods: {
setLevels(value) {
if(!this.filter.levels) {
this.$set(this.filter, "levels", {});
}
this.$set(this.filter.levels, "min", value.min);
this.$set(this.filter.levels, "max", value.max);
this.$forceUpdate();
},
setCR(value) {
if(!this.filter.challenge_ratings) {
this.$set(this.filter, "challenge_ratings", {});
}
this.$set(this.filter.challenge_ratings, "min", value.min);
this.$set(this.filter.challenge_ratings, "max", value.max);
this.$forceUpdate();
}
}
};
</script>
14 changes: 12 additions & 2 deletions src/services/api/monsters.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import axios from "axios";
import { range } from "lodash";

const MONSTERS_REF = "/monsters";

Expand Down Expand Up @@ -29,8 +30,17 @@ export class monsterServices {
queryParams.push(`type[]=${type}`);
}
}
if(query.challenge_ratings && query.challenge_ratings.length) {
for(const cr of query.challenge_ratings) {
if(query.sizes && query.sizes.length) {
for(const size of query.sizes) {
queryParams.push(`size[]=${size}`);
}
}
if(query.challenge_ratings) {
let challenge_ratings = range(query.challenge_ratings.min, query.challenge_ratings.max+1);
if(query.challenge_ratings.min === 0) {
challenge_ratings = challenge_ratings.concat([0.125, 0.25, 0.5]);
}
for(const cr of challenge_ratings) {
queryParams.push(`challenge_rating[]=${cr}`);
}
}
Expand Down
8 changes: 5 additions & 3 deletions src/services/api/spells.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import axios from "axios";
import { range } from "lodash";

const SPELLS_REF = "/spells";

Expand Down Expand Up @@ -41,9 +42,10 @@ export class spellServices {
queryParams.push(`classes[]=${cls}`);
}
}
if (query.levels && query.levels.length) {
for (const lvl of query.levels) {
queryParams.push(`level[]=${lvl}`);
if (query.levels) {
const levels = range(query.levels.min, query.levels.max + 1);
for (const level of levels) {
queryParams.push(`level[]=${level}`);
}
}
params += `&${queryParams.join("&")}`;
Expand Down
6 changes: 4 additions & 2 deletions src/views/Compendium/Items.vue
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,11 @@
filled square
debounce="300"
clearable
placeholder="Search">
placeholder="Search"
@keyup.enter="filter()"
@clear="filter()">
<q-icon slot="append" name="search" />
<button slot="after" class="btn" @click="filter()">Filter</button>
<button slot="after" class="btn" @click="filter()">Search</button>
</q-input>

<q-table
Expand Down
Loading

0 comments on commit f7f27ef

Please sign in to comment.