This commit is contained in:
2025-04-18 23:36:23 +03:00
parent 7e798a7a83
commit c8f3c9801f
25 changed files with 380 additions and 315 deletions

View File

@@ -2,8 +2,7 @@
"recommendations": [
"dbaeumer.vscode-eslint",
"editorconfig.editorconfig",
"vue.volar",
"wayou.vscode-todo-highlight"
"vue.volar"
],
"unwantedRecommendations": [
"octref.vetur",

Binary file not shown.

View File

@@ -1,6 +1,6 @@
<template>
<div
class="qty-card glossy text-white flex column items-center q-ma-xs"
class="qty-card glossy text-white flex column items-center"
:style="{ backgroundColor: bgColor }"
>
<div class="qty-card-title q-pa-none text-caption col-grow">

View File

@@ -81,7 +81,6 @@
const password = ref<string>('')
async function goProjects() {
console.log('go to projects')
await router.push({ name: 'projects' })
}
</script>

View File

@@ -64,13 +64,21 @@
</q-list>
</pn-scroll-list>
</div>
<q-page-sticky
:style="{ zIndex: !showOverlay ? 'inherit' : '5100 !important' }"
position="bottom-right"
:offset="[18, 18]"
:style="{ zIndex: !showOverlay ? 'inherit' : '5100 !important' }"
>
<transition
appear
enter-active-class="animated slideInUp"
>
<q-fab
v-if="showFab"
v-if="fixShowFab"
icon="add"
color="brand"
direction="up"
@@ -103,10 +111,12 @@
</q-item>
</template>
</q-fab-action>
</q-fab>
</transition>
</q-page-sticky>
<pn-overlay v-if="showOverlay"/>
</div>
<q-dialog v-model="showDialogDeleteChat" @before-hide="onDialogBeforeHide()">
<q-card class="q-pa-none q-ma-none">
<q-card-section align="center">
@@ -138,9 +148,13 @@
</template>
<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { ref, computed, watch } from 'vue'
import { useChatsStore } from 'stores/chats'
const props = defineProps<{
showFab: boolean
}>()
const search = ref('')
const showOverlay = ref<boolean>(false)
const chatsStore = useChatsStore()
@@ -200,15 +214,17 @@
currentSlideEvent.value = null
}
const showFab = ref(false)
// fix fab jumping
const fixShowFab = ref(true)
const showFabFixTrue = () => fixShowFab.value = true
onMounted(() => {
setTimeout(() => showFab.value = true, 500)
})
onUnmounted(() => {
showFab.value = false
})
watch(() => props.showFab, (newVal) => {
const timerId = setTimeout(showFabFixTrue, 700)
if (newVal === false) {
clearTimeout(timerId)
fixShowFab.value = false
}
}, {immediate: true})
</script>
<style scoped>
@@ -231,4 +247,10 @@
align-self: center;
height: 98%;
}
.fix-fab {
top: calc(100vh - 92px);
left: calc(100vw - 92px);
padding: 18px;
}
</style>

View File

@@ -58,13 +58,18 @@
position="bottom-right"
:offset="[18, 18]"
>
<transition
appear
enter-active-class="animated slideInUp"
>
<q-btn
v-if="fixShowFab"
fab
icon="add"
color="brand"
@click="createCompany()"
v-if="showFab"
/>
</transition>
</q-page-sticky>
</div>
<q-dialog v-model="showDialogDeleteCompany" @before-hide="onDialogBeforeHide()">
@@ -98,11 +103,15 @@
</template>
<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { ref, computed, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useCompaniesStore } from 'stores/companies'
import { parseIntString } from 'boot/helpers'
const props = defineProps<{
showFab: boolean
}>()
const router = useRouter()
const route = useRoute()
const companiesStore = useCompaniesStore()
@@ -159,15 +168,17 @@
currentSlideEvent.value = null
}
const showFab = ref(false)
// fix fab jumping
const fixShowFab = ref(false)
const showFabFixTrue = () => fixShowFab.value = true
onMounted(() => {
setTimeout(() => showFab.value = true, 500)
})
onUnmounted(() => {
showFab.value = false
})
watch(() => props.showFab, (newVal) => {
const timerId = setTimeout(showFabFixTrue, 500)
if (newVal === false) {
clearTimeout(timerId)
fixShowFab.value = false
}
}, {immediate: true})
</script>

