@retikolo/drag-drop-content-types 1.0.0

package/README.md

@@ -0,0 +1,26 @@
+# Strapi plugin drag-drop-content-types
+![drag-drop-preview](https://user-images.githubusercontent.com/37687705/191790500-f7bc7968-cf10-4448-a049-3350d96d2d8b.png)
+
+## ⚠THIS PLUGIN IS IN ALPHA⚠
+Be warned. Breaking changes can happen. Bad things can happen. Unexpected things can happen. Woosh!
+
+## Install
+1. Add the plugin to the `src/plugins` directory. 
+2. Add this to your `config/plugins.js` file (create it, if it doesn't exist yet):
+```js
+module.exports = {
+  // ...
+  'drag-drop-content-types': {
+    enabled: true,
+    resolve: './src/plugins/drag-drop-content-types'
+  }
+}
+```
+3. Run `npm run build` and (re)start the app
+
+## Configuration
+Go to `Settings` -> `Drag Drop Content Type` -> `Configuration`:
+* Specify how the rank field and the corresponding title field are called in your content types. Default value are `rank` and `title`.
+* Add the specified fields to your content type. With the default values this would be `title` (Text (Type: Short Text)) and `rank` (Number (Number format: integer)) 
+* You will be rewared with the drag-dropable menu in the list view of all content types having the specified fields.
+

package/admin/src/api/sort.js

@@ -0,0 +1,18 @@
+import axiosInstance from '../utils/axiosInstance';
+
+const sortRequests = {
+  getTaskCount: async () => {
+    const data = await axiosInstance.get(`/drag-drop-content-types/count`);
+    return data;
+  },
+  getSettings: async () => {
+    const data = await axiosInstance.get(`/drag-drop-content-types/settings`);
+    return data;
+  },
+  setSettings: async data => {
+    return await axiosInstance.post(`/drag-drop-content-types/settings`, {
+      body: data,
+    });
+  },
+};
+export default sortRequests;

package/admin/src/components/Initializer/index.js

@@ -0,0 +1,26 @@
+/**
+ *
+ * Initializer
+ *
+ */
+
+import { useEffect, useRef } from 'react';
+import PropTypes from 'prop-types';
+import pluginId from '../../pluginId';
+
+const Initializer = ({ setPlugin }) => {
+  const ref = useRef();
+  ref.current = setPlugin;
+
+  useEffect(() => {
+    ref.current(pluginId);
+  }, []);
+
+  return null;
+};
+
+Initializer.propTypes = {
+  setPlugin: PropTypes.func.isRequired,
+};
+
+export default Initializer;

package/admin/src/components/SortModal/index.js

@@ -0,0 +1,150 @@
+import React, { useState, useEffect } from 'react';
+
+import axiosInstance from '../../utils/axiosInstance';
+
+import DragSortableList from 'react-drag-sortable'
+
+import { SimpleMenu, MenuItem } from '@strapi/design-system/SimpleMenu';
+import { IconButton } from '@strapi/design-system/IconButton';
+import { Icon } from '@strapi/design-system/Icon';
+import Drag from '@strapi/icons/Drag';
+import Layer from '@strapi/icons/Layer';
+
+const SortModal = () => {
+
+  const [active, setActive] = useState(false);
+  const [contentType, setContentType] = useState([]);
+  const [status, setStatus] = useState('loading');
+  const [settings, setSettings] = useState();
+
+  // Shorten string to prevent line break
+  const shortenString = (string) => {
+    if (string.length > 40) {
+      return string.substring(0, 37) + "..."
+    }
+    return string
+  }
+
+  // Fetch settings from configuration
+  const fetchSettings = async () => {
+    try {
+      const { data } = await axiosInstance.get(`drag-drop-content-types/settings`);
+      setSettings(data.body);
+    } catch (e) {
+      console.log(e);
+    }
+  };
+
+  // Check database if the desired fields are available
+  // TODO: check field integrity 
+  const initializeContentType = async () => {
+    try {
+      if (settings){
+        const { data } = await axiosInstance.get(
+          `/content-manager/collection-types/${contentTypePath}?sort=rank:asc`
+          );
+          if (data.results.length > 0 && !!toString(data.results[0][settings.rank]) && !!data.results[0][settings.title]) {
+          setActive(true);
+        }
+      }
+    } catch (e) {
+      console.log(e);
+      setStatus('error');
+    }
+  }
+
+  // Fetch data from the database via get request
+  const fetchContentType = async () => {
+    try {
+      const { data } = await axiosInstance.get(
+        `/content-manager/collection-types/${contentTypePath}?sort=rank:asc`
+      );
+      setStatus('success');
+      // Iterate over all results and append them to the list
+      let list = [];
+      for (let i = 0; i < data.results.length; i++) {
+        list.push({
+          content: (<MenuItem ><Icon height={"0.6rem"} as={Drag} />&nbsp;<span title={data.results[i][settings.title]}>{shortenString(data.results[i][settings.title])}</span></MenuItem>), strapiId: data.results[i].id
+        });
+      }
+      setContentType(list);
+    } catch (e) {
+      console.log(e);
+      setStatus('error');
+    }
+  };
+
+  // Update all ranks via put request.
+  const updateContentType = async (sortedList) => {
+    try {
+      // Increase performance by breaking loop after last element having a rank change is updated
+      let rankHasChanged = false
+      // Iterate over all results and append them to the list
+      for (let i = 0; i < sortedList.length; i++) {
+        // Only update changed values
+        if (previousSortedList.length == 0 || previousSortedList[i].strapiId != sortedList[i].strapiId) {
+          // Update rank via put request
+          await axiosInstance.put(`/drag-drop-content-types/sort-update/${sortedList[i].strapiId}`, {
+            contentType: contentTypePath,
+            rank: sortedList[i].rank,
+          });
+          rankHasChanged = true;
+        } else if (rankHasChanged) {
+          break;
+        }
+      }
+      // Store the state of the list to increase update performance
+      // TODO: Currently on the first event all entries are updated, 
+      //       since there is no previous list available. 
+      //       Get an initial state when first loading page.
+      previousSortedList = sortedList;
+      setStatus('success');
+    } catch (e) {
+      console.log(e);
+      setStatus('error');
+    }
+  };
+
+  // Render the menu
+  const showMenu = () => {
+    if (!active) {
+      return
+    }
+    return (
+      <>
+        <SimpleMenu
+          as={IconButton}
+          icon={<Layer />}
+          onClick={() => { fetchContentType() }}
+        >
+          <DragSortableList items={contentType} moveTransitionDuration={0.3} onSort={updateContentType} type="vertical" />
+        </SimpleMenu>
+      </>
+    )
+  }
+
+  // Fetch settings on page render
+  useEffect(() => {
+    fetchSettings();
+  }, [])
+
+  // Update view when settings change
+  useEffect(() => {
+    initializeContentType();
+  }, [settings])
+
+  // Get content type from url
+  const paths = window.location.pathname.split('/')
+  const contentTypePath = paths[paths.length - 1]
+
+  // Store the drag and drop lists previous value to increase update performance
+  let previousSortedList = []
+
+  return (
+    <>
+      {showMenu()}
+    </>
+  );
+};
+
+export default SortModal;

package/admin/src/index.js

@@ -0,0 +1,91 @@
+import { prefixPluginTranslations } from '@strapi/helper-plugin';
+import pluginPkg from '../../package.json';
+import pluginId from './pluginId';
+import Initializer from './components/Initializer';
+import SortModal from './components/SortModal';
+
+
+const name = pluginPkg.strapi.name;
+
+export default {
+  register(app) {
+    app.createSettingSection(
+      {
+        id: pluginId,
+        intlLabel: {
+          id: `${pluginId}.plugin.name`,
+          defaultMessage: 'Drag Drop Content Types',
+        },
+      },
+      [
+        {
+          intlLabel: {
+            id: `${pluginId}.plugin.name`,
+            defaultMessage: 'Configuration',
+          },
+          id: 'settings',
+          to: `/settings/${pluginId}`,
+          Component: async () => {
+            return import('./pages/Settings');
+          },
+        },
+      ]
+    );
+    app.registerPlugin({
+      id: pluginId,
+      initializer: Initializer,
+      isReady: false,
+      name,
+    });
+  },
+
+  bootstrap(app) {
+    app.injectContentManagerComponent("listView", "actions", {
+      name: "sort-component",
+      Component: SortModal,
+    });
+
+    app.registerHook('Admin/CM/pages/ListView/inject-column-in-table', ({ displayedHeaders, layout }) => {
+      return {
+        layout,
+        displayedHeaders: [
+          ...displayedHeaders,
+          {
+            key: '__locale_key__', // Needed for the table
+            fieldSchema: { type: 'string' }, // Schema of the attribute
+            metadatas: {
+              label: 'Raboo', // Label of the header,
+              sortable: true | false // Define if the column is sortable
+            }, // Metadatas for the label
+            // Name of the key in the data we will display
+            name: 'locales',
+            // Custom renderer: props => Object.keys(props).map(key => <p key={key}>key</p>)
+          },
+        ]
+      }
+    });
+  },
+
+  async registerTrads({ locales }) {
+    const importedTrads = await Promise.all(
+      locales.map((locale) => {
+        return import(
+          /* webpackChunkName: "translation-[request]" */ `./translations/${locale}.json`
+        )
+          .then(({ default: data }) => {
+            return {
+              data: prefixPluginTranslations(data, pluginId),
+              locale,
+            };
+          })
+          .catch(() => {
+            return {
+              data: {},
+              locale,
+            };
+          });
+      })
+    );
+    return Promise.resolve(importedTrads);
+  },
+};

package/admin/src/pages/App/index.js

@@ -0,0 +1,24 @@
+/**
+ *
+ * This component is the skeleton around the actual pages, and should only
+ * contain code that should be seen on all pages. (e.g. navigation bar)
+ *
+ */
+
+import React from 'react';
+import { Switch, Route } from 'react-router-dom';
+import { NotFound } from '@strapi/helper-plugin';
+import pluginId from '../../pluginId';
+
+const App = () => {
+  return (
+    <div>
+      <Switch>
+        <Route path={`/plugins/${pluginId}`} component={HomePage} exact />
+        <Route component={NotFound} />
+      </Switch>
+    </div>
+  );
+};
+
+export default App;

package/admin/src/pages/Settings/index.js

@@ -0,0 +1,145 @@
+import React, { useEffect, useState } from 'react';
+
+import sortRequests from '../../api/sort';
+
+import { LoadingIndicatorPage, useNotification } from '@strapi/helper-plugin';
+
+import { Box } from '@strapi/design-system/Box';
+import { Stack } from '@strapi/design-system/Stack';
+import { Button } from '@strapi/design-system/Button';
+import { Grid, GridItem } from '@strapi/design-system/Grid';
+import { HeaderLayout } from '@strapi/design-system/Layout';
+import { ContentLayout } from '@strapi/design-system/Layout';
+import { Typography } from '@strapi/design-system/Typography';
+import { TextInput } from '@strapi/design-system/TextInput';
+import { Tooltip } from '@strapi/design-system/Tooltip';
+
+import Information from '@strapi/icons/Information';
+import Check from '@strapi/icons/Check';
+
+const Settings = () => {
+  const [settings, setSettings] = useState({});
+  const [isSaving, setIsSaving] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
+  const toggleNotification = useNotification();
+
+  useEffect(() => {
+    sortRequests.getSettings().then(res => {
+      setSettings(res.data.body);
+      setIsLoading(false);
+    });
+  }, [setSettings]);
+
+  const handleSubmit = async () => {
+    setIsSaving(true);
+    const res = await sortRequests.setSettings(settings);
+    setSettings(res.data.body);
+    setIsSaving(false);
+    toggleNotification({
+      type: 'success',
+      message: 'Settings successfully updated',
+    });
+  };
+
+  return (
+    <>
+      <HeaderLayout
+        id="title"
+        title="Drag Drop Content Type Config"
+        subtitle="Manage field values for drag-droppable entries"
+        primaryAction={
+          isLoading ? (
+            <></>
+          ) : (
+            <Button
+              onClick={handleSubmit}
+              startIcon={<Check />}
+              size="L"
+              disabled={isSaving}
+              loading={isSaving}
+            >
+              Save
+            </Button>
+          )
+        }
+      ></HeaderLayout>
+      {isLoading ? (
+        <LoadingIndicatorPage />
+      ) : (
+        <ContentLayout>
+          <Box
+            background="neutral0"
+            hasRadius
+            shadow="filterShadow"
+            paddingTop={6}
+            paddingBottom={6}
+            paddingLeft={7}
+            paddingRight={7}
+          >
+            <Stack size={3}>
+              <Typography>Field Names</Typography>
+              <Grid gap={6}>
+                <GridItem col={6} s={12}>
+                  <Box padding={0}>
+                    <TextInput
+                      placeholder="Rank"
+                      label="Rank Field Name"
+                      hint="You must create a Number Field with this label and type integer in the Content-Type Builder"
+                      name="content"
+                      onChange={e => {
+                        setSettings({
+                          ...settings,
+                          rank: e.target.value,
+                        })
+                      }}
+                      value={settings.rank}
+                      labelAction={
+                        <Tooltip description="Field which is used for ordering content-type entries">
+                          <button aria-label="Information about the email" style={{
+                            border: 'none',
+                            padding: 0,
+                            background: 'transparent'
+                          }}>
+                            <Information aria-hidden={true} />
+                          </button>
+                        </Tooltip>
+                      } />
+                  </Box>;
+                </GridItem>
+                <GridItem col={6} s={12}>
+                  <Box padding={0}>
+                    <TextInput
+                      placeholder="Title"
+                      label="Title Field Name"
+                      hint="You must create a Short Text Field with this label in the Content-Type Builder"
+                      name="content"
+                      onChange={e => {
+                        setSettings({
+                          ...settings,
+                          title: e.target.value,
+                        })
+                      }}
+                      value={settings.title}
+                      labelAction={
+                        <Tooltip description="Field that will show up in the drag drop menu">
+                          <button aria-label="Information about the email" style={{
+                            border: 'none',
+                            padding: 0,
+                            background: 'transparent'
+                          }}>
+                            <Information aria-hidden={true} />
+                          </button>
+                        </Tooltip>
+                      } />
+                  </Box>;
+                </GridItem>
+              </Grid>
+            </Stack>
+          </Box>
+        </ContentLayout>
+      )}
+    </>
+  );
+};
+
+export default Settings;

package/admin/src/pluginId.js

@@ -0,0 +1,5 @@
+import pluginPkg from '../../package.json';
+
+const pluginId = pluginPkg.name.replace(/^(@[^-,.][\w,-]+\/|strapi-)plugin-/i, '');
+
+export default pluginId;

package/admin/src/translations/en.json

@@ -0,0 +1 @@
+{}

package/admin/src/translations/fr.json

@@ -0,0 +1 @@
+{}

package/admin/src/utils/axiosInstance.js

@@ -0,0 +1,40 @@
+/**
+ * axios with a custom config.
+ */
+
+import axios from 'axios';
+import { auth } from '@strapi/helper-plugin';
+
+const instance = axios.create({
+  baseURL: process.env.STRAPI_ADMIN_BACKEND_URL,
+});
+
+instance.interceptors.request.use(
+  async (config) => {
+    config.headers = {
+      Authorization: `Bearer ${auth.getToken()}`,
+      Accept: 'application/json',
+      'Content-Type': 'application/json',
+    };
+
+    return config;
+  },
+  (error) => {
+    Promise.reject(error);
+  }
+);
+
+instance.interceptors.response.use(
+  (response) => response,
+  (error) => {
+    // whatever you want to do with the error
+    if (error.response?.status === 401) {
+      auth.clearAppStorage();
+      window.location.reload();
+    }
+
+    throw error;
+  }
+);
+
+export default instance;

package/admin/src/utils/getTrad.js

@@ -0,0 +1,5 @@
+import pluginId from '../pluginId';
+
+const getTrad = (id) => `${pluginId}.${id}`;
+
+export default getTrad;

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@retikolo/drag-drop-content-types",
+  "version": "1.0.0",
+  "description": "This plugin add a drag and droppable list that allows you to sort content type entries.",
+  "strapi": {
+    "name": "drag-drop-content-types",
+    "description": "This plugin add a drag and droppable list that allows you to sort content type entries.",
+    "kind": "plugin",
+    "displayName": "Drag Drop Content Types"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/plantagoIT/strapi-drag-drop-content-type-plugin"
+  },
+  "peerDependencies": {
+    "@strapi/strapi": "^4.0.0"
+  },
+  "dependencies": {
+    "react-drag-sortable": "^1.0.6"
+  },
+  "author": {
+    "name": "Aeneas Meier",
+    "email": "aeneas@retikolo.xyz",
+    "url": "https://rgb.retikolo.xyz"
+  },
+  "maintainers": [
+    {
+      "name": "Aeneas Meier",
+      "email": "aeneas@retikolo.xyz",
+      "url": "https://rgb.retikolo.xyz"
+    }
+  ],
+  "engines": {
+    "node": ">=14.19.1 <=18.x.x",
+    "npm": ">=6.0.0"
+  },
+  "license": "MIT"
+}

package/server/bootstrap.js

@@ -0,0 +1,5 @@
+'use strict';
+
+module.exports = ({ strapi }) => {
+  console.log("REGISTERED DRAG AND DROP CONTENT TYPE PLUGIN")
+};

package/server/config/index.js

@@ -0,0 +1,6 @@
+'use strict';
+
+module.exports = {
+  default: {},
+  validator() {},
+};

package/server/content-types/index.js

@@ -0,0 +1,4 @@
+'use strict';
+
+
+module.exports = {};

package/server/controllers/index.js

@@ -0,0 +1,7 @@
+'use strict';
+
+const sort = require('./sort');
+
+module.exports = {
+  sort,
+};

package/server/controllers/sort.js

@@ -0,0 +1,77 @@
+'use strict';
+
+// Get the store from the drag-drop plugin
+function getPluginStore() {
+  return strapi.store({
+    environment: '',
+    type: 'plugin',
+    name: 'drag-drop-content-types',
+  });
+}
+
+// Create a default config if there is none yet
+async function createDefaultConfig() {
+  const pluginStore = getPluginStore();
+  const value = {
+    body:{
+      rank: 'rank',
+      title: 'title',
+    }
+  };
+  await pluginStore.set({ key: 'settings', value });
+  return pluginStore.get({ key: 'settings' });
+}
+
+// Get settings from plugin store
+async function getSettings() {
+  const pluginStore = getPluginStore();
+  let config = await pluginStore.get({ key: 'settings' });
+  if (!config) {
+    config = await createDefaultConfig();
+  }
+  return config;
+}
+
+// Update settings to plugin store
+async function setSettings(settings) {
+  const value = settings;
+  const pluginStore = getPluginStore();
+  await pluginStore.set({ key: 'settings', value });
+  return pluginStore.get({ key: 'settings' });
+}
+
+// Update rank of specified content type
+async function update(id, contentType, rank) {
+  return await strapi.query(contentType).update({
+    where: { id: id },
+    data: {
+      rank: rank,
+    }
+  });
+}
+
+module.exports = {
+  async getSettings(ctx) {
+    try {
+      ctx.body = await getSettings();
+    } catch (err) {
+      ctx.throw(500, err);
+    }
+  },
+  async setSettings(ctx) {
+    const { body } = ctx.request;
+    try {
+      await setSettings(body);
+      ctx.body = await getSettings();
+    } catch (err) {
+      ctx.throw(500, err);
+    }
+  },
+  async update(ctx) {
+    try {
+      ctx.body = await update(ctx.params.id, ctx.request.body.contentType, ctx.request.body.rank);
+    } catch (err) {
+      ctx.throw(500, err);
+    }
+  },
+};

package/server/destroy.js

@@ -0,0 +1,5 @@
+'use strict';
+
+module.exports = ({ strapi }) => {
+  // destroy phase
+};

package/server/index.js

@@ -0,0 +1,25 @@
+'use strict';
+
+const register = require('./register');
+const bootstrap = require('./bootstrap');
+const destroy = require('./destroy');
+const config = require('./config');
+const contentTypes = require('./content-types');
+const controllers = require('./controllers');
+const routes = require('./routes');
+const middlewares = require('./middlewares');
+const policies = require('./policies');
+const services = require('./services');
+
+module.exports = {
+  register,
+  bootstrap,
+  destroy,
+  config,
+  controllers,
+  routes,
+  services,
+  contentTypes,
+  policies,
+  middlewares,
+};

package/server/middlewares/index.js

@@ -0,0 +1,3 @@
+'use strict';
+
+module.exports = {};

package/server/policies/index.js

@@ -0,0 +1,3 @@
+'use strict';
+
+module.exports = {};

package/server/register.js

@@ -0,0 +1,12 @@
+// server/register.js
+'use strict';
+
+module.exports = ({ strapi }) => {
+  // Iterating on every content-types
+  Object.values(strapi.contentTypes).forEach(contentType => {
+    // If this is an api content-type
+    if (contentType.uid.includes('api::')) {
+      // Add prconfigured content types here
+    }
+  });
+};

package/server/routes/index.js

@@ -0,0 +1,7 @@
+// Structure all routes in seperate files
+
+const sort = require('./sort');
+
+module.exports = {
+  sort,
+};

package/server/routes/sort.js

@@ -0,0 +1,34 @@
+
+
+module.exports = {
+  type: 'admin',
+  routes: [
+    {
+      method: 'GET',
+      path: '/settings',
+      handler: 'sort.getSettings',
+      config: {
+        policies: [],
+        auth: false,
+      },
+    },
+    {
+      method: 'POST',
+      path: '/settings',
+      handler: 'sort.setSettings',
+      config: {
+        policies: [],
+        auth: false,
+      },
+    },
+    {
+      method: "PUT",
+      path: "/sort-update/:id",
+      handler: "sort.update",
+      config: {
+        policies: [],
+        auth: false,
+      },
+    },
+  ],
+};

package/server/services/index.js

@@ -0,0 +1,3 @@
+'use strict';
+
+module.exports = {};

package/strapi-admin.js

@@ -0,0 +1,3 @@
+'use strict';
+
+module.exports = require('./admin/src').default;

package/strapi-server.js

@@ -0,0 +1,3 @@
+'use strict';
+
+module.exports = require('./server');