129 lines
4.1 KiB
Vue
129 lines
4.1 KiB
Vue
<template>
|
|
<div>
|
|
<div class="help-container">
|
|
<TheSelector />
|
|
<TheGrouper
|
|
v-on:groupingChanged="onGroupingChanged($event)"
|
|
v-show="!this.isSearching" />
|
|
</div>
|
|
<div class="scripts">
|
|
<div v-if="!isSearching || searchHasMatches">
|
|
<CardList v-if="this.showCards" />
|
|
<div v-else-if="this.showList" class="tree">
|
|
<div v-if="this.isSearching" class="search-query">
|
|
Searching for "{{this.searchQuery | threeDotsTrim}}"</div>
|
|
<ScriptsTree />
|
|
</div>
|
|
</div>
|
|
<div v-else class="search-no-matches">
|
|
Sorry, no matches for "{{this.searchQuery | threeDotsTrim}}" 😞
|
|
Feel free to extend the scripts <a :href="repositoryUrl" target="_blank" class="child github" >here</a>.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { Component, Prop, Vue, Emit } from 'vue-property-decorator';
|
|
import { Category } from '@/domain/Category';
|
|
import { StatefulVue } from '@/presentation/StatefulVue';
|
|
import { Grouping } from './Grouping/Grouping';
|
|
import { IFilterResult } from '@/application/State/Filter/IFilterResult';
|
|
import TheGrouper from '@/presentation/Scripts/Grouping/TheGrouper.vue';
|
|
import TheSelector from '@/presentation/Scripts/Selector/TheSelector.vue';
|
|
import ScriptsTree from '@/presentation/Scripts/ScriptsTree/ScriptsTree.vue';
|
|
import CardList from '@/presentation/Scripts/Cards/CardList.vue';
|
|
|
|
|
|
/** Shows content of single category or many categories */
|
|
@Component({
|
|
components: {
|
|
TheGrouper,
|
|
TheSelector,
|
|
ScriptsTree,
|
|
CardList,
|
|
},
|
|
filters: {
|
|
threeDotsTrim(query: string) {
|
|
const threshold = 30;
|
|
if (query.length <= threshold - 3) {
|
|
return query;
|
|
}
|
|
return `${query.substr(0, threshold)}...`;
|
|
},
|
|
},
|
|
})
|
|
export default class TheScripts extends StatefulVue {
|
|
public showCards = false;
|
|
public showList = false;
|
|
public repositoryUrl = '';
|
|
private searchQuery = '';
|
|
private isSearching = false;
|
|
private searchHasMatches = false;
|
|
|
|
private currentGrouping: Grouping;
|
|
|
|
public async mounted() {
|
|
const state = await this.getCurrentStateAsync();
|
|
this.repositoryUrl = state.app.repositoryUrl;
|
|
state.filter.filterRemoved.on(() => {
|
|
this.isSearching = false;
|
|
this.updateGroups();
|
|
});
|
|
state.filter.filtered.on((result: IFilterResult) => {
|
|
this.searchQuery = result.query;
|
|
this.isSearching = true;
|
|
this.searchHasMatches = result.hasAnyMatches();
|
|
this.updateGroups();
|
|
});
|
|
}
|
|
|
|
public onGroupingChanged(group: Grouping) {
|
|
this.currentGrouping = group;
|
|
this.updateGroups();
|
|
}
|
|
|
|
private updateGroups(): void {
|
|
this.showCards = !this.isSearching && this.currentGrouping === Grouping.Cards;
|
|
this.showList = this.isSearching || this.currentGrouping === Grouping.None;
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import "@/presentation/styles/colors.scss";
|
|
@import "@/presentation/styles/fonts.scss";
|
|
.scripts {
|
|
margin-top:10px;
|
|
.search-no-matches {
|
|
word-break:break-word;
|
|
color: $white;
|
|
text-transform: uppercase;
|
|
color: $light-gray;
|
|
font-size: 1.5em;
|
|
background-color: $slate;
|
|
padding:5%;
|
|
text-align:center;
|
|
> a {
|
|
color: $gray;
|
|
}
|
|
}
|
|
.tree {
|
|
padding-left: 3%;
|
|
padding-top: 15px;
|
|
padding-bottom: 15px;
|
|
.search-query {
|
|
display: flex;
|
|
justify-content: center;
|
|
color: $gray;
|
|
}
|
|
}
|
|
}
|
|
|
|
.help-container {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
}
|
|
</style>
|