Icon chooser for Entity Type

backend/models/core/EntityType.js

@@ -154,13 +154,14 @@ class EntityTypes {
     return true;
   }
 
-  static async update({ name, newSlug, oldSlug }) {
+  static async update({ name, newSlug, oldSlug, icon }) {
     const db = new DB();
-    const updateEntityTypesSQL = "UPDATE entity_types SET slug = :newSlug, name = :name WHERE slug = :oldSlug";
+    const updateEntityTypesSQL = "UPDATE entity_types SET slug = :newSlug, name = :name, icon = :icon WHERE slug = :oldSlug";
     const executeStatementParam = [
       { name: "name", value: { stringValue: name } },
       { name: "newSlug", value: { stringValue: newSlug } },
       { name: "oldSlug", value: { stringValue: oldSlug } },
+      { name: "icon", value: { stringValue: icon } },
     ];
 
     await db.executeStatement(updateEntityTypesSQL, executeStatementParam);

components/klaudsolcms/modals/modal_body/EditCollectionTypeBody.js

@@ -6,12 +6,14 @@ import RootContext from "@/components/contexts/RootContext";
 import { slsFetch } from "@klaudsol/commons/lib/Client";
 import { redirectToBuilderTypeSlug } from "@/components/klaudsolcms/routers/routersRedirect";
 import { useClientErrorHandler } from "@/components/hooks";
+import * as Icons from "react-icons/bi";
 
 export default function EditCollectionTypeBody({ formRef, hide, setSaving }) {
   const { state: rootState, dispatch: rootDispatch } = useContext(RootContext);
   const errorHandler = useClientErrorHandler();
   const router = useRouter();
   const slug = router.query.entity_type_slug;
+  const iconNames = Object.keys(Icons); // gets list of all BiIcons
 
   // Find the name of the current entity type
   const entityTypes = rootState.entityTypes;
@@ -20,12 +22,19 @@ export default function EditCollectionTypeBody({ formRef, hide, setSaving }) {
   );
   const name = currentEntityType?.entity_type_name;
   const variant = currentEntityType?.entity_type_variant;
+  const icon = currentEntityType?.entity_type_icon;
+
+  const [selectedIcon, setSelectedIcon] = useState(icon ? icon : 'BiPen');
+  const [showIcons, setShowIcons] = useState(false);
+
+  const CurrentIcon = Icons[selectedIcon];
 
   const formikParams = {
     initialValues: {
       name,
       slug,
-      variant
+      variant,
+      icon: selectedIcon
     },
     innerRef: formRef,
     onSubmit: (values) => {
@@ -54,9 +63,16 @@ export default function EditCollectionTypeBody({ formRef, hide, setSaving }) {
     },
   };
 
+  // Shows the list of all icons
+  const handleIconButton = (e) => {
+    e.preventDefault();
+    setShowIcons(!showIcons);
+  }
+
   return (
     <>
       <Formik {...formikParams}>
+      {({ setFieldValue }) => (
         <Form>
           <div>
             <div className="content-type-create-container">
@@ -72,7 +88,7 @@ export default function EditCollectionTypeBody({ formRef, hide, setSaving }) {
                 tables/collections
               </div>
             </div>
-            <div className="content-type-create">
+              <div className="content-type-create">
                 <div className="general-text"> Variant </div>
                 <Field 
                   type="text"
@@ -82,9 +98,39 @@ export default function EditCollectionTypeBody({ formRef, hide, setSaving }) {
                 >
                 </Field>
               </div>
+              <div className="content-type-create">
+                <div className="general-text"> Icon </div>
+                  <button className="general-icon-button" onClick={handleIconButton}>
+                    <CurrentIcon className="general-icon" />
+                    {selectedIcon}
+                  </button>
+                  {showIcons && 
+                  <div className="general-icons-container">
+                    <div className="row mx-0 my-0 py-0 px-0" style={{ width: '100%'}}>
+                      {iconNames.map((x, i) => {
+                        const Icon = Icons[x];
+                        return (
+                        <div 
+                          className="col-3 mx-0 my-1 py-0 px-1 text-center general-icons-border" 
+                          key={i}
+                          onClick={e => {
+                            e.preventDefault();
+                            setSelectedIcon(x);
+                            setFieldValue('icon',  x);
+                            setShowIcons(false);
+                          }}
+                        >
+                          <Icon
+                            className="general-icons"
+                          />
+                        </div>
+                      )})}
+                    </div>
+                  </div>}
+              </div>
             </div>
           </div>
-        </Form>
+        </Form>)}
       </Formik>
     </>
   );

pages/api/entity_types/[slug].js

@@ -99,12 +99,12 @@ async function put(req, res) {
     (await assertUserCan(writeContentTypes, req));
 
   const { slug: oldSlug } = req.query;
-  const { name, slug: newSlug } = req.body;
+  const { name, slug: newSlug, icon } = req.body;
 
-  await EntityType.update({ name, newSlug, oldSlug });
+  await EntityType.update({ name, newSlug, oldSlug, icon });
 
   const output = {
-    data: { name, newSlug },
+    data: { name, newSlug, icon },
     metadata: {},
   };
 

styles/general.scss

@@ -8,6 +8,51 @@
 **/
 
 .general {
+  // Icon Chooser
+  &-icon {
+    font-size: 14px;
+    margin-right: 5px;
+
+    &-button {
+      @include general-text-input(12px);
+      background-color: transparent;
+      width: 100%;
+      @include flex(flex-start, center, row);
+    }
+  }
+
+  &-icons {
+    @include padding-all(5px);
+    border: 1px solid $light-grey-1;
+    font-size: 35px;
+    border-radius: 5px;
+
+    &:hover {
+      background-color: $light-grey-1;
+      cursor: pointer;
+    }
+
+    &-container {
+      @include padding-all(5px);
+      border: 1px solid $light-grey-1;
+      max-height: 200px;
+      max-width: 200px;
+      overflow: auto;
+      border-radius: 5px;
+      width: 100%;
+
+      &::-webkit-scrollbar {
+        width: 0.2em;
+        background-color: #fff;
+      }
+
+      &::-webkit-scrollbar-thumb {
+        background-color: lightgrey;
+        outline: none;
+      } 
+    }
+  }
+
   // File upload 
   &-file {
     @include flex(center, center, column);