[feature] AJAX'ify API resource list view (#1461) (#1480)

* [feature] AJAX'ify API resource list view (#1461)

Addresses: #1406

Demo:


https://user-images.githubusercontent.com/50227291/225883851-dca39d67-f12e-4ad0-b1b1-2cd44e1e1f74.mov

Co-authored-by: Pralish Kayastha <[email protected]>
Co-authored-by: Ajay Shrestha <[email protected]>

app/assets/stylesheets/api_namespaces.scss

@@ -1,3 +1,147 @@
 // Place all the styles related to the ApiNamespaces controller here.
 // They will automatically be included in application.css.
 // You can use Sass (SCSS) here: https://sass-lang.com/
+
+#api-resources-list{
+  a:not(.btn) {
+    color: #6F5AFE;
+  }
+
+  .digg_pagination {
+    border-bottom: 1px solid #343A4014;;
+  }
+
+  .api-resources-table-container {
+    max-height: 700px;
+    overflow: auto;
+    border-top: 1px solid #dee2e6;
+    border-bottom: 1px solid #dee2e6;
+
+    #api-resources-table {
+      font-size: 14px;
+      line-height: 17px;
+      border-collapse: collapse;
+
+      thead tr th {
+        position: sticky;
+        top: 0;
+        height: 57px;
+        vertical-align: middle;
+        border: 1px solid #dee2e6;
+        background: #ffffff;
+        text-align: center;
+
+        a {
+          color: #495057;
+          font-weight: 500;
+        }
+      }
+
+      td {
+        vertical-align: middle;
+
+        .td-content {
+          height: 80px;
+          max-height: 80px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          min-width: 80px;
+        }
+
+        .clamp-content {
+          display: -webkit-box;
+          max-width: 300px;
+          -webkit-line-clamp: 3;
+          -webkit-box-orient: vertical;
+          overflow: hidden;
+          min-width: 180px;
+        }
+      }
+
+      .date-col {
+        min-width: 130px;
+      }
+
+      .view-dynamic-column {
+        white-space: nowrap;
+      }
+    }
+  }
+
+  & > form {
+
+    .search-box {
+      position: relative;
+      display: flex;
+      align-items: center;
+
+      input[type='search'] {
+        height: 48px;
+        background: #B1B1B10A 0% 0% no-repeat padding-box;
+        border: 1px solid #E3E5E9;
+        border-radius: 4px;
+
+        &::-webkit-search-cancel-button{
+          height: 20px;
+          width: 20px;
+          border-radius:10px;
+          cursor: pointer;
+        }
+      }
+
+      .search-action {
+        position: absolute;
+        right: 0;
+
+        .clear-text-btn {
+          border: none;
+          outline: none;
+          background-color: transparent;
+        }
+      }
+    }
+
+    #created-at-filter,
+    #updated-at-filter {
+      cursor: pointer;
+    }
+  }
+
+  .modal {
+    .modal-header {
+      border-bottom: none;
+
+      .modal-title {
+        text-transform: capitalize;
+        font-size: 16px;
+        line-height: 19px;
+        font-weight: 600;
+      } 
+    }
+
+    #modal-id {
+      font-size: 14px;
+      line-height: 17px;
+    }
+
+    pre#modal-body-content {
+      white-space: break-spaces;
+      background-color: #343A400A;
+      font-size: 14px;
+      line-height: 17px;
+      border-radius: 6px;
+      font-family: inherit;
+    }
+  }
+
+
+  @media (max-width: 576px) {
+    .modal-dialog {
+      position: absolute;
+      bottom: 0;
+      margin: 0;
+      width: 100%
+    }
+  }
+}

app/assets/stylesheets/application.scss

@@ -19,7 +19,7 @@
  @import "./actiontext.scss";
  @import 'select2/dist/css/select2.css';
  @import './direct_upload.scss';
