diff --git a/web/Modules/Docker/App/Models/DockerTemplate.php b/web/Modules/Docker/App/Models/DockerTemplate.php index 7421bcc..c44f50a 100644 --- a/web/Modules/Docker/App/Models/DockerTemplate.php +++ b/web/Modules/Docker/App/Models/DockerTemplate.php @@ -12,7 +12,11 @@ class DockerTemplate extends Model /** * The attributes that are mass assignable. */ - protected $fillable = []; + protected $fillable = [ + 'name', + 'description', + 'docker_compose', + ]; } diff --git a/web/Modules/Docker/Filament/Clusters/Docker/Resources/DockerTemplateResource.php b/web/Modules/Docker/Filament/Clusters/Docker/Resources/DockerTemplateResource.php index f06a7c6..90c8479 100644 --- a/web/Modules/Docker/Filament/Clusters/Docker/Resources/DockerTemplateResource.php +++ b/web/Modules/Docker/Filament/Clusters/Docker/Resources/DockerTemplateResource.php @@ -13,6 +13,7 @@ use Modules\Docker\App\Models\DockerTemplate; use Modules\Docker\Filament\Clusters\Docker\Resources\DockerTemplateResource\Pages\CreateDockerTemplate; use Modules\Docker\Filament\Clusters\Docker\Resources\DockerTemplateResource\Pages\EditDockerTemplate; use Modules\Docker\Filament\Clusters\Docker\Resources\DockerTemplateResource\Pages\ListDockerTemplates; +use Riodwanto\FilamentAceEditor\AceEditor; class DockerTemplateResource extends Resource { @@ -34,7 +35,28 @@ class DockerTemplateResource extends Resource { return $form ->schema([ - // + + Forms\Components\TextInput::make('name') + ->label('Name') + ->required() + ->placeholder('Enter the name of the template'), + + Forms\Components\TextInput::make('description') + ->label('Description') + ->placeholder('Enter the description of the template'), + + +// Forms\Components\Textarea::make('docker_compose') +// ->label('Docker compose') +// ->required() +// ->columnSpanFull() +// ->placeholder('Enter the Dockerfile content'), + + AceEditor::make('docker_compose') + ->mode('php') + ->theme('github') + ->darkTheme('dracula'), + ]); } @@ -42,7 +64,8 @@ class DockerTemplateResource extends Resource { return $table ->columns([ - // + Tables\Columns\TextColumn::make('name'), + Tables\Columns\TextColumn::make('description'), ]) ->filters([ // diff --git a/web/composer.json b/web/composer.json index b892c16..c922cbf 100644 --- a/web/composer.json +++ b/web/composer.json @@ -25,6 +25,7 @@ "outerweb/filament-settings": "^1.2", "phpseclib/phpseclib": "^3.0", "postare/blade-mdi": "^1.1", + "riodwanto/filament-ace-editor": "^1.0", "spatie/ssh": "^1.10", "stechstudio/filament-impersonate": "^3.8", "symfony/process": "^6.3", diff --git a/web/composer.lock b/web/composer.lock index 931f3d3..42be665 100644 --- a/web/composer.lock +++ b/web/composer.lock @@ -4,7 +4,7 @@ "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies", "This file is @generated automatically" ], - "content-hash": "24c114639ffad26d47dac674a59e408e", + "content-hash": "6e65fe2d2aeaae5d8f903e679ebff837", "packages": [ { "name": "acmephp/core", @@ -6339,6 +6339,78 @@ ], "time": "2023-11-08T05:53:05+00:00" }, + { + "name": "riodwanto/filament-ace-editor", + "version": "v1.0.0", + "source": { + "type": "git", + "url": "https://github.com/riodwanto/filament-ace-editor.git", + "reference": "06894ad2ff03e6bd6f7768febdb7e9c2dd86a930" + }, + "dist": { + "type": "zip", + "url": "https://api.github.com/repos/riodwanto/filament-ace-editor/zipball/06894ad2ff03e6bd6f7768febdb7e9c2dd86a930", + "reference": "06894ad2ff03e6bd6f7768febdb7e9c2dd86a930", + "shasum": "" + }, + "require": { + "illuminate/contracts": "^10.0", + "php": "^8.1", + "spatie/laravel-package-tools": "^1.15.0" + }, + "require-dev": { + "filament/filament": "^3.0", + "nunomaduro/collision": "^7.9", + "orchestra/testbench": "^8.0", + "pestphp/pest": "^2.0", + "pestphp/pest-plugin-arch": "^2.0", + "pestphp/pest-plugin-laravel": "^2.0" + }, + "type": "library", + "extra": { + "laravel": { + "providers": [ + "Riodwanto\\FilamentAceEditor\\FilamentAceEditorServiceProvider" + ], + "aliases": { + "FilamentAceEditor": "Riodwanto\\FilamentAceEditor\\Facades\\FilamentAceEditor" + } + } + }, + "autoload": { + "psr-4": { + "Riodwanto\\FilamentAceEditor\\": "src/", + "Riodwanto\\FilamentAceEditor\\Database\\Factories\\": "database/factories/" + } + }, + "notification-url": "https://packagist.org/downloads/", + "license": [ + "MIT" + ], + "authors": [ + { + "name": "Rio Dewanto P", + "email": "rdp.tech@gmail.com", + "role": "Developer" + } + ], + "description": "Ace Editor implementation for Filament 3 Form", + "homepage": "https://github.com/riodwanto/filament-ace-editor", + "keywords": [ + "code-editor", + "filament", + "filament-ace-editor", + "filament-field", + "filament-form-field", + "laravel", + "riodwanto" + ], + "support": { + "issues": "https://github.com/riodwanto/filament-ace-editor/issues", + "source": "https://github.com/riodwanto/filament-ace-editor" + }, + "time": "2024-03-03T11:54:56+00:00" + }, { "name": "ryangjchandler/blade-capture-directive", "version": "v1.0.0", diff --git a/web/public/css/riodwanto/filament-ace-editor/filament-ace-editor.css b/web/public/css/riodwanto/filament-ace-editor/filament-ace-editor.css new file mode 100644 index 0000000..d9f6521 --- /dev/null +++ b/web/public/css/riodwanto/filament-ace-editor/filament-ace-editor.css @@ -0,0 +1 @@ +/*! tailwindcss v3.4.1 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border-width:0;border-style:solid;border-color:rgba(var(--gray-200),1)}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:var(--font-family),ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:initial}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:initial;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:initial}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:rgba(var(--gray-400),1)}input::placeholder,textarea::placeholder{opacity:1;color:rgba(var(--gray-400),1)}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}[multiple],[type=date],[type=datetime-local],[type=email],[type=month],[type=number],[type=password],[type=search],[type=tel],[type=text],[type=time],[type=url],[type=week],input:where(:not([type])),select,textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#fff;border-color:rgba(var(--gray-500),var(--tw-border-opacity,1));border-width:1px;border-radius:0;padding:.5rem .75rem;font-size:1rem;line-height:1.5rem;--tw-shadow:0 0 #0000}[multiple]:focus,[type=date]:focus,[type=datetime-local]:focus,[type=email]:focus,[type=month]:focus,[type=number]:focus,[type=password]:focus,[type=search]:focus,[type=tel]:focus,[type=text]:focus,[type=time]:focus,[type=url]:focus,[type=week]:focus,input:where(:not([type])):focus,select:focus,textarea:focus{outline:2px solid #0000;outline-offset:2px;--tw-ring-inset:var(--tw-empty,/*!*/ /*!*/);--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#2563eb;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);border-color:#2563eb}input::-moz-placeholder,textarea::-moz-placeholder{color:rgba(var(--gray-500),var(--tw-text-opacity,1));opacity:1}input::placeholder,textarea::placeholder{color:rgba(var(--gray-500),var(--tw-text-opacity,1));opacity:1}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-date-and-time-value{min-height:1.5em;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-meridiem-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-year-field{padding-top:0;padding-bottom:0}select{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='rgba(var(--gray-500), var(--tw-stroke-opacity, 1))' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");background-position:right .5rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;padding-right:2.5rem;-webkit-print-color-adjust:exact;print-color-adjust:exact}[multiple],[size]:where(select:not([size="1"])){background-image:none;background-position:0 0;background-repeat:unset;background-size:initial;padding-right:.75rem;-webkit-print-color-adjust:unset;print-color-adjust:unset}[type=checkbox],[type=radio]{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0;-webkit-print-color-adjust:exact;print-color-adjust:exact;display:inline-block;vertical-align:middle;background-origin:border-box;-webkit-user-select:none;-moz-user-select:none;user-select:none;flex-shrink:0;height:1rem;width:1rem;color:#2563eb;background-color:#fff;border-color:rgba(var(--gray-500),var(--tw-border-opacity,1));border-width:1px;--tw-shadow:0 0 #0000}[type=checkbox]{border-radius:0}[type=radio]{border-radius:100%}[type=checkbox]:focus,[type=radio]:focus{outline:2px solid #0000;outline-offset:2px;--tw-ring-inset:var(--tw-empty,/*!*/ /*!*/);--tw-ring-offset-width:2px;--tw-ring-offset-color:#fff;--tw-ring-color:#2563eb;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}[type=checkbox]:checked,[type=radio]:checked{border-color:#0000;background-color:currentColor;background-size:100% 100%;background-position:50%;background-repeat:no-repeat}[type=checkbox]:checked{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'%3E%3Cpath d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0z'/%3E%3C/svg%3E")}@media (forced-colors:active){[type=checkbox]:checked{-webkit-appearance:auto;-moz-appearance:auto;appearance:auto}}[type=radio]:checked{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='3'/%3E%3C/svg%3E")}@media (forced-colors:active){[type=radio]:checked{-webkit-appearance:auto;-moz-appearance:auto;appearance:auto}}[type=checkbox]:checked:focus,[type=checkbox]:checked:hover,[type=checkbox]:indeterminate,[type=radio]:checked:focus,[type=radio]:checked:hover{border-color:#0000;background-color:currentColor}[type=checkbox]:indeterminate{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3E%3C/svg%3E");background-size:100% 100%;background-position:50%;background-repeat:no-repeat}@media (forced-colors:active){[type=checkbox]:indeterminate{-webkit-appearance:auto;-moz-appearance:auto;appearance:auto}}[type=checkbox]:indeterminate:focus,[type=checkbox]:indeterminate:hover{border-color:#0000;background-color:currentColor}[type=file]{background:unset;border-color:inherit;border-width:0;border-radius:0;padding:0;font-size:unset;line-height:inherit}[type=file]:focus{outline:1px solid ButtonText;outline:1px auto -webkit-focus-ring-color}:root.dark{color-scheme:dark}[data-field-wrapper]{scroll-margin-top:8rem}*,::backdrop,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.ace-editor-wrapper{position:relative;border-radius:.375rem;--tw-shadow:0 1px 2px 0 #0000000d;--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.ace-editor-wrapper:focus-within{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)!important;--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color)!important;box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)!important;--tw-ring-opacity:1!important;--tw-ring-color:rgba(var(--primary-600),var(--tw-ring-opacity))!important}.ace-editor-wrapper.base{--tw-ring-color:rgba(var(--gray-950),0.1)}:is(.dark .ace-editor-wrapper.base){--tw-ring-color:#fff3}.ace-editor-wrapper.danger,:is(.dark .ace-editor-wrapper.danger){--tw-ring-opacity:1;--tw-ring-color:rgba(var(--danger-600),var(--tw-ring-opacity))}.ace-editor{height:100%;width:100%;border-radius:.375rem}.focus-within\:ring-0:focus-within{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)} \ No newline at end of file diff --git a/web/public/js/riodwanto/filament-ace-editor/components/filament-ace-editor.js b/web/public/js/riodwanto/filament-ace-editor/components/filament-ace-editor.js new file mode 100644 index 0000000..08d7b76 --- /dev/null +++ b/web/public/js/riodwanto/filament-ace-editor/components/filament-ace-editor.js @@ -0,0 +1 @@ +function m({state:r,statePath:o,placeholder:s,aceUrl:a,extensions:n,config:h={},options:c={},darkTheme:l,disableDarkTheme:d}){return{state:r,statePath:o,placeholder:s,options:c,darkTheme:l,disableDarkTheme:d,editor:null,observer:null,async init(){if(!await this.importAceEditor(a)){console.error("Failed to load the ACE editor core.");return}await this.importExtensions(n)||console.error("Failed to load ACE editor extensions."),this.configureAce(h),this.initializeEditor(),this.applyInitialTheme(),this.observeDarkModeChanges()},async importAceEditor(t){try{return await import(t),!0}catch(e){return console.error("Error importing the ACE editor core:",e),!1}},async importExtensions(t){try{let e=Object.values(t).map(i=>import(i));return await Promise.all(e),!0}catch(e){return console.error("Error importing ACE editor extensions:",e),!1}},configureAce(t){Object.entries(t).forEach(([e,i])=>ace.config.set(e,i))},initializeEditor(){this.editor=ace.edit(this.$refs.aceCodeEditor),this.editor.setOptions(this.options),this.editor.setValue(this.state?this.state:this.placeholder),this.editor.session.on("change",()=>{this.state=this.editor.getValue()})},applyInitialTheme(){this.disableDarkTheme?this.editor.setTheme(this.options.theme):this.setTheme()},observeDarkModeChanges(){if(this.disableDarkTheme)return;let t=document.querySelector("html");this.observer=new MutationObserver(()=>this.setTheme()),this.observer.observe(t,{attributes:!0,attributeFilter:["class"]})},setTheme(){let e=document.querySelector("html").classList.contains("dark")?this.darkTheme:this.options.theme;this.editor&&this.editor.setTheme(e)}}}export{m as default};