feat: SelectOne action implemented

resources/js/actions/select-one.js

@@ -0,0 +1,66 @@
+import React from 'react';
+import api from "../api/api";
+import path from "../state/path";
+import ui from "../core/ui/util";
+import Button from "../core/ui/button";
+import i18n from "../util/i18n";
+
+class Delete extends React.Component {
+
+    static defaultProps = {
+        type: '',
+        components: [],
+        path: {},
+        id: 0,
+        data: {},
+        params: null,
+        redirect: 'index',
+        redirectBack: false,
+        singular: '',
+        plural: ''
+    };
+
+    constructor(props) {
+        super(props);
+
+        if (this.props.params) {
+            this.props.path.params = this.props.params;
+        }
+    }
+
+    delete() {
+        // Load the data from the backend (with id as param)
+        api.execute.get(this.props.path, this.props.id,'delete', this.props.path.params).then(response => {
+
+            // Redirect
+            this.redirect();
+
+            // Notify the user
+            ui.notify(i18n.get('snippets.singular_deleted', {singular: this.props.singular}));
+        });
+    }
+
+    redirect() {
+        path.handleRedirect(this.props);
+    }
+
+    render() {
+        return (
+            <div className="delete">
+                <div className="delete__text">
+                    {i18n.get('snippets.delete_singular_text', {singular: this.props.singular})}
+                </div>
+                <div className="delete__footer">
+                    <div className="delete__confirm">
+                        <Button onClick={this.delete.bind(this)} text={i18n.get('snippets.delete_singular_confirm', {singular: this.props.singular})} />
+                    </div>
+                    <div className="delete__cancel">
+                        <Button onClick={this.redirect.bind(this)} text={i18n.get('snippets.delete_singular_cancel')} style={'secondary'} />
+                    </div>
+                </div>
+            </div>
+        );
+    }
+}
+
+export default Delete;

resources/sass/cmf/actions/_select-one.scss

@@ -0,0 +1,125 @@
+@include block(index)
+{
+    background-color: $color01;
+    border-radius: $border-radius-1;
+    border: $border-width-2 solid $fill-color-alt-1;
+    transition: opacity .5s;
+
+    @include modifier(loading)
+    {
+        opacity: 0;
+    }
+
+    @include element(rows)
+    {
+        @include block-modifier(grid)
+        {
+            display: grid;
+            grid-template-columns: repeat(5, 1fr);
+            grid-gap: $rule;
+            padding: 0 $rule;
+        }
+    }
+
+    @include element(row)
+    {
+        border-bottom: $border-width-1 solid $fill-color;
+
+        @include block-modifier(grid)
+        {
+            display: flex;
+            padding: 0;
+            border: 0;
+            background-color: $color01;
+
+            &:hover
+            {
+                background-color: $color01;
+            }
+        }
+    }
+
+    @include element(component)
+    {
+        @include block-modifier(grid)
+        {
+            display: flex;
+            flex-grow: 1;
+        }
+    }
+
+    @include element(placeholder)
+    {
+        text-align: center;
+        border-radius: $border-radius-1;
+        background-color: $fill-color;
+        padding: calc($rule / 2) $rule;
+        margin: 0 calc($rule / 2);
+        margin-bottom: calc($rule / 2);
+    }
+
+    @include element(header)
+    {
+        display: flex;
+        flex-direction: column;
+        gap: calc($rule / 2);
+        padding: calc($rule / 2) $rule;
+
+        @include breakpoint(2)
+        {
+            flex-direction: row;
+            align-items: center;
+        }
+    }
+
+    @include element(header-title)
+    {
+        @include type-9;
+    }
+
+    @include element(header-options)
+    {
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+        flex-grow: 1;
+        gap: calc($rule / 2);
+
+        @include breakpoint(2)
+        {
+            justify-content: flex-end;
+        }
+    }
+
+    @include element(header-search)
+    {
+        // for ref
+    }
+
+    @include element(header-filter)
+    {
+        margin-left: calc($rule / 2);
+
+        &:first-child
+        {
+            margin-left: 0;
+        }
+    }
+
+    @include element(header-filters-tool)
+    {
+        display: flex;
+        align-items: center;
+    }
+
+    @include element(header-clear-filters)
+    {
+        margin-left: calc($rule / 2);
+    }
+
+    @include element(footer)
+    {
+        width: 100%;
+        padding: calc($rule / 2) $rule;
+    }
+}