View File

@@ -53,6 +53,7 @@
<script setup lang="ts">
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
defineOptions({ inheritAttrs: false })
const router = useRouter()
const search = ref('')

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,17 @@
<template>
<pn-page-card>
<template #title>
<div class="col-grow">
{{$t('account__change_password')}}
</div>
</template>
<pn-scroll-list>
<account-helper :type />
</pn-scroll-list>
</pn-page-card>
</template>
<script setup lang="ts">
import accountHelper from 'components/admin/accountHelper.vue'
const type = 'change'
</script>

View File

@@ -0,0 +1,17 @@
<template>
<pn-page-card>
<template #title>
<div class="col-grow">
{{$t('account__change_password')}}
</div>
</template>
<pn-scroll-list>
<account-helper :type />
</pn-scroll-list>
</pn-page-card>
</template>
<script setup lang="ts">
import accountHelper from 'components/admin/accountHelper.vue'
const type = 'change'
</script>

View File

@@ -19,258 +19,70 @@
</span>
</div>
</div>
<q-btn flat icon="mdi-logout"/>
</div>
</template>
<pn-scroll-list>
<div class="w100 flex column items-center q-pb-md q-pt-sm q-px-md" >
<div class="flex w100 justify-between items-center q-pl-sm">
<div class="text-caption text-bold">
{{ $t('account__user_settings') }}</div>
<q-btn
@click = "goProjects()"
flat round
color="primary"
icon="mdi-check"
/>
</div>
<q-transition-group
tag="div"
class="flex w100 company-container"
enter-active-class="animate__animated animate__fadeIn"
leave-active-class="animate__animated animate__fadeOut"
appear
>
<template v-if="company">
<pn-image-selector
key="image"
class="q-mr-sm company-logo"
:size="40"
:iconsize="40"
/>
</template>
<q-input
key="input"
v-model="company"
dense
filled
class="q-mb-md col-grow company-input"
:label="$t('account__your_company')"
:style="{ marginLeft: !company ? '0' : '48px', transition: 'all 0.3s' }"
/>
</q-transition-group>
<q-expansion-item
dense
id="warning"
class="q-mt-sm w100 q-pa-sm"
style="border: solid 1px var(--q-warning)"
>
<template #header>
<q-item-section>
<div class="flex row w100 items-center">
<q-icon name="mdi-alert-decagram-outline" color="warning " size="sm" />
<span class="q-pl-xs">{{$t('account__change_auth')}}</span>
</div>
</q-item-section>
</template>
<q-card class="q-pa-none">
<q-card-section class="q-pa-sm">
<div class="flex justify-center column">
<span>{{$t('account__change_auth_message_1')}}</span>
<span>{{$t('account__change_auth_message_2')}}</span>
<div class="flex justify-end">
<q-btn
@click="showChangeAuthDialog = true"
flat
color="primary"
no-caps
class="q-pb-none"
>
{{$t('account__change_auth_btn')}} &#9658;
</q-btn>
</div>
</div>
</q-card-section>
</q-card>
</q-expansion-item>
<div id="qty_chats" class="flex column q-pt-lg w100 q-pl-sm">
<div class="text-caption text-bold flex items-center">
<span>{{ $t('account__chats') }}</span>
</div>
<div class="flex row justify-between">
<qty-chat-card
v-for = "chat in chats"
:key = chat.title
:qty = chat.qty
:bgColor = chat.color
:title = chat.title
/>
</div>
</div>
<div id="subscribe" class="flex column q-pt-lg w100 q-pl-sm">
<div class="text-caption text-bold">
{{ $t('account__subscribe') }}
</div>
<q-item class="q-pa-sm text-caption">
<q-item-section
avatar
class="q-pr-none"
:style="{ minWidth: 'inherit !important' }"
>
<q-icon name = "mdi-crown-circle-outline" color="orange" size="md"/>
</q-item-section>
<q-item-section class="q-pl-sm">
<span>{{ $t('account__subscribe_info') }}</span>
<span>{{ $t('account__subscribe_select_payment_1') }}</span>
<q-icon name = "mdi-star" class="text-orange" size="sm"/>
<span>{{ $t('account__subscribe_select_payment_2') }}</span>
</q-item-section>
</q-item>
<div class="flex w100 justify-between items-center no-wrap q-pt-sm">
<div class="flex column">
<div>
{{ $t('account__subscribe_current_balance') }}
</div>
</div>
<div class="flex items-center">
<q-icon name = "mdi-crown-circle-outline" color="orange" size="sm"/>
<div class="text-bold q-pa-xs text-h6">
50
</div>
</div>
</div>
<div id="payment-selector">
<div class="q-py-sm">
</div>
<q-list>
<q-list separator>
<q-item
v-for="item in payment"
v-for="item in items"
:key="item.id"
@click="goTo(item.pathName)"
clickable
v-ripple
>
<q-radio
v-model="paymentSelect"
:val="item.stars"
dense
>
<option-payment
:qty="item.qty"
:stars="item.stars"
:discount="item.discount"
<q-item-section avatar>
<q-avatar
:icon="item.icon"
:color="item.iconColor ? item.iconColor: 'brand'"
text-color="white"
rounded
font-size ="26px"
/>
</q-radio>
</q-item-section>
<q-item-section>
<q-item-label>
{{ $t(item.name) }}
</q-item-label>
<q-item-label class="text-caption">
{{ $t(item.description) }}
</q-item-label>
</q-item-section>
</q-item>
</q-list>
</div>
</div>
</div>
</pn-scroll-list>
<q-dialog v-model="showChangeAuthDialog">
<q-card>
<q-card-section align="center">
<div class="text-h6 text-negative ">{{ $t('account__change_auth_warning') }}</div>
</q-card-section>
<q-card-section class="q-pt-none" align="center">
{{ $t('account__change_auth_warning_message') }}
</q-card-section>
<q-card-actions align="center">
<q-btn
flat
:label="$t('back')"
color="primary"
v-close-popup
/>
<q-btn
flat
:label="$t('continue')"
color="primary"
v-close-popup
@click="change_auth()"
/>
</q-card-actions>
</q-card>
</q-dialog>
</pn-page-card>
</template>
<script setup lang="ts">
import { ref, inject } from 'vue'
import qtyChatCard from 'components/admin/account-page/qtyChatCard.vue'
import optionPayment from 'components/admin/account-page/optionPayment.vue'
import { inject, computed } from 'vue'
import { useRouter } from 'vue-router'
import { useAuthStore } from 'stores/auth'
// import { useAuthStore } from 'stores/auth'
import type { WebApp } from '@twa-dev/types'
const router = useRouter()
const authStore = useAuthStore()
// const authStore = useAuthStore()
const tg = inject('tg') as WebApp
const tgUser = tg.initDataUnsafe.user
const company = ref<string>('')
const showChangeAuthDialog = ref<boolean>(false)
const chats = ref([
{ title: 'account__chats_active', qty: 8, color: 'var(--q-primary)' },
{ title: 'account__chats_archive', qty: 2, color: 'grey' },
{ title: 'account__chats_free', qty: 5, color: 'green' },
{ title: 'account__chats_total', qty: 15, color: 'var(--q-info)' },
])
const payment=ref([
{ id: 1, qty: 50, stars: 200, discount: 0 },
{ id: 2, qty: 120, stars: 400, discount: 20 },
{ id: 3, qty: 220, stars: 500, discount: 30 }
])
const items = computed(() => ([
{ id: 1, name: 'account__subscribe', description: 'account__subscribe_description', icon: 'mdi-crown-circle-outline', iconColor: 'orange', pathName: 'subscribe' },
{ id: 2, name: 'account__auth_change_method', description: 'account__auth_change_method_description', icon: 'mdi-account-sync-outline', iconColor: 'primary', pathName: '' },
{ id: 3, name: 'account__auth_change_password', description: 'account__auth_change_password_description', icon: 'mdi-account-key-outline', iconColor: 'primary', pathName: 'change_account_password' },
{ id: 4, name: 'account__auth_change_account', description: 'account__auth_change_account_description', icon: 'mdi-account-switch-outline', iconColor: 'primary', pathName: 'change_account_email' },
{ id: 5, name: 'account__company_data', icon: 'mdi-account-group-outline', description: 'account__company_data_description', pathName: 'your_company' },
{ id: 6, name: 'account__support', icon: 'mdi-lifebuoy', description: 'account__support_description', iconColor: 'info', pathName: 'support' },
{ id: 7, name: 'account__terms_of_use', icon: 'mdi-book-open-variant-outline', description: '', iconColor: 'grey', pathName: 'terms' },
{ id: 8, name: 'account__privacy', icon: 'mdi-lock-outline', description: '', iconColor: 'grey', pathName: 'privacy' }
]))
const paymentSelect = ref(200)
async function change_auth () {
console.log('update')
console.log(authStore)
await router.push({ name: 'login' })
}
async function goProjects () {
await router.push({ name: 'projects' })
async function goTo (path: string) {
await router.push({ name: path })
}
</script>
<style lang="scss">
#warning {
& >div .q-item {
padding: 0 !important;
}
}
</style>
<style scoped>
.company-container {
position: relative;
overflow: hidden;
min-height: 60px;
}
.company-logo {
position: absolute;
left: 0;
z-index: 1;
}
:deep(.animate__animated) {
--animate-duration: 0.4s;
animation-fill-mode: both;
}
</style>

