Feature/shop categories (#760)

* Update graphql types * Create route and page for categories settings * Create initial data structures * Add categories field to community * Use correct Community-Domain header when possible * Implement basic categories view * Add basic tree view, with support to adding nested and root categories * Update graphql types * Include parentId in Category.Model, remove recursive selectionSet * Better tree view, highlight parents when hovering * Remove unused export * Create parent-* variants * Add ability to update categories * Make Icons.trash color configurable * Create wrapper around DeleteStatus * Add ability to delete categories * Improve errors, update community model after completing operations * Leave form open after creating new category * Rework deletion status to allow multiple simultaneous deletions, add back button * Restrict page to admins * Restructure html to have more semantic lists * Leave summaries highlighted while category creation form is open, transition colors * Use markdown for category description * Change bg, add basic actions panel * Create updateMetadata, include slug in category model * Add metadata form with a nice little preview ✨ * Use skeleton loading, adjust spacings * Prevent selection and text wrap * Add drag-drop-touch polyfill * Update graphql types * Update parentId -> parent * Implement basic drag and drop functionality * Show valid drop zones, perform validations * Refactor isAncestorOf * Expand categories when dragging over them * Listen to dragLeave event * Perform mutation when dropping elements * Allow moving categories to the root * Refactor mutations to use the optionals object * Fix according to elm-review * Add move up and down buttons, implement move up * Implement move down * Expand categories when moving child * Hide move up and down buttons when it's not possible to go up or down * Initialize metadata form with category data, close modal when done saving * Add settings card * Add ids to description input id * Fix rich text editor bug on safari, fix borders * Hide form after creating new category * Hide new category form if ancestor has been collapsed * Add icon to categories * Add category image * Show image or icon on sharing preview * Adjust action icons sizes * Add side scrolling with sticky positioning * Add empty message, fix add category button sticky * Adjust icon and overflows * Add focus styles and aria attributes * Remove coment * Add translations * Fix translation, use defaults on metadata, always ask for confirmation before deleting * Accept empty slugs * Disable modal buttons when saving form * Remove comment * Add icon and image to creation form * Use icon before image * Dont accept empty slugs * Add tooltip when slug is invalid * Add translations for invalid slug tooltip * Make keywords a list of strings * Show keywords in link preview * Adjust draggingElement and draggingOverElement in some cases * Allow reordering keywords * Fix elm-book build * Fix elm.json * Show category icon if present * Move edit category action to menu * Renamed ClickedCategory -> ClickedEditCategory * Change root category dropzone and button, remove useless element * Change text colors and weights * Add page description * Dont show modal header and body text while loading file type * Focus icon input instead of name * Show menu on right click * Only send meta title and description if they've been altered * Change Slug -> Sharing URL * Adjust root button size * Only change bg when open on button * Add description on image input * Use different ellipsis icon, adjust icon sizes * Consider accentuated characters in slugs * Add elm-slug in elm-book * Update graphql types to include position * Order incoming categories by their position * Move children when clicking up and down * Adjust optimistic updates on click move up/down * Remove position related stuff * Send position = 0 * Remove menu y margin * Add more spacing on modal * Translate modal title * Only root categories are bold * Prevent context menu on mobile * Show context menu on different side depending on click position
cambiatus · Jul 6, 2022 · 86521e4 · 86521e4
1 parent 224eb57
commit 86521e4
Show file tree

Hide file tree

Showing 45 changed files with 3,843 additions and 52 deletions.
diff --git a/config/polyfills.js b/config/polyfills.js
@@ -14,6 +14,10 @@ require('whatwg-fetch')
 // Some browsers still don't support the focus-visible css class
 require('focus-visible')
 
+// Mobile browsers don't support the drag and drop API. This polyfill listens to
+// touch events in order to simulate that on mobile devices
+require('drag-drop-touch')
+
 // Object.assign() is commonly used with React.
 // It will use the native implementation if it's present and isn't buggy.
 Object.assign = require('object-assign')
diff --git a/elm-book/elm.json b/elm-book/elm.json
@@ -31,6 +31,7 @@
             "elm-community/maybe-extra": "5.2.1",
             "elm-explorations/test": "1.2.2",
             "fapian/elm-html-aria": "1.4.0",
+            "hecrj/elm-slug": "1.0.2",
             "justinmimbs/date": "3.2.1",
             "krisajenkins/remotedata": "6.0.1",
             "pablohirafuji/elm-syntax-highlight": "3.4.1",

diff --git a/elm-book/src/elm/Book/Form/Toggle.elm b/elm-book/src/elm/Book/Form/Toggle.elm
@@ -81,7 +81,7 @@ view model =
                 identity
 
             else
-                Form.Toggle.withTooltip { message = model.tooltip, iconClass = "" }
+                Form.Toggle.withTooltip { message = model.tooltip, iconClass = "", containerClass = "" }
     in
     Html.div [ Html.Attributes.class "space-y-4" ]
         [ Html.div []
@@ -170,6 +170,7 @@ chapter =
                         |> Form.Toggle.withTooltip
                             { message = "Some longer description about what the toggle does. By the way, we can also add attributes to the question mark icon, such as changing the color on it"
                             , iconClass = ""
+                            , containerClass = ""
                             }
                     )
                     (baseViewOptions False)

diff --git a/elm.json b/elm.json
@@ -7,6 +7,7 @@
     "dependencies": {
         "direct": {
             "CurrySoftware/elm-datepicker": "4.0.0",
+            "Gizra/elm-all-set": "1.0.1",
             "Gizra/elm-debouncer": "2.0.0",
             "NeoVier/elm-mask": "2.0.4",
             "NoRedInk/elm-json-decode-pipeline": "1.0.0",
@@ -33,6 +34,7 @@
             "elm-community/string-extra": "4.0.1",
             "elm-explorations/test": "1.2.2",
             "fapian/elm-html-aria": "1.4.0",
+            "hecrj/elm-slug": "1.0.2",
             "jfmengels/elm-review": "2.3.2",
             "justinmimbs/date": "3.2.1",
             "justinmimbs/time-extra": "1.1.0",
@@ -44,7 +46,8 @@
             "rtfeldman/elm-iso8601-date-strings": "1.1.3",
             "rtfeldman/elm-validate": "4.0.1",
             "ryannhg/date-format": "2.3.0",
-            "thaterikperson/elm-strftime": "2.0.2"
+            "thaterikperson/elm-strftime": "2.0.2",
+            "zwilias/elm-rosetree": "1.5.0"
         },
         "indirect": {
             "elm/bytes": "1.0.8",

diff --git a/package.json b/package.json
@@ -91,6 +91,7 @@
     "copy-webpack-plugin": "^5.0.4",
     "create-elm-app": "^4.0.0",
     "css-loader": "^0.28.9",
+    "drag-drop-touch": "^1.3.1",
     "elm": "^0.19.1-5",
     "elm-asset-webpack-loader": "^1.1.1",
     "elm-format": "^0.8.5",

diff --git a/public/translations/amh-ETH.json b/public/translations/amh-ETH.json
@@ -870,6 +870,56 @@
     },
     "disabled": {
       "description": "ለማህበረሰቢ ይህ ሱቁ አለተፈቀደም."
+    },
+    "categories": {
+      "admin_page_description": "በሱቁ ውስጥ የሚገኙትን ምድቦች ያክሉ እና ያስተዳድሩ።",
+      "empty": {
+        "title": "የእርስዎ ማህበረሰብ ምንም አይነት ምድቦች ያለው አይመስልም!",
+        "description": "ከዚህ በታች አዲስ ምድብ በመፍጠር ይጀምሩ"
+      },
+      "add_root": "አዲስ ምድብ ያክሉ",
+      "add_child": "የ{{parent_name}} ንዑስ ምድብ አክል",
+      "click_category_to_edit": "{{category_name}} - ለማርትዕ ጠቅ ያድርጉ",
+      "actions_for": "እርምጃዎች ለ {{category_name}}",
+      "fields": {
+        "name": "ስም",
+        "slug": "URL አጋራ",
+        "description": "መግለጫ",
+        "image": "ምስል",
+        "meta": {
+          "title": "ርዕስ",
+          "description": "መግለጫ",
+          "keywords": "ቁልፍ ቃላት"
+        }
+      },
+      "form": {
+        "insert_name": "የተጋራ ዩአርኤል ለማመንጨት ስም ያስገቡ",
+        "invalid_slug": "ልክ ያልሆነ የማጋራት URL",
+        "invalid_slug_tooltip": "የላቲን ያልሆኑ ቁምፊዎች በዩአርኤሎች ውስጥ ተቀባይነት የላቸውም። የሚሰራ ዩአርኤል ለማመንጨት የምድብ ስሙ ቢያንስ አንድ የላቲን ቁምፊ ሊኖረው ይገባል።",
+        "image_guidance": "ምስሎችን በከፍተኛ ጥራት በወርድ ሁነታ ይምረጡ"
+      },
+      "metadata": {
+        "title": "ውሂብ ማጋራት",
+        "guidance": "ይህ መረጃ ይህን ምድብ ሲያጋሩ ተጨማሪ መረጃን ለማሳየት ይጠቅማል።",
+        "preview": "ቅድመ እይታ",
+        "preview_text": "ይህ የተጋራው ይዘት ምን እንደሚመስል ግምታዊ ግምት ነው። አገናኙ እየተጋራበት ባለው መድረክ ላይ በመመስረት ሊለወጥ ይችላል።"
+      },
+      "delete": {
+        "title": "{{category_name}}ን ሰርዝ",
+        "warning": "ይህን ምድብ ከሰረዙት ሁሉም ንዑስ ክፍሎቹ እንዲሁ እስከመጨረሻው ይሰረዛሉ።",
+        "confirmation": "እርግጠኛ ነዎት ይህን ምድብ መሰረዝ ይፈልጋሉ?"
+      },
+      "actions": {
+        "edit_main_information": "ዋና መረጃን ያርትዑ",
+        "edit_sharing_data": "የማጋራት ውሂብን ያርትዑ",
+        "move_up": "ወደ ላይ ተንቀሳቀስ",
+        "move_down": "ወደ ታች ውሰድ",
+        "delete": "ሰርዝ"
+      },
+      "create_error": "ምድቡን ሲፈጥሩ የሆነ ችግር ተፈጥሯል",
+      "update_error": "ምድቡን በማዘመን ላይ የሆነ ችግር ተፈጥሯል",
+      "delete_error": "ምድቡን ሲሰርዝ የሆነ ችግር ተፈጥሯል",
+      "reorder_error": "ምድቡን እንደገና በማዘዝ ላይ የሆነ ችግር ተፈጥሯል"
     }
   },
   "dashboard": {
@@ -1130,6 +1180,12 @@
       "title": "ተጠባቂ ዉጤቶች እና ተግባራት",
       "description": ""
     },
+    "shop": {
+      "categories": {
+        "title": "ምድቦች",
+        "description": "ሰዎች ለሽያጭ ምን ዓይነት ዕቃዎችን ማስቀመጥ ይችላሉ"
+      }
+    },
     "contacts": {
       "title": "የድጋፍ እውቂያዎች",
       "description": "ኢሜል ፣ WhatsApp ፣ ስልክ ቁጥር ፣ ወዘተ."

diff --git a/public/translations/cat-CAT.json b/public/translations/cat-CAT.json
@@ -912,6 +912,56 @@
     },
     "disabled": {
       "description": "La botiga està desactivada en aquesta comunitat."
+    },
+    "categories": {
+      "admin_page_description": "Afegeix i gestiona les categories que estaran disponibles a la botiga.",
+      "empty": {
+        "title": "Sembla que la teva comunitat no té cap categoria!",
+        "description": "Comenceu creant una categoria nova a continuació"
+      },
+      "add_root": "Afegeix una nova categoria",
+      "add_child": "Afegeix una subcategoria de {{parent_name}}",
+      "click_category_to_edit": "{{category_name}} - feu clic per editar",
+      "actions_for": "Accions per a {{category_name}}",
+      "fields": {
+        "name": "Nom",
+        "slug": "URL Compartit",
+        "description": "Descripció",
+        "image": "Imatge",
+        "meta": {
+          "title": "Títol",
+          "description": "Descripció",
+          "keywords": "Paraules clau"
+        }
+      },
+      "form": {
+        "insert_name": "Introduïu un nom per generar l'URL compartit",
+        "invalid_slug": "URL compartit no vàlid",
+        "invalid_slug_tooltip": "Els caràcters no llatins no s'accepten als URLs. Per generar un URL vàlid, el nom de la categoria ha de tenir almenys un caràcter llatí",
+        "image_guidance": "Preferiu imatges en mode horitzontal amb alta qualitat"
+      },
+      "metadata": {
+        "title": "Contingut compartit",
+        "guidance": "Aquesta informació s'utilitzarà per mostrar més informació en compartir aquesta categoria.",
+        "preview": "Vista prèvia",
+        "preview_text": "Aquesta és una aproximació de com serà el contingut compartit. Pot canviar en funció de la plataforma en què es comparteix l'enllaç."
+      },
+      "delete": {
+        "title": "Suprimeix {{category_name}}",
+        "warning": "Si suprimiu aquesta categoria, totes les seves subcategories també se suprimiran permanentment.",
+        "confirmation": "Esteu segur que voleu suprimir aquesta categoria?"
+      },
+      "actions": {
+        "edit_main_information": "Edita la informació principal",
+        "edit_sharing_data": "Edita les dades per compartir",
+        "move_up": "Moure cap amunt",
+        "move_down": "Moure cap avall",
+        "delete": "Suprimeix"
+      },
+      "create_error": "S'ha produït un error en crear la categoria",
+      "update_error": "S'ha produït un error en actualitzar la categoria",
+      "delete_error": "S'ha produït un error en suprimir la categoria",
+      "reorder_error": "S'ha produït un error en reordenar la categoria"
     }
   },
   "dashboard": {
@@ -1171,6 +1221,12 @@
       "title": "Objetius i Ações",
       "description": ""
     },
