headmin 0.4.2 → 0.5.2

data/app/assets/stylesheets/headmin/forms/file.scss

@@ -17,26 +17,41 @@
   display: flex;
   flex-wrap: wrap;
   gap: map-get($spacers, 2);
+
+  a, a:link, a:hover {
+    color: inherit;
+    text-decoration: inherit;
+  }
 }
 
 .h-form-file-thumbnail {
   position: relative;
   pointer-events: initial !important;
   display: flex;
+
+  &:hover {
+    .h-form-file-thumbnail-actions {
+      display: block;
+    }
+  }
+}
+
+.h-form-file-thumbnail-actions {
+  display: none;
 }
 
 .h-form-file-thumbnail-remove {
   position: absolute;
-  top: 0;
-  right: 0;
+  top: 5px;
+  right: 5px;
   background: $danger;
-  width: 20px;
-  height: 20px;
+  width: 25px;
+  height: 25px;
   display: flex;
   align-items: center;
   justify-content: center;
   color: white;
-  border-radius: $border-radius;
+  border-radius: $border-radius-pill;
   z-index: 3;
   cursor: pointer;
 
@@ -44,3 +59,23 @@
     background: tint-color($danger, $btn-hover-bg-tint-amount)
   }
 }
+
+.h-form-file-thumbnail-edit {
+  position: absolute;
+  top: 5px;
+  right: 35px;
+  background-color: rgba(0, 0, 0, 0.7);
+  width: 25px;
+  height: 25px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: $border-radius-pill;
+  z-index: 3;
+  cursor: pointer;
+  color: white !important;
+
+  &:hover {
+    background-color: rgba(0, 0, 0, 1);
+  }
+}

data/app/assets/stylesheets/headmin/forms/media.scss

@@ -0,0 +1,10 @@
+.h-form-media-validation {
+  opacity: 0;
+  width: 100px;
+  height: 0;
+  padding: 0;
+  margin: 0;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+}

data/app/assets/stylesheets/headmin/forms/repeater.scss

@@ -18,6 +18,10 @@
       visibility: visible;
     }
   }
+
+  .mb-3:last-of-type {
+    margin-bottom: 0 !important;
+  }
 }
 
 .repeater-row-remove {

data/app/assets/stylesheets/headmin/forms.scss

@@ -5,7 +5,14 @@
   }
 }
 
+.card-body {
+  .mb-3:last-child {
+    margin-bottom: 0 !important;
+  }
+}
+
 @import "forms/autocomplete";
 @import "forms/file";
+@import "forms/media";
 @import "forms/repeater";
 @import "forms/search";

data/app/assets/stylesheets/headmin/general.scss

@@ -1,6 +1,5 @@
 html {
   height: 100%;
-  background: red;
 }
 
 .list-group-item {

data/app/assets/stylesheets/headmin/layout/body.scss

@@ -2,5 +2,10 @@
   background: $card-cap-bg;
   height: 100vh;
   overflow-y: scroll;
+  display: flex;
+  flex-direction: column;
 }
 
+.content {
+  flex-grow: 1
+}

data/app/assets/stylesheets/headmin/layout/sidebar.scss

@@ -14,7 +14,6 @@
 .nav-brand {
   svg, img {
     max-width: 100%;
-    height: 30px;
   }
   svg {
     fill: $white;

data/app/assets/stylesheets/headmin/media/index.scss

@@ -0,0 +1,9 @@
+.media-modal {
+  .h-thumbnail {
+    cursor: pointer;
+  }
+
+  input[type="checkbox"]:checked + label .h-thumbnail {
+    background-color: #0d6efd;
+  }
+}

data/app/assets/stylesheets/headmin/media.scss

@@ -0,0 +1 @@
+@import "media/index";

data/app/assets/stylesheets/headmin/popup.scss

@@ -2,7 +2,6 @@
   padding: 10px;
   background: $white;
   z-index: $zindex-popover;
-  width: $popover-max-width;
   @include reset-text();
   @include font-size($popover-font-size);
   word-wrap: break-word;

data/app/assets/stylesheets/headmin/table.scss

@@ -34,3 +34,18 @@
     max-width: 100%;
   }
 }
+
+.h-table-cell-image {
+  padding: 0.4rem 1rem !important;
+
+  img {
+    border-radius: 3px;
+  }
+}
+
+.h-table-cell-color {
+  width: 22px;
+  height: 22px;
+  border-radius: 3px;
+  background-color: var(--cell-color);
+}

data/app/assets/stylesheets/headmin.css

@@ -1,7 +1,7 @@
 @charset "UTF-8";
 @import "https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css";
 
