sprof 0.0.1

package/src/components/PAutocomplete.vue

@@ -0,0 +1,91 @@
+<template>
+  <div class="container">
+    <PInput v-model="query" placeholder="Найти" @input="input">
+      <template #right>
+        <IconSearch />
+      </template>
+    </PInput>
+    <div v-if="query" class="result">
+      <ul class="list">
+        <li v-for="result in results" :key="result.value" @click="select(result)">{{ result.label }}</li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import ISearchObject from '@/interfaces/ISearchObject';
+
+const emits = defineEmits(['select', 'input']);
+const props = defineProps({
+  modelValue: {
+    type: String as PropType<string>,
+    default: '',
+  },
+  searchFunc: {
+    type: Function,
+    default: () => {},
+  },
+  suggestions: {
+    type: Array<ISearchObject>,
+    default: [],
+  },
+});
+const query = ref(props.modelValue);
+
+defineOptions({ inheritAttrs: false });
+
+const results: Ref<ISearchObject[]> = ref([]);
+async function input() {
+  emits('input', query.value);
+  await fillResults();
+}
+
+async function fillResults() {
+  if (!props.searchFunc) {
+    return;
+  }
+  results.value = await props.searchFunc(query.value);
+}
+
+async function select(item: ISearchObject) {
+  emits('select', item);
+}
+</script>
+
+<style scoped>
+.container {
+  position: relative;
+  widows: 300px;
+  padding: 10px;
+  margin: auto;
+}
+
+.result {
+  position: absolute;
+  top: 50px;
+  left: 10px;
+  z-index: 10000;
+  width: calc(100% - 20px);
+  max-height: 200px;
+  /* border: $normal-border; */
+  background: #fff;
+  border-radius: 5px;
+  overflow: hidden;
+  overflow-y: auto;
+}
+
+.list {
+  list-style-type: none;
+  cursor: pointer;
+}
+
+.list li {
+  margin: 10px 0;
+}
+
+.list li:hover {
+  /* color: $main_blue; */
+  margin: 10px 0;
+}
+</style>

package/src/components/PDialog.vue

