Revize d99d8a5b

Bug #8692: Povinné prvky u modalů

application/view/modals/editModal.html

@@ -9 +9 @@
                 <div class="container">
                     <div class="row my-1">
                         <div class="col-xs-12 col-sm-4">
-                            <label for="lemma">Lemma:</label>
+                            <label for="lemma">Lemma: <b class="required">*</b></label>
                         </div>
                         <div class="col-xs-12 col-sm-8">
                             <input class="min-wdth" id="lemma"/>
@@ -17 +17 @@
                     </div>
                     <div class="row my-1">
                         <div class="col-xs-12 col-sm-4">
-                            <label for="word">Slovo:</label>
+                            <label for="word">Slovo: <b class="required">*</b></label>
                         </div>
                         <div class="col-xs-12 col-sm-8">
                             <input class="min-wdth" id="word"/>
@@ -50 +50 @@
                     </div>
                     <div class="row my-1">
                         <div class="col-xs-12 col-sm-4">
-                            <label for="position">Pozice:</label>
+                            <label for="position">Pozice: <b class="required">*</b></label>
                         </div>
                         <div class="col-xs-12 col-sm-8">
                             <input class="min-wdth" id="position" title="Jedotlivé oddíly zadávejte oddělené lomítkem (bez mezery)" />
@@ -98 +98 @@
                     </div>
                     <div class="row my-1">
                         <div class="col-xs-12 col-sm-4">
-                            <label for="wordclass">Slovní druh:</label>
+                            <label for="wordclass">Slovní druh: <b class="required">*</b></label>
                         </div>
                         <div class="col-xs-12 col-sm-8">
                             <select class="min-wdth" onchange="changeWordType()"  id="wordclass">
@@ -329 +329 @@
             changeWordType();
             modal.find('#submit-but').text("Založit");
             modal.find('#submit-but').click(() => createData(modal));
+
+            enableSubmit(modal);
+            modal.find("#lemma").change(() => enableSubmit(modal));
+            modal.find("#word").change(() => enableSubmit(modal));
+            modal.find("#position").change(() => enableSubmit(modal));
+            modal.find("#wordclass").change(() => enableSubmit(modal));
         } else {
             const data_obj = data[pseudo_id];
             modal.find('#submit-but').text("Upravit");
@@ -338 +344 @@
             prefill(modal, data_obj);
             moodMChange(modal);
             irregularMChange(modal);
+
+            enableSubmit(modal);
+            modal.find("#lemma").change(() => enableSubmit(modal));
+            modal.find("#word").change(() => enableSubmit(modal));
+            modal.find("#position").change(() => enableSubmit(modal));
+            modal.find("#wordclass").change(() => enableSubmit(modal));
         }
     });
 
@@ -650 +662 @@
         }
     }
 
+    function enableSubmit(modal) {
+        if (
+            modal.find("#lemma")[0].value === "" ||
+            modal.find("#word")[0].value === "" ||
+            modal.find("#position")[0].value === "" ||
+            modal.find("#wordclass")[0].value === ""
+        ) {
+            modal.find("#submit-but").prop("disabled", true);
+        } else {
+            modal.find("#submit-but").prop("disabled", false);
+        }
+    }
+
     function editData(data, modal){
         const formData = prepareFormData(modal);
         formData.append("id", data.id);

application/view/modals/editUserModal.html

@@ -9 +9 @@
                 <div class="container">
                     <div class="row my-1" id="username-wrapper">
                         <div class="col-xs-12 col-sm-4">
-                            <label for="username">Uživatelské jméno:</label>
+                            <label for="username">Uživatelské jméno: <b class="required">*</b></label>
                         </div>
                         <div class="col-xs-12 col-sm-8">
                             <input class="min-wdth" id="username"/>
@@ -25 +25 @@
                     </div>
                     <div class="row my-1">
                         <div class="col-xs-12 col-sm-4">
-                            <label for="email">Email:</label>
+                            <label for="email">Email:  <b class="required">*</b></label>
                         </div>
                         <div class="col-xs-12 col-sm-8">
                             <input class="min-wdth" id="email"/>
@@ -33 +33 @@
                     </div>
                     <div class="row my-1">
                         <div class="col-xs-12 col-sm-4">
-                            <label for="rights">Práva:</label>
+                            <label for="rights">Práva:  <b class="required">*</b></label>
                         </div>
                         <div class="col-xs-12 col-sm-8">
                             <select class="min-wdth" id="rights">
@@ -68 +68 @@
             modal.find("#username-wrapper").show();
             modal.find("#password-wrapper").show();
             modal.find('#submit-but').click(() => createData(modal));
+
+            enableSubmit(modal, true);
+            modal.find("#email").change(() => enableSubmit(modal, true));
+            modal.find("#rights").change(() => enableSubmit(modal, true));
+            modal.find("#username").change(() => enableSubmit(modal, true));
         } else {
             const data_obj = users[pseudo_id];
             modal.find('#submit-but').text("Upravit");
@@ -75 +80 @@
             modal.find("#password-wrapper").hide();
             modal.find('#submit-but').click(() => editData(data_obj, modal));
             prefill(modal, data_obj);
+
+            enableSubmit(modal, false);
+            modal.find("#email").change(() => enableSubmit(modal, true));
+            modal.find("#rights").change(() => enableSubmit(modal, true));
+            modal.find("#username").change(() => enableSubmit(modal, true));
         }
     });
 
+    function enableSubmit(modal, createNew){
+        if(
+            modal.find("#email")[0].value === "" ||
+            modal.find("#rights")[0].value === "" ||
+            (modal.find("#username")[0].value === "" && !createNew)
+        ){
+            modal.find("#submit-but").prop( "disabled", true );
+        } else {
+            modal.find("#submit-but").prop( "disabled", false );
+        }
+    }
 
     function prefill(modal, data = null){
         modal.find("#username").val("");

application/view/style.css

@@ -22 +22 @@
   height: 80%;
 }
 
+.required {
+  color: red;
+}
+
 .app-content .menu {
   background-color: #e0e9d8;
   border-right: #4B4B4B solid 2px;