sprof 0.1.0

package/src/components/DateInputRange.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="date-range">
+    <PInputDate v-model:model-value="startDate" @change="setStart" />
+    -
+    <PInputDate v-model:model-value="endDate" @change="setEnd" />
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  start: {
+    type: Date,
+    default: undefined,
+  },
+  end: {
+    type: Date,
+    default: undefined,
+  },
+});
+
+const emits = defineEmits(['update:start', 'update:end', 'setStart', 'setEnd']);
+watch(
+  () => [props.start, props.end],
+  () => {
+    if (!props.start) {
+      startDate.value = undefined;
+    }
+    if (!props.end) {
+      endDate.value = undefined;
+    }
+  }
+);
+const startDate = ref(props.start);
+const endDate = ref(props.end);
+
+const setStart = (date: Date) => {
+  startDate.value = date;
+  if (!props.end || date > props.end) {
+    PHelp.Notification.Danger('Дата начала больше даты окончания');
+    return;
+  }
+  emits('update:start', date);
+  emits('setStart', date);
+};
+
+const setEnd = (date: Date) => {
+  endDate.value = date;
+  if (!props.start || date < props.start) {
+    PHelp.Notification.Danger('Дата начала больше даты окончания');
+    return;
+  }
+  emits('update:end', date);
+  emits('setEnd', date);
+};
+</script>
+
+<style scoped lang="scss">
+@import '@/services/assets/styles/index.scss';
+
+.date-range {
+  display: flex;
+  justify-content: space-between;
+  max-width: 100%;
+  // margin: 0 auto;
+}
+</style>

package/src/components/DateInputRange_v2.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="date-range">
+    <slot />
+  </div>
+
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  name: 'DateInputRangeV2',
+});
+</script>
+
+<style scoped lang="scss">
+@import '@/services/assets/styles/index.scss';
+
+.date-range {
+  display: flex;
+  max-width: 300px;
+  justify-content: left;
+}
+
+</style>

package/src/components/DropList.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="drop-item">
+    <div class="drop-item-name" @click="stateСhange()">
+      <PString
+        font-size="13px"
+        font-weight="600"
+        :string="name"
+        justify-content="left"
+        width="auto"
+        margin="0 5px 0 0"
+        padding="6px 0"
+        color="inherit"
+      />
+      <div :style="{ transform: change ? '' : 'rotate(-90deg)', display: 'flex', alignItems: 'center', margin: '0 0 2px 0' }">
+        <IconArrowDrop size="10px" margin="0" />
+      </div>
+    </div>
+    <div v-if="change" class="drop-item-list">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+const props = defineProps({
+  name: { type: String, default: 'Name' },
+  rolledUp: { type: Boolean, default: true }, // начальное состояние списка: свернут или развернут
+});
+
+const change: Ref<boolean> = ref(props.rolledUp);
+
+const stateСhange = async () => {
+  change.value = !change.value;
+};
+</script>
+
+<style lang="scss" scoped>
+.drop-item-name {
+  display: flex;
+  justify-content: left;
+  align-items: center;
+  transition: var(--base-transition, 0s);
+  color: var(--menu-font-color);
+  cursor: pointer;
+  background: var(--menu-background);
+}
+.drop-item-name:hover {
+  color: var(--menu-font-color-hovered);
+  background: var(--menu-background-hovered);
+}
+
+.drop-item-list {
+  transition: 0.3s;
+}
+</style>

package/src/components/Edit.svg

