sprof 0.1.0

package/src/components/SortList.vue

@@ -0,0 +1,101 @@
+<template>
+  <PSelect
+    v-if="mounted"
+    v-model="sortModel"
+    :popper-append-to-body="false"
+    :clearable="!sortModel?.default"
+    value-key="label"
+    @change="setSort"
+    @clear="setSort()"
+  >
+    <option v-for="(item, i) in SortList.Get()" :key="i" :label="item.label" :value="item" />
+  </PSelect>
+</template>
+
+<script lang="ts" setup>
+import SortModel from '@/services/classes/SortModel';
+import SortList from '@/services/SortList';
+
+defineProps({
+  maxWidth: {
+    type: [Number, String],
+    default: 250,
+  },
+});
+
+const mounted = ref(false);
+
+const emits = defineEmits(['load']);
+
+const sortModel: Ref<SortModel | undefined> = ref();
+
+onBeforeMount((): void => {
+  mounted.value = true;
+  sortModel.value = SortList.GetDefault();
+  FTSP.Get().setSortModel(sortModel.value as SortModel);
+});
+
+// watch(setDefaultSortModel, () => setSort());
+
+const changeModel = async (s: SortModel | undefined): Promise<void> => {
+  sortModel.value = s ?? SortList.GetDefault();
+  FTSP.Get().setSortModel(sortModel.value);
+  FTSP.Get().p.drop();
+  emits('load');
+};
+
+const setSort = async (s?: SortModel) => {
+  FTSP.Get().p.drop();
+  await changeModel(s);
+};
+</script>
+
+<style lang="scss" scoped>
+:deep(.el-select__wrapper) {
+  min-height: 38px;
+  margin-top: 7px;
+}
+
+.anticon {
+  margin: 4px 4px 2px 4px;
+  font-size: 13px;
+
+  &:hover {
+    color: #5cb6ff;
+  }
+}
+
+.set {
+  color: #5cb6ff;
+}
+
+:deep(.el-input__inner) {
+  border-radius: 5px;
+  padding-left: 10px;
+  height: 40px;
+  // 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: #4a4a4a;
+  font-size: 16px;
+  font-weight: bold;
+  margin-right: 5px;
+}
+
+.el-select {
+  width: 100%;
+}
+
+// :deep(.el-form-item) {
+//   padding: 10px;
+//   margin: 10px 0 0 0;
+// }
+</style>

package/src/components/SortSelect.vue

@@ -0,0 +1,93 @@
+<template>
+  <PSelect v-model="sortModel" :popper-append-to-body="false" :clearable="!sortModel?.default" value-key="label" @change="setSort">
+    <option v-for="(item, i) in SortList.Get()" :key="i" :label="item.label" :value="item" />
+  </PSelect>
+</template>
+
+<script lang="ts" setup>
+import SortModel from '@/services/classes/SortModel';
+import SortList from '@/services/SortList';
+
+defineProps({
+  maxWidth: {
+    type: [Number, String],
+    default: 250,
+  },
+});
+
+const emits = defineEmits(['load']);
+
+const sortModel: Ref<SortModel | undefined> = ref();
+
+onBeforeMount((): void => {
+  sortModel.value = SortList.GetDefault();
+});
+
+// watch(
+// () => FTSP.Get().resetFlag,
+// () => setSort()
+// );
+
+const changeModel = async (e?: Event): Promise<void> => {
+  if (!e) {
+    sortModel.value = SortList.GetDefault();
+  }
+  FTSP.Get().setSortModel(sortModel.value as SortModel);
+  FTSP.Get().p.drop();
+  emits('load');
+};
+
+const setSort = async (s?: Event) => {
+  await changeModel(s);
+};
+</script>
+
+<style lang="scss" scoped>
+:deep(.el-select__wrapper) {
+  min-height: 38px;
+  margin-top: 7px;
+}
+
+.anticon {
+  margin: 4px 4px 2px 4px;
+  font-size: 13px;
+
+  &:hover {
+    color: #5cb6ff;
+  }
+}
+
+.set {
+  color: #5cb6ff;
+}
+
+:deep(.el-input__inner) {
+  border-radius: 5px;
+  padding-left: 10px;
+  height: 40px;
+  // 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: #4a4a4a;
+  font-size: 16px;
+  font-weight: bold;
+  margin-right: 5px;
+}
+
+.el-select {
+  width: 100%;
+}
+
+// :deep(.el-form-item) {
+//   padding: 10px;
+//   margin: 10px 0 0 0;
+// }
+</style>

package/src/components/SvgIcon.vue

@@ -0,0 +1,25 @@
+<template>
+  <component :is="dynamicComponent" />
+</template>
+
+<script>
+import { defineAsyncComponent } from 'vue';
+// import Edit from '@/assets/svg/Edit.svg?component';
+
+export default {
+  props: {
+    name: {
+      type: String,
+      required: true,
+    },
+  },
+
+  computed: {
+    dynamicComponent() {
+      const name = this.name;
+
+      return defineAsyncComponent(() => import(`../../assets/svg/${name}.svg`));
+    },
+  },
+};
+</script>

package/src/components/Switch3Pos.vue

