Merge pull request #1650 from UNC-Libraries/pinia

Move Vue apps from Vuex to Pinia
UNC-Libraries · Jan 9, 2024 · 8d3099c · 8d3099c
2 parents 88673ef + 9b2e863
commit 8d3099c
Show file tree

Hide file tree

Showing 50 changed files with 1,183 additions and 563 deletions.
diff --git a/static/js/admin/src/ResultObjectActionMenu.js b/static/js/admin/src/ResultObjectActionMenu.js
@@ -446,19 +446,19 @@ define('ResultObjectActionMenu', [ 'jquery', 'jquery-ui', 'StringUtilities',  'A
 						})();
 						break;
 					case "patronPermissions":
-						perms_editor_store.commit('setPermissionType', 'Patron');
-						perms_editor_store.commit('setMetadata', metadata);
-						perms_editor_store.commit('setShowModal', true);
-						perms_editor_store.commit('setAlertHandler', self.options.alertHandler);
-						perms_editor_store.commit('setActionHandler', self.actionHandler);
-						perms_editor_store.commit('setResultObject', resultObject);
-						perms_editor_store.commit('setResultObjects', null);
+						perms_editor_store.setPermissionType('Patron');
+						perms_editor_store.setMetadata(metadata);
+						perms_editor_store.setShowModal(true);
+						perms_editor_store.setAlertHandler(self.options.alertHandler);
+						perms_editor_store.setActionHandler(self.actionHandler);
+						perms_editor_store.setResultObject(resultObject);
+						perms_editor_store.setResultObjects(null);
 						break;
 					case "staffPermissions":
-						perms_editor_store.commit('setPermissionType', 'Staff');
-						perms_editor_store.commit('setMetadata', metadata);
-						perms_editor_store.commit('setShowModal', true);
-						perms_editor_store.commit('setAlertHandler', self.options.alertHandler);
+						perms_editor_store.setPermissionType('Staff');
+						perms_editor_store.setMetadata(metadata);
+						perms_editor_store.setShowModal(true);
+						perms_editor_store.setAlertHandler(self.options.alertHandler);
 						break;
 				}
 			},

