@plone/volto 17.0.0-alpha.7 → 17.0.0-alpha.8

package/src/reducers/relations/relations.js

@@ -0,0 +1,173 @@
+/**
+ * Relations reducer.
+ * @module reducers/relations/relations
+ */
+
+import {
+  CREATE_RELATIONS,
+  DELETE_RELATIONS,
+  LIST_RELATIONS,
+  REBUILD_RELATIONS,
+} from '@plone/volto/constants/ActionTypes';
+
+const initialState = {
+  relations: null,
+  stats: null,
+  create: {
+    error: null,
+    loaded: false,
+    loading: false,
+  },
+  delete: {
+    error: null,
+    loaded: false,
+    loading: false,
+  },
+  list: {
+    error: null,
+    loaded: false,
+    loading: false,
+  },
+  rebuild: {
+    error: null,
+    loaded: false,
+    loading: false,
+  },
+  subrequests: {},
+};
+
+/**
+ * Get request key
+ * @function getRequestKey
+ * @param {string} actionType Action type.
+ * @returns {string} Request key.
+ */
+function getRequestKey(actionType) {
+  return actionType.split('_')[0].toLowerCase();
+}
+
+/**
+ * Relations reducer.
+ * @function relations
+ * @param {Object} state Current state.
+ * @param {Object} action Action to be handled.
+ * @returns {Object} New state.
+ */
+export default function relations(state = initialState, action = {}) {
+  switch (action.type) {
+    case `${CREATE_RELATIONS}_PENDING`:
+    case `${DELETE_RELATIONS}_PENDING`:
+    case `${REBUILD_RELATIONS}_PENDING`:
+      return {
+        ...state,
+        [getRequestKey(action.type)]: {
+          loading: true,
+          loaded: false,
+          error: null,
+        },
+      };
+    case `${LIST_RELATIONS}_PENDING`:
+      return action.subrequest
+        ? {
+            ...state,
+            subrequests: {
+              ...state.subrequests,
+              [action.subrequest]: {
+                ...(state.subrequests[action.subrequest] || {
+                  relations: null,
+                  stats: null,
+                }),
+                loaded: false,
+                loading: true,
+                error: null,
+              },
+            },
+          }
+        : {
+            ...state,
+            [getRequestKey(action.type)]: {
+              loading: true,
+              loaded: false,
+              error: null,
+            },
+          };
+    case `${LIST_RELATIONS}_SUCCESS`:
+      return action.subrequest
+        ? {
+            ...state,
+            subrequests: {
+              ...state.subrequests,
+              [action.subrequest]: {
+                loading: false,
+                loaded: true,
+                error: null,
+                relations: action.result.relations
+                  ? action.result.relations
+                  : state.relations,
+                stats: null,
+              },
+            },
+          }
+        : {
+            ...state,
+            relations: action.result.relations
+              ? action.result.relations
+              : state.relations,
+            stats: action.result.stats ? action.result : state.stats,
+            [getRequestKey(action.type)]: {
+              loading: false,
+              loaded: true,
+              error: null,
+            },
+          };
+    case `${CREATE_RELATIONS}_SUCCESS`:
+    case `${DELETE_RELATIONS}_SUCCESS`:
+    case `${REBUILD_RELATIONS}_SUCCESS`:
+      return {
+        ...state,
+        [getRequestKey(action.type)]: {
+          loading: false,
+          loaded: true,
+          error: null,
+        },
+      };
+    case `${LIST_RELATIONS}_FAIL`:
+      return action.subrequest
+        ? {
+            ...state,
+            subrequests: {
+              ...state.subrequests,
+              [action.subrequest]: {
+                relations: null,
+                stats: null,
+                loading: false,
+                loaded: false,
+                error: action.error,
+              },
+            },
+          }
+        : {
+            ...state,
+            relations: null,
+            stats: null,
+            [getRequestKey(action.type)]: {
+              loading: false,
+              loaded: false,
+              error: action.error,
+            },
+          };
+    case `${CREATE_RELATIONS}_FAIL`:
+    case `${DELETE_RELATIONS}_FAIL`:
+    case `${REBUILD_RELATIONS}_FAIL`:
+      return {
+        ...state,
+        [getRequestKey(action.type)]: {
+          loading: false,
+          loaded: false,
+          error: action.error,
+        },
+      };
+    default:
+      return state;
+  }
+}

package/src/reducers/types/types.js

@@ -39,7 +39,7 @@ export default function types(state = initialState, action = {}) {
         'types',
         getBaseUrl(flattenToAppURL(action.result['@id'])),
       );