View File

@@ -19,11 +19,8 @@
</div>
</q-item-section>
<q-item-section></q-item-section>
<q-item-section align="end">
<q-item-section align="end" class="col-grow">
{{ $t('mask__title_table') }}
<span class="text-caption">
{{ $t('mask__title_table2') }}
</span>
</q-item-section>
</q-item>
<q-item
@@ -91,7 +88,10 @@
<q-dialog v-model="showDialogHelp">
<q-card class="q-ma-sm w100">
<q-card-section class="row items-center q-pb-none">
<div class="text-h6">{{ $t('mask__help_title')}}</div>
<span class="text-h6">
<q-icon name="mdi-drama-masks"/>
{{ $t('mask__help_title')}}
</span>
<q-space />
<q-btn icon="close" flat round dense v-close-popup />
</q-card-section>

View File

@@ -0,0 +1,39 @@
<template>
<pn-page-card>
<template #title>
<div class="flex items-center justify-between col-grow">
<div>
{{$t('Your_company__title_card')}}
</div>
<q-btn
v-if="(Object.keys(companyMod).length !== 0)"
@click = "addCompany(companyMod)"
flat round
icon="mdi-check"
/>
</div>
</template>
<pn-scroll-list>
<company-info-block v-model="companyMod"/>
</pn-scroll-list>
</pn-page-card>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import companyInfoBlock from 'components/admin/companyInfoBlock.vue'
import { useCompaniesStore } from 'stores/companies'
import type { Company } from 'src/types'
const router = useRouter()
const companiesStore = useCompaniesStore()
const companyMod = ref(<Company>{})
function addCompany (data: Company) {
companiesStore.addCompany(data)
router.go(-1)
}
</script>

