{"version":3,"file":"js/E-services.5e4eb79b.js","mappings":"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","sources":["webpack://landing/./src/components/EmptyPlaceholder/emptyPlaceholder.module.scss","webpack://landing/./src/components/EmptyPlaceholder/emptyPlaceholder.ts","webpack://landing/./src/views/Services/styles.module.scss","webpack://landing/./src/views/Services/services.ts","webpack://landing/./src/components/EmptyPlaceholder/emptyPlaceholder.html","webpack://landing/./src/views/Services/services.html"],"sourcesContent":["// extracted by mini-css-extract-plugin\nexport default {\"emptyPlaceholder\":\"q3q7kSpZgUfxA8BcsqMY\",\"imgPlaceholder\":\"SFPoQXrS5UsxAPxACf71\",\"img\":\"SDwrISfU5EYYukqmDBsl\",\"icon\":\"OghV45W12E2Hamkh3eUu\",\"primaryText\":\"p8hGpXQUKsY0RIpNxqd8\",\"secondaryText\":\"LgzTchq_9jcnCwOviT55\"};","import { Component, Prop, Vue } from 'vue-property-decorator';\r\nimport styles from './emptyPlaceholder.module.scss';\r\nimport WithRender from './emptyPlaceholder.html';\r\n\r\n@WithRender\r\n@Component({})\r\nexport default class EmptyPlaceholder extends Vue {\r\n  public styles = styles;\r\n\r\n  @Prop({ default: '' })\r\n  public icon!:string;\r\n\r\n  @Prop({ default: '' })\r\n  public primaryText!:string;\r\n\r\n  @Prop({ default: '' })\r\n  public secondaryText!: string;\r\n\r\n  @Prop({ default: false })\r\n  public isLoading!: boolean;\r\n\r\n  @Prop({ default: '' })\r\n  public wrapperClass!: string;\r\n}\r\n","// extracted by mini-css-extract-plugin\nexport default {\"servicesWrapper\":\"n99RZR2tscj0EbuRtxSY\",\"filterWrapper\":\"XuIYrJ_tjlcqX2sSg09t\",\"sidebarBtn\":\"TOZofLIpPngGZMkPreKP\",\"navigationBanner\":\"nVKQU_0Ij_gwwBcWs_Hb\",\"arrowIcon\":\"lfgZMR3lNukBHXtLlNBs\",\"servicesSearchField\":\"sNsUHEZi38Qnbkfxzq3w\"};","import { Inject } from 'vue-di-container';\r\nimport { Component, Vue } from 'vue-property-decorator';\r\n//\r\nimport WithRender from './services.html';\r\nimport styles from './styles.module.scss';\r\n// Animations\r\nimport ScrollAnimation from '@/directives/scrollAnimation';\r\n\r\n// Components\r\nimport EmptyPlaceholder from '@/components/EmptyPlaceholder/emptyPlaceholder';\r\n// services\r\nimport ApiService from '@/services/service';\r\nimport TelemetryService from '@/services/TelemetryService';\r\n// utils\r\nimport { failedEvent, successfullEvent } from '@/utils/telemetry';\r\n// Models\r\nimport { ServiceCategory, ServiceModel } from '@/models/services';\r\nimport { testIds } from '@/services/testAutomation';\r\nimport { ServiceCardAction } from '@/models/components';\r\n\r\n@WithRender\r\n@Component({\r\n  components: {\r\n    EmptyPlaceholder,\r\n  },\r\n  directives: {\r\n    ScrollAnimation,\r\n  },\r\n  diProvide: [\r\n    ApiService,\r\n  ],\r\n})\r\nexport default class Services extends Vue {\r\n  @Inject(ApiService) public apiService!: ApiService;\r\n  @Inject(TelemetryService) public telemetryService!: TelemetryService;\r\n\r\n  public styles = styles;\r\n  public testIds = testIds.eServices;\r\n  public cardActionIdPrefix = testIds.eServices.cardAction;\r\n  public filterBtnPrefix = testIds.eServices.filterBtn;\r\n  public isLoading = true;\r\n\r\n  public searchText = '';\r\n  public selectedCategoryId = 0;\r\n  public allCategoriesId = 0;\r\n\r\n  public categories: ServiceCategory[] = [];\r\n\r\n  public get services() {\r\n    const { selectedCategoryId, allCategoriesId } = this;\r\n\r\n    let sortedServices = this.sortServices(this.totalServices);\r\n\r\n    if (selectedCategoryId !== allCategoriesId) {\r\n      // ? check which Item is selected and get it's ID\r\n      const selectedItem = this.categories[selectedCategoryId];\r\n      sortedServices = this.sortServices(selectedItem.services);\r\n    }\r\n\r\n    return this.searchText ? this.filterServices(sortedServices) : sortedServices;\r\n  }\r\n\r\n  public get totalServices() {\r\n    const { categories } = this;\r\n\r\n    // ? slice(1) because we added the total object during the initialization phase\r\n    return categories.slice(1).reduce((current, accumelator) => [...current, ...accumelator.services], [] as ServiceModel[]);\r\n  }\r\n\r\n  public get selectedCategory() {\r\n    const { selectedCategoryId, allCategoriesId } = this;\r\n\r\n    if (selectedCategoryId !== allCategoriesId) {\r\n      // ? check which Item is selected and get it's ID\r\n      return this.categories[selectedCategoryId];\r\n    }\r\n\r\n    return {} as ServiceCategory;\r\n  }\r\n\r\n  public async mounted() {\r\n    document.title = 'بوابة ناجز | الخدمات الإلكترونية';\r\n\r\n    try {\r\n      const response = await this.apiService.getCategories();\r\n\r\n      if (response) {\r\n        this.categories = this.appendWithTotalCategory(response);\r\n\r\n        const { query } = this.$route;\r\n\r\n        const isVerificationServices = query.verificationServices === 'true';\r\n\r\n        if (query.category || isVerificationServices) {\r\n          const categoryId = this.categories.findIndex((category) => {\r\n            if (isVerificationServices) {\r\n              return Boolean(category.isVerificationServicesCategory);\r\n            }\r\n\r\n            return category.id === query.category;\r\n          });\r\n\r\n          this.selectedCategoryId = categoryId > -1 ? categoryId : this.allCategoriesId;\r\n        }\r\n\r\n        this.telemetryService.trackEvent({\r\n          ...successfullEvent,\r\n          serviceNameAr: this.$t('services.title') as string,\r\n          serviceNameEn: 'Electronic Services',\r\n        });\r\n      }\r\n    } catch (error) {\r\n      this.telemetryService.trackEvent({\r\n        ...failedEvent,\r\n        serviceNameAr: this.$t('services.title') as string,\r\n        serviceNameEn: 'Electronic Services',\r\n      });\r\n    }\r\n\r\n    this.isLoading = false;\r\n  }\r\n\r\n  public getCategoryButtonName({ id, services }: ServiceCategory) {\r\n    const isAllCategoriesBtn = id === String(this.allCategoriesId);\r\n\r\n    return isAllCategoriesBtn ? '' : `( ${services.length} )`;\r\n  }\r\n\r\n  public appendWithTotalCategory(categories: ServiceCategory[]) {\r\n    const enhancedCategories = categories.reduce((current, accumelator, index) => {\r\n      const services = accumelator.services.map((service) => ({ ...service, categoryName: categories[index].name }));\r\n\r\n      return [\r\n        ...current,\r\n        {\r\n          ...categories[index],\r\n          services,\r\n        },\r\n      ];\r\n    }, [] as ServiceCategory[]);\r\n\r\n    return categories.length ? [\r\n      {\r\n        id: String(this.allCategoriesId),\r\n        name: this.$t('allServices') as string,\r\n        iconClass: 'n-icon-element-3',\r\n      } as ServiceCategory,\r\n      ...enhancedCategories,\r\n    ] : [];\r\n  }\r\n\r\n  public filterServices(services: ServiceModel[]) {\r\n    return services.filter((service: ServiceModel) => service.name.includes(this.searchText));\r\n  }\r\n\r\n  public sortServices(services: ServiceModel[]) {\r\n    return services.sort((service: ServiceModel) => (service.annotations.includes('mostViewed') ? -1 : 1));\r\n  }\r\n\r\n  public hasMostViewedAnnotation(service: ServiceModel) {\r\n    return service.annotations.includes('mostViewed');\r\n  }\r\n\r\n  public hasModifiedAnnotation(service: ServiceModel) {\r\n    return service.annotations.includes('modified');\r\n  }\r\n\r\n  public hasNewAnnotation(service: ServiceModel) {\r\n    return service.annotations.includes('new');\r\n  }\r\n\r\n  public getCardAction(service: ServiceModel): ServiceCardAction {\r\n    const { categoryName, name, description } = service;\r\n\r\n    return {\r\n      label: this.$t('serviceExplaination') as string,\r\n      link: `/e-services/${service.id}`,\r\n      ariaLabel: `${categoryName} ${name} ${description}`,\r\n    };\r\n  }\r\n\r\n  public isActiveCategory(category: ServiceCategory) {\r\n    const { categories, selectedCategoryId } = this;\r\n    const currentCategoryId = categories[selectedCategoryId].id;\r\n\r\n    return String(currentCategoryId || 0) === String(category.id);\r\n  }\r\n\r\n  public generateButtonClasses(category: ServiceCategory, index: number) {\r\n    const { isActiveCategory, categories } = this;\r\n    let classes = 'n-justify-start';\r\n    const notLastButton = index < categories.length;\r\n\r\n    if (notLastButton) {\r\n      classes += ' n-mb-4';\r\n    }\r\n\r\n    if (isActiveCategory(category)) {\r\n      classes += ` ${styles.sidebarBtn}`;\r\n    } else {\r\n      classes += ' n-color-font-primary n-font-normal';\r\n    }\r\n\r\n    return classes;\r\n  }\r\n\r\n  public onChangeSidebarFilter(selectedCategoryId: number) {\r\n    this.onChangeCategory(selectedCategoryId);\r\n    this.changeQueryString();\r\n  }\r\n\r\n  public onChangeCategory(selectedCategoryId: number) {\r\n    if (selectedCategoryId) {\r\n      this.selectedCategoryId = selectedCategoryId;\r\n      return;\r\n    }\r\n\r\n    this.selectedCategoryId = this.allCategoriesId;\r\n  }\r\n\r\n  public changeQueryString(toggle: any = () => {}) {\r\n    if (toggle && typeof toggle === 'function') {\r\n      toggle();\r\n    }\r\n\r\n    this.searchText = '';\r\n\r\n    const { category: currentCategory } = this.$route.query;\r\n    const newCategory = this.categories[this.selectedCategoryId].id;\r\n\r\n    if (newCategory !== currentCategory) {\r\n      this.$router.replace({ query: { category: this.categories[this.selectedCategoryId].id } });\r\n    }\r\n  }\r\n}\r\n","<div :class=\"[styles.emptyPlaceholder, wrapperClass]\">\r\n  <p v-if=\"isLoading\" :class=\"[styles.primaryText, 'mb-2']\">{{$t('fetchingData')}}</p>\r\n  <template v-else>\r\n    <div v-if=\"icon\" :class=\"styles.imgPlaceholder\">\r\n      <v-icon\r\n        aria-hidden=\"false\"\r\n        :class=\"styles.icon\"\r\n        color=\"primary\"\r\n      >\r\n        {{icon}}\r\n      </v-icon>\r\n    </div>\r\n    <p v-if=\"primaryText\" :class=\"[styles.primaryText, 'mb-2']\">\r\n      {{primaryText}}\r\n    </p>\r\n  \r\n    <p v-if='secondaryText' :class=\"[styles.secondaryText, 'mb-0']\">{{secondaryText}}</p>\r\n  \r\n    <slot name=\"actions\" />\r\n  </template>\r\n</div>","<div :class=\"[styles.servicesWrapper, 'n-pb-20']\">\r\n  <div class=\"n-mb-8 n-pt-3 n-bg-primary-5\">\r\n    <n-container wrapperClass=\"n-pb-5 n-flex n-gap-5 n-flex-column n-flex-xs-row n-justify-xs-between n-align-xs-center\">\r\n      <h3 class=\"n-color-font-primary n-text-h3 n-font-bold\">\r\n        {{$t('services.title')}}\r\n      </h3>\r\n\r\n      <n-text-field\r\n        v-model=\"searchText\"\r\n        :id=\"testIds.searchTextField\"\r\n        :class=\"styles.servicesSearchField\"\r\n        append-icon=\"n-icon-search-normal-1\"\r\n        :aria-label=\"$t('services.searchInServices')\"\r\n        :placeholder=\"$t('services.searchInServices')\"\r\n      />\r\n    </n-container>\r\n  </div>\r\n  \r\n  <n-empty-placeholder\r\n  :isLoading=\"isLoading\"\r\n  v-if='!services.length'\r\n  :primaryText=\"$t('noServicesFoundPleaseTryAgain')\"\r\n>\r\n  <template #actions>\r\n    <router-link to=\"/\" class=\"n-text-decoration-none\" >\r\n      <n-btn\r\n        append-icon=\"n-icon-arrow-left-2\"\r\n        :id=\"testIds.backBtn\"\r\n      >\r\n        {{$t('home')}}\r\n      </n-btn>\r\n    </router-link>\r\n  </template>\r\n</n-empty-placeholder>\r\n  <n-container v-else>\r\n    <v-sheet :class=\"[styles.navigationBanner, 'n-hide-md n-mb-8 n-shadow-md n-position-sticky n-p-5 n-radius-md n-z-index-2 n-bg-element']\">\r\n      <v-slide-group\r\n        @change=\"onChangeCategory\"\r\n        :value=\"selectedCategoryId\"\r\n        show-arrows\r\n      >\r\n        <v-slide-item\r\n          v-for=\"(category) in categories\"\r\n          :key=\"category.id\"\r\n          v-slot=\"{ active, toggle }\"\r\n        >\r\n          <v-btn\r\n            class=\"mx-2\"\r\n            :color=\"active ? 'primary' : 'white lighten-1'\"\r\n            depressed\r\n            rounded\r\n            :id=\"`${filterBtnPrefix}_${category.id}`\"\r\n            @click=\"() => changeQueryString(toggle)\"\r\n            :class=\"styles.categoryWrapper\"\r\n            :aria-label=\"category.name\"\r\n            @keyup.enter=\"handleCategoryEnter\"\r\n          >\r\n            <div v-if=\"category.iconClass\" :class=\"[category.iconClass, 'ml-2 icomoon-icon']\" />\r\n            {{ category.name }} {{ getCategoryButtonName(category) }}\r\n          </v-btn>\r\n        </v-slide-item>\r\n      </v-slide-group>\r\n    </v-sheet>\r\n\r\n    <n-grid :spacing=\"6\">\r\n      <n-grid-item :md=\"4\" :lg=\"3\" class=\"n-hide n-flex-md\">\r\n        <aside :class=\"[styles.filterWrapper, 'n-position-sticky n-top-0 n-bg-soft n-px-5 n-py-6 n-radius-lg']\">\r\n          <n-btn\r\n            block\r\n            :variant=\"isActiveCategory(category) ? 'contained' : 'text'\"\r\n            :wrapperClass=\"generateButtonClasses(category, index)\"\r\n            v-for=\"(category, index) in categories\"\r\n            :key=\"category.id\"\r\n            :aria-label=\"category.name\"\r\n            @click=\"onChangeSidebarFilter(index)\"\r\n            :id=\"`${filterBtnPrefix}_${category.id}`\"\r\n            :prepend-icon=\"`${category.iconClass} n-icon-size-30 n-font-normal ${isActiveCategory(category) ? 'n-color-white' : ''}`\"\r\n            :append-icon=\"`${isActiveCategory(category) ? `n-icon-arrow-left-2 n-icon-size-24 n-color-white n-font-normal ${styles.arrowIcon}` : ''}`\"\r\n          >\r\n            {{ category.name }} {{ getCategoryButtonName(category) }}\r\n          </n-btn>\r\n        </aside>\r\n      </n-grid-item>\r\n\r\n      <n-grid-item :md=\"8\" :lg=\"9\">\r\n        <n-grid :spacing=\"6\">\r\n          <n-grid-item\r\n            :key=\"index\"\r\n            :xs=\"12\"\r\n            :sm=\"6\"\r\n            :lg=\"4\"\r\n            v-for=\"(service, index) in services\"\r\n            v-ScrollAnimation\r\n          >\r\n            <service-card\r\n              :clickable=\"true\"\r\n              :title=\"service.name\"\r\n              :categoryName=\"service.categoryName\"\r\n              :description=\"service.description\"\r\n              :action=\"getCardAction(service)\"\r\n              :cardId=\"`${testIds.card}_${service.id}`\"\r\n              :cardActionId=\"`${cardActionIdPrefix}_${service.id}`\"\r\n            />\r\n          </n-grid-item>\r\n        </n-grid>\r\n      </n-grid-item>\r\n    </n-grid>\r\n  </n-container>\r\n</div>\r\n"],"names":["EmptyPlaceholder","Vue","constructor","args","_defineProperty","styles","__decorate","Prop","default","WithRender","Component","Services","testIds","eServices","cardAction","filterBtn","services","selectedCategoryId","allCategoriesId","this","sortedServices","sortServices","totalServices","selectedItem","categories","searchText","filterServices","slice","reduce","current","accumelator","selectedCategory","mounted","document","title","response","apiService","getCategories","appendWithTotalCategory","query","$route","isVerificationServices","verificationServices","category","categoryId","findIndex","Boolean","isVerificationServicesCategory","id","telemetryService","trackEvent","successfullEvent","serviceNameAr","$t","serviceNameEn","error","failedEvent","isLoading","getCategoryButtonName","isAllCategoriesBtn","String","length","enhancedCategories","index","map","service","categoryName","name","iconClass","filter","includes","sort","annotations","hasMostViewedAnnotation","hasModifiedAnnotation","hasNewAnnotation","getCardAction","description","label","link","ariaLabel","isActiveCategory","currentCategoryId","generateButtonClasses","classes","notLastButton","sidebarBtn","onChangeSidebarFilter","onChangeCategory","changeQueryString","toggle","currentCategory","newCategory","$router","replace","Inject","ApiService","TelemetryService","components","directives","ScrollAnimation","diProvide"],"sourceRoot":""}