From 902ec501b03d3fe07ba5f0560fea3e53378c8a0f Mon Sep 17 00:00:00 2001
From: Nadar <nadar.veselov@mail.ru>
Date: Tue, 27 Feb 2024 20:13:44 +0300
Subject: [PATCH] update

---
 src/assets/index.css            |   5 +-
 src/assets/index.css.map        |   2 +-
 src/assets/normalize.scss       |   3 +-
 src/assets/style.scss           |   2 +-
 src/components/app-checkbox.vue |  87 +++++++++++++++++
 src/components/app-input.vue    |   8 +-
 src/components/app-select.vue   |  41 ++++++++
 src/pages/createUser.vue        | 163 ++++++++++++++++++++++++++++++--
 8 files changed, 298 insertions(+), 13 deletions(-)
 create mode 100644 src/components/app-checkbox.vue
 create mode 100644 src/components/app-select.vue

diff --git a/src/assets/index.css b/src/assets/index.css
index d3bcaee..efbad67 100644
--- a/src/assets/index.css
+++ b/src/assets/index.css
@@ -77,7 +77,7 @@ button:hover {
 }
 
 .container {
-  max-width: 1200px;
+  max-width: 800px;
   width: 100%;
   margin-inline: auto;
 }
@@ -225,7 +225,8 @@ button,
 input,
 optgroup,
 select,