@@ -0,0 +1,75 @@
+<template>
+  <transition name="fade">
+    <div v-if="PHelp.Dialog.IsVisible()" :class="typeClass">
+      <MessageBody :title="PHelp.Dialog.GetTitle()" :text="PHelp.Dialog.GetText()" />
+      <div class="footer">
+        <PButton type="primary" :text="PHelp.Dialog.GetConfirmButtonText()" margin="10px 0 0 0" @click="PHelp.Dialog.Submit()" />
+        <PButton type="warning" :text="PHelp.Dialog.GetCancelButtonText()" margin="10px 0 0 0" @click="PHelp.Dialog.Cancel()" />
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script lang="ts" setup>
+const typeClass = computed(() => {
+  switch (PHelp.Dialog.GetType()) {
+    case 'info':
+      return 'message primary';
+    case 'success':
+      return 'message success';
+    case 'warning':
+      return 'message warning';
+    case 'error':
+      return 'message danger';
+    default:
+      return 'message neutral';
+  }
+});
+</script>
+<style scoped>
+.message {
+  position: fixed;
+  top: 0px;
+  left: 50%;
+  z-index: 9999;
+  transform: translateX(-50%);
+  width: 300px;
+  margin: 100px auto 0 auto;
+  border-radius: 5px;
+  box-sizing: border-box;
+  /* border: 1px solid $base-font-color; */
+  min-height: 50px;
+  max-width: 300px;
+  transition: 0.3s;
+  justify-content: center;
+  align-items: center;
+  /* box-shadow: $normal-shadow; */
+  padding: 20px;
+}
+
+.message-title {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: auto;
+  margin: auto;
+}
+
+.message-text {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: auto;
+  margin: auto;
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.5s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>

package/src/components/PLoader.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="blur" />
+  <div class="loader-container">
+    <div class="loader" style="--b: 20px; width: 200px; --n: 10"></div>
+  </div>
+</template>
+
+<script lang="ts" setup></script>
+
+<style scoped>
+.blur {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: #000000;
+  opacity: 0.3;
+  z-index: 1002;
+}
+
+.loader-container {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 1003;
+}
+
+.loader {
+  --b: 10px;
+  /* border thickness */
+  --n: 10;
+  /* number of dashes*/
+  --g: 10deg;
+  /* gap  between dashes*/
+  --c: #ffffff;
+  /* the color */
+
+  width: 30px;
+  /* size */
+  aspect-ratio: 1;
+  border-radius: 50%;
+  padding: 1px;
+  /* get rid of bad outlines */
+  background: conic-gradient(#0000, var(--c)) content-box;
+  --_m:
+    /* we use +/-1deg between colors to avoid jagged edges */ repeating-conic-gradient(
+      #0000 0deg,
+      #000 1deg calc(360deg / var(--n) - var(--g) - 1deg),
+      #0000 calc(360deg / var(--n) - var(--g)) calc(360deg / var(--n))
+    ),
+    radial-gradient(farthest-side, #0000 calc(98% - var(--b)), #000 calc(100% - var(--b)));
+  -webkit-mask: var(--_m);
+  mask: var(--_m);
+  -webkit-mask-composite: destination-in;
+  mask-composite: intersect;
+  animation: load 1s infinite steps(var(--n));
+}
+
+@keyframes load {
+  to {
+    transform: rotate(1turn);
+  }
+}
+</style>

package/src/components/PNotification.vue

@@ -0,0 +1,79 @@
+<template>
+  <transition name="fade">
+    <div v-if="PHelp.Notification.IsVisible()" :class="typeClass">
+      <MessageBody :title="PHelp.Notification.GetTitle()" :text="PHelp.Notification.GetText()" />
+    </div>
+  </transition>
+</template>
+
+<script lang="ts" setup>
+const typeClass = computed(() => {
+  switch (PHelp.Notification.GetType()) {
+    case 'info':
+      return 'message info';
+    case 'success':
+      return 'message success';
+    case 'warning':
+      return 'message warning';
+    case 'error':
+      return 'message error';
+    default:
+      return 'message neutral';
+  }
+});
+</script>
+<style scoped>
+.message {
+  position: fixed;
+  top: 6px;
+  left: 50%;
+  z-index: 9999;
+  transform: translateX(-50%);
+  min-width: 280px;
+  max-width: 600px;
+  margin: 100px auto 0 auto;
+  border-radius: 5px;
+  box-sizing: border-box;
+  border: 1px solid;
+  min-height: 50px;
+  transition: 0.3s;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 5px;
+  padding: 20px;
+  font-size: var(--notification-font-size);
+  font-family: var(--base-font);
+}
+
+.info {
+  background: var(--notification-message-primary-background-color);
+  border-color: var(--notification-message-primary-border-color);
+  color: var(--notification-message-primary-font-color);
+}
+.success {
+  background: var(--notification-message-success-background-color);
+  border-color: var(--notification-message-success-border-color);
+  color: var(--notification-message-success-font-color);
+}
+.warning {
+  background: var(--notification-message-warning-background-color);
+  border-color: var(--notification-message-warning-border-color);
+  color: var(--notification-message-warning-font-color);
+}
+.error {
+  background: var(--notification-message-error-background-color);
+  border-color: var(--notification-message-error-border-color);
+  color: var(--notification-message-error-font-color);
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.5s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>

package/src/components/PPagination.vue

@@ -0,0 +1,171 @@
+<template>
+  <div style="display: flex; justify-content: center; width: 100%">
+    <div
+      class="pag-container"
+      :style="{
+        justifyContent: justifyContent,
+      }"
+    >
+      <div class="pag-number">
+        <PButton skin="pag" :type="notActiveOrNeutral(paginator.curPage === 1)" @click="currentChange(paginator.curPage - 1)">
+          <ArrowLeft />
+        </PButton>
+        <ul class="pag-ul">
+          <li>
+            <PButton skin="pag" :type="activeOrNeutral(paginator.curPage === 1)" text="1" @click="currentChange(1)" />
+          </li>
+          <li v-if="paginator.pagesCount() > 8 && paginator.curPage > 4" @mouseenter="hoveringL = true" @mouseleave="hoveringL = false">
+            <PButton skin="pag" type="neutral" @click="currentChange(paginator.curPage - 5)">
+              <DoubleArrowLeft v-if="hoveringL" />
+              <EllipsisSvg v-else />
+            </PButton>
+          </li>
+          <li v-for="num in pagesNums" :key="num">
+            <PButton skin="pag" :type="activeOrNeutral(num === paginator.curPage)" :text="num" @click="currentChange(num)" />
+          </li>
+          <li
+            v-if="paginator.pagesCount() >= 8 && paginator.curPage < paginator.pagesCount() - 3"
+            @mouseenter="hoveringR = true"
+            @mouseleave="hoveringR = false"
+          >
+            <PButton skin="pag" type="neutral" @click="currentChange(paginator.curPage + 5)">
+              <DoubleArrowRight v-if="hoveringR" />
+              <EllipsisSvg v-else />
+            </PButton>
+          </li>
+          <li v-if="paginator.pagesCount() > 1">
+            <PButton
+              skin="pag"
+              :type="activeOrNeutral(paginator.pagesCount() === paginator.curPage)"
+              :text="paginator.pagesCount()"
+              @click="currentChange(paginator.pagesCount())"
+            />
+          </li>
+        </ul>
+        <PButton
+          skin="pag"
+          :type="notActiveOrNeutral(paginator.curPage === paginator.pagesCount())"
+          @click="currentChange(paginator.curPage + 1)"
+        >
+          <ArrowRight />
+        </PButton>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import IStorePaginator from '@/interfaces/IStorePaginator';
+
+const props = defineProps({
+  showConfirm: {
+    type: Boolean,
+    default: false,
+  },
+  justifyContent: {
+    type: String,
+    default: 'center',
+  },
+  store: {
+    type: Object as PropType<IStorePaginator>,
+    required: true,
+  },
+});
+
+const activeOrNeutral = (isActive: boolean) => (isActive ? 'active' : 'neutral');
+const notActiveOrNeutral = (notActive: boolean) => (notActive ? 'not-active' : 'neutral');
+const paginator = PHelp.Paginator;
+
+const hoveringL = ref(false);
+const hoveringR = ref(false);
+
+const emit = defineEmits(['cancel', 'save']);
+paginator.count = props.store.Count();
+
+const currentChange = async (toPage: number) => {
+  if (toPage === paginator.curPage) {
+    return;
+  }
+  if (toPage < 1) {
+    toPage = 1;
+  }
+  if (toPage > paginator.pagesCount()) {
+    toPage = paginator.pagesCount();
+  }
+  if (!props.showConfirm) {
+    return await setPage(toPage, true);
+  }
+
+  PHelp.Dialog.Save()
+    .then(async () => {
+      emit('save');
+      await setPage(toPage, true);
+    })
+    .catch(async () => {
+      PHelp.Notification.Warning('Изменения не были сохранены');
+      emit('cancel');
+      await setPage(toPage, true);
+    });
+};
+
+const setPage = async (pageNum: number, load: boolean): Promise<void> => {
+  paginator.setCurPage(pageNum);
+  FTSP.Get().p.offset = (pageNum - 1) * paginator.limit;
+  if (load) {
+    await props.store.FTSP();
+  }
+  scrollToBack();
+};
+
+const pagesNums = computed(() => {
+  const pc = paginator.pagesCount();
+  if (pc < 8) {
+    return Arrays.GenerateNumsRange(2, pc - 1).filter((p: number) => p < pc && p > 1);
+  }
+  return Arrays.GenerateNumsRange(paginator.curPage - 2, paginator.curPage + 3).filter((p: number) => p < pc && p > 1);
+});
+
+const scrollToBack = () => {
+  const table = document.querySelector('.el-table__body-wrapper');
+  const list = document.querySelector('#list');
+  if (table) {
+    table.scrollTo({ top: 0 });
+  } else if (list) {
+    list.scrollTo({ top: 0 });
+  }
+};
+
+onBeforeUnmount(() => {
+  FTSP.Get().p.drop();
+});
+</script>
+
+<style scoped>
+.pag-container {
+  display: flex;
+  align-items: center;
+  height: 50px;
+  width: 100%;
+}
+
+.pag-number {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: auto;
+  max-width: 300px;
+  max-height: 32px;
+}
+
+.pag-ul {
+  display: flex;
+  justify-content: center;
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
+
+.registers-tooltip:hover {
+  cursor: pointer;
+}
+</style>

package/src/components/PhoneForm.vue

@@ -0,0 +1,178 @@
+<template>
+  <PInput v-model="model.number" @blur="update" />
+  <PInput v-model="model.description" @blur="update" />
+</template>
+
+<script setup lang="ts">
+import Phone from '@/classes/Phone';
+
+const model: Ref<Phone> = defineModel<Phone>() as Ref<Phone>;
+
+const update = async () => {
+  await PhonesStore.Update(model.value);
+};
+</script>
+
+<style scoped>
+.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>