company.magico: Widok zarządzania zespołem - dialog dodawania członka zespołu

src/.tmp/magico-account-home.html

@@ -53,7 +53,7 @@
 
 
 
-        <nav class="js-mega-menu navbar-nav-wrap">
+        <nav class="js-mega-menu navbar-nav-wrap pe-3">
           <!-- Toggler -->
           <button class="navbar-toggler ms-auto" type="button" data-bs-toggle="collapse" data-bs-target="#topbarNavDropdown" aria-controls="topbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
             <span class="d-flex justify-content-between align-items-center small">

src/.tmp/magico-account.html

@@ -53,7 +53,7 @@
 
 
 
-        <nav class="js-mega-menu navbar-nav-wrap">
+        <nav class="js-mega-menu navbar-nav-wrap pe-3">
           <!-- Toggler -->
           <button class="navbar-toggler ms-auto" type="button" data-bs-toggle="collapse" data-bs-target="#topbarNavDropdown" aria-controls="topbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
             <span class="d-flex justify-content-between align-items-center small">

src/.tmp/magico-company-app-detail.html

@@ -56,7 +56,7 @@
 
 
 
-        <nav class="js-mega-menu navbar-nav-wrap">
+        <nav class="js-mega-menu navbar-nav-wrap pe-3">
           <!-- Toggler -->
           <button class="navbar-toggler ms-auto" type="button" data-bs-toggle="collapse" data-bs-target="#topbarNavDropdown" aria-controls="topbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
             <span class="d-flex justify-content-between align-items-center small">
@@ -499,7 +499,7 @@
                       </a>
                     </li>
                     <li class="nav-item">
-                      <a class="nav-link " href="./account-notifications.html">
+                      <a class="nav-link " href="./magico-company-edit.html">
                         <i class="bi-building nav-icon"></i> Twoja firma
                       </a>
                     </li>

src/.tmp/magico-company-app.html

@@ -56,7 +56,7 @@
 
 
 
-        <nav class="js-mega-menu navbar-nav-wrap">
+        <nav class="js-mega-menu navbar-nav-wrap pe-3">
           <!-- Toggler -->
           <button class="navbar-toggler ms-auto" type="button" data-bs-toggle="collapse" data-bs-target="#topbarNavDropdown" aria-controls="topbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
             <span class="d-flex justify-content-between align-items-center small">
@@ -498,7 +498,7 @@
                       </a>
                     </li>
                     <li class="nav-item">
-                      <a class="nav-link " href="./account-notifications.html">
+                      <a class="nav-link " href="./magico-company-edit.html">
                         <i class="bi-building nav-icon"></i> Twoja firma
                       </a>
                     </li>

src/.tmp/magico-company-choose.html

@@ -56,7 +56,7 @@
 
 
 
-        <nav class="js-mega-menu navbar-nav-wrap">
+        <nav class="js-mega-menu navbar-nav-wrap pe-3">
           <!-- Toggler -->
           <button class="navbar-toggler ms-auto" type="button" data-bs-toggle="collapse" data-bs-target="#topbarNavDropdown" aria-controls="topbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
             <span class="d-flex justify-content-between align-items-center small">

src/.tmp/magico-company-dashboard.html

@@ -510,7 +510,7 @@
                   <!-- List -->
                   <ul class="nav nav-sm nav-tabs nav-vertical mb-4">
                     <li class="nav-item">
-                      <a class="nav-link active" href="./magico-company-dashboard.html">
+                      <a class="nav-link " href="./magico-company-team.html">
                         <i class="bi-people nav-icon"></i> Zespół
                       </a>
                     </li>

src/.tmp/magico-company-payments.html

@@ -56,7 +56,7 @@
 
 
 
-        <nav class="js-mega-menu navbar-nav-wrap">
+        <nav class="js-mega-menu navbar-nav-wrap pe-3">
           <!-- Toggler -->
           <button class="navbar-toggler ms-auto" type="button" data-bs-toggle="collapse" data-bs-target="#topbarNavDropdown" aria-controls="topbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
             <span class="d-flex justify-content-between align-items-center small">
@@ -498,7 +498,7 @@
                       </a>
                     </li>
                     <li class="nav-item">
-                      <a class="nav-link " href="./account-notifications.html">
+                      <a class="nav-link " href="./magico-company-edit.html">
                         <i class="bi-building nav-icon"></i> Twoja firma
                       </a>
                     </li>