+    "shop": {
+      "categories": {
+        "title": "Categories",
+        "description": "Quins tipus d'articles la gent pot posar a la venda"
+      }
+    },
     "contacts": {
       "title": "Contactes de suport",
       "description": "Correu electrònic, whatsapp, número de telèfon, etc."

diff --git a/public/translations/en-US.json b/public/translations/en-US.json
@@ -909,6 +909,56 @@
     },
     "disabled": {
       "description": "Shop is disabled in this community."
+    },
+    "categories": {
+      "admin_page_description": "Add and manage the categories that will be available in the shop.",
+      "empty": {
+        "title": "Looks like your community doesn't have any categories!",
+        "description": "Get started by creating a new category below"
+      },
+      "add_root": "Add new category",
+      "add_child": "Add sub-category of {{parent_name}}",
+      "click_category_to_edit": "{{category_name}} - Click to edit",
+      "actions_for": "Actions for {{category_name}}",
+      "fields": {
+        "name": "Name",
+        "slug": "Sharing URL",
+        "description": "Description",
+        "image": "Image",
+        "meta": {
+          "title": "Title",
+          "description": "Description",
+          "keywords": "Keywords"
+        }
+      },
+      "form": {
+        "insert_name": "Insert a name to generate the sharing URL",
+        "invalid_slug": "Invalid sharing URL",
+        "invalid_slug_tooltip": "Non-latin characters aren't accepted in URLs. In order to generate a valid URL, the category name must have at least one latin character",
+        "image_guidance": "Prefer images in landscape mode with high quality"
+      },
+      "metadata": {
+        "title": "Sharing data",
+        "guidance": "This information will be used to display rich links when sharing this category.",
+        "preview": "Preview",
+        "preview_text": "This is an approximation of what the shared content will look like. It might change depending on the platform the link is being shared on."
+      },
+      "delete": {
+        "title": "Delete {{category_name}}",
+        "warning": "If you delete this category, all of its sub-categories will also be permanently deleted.",
+        "confirmation": "Are you sure you want to delete this category?"
+      },
+      "actions": {
+        "edit_main_information": "Edit main information",
+        "edit_sharing_data": "Edit sharing data",
+        "move_up": "Move up",
+        "move_down": "Move down",
+        "delete": "Delete"
+      },
+      "create_error": "Something went wrong when creating the category",
+      "update_error": "Something went wrong when updating the category",
+      "delete_error": "Something went wrong when deleting the category",
+      "reorder_error": "Something went wrong when reordering the category"
     }
   },
   "dashboard": {
@@ -1169,6 +1219,12 @@
       "title": "Objectives and Actions",
       "description": ""
     },
