Replace permalinks angular ctrl with stimulus

app/assets/javascripts/admin/enterprises/controllers/permalink_controller.js.coffee

@@ -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)

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
 

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

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'

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");
+  }
+}

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

spec/javascripts/unit/admin/enterprises/controllers/permalink_controller_spec.js.coffee

@@ -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"