src/magico-company-team.html

@@ -0,0 +1,460 @@
+<!DOCTYPE html>
+<html lang="@@languageDirection.lang" dir="@@if(languageDirection.isRTL){rtl}" class="h-100">
+<head>
+  <!-- Required Meta Tags Always Come First -->
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+  <!-- Title -->
+  <title>Magico company dashboard</title>
+
+  <!-- Favicon -->
+  <link rel="shortcut icon" href="@@autopath/favicon.ico">
+
+  <!-- Font -->
+  <link href="@@vars.themeFont" rel="stylesheet">  
+
+  <!-- CSS Implementing Plugins -->
+  <!-- bundlecss:vendor [@@autopath] -->
+  <link rel="stylesheet" href="@@autopath/node_modules/bootstrap-icons/font/bootstrap-icons.css">
+  <link rel="stylesheet" href="@@autopath/assets/vendor/hs-mega-menu/dist/hs-mega-menu.min.css">
+  <link rel="stylesheet" href="@@autopath/node_modules/quill/dist/quill.snow.css">
+  <link rel="stylesheet" href="@@autopath/node_modules/tom-select/dist/css/tom-select.bootstrap5.css">
+
+  <!-- CSS Front Template -->
+  <!-- bundlecss:theme [@@autopath] @@vars.version -->
+  <link rel="stylesheet" href="@@autopath/assets/css/theme.css">
+</head>
+
+<body class="h-100">
+  <!-- ========== HEADER ========== -->
+  @@include("@@autopath/magico_partials/magico-topbar.html", {
+    "topbarcategory": "demos",
+    "topbarlink": "main",
+    "category": "account",
+    "subcategory": "",
+    "link": "account-overview.html",
+    "logo": "magico-company" 
+  })
+  <!-- ========== END HEADER ========== -->
+
+  <!-- ========== MAIN CONTENT ========== -->
+  <main id="content" role="main" class="bg-light company">
+    <!-- Breadcrumb -->
+    <div class="navbar-dark bg-dark" style="background-image: url(@@autopath/assets/svg/components/wave-pattern-light.svg);">
+      <div class="container container-big content-space-1 content-space-b-lg-3">
+        <div class="row align-items-center">
+          <div class="col">
+            <div class="d-none d-lg-block">
+              <h1 class="h2 text-white">Karczma Biesiada</h1>
+            </div>
+
+            <!-- Breadcrumb -->
+            <nav aria-label="breadcrumb">
+              <ol class="breadcrumb breadcrumb-light mb-0">
+                <li class="breadcrumb-item">company.magico</li>
+                <li class="breadcrumb-item active" aria-current="page">Zespół</li>
+              </ol>
+            </nav>
+            <!-- End Breadcrumb -->
+          </div>
+          <!-- End Col -->
+
+          <div class="col-auto">
+            <!-- Responsive Toggle Button -->
+            <button class="navbar-toggler d-lg-none" type="button" data-bs-toggle="collapse" data-bs-target="#sidebarNav" aria-controls="sidebarNav" aria-expanded="false" aria-label="Toggle navigation">
+              <span class="navbar-toggler-default">
+                <i class="bi-list"></i>
+              </span>
+              <span class="navbar-toggler-toggled">
+                <i class="bi-x"></i>
+              </span>
+            </button>
+            <!-- End Responsive Toggle Button -->
+          </div>
+          <!-- End Col -->
+        </div>
+        <!-- End Row -->
+      </div>
+    </div>
+    <!-- End Breadcrumb -->
+
+    <!-- Content -->
+    <div class="container container-big content-space-1 content-space-t-lg-0 content-space-b-lg-2 mt-lg-n10">
+      <div class="row h-100">
+        <div class="col-lg-3 col-xxl-2">
+          <!-- Navbar -->
+          <div class="navbar-expand-lg navbar-light">
+            <div id="sidebarNav" class="collapse navbar-collapse navbar-vertical">
+              <!-- Card -->
+              <div class="card flex-grow-1 mb-5">
+                <div class="card-body">
+                  <!-- Nav -->
+                  @@include("@@autopath/magico_partials/magico-company-menu.html", {
+                    "link": "magico-company-team.html" 
+                  })
+                  <!-- End Nav -->
+                </div>
+              </div>
+              <!-- End Card -->
+            </div>
+          </div>
+          <!-- End Navbar -->
+        </div>
+        <!-- End Col -->
+
+        <div class="col-lg-9 col-xxl-10 comapny-dashboard">
+          <div class="d-grid gap-3 gap-lg-5">
+            <!-- Card -->
+            <div class="card">
+              <div class="card-header border-bottom">
+                <h4 class="card-header-title">Zarządzaj Twoim zespołem</h4> 
+              </div>
+
+              <!-- Body -->
+              <div class="card-body">
+                <!-- Card -->
+
+                <div class="container">
+
+
+                  <div class="mb-4">
+                <label class="form-label">Dodaj innych właścicieli, managerów lub pracowników firmy. Wprowadź ich adres e-mail w poniższym polu. Możesz też pominać ten krok i zrobić to później.</label>
+
+                <!-- Search -->
+                <div class="mb-4 mt-4">
+                  <form>
+                    <!-- Input Card -->
+                    <div class="input-card border">
+                      <div class="input-card-form">
+                        <label for="searchAppsForm" class="form-label visually-hidden">Wprowadź adres e-mail</label>
+                        <div class="input-group input-group-merge">
+                          <span class="input-group-prepend input-group-text">
+                            <i class="bi-search"></i>
+                          </span>
+                          <input type="text" class="form-control" id="searchAppsForm" placeholder="Wprowadź adres e-mail" aria-label="Wprowadź adres e-mail">
+                        </div>
+                      </div>
+                      <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#moremodal">
+                        <i class="bi-arrow-right"></i>
+                      </button>
+                    </div>
+                    <!-- End Input Card -->
+
+
+                  </form>
+                </div>
+                <!-- End Search -->
+              </div>
+              <!-- End Form -->
+
+
+
+              <div class="table-responsive" style="padding-bottom: 120px;">
+              <table class="table table-borderless table-thead-bordered table-nowrap table-align-middle card-table">
+                <thead class="thead-light">
+                  <tr>
+                    <th>Użytkownik</th>
+                    <th>Uprawnienia</th>
+                    <th style="width: 5%;"></th>
+                  </tr>
+                </thead>
+
+                <tbody>
+                  <tr>
+                    <td>
+                      <div class="d-flex align-items-center">
+                        <div class="flex-shrink-0">
+                          <img class="avatar avatar-sm avatar-circle" src="./assets/img/160x160/img8.jpg" alt="Image Description">
+                        </div>
+
+                        <div class="flex-grow-1 ms-3">
+                          <a class="d-inline-block link-dark" href="#">
+                            <h6 class="text-hover-primary mb-0">Amanda Harvey <img class="avatar avatar-xss ms-1" src="./assets/svg/illustrations/top-vendor.svg" alt="Image Description" data-bs-toggle="tooltip" data-bs-placement="top" title="" data-bs-original-title="Verified user" aria-label="Verified user"></h6>
+                          </a>
+                          <small class="d-block">amanda@example.com</small>
+                        </div>
+                      </div>
+                    </td>
+                    <td>
+                      <!-- Select -->
+                      <div class="tom-select-custom">
+                        <select class="js-select form-select" autocomplete="off"
+                              data-hs-tom-select-options='{
+                                "placeholder": "Wybierz rolę",
+                                "hideSearch": true
+                              }'>
+                          <option value="">Wybierz rolę</option>
+                          <option value="4">Właściciel</option>
+                          <option value="1">Manager</option>
+                          <option value="3">Pracownik</option>
+                        </select>
+                      </div>
+                      <!-- End Select -->
+                    </td>
+                    <td>
+                        <a class="text-body" href="javascript:;" data-bs-toggle="tooltip" data-bs-placement="top" title="" data-bs-original-title="Usuń użytkownika">
+                          <i class="bi-trash"></i>
+                        </a>
+                      </td>
+                  </tr>
+ 
+                </tbody>
+              </table>
+            </div>
+
+
+                  
+
+                </div>
+
+
+                <!-- End Card -->
+              </div>
+              <!-- End Body -->
+
+              <div class="card-footer pt-0">
+                <div class="container">
+                  <div class="d-flex justify-content-end gap-3">
+                    <a class="btn btn-white" href="javascript:;">Anuluj</a>
+                    <a class="btn btn-primary" href="javascript:;">Zapisz zmiany</a>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <!-- End Card -->
+
+
+            
+
+          </div>
+        </div>
+        <!-- End Col -->
+      </div>
+      <!-- End Row -->
+    </div>
+    <!-- End Content -->
+  </main>
+  <!-- ========== END MAIN CONTENT ========== -->
+
+
+  <!-- ========== FOOTER ========== -->
+  @@include("@@autopath/magico_partials/magico-footer.html")
+  <!-- ========== END FOOTER ========== -->
+
+  <!-- Modal -->
+<div class="modal fade" id="moremodal" tabindex="-1" role="dialog" aria-hidden="true">
+  <div class="modal-dialog modal-dialog-centered" role="document">
+    <div class="modal-content">
+      <!-- Header -->
+      <div class="modal-close">
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+      </div>
+      <!-- End Header -->
+
+      <!-- Body -->
+      <div class="modal-body">
+        <!-- Sign up -->
+        <div id="signupModalFormSignup">
+          <!-- Heading -->
+          <div class="text-center mb-5">
+            <h2>Dodaj członka zespołu</h2>
+            
+            <div class="spinner-border spinner-border-sm" role="status">
+              <span class="visually-hidden">Loading...</span>
+            </div>
+
+            <small>
+              Szukam użytkownika w id.magico
+            </small>
+          </div>
+          <!-- End Heading -->
+
+          <p class="text-danger text-center mb-5">Użytkownik o adresie test@magico.pl<br> 
+          nie posiada konta id.magico.</p>
+
+
+
+          <div class="d-grid gap-3">
+            <a class="js-animation-link btn btn-primary btn-lg" href="#"
+               data-hs-show-animation-options='{
+                     "targetSelector": "#signupModalFormSignupWithEmail",
+                     "groupName": "idForm"
+                   }'>Zaproś do rejestracji w id.magico
+                 </a> 
+
+            <a class="btn btn-white btn-lg" href="#">
+              <span class="d-flex justify-content-center align-items-center">
+                Dodaj bez połączenia z id.magico
+              </span>
+            </a>
+
+            <div class="text-center">
+              <p class="small mb-0">
+                Członek zespołu bez powiązania z id.magico nie otrzyma dostępu do aplikacji w Twojej firmie. Zobacz artkuł pomocy o <a href="#">zarządzaniu zespołem w firmie</a>.
+              </p>
+            </div>
+          </div>
+        </div>
+        <!-- End Sign up -->
+
+        <!-- Sign up with Modal -->
+        <div id="signupModalFormSignupWithEmail" style="display: none; opacity: 0;">
+          <!-- Heading -->
+          <div class="text-center text-success">
+            <i class="bi bi-check2-circle fs-1"></i>
+            <h2>Wysłano zaproszenie</h2>
+          </div>
+          <!-- End Heading -->
+
+          
+        </div>
+        <!-- End Sign up with Modal -->
+
+        
+      </div>
+      <!-- End Body -->
+    </div>
+  </div>
+</div>
+<!-- End Modal -->
+
+  <!-- ========== SECONDARY CONTENTS ========== -->
+  <!-- Sign Up -->
+  @@include("@@autopath/partials/modal/signup.html")
+  
+  <!-- Go To -->
+  @@include("@@autopath/partials/layouts-components/go-to.html")
+  <!-- ========== END SECONDARY CONTENTS ========== -->
+
+  <!-- JS Global Compulsory @@deleteLine:build -->
+  <script src="@@autopath/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
+
+  <!-- JS Implementing Plugins -->
+  <!-- bundlejs:vendor [@@autopath] -->
+  <script src="@@autopath/assets/vendor/hs-header/dist/hs-header.min.js"></script>
+  <script src="@@autopath/assets/vendor/hs-mega-menu/dist/hs-mega-menu.min.js"></script>
+  <script src="@@autopath/assets/vendor/hs-show-animation/dist/hs-show-animation.min.js"></script>
+  <script src="@@autopath/assets/vendor/hs-go-to/dist/hs-go-to.min.js"></script>
+  <script src="@@autopath/assets/vendor/hs-file-attach/dist/hs-file-attach.min.js"></script>
+  <script src="@@autopath/assets/vendor/hs-add-field/dist/hs-add-field.min.js"></script>
+  <script src="@@autopath/node_modules/imask/dist/imask.min.js"></script>
+  <script src="@@autopath/node_modules/quill/dist/quill.min.js"></script>
+  <script src="@@autopath/node_modules/tom-select/dist/js/tom-select.complete.min.js"></script>
+  <script src="@@autopath/assets/vendor/hs-toggle-password/dist/js/hs-toggle-password.js"></script>
+
+  <!-- JS Front -->
+  <!-- bundlejs:theme [@@autopath] -->
+  <script src="@@autopath/assets/js/hs.core.js"></script>
+  <script src="@@autopath/assets/js/hs.bs-dropdown.js"></script>
+  <script src="@@autopath/assets/js/hs.bs-validation.js"></script>
+  <script src="@@autopath/assets/js/hs.imask.js"></script>
+  <script src="@@autopath/assets/js/hs.quill.js"></script>
+  <script src="@@autopath/assets/js/hs.tom-select.js"></script>
+
+  <!-- JS Plugins Init. -->
+  <script>
+    (function() {
+      // INITIALIZATION OF HEADER
+      // =======================================================
+      new HSHeader('#header').init()
+
+
+      // INITIALIZATION OF MEGA MENU
+      // =======================================================
+      new HSMegaMenu('.js-mega-menu', {
+          desktop: {
+            position: 'left'
+          }
+        })
+
+
+      // INITIALIZATION OF SHOW ANIMATIONS
+      // =======================================================
+      new HSShowAnimation('.js-animation-link')
+
+
+      // INITIALIZATION OF BOOTSTRAP VALIDATION
+      // =======================================================
+      HSBsValidation.init('.js-validate', {
+        onSubmit: data => {
+          data.event.preventDefault()
+          alert('Submited')
+        }
+      })
+
+
+      // INITIALIZATION OF BOOTSTRAP DROPDOWN
+      // =======================================================
+      HSBsDropdown.init()
+
+
+      // INITIALIZATION OF GO TO
+      // =======================================================
+      new HSGoTo('.js-go-to')
+
+
+      // INITIALIZATION OF FILE ATTACH
+      // =======================================================
+      new HSFileAttach('.js-file-attach')
+
+
+      // INITIALIZATION OF ADD FIELD
+      // =======================================================
+      new HSAddField('.js-add-field', {
+        addedField: el => {
+          el.querySelectorAll('.js-select-dynamic').forEach(item => {
+            HSCore.components.HSTomSelect.init(item)
+          })
+
+          HSCore.components.HSMask.init('.js-input-mask-dynamic')
+        }
+      })
+
+
+      // INITIALIZATION OF INPUT MASK
+      // =======================================================
+      HSCore.components.HSMask.init('.js-input-mask')
+
+
+      // INITIALIZATION OF QUILLJS EDITOR
+      // =======================================================
+      HSCore.components.HSQuill.init('.js-quill')
+
+      
+      // INITIALIZATION OF SELECT
+      // =======================================================
+      HSCore.components.HSTomSelect.init('.js-select', {
+        render: {
+          'option': function(data, escape) {
+            return data.optionTemplate || `<div>${data.text}</div>>`
+          },
+          'item': function(data, escape) {
+            return data.optionTemplate || `<div>${data.text}</div>>`
+          }
+        }
+      })
+
+// INITIALIZATION OF BOOTSTRAP VALIDATION
+    // =======================================================
+    HSBsValidation.init('.js-validate', {
+      onSubmit: data => {
+        data.event.preventDefault()
+        alert('Submited')
+      }
+    })
+
+
+    // INITIALIZATION OF SHOW ANIMATIONS
+    // =======================================================
+    new HSShowAnimation('.js-animation-link')
+
+
+    // INITIALIZATION OF TOGGLE PASSWORD
+    // =======================================================
+    new HSTogglePassword('.js-toggle-password')
+
+    })()
+  </script>
+</body>
+</html>

src/magico_partials/magico-company-menu.html

@@ -30,7 +30,7 @@
 <!-- List -->
 <ul class="nav nav-sm nav-tabs nav-vertical mb-4">
   <li class="nav-item">
-    <a class="nav-link @@if(link=='magico-company-dashboard.html'){active}" href="@@autopath/magico-company-dashboard.html">
+    <a class="nav-link @@if(link=='magico-company-team.html'){active}" href="@@autopath/magico-company-team.html">
       <i class="bi-people nav-icon"></i> Zespół
     </a>
   </li>