restructure files onto electron-vite boilerplate

2026-05-07 12:30:12 +02:00 · 2025-05-18 14:03:18 -07:00
parent 91ce2cd8a1
commit 1cf587bc8f
457 changed files with 9927 additions and 11705 deletions
@@ -1,12 +1,13 @@
 import { Group, Stack } from '@mantine/core';
-import { Select } from '/@/renderer/components/select';
 import { AnimatePresence, motion } from 'framer-motion';
 import { RiAddFill, RiAddLine, RiDeleteBinFill, RiMore2Line, RiRestartLine } from 'react-icons/ri';
+
+import i18n from '/@/i18n/i18n';
 import { Button } from '/@/renderer/components/button';
 import { DropdownMenu } from '/@/renderer/components/dropdown-menu';
 import { QueryBuilderOption } from '/@/renderer/components/query-builder/query-builder-option';
+import { Select } from '/@/renderer/components/select';
 import { QueryBuilderGroup, QueryBuilderRule } from '/@/renderer/types';
-import i18n from '/@/i18n/i18n';

 const FILTER_GROUP_OPTIONS_DATA = [
    {
@@ -63,22 +64,22 @@ interface QueryBuilderProps {

 export const QueryBuilder = ({
    data,
+    filters,
+    groupIndex,
    level,
    onAddRule,
-    onDeleteRuleGroup,
-    onDeleteRule,
    onAddRuleGroup,
-    onChangeType,
    onChangeField,
-    operators,
    onChangeOperator,
+    onChangeType,
    onChangeValue,
    onClearFilters,
+    onDeleteRule,
+    onDeleteRuleGroup,
    onResetFilters,
+    operators,
    playlists,
-    groupIndex,
    uniqueId,
-    filters,
 }: QueryBuilderProps) => {
    const handleAddRule = () => {
        onAddRule({ groupIndex, level });
@@ -92,7 +93,7 @@ export const QueryBuilder = ({
        onDeleteRuleGroup({ groupIndex, level, uniqueId });
    };

-    const handleChangeType = (value: string | null) => {
+    const handleChangeType = (value: null | string) => {
        onChangeType({ groupIndex, level, value });
    };

@@ -105,17 +106,17 @@ export const QueryBuilder = ({
                <Select
                    data={FILTER_GROUP_OPTIONS_DATA}
                    maxWidth={175}
+                    onChange={handleChangeType}
                    size="sm"
                    value={data.type}
                    width="20%"
-                    onChange={handleChangeType}
                />
                <Button
+                    onClick={handleAddRule}
                    px={5}
                    size="sm"
                    tooltip={{ label: 'Add rule' }}
                    variant="default"
-                    onClick={handleAddRule}
                >
                    <RiAddLine size={20} />
                </Button>
@@ -170,10 +171,10 @@ export const QueryBuilder = ({
            <AnimatePresence initial={false}>
                {data?.rules?.map((rule: QueryBuilderRule) => (
                    <motion.div
-                        key={rule.uniqueId}
                        animate={{ opacity: 1, x: 0 }}
                        exit={{ opacity: 0, x: -25 }}
                        initial={{ opacity: 0, x: -25 }}
+                        key={rule.uniqueId}
                        transition={{ duration: 0.2, ease: 'easeInOut' }}
                    >
                        <QueryBuilderOption
@@ -182,12 +183,12 @@ export const QueryBuilder = ({
                            groupIndex={groupIndex || []}
                            level={level}
                            noRemove={data?.rules?.length === 1}
-                            operators={operators}
-                            selectData={playlists}
                            onChangeField={onChangeField}
                            onChangeOperator={onChangeOperator}
                            onChangeValue={onChangeValue}
                            onDeleteRule={onDeleteRule}
+                            operators={operators}
+                            selectData={playlists}
                        />
                    </motion.div>
                ))}
@@ -196,10 +197,10 @@ export const QueryBuilder = ({
                <AnimatePresence initial={false}>
                    {data.group?.map((group: QueryBuilderGroup, index: number) => (
                        <motion.div
-                            key={group.uniqueId}
                            animate={{ opacity: 1, x: 0 }}
                            exit={{ opacity: 0, x: -25 }}
                            initial={{ opacity: 0, x: -25 }}
+                            key={group.uniqueId}
                            transition={{ duration: 0.2, ease: 'easeInOut' }}
                        >
                            <QueryBuilder
@@ -207,9 +208,6 @@ export const QueryBuilder = ({
                                filters={filters}
                                groupIndex={[...(groupIndex || []), index]}
                                level={level + 1}
-                                operators={operators}
-                                playlists={playlists}
-                                uniqueId={group.uniqueId}
                                onAddRule={onAddRule}
                                onAddRuleGroup={onAddRuleGroup}
                                onChangeField={onChangeField}
@@ -220,6 +218,9 @@ export const QueryBuilder = ({
                                onDeleteRule={onDeleteRule}
                                onDeleteRuleGroup={onDeleteRuleGroup}
                                onResetFilters={onResetFilters}
+                                operators={operators}
+                                playlists={playlists}
+                                uniqueId={group.uniqueId}
                            />
                        </motion.div>
                    ))}
@@ -1,6 +1,7 @@
 import { Group } from '@mantine/core';
 import { useState } from 'react';
 import { RiSubtractLine } from 'react-icons/ri';
+
 import { Button } from '/@/renderer/components/button';
 import { NumberInput, TextInput } from '/@/renderer/components/input';
 import { Select } from '/@/renderer/components/select';
@@ -31,62 +32,10 @@ interface QueryOptionProps {
    selectData?: { label: string; value: string }[];
 }

-const QueryValueInput = ({ onChange, type, data, ...props }: any) => {
+const QueryValueInput = ({ data, onChange, type, ...props }: any) => {
    const [numberRange, setNumberRange] = useState([0, 0]);

    switch (type) {
-        case 'string':
-            return (
-                <TextInput
-                    size="sm"
-                    onChange={onChange}
-                    {...props}
-                />
-            );
-        case 'number':
-            return (
-                <NumberInput
-                    size="sm"
-                    onChange={onChange}
-                    {...props}
-                    defaultValue={props.defaultValue && Number(props.defaultValue)}
-                />
-            );
-        case 'date':
-            return (
-                <TextInput
-                    size="sm"
-                    onChange={onChange}
-                    {...props}
-                />
-            );
-        case 'dateRange':
-            return (
-                <>
-                    <NumberInput
-                        {...props}
-                        defaultValue={props.defaultValue && Number(props.defaultValue?.[0])}
-                        maxWidth={81}
-                        width="10%"
-                        onChange={(e) => {
-                            const newRange = [e || 0, numberRange[1]];
-                            setNumberRange(newRange);
-                            onChange(newRange);
-                        }}
-                    />
-                    <NumberInput
-                        {...props}
-                        defaultValue={props.defaultValue && Number(props.defaultValue?.[1])}
-                        maxWidth={81}
-                        width="10%"
-                        onChange={(e) => {
-                            const newRange = [numberRange[0], e || 0];
-                            setNumberRange(newRange);
-                            onChange(newRange);
-                        }}
-                    />
-                </>
-            );
        case 'boolean':
            return (
                <Select
@@ -98,6 +47,50 @@ const QueryValueInput = ({ onChange, type, data, ...props }: any) => {
                    {...props}
                />
            );
+        case 'date':
+            return (
+                <TextInput
+                    onChange={onChange}
+                    size="sm"
+                    {...props}
+                />
+            );
+        case 'dateRange':
+            return (
+                <>
+                    <NumberInput
+                        {...props}
+                        defaultValue={props.defaultValue && Number(props.defaultValue?.[0])}
+                        maxWidth={81}
+                        onChange={(e) => {
+                            const newRange = [e || 0, numberRange[1]];
+                            setNumberRange(newRange);
+                            onChange(newRange);
+                        }}
+                        width="10%"
+                    />
+                    <NumberInput
+                        {...props}
+                        defaultValue={props.defaultValue && Number(props.defaultValue?.[1])}
+                        maxWidth={81}
+                        onChange={(e) => {
+                            const newRange = [numberRange[0], e || 0];
+                            setNumberRange(newRange);
+                            onChange(newRange);
+                        }}
+                        width="10%"
+                    />
+                </>
+            );
+        case 'number':
+            return (
+                <NumberInput
+                    onChange={onChange}
+                    size="sm"
+                    {...props}
+                    defaultValue={props.defaultValue && Number(props.defaultValue)}
+                />
+            );
        case 'playlist':
            return (
                <Select
@@ -106,6 +99,14 @@ const QueryValueInput = ({ onChange, type, data, ...props }: any) => {
                    {...props}
                />
            );
+        case 'string':
+            return (
+                <TextInput
+                    onChange={onChange}
+                    size="sm"
+                    {...props}
+                />
+            );

        default:
            return <></>;
@@ -115,14 +116,14 @@ const QueryValueInput = ({ onChange, type, data, ...props }: any) => {
 export const QueryBuilderOption = ({
    data,
    filters,
-    level,
-    onDeleteRule,
-    operators,
    groupIndex,
+    level,
    noRemove,
    onChangeField,
    onChangeOperator,
    onChangeValue,
+    onDeleteRule,
+    operators,
    selectData,
 }: QueryOptionProps) => {
    const { field, operator, uniqueId, value } = data;
@@ -192,51 +193,51 @@ export const QueryBuilderOption = ({
            spacing="sm"
        >
            <Select
-                searchable
                data={filters}
                maxWidth={170}
+                onChange={handleChangeField}
+                searchable
                size="sm"
                value={field}
                width="25%"
-                onChange={handleChangeField}
            />
            <Select
-                searchable
                data={operatorsByFieldType || []}
                disabled={!field}
                maxWidth={170}
+                onChange={handleChangeOperator}
+                searchable
                size="sm"
                value={operator}
                width="25%"
-                onChange={handleChangeOperator}
            />
            {field ? (
                <QueryValueInput
                    data={selectData || []}
                    defaultValue={value}
                    maxWidth={170}
+                    onChange={handleChangeValue}
                    size="sm"
                    type={operator === 'inTheRange' ? 'dateRange' : fieldType}
                    width="25%"
-                    onChange={handleChangeValue}
                />
            ) : (
                <TextInput
-                    disabled
                    defaultValue={value}
+                    disabled
                    maxWidth={170}
+                    onChange={handleChangeValue}
                    size="sm"
                    width="25%"
-                    onChange={handleChangeValue}
                />
            )}
            <Button
                disabled={noRemove}
+                onClick={handleDeleteRule}
                px={5}
                size="sm"
                tooltip={{ label: 'Remove rule' }}
                variant="default"
-                onClick={handleDeleteRule}
            >
                <RiSubtractLine size={20} />
            </Button>