View | Details | Raw Unified | Return to bug 39320
Collapse All | Expand All

(-)a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ModuleDashboard/ModuleDashboard.vue (-17 / +48 lines)
Lines 20-29 Link Here
20
            >
20
            >
21
                <component
21
                <component
22
                    v-for="(widget, index) in selectedWidgetsLeft"
22
                    v-for="(widget, index) in selectedWidgetsLeft"
23
                    :key="widget.name"
23
                    :key="widget.name + '-' + index"
24
                    :is="widget"
24
                    :is="widget"
25
                    display="dashboard"
25
                    display="dashboard"
26
                    dashboardColumn="left"
26
                    dashboardColumn="left"
27
                    :dashboardTopRow="index === 0"
27
                    @moveWidget="moveWidget"
28
                    @moveWidget="moveWidget"
28
                    @removed="removeWidget(widget)"
29
                    @removed="removeWidget(widget)"
29
                ></component>
30
                ></component>
Lines 39-48 Link Here
39
            >
40
            >
40
                <component
41
                <component
41
                    v-for="(widget, index) in selectedWidgetsRight"
42
                    v-for="(widget, index) in selectedWidgetsRight"
42
                    :key="widget.name"
43
                    :key="widget.name + '-' + index"
43
                    :is="widget"
44
                    :is="widget"
44
                    display="dashboard"
45
                    display="dashboard"
45
                    dashboardColumn="right"
46
                    dashboardColumn="right"
47
                    :dashboardTopRow="index === 0"
46
                    @moveWidget="moveWidget"
48
                    @moveWidget="moveWidget"
47
                    @removed="removeWidget(widget)"
49
                    @removed="removeWidget(widget)"
48
                ></component>
50
                ></component>
Lines 103-135 export default { Link Here
103
            }
105
            }
104
        }
106
        }
105
107
106
        function moveWidget(widget) {
108
        function moveWidget(params) {
107
            if (
109
            if (params.direction === "right") {
108
                selectedWidgetsLeft.value.some(
109
                    element => element.name === widget.componentName
110
                )
111
            ) {
112
                selectedWidgetsRight.value.unshift(
110
                selectedWidgetsRight.value.unshift(
113
                    selectedWidgetsLeft.value.find(
111
                    selectedWidgetsLeft.value.find(
114
                        element => element.name === widget.componentName
112
                        element => element.name === params.widgetComponentName
115
                    )
113
                    )
116
                );
114
                );
117
                selectedWidgetsLeft.value = selectedWidgetsLeft.value.filter(
115
                selectedWidgetsLeft.value = selectedWidgetsLeft.value.filter(
118
                    element => element.name !== widget.componentName
116
                    element => element.name !== params.widgetComponentName
119
                );
117
                );
120
            } else if (
118
            } else if (params.direction === "left") {
121
                selectedWidgetsRight.value.some(
122
                    element => element.name === widget.componentName
123
                )
124
            ) {
125
                selectedWidgetsLeft.value.unshift(
119
                selectedWidgetsLeft.value.unshift(
126
                    selectedWidgetsRight.value.find(
120
                    selectedWidgetsRight.value.find(
127
                        element => element.name === widget.componentName
121
                        element => element.name === params.widgetComponentName
128
                    )
122
                    )
129
                );
123
                );
130
                selectedWidgetsRight.value = selectedWidgetsRight.value.filter(
124
                selectedWidgetsRight.value = selectedWidgetsRight.value.filter(
131
                    element => element.name !== widget.componentName
125
                    element => element.name !== params.widgetComponentName
132
                );
126
                );
127
            } else if (
128
                params.direction === "up" ||
129
                params.direction === "down"
130
            ) {
131
                const list =
132
                    params.currentColumn === "left"
133
                        ? selectedWidgetsLeft.value
134
                        : selectedWidgetsRight.value;
135
136
                const currentIndex = list.findIndex(
137
                    element => element.name === params.widgetComponentName
138
                );
139
140
                if (currentIndex === -1) return;
141
142
                const newIndex =
143
                    params.direction === "up"
144
                        ? currentIndex - 1
145
                        : currentIndex + 1;
146
147
                if (newIndex < 0 || newIndex >= list.length) return; // Out of bounds
148
149
                if (params.currentColumn === "left") {
150
                    selectedWidgetsLeft.value = (() => {
151
                        const arr = [...selectedWidgetsLeft.value];
152
                        const [item] = arr.splice(currentIndex, 1);
153
                        arr.splice(newIndex, 0, item);
154
                        return arr;
155
                    })();
156
                } else if (params.currentColumn === "right") {
157
                    selectedWidgetsRight.value = (() => {
158
                        const arr = [...selectedWidgetsRight.value];
159
                        const [item] = arr.splice(currentIndex, 1);
160
                        arr.splice(newIndex, 0, item);
161
                        return arr;
162
                    })();
163
                }
133
            }
164
            }
134
        }
165
        }
