before delete 3software

src/components/userBlock.vue

@@ -0,0 +1,180 @@
+<template>
+  <pn-page-card>
+    <template #title>
+      {{ $t(title) }}
+    </template>
+    <template #footer>
+      <q-btn
+        rounded color="primary"
+        class="w100 q-mt-md q-mb-xs"
+        :disable="!(isDirty(initialUser, modelValue))"
+        @click = "emit('update')"
+        >
+        {{ $t(btnText) }}
+      </q-btn>
+    </template>
+
+    <pn-scroll-list>
+      <div class="flex column items-center q-pa-md q-pb-sm">
+        <div class="relative-position">
+          <pn-auto-avatar
+            :img="modelValue.photo"
+            :name="tname"
+            size="100px"
+            class="q-pb-lg"
+            :style="!userStatus ? {} : { filter: 'grayscale(100%)'}"
+          />
+        <div
+          v-if="userStatus"
+          class="absolute-center text-h4 text-bold q-pa-sm"
+          :class ="'status-' + userStatus.status"
+          >
+          {{ $t(userStatus.text) }}
+        </div>
+        </div>
+        <div class="flex row items-start justify-center no-wrap q-pb-lg">
+          <div class="flex column justify-center">
+            <div class="text-bold q-pr-xs text-center" align="center">{{ tname }}</div>
+            <div caption class="text-blue text-caption" align="center" v-if="modelValue.username">{{ modelValue.username }}</div>
+          </div>
+        </div>
+
+        <div class="q-gutter-y-lg w100">
+          <q-input
+            v-model.trim="modelValue.fullname"
+            dense
+            filled
+            class = "w100"
+            :label = "$t('user_block__name')"
+          />
+
+          <q-select
+            v-model="modelValue.company_id"
+            :options="displayCompanies"
+            dense
+            filled
+            class="w100 q-pt-sm"
+            :label = "$t('user_block__company')"
+            option-value="id"
+            emit-value
+            map-options
+            >
+            <template #option="scope">
+              <q-item v-bind="scope.itemProps">
+                <q-item-section avatar>
+                  <pn-auto-avatar
+                    v-if="scope.opt.id"
+                    :img="scope.opt.logo"
+                    :name="scope.opt.label"
+                    size="md"
+                    type="rounded"
+                  />
+                  <q-avatar
+                    v-else
+                    rounded
+                    size="md"
+                    >
+                    <q-icon size="32px" color="grey" name="mdi-cancel"/>
+                  </q-avatar>   
+                </q-item-section>
+                <q-item-section>
+                  <q-item-label>{{ scope.opt.label }}</q-item-label>
+                </q-item-section>
+              </q-item>
+            </template>
+          </q-select>
+
+          <q-input
+            v-model.trim="modelValue.department"
+            dense
+            filled
+            class = "w100 q-pt-sm"
+            :label = "$t('user_block__department')"
+          />
+
+          <q-input
+            v-model.trim="modelValue.role"
+            dense
+            filled
+            class = "w100 q-pt-sm"
+            :label = "$t('user_block__role')"
+          />
+        </div>
+
+      </div>
+    </pn-scroll-list>
+  </pn-page-card>
+
+</template>
+
+<script setup lang="ts">
+  import { onMounted, computed, ref } from 'vue'
+  import { useCompaniesStore } from 'stores/companies'
+  import { useI18n } from 'vue-i18n'
+  import { isDirty } from 'helpers/helpers'
+  import type { User } from 'types/Users'
+
+  const { t } = useI18n()
+
+  const modelValue = defineModel<User>({
+    required: true
+  })
+
+  defineProps<{
+    title: string,
+    btnText: string
+  }>()
+  
+  const emit = defineEmits(['update'])
+
+  const initialUser = ref({} as User)
+
+  onMounted(() => {
+    initialUser.value = { ...modelValue.value }
+  })
+
+  const companiesStore = useCompaniesStore()
+  const companies = computed(() => companiesStore.companies)
+
+  const displayCompanies = computed(() => [
+    ...companies.value.map(el => ({ 
+      id: el.id,
+      label: el.name,
+      logo: el.logo
+    })),
+    { 
+      id: null,
+      label: t('user_block__no_company'),
+      logo: '' 
+    }
+  ])
+
+  const tname = computed(() => 
+    [modelValue.value?.firstname, modelValue.value?.lastname]
+        .filter(Boolean)
+        .join(' ')
+  )
+
+  const userStatus = computed(() => {
+    if (modelValue.value.is_blocked) return { status: 'blocked', text: 'user_block__user_blocked'}
+    if (modelValue.value.is_leave) return { status: 'leave', text: 'user_block__user_leave'}
+    return null
+  })
+
+</script>
+
+<style scoped>
+  .fix-bottom-padding.q-field--with-bottom {
+    padding-bottom: 0 !important
+  }
+
+  .status-blocked {
+    border: 2px solid red;
+    color: red;
+  }
+
+  .status-leave {
+    border: 2px solid var(--q-primary);
+    color: var(--q-primary);
+  }
+</style>