Skip to content

Commit fca3ee1

Browse files
smirolosmirolo
committed
removes dependency on jQuery in Vue components
1 parent a1df71c commit fca3ee1

File tree

8 files changed

+247
-173
lines changed

8 files changed

+247
-173
lines changed

‎saas/static/js/djaodjin-privacy.js‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,23 +2,24 @@
22
Functionality related to privacy policies.
33
*/
44

5-
/* uses exports from djaodjin-resources.js: http */
5+
/* uses exports from djresources.js */
66

77
(function (root, factory) {
88
if (typeof define === 'function' && define.amd) {
99
// AMD. Register as an anonymous module.
10-
define(['exports'], factory);
10+
define(['exports', 'djResources'], factory);
1111
} else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {
1212
// CommonJS
13-
factory(exports);
13+
factory(exports, require('djResources'));
1414
} else {
1515
// Browser true globals added to `window`.
16-
factory(root);
16+
factory(root, root.djResources);
1717
// If we want to put the exports in a namespace, use the following line
1818
// instead.
19-
// factory((root.djResources = {}));
19+
// factory((root.djResources = {}), root.djResources);
2020
}
21-
}(typeof self !== 'undefined' ? self : this, function (exports) {
21+
}(typeof self !== 'undefined' ? self : this, function (exports, djResources) {
22+
2223

2324
const COOKIE_BANNER_ID = "cookie-banner";
2425

‎saas/static/js/djaodjin-saas-vue.js‎

Lines changed: 101 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,65 @@
1-
// Copyright (c) 2025, DjaoDjin inc.
1+
// Copyright (c) 2026, DjaoDjin inc.
22
// All rights reserved.
33
// BSD 2-Clause license
44

55
/*global Vue jQuery showMessages showErrorMessages Stripe updateBarChart updateChart getUrlParameter $ */
66

7+
/*
8+
timezoneMixin
9+
cardMixin [httpRequestMixin]
10+
roleDetailMixin
11+
roleListMixin [itemListMixin, roleDetailMixin]
12+
subscriptionDetailMixin [timezoneMixin]
13+
var subscriptionListMixin [itemListMixin, subscriptionDetailMixin],
14+
Vue.component('user-typeahead', {
15+
var couponDetailMixin [timezoneMixin],
16+
Vue.component('coupon-list', [itemListMixin, couponDetailMixin],
17+
Vue.component('user-list', [itemListMixin, timezoneMixin],
18+
Vue.component('role-profile-list', [roleListMixin],
19+
Vue.component('role-user-list', [roleListMixin],
20+
Vue.component('metrics-charts', [httpRequestMixin, timezoneMixin],
21+
22+
Vue.component('registered', [itemListMixin],
23+
Vue.component('subscribed', [subscriptionListMixin],
24+
Vue.component('churned' [subscriptionListMixin],
25+
26+
Vue.component('lazy-load-tabs'
27+
28+
Vue.component('lifetimevalue-list', [itemListMixin],
29+
Vue.component('balancesdue-list', [itemListMixin],
30+
Vue.component('plan-subscriber-list', [subscriptionListMixin],
31+
Vue.component('subscription-list', [subscriptionListMixin,],
32+
Vue.component('expired-subscription-list', [subscriptionListMixin]
33+
34+
Vue.component('subscription-list-container', {
35+
Vue.component('coupon-user-list', [itemListMixin],
36+
Vue.component('charge-list', [itemListMixin],
37+
Vue.component('plan-list', [itemListMixin,],
38+
Vue.component('import-transaction', [httpRequestMixin, timezoneMixin],
39+
Vue.component('billing-statement', [cardMixin, itemListMixin],
40+
41+
Vue.component('transfers-statement', [itemListMixin],
42+
Vue.component('transaction-list', [itemListMixin,],
43+
Vue.component('profile-update', [itemMixin,],
44+
45+
Vue.component('roledescr-list', [itemListMixin],
46+
Vue.component('balance-list', [itemListMixin, timezoneMixin,],
47+
Vue.component('checkout', [cardMixin, itemListMixin],
48+
49+
Vue.component('card-update', [cardMixin],
50+
51+
Vue.component('plan-update', [ itemMixin]
52+
Vue.component('engaged-subscribers', [itemListMixin],
53+
Vue.component('unengaged-subscribers', [itemListMixin]
54+
55+
Vue.component('search-profile', [typeAheadMixin],
56+
Vue.component('subscription-typeahead', [ typeAheadMixin]
57+
Vue.component('today-sales', [ itemListMixin, timezoneMixin],
58+
Vue.component('monthly-revenue', [itemMixin ],
59+
Vue.component('active-carts', [itemListMixin],
60+
Vue.component('user-active-cart', [itemListMixin],
61+
*/
62+
763

864
var countries = {
965
"AF": "Afghanistan",
@@ -496,7 +552,7 @@ var cardMixin = {
496552
httpRequestMixin
497553
],
498554
data: function() {
499-
return $.extend({ // XXX jQuery
555+
return {
500556
api_card_url: this.$urls.organization.api_card,
501557
api_profile_url: this.$urls.organization.api_base,
502558
processor_pub_key: null,
@@ -547,21 +603,22 @@ var cardMixin = {
547603
fieldShoundNotBeEmptyError: (this.$labels && this.$labels.fieldShoundNotBeEmptyError) || "This field shouldn't be empty",
548604
fieldsCannotBeEmptyError: (this.$labels && this.$labels.fieldsCannotBeEmptyError) || " field(s) cannot be empty."
549605
}
550-
}, this.getCardFormData());
606+
};
551607
},
552608
methods: {
553609
getCardFormData: function() {
554610
var vm = this;
555611
var data = {};
556-
var cardForm = $("#card-use"); // XXX jQuery
557-
if( cardForm.length > 0 ) {
612+
var cardForm = document.getElementById("card-use");
613+
if( cardForm ) {
558614
data['card_name'] = vm.getInitValue(cardForm, 'card_name');
559615
data['card_address_line1'] = vm.getInitValue(cardForm, 'card_address_line1');
560616
data['card_city'] = vm.getInitValue(cardForm, 'card_city');
561617
data['ard_adress_zip'] = vm.getInitValue(cardForm, 'card_address_zip');
562618
data['country'] = vm.getInitValue(cardForm, 'country');
563619
data['region'] = vm.getInitValue(cardForm, 'region');
564620
}
621+
console.log("XXX [getCardFormData] cardForm=", cardForm, "data=", data);
565622
return data;
566623
},
567624
clearCardData: function() {
@@ -600,13 +657,14 @@ var cardMixin = {
600657
return cls;
601658
},
602659
getInitValue: function(form, fieldName) {
603-
if( form.length > 0 ) {
604-
var field = form.find("[name='" + fieldName + "']");
605-
if( field.length > 0 ) {
606-
var val = field.attr('type') === 'checkbox' ?
607-
field.prop('checked') : (
608-
field.val() ? field.val() : field.data('init'));
609-
return val;
660+
if( form ) {
661+
const field = form.querySelector("[name='" + fieldName + "']");
662+
if( field ) {
663+
const fieldValue =
664+
field.getAttribute('type') === 'checkbox' ?
665+
field.checked : (
666+
field.value ? field.value : field.dataset.init);
667+
return fieldValue;
610668
}
611669
}
612670
return "";
@@ -782,7 +840,7 @@ var cardMixin = {
782840
var errorMessages = "";
783841
vm.validate.forEach(function(field){
784842
if(vm[field] === ''){
785-
vm[field] = vm.getInitValue($(vm.$el), field);//XXX jQuery
843+
vm[field] = vm.getInitValue(vm.$el, field);
786844
}
787845
if( vm[field] === '') {
788846
valid = false;
@@ -844,13 +902,19 @@ var cardMixin = {
844902
},
845903
mounted: function() {
846904
var vm = this;
847-
var elements = vm.$el.querySelectorAll('[data-last4]');
848-
if( elements.length > 0 ) {
849-
vm.savedCard.last4 = elements[0].getAttribute('data-last4');
905+
const data = vm.getCardFormData();
906+
for( var fieldName in data ) {
907+
if( data.hasOwnProperty(fieldName) ) {
908+
vm[fieldName] = data[fieldName];
909+
}
910+
}
911+
var element = vm.$el.querySelector('[data-last4]');
912+
if( element ) {
913+
vm.savedCard.last4 = element.getAttribute('data-last4');
850914
}
851-
elements = vm.$el.querySelectorAll('[data-exp-date]');
852-
if( elements.length > 0 ) {
853-
vm.savedCard.exp_date = elements[0].getAttribute('data-exp-date');
915+
element = vm.$el.querySelector('[data-exp-date]');
916+
if( element ) {
917+
vm.savedCard.exp_date = element.getAttribute('data-exp-date');
854918
}
855919
vm.processor_pub_key = vm.$el.getAttribute('data-processor-pub-key');
856920
vm.stripe_intent_secret = vm.$el.getAttribute(
@@ -934,7 +998,7 @@ var roleListMixin = {
934998
methods: {
935999
_addRole: function(item, force) {
9361000
var vm = this;
937-
if( jQuery.type(item) === "string" ) {
1001+
if( typeof item === "string" ) {
9381002
var stringVal = item;
9391003
item = {slug: "", email: "", full_name: ""};
9401004
var pattern = /@[a-zA-Z0-9\-]+\.([a-zA-Z\-]{2,3}|localdomain)/;
@@ -993,7 +1057,7 @@ var roleListMixin = {
9931057
vm.inNewProfileFlow = true;
9941058
vm.$emit('create');
9951059
} else {
996-
if( jQuery.type(vm.newProfile) === "string" ) {
1060+
if( typeof vm.newProfile === "string" ) {
9971061
var stringVal = vm.newProfile;
9981062
vm.newProfile = {slug: "", email: "", full_name: ""};
9991063
var pattern = /@[a-zA-Z\-]+\.[a-zA-Z\-]{2,3}/;
@@ -1118,9 +1182,6 @@ var roleListMixin = {
11181182
requestedProfilePrintableName: function() {
11191183
var vm = this;
11201184
if( typeof vm.unregistered !== 'undefined' ) {
1121-
if( jQuery.type(vm.unregistered) === "string" ) {
1122-
return vm.unregistered ? vm.unregistered : "The profile";
1123-
}
11241185
if( typeof vm.unregistered.full_name !== 'undefined' &&
11251186
vm.unregistered.full_name ) {
11261187
return vm.unregistered.full_name;
@@ -1129,6 +1190,9 @@ var roleListMixin = {
11291190
vm.unregistered.email ) {
11301191
return vm.unregistered.email;
11311192
}
1193+
if( vm.unregistered ) {
1194+
return vm.unregistered.toString();
1195+
}
11321196
}
11331197
return "The profile";
11341198
}
@@ -1294,7 +1358,6 @@ var subscriptionListMixin = {
12941358
email: slug,
12951359
full_name: slug
12961360
}
1297-
vm.modalShow();
12981361
}
12991362
}
13001363
);
@@ -1913,7 +1976,7 @@ Vue.component('plan-subscriber-list', {
19131976
methods: {
19141977
_addItem: function(item, force) {
19151978
var vm = this;
1916-
if( jQuery.type(item) === "string" ) {
1979+
if( typeof item === "string" ) {
19171980
var stringVal = item;
19181981
item = {slug: "", email: "", full_name: ""};
19191982
var pattern = /@[a-zA-Z0-9\-]+\.([a-zA-Z\-]{2,3}|localdomain)/;
@@ -1982,7 +2045,7 @@ Vue.component('plan-subscriber-list', {
19822045
requestedProfilePrintableName: function() {
19832046
var vm = this;
19842047
if( typeof vm.newItem !== 'undefined' ) {
1985-
if( jQuery.type(vm.newItem) === "string" ) {
2048+
if( typeof vm.newItem === "string" ) {
19862049
return vm.newItem ? vm.newItem : "The profile";
19872050
}
19882051
if( typeof vm.newItem.full_name !== 'undefined' &&
@@ -2212,19 +2275,15 @@ Vue.component('billing-statement', {
22122275
},
22132276
modalHide: function() {
22142277
var vm = this;
2215-
if( vm.dialog ) {
2216-
vm.dialog.modal("hide");
2278+
var dialog = vm.$el.querySelector('.modal');
2279+
if( dialog ) {
2280+
if( typeof bootstrap != 'undefined' ) {
2281+
var modal = bootstrap.Modal.getOrCreateInstance(dialog);
2282+
modal.hide();
2283+
}
22172284
}
22182285
}
22192286
},
2220-
computed: {
2221-
dialog: function(){ // XXX depends on jQuery / bootstrap.js
2222-
var dialog = $(this.$el).find('.modal');
2223-
if(dialog && jQuery().modal){
2224-
return dialog;
2225-
}
2226-
},
2227-
},
22282287
mounted: function(){
22292288
this.getCard();
22302289
this.get();
@@ -2714,17 +2773,17 @@ Vue.component('checkout', {
27142773
// used in legacy checkout
27152774
doCheckoutForm: function(token) {
27162775
var vm = this;
2717-
var form = $(vm.$el).find('form'); // XXX jQuery
2776+
var form = vm.$el.querySelector('form');
27182777
if(token){
2719-
form.append("<input type='hidden' name='stripeToken' value='" + token + "'/>");
2778+
form.append("<input type='hidden' name='stripeToken' value='" + token + "'/>"); // XXX jQuery
27202779
}
2721-
form.get(0).submit();
2780+
form.get(0).submit(); // XXX jQuery
27222781
},
27232782
// used in legacy checkout
27242783
checkoutForm: function() {
27252784
var vm = this;
2726-
var cardUse = $('#card-use'); // XXX jQuery
2727-
if( cardUse.length > 0 && cardUse.is(":visible") ) {
2785+
var cardUse = document.getElementById('card-use');
2786+
if( cardUse && cardUse.is(":visible") ) {// XXX jQuery
27282787
if(vm.haveCardData){
27292788
if(vm.updateCard){
27302789
vm.getCardToken(vm.doCheckoutForm);

0 commit comments

Comments
 (0)