first commit

src/pages/CompanyMaskPage.vue

@@ -0,0 +1,157 @@
+<template>
+  <pn-page-card>
+    <template #title>
+      <div class="col-grow">
+        {{$t('company__mask')}}
+      </div>
+    </template>
+    <pn-scroll-list>
+      <template #card-body-header>
+        <div style="min-height: var(--top-raduis);"/>
+      </template>
+      <q-list
+        separator
+        >
+        <q-item>
+          <q-item-section>
+            <div>
+              <q-btn flat round color="primary" icon="mdi-help-circle-outline" @click="showDialogHelp = true" />
+            </div>
+          </q-item-section>
+          <q-item-section></q-item-section>
+          <q-item-section align="end">
+            {{ $t('mask__title_table') }}
+            <span class="text-caption">
+              {{ $t('mask__title_table2') }}
+            </span>
+          </q-item-section>
+        </q-item>
+        <q-item
+          v-for = "company in companies"
+          :key="company.id"
+          class="w100"
+          >
+          <q-item-section>
+            <q-checkbox
+              v-model="company.masked"
+              :label="company.name"
+              unchecked-icon="mdi-drama-masks"
+              checked-icon="mdi-drama-masks"
+              :class="company.masked ? 'masked' : 'unmasked'"
+            />
+          </q-item-section>
+          <q-item-section>
+            <q-select
+              v-if="company.masked"
+              v-model="company.unmasked"
+              multiple
+              :options="companiesSelect(company.id)"
+              dense
+              borderless
+              dropdown-icon="mdi-plus"
+              class="fix-select"
+              >
+              <template #selected>
+                <div
+                  v-for="(comp, idx) in company.unmasked"
+                  :key=idx
+                  class="q-pa-xs"
+                  >
+                  <q-avatar rounded size="md">
+                    <img v-if="comp['logo']" :src="comp['logo']"/>
+                    <pn-auto-avatar v-else :name="comp['name']"/>
+                  </q-avatar>
+                </div>
+              </template>
+              <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>
+            </q-select>
+          </q-item-section>
+        </q-item>
+        <q-item 
+          class="q-pa-none q-ma-none"
+          style="min-height: 18px"
+          >
+          <div class="q-py-none flex column w100"/>
+        </q-item>
+      </q-list>
+    </pn-scroll-list>
+    
+    <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>
+          <q-space />
+          <q-btn icon="close" flat round dense v-close-popup />
+        </q-card-section>
+        <q-card-section class="q-pt-sm">
+          {{ $t('mask__help_message')}}
+        </q-card-section>
+      </q-card>
+    </q-dialog>
+  </pn-page-card>
+</template>
+    
+<script setup lang="ts">
+  import { ref } from 'vue'
+  // import { useCompaniesStore } from 'src/stores/companies'
+
+  const showDialogHelp = ref<boolean>(false)
+  // const companiesStore =  useCompaniesStore()
+
+  // const companies = computed(() => companiesStore.companies)
+
+  const companies = ref([
+    {id: "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: [] },
+  ])
+
+  function companiesSelect (id :string) {
+    return  companies.value
+      .map(el => ({
+        id: el.id,
+        name: el.name,
+        logo: el.logo 
+      }))
+      .filter(el => el.id !== id)
+  }
+
+</script>
+
+<style scoped lang="scss">
+
+  :deep(.fix-select .q-field__control) {
+    align-items: center;
+  }
+
+  :deep(.fix-select .q-icon) {
+    color: $green-14 !important;
+  }
+
+  :deep(.masked .q-icon) {
+    color: red;
+    opacity: 1;
+  }
+
+  :deep(.unmasked .q-icon) {
+    color: grey;
+    opacity: 0.5;
+  }
+</style>
+