- @import 'bootstrap-daterangepicker/daterangepicker';
+ @import 'daterangepicker/daterangepicker';
 
  .alert-file_url {
    display: none;

app/controllers/comfy/admin/api_namespaces_controller.rb

@@ -48,7 +48,15 @@ def show
     if field && fields_in_properties.include?(field)
       @api_resources = @api_resources.jsonb_order_pre({ "properties" => { "#{field}": "#{direction}" }})
     end
+
+    if turbo_frame_request?
+      render partial: "comfy/admin/api_namespaces/api_resources/table", locals: { api_resources: @api_resources, api_resources_q: @api_resources_q, api_namespace: @api_namespace }
+    else
+      render :show
+    end
   end
+
+
 
   # GET /api_namespaces/new
   def new

app/controllers/comfy/admin/api_resources_controller.rb

@@ -67,6 +67,7 @@ def destroy
     respond_to do |format|
       format.html { redirect_to api_namespace_path(id: @api_namespace.id), notice: "Api resource was successfully destroyed." }
       format.json { head :no_content }
+      format.js
     end
   end
 

app/javascript/controllers/api_resources_controller.js

@@ -0,0 +1,85 @@
+import { Controller } from "@hotwired/stimulus";
+import moment from "moment";
+import 'daterangepicker';
+
+export default class extends Controller {
+  static targets = [ 'searchForm', 'modal' ]
+
+  ranges = {
+    'Last 7 days': [moment().subtract(6, 'days'), moment()],
+    'Last 30 days': [moment().subtract(29, 'days'), moment()],
+    'Last 3 months': [moment().subtract(2, 'months').startOf('month'), moment().endOf('month')],
+    'Last 12 months': [moment().subtract(11, 'months').startOf('month'), moment().endOf('month')],
+    'Month to date': [moment().startOf('month'), moment()],
+    'Quarter to date': [moment().startOf('quarter'), moment()],
+    'All time': [moment().subtract(20, 'years'), moment()]
+  }
+
+  initialize() {
+    $('#created-at-filter').daterangepicker({
+      opens: 'left',
+      locale: {
+        format: 'YYYY/MM/DD'
+      },
+      startDate: $("#q_created_at_gteq").val() || moment().subtract(20, 'years').endOf('day'),
+      endDate: $("#q_created_at_end_of_day_lteq").val() || moment().endOf('day'),
+      ranges: this.ranges,
+    }, function(start, end, label) {
+      $('#q_created_at_gteq').val(start.format('YYYY-MM-DD'));
+      $('#q_created_at_end_of_day_lteq').val(end.format('YYYY-MM-DD')).trigger("input");
+    });
+
+    $('#updated-at-filter').daterangepicker({
+      opens: 'left',
+      locale: {
+        format: 'YYYY/MM/DD'
+      },
+      startDate: $("#q_updated_at_gteq").val() || moment().subtract(20, 'years').endOf('day'),
+      endDate: $("#q_updated_at_end_of_day_lteq").val() || moment().endOf('day'),
+      ranges: this.ranges,
+    }, function(start, end, label) {
+      $('#q_updated_at_gteq').val(start.format('YYYY-MM-DD'));
+      $('#q_updated_at_end_of_day_lteq').val(end.format('YYYY-MM-DD')).trigger("input");
+    });
+
+    $(this.searchFormTarget).on("input", (_event, _params) => {
+      this.search();
+    });
+  }
+
+  search() {
+    clearTimeout(this.timeout)
+    this.timeout = setTimeout(() => {
+      this.searchFormTarget.requestSubmit();
+    }, 200)
+  }
+
+  clearText() {
+    const searchField = this.searchFormTarget.querySelector("input[type='search']");
+    searchField.value = "";
+    this.searchFormTarget.requestSubmit();
+  }
+
+  showModal(e) {
+    const dataset = e.target.dataset;
+    this.modalTarget.querySelector('#myModalLabel').textContent = dataset['column'];
+    this.modalTarget.querySelector('#modal-id').innerHTML = `ID: <a href="/api_namespaces/${dataset['namespaceId']}/resources/${dataset['id']}">${dataset['id']}</a>`;
+    this.modalTarget.querySelector('#modal-body-content').textContent = dataset['value'];
+  }
+
+  reloadTable() {
+    const params = new URLSearchParams(location.search);
+    // preserve page and sort order number while submitting form
+    if (params.get('page')) {
+      $(this.searchFormTarget).append(`<input type="hidden" name="page" value="${params.get('page')}" />`);
+    }
+
+    if (params.get('q[s]')) {
+      $(this.searchFormTarget).append(`<input type="hidden" name="q[s]" value="${params.get('q[s]')}" />`);
+    }
+    this.searchFormTarget.requestSubmit();
+
+    this.searchFormTarget.querySelector('input[name="page"]')?.remove();
+    this.searchFormTarget.querySelector('input[name="q[s]"]')?.remove();
+  }
+}

app/javascript/controllers/dashboard_controller.js

@@ -0,0 +1,42 @@
+import { Controller } from "@hotwired/stimulus";
+import moment from "moment";
+import 'daterangepicker';
+
+export default class extends Controller {
+  initialize() {
+    $('[data-toggle="tooltip"]').tooltip();
+
+    $('#reportrange').daterangepicker({
+        opens: 'left',
+        locale: {
+          format: 'YYYY/MM/DD'
+        },
+        startDate: $("#start_date").val() || moment().startOf('month'),
+        endDate: $("#end_date").val() || moment().endOf('month'),
+        ranges: {
+          [moment().format('MMMM YYYY')]: [moment().startOf('month'), moment().endOf('month')],
+          '3 months': [moment().startOf('month').subtract(2, 'months'), moment().endOf('month')],
+          '6 months': [moment().startOf('month').subtract(5, 'months'), moment().endOf('month')],
+          '1 year': [moment().startOf('month').subtract(11, 'months'), moment().endOf('month')]
+        }
+    }, (start, end, label) => {
+      $('#start_date').val(start.format('YYYY-MM-DD'));
+      $('#end_date').val(end.format('YYYY-MM-DD'));
+      $('#interval').val(label);
+      this.cb();
+      $("#analytics_filter").submit();
+    });
+
+    this.cb();
+  }
+
+  cb() {
+    if (!$('#start_date').val() && !$('#end_date').val()) {
+      $('#reportrange span').html(moment().format('MMMM YYYY'));
+    } else if ($('#interval').val() == 'Custom Range') {
+      $('#reportrange span').html(moment($("#start_date").val()).format('MMMM D, YYYY') + ' - ' + moment($("#end_date").val()).format('MMMM D, YYYY'));
+    } else {
+      $('#reportrange span').html($('#interval').val());
+    }
+  }
+}

app/javascript/controllers/index.js

@@ -0,0 +1,9 @@
+// Load all the controllers within this directory and all subdirectories. 
+// Controller files must be named *_controller.js.
+
+import { Application } from "stimulus"
+import { definitionsFromContext } from "stimulus/webpack-helpers"
+
+const application = Application.start()
+const context = require.context("controllers", true, /_controller\.js$/)
+application.load(definitionsFromContext(context))

app/javascript/packs/application.js

@@ -8,15 +8,18 @@ import Rails from "@rails/ujs"
 import "channels"
 import "bootstrap"
 import "chartkick/chart.js"
-
 import ahoy from "ahoy.js";
+import jQuery from 'jquery';
+
 window.ahoy = ahoy;
+global.$ = global.jQuery = jQuery;
 
 Rails.start()
 
-require("jquery")
 require("./trix")
 require("./tribute")
 require("./select2")
 require("./common")
-require("./turbo")
+require("./turbo")
+
+import "controllers"

app/javascript/packs/comfy/admin/cms.js

@@ -1,4 +1,9 @@
 import Sortable from 'sortablejs';
+import jQuery from 'jquery';
+import "controllers"
+
+global.$ = global.jQuery = jQuery;
+
 window.addEventListener('DOMContentLoaded', (event) => {
 
     $('.js-sortable').each(function() {