-textarea {
+textarea,
+option {
   font-family: inherit; /* 1 */
   font-size: 100%; /* 1 */
   line-height: 1.15; /* 1 */
diff --git a/src/assets/index.css.map b/src/assets/index.css.map
index 987f53c..627dc55 100644
--- a/src/assets/index.css.map
+++ b/src/assets/index.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["fonts.scss","style.scss","normalize.scss"],"names":[],"mappings":"AAAQ;AAER;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AC3CF;AAAA;EAEE;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;AAEA;EACE;EACA;;;AAIJ;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EAEA;;;ACtCF;AAEA;AAAA;AAGA;AAAA;AAAA;AAAA;AAKA;EACE;EACA;;;AAGF;AAAA;AAGA;AAAA;AAAA;AAIA;EACE;;;AAGF;AAAA;AAAA;AAIA;EACE;;;AAGF;AAAA;AAAA;AAAA;AAUA;AAAA;AAGA;AAAA;AAAA;AAAA;AAKA;EACE;EACA;EACA;;;AAGF;AAAA;AAAA;AAAA;AAKA;EACE;EACA;;;AAGF;AAAA;AAGA;AAAA;AAAA;AAIA;EACE;;;AAGF;AAAA;AAAA;AAAA;AAKA;EACE;EACA;EACA;;;AAGF;AAAA;AAAA;AAIA;AAAA;EAEE;;;AAGF;AAAA;AAAA;AAAA;AAKA;AAAA;AAAA;EAGE;EACA;;;AAGF;AAAA;AAAA;AAIA;EACE;;;AAGF;AAAA;AAAA;AAAA;AAKA;AAAA;EAEE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;AAAA;AAGA;AAAA;AAAA;AAIA;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;AAAA;AAGA;AAAA;AAAA;AAAA;AAKA;AAAA;AAAA;AAAA;AAAA;EAKE;EACA;EACA;EACA;EACA;EACA;;;AAGF;AAAA;AAAA;AAAA;AAKA;AAAA,QACQ;EACN;;;AAGF;AAAA;AAAA;AAAA;AAKA;AAAA,SACS;EACP;;;AAGF;AAAA;AAAA;AAIA;AAAA;AAAA;AAAA;EAIE;;;AAGF;AAAA;AAAA;AAIA;AAAA;AAAA;AAAA;EAIE;EACA;;;AAGF;AAAA;AAAA;AAIA;AAAA;AAAA;AAAA;EAIE;;;AAGF;AAAA;AAAA;AAIA;EACE;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAOA;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;AAAA;AAAA;AAIA;EACE;;;AAGF;AAAA;AAAA;AAIA;EACE;;;AAGF;AAAA;AAAA;AAAA;AAKA;AAAA;EAEE;EACA;;;AAGF;AAAA;AAAA;AAIA;AAAA;EAEE;;;AAGF;AAAA;AAAA;AAAA;AAKA;EACE;EACA;;;AAGF;AAAA;AAAA;AAIA;EACE;;;AAGF;AAAA;AAAA;AAAA;AAKA;EACE;EACA;;;AAGF;AAAA;AAGA;AAAA;AAAA;AAIA;EACE;;;AAGF;AAAA;AAAA;AAIA;EACE;;;AAGF;AAAA;AAGA;AAAA;AAAA;AAIA;EACE;;;AAGF;AAAA;AAAA;AAIA;EACE","file":"index.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["fonts.scss","style.scss","normalize.scss"],"names":[],"mappings":"AAAQ;AAER;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AC3CF;AAAA;EAEE;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;AAEA;EACE;EACA;;;AAIJ;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EAEA;;;ACtCF;AAEA;AAAA;AAGA;AAAA;AAAA;AAAA;AAKA;EACE;EACA;;;AAGF;AAAA;AAGA;AAAA;AAAA;AAIA;EACE;;;AAGF;AAAA;AAAA;AAIA;EACE;;;AAGF;AAAA;AAAA;AAAA;AAUA;AAAA;AAGA;AAAA;AAAA;AAAA;AAKA;EACE;EACA;EACA;;;AAGF;AAAA;AAAA;AAAA;AAKA;EACE;EACA;;;AAGF;AAAA;AAGA;AAAA;AAAA;AAIA;EACE;;;AAGF;AAAA;AAAA;AAAA;AAKA;EACE;EACA;EACA;;;AAGF;AAAA;AAAA;AAIA;AAAA;EAEE;;;AAGF;AAAA;AAAA;AAAA;AAKA;AAAA;AAAA;EAGE;EACA;;;AAGF;AAAA;AAAA;AAIA;EACE;;;AAGF;AAAA;AAAA;AAAA;AAKA;AAAA;EAEE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;AAAA;AAGA;AAAA;AAAA;AAIA;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;AAAA;AAGA;AAAA;AAAA;AAAA;AAKA;AAAA;AAAA;AAAA;AAAA;AAAA;EAME;EACA;EACA;EACA;EACA;EACA;;;AAGF;AAAA;AAAA;AAAA;AAKA;AAAA,QACQ;EACN;;;AAGF;AAAA;AAAA;AAAA;AAKA;AAAA,SACS;EACP;;;AAGF;AAAA;AAAA;AAIA;AAAA;AAAA;AAAA;EAIE;;;AAGF;AAAA;AAAA;AAIA;AAAA;AAAA;AAAA;EAIE;EACA;;;AAGF;AAAA;AAAA;AAIA;AAAA;AAAA;AAAA;EAIE;;;AAGF;AAAA;AAAA;AAIA;EACE;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAOA;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;AAAA;AAAA;AAIA;EACE;;;AAGF;AAAA;AAAA;AAIA;EACE;;;AAGF;AAAA;AAAA;AAAA;AAKA;AAAA;EAEE;EACA;;;AAGF;AAAA;AAAA;AAIA;AAAA;EAEE;;;AAGF;AAAA;AAAA;AAAA;AAKA;EACE;EACA;;;AAGF;AAAA;AAAA;AAIA;EACE;;;AAGF;AAAA;AAAA;AAAA;AAKA;EACE;EACA;;;AAGF;AAAA;AAGA;AAAA;AAAA;AAIA;EACE;;;AAGF;AAAA;AAAA;AAIA;EACE;;;AAGF;AAAA;AAGA;AAAA;AAAA;AAIA;EACE;;;AAGF;AAAA;AAAA;AAIA;EACE","file":"index.css"}
\ No newline at end of file
diff --git a/src/assets/normalize.scss b/src/assets/normalize.scss
index 2efd7eb..5e0a9b9 100644
--- a/src/assets/normalize.scss
+++ b/src/assets/normalize.scss
@@ -167,7 +167,8 @@ button,
 input,
 optgroup,
 select,
-textarea {
+textarea,
+option{
   font-family: inherit; /* 1 */
   font-size: 100%; /* 1 */
   line-height: 1.15; /* 1 */
diff --git a/src/assets/style.scss b/src/assets/style.scss
index efca044..edde597 100644
--- a/src/assets/style.scss
+++ b/src/assets/style.scss
@@ -33,7 +33,7 @@ button {
 }
 
 .container{
-  max-width: 1200px;
+  max-width: 800px;
   width: 100%;
 
   margin-inline: auto;
diff --git a/src/components/app-checkbox.vue b/src/components/app-checkbox.vue
new file mode 100644
index 0000000..436e211
--- /dev/null
+++ b/src/components/app-checkbox.vue
@@ -0,0 +1,87 @@
+<template>
+  <div>
+    <input
+        class='checkbox'
+        type="checkbox"
+        :id="id"
+        :checked="checked"
+        @input="handleClick($event)">
+    <label :for="id">{{ text }}</label>
+  </div>
+</template>
+
+<script setup>
+const emits = defineEmits(['update:checked'])
+const props = defineProps({
+  checked: {
+    type: Boolean,
+    default: false
+  },
+  id: {
+    type: String,
+    default: ''
+  },
+  text: {
+    type: String,
+    default: ''
+  },
+})
+const handleClick = (event) => {
+  emits('update:checked', event.target.checked)
+}
+</script>
+
+<style lang="scss" scoped>
+.checkbox {
+  position: absolute;
+  z-index: -1;
+  opacity: 0;
+
+  & + label {
+    display: inline-flex;
+    align-items: center;
+    user-select: none;
+  }
+
+  & + label::before {
+    content: '';
+    display: inline-block;
+    width: 24px;
+    height: 24px;
+    flex-shrink: 0;
+    flex-grow: 0;
+    border: 1px solid #adb5bd;
+    border-radius: 6px;
+    margin-right: 10px;
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-size: 50% 50%;
+  }
+
+  &:checked + label::before {
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e");
+  }
+
+  &:not(:disabled):not(:checked) + label:hover::before {
+    border-color: var(--primary-hover);
+  }
+
+  &:not(:disabled):active + label::before {
+    background-color: var(--primary);
+    border: 1px solid #ECEBED;
+  }
+
+  &:focus + label::before {
+    box-shadow: 0 7px 20px rgba(0, 0, 0, 0.07);
+  }
+
+  &:focus:not(:checked) + label::before {
+    border-color: var(--primary);
+  }
+
+  &:disabled + label::before {
+    background-color: #e9ecef;
+    border: 1px solid #ECEBED;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/app-input.vue b/src/components/app-input.vue
index cf70217..b301035 100644
--- a/src/components/app-input.vue
+++ b/src/components/app-input.vue
@@ -7,7 +7,8 @@
     <input
         :placeholder=placeholder
         :value="value"
-        @input="updateValue">
+        @input="updateValue"
+    >
     <div
         class="app-input__warning"
         v-for="element of error"
@@ -55,10 +56,15 @@ const updateValue = (e) => {
   border-radius: 10px;
   cursor: pointer;
 
+  &:hover {
+    opacity: 0.7;
+  }
+
   input {
     width: 100%;
     border-radius: 5px;
     padding: 10px;
+    height: 25px;
   }
 
   &__title {
diff --git a/src/components/app-select.vue b/src/components/app-select.vue
new file mode 100644
index 0000000..3974431
--- /dev/null
+++ b/src/components/app-select.vue
@@ -0,0 +1,41 @@
+<template>
+  <label class="app-select">
+    <div>{{ title }}</div>
+    <select class="select">
+      <option v-for="item in items" :key="item.id">
+        {{ item }}
+      </option>
+    </select>
+  </label>
+</template>
+
+<script setup>
+defineProps({
+  items: {
+    type: Array,
+    required: true
+  },
+  title: {
+    type: String,
+    default: ''
+  }
+})
+</script>
+
+<style lang="scss">
+.app-select {
+  width: 300px;
+  cursor: pointer;
+
+  &:hover {
+    opacity: 0.7;
+  }
+}
+
+.select {
+  padding: 10px;
+  width: 100%;
+  height: 45px;
+  border-radius: 5px;
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/createUser.vue b/src/pages/createUser.vue
index 5f432f1..842cad9 100644
--- a/src/pages/createUser.vue
+++ b/src/pages/createUser.vue
@@ -4,6 +4,7 @@
       <h1 class="createUser__title">Создание пользователя</h1>
 
       <form @submit.prevent="submitForm" class="createUser__form">
+        <h3>Персональные данные</h3>
         <div class="createUser__row">
           <AppInput
               placeholder='Введите фамилию'
@@ -12,14 +13,138 @@
               :error="v$.nameField.$errors"
           />
           <AppInput
-              placeholder='Введите почту'
-              title="Почта"
-              v-model:value="v$.emailField.$model"
-              :error="v$.emailField.$errors"
+              placeholder='Введите имя'
+              title="Имя"
+              v-model:value="v$.nameField.$model"
+              :error="v$.nameField.$errors"
+          />
+        </div>
+        <div class="createUser__row">
+          <AppInput
+              placeholder='Введите отчество'
+              title="Отчество"
+              v-model:value="v$.nameField.$model"
+              :error="v$.nameField.$errors"
+          />
+          <AppInput
+              placeholder='Введите дату рождения'
+              title="Дата рождения"
+              v-model:value="v$.nameField.$model"
+              :error="v$.nameField.$errors"
+          />
+        </div>
+        <div class="createUser__row">
+          <AppSelect
+              title="Укажите ваш пол"
+              :items="['Мужской','Женский']"
+          />
+          <AppSelect
+              title="Группа клиентов"
+              :items="['Vip','Проблемные','ОМС']"
+          />
+        </div>
+        <div class="createUser__row">
+          <AppInput
+              placeholder='Введите номер телефона'
+              title="Номер телефона"
+              v-model:value="v$.nameField.$model"
+              :error="v$.nameField.$errors"
+          />
+          <AppSelect
+              title="Лечющий врач"
+              :items="['Иванов', 'Захаров', 'Чернышева']"
+          />
+        </div>
+        <div class="createUser__row">
+          <AppCheckbox
+              class="createUser__checkbox"
+              text="Не отправлять СМС"
+              id="checkboxIsActive"
+              v-model:checked="checkboxIsActive"/>
+        </div>
+
+        <h3>Адресс</h3>
+        <div class="createUser__row">
+          <AppInput
+              placeholder='Введите индекс'
+              title="Индекс"
+              v-model:value="v$.nameField.$model"
+              :error="v$.nameField.$errors"
+          />
+          <AppInput
+              placeholder='Введите вашу страну'
+              title="Страна"
+              v-model:value="v$.nameField.$model"
+              :error="v$.nameField.$errors"
+          />
+        </div>
+        <div class="createUser__row">
+          <AppInput
+              placeholder='Введите вагу область'
+              title="Область"
+              v-model:value="v$.nameField.$model"
+              :error="v$.nameField.$errors"
+          />
+          <AppInput
+              placeholder='Введите ваш город'
+              title="Город"
+              v-model:value="v$.nameField.$model"
+              :error="v$.nameField.$errors"
+          />
+        </div>
+        <div class="createUser__row">
+          <AppInput
+              placeholder='Введите вашу улицу'
+              title="Улица"
+              v-model:value="v$.nameField.$model"
+              :error="v$.nameField.$errors"
+          />
+          <AppInput
+              placeholder='Введите ваш номер дома'
+              title="Дом"
+              v-model:value="v$.nameField.$model"
+              :error="v$.nameField.$errors"
           />
         </div>
 
-        <AppButton medium>Confirm</AppButton>
+        <h3>Паспортные данные</h3>
+        <div class="createUser__row">
+          <AppSelect
+              title='Выберите документ'
+              :items="['Паспорт','Свидетельство о рождении','Водительское удостоверение']"
+          />
+          <AppInput
+              placeholder='Введите серию'
+              title="Серия"
+              v-model:value="v$.nameField.$model"
+              :error="v$.nameField.$errors"
+          />
+        </div>
+        <div class="createUser__row">
+          <AppInput
+              placeholder='Введите номер'
+              title="Номер"
+              v-model:value="v$.nameField.$model"
+              :error="v$.nameField.$errors"
+          />
+          <AppInput
+              placeholder='Дата'
+              title="Дата выдвчи"
+              v-model:value="v$.nameField.$model"
+              :error="v$.nameField.$errors"
+          />
+        </div>
+        <div class="createUser__row">
+          <AppInput
+              width="100%"
+              placeholder='Введите название оргонизации'
+              title="Кем выдан"
+              v-model:value="v$.nameField.$model"
+              :error="v$.nameField.$errors"
+          />
+        </div>
+
+        <AppButton medium type="Submit">Confirm</AppButton>
       </form>
     </div>
   </div>
@@ -32,6 +157,10 @@ import AppInput from "../components/app-input.vue";
 import {computed, ref} from "vue";
 import {email, helpers, minLength} from "@vuelidate/validators";
 import useVuelidate from "@vuelidate/core";
+import AppCheckbox from "../components/app-checkbox.vue";
+import AppSelect from "../components/app-select.vue";
+
+const checkboxIsActive = ref(false)
 
 const nameField = ref('')
 const emailField = ref('')
@@ -48,26 +177,46 @@ const rules = computed(() => ({
 }))
 
 const v$ = useVuelidate(rules, {nameField, emailField})
-console.log(v$)
+
+function submitForm() {
+  alert('pizda')
+}
 </script>
 
 <style lang="scss">
 .createUser {
+  height: 100%;
+
   &__title {
     margin-top: 30px;
     margin-bottom: 50px;
   }
 
   &__form {
-    display: flex;
+    //display: flex;
     flex-direction: column;
     gap: 30px;
+    height: 100%;
+
+    @media (max-width: 700px) {
+      align-items: center;
+    }
   }
 
   &__row {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
+
+    @media (max-width: 700px) {
+      display: flex;
+      flex-direction: column;
+      gap: 30px;
+    }
+  }
+
+  &__checkbox {
+    margin-top: auto;
   }
 }