@@ -0,0 +1,10 @@
+<svg width="0" height="0" >
+    <symbol id="edit" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+        <path
+                d="M13 3C9.145 3 6 6.145 6 10C6 12.41 7.23 14.55 9.094 15.813C5.527 17.343 3 20.883 3 25H5C5 20.57 8.57 17 13 17C15.145 17 17.063 17.879 18.5 19.25L13.781 23.969L13.719 24.281L13.031 27.813L12.719 29.281L14.188 28.969L17.718 28.281L18.031 28.219L28.125 18.125C29.285 16.965 29.285 15.035 28.125 13.875C27.5652 13.3197 26.8103 13.0056 26.0218 12.9998C25.2333 12.994 24.4739 13.297 23.906 13.844L19.938 17.813C19.0565 16.9686 18.0292 16.291 16.906 15.813C17.8575 15.1707 18.637 14.3049 19.1764 13.2915C19.7158 12.2782 19.9986 11.148 20 10C20 6.145 16.855 3 13 3ZM13 5C15.773 5 18 7.227 18 10C18 12.773 15.773 15 13 15C10.227 15 8 12.773 8 10C8 7.227 10.227 5 13 5ZM26 15C26.254 15 26.52 15.082 26.719 15.281C26.8134 15.3721 26.8885 15.4813 26.9398 15.6021C26.9911 15.7229 27.0175 15.8528 27.0175 15.984C27.0175 16.1152 26.9911 16.2451 26.9398 16.3659C26.8885 16.4867 26.8134 16.5959 26.719 16.687L17.031 26.375L15.25 26.75L15.625 24.969L25.313 15.281C25.4022 15.1897 25.5092 15.1177 25.6274 15.0693C25.7455 15.021 25.8724 14.9974 26 15Z"
+        ></path>
+        <path
+                d="M13 3C9.145 3 6 6.145 6 10C6 12.41 7.23 14.55 9.094 15.813C5.527 17.343 3 20.883 3 25H5C5 20.57 8.57 17 13 17C15.145 17 17.063 17.879 18.5 19.25L13.781 23.969L13.719 24.281L13.031 27.813L12.719 29.281L14.188 28.969L17.718 28.281L18.031 28.219L28.125 18.125C29.285 16.965 29.285 15.035 28.125 13.875C27.5652 13.3197 26.8103 13.0056 26.0218 12.9998C25.2333 12.994 24.4739 13.297 23.906 13.844L19.938 17.813C19.0565 16.9686 18.0292 16.291 16.906 15.813C17.8575 15.1707 18.637 14.3049 19.1764 13.2915C19.7158 12.2782 19.9986 11.148 20 10C20 6.145 16.855 3 13 3ZM13 5C15.773 5 18 7.227 18 10C18 12.773 15.773 15 13 15C10.227 15 8 12.773 8 10C8 7.227 10.227 5 13 5ZM26 15C26.254 15 26.52 15.082 26.719 15.281C26.8134 15.3721 26.8885 15.4813 26.9398 15.6021C26.9911 15.7229 27.0175 15.8528 27.0175 15.984C27.0175 16.1152 26.9911 16.2451 26.9398 16.3659C26.8885 16.4867 26.8134 16.5959 26.719 16.687L17.031 26.375L15.25 26.75L15.625 24.969L25.313 15.281C25.4022 15.1897 25.5092 15.1177 25.6274 15.0693C25.7455 15.021 25.8724 14.9974 26 15Z"
+        ></path>
+    </symbol>
+</svg>

package/src/components/EmailForm.vue

