first commit

src/pages/PersonInfoPage.vue

@@ -0,0 +1,112 @@
+<template>
+    <pn-page-card>
+    <template #title>
+      <div class="flex items-center justify-between col-grow">
+        <div>
+          {{ $t('person_card__title') }}
+        </div>
+        <q-btn
+          @click = "goProject()"
+          flat round
+          icon="mdi-check"
+        />
+      </div>
+    </template>
+
+    <pn-scroll-list>
+      <div class="flex column">
+        <div class="flex column items-center col-grow q-pa-lg">
+          <q-avatar size="100px">
+            <q-img :src="person.logo"/>
+          </q-avatar>
+          <div class="flex row items-start justify-center no-wrap">
+
+            <div class="flex column justify-center">
+              <div class="text-bold q-pr-xs text-center">{{ person.tname }}</div>
+              <div caption class="text-blue text-caption">{{ person.tusername }}</div>
+            </div>
+          </div>
+
+          <q-input
+            v-model="person.name"
+            dense
+            filled
+            class = "q-my-sm w100"
+            :label = "$t('person_card__name')"
+          />
+
+          <q-select
+            v-if="companies"
+            v-model="person.company"
+            :options="companies"
+            dense
+            filled
+            class="q-my-sm w100"
+            :label = "$t('person_card__company')"
+            >
+            <template #option="scope">
+              <q-item v-bind="scope.itemProps">
+                <q-item-section avatar>
+                  <q-avatar rounded size="md">
+                    <img v-if="scope.opt.logo" :src="scope.opt.logo"/>
+                    <pn-auto-avatar v-else :name="scope.opt.name"/>
+                  </q-avatar>   
+                </q-item-section>
+                <q-item-section>
+                  <q-item-label>{{ scope.opt.name }}</q-item-label>
+                </q-item-section>
+              </q-item>
+            </template>
+            <template v-slot:selected>
+                {{ JSON.parse(JSON.stringify(person.company)).name }}
+            </template>
+          </q-select>
+
+          <q-input
+            v-model="person.department"
+            dense
+            filled
+            class = "q-my-sm w100"
+            :label = "$t('person_card__department')"
+          />
+
+          <q-input
+            v-model="person.role"
+            dense
+            filled
+            class = "q-my-sm w100"
+            :label = "$t('person_card__role')"
+          />
+        </div>
+      </div>
+    </pn-scroll-list>
+  </pn-page-card>
+</template>
+
+<script setup lang="ts">
+  import { ref } from 'vue'
+  import { useRouter } from 'vue-router'
+
+  const router = useRouter()
+
+  const person = ref({id: "p1", name: 'Кирюшкин Андрей', logo: 'https://cdn.quasar.dev/img/avatar4.jpg', tname: 'Kir_AA', tusername: '@kiruha90', role: 'DevOps', company: '', department: 'test' })
+
+  const companies = ref([
+    {id: "com11", value: "com11", name: 'Рога и копытца1', logo: '', description: 'Монтажники вывески', qtyPersons: 3, masked: false, unmasked: [] },
+    {id: "com21", name: 'ООО "Василек1"', logo: 'https://cdn.quasar.dev/img/avatar5.jpg', qtyPersons: 2, masked: true, unmasked: [] },
+    {id: "ch13", name: 'Откат и деньги1', logo: 'https://cdn.quasar.dev/img/avatar4.jpg', description: 'Договариваются с администрацией',  qtyPersons: 5, masked: false, unmasked: [] },
+    {id: "ch14", name: 'Откат и деньги2', logo: '', description: 'Договариваются о чем-то',  qtyPersons: 5, masked: false, unmasked: [] },
+    {id: "com111", name: 'Рога и копытца2', logo: '', description: 'Монтажники вывески', qtyPersons: 3, masked: false, unmasked: []},
+    {id: "com211", name: 'ООО "Василек2"', logo: '', qtyPersons: 2, masked: true, unmasked: [] },
+    {id: "ch131", name: 'Откат и деньги3', logo: '', description: 'Договариваются с администрацией',  qtyPersons: 5, masked: false, unmasked: [] },
+  ])
+
+
+  async function goProject () {
+
+    await router.push({ name: 'project' })
+  }
+</script>
+
+<style lang="scss">
+</style>