22
src/pages/PrivacyPage.vue Normal file
View File

@@ -0,0 +1,22 @@
<template>
<pn-page-card>
<template #title>
<div class="flex items-center justify-between col-grow">
<div>
{{ $t('privacy__title') }}
</div>
</div>
</template>
<pn-scroll-list>
{{ $t('under_construction') }}
</pn-scroll-list>
</pn-page-card>
</template>
<script setup lang="ts">
</script>
<style>
</style>

View File

@@ -7,6 +7,9 @@
<q-tab-panels
v-model="tabSelect"
animated
keep-alive
@before-transition="showFab = false"
@transition="showFab = true"
class="tab-panel-color full-height-panel w100 flex column col-grow no-scroll"
>
<q-tab-panel
@@ -16,7 +19,7 @@
class="q-pa-none flex column col-grow no-scroll"
style="flex-grow: 2"
>
<component :is="tab.component"/>
<component :is="tab.component" :showFab = "tab.name === tabSelect" />
</q-tab-panel>
</q-tab-panels>
@@ -27,6 +30,7 @@
v-model="tabSelect"
dense
align="justify"
id="tabs"
>
<q-route-tab
v-for="tab in tabs"
@@ -60,12 +64,17 @@
</template>
<script setup lang="ts">
import { ref, computed } from 'vue'
import { ref, onBeforeMount, computed } from 'vue'
import { useProjectsStore } from 'stores/projects'
import projectPageHeader from 'components/admin/project-page/ProjectPageHeader.vue'
import projectPageChats from 'components/admin/project-page/ProjectPageChats.vue'
import projectPageCompanies from 'components/admin/project-page/ProjectPageCompanies.vue'
import projectPagePersons from 'components/admin/project-page/ProjectPagePersons.vue'
import { useRoute } from 'vue-router'
const route = useRoute()
const showFab = ref<boolean>(false)
const projectStore = useProjectsStore()
const currentProject = computed(() => projectStore.getCurrentProject() )
@@ -82,7 +91,12 @@
{name: 'companies', label: 'project__companies', icon: 'mdi-account-group-outline', component: tabComponents.projectPageCompanies, to: { name: 'companies'} },
]
const tabSelect = ref<string>(tabs[0]?.name ? tabs[0]?.name : '')
const tabSelect = ref<string>()
onBeforeMount(() => {
const initialTab = tabs.find(t => t.to.name === route.name)?.name || tabs[0]?.name || ''
tabSelect.value = initialTab
})
</script>
@@ -101,4 +115,11 @@
flex-grow: 2;
width: 100%
}
</style>
<style scoped>
#tabs :deep(.q-tab__indicator) {
height: 3px !important;
}
</style>

