Merge pull request #84 from os2display/feature/AR-859-order-in-table

Feature/ar 859 order in table
os2display · Aug 31, 2022 · 330c8d4 · 330c8d4
2 parents 3ac01db + 4174cd5
commit 330c8d4
Show file tree

Hide file tree

Showing 5 changed files with 100 additions and 36 deletions.
diff --git a/build/calendar-admin.json b/build/calendar-admin.json
@@ -177,5 +177,25 @@
     "label": "Vis tabeloverskrifter",
     "name": "displayHeaders",
     "formGroupClasses": "col-md-6 mb-3"
+  },
+  {
+    "key": "calendar-form-header-orders",
+    "input": "select",
+    "label": "Hvilken rækkefølge skal overskrifterne i tabellen være i",
+    "options": [
+      {
+        "key": "whenwhatwhere",
+        "value": "whenwhatwhere",
+        "title": "Hvornår, hvad, hvor"
+      },
+      {
+        "key": "whatwherewhen",
+        "value": "whatwherewhen",
+        "title": "Hvad, hvor, hvornår"
+      }
+    ],
+    "name": "headerOrder",
+    "formGroupClasses": "col-md-6 mb-3",
+    "helpText": "Dette er kun relevant hvis \"Flere resurser\" er valgt under \"layout\". Standard er \"Hvornår, hvad, hvor.\""
   }
 ]
diff --git a/build/calendar.js b/build/calendar.js
diff --git a/src/calendar/calendar-admin.json b/src/calendar/calendar-admin.json
@@ -177,5 +177,25 @@
     "label": "Vis tabeloverskrifter",
     "name": "displayHeaders",
     "formGroupClasses": "col-md-6 mb-3"
+  },
+  {
+    "key": "calendar-form-header-orders",
+    "input": "select",
+    "label": "Hvilken rækkefølge skal overskrifterne i tabellen være i",
+    "options": [
+      {
+        "key": "whenwhatwhere",
+        "value": "whenwhatwhere",
+        "title": "Hvornår, hvad, hvor"
+      },
+      {
+        "key": "whatwherewhen",
+        "value": "whatwherewhen",
+        "title": "Hvad, hvor, hvornår"
+      }
+    ],
+    "name": "headerOrder",
+    "formGroupClasses": "col-md-6 mb-3",
+    "helpText": "Dette er kun relevant hvis \"Flere resurser\" er valgt under \"layout\". Standard er \"Hvornår, hvad, hvor.\""
   }
 ]
