From 8861b6d077beffa4de788f95bfe826b44964ee60 Mon Sep 17 00:00:00 2001 From: binarygit Date: Sun, 28 Aug 2022 11:46:27 +0545 Subject: [PATCH] Replace permalinks angular ctrl with stimulus --- .../permalink_controller.js.coffee | 27 --------- .../admin/enterprises_controller.rb | 1 + .../enterprises/form/_permalink.html.haml | 35 +++++++++++ .../form/_primary_details.html.haml | 31 +--------- .../controllers/permalink_controller.js | 52 ++++++++++++++++ config/locales/en.yml | 1 + .../permalink_controller_spec.js.coffee | 59 ------------------- 7 files changed, 91 insertions(+), 115 deletions(-) delete mode 100644 app/assets/javascripts/admin/enterprises/controllers/permalink_controller.js.coffee create mode 100644 app/views/admin/enterprises/form/_permalink.html.haml create mode 100644 app/webpacker/controllers/permalink_controller.js delete mode 100644 spec/javascripts/unit/admin/enterprises/controllers/permalink_controller_spec.js.coffee diff --git a/app/assets/javascripts/admin/enterprises/controllers/permalink_controller.js.coffee b/app/assets/javascripts/admin/enterprises/controllers/permalink_controller.js.coffee deleted file mode 100644 index 2e0985fbb5..0000000000 --- a/app/assets/javascripts/admin/enterprises/controllers/permalink_controller.js.coffee +++ /dev/null @@ -1,27 +0,0 @@ -angular.module("admin.enterprises") - .controller "permalinkCtrl", ($scope, PermalinkChecker) -> - # locals - initialPermalink = $scope.Enterprise.permalink - pendingRequest = null - - # variables on $scope - $scope.availablility = "" - $scope.checking = false - - $scope.$watch "Enterprise.permalink", (newValue, oldValue) -> - if newValue == initialPermalink - $scope.availability = "" - return - - $scope.checking = true - pendingRequest = PermalinkChecker.check(newValue) - - pendingRequest.then (data) -> - if data.permalink == initialPermalink - $scope.availability = "" - else - $scope.availability = data.available - $scope.Enterprise.permalink = data.permalink - $scope.checking = false - , (data) -> - # Do nothing (this is hopefully an aborted request) diff --git a/app/controllers/admin/enterprises_controller.rb b/app/controllers/admin/enterprises_controller.rb index be4cf04586..42d4385695 100644 --- a/app/controllers/admin/enterprises_controller.rb +++ b/app/controllers/admin/enterprises_controller.rb @@ -49,6 +49,7 @@ module Admin @enterprise.is_primary_producer = params[:is_primary_producer] @enterprise.sells = params[:enterprise_sells] render operations: cable_car.morph("#side_menu", partial("admin/shared/side_menu")) + .morph("#permalink", partial("admin/enterprises/form/permalink")) end end diff --git a/app/views/admin/enterprises/form/_permalink.html.haml b/app/views/admin/enterprises/form/_permalink.html.haml new file mode 100644 index 0000000000..910aa086a2 --- /dev/null +++ b/app/views/admin/enterprises/form/_permalink.html.haml @@ -0,0 +1,35 @@ +.permalink#permalink{ data: { controller: 'permalink', permalink: { 'initial-permalink-value': @enterprise.permalink, 'url-value': check_permalink_enterprises_url } }} + - unless @enterprise.sells == 'none' + .row + .three.columns.alpha + = label_tag :permalink, t('.permalink') + %div{'ofn-with-tip' => t('.permalink_tip', link: main_app.root_url)} + %a= t('admin.whats_this') + .eight.columns + = text_field_tag "enterprise[permalink]", @enterprise.permalink, data: { action: "input->permalink#validate", "permalink-target": "permalinkField" } + .two.columns.omega + %div{ style: "width: 30px; height: 30px;", class: "hidden", data: { "permalink-target": "spinner" } } + = render partial: "components/admin_spinner" + %span.available.hidden{data: { "permalink-target": "available" }} + = t('available') + %i.icon-ok-sign + %span.unavailable.hidden{data: { "permalink-target": "unavailable" }} + = t('js.unavailable') + %i.icon-remove-sign + + - unless @enterprise.sells == 'none' + .row + .three.columns.alpha + %label= t('.link_to_front') + %div{'ofn-with-tip' => t('.link_to_front_tip')} + %a= t('admin.whats_this') + .eight.columns.omega + - front_shop_path = "#{main_app.root_url}#{@enterprise.permalink}/shop" + = link_to front_shop_path, front_shop_path , target: "_blank" + .row + .three.columns.alpha + = label_tag :id, t('.ofn_uid') + %div{'ofn-with-tip' => t('.ofn_uid_tip')} + %a= t('admin.whats_this') + .six.columns + = @enterprise.id diff --git a/app/views/admin/enterprises/form/_primary_details.html.haml b/app/views/admin/enterprises/form/_primary_details.html.haml index 1b385280b9..9ada528942 100644 --- a/app/views/admin/enterprises/form/_primary_details.html.haml +++ b/app/views/admin/enterprises/form/_primary_details.html.haml @@ -49,32 +49,5 @@ .four.columns.omega = f.radio_button :visible, "hidden", 'ng-model' => 'Enterprise.visible' = f.label :visible, t('.hidden'), value: 'hidden' -.permalink{ ng: { controller: "permalinkCtrl" } } - .row{ ng: { show: "Enterprise.sells == 'own' || Enterprise.sells == 'any'" } } - .three.columns.alpha - = f.label :permalink, t('.permalink') - %div{'ofn-with-tip' => t('.permalink_tip', link: main_app.root_url)} - %a= t('admin.whats_this') - .eight.columns - = f.text_field :permalink, { 'ng-model' => "Enterprise.permalink", placeholder: "eg. your-shop-name", 'ng-model-options' => "{ updateOn: 'default blur', debounce: {'default': 300, 'blur': 0} }" } - .two.columns.omega - %div{ng: {show: "checking", cloak: true}, style: "width: 30px; height: 30px;"} - = render partial: "components/admin_spinner" - %span{ ng: { class: 'availability.toLowerCase()', hide: "checking" } } - {{ availability }} - %i{ ng: { class: "{'icon-ok-sign': availability == 'Available', 'icon-remove-sign': availability == 'Unavailable'}" } } - .row{ ng: { show: "Enterprise.sells == 'own' || Enterprise.sells == 'any'" } } - .three.columns.alpha - %label= t('.link_to_front') - %div{'ofn-with-tip' => t('.link_to_front_tip')} - %a= t('admin.whats_this') - .eight.columns.omega - - front_shop_path = "#{main_app.root_url}#{@enterprise.permalink}/shop" - = link_to front_shop_path, front_shop_path , target: "_blank" - .row - .three.columns.alpha - = f.label :id, t('.ofn_uid') - %div{'ofn-with-tip' => t('.ofn_uid_tip')} - %a= t('admin.whats_this') - .six.columns - {{Enterprise.id}} + += render partial: 'admin/enterprises/form/permalink' diff --git a/app/webpacker/controllers/permalink_controller.js b/app/webpacker/controllers/permalink_controller.js new file mode 100644 index 0000000000..03691dc077 --- /dev/null +++ b/app/webpacker/controllers/permalink_controller.js @@ -0,0 +1,52 @@ +import { Controller } from "stimulus"; + +export default class extends Controller { + static values = { initialPermalink: String, url: String }; + static targets = ["spinner", "permalinkField", "available", "unavailable"]; + + initialize() { + this.validate = _.debounce(this.validate, 300); + } + + async validate() { + this.hideAvailability(); + this.showSpinner(); + + const response = await fetch( + this.urlValue + `?permalink="${this.permalinkFieldTarget.value}"` + ); + const result = await response.text(); + + if (this.initialPermalinkValue == result) { + this.permalinkFieldTarget.value = result; + this.hideSpinner(); + return; + } + + this.displayAvailability(response); + + this.hideSpinner(); + this.permalinkFieldTarget.value = result; + } + + displayAvailability(response) { + if (response.ok) { + this.availableTarget.classList.remove("hidden"); + } else { + this.unavailableTarget.classList.remove("hidden"); + } + } + + hideAvailability() { + this.availableTarget.classList.add("hidden"); + this.unavailableTarget.classList.add("hidden"); + } + + showSpinner() { + this.spinnerTarget.classList.remove("hidden"); + } + + hideSpinner() { + this.spinnerTarget.classList.add("hidden"); + } +} diff --git a/config/locales/en.yml b/config/locales/en.yml index 12e1288a84..24b37f5962 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -950,6 +950,7 @@ en: visible: Public not_visible: Hidden hidden: Hide all references + permalink: permalink: Permalink (no spaces) permalink_tip: "This permalink is used to create the url to your shop: %{link}your-shop-name/shop" link_to_front: Link to shop front diff --git a/spec/javascripts/unit/admin/enterprises/controllers/permalink_controller_spec.js.coffee b/spec/javascripts/unit/admin/enterprises/controllers/permalink_controller_spec.js.coffee deleted file mode 100644 index 72e6fdb2da..0000000000 --- a/spec/javascripts/unit/admin/enterprises/controllers/permalink_controller_spec.js.coffee +++ /dev/null @@ -1,59 +0,0 @@ -describe "permalinkCtrl", -> - ctrl = null - $scope = null - Enterprise = null - PermalinkChecker = null - $httpBackend = null - $q = null - - - beforeEach -> - module('admin.enterprises') - Enterprise = - permalink: "something" - - inject ($rootScope, $controller, _$q_, _PermalinkChecker_) -> - $scope = $rootScope - $scope.Enterprise = Enterprise - $q = _$q_ - PermalinkChecker = _PermalinkChecker_ - $ctrl = $controller 'permalinkCtrl', {$scope: $scope, PermalinkChecker: PermalinkChecker} - - describe "checking permalink", -> - deferred = null - beforeEach -> - # Build a deferred object - deferred = $q.defer() - - it "sends a request to PermalinkChecker when permalink is changed", -> - deferred.resolve("") - promise = deferred.promise - spyOn(PermalinkChecker, "check").and.returnValue promise - $scope.$apply Enterprise.permalink = "somethingelse" # Change the permalink - expect(PermalinkChecker.check).toHaveBeenCalled() - - it "sets available to '' when PermalinkChecker resolves permalink to the existing permalink on Enterprise ", -> - deferred.resolve({permalink: "something"}) - promise = deferred.promise - spyOn(PermalinkChecker, "check").and.returnValue promise - $scope.$apply Enterprise.permalink = "somethingelse" # Change the permalink - expect($scope.availability).toEqual "" - - it "sets available and permalink when PermalinkChecker resolves", -> - deferred.resolve({ available: "Available", permalink: "permalink"}) - promise = deferred.promise - spyOn(PermalinkChecker, "check").and.returnValue promise - $scope.$apply Enterprise.permalink = "somethingelse" # Change the permalink - expect(Enterprise.permalink).toEqual "permalink" - expect($scope.availability).toEqual "Available" - - it "does nothing when PermalinkChecker rejects", -> - $scope.availability = "Some Availability" - try - deferred.reject() - promise = deferred.promise - spyOn(PermalinkChecker, "check").and.returnValue promise - $scope.$apply Enterprise.permalink = "somethingelse" # Change the permalink - - expect($scope.availability).toEqual "Some Availability" - expect(Enterprise.permalink).toEqual "somethingelse"