[DM.Community] Edit profile

frontend/DM.Web.Modern.Temp/src/api/index.ts

@@ -64,21 +64,24 @@ class Api {
   public postFile<T>(
     url: string,
     params?: any,
-    progressCallback?: (event: AxiosProgressEvent) => void,
+    progressCallback?: (event: ProgressEvent) => void,
   ): Promise<ApiResult<T>> {
     const result = this.send<T>(() =>
       this.axios.post(url, params, {
         onUploadProgress: progressCallback
           ? (event: AxiosProgressEvent) =>
               progressCallback(
-                event.loaded === event.total
-                  ? ({ loaded: 99, total: 100 } as AxiosProgressEvent)
-                  : event,
+                (event.loaded === event.total
+                  ? { loaded: 99, total: 100 }
+                  : event) as ProgressEvent,
               )
           : undefined,
+        headers: {
+          "Content-Type": "multipart/form-data",
+        },
       }),
     );
-    progressCallback?.({ loaded: 1, total: 1 } as AxiosProgressEvent);
+    progressCallback?.({ loaded: 1, total: 1 } as ProgressEvent);
     return result;
   }
 

frontend/DM.Web.Modern.Temp/src/api/requests/communityApi.ts

@@ -10,7 +10,6 @@ import type {
 } from "@/api/models/community";
 import Api from "@/api";
 import { BbRenderMode } from "../bbRenderMode";
-import type { AxiosProgressEvent } from "axios";
 import type { Patch, Post } from "@/api/models";
 
 export default new (class CommunityApi {
@@ -47,7 +46,7 @@ export default new (class CommunityApi {
   public uploadUserPicture(
     login: UserLogin,
     files: FormData,
-    progressCallback: (event: AxiosProgressEvent) => void,
+    progressCallback: (event: ProgressEvent) => void,
   ) {
     return Api.postFile<Envelope<User>>(
       `users/${login}/uploads`,

frontend/DM.Web.Modern.Temp/src/assets/styles/Themes.sass

@@ -7,7 +7,7 @@
   @return color-set($light, $light, $light, $light, $dark)
 
 
-$animation-props: background-color, color, border-color, filter
+$animation-props: background-color, color, border-color, filter, opacity
 @mixin theme($attr, $color-set, $value-prefix: null)
   transition-property: $animation-props
   transition-duration: Variables.$animation-time

frontend/DM.Web.Modern.Temp/src/components/index.ts

@@ -20,6 +20,9 @@ import UserOnline from "@/components/community/UserOnline.vue";
 import UserRating from "@/components/community/UserRating.vue";
 import UserIcon from "@/components/community/UserIcon.vue";
 import DmPaging from "@/components/ui-kit/DmPaging.vue";
+import DmIconButton from "@/components/ui-kit/DmIconButton.vue";
+import DmUpload from "@/components/ui-kit/DmUpload.vue";
+import DmProgress from "@/components/ui-kit/DmProgress.vue";
 
 export default function (application: App<Element>) {
   application.config.globalProperties.IconType = IconType;
@@ -29,15 +32,18 @@ export default function (application: App<Element>) {
     .component("DmLoader", DmLoader)
     .component("DmDialog", DmDialog)
     .component("DmPaging", DmPaging)
-    .component("DmMenu", DmMenu);
+    .component("DmMenu", DmMenu)
+    .component("DmProgress", DmProgress);
 
   application
     .component("DmForm", DmForm)
     .component("DmField", DmField)
     .component("DmInput", DmInput)
     .component("DmText", DmText)
     .component("DmDropdown", DmDropdown)
-    .component("DmButton", DmButton);
+    .component("DmUpload", DmUpload)
+    .component("DmButton", DmButton)
+    .component("DmIconButton", DmIconButton);
 
   application
     .component("PageTitle", PageTitle)

frontend/DM.Web.Modern.Temp/src/components/ui-kit/DmButton.vue

@@ -19,7 +19,7 @@ defineProps<{
     }"
   >
     <template v-if="icon" #icon>
-      <DmIcon :font="icon" class="button-icon" />
+      <dm-icon :font="icon" class="button-icon" />
     </template>
   </Button>
 </template>
@@ -37,6 +37,7 @@ defineProps<{
     background-size: Variables.$medium
     background-repeat: no-repeat
     color: transparent !important
+    cursor: progress
 
 .button-icon
   margin-right: Variables.$minor

frontend/DM.Web.Modern.Temp/src/components/ui-kit/DmForm.vue

@@ -3,14 +3,12 @@ defineEmits(["submit"]);
 </script>
 
 <template>
-  <div>
-    <form @submit.prevent="$emit('submit')">
-      <slot />
-      <div class="controls">
-        <slot name="controls" />
-      </div>
-    </form>
-  </div>
+  <form @submit.self.prevent="$emit('submit')">
+    <slot />
+    <div class="controls">
+      <slot name="controls" />
+    </div>
+  </form>
 </template>
 
 <style scoped lang="sass">

frontend/DM.Web.Modern.Temp/src/components/ui-kit/DmIconButton.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { IconType } from "@/components/ui-kit/iconType";
+
+defineProps<{ icon: IconType; loading?: boolean }>();
+</script>
+
+<template>
+  <button :class="['icon-button', loading && 'loading']">
+    <dm-icon :font="icon" />
+  </button>
+</template>
+
+<style scoped lang="sass">
+@use "@/assets/styles/Variables"
+@use "@/assets/styles/Themes"
+@use "@/assets/styles/Layout"
+
+.icon-button
+  +Layout.square(Variables.$grid-step * 5)
+  padding: Variables.$tiny
+  border: none
+
+  +Themes.theme(background-color, Themes.$background)
+  +Themes.theme(color, Themes.$active-text)
+
+  font-size: Variables.$font-size
+  line-height: 1
+  text-align: center
+
+  border-radius: Variables.$medium
+  cursor: pointer
+
+  &:hover
+    +Themes.theme(background-color, Themes.$panel-background-hover)
+    +Themes.theme(color, Themes.$active-text-hover)
+
+  &.loading
+    background-position: center center
+    background-image: url('@/assets/images/loader.gif')
+    background-size: Variables.$medium
+    background-repeat: no-repeat
+    color: transparent !important
+    cursor: progress
+</style>

frontend/DM.Web.Modern.Temp/src/components/ui-kit/DmLoader.vue

@@ -3,7 +3,7 @@ defineProps<{ big?: boolean }>();
 </script>
 
 <template>
-  <span :class="{ loader: true, 'big-loader': big }">&nbsp;</span>
+  <span :class="['loader', big && 'big-loader']">&nbsp;</span>
 </template>
 
 <style scoped lang="sass">
@@ -14,6 +14,7 @@ defineProps<{ big?: boolean }>();
   +Layout.square(Variables.$medium)
   background-image: url('@/assets/images/loader.gif')
   background-size: contain
+  cursor: progress
 
 .big-loader
   +Layout.square(Variables.$big)

frontend/DM.Web.Modern.Temp/src/components/ui-kit/DmMenu.vue

@@ -11,6 +11,7 @@ export type DmMenuItem = {
 };
 const props = defineProps<{
   items: DmMenuItem[];
+  loading?: boolean;
 }>();
 const primeItems = computed<MenuItem[]>(() =>
   props.items.map((item) => ({
@@ -26,10 +27,10 @@ const menu = useTemplateRef("menu");
 
 <template>
   <span>
-    <dm-icon
-      class="menu-button"
+    <dm-icon-button
+      :loading="loading"
+      :icon="IconType.Kebab"
       @click="menu!.toggle($event)"
-      :font="IconType.Kebab"
     />
     <Menu
       ref="menu"
@@ -72,18 +73,6 @@ const menu = useTemplateRef("menu");
     opacity: 0
     transform: translateY(10%)
 
-.menu-button
-  +Layout.square(Variables.$medium)
-  +Themes.theme(background-color, Themes.$background)
-  line-height: Variables.$grid-step * 3
-  text-align: center
-  padding: Variables.$tiny
-  border-radius: Variables.$medium
-  cursor: pointer
-
-  &:hover
-    +Themes.theme(background-color, Themes.$panel-background-hover)
-
 .menu-root
   +Themes.theme(background, Themes.$background)
   +Themes.theme(border, Themes.$border, 1px solid)

frontend/DM.Web.Modern.Temp/src/components/ui-kit/DmPictureUpload.vue

@@ -0,0 +1,114 @@
+<script setup lang="ts">
+import { IconType } from "@/components/ui-kit/iconType";
+import { computed, ref, watch } from "vue";
+
+const props = defineProps<{
+  canUpload: boolean;
+  alt: string;
+  progressEvent: ProgressEvent | null;
+  pictureUrl: string | undefined;
+}>();
+const emit = defineEmits(["upload"]);
+
+const loaded = ref(0);
+const total = ref(0);
+const progress = computed(() =>
+  total.value > 0 ? Math.floor((loaded.value / total.value) * 100) : 0,
+);
+
+const uploading = computed(() => total.value > loaded.value);
+const uploaded = computed(
+  () => total.value > 0 && total.value === loaded.value,
+);
+
+watch(
+  () => props.progressEvent,
+  (progressEvent: ProgressEvent | null) => {
+    if (progressEvent === null) {
+      loaded.value = 0;
+      total.value = 0;
+      return;
+    }
+
+    loaded.value = progressEvent.loaded;
+    total.value = progressEvent.total;
+
+    if (loaded.value === total.value) {
+      setTimeout(() => {
+        loaded.value = 0;
+        total.value = 0;
+      }, 2000);
+    }
+  },
+);
+</script>
+
+<template>
+  <div class="picture_upload-container">
+    <img :src="props.pictureUrl" class="picture_upload-picture" :alt="alt" />
+    <template v-if="canUpload">
+      <span :class="['picture_upload-status', !uploading && !uploaded && 'picture_upload-status-ready']">
+        <template v-if="uploading">
+          <dm-progress
+            class="picture_upload-progress"
+            :goal="total"
+            :current="loaded"
+            >{{ progress }}%</dm-progress
+          >
+        </template>
+        <template v-else-if="uploaded">
+          <dm-icon :font="IconType.Tick" />&nbsp;Изображение загружено
+        </template>
+        <template v-else>
+          <dm-icon :font="IconType.Upload" />&nbsp;Загрузить изображение
+        </template>
+      </span>
+      <dm-upload
+        v-if="!uploading"
+        @upload="(picture: FormData) => emit('upload', picture)"
+      />
+    </template>
+  </div>
+</template>
+
+<style scoped lang="sass">
+@use "@/assets/styles/Variables"
+@use "@/assets/styles/Themes"
+
+.picture_upload-container
+  position: relative
+
+.picture_upload-picture
+  width: 100%
+  max-height: Variables.$grid-step * 200
+  border-radius: Variables.$border-radius
+
+.picture_upload-status
+  display: flex
+  align-items: center
+  justify-content: center
+
+  position: absolute
+  bottom: 0
+  left: 0
+  right: 0
+  height: Variables.$grid-step * 10
+  padding: 0 Variables.$small
+
+  +Themes.theme(background-color, Themes.$shade-background)
+  +Themes.theme(color, Themes.$shade-text)
+  text-align: center
+
+  border-bottom-left-radius: Variables.$border-radius
+  border-bottom-right-radius: Variables.$border-radius
+
+  &.picture_upload-status-ready
+    opacity: 0
+
+.picture_upload-container:hover .picture_upload-status-ready
+  opacity: 1
+
+.picture_upload-progress
+  margin: 0
+  flex-grow: 1
+</style>

frontend/DM.Web.Modern.Temp/src/components/ProgressBar.vue → frontend/DM.Web.Modern.Temp/src/components/ui-kit/DmProgress.vue

@@ -20,7 +20,7 @@ const progress = computed(() => (props.current / props.goal) * 100);
   position: relative
   overflow: hidden
   margin: Variables.$small 0
-  padding: Variables.$small
+  padding: Variables.$minor Variables.$small
   border-radius: Variables.$border-radius
   +Themes.theme(background-color, Themes.$progress-background)
 

frontend/DM.Web.Modern.Temp/src/components/ui-kit/DmText.vue

@@ -8,12 +8,12 @@ defineProps<{
   disabled?: boolean;
   placeholder?: string;
   readonly?: boolean;
+  rows?: number;
 }>();
 
 const isFilled = computed(() => !!model.value);
 
 const dispatchSubmit = (nativeInput: HTMLInputElement) => {
-  console.log(nativeInput);
   const event = new Event("submit");
   nativeInput.form?.dispatchEvent(event);
 };
@@ -25,10 +25,10 @@ const dispatchSubmit = (nativeInput: HTMLInputElement) => {
     <text-area
       :id="id"
       v-model="model"
-      rows="5"
       auto-resize
       :disabled="disabled"
       :readonly="readonly"
+      :rows="rows"
       @keydown.meta.enter.prevent="
         dispatchSubmit($event.target! as HTMLInputElement)
       "