#591 - php

resources/js/pages/php/components/ini.tsx

@@ -0,0 +1,107 @@
+import { Service } from '@/types/service';
+import React, { FormEvent, useState } from 'react';
+import { useForm } from '@inertiajs/react';
+import { useQuery } from '@tanstack/react-query';
+import axios from 'axios';
+import { Editor, useMonaco } from '@monaco-editor/react';
+import { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger } from '@/components/ui/sheet';
+import { DropdownMenuItem } from '@/components/ui/dropdown-menu';
+import { Form } from '@/components/ui/form';
+import { Skeleton } from '@/components/ui/skeleton';
+import { Button } from '@/components/ui/button';
+import { LoaderCircleIcon } from 'lucide-react';
+
+export default function PHPIni({ service, type }: { service: Service; type: 'fpm' | 'cli' }) {
+  const [open, setOpen] = useState(false);
+  const form = useForm<{
+    ini: string;
+    type: 'fpm' | 'cli';
+    version: string;
+  }>({
+    ini: '',
+    type: type,
+    version: service.version,
+  });
+
+  const submit = (e: FormEvent) => {
+    e.preventDefault();
+    form.patch(route('php.ini.update', { server: service.server_id, service: service.id }), {
+      onSuccess: () => {
+        setOpen(false);
+      },
+    });
+  };
+
+  const query = useQuery({
+    queryKey: ['php.ini', service.server_id, service.id, type],
+    queryFn: async () => {
+      const response = await axios.get(
+        route('php.ini', {
+          server: service.server_id,
+          service: service.id,
+          version: service.version,
+          type: type,
+        }),
+      );
+      if (response.data?.ini) {
+        form.setData('ini', response.data.ini);
+      }
+      return response.data;
+    },
+    retry: false,
+    enabled: open,
+  });
+
+  const monaco = useMonaco();
+  monaco?.languages.register({ id: 'ini' });
+  monaco?.languages.setMonarchTokensProvider('ini', {
+    tokenizer: {
+      root: [
+        [/^\[.*]$/, 'keyword'],
+        [/^[^=]+(?==)/, 'attribute.name'],
+        [/=.+$/, 'attribute.value'],
+      ],
+    },
+  });
+
+  return (
+    <Sheet open={open} onOpenChange={setOpen}>
+      <SheetTrigger asChild>
+        <DropdownMenuItem onSelect={(e) => e.preventDefault()}>Edit {type} ini</DropdownMenuItem>
+      </SheetTrigger>
+      <SheetContent className="sm:max-w-5xl">
+        <SheetHeader>
+          <SheetTitle>Edit {type} ini</SheetTitle>
+          <SheetDescription className="sr-only">You can edit the {type} ini file for this service. Make sure to save your changes.</SheetDescription>
+        </SheetHeader>
+        <Form id="update-ini-form" className="h-full" onSubmit={submit}>
+          {query.isSuccess ? (
+            <Editor
+              defaultLanguage="ini"
+              defaultValue={query.data.ini}
+              theme="vs-dark"
+              className="h-full"
+              onChange={(value) => form.setData('ini', value ?? '')}
+              options={{
+                fontSize: 15,
+              }}
+            />
+          ) : (
+            <Skeleton className="h-full w-full" />
+          )}
+        </Form>
+        <SheetFooter>
+          <div className="flex items-center gap-2">
+            <Button form="update-ini-form" disabled={form.processing || query.isLoading} onClick={submit} className="ml-2">
+              {(form.processing || query.isLoading) && <LoaderCircleIcon className="animate-spin" />}
+              Save
+            </Button>
+            <SheetClose asChild>
+              <Button variant="outline">Cancel</Button>
+            </SheetClose>
+          </div>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  );
+}