filter-button 0.1.0

package/README.md

@@ -0,0 +1,95 @@
+
+# Filter Button
+
+## About
+
+![App Screenshot](./assets/demo.gif)
+
+This package provides a custom field for Strapi that lets you add a filter button in no time.
+
+Custom fields are supported since Strapi 4.4+ and offer powerful API to create highly customizable fields.
+
+This plugin lets you view filtered data according to your configurations.
+
+
+Installation
+
+## Installation
+
+To install this plugin, you need to add an NPM dependency to your Strapi application:
+#### For NPM:
+```bash
+npm i filter-button
+```
+#### For Yarn:
+```bash
+yarn add filter-button
+```
+
+Now we need to register plugin so strapi can use it. In order to do that we need to create (if not already created) ./config/plugins.js file and add entry to it.
+```bash
+    'filter-button': {
+        enabled: true,
+    }
+```
+
+## Configuration 
+#### create relations first for filter button to work
+if relation is many to many then add boolean ```manyToMany:true``` in configuration
+
+Add webpack.config.js file into src/admin and paste this content there.
+
+
+```bash
+'use strict';
+
+/* eslint-disable no-unused-vars */
+module.exports = (config, webpack) => {
+  config.plugins.push(
+    new webpack.DefinePlugin({
+      CONTENT_TYPES: JSON.stringify(
+        [
+          {
+            from: 'api::topic.topic', // collection where button will be added
+            to: 'api::card.card', // which collection you want to filter
+            filterBy: 'title', // field name by which you want to filter
+            attributeName: 'viewCards', //attribute name added while adding button
+            buttonTitle: 'View Cards', // title of button
+          },
+          {
+            from: 'api::category.category',
+            to: 'api::topic.topic',
+            filterBy: 'title',
+            attributeName: 'viewTopics',
+            buttonTitle: 'View Topics',
+          },
+          {
+            from: 'api::category.category', //adding multiple buttons for same collection
+            to: 'api::card.card',
+            filterBy: 'title',
+            attributeName: 'viewCards',
+            buttonTitle: 'View Cards',
+          }
+        ]
+      ),
+    })
+  )
+  return config;
+};
+
+```
+
+### Then Run build: 
+#### For NPM:
+```bash
+npm run bild
+```
+#### For Yarn:
+```bash
+yarn bild
+```
+## How To Use
+
+1. Once all necessary configuration is done, create a elation between ```from``` and ```to``` collections.
+2. Add button from custom fields
+3. make sure ```attributeName``` is matching with configurations while creating custom field

package/admin/src/components/ButtonComponent/ButtonComponent.js

@@ -0,0 +1,37 @@
+/*
+ *
+ * HomePage
+ *
+ */
+import { Box, Button } from '@strapi/design-system';
+import React from 'react';
+import { useHistory } from "react-router-dom";
+import { useCMEditViewDataManager } from '@strapi/helper-plugin';
+
+
+const ButtonComponent = ({ name }) => {
+    const history = useHistory();
+    const {
+        allLayoutData,
+        modifiedData
+    } = useCMEditViewDataManager();
+
+    const { uid } = allLayoutData.contentType;
+    const currentCollection = CONTENT_TYPES?.filter(data => { if (data?.from === uid && data?.attributeName === name) return data })[0]
+    console.log(currentCollection)
+    const filterCards = () => {
+        history.push(`/content-manager/collectionType/${currentCollection?.to}?page=1&pageSize=10&sort=${currentCollection?.filterBy}:ASC&filters[$and][0][${currentCollection?.manyToMany ? currentCollection?.from?.split('.')[1] + 's' : currentCollection?.from?.split('.')[1]}][${currentCollection?.filterBy}][$eq]=${modifiedData?.title}`)
+    }
+
+    return (
+        <>
+            <Box paddingTop={5} style={{ width: '100%' }}>
+                <Button style={{ margin: 'auto' }} size="L" variant="default" onClick={filterCards}>
+                    {currentCollection?.buttonTitle || "View"}
+                </Button>
+            </Box>
+        </>
+    );
+};
+
+export default ButtonComponent;

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/PluginIcon/index.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Icon } from '@strapi/design-system/Icon';
+import { Flex } from '@strapi/design-system/Flex';
+import Filter from '@strapi/icons/Filter';
+
+const IconBox = styled(Flex)`
+  /* Hard code color values */
+  /* to stay consistent between themes */
+  background-color: #f0f0ff; /* primary100 */
+  border: 1px solid #d9d8ff; /* primary200 */
+
+  svg > path {
+    fill: #4945ff; /* primary600 */
+  }
+`;
+
+const PluginIcon = () => {
+  return (
+    <IconBox justifyContent="center" alignItems="center" width={7} height={6} hasRadius aria-hidden>
+      <Icon as={Filter} />
+    </IconBox>
+  );
+};
+
+export default PluginIcon;

