Commit 6014fa9c authored by Thidaporn Laisan's avatar Thidaporn Laisan
Browse files

Merge branch 'sprint1' of...

Merge branch 'sprint1' of https://idemo.netbay.co.th/gitlab/sarun.netbay/spnpatch-laravel into sprint1

# Conflicts:
#	app/Http/Livewire/Pages/Patch/ModalEditCode.php
parents 7992064a 18782118
......@@ -6,26 +6,33 @@ use App\Models\TabPatchFile;
use Livewire\Component;
use GuzzleHttp\Client;
use GuzzleHttp\Exception\RequestException;
use Jfcherng\Diff\Differ;
use Jfcherng\Diff\DiffHelper;
use Jfcherng\Diff\Factory\RendererFactory;
class ModalEditCode extends Component
{
public $openModalEditCode = false;
public $patchFileId, $patchFile, $gitCode, $dbCode, $commit;
public $patchFileId, $patchFile, $gitCode, $gitCodeRaw, $dbCode, $commit, $selectedProject, $comparisonResult , $diffResult;
public $preImpHeader;
public $isOpenEditCode= false;
protected $listeners = ['openModalEditCode'];
public function openModalEditCode($patchFileId)
public function openModalEditCode($patchFileId , $selectedProject)
{
$this->patchFileId = $patchFileId;
$patchFile = TabPatchFile::where('fid', $this->patchFileId)->first();
$this->patchFile = TabPatchFile::where('fid', $this->patchFileId)->first();
$this->isOpenEditCode = true;
$this->dbCode = base64_decode( $this->patchFile);
// $this->gitCode = $this->getFileContentFromGit();
$this->selectedProject = $selectedProject;
$this->patchFileId = $patchFileId;
$patchFile = TabPatchFile::where('fid', $this->patchFileId)->first();
$this->patchFile = $patchFile->file_name;
$this->dbCode = base64_decode($patchFile->file_content); // Adjust accordingly based on your database schema
$this->gitCodeRaw = $this->getFileContentFromGit($this->patchFile, $this->commit);
$this->gitCode = (iconv('TIS-620', 'UTF-8', $this->gitCodeRaw));
$this->isOpenEditCode = true;
}
public function closeModal()
{
$this->isOpenEditCode = false;
......@@ -46,9 +53,10 @@ class ModalEditCode extends Component
],
'verify' => false,
]);
$filePath = str_replace("./", "IE5DEV.shippingnet/", $filePath);
try {
$response = $client->get("projects/$this->selectedProject/repository/files/" . urlencode($filePath) . "/raw", [
$response = $client->get("projects/{$this->selectedProject}/repository/files/" . urlencode($filePath) . "/raw", [
'query' => ['ref' => $commit]
]);
$statusCode = $response->getStatusCode();
......@@ -66,6 +74,62 @@ class ModalEditCode extends Component
}
}
public function getDiff($code1, $code2)
{
$diffOptions = [
'context' => 0,
'ignoreCase' => false,
'ignoreWhitespace' => true,
];
$rendererOptions = [
'detailLevel' => 'char',
'language' => 'eng',
'lineNumbers' => true,
'separateBlock' => true,
'showHeader' => true,
'spacesToNbsp' => false,
'outputFormat' => 'inline',
'mergeThreshold' => 0.8,
'originalFileName' => 'Original',
'newFileName' => 'New',
'cliColorization' => 'none',
];
$differ = new Differ(explode("\n", $code1), explode("\n", $code2), $diffOptions);
$renderer = RendererFactory::make('Inline', $rendererOptions);
$result = $renderer->render($differ);
$result = $this->convertDiffToPrismFormat($result);
return $result;
}
public function compare()
{
try {
// $this->comparisonResult = 'GitLab connection successful.';
$this->diffResult = $this->getDiff($this->gitCode, $this->dbCode);
// dd($this->diffResult);
$this->emit('diffResultUpdated');
} catch (RequestException $e) {
$this->comparisonResult = 'Error connecting to GitLab: ' . $e->getMessage();
$this->gitCode = '';
$this->gitCodeRaw = '';
}
}
private function convertDiffToPrismFormat($diffHtml)
{
$diffHtml = str_replace('<tr data-type="-"', '<tr class="token deleted"', $diffHtml);
$diffHtml = str_replace('<tr data-type="+"', '<tr class="token inserted"', $diffHtml);
$diffHtml = str_replace('<td class="old">', '<td class="token deleted">', $diffHtml);
$diffHtml = str_replace('<td class="new">', '<td class="token inserted">', $diffHtml);
$diffHtml = str_replace('<th class="sign del">-</th>', '', $diffHtml);
$diffHtml = str_replace('<th class="sign ins">+</th>', '', $diffHtml);
return $diffHtml;
}
public function render()
{
return view('livewire.pages.patch.modal-edit-code');
......
......@@ -113,7 +113,6 @@ class PatchCreate extends Component
}
$this->fileChanges = $this->buildTree($data['diffs']);
// dd($this->fileChanges);
$this->dispatchBrowserEvent('files-fetched', ['fileChanges' => $this->fileChanges]);
}
......@@ -129,6 +128,7 @@ class PatchCreate extends Component
}
$current = &$current[$part];
}
// $current['id'] = $file['fid'];
}
return $tree;
}
......@@ -242,6 +242,10 @@ class PatchCreate extends Component
throw $e;
}
}
public function loadPage($page) {
$this->emit('menuChanged', $page);
}
public function render()
{
return view('livewire.pages.patch.patch-create');
......
......@@ -173,8 +173,8 @@ class PatchEdit extends Component
return $tree;
}
public function gotoModal(){
dd("dddd");
public function loadPage($page) {
$this->emit('menuChanged', $page);
}
public function render()
......
table {
width: 100%;
table-layout: auto;
}
.table-responsive {
overflow-x: auto;
}
.tree ul {
padding-left: 1.25rem; /* 1rem = 16px, so 1.25rem = 20px */
list-style-type: none;
position: relative;
}
.tree ul::before {
content: '';
border-left: 2px solid #d3d3d3;
position: absolute;
top: 0;
bottom: 0;
left: 0.75rem; /* 0.75rem = 12px */
}
.tree li {
margin: 0.5rem 0;
padding-left: 1.25rem;
position: relative;
}
.tree li::before {
content: '';
border-top: 2px solid #d3d3d3;
position: absolute;
top: 0.875rem; /* 0.875rem = 14px */
left: 0;
width: 0.75rem; /* 0.75rem = 12px */
}
.tree li::after {
content: '';
/* border-left: 2px solid #d3d3d3; */
position: absolute;
top: 0;
bottom: 0;
left: 0;
height: 0.875rem; /* 0.875rem = 14px */
margin-top: 0.875rem;
}
.tree li:last-child::after {
display: none;
}
......@@ -18,6 +18,7 @@
<!-- CSS & JS Assets -->
@vite(['resources/css/app.css', 'resources/js/app.js'])
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
......
<div class="card mx-4 my-4 z-0 ">
<link href="{{ asset('css/pages/patch.css') }}" rel="stylesheet">
<div wire:loading.class="flex" wire:loading.class.remove="hidden"
class="absolute inset-0 items-center justify-center z-50 bg-slate-50 dark:bg-navy-900 hidden">
<div class="flex justify-center items-center ">
......
<div x-data="{ isOpenEditCode: @entangle('isOpenEditCode') }">
{{-- <style>
.bg-gray-800.bg-opacity-75 {
background-color: rgba(31, 41, 55, 0.75);
}
.bg-white {
background-color: rgba(255, 255, 255, 0.9);
}
.scrollable-modal {
max-height: 90vh;
overflow-y: auto;
}
</style> --}}
<div wire:loading.class="flex" wire:loading.class.remove="hidden"
wire:target="search, openModalMergeVessel, closeModal, mergeFlight"
class="fixed inset-0 items-center justify-center z-50 bg-gray-800 bg-opacity-75 hidden">
......@@ -26,10 +12,8 @@
<span class="ml-2 text-gray-600">Loading...</span>
</div>
</div>
<div x-show="isOpenEditCode"
class="fixed inset-0 flex items-center justify-center z-50 bg-gray-800 bg-opacity-75">
<div class="bg-white rounded-lg w-4/5">
<div x-show="isOpenEditCode" class="fixed inset-0 z-50 bg-gray-800 bg-opacity-75 overflow-auto">
<div class="bg-white rounded-lg w-4/5 mx-auto mt-10 mb-10">
<style>
code[class*="language-"],
pre[class*="language-"] {
......@@ -48,9 +32,7 @@
}
</style>
<div class="flex w-full justify-between rounded-t-lg bg-slate-100 px-4 py-3 dark:bg-navy-800 sm:px-5">
<h3 class="text-base font-medium text-slate-700 dark:text-navy-100">
Edit Code
</h3>
<h3 class="text-base font-medium text-slate-700 dark:text-navy-100">Edit Code</h3>
<button type="button" @click="isOpenEditCode = false"
class="btn -mr-1.5 h-7 w-7 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4.5 w-4.5" fill="none" viewBox="0 0 24 24"
......@@ -59,30 +41,27 @@
</svg>
</button>
</div>
<div class="flex " x-data="{ gitCode: @entangle('gitCode') }">
<div class="flex" x-data="{ gitCode: @entangle('gitCode') }" style="max-height: 70vh; overflow-y: auto;">
<div class="w-1/2 p-4">
<h3 class="text-lg font-semibold">GitLab Code:</h3>
<div class="relative">
<div class="overflow-auto p-2 bg-gray-100 rounded">
<pre class="line-numbers language-markup"><code >{{ $gitCode }}</code></pre>
<div class="overflow-auto p-2 bg-gray-100 rounded" style="max-height: 60vh;">
<pre class="line-numbers language-none"><code>{{ $gitCode }}</code></pre>
</div>
</div>
</div>
<div class="w-1/2 p-4">
<h3 class="text-lg font-semibold">Your Code:</h3>
<textarea wire:model.defer="code" rows="20" class="w-full p-2 border rounded language-markup"
placeholder="Paste your code here...">
</textarea>
<textarea wire:model.defer="dbCode" rows="20" class="w-full p-2 border rounded language-none"
placeholder="Paste your code here..." style="max-height: 60vh; overflow-y: auto;"></textarea>
<button wire:click="compare" id="compare"
class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mt-2">Compare</button>
</div>
</div>
<div class="mx-3">
<div class="mx-3 mb-3">
<h3 class="text-lg font-semibold mt-4">Differences:</h3>
<div class="overflow-auto p-2 bg-gray-100 rounded">
{{-- <pre class="line-numbers "> <code >{!! $diffResult !!}</code></pre> --}}
<div class="overflow-auto p-2 bg-gray-100 rounded" style="max-height: 30vh;">
<pre class="line-numbers"> <code >{!! $diffResult !!}</code></pre>
</div>
</div>
</div>
......
<div> <button type="button" wire:click="loadPage('Patch')"
class="btn mx-auto m-3 text-white bg-primary px-3 py-2">Back</button>
<div class="max-w-full mx-auto p-6 bg-gray-100">
@if (session()->has('message'))
<div class="alert alert-success">
{{ session('message') }}
</div>
@endif
<div class="flex flex-wrap -mx-3">
<div class="w-full md:w-1/2 px-3 mb-6">
<div x-data="{
searchQuery: 'SPN64Bits',
selectedBranch: @entangle('selectedBranch'),
selectedProject: @entangle('selectedProject'),
projects: @entangle('projects').defer,
branches: @entangle('branches').defer,
fileChanges: @entangle('fileChanges').defer,
isLoading: false,
fetchProjects() {
this.isLoading = true;
this.selectedProject = '60';
this.$wire.set('searchProject', this.searchQuery);
},
fetchBranches() {
// this.selectedBranch = '';
if (this.selectedProject) {
this.$wire.set('selectedProject', this.selectedProject);
}
},
renderTree(subtree) {
return Object.keys(subtree).map(key => {
if (typeof subtree[key] === 'object' && Object.keys(subtree[key]).length > 0) {
return `<li>
<strong>${key}</strong>
<ul class='pl-4 mt-1'>${this.renderTree(subtree[key])}</ul>
</li>`;
} else {
return `<li class='text-gray-700'><i class='fa fa-file text-base mr-2'></i>${key}</li>`;
}
}).join('');
}
}" @projects-fetched.window="isLoading = false"
@files-fetched.window="isLoading = false" x-init="fetchProjects"
class="p-6 bg-white shadow-md rounded-lg">
</style>
<div class="">
<div class="flex mb-3">
<label for="searchProject" class="form-label text-lg mr-2">Search Project:</label>
<input type="text" @input.debounce.500ms="fetchProjects"
class="form-input h-8 ml-2 rounded-lg border border-slate-300 bg-transparent px-3 py-2 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
id="searchProject" placeholder="Enter project name" x-model="searchQuery">
</div>
</div>
{{-- <div x-show="!isLoading && projects.length > 0" class="grid grid-cols-3"> --}}
<div x-show="true" class="">
<div class="flex mb-3">
<label for="project" class="form-label text-lg mr-2">Select Project:</label>
<div x-show="isLoading" class="mx-auto mt-2">
<span>Loading...</span>
</div>
<select x-model="selectedProject" x-show="!isLoading" @change="fetchBranches" id="project"
class="ml-2 w-64 h-8 mt-1 border border-gray-300 rounded-md">
<option value="">Choose Project</option>
<template x-for="project in projects" :key="project.id">
<option :value="project.id" x-text="project.name"></option>
</template>
</select>
</div>
</div>
{{-- <template x-if="selectedProject"> --}}
{{-- <template x-if="true">
<div class="mb-3">
<label for="branch" class="form-label w-64 text-lg mr-2">Select Branch:</label>
<select x-model="selectedBranch" id="branch"
class="ml-2 w-64 h-8 mt-1 border border-gray-300 rounded-md">
<option value="">Choose Branch</option>
<template x-for="branch in branches" :key="branch.name">
<option :value="branch.name" x-text="branch.name"></option>
</template>
</select>
</div>
</template> --}}
<div class="mb-3">
<input type="text" value="c5d80f79" wire:model.defer="startCommit" placeholder="Start Commit"
class="placeholder:text-sm text-lg mb-2 form-input rounded-lg border border-slate-300 px-2">
<input type="text" value="254e87" wire:model.defer="endCommit" placeholder="End Commit"
class="placeholder:text-sm text-lg mb-2 form-input rounded-lg border border-slate-300 px-2">
<div class="text-center">
<button type="button" wire:click="getChangedFiles"
class="btn mx-auto mt-3 text-white bg-stone-700 px-3 py-2">Get
Changed
Files</button>
</div>
</div>
<div wire:loading.class="flex" wire:loading.class.remove="hidden"
class="flex inset-0 items-center justify-center z-50 bg-slate-50 dark:bg-navy-900 hidden">
<div class="app-preloader grid h-full w-full place-content-center">
<div class="app-preloader-inner relative inline-block h-48 w-48"></div>
</div>
</div>
<template x-if="Object.keys(fileChanges).length > 0">
<div class="mt-5 bg-gray-100 p-4 rounded-lg shadow">
<h3 class="text-lg mb-3">Changed Files</h3>
<div class="tree">
<ul x-html="renderTree(fileChanges)"></ul>
</div>
</div>
</template>
</div>
</div>
<div class="w-full md:w-1/2 px-3 mb-6">
<div class="p-6 bg-white shadow-md rounded-lg">
<h2 class="text-2xl font-bold mb-4">Create Patch</h2>
<div class="mb-4">
<label for="patch_name" class="block text-gray-700">Patch name</label>
<input type="text" id="patch_name" class="w-full mt-1 p-2 border border-gray-300 rounded-md"
wire:model.defer="PATCHNAME">
</div>
<div class="mb-4">
<label for="patch_date" class="block text-gray-700">Patch date</label>
<input type="datetime-local" id="patch_date"
class="w-full mt-1 p-2 border border-gray-300 rounded-md" wire:model.defer="PDATE">
</div>
<div class="mb-4">
<label for="php_version" class="block text-gray-700">PHP Version</label>
<select id="php_version" wire:model.defer="PHP_VERSION"
class="w-full mt-1 p-2 border border-gray-300 rounded-md">
<option value="0">ALL</option>
<option value="1">32Bits (PHP 5.2)</option>
<option value="2">64Bits (PHP 5.6)</option>
<option value="3">64Bits (PHP 8.0)</option>
</select>
</div>
<div class="mb-4">
<label for="patch_level" class="block text-gray-700">Patch level</label>
<input type="text" id="patch_level" class="w-full mt-1 p-2 border border-gray-300 rounded-md"
wire:model.defer="PLEVEL">
</div>
<div class="mb-4">
<label for="code" class="block text-gray-700">Patch Code</label>
<input type="text" id="code" wire:model.defer="PCODE"
class="w-full mt-1 p-2 border border-gray-300 rounded-md">
</div>
<div class="mb-4">
<label for="major_version" class="block text-gray-700">Major version</label>
<input type="text" id="major_version"
class="w-full mt-1 p-2 border border-gray-300 rounded-md"
wire:model.defer="MAJOR_VERSION">
</div>
<div class="mb-4">
<label for="pdesc" class="block text-gray-700">Patch Desciption</label>
<input type="text" id="pdesc" wire:model.defer="PDESC"
class="w-full mt-1 p-2 border border-gray-300 rounded-md">
</div>
<div class="mb-4">
<label for="remark" class="block text-gray-700">Remark</label>
<input type="text" id="remark" wire:model.defer="Remark"
class="w-full mt-1 p-2 border border-gray-300 rounded-md">
</div>
<div class="mb-4">
<label for="owner" class="block text-gray-700">Owner</label>
<input type="text" id="owner" wire:model.defer="POWNER"
class="w-full mt-1 p-2 border border-gray-300 rounded-md" value="aom">
</div>
<div class="mb-4">
<label for="papprovedate" class="block text-gray-700">Papprovedate</label>
<input type="datetime-local" id="papprovedate" wire:model.defer="PAPPROVEDATE"
class="w-full mt-1 p-2 border border-gray-300 rounded-md" value="2024-03-27T15:00">
</div>
<div class="mb-4">
<label for="ptype" class="block text-gray-700">Ptype</label>
<input type="text" id="ptype" wire:model.defer="PTYPE"
class="w-full mt-1 p-2 border border-gray-300 rounded-md">
</div>
<div class="mb-4">
<label for="specific_customer" class="block text-gray-700">Specific Customer</label>
<input type="text" id="specific_customer"
class="w-full mt-1 p-2 border border-gray-300 rounded-md">
</div>
<div class="mb-4">
<label for="patchcode" class="block text-gray-700">Patchcode</label>
<textarea id="patchcode" wire:model.defer="PATCHCODE" class="w-full mt-1 p-2 border border-gray-300 rounded-md"
rows="5">pathcode</textarea>
</div>
<div class="mb-4">
<label for="uninstall" class="block text-gray-700">Uninstall</label>
<input type="text" id="uninstall" wire:model.defer="UNINSTALL"
class="w-full mt-1 p-2 border border-gray-300 rounded-md" value="$b=1">
</div>
<div class="mb-4">
<label for="patchcode_server" class="block text-gray-700">Patchcode_server</label>
<textarea id="patchcode_server" wire:model.defer="PATCHCODE_SERVER"
class="w-full mt-1 p-2 border border-gray-300 rounded-md" rows="5"></textarea>
</div>
<div class="flex justify-center">
<button type="button" wire:click="save"
class="bg-stone-700 text-white px-4 py-2 rounded-md hover:bg-blue-600">Save</button>
</div>
</div>
</div>
</div>
<livewire:pages.patch.modal-edit-code>
</div>
<div wire:loading.remove>
<style>
table {
width: 100%;
table-layout: auto;
}
.table-responsive {
overflow-x: auto;
}
</style>
<main class="m-2">
{{-- <div wire:loading.class="flex" wire:loading.class.remove="hidden"
class="absolute inset-0 items-center justify-center z-50 bg-slate-50 dark:bg-navy-900 hidden">
......
......@@ -2,9 +2,9 @@
$isFile = isset($item['id']);
@endphp
<li class="{{ $isFile ? 'file' : 'folder' }}">
<li class="{{ $isFile ? 'file' : 'folder' }} tree">
@if($isFile)
<a href="#" class="text-bold" wire:click.prevent="$emit('openModalEditCode', '{{ $item['id'] }}')"><i class='fa fa-file text-base mr-2'></i>{{ $name }}</a>
<a href="#" class="text-bold" wire:click.prevent="$emit('openModalEditCode', '{{ $item['id'] }}' , '{{ $selectedProject }}')"><i class='fa fa-file text-base mr-2'></i>{{ $name }}</a>
@else
<span>{{ $name }}</span>
<ul class='pl-4 mt-1'>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment