Commit 1e620722 authored by davelopez's avatar davelopez
Browse files

Fix pagination in History selector modal 

And simplify the logic a bit
parent c2aa3b73

client/src/components/History/CurrentHistory/HistoryNavigation.vue

+1 −1
Original line number Diff line number Diff line
@@ -135,7 +135,7 @@ 
        <SelectorModal

            id="selector-history-modal"

            :histories="histories"

            :current-history="history"

            :current-history-id="history.id"

            @selectHistory="$emit('setCurrentHistory', $event)" />



        <CopyModal id="copy-history-modal" :history="history" />

client/src/components/History/Modals/SelectorModal.vue

+18 −32
Original line number Diff line number Diff line
@@ -5,21 +5,20 @@ 
        </b-form-group>



        <b-table

            ref="history-list"

            v-model="currentRows"

            striped

            hover

            sticky-header="50vh"

            primary-key="id"

            :fields="fields"

            :filter="filter"

            :items="histories"

            :items="formattedItems"

            :per-page="perPage"

            :current-page="currentPage"

            :selectable="true"

            select-mode="single"

            selected-variant="success"

            @row-selected="switchToHistory">

            @row-selected="switchToHistory"

            @filtered="onFiltered">

            <template v-slot:cell(tags)="row">

                <stateless-tags :value="row.item.tags" :disabled="true" />

            </template>
@@ -29,7 +28,7 @@ 
        </b-table>



        <template v-slot:modal-footer>

            <b-pagination v-model="currentPage" :total-rows="filteredRowCount" :per-page="perPage"></b-pagination>

            <b-pagination v-model="currentPage" :total-rows="totalRows" :per-page="perPage" />

        </template>

    </b-modal>

</template>
@@ -37,7 +36,6 @@ 
<script>

import { StatelessTags } from "components/Tags";

import UtcDate from "components/UtcDate";

import { debounce } from "underscore";



export default {

    components: {
@@ -45,7 +43,7 @@ export default { 
        UtcDate,

    },

    props: {

        currentHistory: { type: Object, required: true },

        currentHistoryId: { type: String, required: true },

        histories: { type: Array, default: () => [] },

        perPage: { type: Number, required: false, default: 50 },

    },
@@ -53,30 +51,22 @@ export default { 
        return {

            filter: null,

            currentPage: 1,

            currentRows: [],

            totalRows: 0,

        };

    },

    computed: {

        filteredRowCount() {

            return this.currentRows.length;

        },

        selectedIndex() {

            return this.currentRows.findIndex((h) => h.id == this.currentHistory.id);

        formattedItems() {

            return this.histories.map((item) => {

                if (item.id == this.currentHistoryId) {

                    item._rowVariant = "success";

                }

                return item;

            });

        },

    },

    watch: {

        currentRows() {

            this.selectCurrentRow();

        },

        filteredRowCount(newVal, oldVal) {

            if (newVal != oldVal) {

                this.currentPage = 1;

            }

        },

        selectedIndex(idx, oldIdx) {

            if (idx != oldIdx) {

                this.debounceSelectCurrentRow();

            }

        histories(newVal) {

            this.totalRows = newVal.length;

        },

    },

    created() {
@@ -85,7 +75,6 @@ export default { 
            { key: "tags", sortable: true },

            { key: "update_time", label: "Updated", sortable: true },

        ];

        this.debounceSelectCurrentRow = debounce(this.selectCurrentRow, 100);

    },

    methods: {

        switchToHistory(selected) {
@@ -93,12 +82,9 @@ export default { 
                this.$emit("selectHistory", selected[0]);

            }

        },

        selectCurrentRow() {

            const idx = this.selectedIndex;

            const list = this.$refs["history-list"];

            if (list && idx > -1) {

                list.selectRow(idx);

            }

        onFiltered(filteredItems) {

            this.totalRows = filteredItems.length;

            this.currentPage = 1;

        },

    },

};