+    "shop": {
+      "categories": {
+        "title": "Categories",
+        "description": "What kinds of items people can put for sale"
+      }
+    },
     "contacts": {
       "title": "Support contacts",
       "description": "Email, whatsapp, phone number, etc."

diff --git a/public/translations/es-ES.json b/public/translations/es-ES.json
@@ -912,6 +912,56 @@
     },
     "disabled": {
       "description": "La tienda está deshabilitada en esta comunidad."
+    },
+    "categories": {
+      "admin_page_description": "Añade y gestiona las categorías que estarán disponibles en la tienda.",
+      "empty": {
+        "title": "¡Parece que tu comunidad no tiene ninguna categoría!",
+        "description": "Comience creando una nueva categoría abajo"
+      },
+      "add_root": "Añadir nueva categoria",
+      "add_child": "Añadir subcategoría de {{parent_name}}",
+      "click_category_to_edit": "{{category_name}} - Haz clic para editar",
+      "actions_for": "Acciones para {{category_name}}",
+      "fields": {
+        "name": "Nombre",
+        "slug": "URL para Compartir",
+        "description": "Descripción",
+        "image": "Imagen",
+        "meta": {
+          "title": "Título",
+          "description": "Descripción",
+          "keywords": "Palabras clave"
+        }
+      },
+      "form": {
+        "insert_name": "Inserta un nombre para generar la URL para compartir",
+        "invalid_slug": "URL para compartir no válida",
+        "invalid_slug_tooltip": "Los caracteres no latinos no se aceptan en URLs. Para generar un URL válido, el nombre de la categoría debe tener al menos un carácter latino",
+        "image_guidance": "Prefiere imágenes en modo horizontal con alta calidad"
+      },
+      "metadata": {
+        "title": "Contenido compartido",
+        "guidance": "Esta información se utilizará para mostrar más información al compartir esta categoría.",
+        "preview": "Avance",
+        "preview_text": "Esta es una aproximación de cómo se verá el contenido compartido. Puede cambiar según la plataforma en la que se comparte el enlace."
+      },
+      "delete": {
+        "title": "Eliminar {{category_name}}",
+        "warning": "Si elimina esta categoría, todas sus subcategorías también se eliminarán de forma permanente.",
+        "confirmation": "¿Está seguro de que desea eliminar esta categoría?"
+      },
+      "actions": {
+        "edit_main_information": "Editar información principal",
+        "edit_sharing_data": "Editar dados compartidos",
+        "move_up": "Mover hacia arriba",
+        "move_down": "Mover hacia abajo",
+        "delete": "Eliminar"
+      },
+      "create_error": "Algo salió mal al crear la categoría",
+      "update_error": "Algo salió mal al actualizar la categoría",
+      "delete_error": "Algo salió mal al eliminar la categoría",
+      "reorder_error": "Algo salió mal al reordenar la categoría"
     }
   },
   "dashboard": {
@@ -1172,6 +1222,12 @@
       "title": "Objetivos y acciones",
       "description": ""
     },
+    "shop": {
+      "categories": {
+        "title": "Categorías",
+        "description": "Qué tipo de artículos la gente puede poner a la venta"
+      }
+    },
     "contacts": {
       "title": "Contactos de soporte",
       "description": "Correo electrónico, whatsapp, número de teléfono, etc."