BartekGit/magico.prototype
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Nowa aplikacja: Company - widok informacji o firmie

Browse Source
This commit is contained in:
Bartek
2026-03-07 18:03:23 +01:00
parent c63e7e6c9c
commit eed545736d
7 changed files with 972 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

291
prototype/company/app-company-info.php Normal file
View File

@@ -0,0 +1,291 @@
<?php
$enablePrototypeComments = true;
include '../../header-invoice.php';
?>
<!-- Vendor CSS -->
<link rel="stylesheet" href="../../assets/vendor/libs/select2/select2.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.13/cropper.min.css" />
<style>
/* Obłe krawędzie dla kółka wykadrowania w Cropper JS */
.cropper-view-box,
.cropper-face {
border-radius: 50%;
}
</style>
<div class="container-xxl flex-grow-1 container-p-y">
<h4 class="fw-bold py-3 mb-4">
<span class="text-muted fw-light">Zarządzanie firmą /</span> Informacje o firmie
</h4>
<div class="row">
<div class="col-md-12">
<div class="card mb-4">
<h5 class="card-header border-bottom">Profil firmy</h5>
<div class="card-body mt-3">
<div class="d-flex align-items-start align-items-sm-center gap-4">
<img src="https://ui-avatars.com/api/?name=Firma&background=e7e7ff&color=696cff&size=150"
alt="Logo firmy" class="d-block rounded-circle" height="100" width="100" id="uploadedLogo"
style="object-fit: cover;">
<div class="button-wrapper">
<label for="upload" class="btn btn-primary me-2 mb-3" tabindex="0">
<span class="d-none d-sm-block">Wgraj nowe logo</span>
<i class="bx bx-upload d-block d-sm-none"></i>
<input type="file" id="upload" class="account-file-input" hidden
accept="image/png, image/jpeg, image/jpg">
</label>
<button type="button" class="btn btn-label-secondary account-image-reset mb-3">
<i class="bx bx-reset d-block d-sm-none"></i>
<span class="d-none d-sm-block">Usuń</span>
</button>
<p class="text-muted mb-0">Dozwolone formaty: JPG, GIF lub PNG. Max rozmiar 800K</p>
</div>
</div>
</div>
<hr class="my-0">
<div class="card-body">
<form id="formCompanyProfile" onsubmit="return false">
<div class="row">
<div class="mb-3 col-md-6">
<label for="companyShortName" class="form-label">
Krótka nazwa firmy
<i class="bx bx-info-circle text-muted ms-1 cursor-pointer" data-bs-toggle="tooltip"
data-bs-placement="top"
title="Nazwa będzie widoczna tylko dla Ciebie i współpracowników. Wykorzystywana w aplikacjach magico."></i>
</label>
<input class="form-control" type="text" id="companyShortName" name="companyShortName"
placeholder="Wpisz krótką nazwę..." value="" autofocus>
</div>
</div>
</form>
</div>
</div>
<div class="card mb-4">
<h5 class="card-header border-bottom">Dane rozliczeniowe</h5>
<div class="card-body mt-3">
<form id="formBillingSettings" onsubmit="return false">
<div class="row g-4">
<div class="col-md-6">
<label for="locationLabel" class="form-label">Kraj</label>
<select id="locationLabel" class="form-select select2-country">
<option value="pl" selected>Polska</option>
<option value="us">Stany Zjednoczone</option>
<option value="gb">Wielka Brytania</option>
<option value="de">Niemcy</option>
<option value="fr">Francja</option>
<option value="it">Włochy</option>
<option value="es">Hiszpania</option>
<option value="ua">Ukraina</option>
</select>
</div>
<div class="col-md-6">
<label for="nipNumber" class="form-label">Numer NIP</label>
<input type="text" name="nipNumber" id="nipNumber" placeholder="___-___-__-__"
class="form-control">
</div>
<div class="col-md-12">
<label for="companyFullName" class="form-label">Pełna nazwa firmy</label>
<input type="text" name="companyFullName" id="companyFullName"
placeholder="Wpisz pełną nazwę podmiotu..." class="form-control">
<div class="form-text">Do użytku w rozliczeniach i fakturach</div>
</div>
<div class="col-md-4">
<label for="zipCode" class="form-label">Kod pocztowy</label>
<input type="text" name="zipCode" id="zipCode" placeholder="__-___"
class="form-control">
</div>
<div class="col-md-8">
<label for="cityName" class="form-label">Miasto</label>
<input type="text" name="cityName" id="cityName" placeholder="Wpisz miasto..."
class="form-control">
</div>
<div class="col-md-12">
<label for="addressDetails" class="form-label">Adres</label>
<input type="text" name="addressDetails" id="addressDetails"
placeholder="Ulica i numer budynku/lokalu" class="form-control">
</div>
<div class="col-md-12 mt-4">
<div class="border-top pt-4">
<label for="billingEmail" class="form-label">Dodatkowy adres e-mail do
rozliczeń</label>
<input type="email" name="billingEmail" id="billingEmail"
placeholder="np. ksiegowosc@twojafirma.pl" class="form-control mb-2">
<div class="alert alert-primary d-flex align-items-baseline mb-0" role="alert">
<span class="alert-icon align-middle me-2">
<i class="bx bx-info-circle"></i>
</span>
<div>
Dokumenty rozliczeniowe będą automatycznie wysyłane na powyższy adres
(opcjonalnie) oraz do wszystkich użytkowników posiadających rolę
<strong>"Właściciel"</strong> ustawioną w sekcji Zespół.
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- Modal dla Cropper.js -->
<div class="modal fade" id="cropModal" tabindex="-1" aria-hidden="true" data-bs-backdrop="static">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="cropModalLabel">Wykadruj logo (koło)</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Zamknij"></button>
</div>
<div class="modal-body">
<div class="img-container"
style="max-height: 400px; display: flex; justify-content: center; background-color: #f5f5f9;">
<img id="imageToCrop" src="" alt="Obraz do wykadrowania" style="max-width: 100%; display: block;">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-label-secondary" data-bs-dismiss="modal">Anuluj</button>
<button type="button" class="btn btn-primary" id="cropButton">Zatwierdź logo</button>
</div>
</div>
</div>
</div>
<div id="footer" class="footer" style="background: #e7e7ff; position: sticky; bottom: 0px; right: 0px;">
<footer class="content-footer footer">
<div class="container-xxl d-flex py-3 justify-content-center">
<button class="btn btn-primary btn-lg">Zapisz</button>
</div>
</footer>
</div>
<div class="content-backdrop fade"></div>
<?php include '../../footer.php'; ?>
<!-- Scripts -->
<script src="../../assets/vendor/libs/select2/select2.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.13/cropper.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function () {
// --- Inicjalizacja Tooltipów ---
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl);
});
// --- Inicjalizacja Select2 ---
function renderIcons(option) {
if (!option.id) { return option.text; }
var $icon = $(
"<span class='d-flex align-items-center'><img src='https://flagcdn.com/w20/" + option.id.toLowerCase() + ".png' class='me-2' style='width: 20px; border-radius: 2px;' alt='flag' />" + option.text + "</span>"
);
return $icon;
}
if ($('.select2-country').length) {
$('.select2-country').select2({
templateResult: renderIcons,
templateSelection: renderIcons,
escapeMarkup: function (es) { return es; }
});
}
// --- Inicjalizacja Cropper JS ---
let cropper;
const image = document.getElementById('imageToCrop');
const input = document.getElementById('upload');
const cropModalEl = document.getElementById('cropModal');
const uploadedLogo = document.getElementById('uploadedLogo');
let cropModal;
if (cropModalEl) {
cropModal = new bootstrap.Modal(cropModalEl);
}
if (input) {
input.addEventListener('change', function (e) {
const files = e.target.files;
if (files && files.length > 0) {
const file = files[0];
const reader = new FileReader();
reader.onload = function (e) {
image.src = e.target.result;
cropModal.show();
};
reader.readAsDataURL(file);
}
input.value = ''; // reset value to allow choosing the same file again
});
}
if (cropModalEl) {
cropModalEl.addEventListener('shown.bs.modal', function () {
cropper = new Cropper(image, {
aspectRatio: 1, // kwadrat = koło po zaokrągleniu
viewMode: 1,
dragMode: 'move',
autoCropArea: 0.8,
restore: false,
guides: false,
center: false,
highlight: false,
cropBoxMovable: true,
cropBoxResizable: true,
toggleDragModeOnDblclick: false,
});
});
cropModalEl.addEventListener('hidden.bs.modal', function () {
if (cropper) {
cropper.destroy();
cropper = null;
}
});
}
const cropBtn = document.getElementById('cropButton');
if (cropBtn) {
cropBtn.addEventListener('click', function () {
if (!cropper) return;
const canvas = cropper.getCroppedCanvas({
width: 300,
height: 300
});
uploadedLogo.src = canvas.toDataURL(); // aktualizacja logo
cropModal.hide();
});
}
// Reset obrazka
const resetBtn = document.querySelector('.account-image-reset');
if (resetBtn) {
resetBtn.addEventListener('click', () => {
uploadedLogo.src = 'https://ui-avatars.com/api/?name=Firma&background=e7e7ff&color=696cff&size=150';
});
}
});
</script>
</body>
</html>