135
166
(-)a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ModuleDashboard/WidgetDashboardWrapper.vue (-2 / +26 lines)
Lines 36-41 Link Here
36
                                    {{ $__("Settings") }}
36
                                    {{ $__("Settings") }}
37
                                </button>
37
                                </button>
38
                            </li>
38
                            </li>
39
                            <li v-if="!dashboardTopRow">
40
                                <button
41
                                    class="dropdown-item move-up"
42
                                    @mousedown="moveWidget('up')"
43
                                    :title="$__('Move up')"
44
                                >
45
                                    <font-awesome-icon icon="arrow-up" />
46
                                    {{ $__("Move up") }}
47
                                </button>
48
                            </li>
39
                            <li v-if="dashboardColumn === 'left'">
49
                            <li v-if="dashboardColumn === 'left'">
40
                                <button
50
                                <button
41
                                    class="dropdown-item move-right"
51
                                    class="dropdown-item move-right"
Lines 56-61 Link Here
56
                                    {{ $__("Move to left") }}
66
                                    {{ $__("Move to left") }}
57
                                </button>
67
                                </button>
58
                            </li>
68
                            </li>
69
                            <li v-if="dashboardTopRow">
70
                                <button
71
                                    class="dropdown-item move-down"
72
                                    @mousedown="moveWidget('down')"
73
                                    :title="$__('Move down')"
74
                                >
75
                                    <font-awesome-icon icon="arrow-down" />
76
                                    {{ $__("Move down") }}
77
                                </button>
78
                            </li>
59
                            <li>
79
                            <li>
60
                                <button
80
                                <button
61
                                    class="dropdown-item remove-widget"
81
                                    class="dropdown-item remove-widget"
Lines 140-145 export default { Link Here
140
            type: String,
160
            type: String,
141
            required: false,
161
            required: false,
142
        },
162
        },
163
        dashboardTopRow: {
164
            type: Boolean,
165
            required: true,
166
        },
143
    },
167
    },
144
    setup(props, { emit }) {
168
    setup(props, { emit }) {
145
        const showSettings = ref(false);
169
        const showSettings = ref(false);
Lines 148-155 export default { Link Here
148
            emit("removed", props);
172
            emit("removed", props);
149
        };
173
        };
150
174
151
        const moveWidget = column => {
175
        const moveWidget = direction => {
152
            emit("moveWidget");
176
            emit("moveWidget", direction);
153
        };
177
        };
154
178
155
        function toggleSettings() {
179
        function toggleSettings() {
(-)a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ModuleDashboard/WidgetWrapper.vue (-2 / +8 lines)
Lines 21-26 Link Here
21
            :settings_definitions="settings_definitions"
21
            :settings_definitions="settings_definitions"
22
            :loading="loading"
22
            :loading="loading"
23
            :dashboardColumn="dashboardColumn"
23
            :dashboardColumn="dashboardColumn"
24
            :dashboardTopRow="dashboardTopRow"
24
            :name="name"
25
            :name="name"
25
            :icon="icon"
26
            :icon="icon"
26
        >
27
        >
Lines 52-57 export default { Link Here
52
        dashboardColumn: {
53
        dashboardColumn: {
53
            type: String,
54
            type: String,
54
        },
55
        },
56
        dashboardTopRow: {
57
            type: Boolean,
58
        },
55
        id: {
59
        id: {
56
            type: String,
60
            type: String,
57
            required: true,
61
            required: true,
Lines 83-88 export default { Link Here
83
            display,
87
            display,
84
            alreadyAdded,
88
            alreadyAdded,
85
            dashboardColumn,
89
            dashboardColumn,
90
            dashboardTopRow,
86
            id,
91
            id,
87
            name,
92
            name,
88
            icon,
93
            icon,
Lines 104-117 export default { Link Here
104
            if (removeWidget) removeWidget();
109
            if (removeWidget) removeWidget();
105
        };
110
        };
106
111
107
        const handleMoveWidget = () => {
112
        const handleMoveWidget = direction => {
108
            if (moveWidget) moveWidget();
113
            if (moveWidget) moveWidget(direction);
109
        };
114
        };
110
115
111
        return {
116
        return {
112
            display,
117
            display,
113
            alreadyAdded,
118
            alreadyAdded,
114
            dashboardColumn,
119
            dashboardColumn,
120
            dashboardTopRow,
115
            id,
121
            id,
116
            name,
122
            name,
117
            icon,
123
            icon,
(-)a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ModuleDashboard/Widgets/ERMCounts.vue (+1 lines)
Lines 49-54 export default { Link Here
49
    components: { WidgetWrapper },
49
    components: { WidgetWrapper },
50
    props: {
50
    props: {
51
        display: String,
51
        display: String,
52
        dashboardColumn: String,
52
    },
53
    },
53
    emits: ["removed", "added", "moveWidget"],
54
    emits: ["removed", "added", "moveWidget"],
54
    setup(props, { emit }) {
55
    setup(props, { emit }) {
(-)a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ModuleDashboard/Widgets/ERMLatestSUSHIJobs.vue (+1 lines)
Lines 23-28 export default { Link Here
23
    components: { WidgetWrapper, KohaTable },
23
    components: { WidgetWrapper, KohaTable },
24
    props: {
24
    props: {
25
        display: String,
25
        display: String,
26
        dashboardColumn: String,
26
    },
27
    },
27
    emits: ["removed", "added", "moveWidget"],
28
    emits: ["removed", "added", "moveWidget"],
28
    setup(props, { emit }) {
29
    setup(props, { emit }) {
(-)a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ModuleDashboard/Widgets/ERMLicensesNeedingAction.vue (+1 lines)
Lines 23-28 export default { Link Here
23
    components: { WidgetWrapper, KohaTable },
23
    components: { WidgetWrapper, KohaTable },
24
    props: {
24
    props: {
25
        display: String,
25
        display: String,
26
        dashboardColumn: String,
26
    },
27
    },
27
    emits: ["removed", "added", "moveWidget"],
28
    emits: ["removed", "added", "moveWidget"],
28
    setup(props, { emit }) {
29
    setup(props, { emit }) {
(-)a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ModuleDashboard/Widgets/ERMRunUsageReport.vue (+1 lines)
Lines 49-54 export default { Link Here
49
    components: { WidgetWrapper },
49
    components: { WidgetWrapper },
50
    props: {
50
    props: {
51
        display: String,
51
        display: String,
52
        dashboardColumn: String,
52
    },
53
    },
53
    emits: ["removed", "added", "moveWidget"],
54
    emits: ["removed", "added", "moveWidget"],
54
    setup(props, { emit }) {
55
    setup(props, { emit }) {
(-)a/koha-tmpl/intranet-tmpl/prog/js/vue/composables/base-widget.js (-2 / +4 lines)
Lines 10-19 export function useBaseWidget(widgetConfig, emit) { Link Here
10
    const settings_definitions = ref(widgetConfig.settings_definitions || []);
10
    const settings_definitions = ref(widgetConfig.settings_definitions || []);
11
    const removeWidget = () => emit("removed", widgetConfig);
11
    const removeWidget = () => emit("removed", widgetConfig);
12
    const addWidget = () => emit("added", widgetConfig);
12
    const addWidget = () => emit("added", widgetConfig);
13
    const moveWidget = () => {
13
    const moveWidget = direction => {
14
        emit("moveWidget", {
14
        emit("moveWidget", {
15
            componentName: widgetConfig.id,
15
            widgetComponentName: widgetConfig.id,
16
            currentColumn: widgetConfig.dashboardColumn,
16
            currentColumn: widgetConfig.dashboardColumn,
17
            direction: direction,
17
        });
18
        });
18
    };
19
    };
19
20
Lines 26-31 export function useBaseWidget(widgetConfig, emit) { Link Here
26
        display: widgetConfig.display,
27
        display: widgetConfig.display,
27
        alreadyAdded: widgetConfig.alreadyAdded,
28
        alreadyAdded: widgetConfig.alreadyAdded,
28
        dashboardColumn: widgetConfig.dashboardColumn,
29
        dashboardColumn: widgetConfig.dashboardColumn,
30
        dashboardTopRow: widgetConfig.dashboardTopRow,
29
        name: widgetConfig.name,
31
        name: widgetConfig.name,
30
        icon: widgetConfig.icon,
32
        icon: widgetConfig.icon,
31
        loading: loading.value,
33
        loading: loading.value,
(-)a/koha-tmpl/intranet-tmpl/prog/js/vue/modules/erm.ts (-1 / +5 lines)
Lines 15-20 import { Link Here
15
    faEllipsisVertical,
15
    faEllipsisVertical,
16
    faArrowRight,
16
    faArrowRight,
17
    faArrowLeft,
17
    faArrowLeft,
18
    faArrowUp,
19
    faArrowDown,
18
} from "@fortawesome/free-solid-svg-icons";
20
} from "@fortawesome/free-solid-svg-icons";
19
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
21
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
20
import vSelect from "vue-select";
22
import vSelect from "vue-select";
Lines 30-36 library.add( Link Here
30
    faEye,
32
    faEye,
31
    faEllipsisVertical,
33
    faEllipsisVertical,
32
    faArrowRight,
34
    faArrowRight,
33
    faArrowLeft
35
    faArrowLeft,
36
    faArrowUp,
37
    faArrowDown
34
);
38
);
35
39
36
import App from "../components/ERM/Main.vue";
40
import App from "../components/ERM/Main.vue";
(-)a/t/cypress/integration/ERM/ModuleDashboard_spec.ts (-2 / +35 lines)
Lines 32-38 describe("ERM Module Dashboard", () => { Link Here
32
            "There are 1 agreement, 5 licenses, 0 documents, 0 local packages, 0 local titles, 1 usage data provider."
32
            "There are 1 agreement, 5 licenses, 0 documents, 0 local packages, 0 local titles, 1 usage data provider."
33
        );
33
        );
34
34
35
        //Move
35
        //Move to the right
36
        cy.get(
36
        cy.get(
37
            ".dashboard-left-col .widget#ERMCounts .widget-header #dropdownMenuButton"
37
            ".dashboard-left-col .widget#ERMCounts .widget-header #dropdownMenuButton"
38
        ).click();
38
        ).click();
Lines 45-50 describe("ERM Module Dashboard", () => { Link Here
45
            .first()
45
            .first()
46
            .should("have.id", "ERMCounts");
46
            .should("have.id", "ERMCounts");
47
47
48
        //Move down
49
        cy.get(".dashboard-right-col .dragArea")
50
            .children()
51
            .first()
52
            .should("have.id", "ERMCounts");
53
        cy.get(
54
            ".dashboard-right-col .widget#ERMCounts .widget-header #dropdownMenuButton"
55
        ).click();
56
        cy.get(
57
            ".dashboard-right-col .widget#ERMCounts .widget-header .move-down"
58
        ).click();
59
        //ERMCounts is now index 1, position 2
60
        cy.get(".dashboard-right-col .dragArea")
61
            .children()
62
            .eq(1)
63
            .should("have.id", "ERMCounts");
64
65
        //Move up
66
        cy.get(".dashboard-right-col .dragArea")
67
            .children()
68
            .eq(1)
69
            .should("have.id", "ERMCounts");
70
        cy.get(
71
            ".dashboard-right-col .widget#ERMCounts .widget-header #dropdownMenuButton"
72
        ).click();
73
        cy.get(
74
            ".dashboard-right-col .widget#ERMCounts .widget-header .move-up"
75
        ).click();
76
        //ERMCounts is now index 1, position 2
77
        cy.get(".dashboard-right-col .dragArea")
78
            .children()
79
            .first()
80
            .should("have.id", "ERMCounts");
81
48
        //Remove
82
        //Remove
49
        cy.get(
83
        cy.get(
50
            ".dashboard-right-col .widget#ERMCounts .widget-header #dropdownMenuButton"
84
            ".dashboard-right-col .widget#ERMCounts .widget-header #dropdownMenuButton"
51
- 

Return to bug 39320