sprof 0.1.0

package/src/components/RightTabsContainer.vue

@@ -0,0 +1,210 @@
+<template>
+  <div class="mainblock">
+    <div
+      class="slider-block"
+      :style="{
+        marginRight: mobileWindow
+          ? isToggle
+            ? '49px'
+            : `calc(49px - ${sliderOnWidth})`
+          : isToggle
+            ? sliderOffWidth
+            : `calc(${sliderOffWidth} - ${sliderOnWidth})`,
+        width: sliderOnWidth,
+        minHeight: sliderOffWidth,
+        height: isToggle ? 'auto' : '100px',
+      }"
+    >
+      <div
+        class="slider-icon"
+        :style="{
+          border: isToggle ? '1px solid #379FFF' : '1px solid #00B5A4',
+          background: isToggle ? '#ffffff' : '#C7ECEA',
+        }"
+        @click="toggleSlider(!isToggle)"
+        @mouseenter="hovering = true"
+        @mouseleave="hovering = false"
+      >
+        <div
+          class="icon-block"
+          :style="{
+            transform: hovering
+              ? isToggle
+                ? 'rotate(-225deg) scale(1.2, 1.2)'
+                : 'rotate(0deg) scale(1.2, 1.2)'
+              : isToggle
+                ? 'rotate(-225deg)'
+                : 'rotate(0deg)',
+            fill: isToggle ? '#379FFF' : '#00B5A4',
+          }"
+        >
+          <slot name="icon" />
+        </div>
+      </div>
+
+      <div
+        class="slider-info"
+        :style="{
+          width: `calc(${sliderOnWidth} - ${sliderOffWidth})`,
+        }"
+      >
+        <slot name="slider-body" />
+      </div>
+    </div>
+
+    <div class="body-block">
+      <slot name="body" />
+    </div>
+
+    <div class="tab-block">
+      <slot name="tabs" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+const props = defineProps({
+  sliderOffWidth: {
+    type: String as PropType<string>,
+    required: false,
+    default: '101px',
+  },
+  sliderOnWidth: {
+    type: String as PropType<string>,
+    required: false,
+    default: '332px',
+  },
+  background: {
+    type: String as PropType<string>,
+    required: false,
+    default: 'inherit',
+  },
+  isToggle: {
+    type: Boolean as PropType<boolean>,
+    required: false,
+    default: false,
+  },
+  mobileWidth: {
+    type: String as PropType<string>,
+    required: false,
+    default: '768px',
+  },
+});
+const emit = defineEmits(['toggle']);
+const mounted = ref(false);
+const mobileWindow = ref(window.matchMedia('(max-width: 768px)').matches);
+const toggleSlider = (toggle: boolean) => {
+  emit('toggle', toggle);
+};
+const hovering = ref(false);
+
+onBeforeMount(async () => {
+  window.addEventListener('resize', () => {
+    switch (props.mobileWidth) {
+      case '1330px':
+        return (mobileWindow.value = window.matchMedia('(max-width: 1330px)').matches);
+      case '1215px':
+        return (mobileWindow.value = window.matchMedia('(max-width: 1215px)').matches);
+      case '1024px':
+        return (mobileWindow.value = window.matchMedia('(max-width: 1024px)').matches);
+      case '768px':
+        return (mobileWindow.value = window.matchMedia('(max-width: 768px)').matches);
+    }
+    return (mobileWindow.value = window.matchMedia('(max-width: 1330px)').matches);
+  });
+  mounted.value = true;
+});
+</script>
+
+<style lang="scss" scoped>
+@import '@/services/assets/styles/index.scss';
+
+.mainblock {
+  position: relative;
+  display: flex;
+  justify-content: left;
+  width: auto;
+  height: 100%;
+  padding: 0;
+  background: $secondary-background;
+  overflow: hidden;
+}
+
+.slider-block {
+  position: absolute;
+  top: 8px;
+  right: 0;
+  display: flex;
+  justify-content: left;
+  cursor: pointer;
+  transition: 0.3s;
+  z-index: 10;
+}
+
+.slider-icon {
+  min-width: 91px;
+  height: 91px;
+  margin-right: 10px;
+  border-radius: $border-radius;
+  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 5px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.icon-block {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: 0.3s;
+}
+
+.tab-block {
+  width: 110px;
+  background: $secondary-background;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  margin-top: 109px;
+}
+
+.body-block {
+  position: relative;
+  width: calc(100% - 110px);
+  height: calc(100% - 10px);
+  background: $secondary-background;
+  overflow: hidden;
+  overflow-y: auto;
+  // padding-right: 3px;
+}
+
+@media screen and (max-width: 768px) {
+  .slider-icon {
+    min-width: 42px;
+    height: 42px;
+    margin-right: 8px;
+    border-radius: $border-radius;
+    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 5px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .tab-block {
+    width: 50px;
+    background: $secondary-background;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    margin-top: 55px;
+    cursor: pointer;
+  }
+
+  .body-block {
+    position: relative;
+    width: calc(100% - 55px);
+    height: 100%;
+    background: $secondary-background;
+  }
+}
+</style>

package/src/components/SelectValueType.vue

@@ -0,0 +1,39 @@
+<template>
+  <PString string="Выберите вид ответа:" font-size="14px" padding="0" justify-content="left" margin="10px 0" />
+  <PSelect :model-value="selectedType" placeholder="Вид ответа" @change="select">
+    <option v-for="(value, type) in types" :key="value" :label="value" :value="type" />
+  </PSelect>
+</template>
+
+<script setup lang="ts">
+import ValueTypes from '@/services/types/ValueTypes';
+
+defineProps({
+  selectedType: {
+    type: String as PropType<ValueTypes>,
+    required: true,
+  },
+});
+const types = {
+  [ValueTypes.String]: 'Текстовый ответ',
+  [ValueTypes.Text]: 'Развёрнутый текстовый ответ',
+  [ValueTypes.Number]: 'Числовой ответ',
+  [ValueTypes.Date]: 'Ответ в виде даты',
+  [ValueTypes.Radio]: 'Выбор одного из вариантов',
+  [ValueTypes.Set]: 'Выбор нескольких вариантов',
+  [ValueTypes.File]: 'Ответ в виде файла',
+  [ValueTypes.MatrixRadio]: 'Матрица с одним выбором',
+  [ValueTypes.MatrixSet]: 'Матрица с несколькими выборами',
+};
+const emits = defineEmits(['select']);
+
+const select = (t: ValueTypes) => {
+  emits('select', t);
+};
+</script>
+
+<style lang="scss" scoped>
+.red {
+  background: red;
+}
+</style>

package/src/components/SingleNameToggleForm.vue

@@ -0,0 +1,399 @@
+<template>
+  <el-form ref="form" style="width: 100%">
+    <InfoItem
+      title="Название"
+      :show-save-dialog="showSaveDialog"
+      icon="edit-title"
+      :with-hover="true"
+      :close="closeToggle"
+      width="100%"
+      @keyup-enter="submit"
+      @after-close="resetCopy"
+    >
+      <PString v-if="name.length" :string="name.length > 60 ? name.slice(0, 60) + '...' : name" />
+      <PString v-else string="Введите данные" color="#B0A4C0" />
+      <template #open-inside-content>
+        <InfoItem
+          title=""
+          icon="edit-title"
+          :with-open-window="false"
+          :with-hover="false"
+          border-color="#ffffff"
+          base-box-margin="0 0 15px 0"
+          padding="0"
+          width="100%"
+          custom-class="test"
+          open-width="100%"
+        >
+          <div class="field">
+            <el-form>
+              <el-form-item style="width: 100%" prop="surname">
+                <el-input v-model="name" style="width: 100%" :autosize="true" type="textarea" />
+              </el-form-item>
+            </el-form>
+          </div>
+        </InfoItem>
+        <PButton type="admin" color="blue" text="Сохранить" @click="submit" />
+      </template>
+    </InfoItem>
+  </el-form>
+</template>
+
+<script setup lang="ts">
+import { PropType, Ref, ref } from 'vue';
+
+import InfoItem from '@/services/components/InfoItem.vue';
+import IWithName from '@/services/interfaces/IWithName';
+
+const props = defineProps({
+  withName: {
+    type: Object as PropType<IWithName>,
+    required: true,
+  },
+});
+const emit = defineEmits(['submit']);
+
+const closeToggle: Ref<boolean> = ref(false);
+const form = ref();
+const name: Ref<string> = ref(props.withName.name);
+const showSaveDialog: Ref<boolean> = ref(false);
+
+const resetCopy = () => {
+  showSaveDialog.value = false;
+};
+
+const submit = async (): Promise<void> => {
+  name.value.trim();
+  props.withName.setName(name.value);
+  closeToggle.value = !closeToggle.value;
+  emit('submit');
+};
+</script>
+
+<style lang="scss" scoped>
+@import '@/services/assets/styles/index.scss';
+
+.field {
+  width: 100%;
+}
+
+.button {
+  width: auto;
+  height: 34px;
+  border-radius: 5px;
+  color: #006bb4;
+  font-size: 12px;
+
+  &-filter {
+    background: #ffffff;
+  }
+
+  &-download {
+    background: #dff2f8;
+  }
+}
+
+:deep(.button-register) {
+  width: auto;
+  height: 34px;
+  border-radius: 5px;
+  color: #006bb4;
+  background: #ffffff;
+  font-size: 12px;
+}
+
+:deep(.name-item) {
+  margin: 0;
+  width: auto;
+  border-color: #ffffff;
+  padding: 0;
+}
+
+.grid {
+  max-width: auto;
+  grid-gap: 10px;
+  margin: 0;
+  grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
+}
+
+.plus-button {
+  width: 100%;
+  height: 34px;
+  border-radius: 5px;
+  color: #00bea5;
+  background: #c1efeb;
+}
+
+.save-picker-button {
+  width: 100%;
+  height: 34px;
+  border-radius: 5px;
+  color: #006bb4;
+  background: #dff2f8;
+}
+
+.gender-button {
+  width: 42px;
+  border-radius: 5px;
+  height: 42px;
+  color: #006bb4;
+  background: #dff2f8;
+  margin: 2px 10px 0 0;
+  font-size: 18px;
+}
+
+.save-button {
+  width: 100%;
+  border-radius: 5px;
+  height: 42px;
+  color: #006bb4;
+  background: #dff2f8;
+  margin: 2px 10px 0 0;
+  font-size: 14px;
+}
+
+:deep(.edit-button) {
+  min-width: 40px;
+  max-width: 40px;
+  height: 40px;
+  border-radius: 5px;
+  color: #006bb4;
+  background: #dff2f8;
+}
+
+:deep(.files-buttons) {
+  width: auto;
+  height: 34px;
+  border-radius: 5px;
+  color: #006bb4;
+  background: #dff2f8;
+  font-size: 12px;
+
+  &:hover {
+    background: #dff2f8;
+  }
+}
+
+.edv {
+  font-size: 14px;
+  padding: 0;
+  margin: 0 5px 0 0;
+
+  &-active {
+    color: #b0a4c0;
+  }
+}
+
+.patient-name {
+  color: #006bb4;
+  font-size: 17px;
+  min-width: 150px;
+  width: 100%;
+  padding: 0;
+}
+
+.hidden {
+  display: none;
+}
+
+.scroll-block {
+  height: 75vh;
+  overflow: hidden;
+  overflow-y: scroll;
+  margin-left: 8px;
+}
+
+.registers-tooltip {
+  &:hover {
+    cursor: pointer;
+  }
+}
+
+.patient-link {
+  &:hover {
+    cursor: pointer;
+    text-decoration: underline;
+  }
+}
+
+.tag-link:hover {
+  background-color: darken(white, 10%);
+  cursor: pointer;
+}
+
+.flex-block {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+:deep(.edit-icon) {
+  width: 28px;
+  height: 28px;
+  color: #006bb4;
+}
+
+.item-flex {
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  align-items: center;
+  margin: 0 10px 0 0;
+}
+
+.item-flex:last-child {
+  margin: 10px 0;
+}
+
+.line-item-left {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: auto;
+  padding: 0;
+}
+
+.line-item-right {
+  display: flex;
+  justify-content: right;
+  align-items: center;
+  width: auto;
+  padding: 0;
+}
+
+:deep(.icon-plus) {
+  fill: #00b5a4;
+  width: 24px;
+  height: 24px;
+  cursor: pointer;
+}
+
+.icon-filter {
+  width: 24px;
+  height: 24px;
+  cursor: pointer;
+  stroke: #006bb4;
+  fill: none;
+}
+
+.icon-del {
+  width: 10px;
+  height: 10px;
+  cursor: pointer;
+}
+
+.patient-count {
+  margin-top: 10px;
+  color: $site_light_pink;
+  font-size: 14px;
+}
+
+:deep(.el-form-item) {
+  margin: 8px 0 0 0;
+}
+
+@media (max-width: 1915px) {
+  .flex-block {
+    width: 100%;
+    display: block;
+    justify-content: space-between;
+    align-items: center;
+  }
+  .line-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    padding: 0;
+  }
+  .item-flex {
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 10px;
+  }
+
+  .item-flex:last-child {
+    margin-top: 10px;
+    margin-bottom: 10px;
+  }
+}
+
+@media (max-width: 560px) {
+  .line-item-left {
+    margin: 10px 0;
+  }
+
+  .line-item-right {
+    margin: 10px 0;
+    justify-content: space-between;
+  }
+
+  .item-flex:first-child {
+    display: block;
+    width: 100%;
+    margin: 0 0px 10px 0;
+  }
+}
+
+.save-button {
+  width: 100%;
+  border-radius: 5px;
+  height: 42px;
+  color: #006bb4;
+  background: #dff2f8;
+  margin: 10px 0 0 0;
+  font-size: 14px;
+}
+
+:deep(.el-date-editor.el-input, .el-date-editor.el-input__inner) {
+  width: 100%;
+}
+
+:deep(.el-form-item) {
+  display: block;
+  margin-bottom: 16px;
+}
+
+:deep(.el-input__inner) {
+  height: 40px;
+  width: 100%;
+  display: flex;
+  font-family: Comfortaa, Arial, Helvetica, sans-serif;
+  font-size: 15px;
+  color: $site_dark_gray;
+}
+
+:deep(.el-input__inner::placeholder) {
+  color: $site_light_pink;
+}
+
+:deep(.el-input__icon) {
+  color: $site_dark_gray;
+}
+
+:deep(.el-form-item__label) {
+  color: $site_light_pink;
+  padding: 0 !important;
+  text-transform: uppercase;
+  margin-left: 5px;
+  font-size: 14px;
+  margin-bottom: 6px;
+}
+
+:deep(.el-input-number__increase) {
+  border-radius: 0;
+}
+
+:deep(.el-input-number__decrease) {
+  border-radius: 0;
+}
+
+:deep(.el-textarea__inner) {
+  font-family: Comfortaa, Arial, Helvetica, sans-serif;
+  font-size: 15px;
+  color: $site_dark_gray;
+}
+</style>