v3

src/pages/AccountChangeEmailPage.vue

@@ -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>

src/pages/AccountChangePasswordPage.vue

@@ -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>

src/pages/AccountPage.vue

@@ -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
+      <q-list separator>
+        <q-item
+          v-for="item in items"
+          :key="item.id"
+          @click="goTo(item.pathName)"
+          clickable
+          v-ripple
           >
-          <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 avatar>
+              <q-avatar
+                :icon="item.icon"
+                :color="item.iconColor ? item.iconColor: 'brand'"
+                text-color="white"
+                rounded
+                font-size ="26px"
+              />
             </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-item
-              v-for="item in payment"
-              :key="item.id"
-              >
-                <q-radio
-                v-model="paymentSelect"
-                :val="item.stars"
-                dense
-                >
-                  <option-payment
-                    :qty="item.qty"
-                    :stars="item.stars"
-                    :discount="item.discount"
-                  />
-                </q-radio>
-              </q-item>
-            </q-list>
-
-          </div>
-        </div>
-      </div>
+            <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>
     </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>

src/pages/CompanyMaskPage.vue

@@ -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>

src/pages/CompanyYourPage.vue

@@ -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>

src/pages/PrivacyPage.vue

@@ -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>

src/pages/ProjectPage.vue

@@ -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,17 +19,18 @@
         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>
 
     <template #footer>
-      <q-footer class="bg-grey-1 text-grey"> 
+      <q-footer class="bg-grey-1 text-grey">
         <q-tabs
           style = "z-index: 1000"
           v-model="tabSelect"
           dense
           align="justify"
+          id="tabs"
           >
           <q-route-tab
             v-for="tab in tabs"
@@ -60,13 +64,18 @@
 </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>

src/pages/SubscribePage.vue

@@ -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>

src/pages/TermsPage.vue

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