[WIP] Initial setup of CollectionCard::Section

- for now, sections are just created with one click and hardcoded at 3x3

Author: kaptron

app/controllers/api/v1/collection_cards_controller.rb

@@ -783,6 +783,7 @@ def collection_card_attributes
       show_replace
       card_type
       section_type
+      section_name
       font_color
       font_background
     ]

app/javascript/ui/grid/FoamcoreGrid.js

@@ -490,6 +490,7 @@ class FoamcoreGrid extends React.Component {
     const { collection, trackCollectionUpdated, uiStore } = this.props
     let { height, width } = uiStore.placeholderSpot
     // Some double-checking validations
+    // TODO: allow sections to be as big as you want?
     const maxHeight = this.calcEdgeRow(card)
     const maxWidth = this.calcEdgeCol(card)
     if (height > maxHeight) height = maxHeight

app/javascript/ui/grid/HotCell.js

@@ -175,13 +175,19 @@ class HotCell extends React.Component {
   }
 
   get collectionTypes() {
-    return [
+    const { isFourWideBoard } = this.props
+    let types = [
       { name: 'collection', description: 'Create Collection' },
       { name: 'foamcoreBoard', description: 'Create Foamcore Board' },
       { name: 'searchCollection', description: 'Create Search Collection' },
       { name: 'submissionBox', description: 'Create Submission Box' },
+      { name: 'section', description: 'Create Section' },
       { name: 'testCollection', description: 'Get Feedback' },
     ]
+    if (isFourWideBoard) {
+      types = _.reject(types, t => t.name === 'section')
+    }
+    return types
   }
 
   get textTypes() {

app/javascript/ui/grid/HotCellQuadrant.js

@@ -92,6 +92,8 @@ const nameToIcon = {
   template: TemplateIcon,
   useTemplate: TemplateIcon,
   testCollection: FeedbackIcon,
+  // TODO: section icon
+  section: TemplateIcon,
   text: TextIcon,
   video: VideoIcon,
 }

app/javascript/ui/grid/MovableGridCard.js

@@ -288,6 +288,7 @@ class MovableGridCard extends React.Component {
       width: card.width + Math.floor(delta.width / gridW + pad),
       height: card.height + Math.floor(delta.height / gridH + pad),
     }
+    // TODO: allow sections to be as big as you want?
     // e.g. if card.width is 4, but we're at 2 columns, max out at cardWidth = 2
     newSize.width = Math.max(Math.min(newSize.width, cols), 1)
     // always max out height at 2

app/javascript/ui/grid/interactionLayer/FoamcoreInteractionLayer.js

@@ -14,7 +14,10 @@ import RowActions from './RowActions'
 import PositionedBlankCard from '~/ui/grid/interactionLayer/PositionedBlankCard'
 import FoamcoreHotEdge from '~/ui/grid/FoamcoreHotEdge'
 import FilestackUpload, { MAX_SIZE } from '~/utils/FilestackUpload'
-import v, { FOAMCORE_INTERACTION_LAYER, ITEM_TYPES } from '~/utils/variables'
+import v, {
+  FOAMCORE_INTERACTION_LAYER,
+  ITEM_TYPES,
+} from '~/utils/variables'
 import googleTagManager from '~/vendor/googleTagManager'
 
 const DragLayerWrapper = styled.div`
@@ -301,6 +304,23 @@ class FoamcoreInteractionLayer extends React.Component {
     })
   }
 
+  createSection = async ({ col, row, height = 3, width = 3 } = {}) => {
+    const { collection, apiStore } = this.props
+    const attrs = {
+      col,
+      row,
+      width,
+      height,
+      section_name: 'New Section',
+      card_type: 'section',
+      parent_id: collection.id,
+    }
+
+    const card = new CollectionCard(attrs, apiStore)
+    console.log('creating new section at', row, col)
+    card.API_create()
+  }
+
   @action
   resetHoveringRowCol() {
     this.hoveringRowCol = { row: null, col: null }
@@ -415,6 +435,12 @@ class FoamcoreInteractionLayer extends React.Component {
         col,
       })
       return
+    } else if (contentType === 'section') {
+      this.createSection({
+        row,
+        col,
+      })
+      return
     }
 
     // If we're already in the process of creating a hot edge and placeholder

app/javascript/utils/variables.js

@@ -49,6 +49,7 @@ export const COLLECTION_CARD_TYPES = {
   PRIMARY: 'CollectionCard::Primary',
   LINK: 'CollectionCard::Link',
   PLACEHOLDER: 'CollectionCard::Placeholder',
+  SECTION: 'CollectionCard::Section',
 }
 
 export const DATASET_CHART_TYPES = {

app/models/collection.rb

@@ -168,6 +168,13 @@ class Collection < ApplicationRecord
            foreign_key: :parent_id,
            inverse_of: :parent
 
+  # sections within this collection
+  has_many :section_collection_cards,
+           -> { active.ordered },
+           class_name: 'CollectionCard::Section',
+           foreign_key: :parent_id,
+           inverse_of: :parent
+
   has_many :hidden_collection_cards,
            -> { active.hidden },
            class_name: 'CollectionCard::Primary',

app/models/collection_card.rb

@@ -21,6 +21,7 @@
 #  parent_snapshot   :jsonb
 #  pinned            :boolean          default(FALSE)
 #  row               :integer
+#  section_name      :string
 #  section_type      :integer
 #  show_replace      :boolean          default(TRUE)
 #  type              :string
@@ -83,6 +84,7 @@ class CollectionCard < ApplicationRecord
   validates :parent, presence: true
   validate :single_item_or_collection_is_present
   validate :parent_is_not_readonly, on: :create
+  # section_type is used by TestCollections e.g. for the "ideas section"
   validates :section_type, presence: true, if: :parent_test_collection?
 
   delegate :board_collection?, :test_collection?,
@@ -331,6 +333,10 @@ def placeholder?
     is_a? CollectionCard::Placeholder
   end
 
+  def section?
+    is_a? CollectionCard::Section
+  end
+
   def master_template_card?
     # does this card live in a MasterTemplate?
     parent&.master_template?

app/models/collection_card/link.rb

@@ -21,6 +21,7 @@
 #  parent_snapshot   :jsonb
 #  pinned            :boolean          default(FALSE)
 #  row               :integer
+#  section_name      :string
 #  section_type      :integer
 #  show_replace      :boolean          default(TRUE)
 #  type              :string