@@ -0,0 +1,173 @@
+<template>
+  <div class="switch-container">
+    <div class="line">
+      <PString :string="firstModel.label" font-size="12px" padding="0" :style="getStyle(firstModel)" @click="selectModel(firstModel)" />
+      <PString string="Все" font-size="12px" padding="0" :style="getStyle()" @click="selectModel()" />
+      <PString :string="secondModel.label" font-size="12px" padding="0" :style="getStyle(secondModel)" @click="selectModel(secondModel)" />
+    </div>
+    <div class="line">
+      <div
+        class="switch-knob1"
+        :style="getKnobStyle1()"
+        :class="{ active: firstModel.valueEq(filterModel) }"
+        @click="selectModel(firstModel)"
+      />
+      <div class="switch-knob2" :style="getKnobStyle2()" :class="{ active: !filterModel }" @click="selectModel()" />
+      <div
+        class="switch-knob3"
+        :style="getKnobStyle3()"
+        :class="{ active: secondModel.valueEq(filterModel) }"
+        @click="selectModel(secondModel)"
+      />
+
+      <div class="switch-axis"></div>
+      <div class="switch-axis-dash1"></div>
+      <div class="switch-axis-dash2"></div>
+      <div class="switch-axis-dash3"></div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+const props = defineProps({
+  firstModel: {
+    type: Object as PropType<FilterModel>,
+    required: true,
+  },
+  secondModel: {
+    type: Object as PropType<FilterModel>,
+    required: true,
+  },
+  defaultLabel: {
+    type: String as PropType<string>,
+    default: 'Все',
+  },
+});
+const emptyStyle = {
+  background: 'inherit',
+  border: '1px solid #c4c4c4',
+};
+const getKnobStyle1 = () => (props.firstModel.valueEq(filterModel.value) ? undefined : emptyStyle);
+const getKnobStyle2 = () => (filterModel.value ? emptyStyle : undefined);
+const getKnobStyle3 = () => (props.secondModel.valueEq(filterModel.value) ? undefined : emptyStyle);
+
+const getStyle = (model?: FilterModel) => {
+  const color = filterModel.value?.valueEq(model) ? '#006bb4' : '#B0A4C0';
+  return { color: color };
+};
+const emits = defineEmits(['load']);
+const filterModel: Ref<FilterModel | undefined> = ref(undefined);
+
+const selectModel = async (model?: FilterModel): void => {
+  if (filterModel.value?.valueEq(model)) {
+    return;
+  }
+  FTSP.Get().replaceF(model, filterModel.value);
+  filterModel.value = model;
+  emits('load');
+};
+</script>
+
+<style lang="scss" scoped>
+@import '@/services/assets/styles/index.scss';
+
+.active {
+  background: inherit;
+  border: 1px solid #c4c4c4;
+}
+
+.switch-container {
+  width: calc(100% - 2px);
+  height: 74px;
+  border: $light-pink-border;
+  border-radius: $border-radius;
+  background: $base-background;
+}
+
+.line {
+  position: relative;
+  width: calc(100% - 20px);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px;
+}
+
+.line:last-child {
+  margin-top: 5px;
+}
+
+.switch-axis {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translateY(-50%);
+  transform: translateX(-50%);
+  width: calc(100% - 30px);
+  height: 1px;
+  background: #b0a4c0;
+}
+
+.switch-axis-dash1 {
+  position: absolute;
+  top: 6px;
+  left: 14px;
+  width: 1px;
+  height: 9px;
+  background: #b0a4c0;
+}
+
+.switch-axis-dash2 {
+  position: absolute;
+  top: 6px;
+  left: 50%;
+  width: 0.5px;
+  height: 9px;
+  background: #b0a4c0;
+}
+
+.switch-axis-dash3 {
+  position: absolute;
+  top: 6px;
+  right: 14px;
+  width: 1px;
+  height: 9px;
+  background: #b0a4c0;
+}
+
+.switch-knob1 {
+  position: absolute;
+  left: 6px;
+  width: 16px;
+  height: 32px;
+  background: #dff2f8;
+  border-radius: 2px;
+  border: 1px solid #006bb4;
+  z-index: 1;
+  transition: 0.1s;
+}
+
+.switch-knob2 {
+  position: absolute;
+  left: calc(50% - 9px);
+  width: 16px;
+  height: 32px;
+  background: #dff2f8;
+  border-radius: 2px;
+  border: 1px solid #006bb4;
+  z-index: 1;
+  transition: 0.1s;
+}
+
+.switch-knob3 {
+  position: absolute;
+  right: 6px;
+  width: 16px;
+  height: 32px;
+  background: #dff2f8;
+  border-radius: 2px;
+  border: 1px solid #006bb4;
+  z-index: 1;
+  transition: 0.1s;
+}
+</style>

package/src/components/ThemeWrapper.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="flex">
+    <slot />
+  </div>
+</template>
+
+<script lang="ts" setup></script>
+
+<style lang="scss" scoped>
+.flex {
+  width: 100%;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: left;
+  align-items: center;
+  //   background: var(--background-subtle-background-color);
+  padding: 40px;
+}
+</style>

package/src/components/ToggleInfoItem.vue

@@ -0,0 +1,296 @@
+<template>
+  <InfoItem :title="title" icon="edit-title" :with-hover="true" :close="closeToggle" width="100%" @keyup-enter="submit">
+    <PString v-if="content.length > 0" :string="content" />
+    <PString v-else string="Введите данные" color="#B0A4C0" />
+    <template #open-inside-content>
+      <GridContainer custom-class="grid">
+        <slot />
+        <PButton type="admin" color="blue" text="Сохранить" @click="submit" />
+      </GridContainer>
+    </template>
+  </InfoItem>
+</template>
+
+<script lang="ts" setup>
+defineProps({
+  title: {
+    type: String as PropType<string>,
+    required: true,
+  },
+  content: {
+    type: String as PropType<string>,
+    required: true,
+  },
+});
+const closeToggle: Ref<boolean> = ref(false);
+const emit = defineEmits(['submit']);
+
+const submit = async (): Promise<void> => {
+  emit('submit');
+  closeToggle.value = !closeToggle.value;
+};
+</script>
+<style lang="scss" scoped>
+@import '@/services/assets/styles/index.scss';
+
+.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;
+  }
+}
+</style>