package/admin/src/index.js

@@ -0,0 +1,64 @@
+import { prefixPluginTranslations } from '@strapi/helper-plugin';
+import pluginPkg from '../../package.json';
+import pluginId from './pluginId';
+import Initializer from './components/Initializer';
+import PluginIcon from './components/PluginIcon';
+
+const name = pluginPkg.strapi.name;
+
+export default {
+  register(app) {
+    app.customFields.register({
+      name: "filterButton",
+      pluginId: pluginId, // the custom field is created by a color-picker plugin
+      type: "string", // the color will be stored as a string
+
+      intlLabel: {
+        id: "filter-button-button-label",
+        defaultMessage: "Filter Button",
+      },
+      intlDescription: {
+        id: "filter-button-button-description",
+        defaultMessage: "Filter Data",
+      },
+      icon: PluginIcon, // don't forget to create/import your icon component 
+      components: {
+        Input: async () => import(/* webpackChunkName: "input-component" */ "./components/ButtonComponent/ButtonComponent.js"),
+      },
+      options: {
+        // declare options here
+      },
+    });
+    app.registerPlugin({
+      id: pluginId,
+      initializer: Initializer,
+      isReady: false,
+      name,
+    });
+  },
+
+  bootstrap(app) { },
+  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,25 @@
+/**
+ *
+ * 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';
+import HomePage from '../HomePage';
+
+const App = () => {
+  return (
+    <div>
+      <Switch>
+        <Route path={`/plugins/${pluginId}`} component={HomePage} exact />
+        <Route component={NotFound} />
+      </Switch>
+    </div>
+  );
+};
+
+export default App;

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

@@ -0,0 +1,20 @@
+/*
+ *
+ * HomePage
+ *
+ */
+
+import React from 'react';
+// import PropTypes from 'prop-types';
+import pluginId from '../../pluginId';
+
+const HomePage = () => {
+  return (
+    <div>
+      <h1>{pluginId}&apos;s HomePage</h1>
+      <p>Happy coding</p>
+    </div>
+  );
+};
+
+export default HomePage;

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,42 @@
+/**
+ * axios with a custom config.
+ */
+
+import axios from 'axios';
+import { auth, wrapAxiosInstance } 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;
+  }
+);
+
+const wrapper = wrapAxiosInstance(instance);
+
+export default wrapper;

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,25 @@
+{
+  "name": "filter-button",
+  "version": "0.1.0",
+  "description": "This is the description of the plugin.",
+  "strapi": {
+    "name": "filter-button",
+    "description": "Description of Filter Button plugin",
+    "kind": "plugin",
+    "displayName": "Filter Button"
+  },
+  "dependencies": {},
+  "author": {
+    "name": "A Strapi developer"
+  },
+  "maintainers": [
+    {
+      "name": "A Strapi developer"
+    }
+  ],
+  "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 }) => {
+  // bootstrap phase
+};

package/server/index.js

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

package/server/register.js

@@ -0,0 +1,9 @@
+'use strict';
+
+module.exports = ({ strapi }) => {
+  strapi.customFields.register({
+    name: 'filterButton',
+    plugin: 'filter-button',
+    type: 'string',
+  })
+};

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');