diff --git a/static/js/admin/src/action/UpdatePatronAccessBatchAction.js b/static/js/admin/src/action/UpdatePatronAccessBatchAction.js
@@ -15,23 +15,23 @@ define('UpdatePatronAccessBatchAction', [ 'jquery', 'AbstractBatchAction'], func
     UpdatePatronAccessBatchAction.prototype.execute = function() {
         let targets = this.getTargets();
 
-        perms_editor_store.commit('setPermissionType', 'Patron');
-        perms_editor_store.commit('setAlertHandler', this.context.view.$alertHandler);
-        perms_editor_store.commit('setActionHandler', this.context.actionHandler);
+        perms_editor_store.setPermissionType('Patron');
+        perms_editor_store.setAlertHandler(this.context.view.$alertHandler);
+        perms_editor_store.setActionHandler(this.context.actionHandler);
         if (targets.length == 1) {
-            perms_editor_store.commit('setResultObject', targets[0]);
-            perms_editor_store.commit('setResultObjects', null);
-            perms_editor_store.commit('setMetadata', targets[0].metadata);
+            perms_editor_store.setResultObject(targets[0]);
+            perms_editor_store.setResultObjects(null);
+            perms_editor_store.setMetadata(targets[0].metadata);
         } else {
-            perms_editor_store.commit('setResultObject', null);
-            perms_editor_store.commit('setResultObjects', targets);
-            perms_editor_store.commit('setMetadata', {
+            perms_editor_store.setResultObject(null);
+            perms_editor_store.setResultObjects(targets);
+            perms_editor_store.setMetadata({
                 title: targets.length + " objects",
                 id: null,
                 type: null
             });
         }
-        perms_editor_store.commit('setShowModal', true);
+        perms_editor_store.setShowModal(true);
 
         AbstractBatchAction.prototype.execute.call(this);
     }

diff --git a/static/js/admin/vue-permissions-editor/package-lock.json b/static/js/admin/vue-permissions-editor/package-lock.json
diff --git a/static/js/admin/vue-permissions-editor/package.json b/static/js/admin/vue-permissions-editor/package.json
@@ -14,13 +14,14 @@
     "lodash.clonedeep": "^4.5.0",
     "lodash.findindex": "^4.6.0",
     "lodash.isempty": "^4.4.0",
+    "pinia": "^2.1.7",
     "vue": "^3.4.5",
-    "vue-router": "^4.2.5",
-    "vuex": "^4.0.2"
+    "vue-router": "^4.2.5"
   },
   "devDependencies": {
     "@babel/plugin-transform-runtime": "^7.23.7",
     "@babel/preset-env": "^7.23.7",
+    "@pinia/testing": "0.1.3",
     "@testing-library/jest-dom": "^6.2.0",
     "@vitejs/plugin-vue": "^4.6.2",
     "@vue/compiler-sfc": "^3.4.5",

diff --git a/static/js/admin/vue-permissions-editor/src/components/embargo.vue b/static/js/admin/vue-permissions-editor/src/components/embargo.vue
@@ -45,7 +45,8 @@
 
 <script>
     import { addYears, format, isFuture } from 'date-fns'
-    import {mapState} from "vuex";
+    import { mapActions, mapState } from 'pinia';
+    import { usePermissionsStore } from '../stores/permissions';
 
     export default {
         name: 'embargo',
@@ -82,13 +83,15 @@
         },
 
         computed: {
-            ...mapState({
-                alertHandler: state => state.alertHandler,
-                embargoEndsDate: state => {
-                    return (state.embargoInfo.embargo !== null) ? state.embargoInfo.embargo : '';
+            ...mapState(usePermissionsStore, {
+                alertHandler: store => store.alertHandler,
+                embargoEndsDate: store => {
+                    return (store.embargoInfo.embargo !== null) ? store.embargoInfo.embargo : '';
                 },
-                hasEmbargo: state => state.embargoInfo.embargo !== null
+                hasEmbargo: store => store.embargoInfo.embargo !== null
             }),
+            
+            
 
             formattedEmbargoDate() {
                 if (this.embargoEndsDate === '') {
@@ -100,6 +103,8 @@
         },
 
         methods: {
+            ...mapActions(usePermissionsStore, ['setEmbargoInfo']),
+
             showForm() {
                 this.show_form = !this.show_form;
             },
@@ -110,7 +115,7 @@
             removeEmbargo(confirm = true) {
                 if (!confirm || window.confirm("This will clear the embargo for this object. Are you sure you'd like to continue?")) {
                     this.clearEmbargoInfo();
-                    this.$store.commit('setEmbargoInfo', {
+                    this.setEmbargoInfo({
                         embargo: null,
                         skipEmbargo: false
                     });
@@ -122,7 +127,7 @@
              */
             ignoreEmbargo() {
                 this.clearEmbargoInfo();
-                this.$store.commit('setEmbargoInfo', {
+                this.setEmbargoInfo({
                     embargo: null,
                     skipEmbargo: true
                 });
@@ -145,7 +150,7 @@
                 let future_date = addYears(new Date(), years);
                 let fixed_embargo_date = format(future_date, 'yyyy-LL-dd');
                 this.custom_embargo_date = '';
-                this.$store.commit('setEmbargoInfo', {
+                this.setEmbargoInfo({
                     embargo: fixed_embargo_date,
                     skipEmbargo: false
                 });
@@ -162,7 +167,7 @@
                 if (date_filled && regex_match && isFuture(date_parts)) {
                     this.embargo_type = 'custom';
                     this.error_msg = '';
-                    this.$store.commit('setEmbargoInfo', {
+                    this.setEmbargoInfo({
                         embargo: this.custom_embargo_date,
                         skipEmbargo: false
                     });

diff --git a/static/js/admin/vue-permissions-editor/src/components/modalEditor.vue b/static/js/admin/vue-permissions-editor/src/components/modalEditor.vue
@@ -43,14 +43,15 @@
 <script>
     import patronRoles from '@/components/patronRoles.vue';
     import staffRoles from "@/components/staffRoles.vue";
-    import { mapState } from 'vuex';
+    import { mapActions, mapState } from 'pinia';
+    import { usePermissionsStore } from '../stores/permissions';
 
     export default {
         name: 'modalEditor',
         components: {patronRoles, staffRoles},
 
         computed: {
-            ...mapState({
+            ...mapState(usePermissionsStore, {
                 actionHandler: state => state.actionHandler,
                 alertHandler: state => state.alertHandler,
                 checkForUnsavedChanges: state => state.checkForUnsavedChanges,
@@ -83,16 +84,18 @@
         },
 
         methods: {
+            ...mapActions(usePermissionsStore, ['setCheckForUnsavedChanges', 'setShowModal']),
+
             closeModalCheck() {
-                this.$store.commit('setCheckForUnsavedChanges', true);
+                this.setCheckForUnsavedChanges(true);
             },
 
             resetChangesCheck(check_changes) {
-                this.$store.commit('setCheckForUnsavedChanges', check_changes);
+                this.setCheckForUnsavedChanges(check_changes);
             },
 
             closeModal() {
-                this.$store.commit('setShowModal', false);
+                this.setShowModal(false);
             }
         }
     }

diff --git a/static/js/admin/vue-permissions-editor/src/components/patronRoles.vue b/static/js/admin/vue-permissions-editor/src/components/patronRoles.vue
@@ -98,7 +98,8 @@
     import patronHelpers from '../mixins/patronHelpers';
     import axios from 'axios';
     import cloneDeep from 'lodash.clonedeep';
-    import { mapState } from 'vuex';
+    import { mapActions, mapState } from 'pinia';
+    import { usePermissionsStore } from '../stores/permissions';
 
     const EVERYONE_PRINCIPAL = 'everyone';
     const AUTH_PRINCIPAL = 'authenticated';
@@ -148,19 +149,19 @@
         },
 
         computed: {
-            // Get needed state from Vuex
-            ...mapState({
-                alertHandler: state => state.alertHandler,
-                actionHandler: state => state.actionHandler,
-                changesCheck: state => state.checkForUnsavedChanges,
-                containerType: state => state.metadata.type,
-                embargo: state => state.embargoInfo.embargo,
-                skipEmbargo: state => state.embargoInfo.skipEmbargo,
-                resultObject: state => state.resultObject,
-                resultObjects: state => state.resultObjects,
-                objectPath: state => state.metadata.objectPath,
-                title: state => state.metadata.title,
-                uuid: state => state.metadata.id
+            // Get needed state from Pinia
+            ...mapState(usePermissionsStore, {
+                alertHandler: store => store.alertHandler,
+                actionHandler: store => store.actionHandler,
+                changesCheck: store => store.checkForUnsavedChanges,
+                containerType: store => store.metadata.type,
+                embargo: store => store.embargoInfo.embargo,
+                skipEmbargo: store => store.embargoInfo.skipEmbargo,
+                resultObject: store => store.resultObject,
+                resultObjects: store => store.resultObjects,
+                objectPath: store => store.metadata.objectPath,
+                title: store => store.metadata.title,
+                uuid: store => store.metadata.id
             }),
 
             possibleRoles() {
@@ -272,6 +273,8 @@
         },
 
         methods: {
+            ...mapActions(usePermissionsStore, ['setEmbargoInfo']),
+
             setRoleType(roles, type) {
                 if (roles.length > 0) {
                     roles.forEach((d) => {
@@ -300,7 +303,7 @@
                     return;
                 }
                 axios.get(`/services/api/acl/patron/${this.uuid}`).then((response) => {
-                    this.$store.commit('setEmbargoInfo', {
+                    this.setEmbargoInfo({
                         embargo: response.data.assigned.embargo,
                         skipEmbargo: true
                     });