restructure presentation layer

- Move most GUI related code to /presentation - Move components to /components (separate from bootstrap and style) - Move shared components helpers to /components/shared - Rename Bootstrapping to bootstrapping to enforce same naming convention in /presentation
2021-03-07 19:33:05 +01:00
parent 646db90585
commit f3c7413f52
67 changed files with 100 additions and 71 deletions
--- a/src/presentation/components/Scripts/TheScriptsList.vue
+++ b/src/presentation/components/Scripts/TheScriptsList.vue
@@ -0,0 +1,159 @@
+<template>
+    <div class="scripts">
+        <div v-if="!isSearching">
+            <CardList v-if="grouping === Grouping.Cards"/>
+            <div class="tree" v-if="grouping === Grouping.None">
+                <ScriptsTree />
+            </div>
+        </div>
+        <div v-else> <!-- Searching -->
+            <div class="search">
+                <div class="search__query">
+                    <div>Searching for "{{this.searchQuery | threeDotsTrim}}"</div>
+                    <div class="search__query__close-button">
+                        <font-awesome-icon
+                            :icon="['fas', 'times']" 
+                            v-on:click="clearSearchQueryAsync()"/>
+                    </div>
+                </div>
+                <div v-if="!searchHasMatches" class="search-no-matches">
+                    <div>Sorry, no matches for "{{this.searchQuery | threeDotsTrim}}" 😞</div>
+                    <div>Feel free to extend the scripts <a :href="repositoryUrl" target="_blank" class="child github" >here</a> ✨</div>
+                </div>
+            </div>
+            <div v-if="searchHasMatches" class="tree tree--searching">
+                <ScriptsTree />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import TheGrouper from '@/presentation/components/Scripts/Menu/Grouping/TheGrouper.vue';
+import ScriptsTree from '@/presentation/components/Scripts/ScriptsTree/ScriptsTree.vue';
+import CardList from '@/presentation/components/Scripts/Cards/CardList.vue';
+import { Component, Prop } from 'vue-property-decorator';
+import { StatefulVue } from '@/presentation/components/Shared/StatefulVue';
+import { Grouping } from '@/presentation/components/Scripts/Menu/Grouping/Grouping';
+import { IFilterResult } from '@/application/Context/State/Filter/IFilterResult';
+import { ICategoryCollectionState } from '@/application/Context/State/ICategoryCollectionState';
+import { ApplicationFactory } from '@/application/ApplicationFactory';
+
+/** Shows content of single category or many categories */
+@Component({
+components: {
+    TheGrouper,
+    ScriptsTree,
+    CardList,
+},
+filters: {
+    threeDotsTrim(query: string) {
+        const threshold = 30;
+        if (query.length <= threshold - 3) {
+            return query;
+        }
+        return `${query.substr(0, threshold)}...`;
+    },
+},
+})
+export default class TheScriptsList extends StatefulVue {
+    @Prop() public grouping: Grouping;
+
+    public repositoryUrl = '';
+    public Grouping = Grouping; // Make it accessible from the view
+    public searchQuery = '';
+    public isSearching = false;
+    public searchHasMatches = false;
+
+    public async created() {
+        const app = await ApplicationFactory.Current.getAppAsync();
+        this.repositoryUrl = app.info.repositoryWebUrl;
+    }
+    public async clearSearchQueryAsync() {
+        const context = await this.getCurrentContextAsync();
+        const filter = context.state.filter;
+        filter.removeFilter();
+    }
+
+    protected handleCollectionState(newState: ICategoryCollectionState): void {
+        this.events.unsubscribeAll();
+        this.subscribeState(newState);
+    }
+
+    private subscribeState(state: ICategoryCollectionState) {
+        this.events.register(
+            state.filter.filterRemoved.on(() => {
+                this.isSearching = false;
+            }),
+            state.filter.filtered.on((result: IFilterResult) => {
+                        this.searchQuery = result.query;
+                        this.isSearching = true;
+                        this.searchHasMatches = result.hasAnyMatches();
+            }),
+        );
+    }
+}
+</script>
+
+<style scoped lang="scss">
+@import "@/presentation/styles/colors.scss";
+@import "@/presentation/styles/fonts.scss";
+@import "@/presentation/styles/media.scss";
+
+$inner-margin: 4px;
+
+.scripts {
+    margin-top: $inner-margin;
+    @media screen and (min-width: $vertical-view-breakpoint) { // so the current code is always visible
+        overflow: auto;
+        max-height: 70vh;
+    }
+    .tree {
+        padding-left: 3%;
+        padding-top: 15px;
+        padding-bottom: 15px;
+        &--searching {
+            padding-top: 0px;
+        }
+    }
+}
+
+.search {
+    display: flex;
+    flex-direction: column;
+    background-color: $slate;
+    &__query {
+        display: flex;
+        justify-content: center;
+        flex-direction: row;
+        align-items: center;
+        margin-top: 1em;
+        color: $gray;
+        &__close-button {
+            cursor: pointer;
+            font-size: 1.25em;
+            margin-left: 0.25rem;
+            &:hover {
+                opacity: 0.9;
+            }
+        }
+    }
+    &-no-matches {
+        display:flex;
+        flex-direction: column;
+        word-break:break-word;
+        text-transform: uppercase;
+        color: $light-gray;
+        font-size: 1.5em;
+        padding:10px;
+        text-align:center;
+        > div {
+            padding-bottom:13px;
+        }
+        a {
+            color: $gray;
+        }
+    }
+}
+
+</style>