diff --git a/src/calendar/calendar-multiple.js b/src/calendar/calendar-multiple.js
@@ -30,13 +30,19 @@ function CalendarMultiple({
     displayHeaders = true,
     hideGrid = false,
     dateAsBox = false /* TODO: Add this to the configuration of the slide */,
+    headerOrder = "whenwhatwhere",
   } = content;
 
   /** Imports language strings, sets localized formats. */
   useEffect(() => {
     dayjs.extend(localizedFormat);
   }, []);
 
+  // Numbers used in css to switch the order of the elements, both headers and "items"
+  const orderWhere = headerOrder === "whenwhatwhere" ? 3 : 2;
+  const orderWhat = headerOrder === "whenwhatwhere" ? 2 : 1;
+  const orderWhen = headerOrder === "whenwhatwhere" ? 1 : 3;
+
   /**
    * Capitalize the datestring, as it starts with the weekday.
    *
@@ -76,7 +82,7 @@ function CalendarMultiple({
   }, [hasDateAndTime]);
 
   const borderStyle = hideGrid ? { "--border": "0" } : {};
-
+  let counterForOrder = 0;
   return (
     <Wrapper
       className={`calendar-multiple ${templateClasses.join(" ")}`}
@@ -120,59 +126,75 @@ function CalendarMultiple({
             <ContentHeaderItem
               className="content-item"
               key={2}
-              style={borderStyle}
+              style={(borderStyle, { order: orderWhen })}
             >
               <FormattedMessage id="when" defaultMessage="when" />
             </ContentHeaderItem>
             <ContentHeaderItem
               className="content-item"
               key={1}
-              style={borderStyle}
+              style={(borderStyle, { order: orderWhat })}
             >
               <FormattedMessage id="what" defaultMessage="what" />
             </ContentHeaderItem>
             <ContentHeaderItem
               className="content-item"
               key={3}
-              style={borderStyle}
+              style={(borderStyle, { order: orderWhere })}
             >
               <FormattedMessage id="where" defaultMessage="where" />
             </ContentHeaderItem>
           </ContentItemsWrapper>
         )}
         <ContentItemsWrapper>
           {calendarEvents?.length > 0 &&
-            getSortedEvents(calendarEvents).map((entry) => (
-              <Fragment key={entry.id}>
-                <ContentItem className="content-item-time" style={borderStyle}>
-                  {dayjs(entry.startTime * 1000)
-                    .locale(localeDa)
-                    .format("LT")}
-                  {entry.endTime && (
-                    <>
-                      <span> - </span>
-                      {dayjs(entry.endTime * 1000)
-                        .locale(localeDa)
-                        .format("LT")}
-                    </>
-                  )}
-                </ContentItem>
-                <ContentItem className="content-item-title" style={borderStyle}>
-                  {entry.title ?? resourceUnavailableText ?? (
-                    <FormattedMessage
-                      id="unavailable"
-                      defaultMessage="Unavailable"
-                    />
-                  )}
-                </ContentItem>
-                <ContentItem
-                  className="content-item-resource"
-                  style={borderStyle}
-                >
-                  {entry.resourceTitle ?? entry.resourceId ?? ""}
-                </ContentItem>
-              </Fragment>
-            ))}
+            getSortedEvents(calendarEvents).map((entry) => {
+              const returnFragment = (
+                <Fragment key={entry.id}>
+                  <ContentItem
+                    className="content-item-time"
+                    style={
+                      (borderStyle, { order: counterForOrder + orderWhen })
+                    }
+                  >
+                    {dayjs(entry.startTime * 1000)
+                      .locale(localeDa)
+                      .format("LT")}
+                    {entry.endTime && (
+                      <>
+                        <span> - </span>
+                        {dayjs(entry.endTime * 1000)
+                          .locale(localeDa)
+                          .format("LT")}
+                      </>
+                    )}
+                  </ContentItem>
+                  <ContentItem
+                    className="content-item-title"
+                    style={
+                      (borderStyle, { order: counterForOrder + orderWhat })
+                    }
+                  >
+                    {entry.title ?? resourceUnavailableText ?? (
+                      <FormattedMessage
+                        id="unavailable"
+                        defaultMessage="Unavailable"
+                      />
+                    )}
+                  </ContentItem>
+                  <ContentItem
+                    className="content-item-resource"
+                    style={
+                      (borderStyle, { order: counterForOrder + orderWhere })
+                    }
+                  >
+                    {entry.resourceTitle ?? entry.resourceId ?? ""}
+                  </ContentItem>
+                </Fragment>
+              );
+              counterForOrder += 3;
+              return returnFragment;
+            })}
         </ContentItemsWrapper>
       </Content>
     </Wrapper>
@@ -290,6 +312,7 @@ CalendarMultiple.propTypes = {
     })
   ).isRequired,
   content: PropTypes.shape({
+    headerOrder: PropTypes.string,
     title: PropTypes.string,
     hasDateAndTime: PropTypes.bool,
     displayHeaders: PropTypes.bool,

diff --git a/src/slides.js b/src/slides.js
@@ -527,6 +527,7 @@ const slides = [
       },
     },
     content: {
+      headerOrder: "whatwherewhen",
       duration: 5000,
       layout: "multiple",
       hasDateAndTime: true,