TSK-1682: Introduced reusable SectionEmpty for numerous existing and upcoming cases (#5220)

Signed-off-by: Petr Vyazovetskiy <develop.pit@gmail.com>
2024-11-25 09:13:07 +03:00 · 2024-04-08 02:54:04 -03:00 · 2024-04-08 02:54:04 -03:00 · a3a77eb6b1
commit a3a77eb6b1
parent 52908e051c
12 changed files with 73 additions and 53 deletions
--- a/plugins/recruit-assets/lang/en.json
+++ b/plugins/recruit-assets/lang/en.json
@ -12,6 +12,7 @@
    "CompanyCreateLabel": "Company",
    "VacancyPlaceholder": "Software Engineer",
    "CreateAnApplication": "New Application",
+    "NoVacancies": "No Vacancies",
    "NoApplicationsForTalent": "There are no applications for this talent.",
    "NoApplicationsForVacancy": "There are no applications for this vacancy.",
    "CreateApplication": "New Application",
--- a/plugins/recruit-assets/lang/es.json
+++ b/plugins/recruit-assets/lang/es.json
@ -12,6 +12,7 @@
    "CompanyCreateLabel": "Empresa",
    "VacancyPlaceholder": "Ingeniero de software",
    "CreateAnApplication": "Nueva solicitud",
+    "NoVacancies": "No hay vacantes",
    "NoApplicationsForTalent": "No hay solicitudes para este talento.",
    "NoApplicationsForVacancy": "No hay solicitudes para esta vacante.",
    "CreateApplication": "Nueva solicitud",
--- a/plugins/recruit-assets/lang/pt.json
+++ b/plugins/recruit-assets/lang/pt.json
@ -12,6 +12,7 @@
    "CompanyCreateLabel": "Empresa",
    "VacancyPlaceholder": "Engenheiro de software",
    "CreateAnApplication": "Nova candidatura",
+    "NoVacancies": "Não existem vagas",
    "NoApplicationsForTalent": "Não existem candidaturas para este talento.",
    "NoApplicationsForVacancy": "Não existem candidaturas para esta vaga.",
    "CreateApplication": "Nova candidatura",
--- a/plugins/recruit-assets/lang/ru.json
+++ b/plugins/recruit-assets/lang/ru.json
@ -12,6 +12,7 @@
    "CompanyCreateLabel": "Компания",
    "VacancyPlaceholder": "Разработчик",
    "CreateAnApplication": "Новый Кандидат",
+    "NoVacancies": "Нет вакансий",
    "NoApplicationsForTalent": "Нет кандидатов для данного таланта.",
    "NoApplicationsForVacancy": "Нет кандидатов для данной вакансии.",
    "CreateApplication": "Новый Кандидат",
--- a/plugins/recruit-resources/src/components/Applications.svelte
+++ b/plugins/recruit-resources/src/components/Applications.svelte
@ -21,6 +21,7 @@
  import CreateApplication from './CreateApplication.svelte'
  import IconApplication from './icons/Application.svelte'
  import FileDuo from './icons/FileDuo.svelte'
+  import SectionEmpty from './SectionEmpty.svelte'

  export let objectId: Ref<Doc>

@ -50,7 +51,7 @@
  </svelte:fragment>

  <svelte:fragment slot="content">
-    {#if applications > 0 && viewlet && !loading}
+    {#if applications > 0 && viewlet !== undefined && !loading}
      <Scroller horizontal>
        <Table
          _class={recruit.class.Applicant}
@ -60,19 +61,13 @@
        />
      </Scroller>
    {:else}
-      <div class="antiSection-empty solid flex-col-center mt-3">
-        <div class="caption-color">
-          <FileDuo size={'large'} />
-        </div>
-        <span class="content-dark-color">
-          <Label label={recruit.string.NoApplicationsForTalent} />
-        </span>
+      <SectionEmpty icon={FileDuo} label={recruit.string.NoApplicationsForTalent}>
        <!-- svelte-ignore a11y-click-events-have-key-events -->
        <!-- svelte-ignore a11y-no-static-element-interactions -->
        <span class="over-underline content-color" on:click={createApp}>
          <Label label={recruit.string.CreateAnApplication} />
        </span>
-      </div>
+      </SectionEmpty>
    {/if}
  </svelte:fragment>
 </Section>
--- a/plugins/recruit-resources/src/components/SectionEmpty.svelte
+++ b/plugins/recruit-resources/src/components/SectionEmpty.svelte
@ -0,0 +1,36 @@
+<!--
+//
+// Copyright © 2024 Hardcore Engineering Inc.
+//
+// Licensed under the Eclipse Public License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License. You may
+// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+-->
+
+<script lang="ts">
+  import type { IntlString } from '@hcengineering/platform'
+  import { Icon, Label } from '@hcengineering/ui'
+  import type { ComponentProps } from 'svelte'
+
+  export let icon: ComponentProps<Icon>['icon']
+  export let label: IntlString
+  export let labelParams: Record<string, any> = {}
+</script>
+
+<div class="antiSection-empty solid flex-col-center mt-3">
+  <div class="flex-center caption-color">
+    <Icon {icon} size="large" />
+  </div>
+  <span class="text-sm content-dark-color mt-2">
+    <Label {label} params={labelParams} />
+  </span>
+  <slot />
+</div>
--- a/plugins/recruit-resources/src/components/VacancyApplications.svelte
+++ b/plugins/recruit-resources/src/components/VacancyApplications.svelte
@ -23,6 +23,7 @@
  import CreateApplication from './CreateApplication.svelte'
  import IconApplication from './icons/Application.svelte'
  import FileDuo from './icons/FileDuo.svelte'
+  import SectionEmpty from './SectionEmpty.svelte'

  export let objectId: Ref<Vacancy>
  let applications: number
@ -63,7 +64,7 @@
    </div>
  </div>
  {#if applications > 0}
-    {#if viewlet && !loading}
+    {#if viewlet !== undefined && !loading}
      <Scroller horizontal>
        <Table
          _class={recruit.class.Applicant}
@ -76,16 +77,12 @@
      <Loading />
    {/if}
  {:else}
-    <div class="antiSection-empty solid flex-col-center mt-3">
-      <div class="caption-color">
-        <FileDuo size={'large'} />
-      </div>
-      <span class="content-dark-color">
-        <Label label={recruit.string.NoApplicationsForVacancy} />
-      </span>
+    <SectionEmpty icon={FileDuo} label={recruit.string.NoApplicationsForVacancy}>
+      <!-- svelte-ignore a11y-click-events-have-key-events -->
+      <!-- svelte-ignore a11y-no-static-element-interactions -->
      <span class="over-underline content-color" on:click={createApp}>
        <Label label={recruit.string.CreateAnApplication} />
      </span>
-    </div>
+    </SectionEmpty>
  {/if}
 </div>
--- a/plugins/recruit-resources/src/components/VacancyList.svelte
+++ b/plugins/recruit-resources/src/components/VacancyList.svelte
@ -14,7 +14,6 @@
 -->
 <script lang="ts">
  import { Doc, Ref } from '@hcengineering/core'
-  import { getEmbeddedLabel } from '@hcengineering/platform'
  import presentation from '@hcengineering/presentation'
  import { Button, Icon, IconAdd, Label, showPopup, Scroller } from '@hcengineering/ui'
  import view, { BuildModelKey } from '@hcengineering/view'
@ -22,6 +21,7 @@
  import recruit from '../plugin'
  import CreateVacancy from './CreateVacancy.svelte'
  import FileDuo from './icons/FileDuo.svelte'
+  import SectionEmpty from './SectionEmpty.svelte'

  export let objectId: Ref<Doc>
  export let vacancies: number | undefined
@ -71,18 +71,12 @@
      />
    </Scroller>
  {:else}
-    <div class="antiSection-empty solid flex-col-center mt-3">
-      <div class="caption-color">
-        <FileDuo size={'large'} />
-      </div>
-      <span class="content-dark-color">
-        <Label label={getEmbeddedLabel('No Vacancies')} />
+    <SectionEmpty icon={FileDuo} label={recruit.string.NoVacancies}>
+      <!-- svelte-ignore a11y-click-events-have-key-events -->
+      <!-- svelte-ignore a11y-no-static-element-interactions -->
+      <span class="over-underline content-color" on:click={createApp}>
+        <Label label={recruit.string.CreateVacancy} />
      </span>
-      {#if !readonly}
-        <span class="over-underline content-color" on:click={createApp}>
-          <Label label={recruit.string.CreateVacancy} />
-        </span>
-      {/if}
-    </div>
+    </SectionEmpty>
  {/if}
 </div>
--- a/plugins/recruit-resources/src/components/review/Opinions.svelte
+++ b/plugins/recruit-resources/src/components/review/Opinions.svelte
@ -18,6 +18,7 @@
  import { Table } from '@hcengineering/view-resources'
  import recruit from '../../plugin'
  import FileDuo from '../icons/FileDuo.svelte'
+  import SectionEmpty from '../SectionEmpty.svelte'
  import CreateOpinion from './CreateOpinion.svelte'

  export let objectId: Ref<Doc>
@ -44,16 +45,12 @@
      loadingProps={{ length: opinions }}
    />
  {:else}
-    <div class="antiSection-empty solid flex-col-center mt-3">
-      <div class="content-color">
-        <FileDuo size={'large'} />
-      </div>
-      <div class="text-sm content-dark-color mt-2">
-        <Label label={recruit.string.NoReviewForCandidate} />
-      </div>
+    <SectionEmpty icon={FileDuo} label={recruit.string.NoReviewForCandidate}>
+      <!-- svelte-ignore a11y-click-events-have-key-events -->
+      <!-- svelte-ignore a11y-no-static-element-interactions -->
      <span class="text-sm content-color over-underline" on:click={createApp}>
        <Label label={recruit.string.CreateAnReview} />
      </span>
-    </div>
+    </SectionEmpty>
  {/if}
 </div>
--- a/plugins/recruit-resources/src/components/review/Reviews.svelte
+++ b/plugins/recruit-resources/src/components/review/Reviews.svelte
@ -22,6 +22,7 @@
  import { Table } from '@hcengineering/view-resources'
  import recruit from '../../plugin'
  import FileDuo from '../icons/FileDuo.svelte'
+  import SectionEmpty from '../SectionEmpty.svelte'
  import CreateReview from './CreateReview.svelte'

  export let objectId: Ref<Doc>
@ -93,19 +94,14 @@
      />
    </Scroller>
  {:else}
-    <div class="antiSection-empty solid flex-col-center mt-3">
-      <div class="caption-color">
-        <FileDuo size={'large'} />
-      </div>
-      <span class="content-dark-color mt-2">
-        <Label label={recruit.string.NoReviewForCandidate} />
-      </span>
+    <SectionEmpty icon={FileDuo} label={recruit.string.NoReviewForCandidate}>
      {#if !readonly}
        <!-- svelte-ignore a11y-click-events-have-key-events -->
+        <!-- svelte-ignore a11y-no-static-element-interactions -->
        <span class="over-underline content-color" on:click={createApp}>
          <Label label={recruit.string.CreateAnReview} />
        </span>
      {/if}
-    </div>
+    </SectionEmpty>
  {/if}
 </div>
--- a/plugins/recruit-resources/src/plugin.ts
+++ b/plugins/recruit-resources/src/plugin.ts
@ -39,6 +39,7 @@ export default mergeIds(recruitId, recruit, {
    VacancyDescription: '' as IntlString,
    CandidatesDescription: '' as IntlString,
    CreateAnApplication: '' as IntlString,
+    NoVacancies: '' as IntlString,
    NoApplicationsForTalent: '' as IntlString,
    NoApplicationsForVacancy: '' as IntlString,
    FirstName: '' as IntlString,
--- a/plugins/tracker-resources/src/components/issues/related/RelatedIssuesSection.svelte
+++ b/plugins/tracker-resources/src/components/issues/related/RelatedIssuesSection.svelte
@ -16,7 +16,7 @@
 {#if $configurationStore.has(trackerId)}
  <QueryIssuesList {object} {query} createParams={{ relatedTo: object }} hasSubIssues>
    <svelte:fragment slot="header">
-      <div class="flex-row-center mb-3">
+      <div class="flex-row-center">
        <div class="antiSection-header__icon">
          <Icon icon={tracker.icon.Issue} size={'small'} />
        </div>