searchanddisplace-core/resources/js/components/Searchers/Create.vue

<template>
    <div id="searchers-create" :class="{'is-defining': isDefining,}">

        <!-- <h1> {{ searcher.id ? 'Edit' : 'New' }} searcher </h1> -->

        <Card>
            <template #title>
                {{ searcher.id ? 'Edit' : 'New' }} searcher
            </template>
            <template #content>
                <div class="p-fluid p-formgrid p-grid">
                    <div class="p-field p-col-12 p-md-6">
                        <label for="searcher-">Searcher name</label>
                        <InputText v-model="name"
                            type="text"
                            placeholder="Enter searcher name"
                            class="input"
                            id="searcher-name"
                            name="searcher-name">
                        </InputText>
                    </div>
                    <div class="p-field p-col-12 p-md-6">
                        <label for="lastname">Default tag</label>
                        <InputText v-model="tag"
                                type="text"
                                placeholder="Enter the default tag"
                                class="input"
                                id="searcher-default-tag"
                                name="searcher-default-tag">
                        </InputText>
                    </div>
                    <div class="p-field p-col-12">
                        <label for="address">Description</label>
                        <Textarea
                            v-model="description"
                            rows="5"
                            placeholder="Enter searcher description"
                            id="searcher-description"
                            name="searcher-description"
                        />
                    </div>
                </div>
                <Message severity="info" v-if="standalone">
                    <p>A searcher may contain multiple compounded searchers on multiple rows and columns.</p>
                    <p>Each searcher in a row is extending the searching criteria on the content resulted from the
                        previous row searchers.</p>
                </Message>
            </template>
            <template #footer>
                <Button @click="onSave" :disabled=" ! name || rows.length === 0">
                    Save
                </Button>
            </template>
        </Card>

        <div v-for="(row, rowIndex) in rows"
             :key="`row-${rowIndex}`"
             class="searchers-row flex-row">
            <div v-for="(searcher, columnIndex) in row"
                 :key="`column-${columnIndex}`"
                 class="searcher box">
                <searcher-show :searcher="searcher"
                               :editable="true"
                               :standalone="false"
                               @deleted="onRemoveItem(rowIndex, columnIndex)">
                </searcher-show>
            </div>

            <add-box :ignore-searcher-ids="searcher.id ? [searcher.id] : []"
                     @added="(searcher) => { onSearcherAdded(searcher, rowIndex); }">
            </add-box>
        </div>

        <div class="searchers-row flex-row">
            <add-box @added="onNewRowSearcherAdded">
            </add-box>
        </div>
    </div>
</template>

<script lang="ts">
    import { eventBus } from "@/app";
import {Component, Prop, Vue} from "vue-property-decorator";
    import AddBox from './AddBox.vue';
    import SearcherShow from './Show.vue';

    @Component({
        name: 'SearcherCreate',

        components: {
            AddBox,
            SearcherShow,
        },
    })
    export default class Create extends Vue {
        private id: String = '';
        private name: String = '';
        private description: String = '';
        private tag: String = '';
        private rows: Array<Array<any>> = [];

        @Prop({
            default: () => {
                return {
                    id: '',
                    name: '',
                    description: '',
                    tag: '',
                    rows: [],
                };
            }
        })
        public readonly searcher!: any;

        @Prop({default: true})
        public readonly standalone!: boolean;

        @Prop({default: true})
        public readonly isDefining!: boolean;

        @Prop({default: ''})
        public readonly definedSearcher!: string;

        onNewRowSearcherAdded(searcher: Object) {
            const length = this.rows.push([]);

            this.onSearcherAdded(searcher, length - 1);
        }

        async onSearcherAdded(searcher: any, rowIndex: number) {
            try {
                const { data } = await (window as any).axios.get(`/searchers/${searcher.id}`);

                this.rows[rowIndex].push(data.searcher);
            } catch (e) {

            }
        }

        onSave() {
            if (this.standalone) {
                this.save();

                return;
            }

            const updatedSearcher = Object.assign(this.searcher, {
                name: this.name,
                description: this.description,
                tag: this.tag,
                rows: this.rows,
            });

            this.$emit('updated', updatedSearcher);
        }

        async save() {
            try {
                const searcher = this.id ? await this.update() : await this.create();

                if (this.isDefining) {
                    this.$emit('defined', searcher);

                    return;
                }

                window.location.href = `/searchers/${searcher.id}`;
            } catch (e) {
                console.log(e);
                console.log('Something went wrong.');
            }
        }

        async update() {
            const { data } = await (window as any).axios.put(`/searchers/${this.id}`, {
                name: this.name,
                description: this.description,
                tag: this.tag,
                rows: this.rows,
            });

            return data.searcher;
        }

        async create() {
            const { data } = await (window as any).axios.post('/searchers', {
                name: this.name,
                description: this.description,
                tag: this.tag,
                rows: this.rows,
            });

            return data.searcher;
        }

        onRemoveItem(rowIndex: number, columnIndex: number) {
            if (
                this.rows[rowIndex][columnIndex].hasOwnProperty('rows') &&
                this.rows[rowIndex][columnIndex].rows.length === 0
            ) {
                this.$toast.add({
                    severity: 'info',
                    summary: `${this.searcher.name} searcher deleted`,
                    detail: 'The searcher has been deleted as well because it does not have any searching data..',
                    life: 4000,
                });
            }

            this.rows[rowIndex].splice(columnIndex, 1);

            if (this.rows[rowIndex].length === 0) {
                this.rows.splice(rowIndex, 1);
            }
        }

        public async changeRoute(url: string) {
            if (this.rows.length > 0) {
                if (this.name === '' || this.name === undefined) {
                    this.name = 'Unnamed searcher - ' + Date.now();
                }

                const searcher = this.id ? await this.update() : await this.create();
            }

            window.location.href = url;
        }

        created() {
            // Editing.
            if (this.searcher.id) {
                this.id = this.searcher.id;
                this.rows = this.searcher.rows;
                this.name = this.searcher.name;
                this.description = this.searcher.description;
                this.tag = this.searcher.tag;
            }

            if (this.isDefining && this.definedSearcher) {
                this.name = this.definedSearcher;
                this.description = '';

                this.rows.push([
                    {
                        expression: this.definedSearcher,
                    },
                ]);
            }

            eventBus.$on('changeRoute', this.changeRoute);
        }
    };
</script>