-      if (hasExpander) {
+      if (hasExpander && !action.subrequest) {
         return {
           ...state,
           error: null,

package/src/routes.js

@@ -29,6 +29,7 @@ import {
   ModerateComments,
   NotFound,
   PasswordReset,
+  Relations,
   Register,
   Rules,
   RequestPasswordReset,
@@ -224,6 +225,10 @@ export const defaultRoutes = [
     path: '/controlpanel/rules',
     component: RulesControlpanel,
   },
+  {
+    path: '/controlpanel/relations',
+    component: Relations,
+  },
   {
     path: '/controlpanel/:id',
     component: Controlpanel,

package/theme/themes/pastanaga/extras/userscontrolpanel.less

@@ -27,45 +27,48 @@
 }
 
 .controlpanel_matrix {
-  display: grid;
-  grid-gap: 2rem;
-  grid-template-columns: 5fr 5fr 2fr;
+  .ui.action.input button.ui.icon.button {
+    background-color: transparent;
+  }
 
   .controlpanel_select_relation {
-    grid-column: 1;
-    grid-row: 1;
+    margin-bottom: 2rem;
   }
 
-  .controlpanel_search_y {
-    grid-column: 1;
-    grid-row: 1;
+  .controlpanel_search_wrapper {
+    display: flex;
+    flex-wrap: wrap;
+    row-gap: 3rem;
+    column-gap: 5rem;
+    justify-content: flex-start;
+    margin-bottom: 2rem;
+    & > * {
+      min-width: 30rem;
+    }
   }
 
-  .controlpanel_search_x {
-    grid-column: 2;
-    grid-row: 1;
+  .add_potential_sources .field,
+  .add_potential_targets .field,
+  .controlpanel_search_x .field,
+  .controlpanel_search_y .field {
+    display: flex;
   }
 
-  .controlpanel_filter {
+  .controlpanel_listing_wrapper {
     display: flex;
-    flex-direction: column;
-    grid-column: 3;
-    grid-row: 2;
-
-    .ui.checkbox {
-      margin-top: 0.5rem;
+    gap: 1rem;
+    justify-content: flex-end;
+    flex-wrap: wrap;
+    flex-direction: row-reverse;
+    margin-bottom: 2rem;
+    .administration_matrix {
+      flex-grow: 2;
+      min-width: 30rem;
+    }
+    .controlpanel_filter {
+      display: flex;
+      flex-direction: column;
     }
-  }
-
-  .administration_matrix {
-    display: grid;
-    height: 60rem;
-    padding-right: 0;
-    grid-column-end: 3;
-    grid-column-start: 1;
-    grid-row: 2;
-    grid-template-rows: 14rem 1fr;
-    overflow-x: scroll;
   }
 }
 
@@ -75,71 +78,91 @@
   }
 
   .label-options {
+    // display: flex;
+    // justify-content: start;
     position: sticky;
-    z-index: 1000;
     top: 0;
-    left: 0;
-    display: flex;
-    height: 14rem;
-    align-items: baseline;
-    justify-content: flex-end;
-    padding-right: 2rem;
+    z-index: 100;
     .stickyLabelLayerBackground();
 
-    .label-options-label {
+    .target-labels {
+      z-index: 2;
+      top: 0;
+      left: 0;
       display: flex;
-      align-items: flex-end;
+      height: 14rem;
+      align-items: baseline;
+      // justify-content: flex-end;
+      // padding-right: 5rem;
+      @media only screen and (max-width: (@largestMobileScreen)) {
+        flex-direction: column;
+      }
+      & > div:first-child {
+        min-width: 15rem;
+      }
+      & > div:nth-child(2) {
+        flex-grow: 2;
+        display: flex;
+      }
 
-      &.inclined {
-        width: 3.5rem;
-        height: 13rem;
-        white-space: nowrap;
+      .label-options-label {
+        display: flex;
+        align-items: flex-end;
+
+        &.inclined {
+          width: 3.5rem;
+          height: 13rem;
+          white-space: nowrap;
 
-        div {
-          transform: rotate(315deg);
-          transform-origin: top left;
+          div {
+            transform: rotate(315deg);
+            transform-origin: top left;
+          }
         }
       }
     }
   }
 
-  .items {
-    padding-top: 0.5rem;
-
-    .listing-row {
-      padding-right: 2rem;
-
-      &:nth-child(2n) {
-        background-color: rgba(0, 0, 50, 0.05);
+  .listing-row {
+    &:nth-child(2n) {
+      background-color: rgba(0, 0, 50, 0.05);
+    }
+    .listing-item {
+      display: flex;
+      width: 100%;
+      align-items: baseline;
+      justify-content: space-between;
+      padding: 0.5rem 0.1rem;
+      margin: 0.2rem 0;
+
+      & > div:first-child {
+        min-width: 15rem;
       }
+      .matrix_options {
+        flex-grow: 2;
+        display: flex;
+        flex-direction: row;
 
-      &.selectall {
-        margin-bottom: 1rem;
-      }
+        & > div {
+          width: 3rem;
+          padding: 0.3rem 0.1rem;
+          margin-left: 0.5rem;
 
-      .listing-item {
-        display: flex;
-        width: 100%;
-        align-items: baseline;
-        justify-content: space-between;
-        padding: 0.5rem 0.1rem;
-        margin: 0.2rem 0;
-
-        .matrix_options {
-          display: flex;
-          flex-direction: row;
-
-          & > div {
-            width: 3rem;
-            padding: 0.3rem 0.1rem;
-            margin-left: 0.5rem;
-
-            .ui.checkbox {
-              margin: auto;
-            }
+          .ui.checkbox {
+            margin: auto;
           }
         }
+        .ui.checkbox.toggle-target label:before {
+          border: 3px solid #826a6a;
+        }
       }
     }
   }
+
+  // Rows
+  .items {
+    .not-published {
+      opacity: 0.6;
+    }
+  }
 }