View File

@@ -0,0 +1,82 @@
<template>
<pn-page-card>
<template #title>
<div class="flex items-center justify-between col-grow">
<div>
{{$t('subscribe__title')}}
</div>
</div>
</template>
<pn-scroll-list class="q-px-md">
<div id="subscribe-current-balance" class="flex w100 justify-between items-center no-wrap text-h6">
<span>
{{ $t('subscribe__current_balance') }}
</span>
<div class="flex items-center">
<q-icon name = "mdi-crown-circle-outline" color="orange" size="sm"/>
<div class="text-bold q-pa-xs ">
50
</div>
</div>
</div>
<div id="subscribe-need-tocken" :style = "{ borderLeft: 'solid 5px var(--q-info)' }" class="q-pl-sm">
<q-icon name = "mdi-crown-circle-outline" color="orange" size="xs"/>{{ $t('subscribe__token_formula') }}
<div class="text-caption">{{ $t('subscribe__token_formula_description') }}</div>
</div>
<div id="qty_chats" class="flex column q-pt-lg w100">
<div class="text-h6 flex items-center">
<span>{{ $t('account__chats') }}</span>
</div>
<div class="flex row justify-between">
<qty-chat-card
v-for = "chat in chats"
:key = chat.title
:qty = chat.qty
:bgColor = chat.color
:title = chat.title
/>
</div>
</div>
</pn-scroll-list>
</pn-page-card>
</template>
<script setup lang="ts">
import { ref, inject, computed } from 'vue'
// import { useRouter } from 'vue-router'
// import { useAuthStore } from 'stores/auth'
// import type { WebApp } from '@twa-dev/types'
import qtyChatCard from 'components/admin/account-page/qtyChatCard.vue'
// import optionPayment from 'components/admin/account-page/optionPayment.vue'
// const router = useRouter()
// const authStore = useAuthStore()
// const tg = inject('tg') as WebApp
// const tgUser = tg.initDataUnsafe.user
const chats = ref([
{ title: 'account__chats_active', qty: 8, color: 'var(--q-primary)' },
{ title: 'account__chats_unbound', qty: 2, color: 'grey' },
{ title: 'account__chats_free', qty: 5, color: 'green' },
{ title: 'account__chats_total', qty: 15, color: 'var(--q-info)' },
])
/* const payment=ref([
{ id: 1, qty: 50, stars: 200, discount: 0 },
{ id: 2, qty: 120, stars: 400, discount: 20 },
{ id: 3, qty: 220, stars: 500, discount: 30 }
]) */
</script>
<style lang="scss">
</style>

View File

@@ -9,7 +9,7 @@
</template>
<pn-scroll-list>
Фигня которую никто не читает!
{{ $t('under_construction') }}
</pn-scroll-list>
</pn-page-card>
</template>

View File