-/* sass-plugin-0:/opt/homebrew/var/www/headmin/src/scss/headmin.scss */
+/* sass-plugin-0:/usr/local/var/www/headmin/src/scss/headmin.scss */
 :root {
   --bs-blue: #0d6efd;
   --bs-indigo: #6610f2;
@@ -12971,6 +12971,9 @@ span.flatpickr-weekday {
   content: " *";
   color: #dc3545;
 }
+.card-body .mb-3:last-child {
+  margin-bottom: 0 !important;
+}
 .h-autocomplete {
   position: absolute;
   top: calc(100% + 2px);
@@ -13019,29 +13022,69 @@ span.flatpickr-weekday {
   flex-wrap: wrap;
   gap: 0.5rem;
 }
+.h-form-file-thumbnails a,
+.h-form-file-thumbnails a:link,
+.h-form-file-thumbnails a:hover {
+  color: inherit;
+  text-decoration: inherit;
+}
 .h-form-file-thumbnail {
   position: relative;
   pointer-events: initial !important;
   display: flex;
 }
+.h-form-file-thumbnail:hover .h-form-file-thumbnail-actions {
+  display: block;
+}
+.h-form-file-thumbnail-actions {
+  display: none;
+}
 .h-form-file-thumbnail-remove {
   position: absolute;
-  top: 0;
-  right: 0;
+  top: 5px;
+  right: 5px;
   background: #dc3545;
-  width: 20px;
-  height: 20px;
+  width: 25px;
+  height: 25px;
   display: flex;
   align-items: center;
   justify-content: center;
   color: white;
-  border-radius: 0.25rem;
+  border-radius: 50rem;
   z-index: 3;
   cursor: pointer;
 }
 .h-form-file-thumbnail-remove:hover {
   background: #e15361;
 }
+.h-form-file-thumbnail-edit {
+  position: absolute;
+  top: 5px;
+  right: 35px;
+  background-color: rgba(0, 0, 0, 0.7);
+  width: 25px;
+  height: 25px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50rem;
+  z-index: 3;
+  cursor: pointer;
+  color: white !important;
+}
+.h-form-file-thumbnail-edit:hover {
+  background-color: black;
+}
+.h-form-media-validation {
+  opacity: 0;
+  width: 100px;
+  height: 0;
+  padding: 0;
+  margin: 0;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+}
 .repeater {
   position: relative;
 }
@@ -13057,6 +13100,9 @@ span.flatpickr-weekday {
 .repeater-row:hover .repeater-row-handle {
   visibility: visible;
 }
+.repeater-row .mb-3:last-of-type {
+  margin-bottom: 0 !important;
+}
 .repeater-row-remove {
   position: absolute;
   top: calc(50% - 17px);
@@ -13103,7 +13149,6 @@ input[type=search] {
 }
 html {
   height: 100%;
-  background: red;
 }
 .list-group-item.active .text-muted {
   color: #fff !important;
@@ -13117,6 +13162,11 @@ mark,
   background: rgba(0, 0, 0, 0.03);
   height: 100vh;
   overflow-y: scroll;
+  display: flex;
+  flex-direction: column;
+}
+.content {
+  flex-grow: 1;
 }
 .sidebar {
   font-size: 0.99rem;
@@ -13134,7 +13184,6 @@ mark,
 .nav-brand svg,
 .nav-brand img {
   max-width: 100%;
-  height: 30px;
 }
 .nav-brand svg {
   fill: #ffffff;
@@ -13200,6 +13249,18 @@ body.empty {
   width: 300px;
   max-width: 100%;
 }
+.h-table-cell-image {
+  padding: 0.4rem 1rem !important;
+}
+.h-table-cell-image img {
+  border-radius: 3px;
+}
+.h-table-cell-color {
+  width: 22px;
+  height: 22px;
+  border-radius: 3px;
+  background-color: var(--cell-color);
+}
 .btn-link {
   text-decoration: none;
 }
@@ -13310,6 +13371,54 @@ body.empty {
 .h-filter-popup.closed {
   display: none;
 }
+.h-filter-row {
+  padding: 0.5rem 0 0.5rem 0;
+  position: relative;
+  flex-wrap: unset;
+  display: flex;
+  gap: 10px;
+}
+.h-filter-row:first-child {
+  padding-top: 0;
+}
+.h-filter-row:hover .h-filter-add-input,
+.h-filter-row:hover .h-filter-remove-input {
+  display: block;
+}
+.h-filter-row input,
+.h-filter-row select:not(.h-filter-operator) {
+  min-width: 200px;
+}
+.h-filter-operator {
+  width: 62px;
+}
+.h-filter-conditional {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.h-filter-conditional select {
+  width: 50px;
+}
+.h-filter-conditional::before {
+  content: "";
+  position: absolute;
+  top: calc(50% - 1px);
+  left: 0;
+  width: calc(50% - 35px);
+  height: 1px;
+  background: rgba(0, 0, 0, 0.2);
+}
+.h-filter-conditional::after {
+  content: "";
+  position: absolute;
+  top: calc(50% - 1px);
+  left: calc(50% + 35px);
+  width: calc(50% - 35px);
+  height: 1px;
+  background: rgba(0, 0, 0, 0.2);
+}
 .h-filter-remove {
   border-left: 1px solid #d1d5db;
   padding-left: 8px;
@@ -13318,11 +13427,30 @@ body.empty {
 .h-filter-remove i::before {
   font-size: 0.8em;
 }
+.h-filter-add-input {
+  position: absolute !important;
+  top: calc(100% - 12px);
+  left: calc(50% - 17px);
+  z-index: 9;
+  display: none;
+}
+.h-filter-remove-input {
+  position: absolute !important;
+  top: calc(50% - 15px);
+  left: calc(100% - 4px);
+  z-index: 9;
+  display: none;
+}
+.media-modal .h-thumbnail {
+  cursor: pointer;
+}
+.media-modal input[type=checkbox]:checked + label .h-thumbnail {
+  background-color: #0d6efd;
+}
 .h-popup {
   padding: 10px;
   background: #ffffff;
   z-index: 1070;
-  width: 276px;
   font-family: var(--bs-font-sans-serif);
   font-style: normal;
   font-weight: 400;

data/app/assets/stylesheets/headmin.scss

@@ -60,6 +60,7 @@
 @import "headmin/table";
 @import "headmin/utilities";
 @import "headmin/filter";
+@import "headmin/media";
 @import "headmin/popup";
 @import "headmin/thumbnail";
 @import "headmin/syntax";

data/app/controllers/concerns/headmin/filterable.rb

@@ -0,0 +1,27 @@
+module Headmin
+  module Filterable
+    # Will create a Headmin::Filters object with a default configuration for "id" and "search"
+    #
+    # Example:
+    #
+    # orders = Order
+    # orders = filter(orders, {
+    #  status: :text,
+    #  price: :number,
+    #  in_stock: :boolean
+    #  })
+    # @orders = orders.all
+
+    def filter(collection, filter_types = {})
+      type_hash = default_filter_types.merge(filter_types)
+      Headmin::Filters.new(params, type_hash).query(collection)
+    end
+
+    def default_filter_types
+      {
+        id: :number,
+        search: :search
+      }
+    end
+  end
+end

data/app/controllers/headmin/media_controller.rb

@@ -0,0 +1,52 @@
+class Headmin::MediaController < HeadminController
+  layout false
+
+  def index
+    @blobs =
+      ActiveStorage::Blob
+        .left_outer_joins(:attachments)
+        .where.not(active_storage_attachments: {record_type: "ActiveStorage::VariantRecord"}) # Not a variant
+        .or(ActiveStorage::Blob.where(active_storage_attachments: {id: nil})) # Or an orphan
+        .order(created_at: :desc)
+        .group(:id)
+        .all
+  end
+
+  def create
+    blobs = []
+    media_params[:files].reject { |c| c.blank? }.each do |file|
+      blobs << ActiveStorage::Blob.create_and_upload!(io: file, filename: file.original_filename)
+    end
+
+    respond_to do |format|
+      format.turbo_stream {
+        @blobs = blobs
+      }
+      format.html { redirect_to root_path }
+    end
+  end
+
+  def show
+    @blob = ActiveStorage::Blob.find(params[:id])
+  end
+
+  def update
+    @blob = ActiveStorage::Blob.find(params[:id])
+    media_item_params[:filename] = media_item_params[:filename] + "." + @blob.filename.to_s.rpartition(".").last
+    if @blob.update(media_item_params)
+      flash.now[:notice] = t("admin.flash.updated", name: @blob.filename)
+    end
+  end
+
+  private
+
+  def media_params
+    params.permit(
+      files: []
+    )
+  end
+
+  def media_item_params
+    params.require(:blob).permit!
+  end
+end

data/app/controllers/headmin_controller.rb

@@ -0,0 +1,2 @@
+class HeadminController < ApplicationController
+end

data/app/models/concerns/headmin/field.rb

@@ -5,7 +5,6 @@ module Headmin
     included do
       # Configuration
       has_closure_tree
-
       # Associations
       belongs_to :fieldable, polymorphic: true, optional: true, touch: true
       belongs_to :field, optional: true, touch: true

data/app/models/concerns/headmin/fieldable.rb

@@ -17,10 +17,19 @@ module Headmin
         @fields_hash = hash
       end
 
+      def include_tables
+        []
+      end
+
+      def default_include_tables
+        [files_attachments: :blob]
+      end
+
       private
 
       def parse_fields
-        fields.where(parent: nil).order(position: :asc).map { |field| parse_hash_tree(field.hash_tree) }.reduce({}, :merge)
+        hash_tree = fields.includes(default_include_tables | include_tables).order(position: :asc).hash_tree
+        parse_hash_tree(hash_tree)
       end
 
       def build_fields

data/app/models/concerns/headmin/form/hintable.rb

@@ -8,9 +8,14 @@ module Headmin
           hint.present?
         end
 
+        def maxlength?
+          maxlength.present?
+        end
+
         def hint_options
           {
-            content: hint
+            content: hint,
+            maxlength: maxlength
           }
         end
       end

data/app/models/headmin/blocks_view.rb

@@ -9,7 +9,7 @@ module Headmin
     end
 
     def prefixes
-      paths + ["website/blocks", "blocks", ""]
+      paths + ["website/blocks", "blocks"]
     end
   end
 end