@@ -0,0 +1,180 @@
+<template>
+  <PInput v-model="model.address" @blur="update" />
+  <PInput v-model="model.description" @blur="update" />
+</template>
+
+<script setup lang="ts">
+import Email from '@/services/classes/Email';
+
+const model: Ref<Email> = defineModel<Email>() as Ref<Email>;
+
+const update = async () => {
+  EmailsStore.Update(model.value);
+};
+</script>
+
+<style lang="scss" scoped>
+@import '@/services/assets/styles/index.scss';
+
+.admin-add {
+  border: none;
+  background: inherit;
+  color: #00b5a4;
+  transition: 0.3s;
+  cursor: pointer;
+}
+
+.admin-add:hover {
+  color: darken($color: #00b5a4, $amount: 10%);
+}
+
+.admin-del {
+  position: absolute;
+  top: 23px;
+  right: 36px;
+  border: none;
+  background: inherit;
+  color: #a3a9be;
+  transition: 0.3s;
+  cursor: pointer;
+}
+
+.admin-del:hover {
+  color: darken($color: #cf3d19, $amount: 5%);
+}
+
+.bottom-buttons {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-right: 15px;
+}
+
+.contact-container {
+  width: calc(100% - 62px);
+  position: relative;
+  padding: 0 10px;
+  border: 1px solid #c3c3c3;
+  border-radius: 5px;
+  margin: 0px 20px 20px 20px;
+  background: #dff2f8;
+}
+
+.contact-container-item {
+  position: relative;
+  width: calc(100% - 42px);
+  margin: 0px 10px 20px 10px;
+  border: 1px solid #c3c3c3;
+  border-radius: 5px;
+  padding: 12px 10px;
+  background: #f9fafb;
+}
+
+.list-number {
+  position: absolute;
+  top: 20px;
+  right: 10px;
+  width: 22px;
+  height: 22px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #ffffff;
+  background: #1979cf;
+  border-radius: 20px;
+}
+
+.title {
+  font-family: 'Open Sans', sans-serif;
+  font-size: 14px;
+  color: #c4c4c4;
+  margin: 10px;
+}
+
+:deep(.el-form-item__content) {
+  width: 100%;
+}
+
+:deep(.el-input__inner) {
+  border-radius: 40px;
+  padding-left: 25px;
+  height: 32px;
+  width: 100%;
+  display: flex;
+  font-family: Comfortaa, Arial, Helvetica, sans-serif;
+  font-size: 15px;
+}
+
+:deep(.el-input__inner::placeholder) {
+  color: #4a4a4a;
+}
+
+:deep(.el-select .el-input .el-select__caret) {
+  color: #343e5c;
+  font-size: 15px;
+  font-weight: bold;
+  margin-right: 5px;
+}
+
+.el-select {
+  width: 100%;
+}
+
+:deep(.el-input__prefix) {
+  left: 230px;
+  top: -3px;
+}
+
+:deep(.el-date-editor.el-input, .el-date-editor.el-input__inner) {
+  width: 100%;
+}
+
+:deep(.el-input__icon) {
+  color: #343e5c;
+}
+
+:deep(.el-input__suffix) {
+  top: -3px;
+}
+
+:deep(.el-form-item__label) {
+  font-size: 12px;
+  color: #a3a9be;
+  padding: 0 !important;
+  text-transform: uppercase;
+  margin-left: 5px;
+  height: 30px;
+}
+
+:deep(.el-input__prefix) {
+  left: auto;
+  right: 10px;
+}
+
+:deep(.el-form-item) {
+  margin-bottom: 10px;
+}
+
+@media screen and (max-width: 400px) {
+  .contact-container {
+    width: calc(100% - 42px);
+    margin: 0px 10px 20px 10px;
+  }
+
+  .contact-container-item {
+    width: calc(100% - 22px);
+    margin: 0px 0px 20px 0px;
+  }
+
+  .admin-del {
+    padding: 1px 0px;
+  }
+
+  .bottom-buttons {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding-right: 5px;
+  }
+}
+</style>

package/src/components/FTSPPanel.vue

@@ -0,0 +1,379 @@
+<template>
+  <PSelect v-model="curFTSP" label="Фильтры" clearable placeholder="Выберите шаблон фильтра" @change="set" @clear="clear">
+    <option v-for="preset in ftspPresets" :key="preset.id" :label="preset.name" :value="preset.id" />
+  </PSelect>
+  <PButton v-if="curFTSP.f.length > 0" type="text" color="add" text="Добавить текущий фильтр в список фильтров" @click="openModal" />
+  <PButton v-if="curFTSP" type="text" color="del" text="Удалить выбранный фильтр из списка фильтров" @click="remove" />
+  <ModalWindow v-if="modalOpened" :show="modalOpened">
+    <PInput v-model="ftspName" label="Введите название" />
+    <PButton type="admin" color="blue" text="Сохранить" @click="save" />
+  </ModalWindow>
+</template>
+
+<script setup lang="ts">
+import FTSPPreset from '@/services/classes/FTSPPreset';
+
+const emit = defineEmits(['change']);
+
+const ftspPresets: FTSPPreset[] = FTSPPresetsStore.Items();
+const modalOpened = ref(false);
+const curFTSP: Ref<FTSP | undefined> = ref(undefined);
+
+const openModal = () => {
+  modalOpened.value = true;
+};
+const ftspName = ref('');
+
+const clear = async () => {
+  curFTSP.value = undefined;
+  FTSP.Get().resetF();
+  emit('change');
+};
+
+const remove = async () => {
+  await FTSPPresetsStore.Remove(curFTSP.value);
+  FTSP.Get().resetF();
+  curFTSP.value = undefined;
+  emit('change');
+};
+
+const set = async (ftspPresetId?: string) => {
+  if (!ftspPresetId) {
+    return;
+  }
+  const preset = ftspPresets.find((f: FTSPPreset) => f.id === ftspPresetId);
+  curFTSP.value = preset?.id;
+  // FTSP.Get().createFrom(preset?.ftsp);
+  emit('change');
+};
+
+const save = async () => {
+  const preset = FTSPPreset.Create(FTSP.Get());
+  preset.name = ftspName.value;
+  ftspName.value = '';
+  await FTSPPresetsStore.Create(preset);
+  FTSPPresetsStore.AppendToAll([preset]);
+  curFTSP.value = preset.id;
+  modalOpened.value = false;
+};
+
+onBeforeMount(async () => {
+  await FTSPPresetsStore.GetAll();
+});
+</script>
+<style lang="scss" scoped>
+@import '@/services/assets/styles/index.scss';
+
+// .filter-save {
+//   position: sticky;
+//   top: 0px;
+//   height: 40px;
+//   width: 100%;
+//   background: #006bb4;
+// }
+
+.admin-add2 {
+  border: none;
+  background: inherit;
+  color: #00b5a4;
+  transition: 0.3s;
+  cursor: pointer;
+  margin-left: -6px;
+}
+
+.admin-add2:hover {
+  color: darken($color: #00b5a4, $amount: 10%);
+}
+
+.admin-del {
+  border: none;
+  background: inherit;
+  color: #a3a9be;
+  transition: 0.3s;
+  cursor: pointer;
+  margin-left: -6px;
+}
+
+.admin-del:hover {
+  color: darken($color: #cf3d19, $amount: 5%);
+}
+
+.filter-field {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 0 0 0 10px;
+  height: calc(100% - 110px);
+  overflow-y: scroll;
+  overflow-x: hidden;
+}
+
+.tools-field {
+  display: block;
+  box-sizing: border-box;
+  width: 100%;
+  padding: 0 8px 10px 10px;
+}
+
+.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(99px, 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;
+  }
+}
+</style>