@@ -33,7 +33,7 @@ export default defineRouter(function (/* { store, ssrContext } */) {
history: createHistory(process.env.VUE_ROUTER_BASE),
})
const publicPaths = ['/login', '/terms-of-use', '/create-account', '/recovery-password']
const publicPaths = ['/login', '/create-account', '/recovery-password']
Router.beforeEach(async (to) => {
const authStore = useAuthStore()

View File

@@ -27,7 +27,7 @@ const routes: RouteRecordRaw[] = [
{
name: 'project_add',
path: '/project/add',
component: () => import('pages/CreateProjectPage.vue')
component: () => import('pages/ProjectCreatePage.vue')
},
{
@@ -94,9 +94,38 @@ const routes: RouteRecordRaw[] = [
{
name: 'create_account',
path: '/create-account',
component: () => import('pages/CreateAccountPage.vue')
component: () => import('src/pages/AccountCreatePage.vue')
},
{
name: 'change_account_password',
path: '/change-password',
component: () => import('pages/AccountChangePasswordPage.vue')
},
{
name: 'change_account_email',
path: '/change-email',
component: () => import('pages/AccountChangeEmailPage.vue')
},
{
name: 'subscribe',
path: '/subscribe',
component: () => import('pages/SubscribePage.vue')
},
{
name: 'terms',
path: '/terms-of-use',
component: () => import('pages/TermsPage.vue')
},
{
name: 'privacy',
path: '/privacy',
component: () => import('pages/PrivacyPage.vue')
},
{
name: 'your_company',
path: '/your-company',
component: () => import('src/pages/CompanyYourPage.vue')
},
{
name: 'login',
path: '/login',
@@ -106,13 +135,13 @@ const routes: RouteRecordRaw[] = [
{
name: 'recovery_password',
path: '/recovery-password',
component: () => import('pages/ForgotPasswordPage.vue')
component: () => import('src/pages/AccountForgotPasswordPage.vue')
},
{
name: 'add_company',
path: '/add-company',
component: () => import('pages/CreateCompanyPage.vue')
component: () => import('src/pages/CompanyCreatePage.vue')
},
{
@@ -125,12 +154,6 @@ const routes: RouteRecordRaw[] = [
name: 'settings',
path: '/settings',
component: () => import('pages/SettingsPage.vue')
},
{
name: 'terms',
path: '/terms-of-use',
component: () => import('pages/TermsPage.vue')
}
]
},

View File

@@ -4,8 +4,7 @@
+ Окно "Забыли пароль?"
+ Надпись "Неправильный логин или пароль"
+ Окно "Регистрация нового пользователя"
- Переводы
+ Верификация e-mail (не делать - плохо выглядит)
+ Верификация поля ввода e-mail (не делать - плохо выглядит)
2. Account:
+ Работа с изображением логотипа компании
@@ -34,6 +33,7 @@
+ Настроить роутинг
+ У чатов добавить кол-во пользователей
- У чатов добавить указание владельца чата и его компанию
- Удаление чата свайпом и отключенные чаты.
4.3 ProjectPage - Люди:
- Перечень сотрудников
@@ -54,7 +54,7 @@
5. Settings:
- Роутинг
- Переключатель языков
- Встроить в Телеграмм
+ Встроить в Телеграмм
6. Лицензионное соглашение:
- Роутинг и заготовка
@@ -62,7 +62,7 @@
- Встроить в Телеграмм
BUGS:
- 1. Прыгает кнопка fab при перещелкивании табов
+- 1. Прыгает кнопка fab при перещелкивании табов (при быстром переключении все равно прыгает, проблема установлена в q-page-sticky -как-то некорректно отрабатывается bottom и right)
+ 2. Верстка в шапке Projects плохая - переделать
- 3. Не хватает перевода местами
+ 4. При нажатии Back браузера скидывается активная табка.
@@ -73,7 +73,7 @@ Need refactor
Current ToDo:
+ 1. pinia
+ 2. Реализовать функционал меню - редактирование проекта. (Бекар на потом)
+ 2. Реализовать функционал меню - редактирование проекта. (Бекап на потом)
+ 3. Архивные чаты и проекты. (Чаты отказался)
+4. Добавление компании.
+ 5. Удаление компании (слайдер), как в чате.