Mam napisaną aplikację w Vue.js. Zmodyfikuj kod, aby wyikona mdi-eye dla drukarek posnet wyświetlała się w taki sam sposób jak dla drukarek.

/// printer-posnet-row.vue

<template>
  <v-row align="center">
    <v-col>
      <v-row dense>
        <v-col cols="auto">
          <span class="text-body-2 text--bold" v-text="value.displayName"></span>
        </v-col>
        <v-col cols="auto">
          <span :class="{ 'text-body-2': true }">
            <v-icon small class="mr-1">mdi-map-marker</v-icon>
            {{ stateMappings.orgUnitName(value.organizationUnitId) }}
          </span>
        </v-col>
      </v-row>
    </v-col>
    <v-col cols="auto">
      <div class="text-body-2" style="min-width: 100px">{{ targetName }}</div>
    </v-col>
    <v-col cols="1" class="px-2">
      <span class="text-body-2"><strong>{{ value.name }}</strong></span>
      <div class="text-caption">
        IP: {{ value.ipAddress }}
      </div>
    </v-col>
    <v-col cols="auto">
      <v2-btn color="primary" small @click="status">
        <v-icon>mdi-eye</v-icon>
      </v2-btn>
    </v-col>
    <v-col cols="auto" class="px-2">
      <edit-async-delete-buttons :readonly="readonly" :delete-action="onDelete" @select="select" />
    </v-col>
  </v-row>
</template>

<script lang="ts">
import type { PropType } from "@vue/composition-api";
import { defineComponent, inject, ref } from "@vue/composition-api";
import axios from "@/lib/axios";
import AppState from "@/views/main-wrap/app-state";
import StateMappings from "@/views/main-wrap/state-mappings";
import SubmitButton from "@/components/action-buttons/submit-button.vue";
import TooltipIcon from "@/components/simple/tooltip-icon.vue";
import InlineIcon from "@/components/simple/inline-icon.vue";
import TextUtils from "@/lib/text-utils";
import type PrinterPosnet from "@/views/commerce/printers-posnet/printer-posnet";
import EditAsyncDeleteButtons from "@/components/action-buttons/edit-async-delete-buttons.vue";
import PrinterTarget from "./../printers/printer-target";

const PrinterPosnetRow = defineComponent({
  components: {
    EditAsyncDeleteButtons,
    InlineIcon,
    TooltipIcon,
    SubmitButton
  },
  props: {
    value: {
      type: Object as PropType<PrinterPosnet>,
      required: true
    },
    readonly: {
      type: Boolean,
      required: false,
      default: false
    }
  },

  emits: ["update", "select", "status"],

  setup(props, context) {
    const appState = inject(AppState.Key) as AppState;
    const stateMappings = ref(StateMappings.create(appState));
    const targetName = ref(PrinterTarget.getById(props.value.targetId)?.name);

    const onDelete = async () => {
      await axios.delete(`/api/services/app/PrinterPosnet/${props.value.id}`);
      context.emit("update");
    };

    return {
      stateMappings,
      targetName,
      onDelete,
      trim: TextUtils.trim,
      select: () => context.emit("select"),
      status: () => context.emit("status")
    };
  }
});

export default PrinterPosnetRow;
</script>

///printer-posnet-view.vue

<template>
  <loading-container :is-loaded="pagedState.isLoaded">
    <v-overlay v-if="pagedState.isCardVisible" z-index="10" :dark="false">
      <printer-posnet-card
        :readonly="pagedState.readonly"
        :value="pagedState.selectedId"
        @close="v => pagedState.onCardClose(v)" />
    </v-overlay>
    <v-overlay v-if="statusCardVisible" z-index="20" :dark="false">
      <printer-posnet-status-card :value="selectedItem" @close="onStatusCardClose" />
    </v-overlay>
    <v-row dense align="center">
      <v-col cols="6">
        <organization-unit-selector v-model="pagedState.query.organizationUnitId" />
      </v-col>
      <v-col cols="6">
        <show-active-only-switch v-model="pagedState.query.activeOnly" />
      </v-col>
      <v-col cols="6">
        <search-input v-model="pagedState.query.searchPhrase" />
      </v-col>
      <v-col cols="6">
        <printer-posnet-target-selector v-model="pagedState.query.target" />
      </v-col>
    </v-row>

    <paged-data-iterator v-model="pagedState.query.pagedModel" :paged-items="pagedState">
      <template #default="{ item }">
        <printer-posnet-row
          :key="item.id"
          :value="item"
          :readonly="pagedState.readonly"
          @select="() => pagedState.select(item.id)"
          @status="() => { statusCardVisible = true; selectedItem = item; }" />
      </template>
    </paged-data-iterator>
  </loading-container>
</template>

<script lang="ts">
import { defineComponent, ref } from "@vue/composition-api";
import axios from "@/lib/axios";
import debounce from "lodash/debounce";
import LoadingContainer from "@/components/loading/loading-container.vue";
import SearchInput from "@/components/simple/search-input.vue";
import AddItemButton from "@/components/simple/add-item-button.vue";
import PrinterPosnet from "@/views/commerce/printers-posnet/printer-posnet";
import PrinterPosnetCard from "@/views/commerce/printers-posnet/printer-posnet-card.vue";
import PrinterPosnetStatusCard from "@/views/commerce/printers-posnet/printer-posnet-status-card.vue";
import PrinterPosnetRow from "@/views/commerce/printers-posnet/printer-posnet-row.vue";
import PagedDataIterator from "@/components/paging/paged-data-iterator.vue";
import { usePagedSearch } from "@/components/paging/paged-view-helpers";
import { PermissionNames } from "@/lib/permissions";
import type { PagedSearchOptions } from "@/components/paging/paged-search-options";
import { PrinterPosnetQuery } from "@/views/commerce/printers-posnet/printers-posnet-query";
import PrinterPosnetTargetSelector from "@/views/commerce/printers-posnet/printer-posnet-target-selector.vue";
import OrganizationUnitSelector from "@/views/commerce/common/selectors/organization-unit-selector.vue";

const PrintersPosnetsView = defineComponent({
  components: {
    PagedDataIterator,
    PrinterPosnetRow,
    PrinterPosnetCard,
    PrinterPosnetStatusCard,
    PrinterPosnetTargetSelector,
    OrganizationUnitSelector,
    AddItemButton,
    SearchInput,
    LoadingContainer
  },

  props: {},

  setup(props, context) {
    const selectedItem = ref(null as PrinterPosnet | null);
    const isSearchLoading = ref(false);
    const items = ref([] as PrinterPosnet[]);
    const query = ref(new PrinterPosnetQuery());
    const statusCardVisible = ref(false);

    const options: PagedSearchOptions<PrinterPosnetQuery> = {
      addItemButton: true,
      editPermission: PermissionNames.Printers_Manage,
      fixedQuerySetup: q => { }
    };

    const pagedState = usePagedSearch(
      PrinterPosnet.fromDto,
      PrinterPosnetQuery,
      "/api/services/app/PrinterPosnet/Search",
      context,
      options
    );

    const executeSearch = async () => {
      const response = await axios.post("/api/services/app/Printers/Search", query.value.dto);
      items.value = response.data.result.map(PrinterPosnet.fromDto);
    };

    const searchDebounce = debounce(async () => {
      await executeSearch();
      isSearchLoading.value = false;
    }, 500);

    const onSearchUpdate = () => {
      isSearchLoading.value = true;
      searchDebounce();
    };

    const onStatusCardClose = (needUpdate: boolean) => {
      statusCardVisible.value = false;
      selectedItem.value = null;
      if (needUpdate) onSearchUpdate();
    };

    return {
      items,
      query,
      pagedState,
      statusCardVisible,
      onStatusCardClose
    };
  }
});

export default PrintersPosnetsView;
</script>

/// printers-view-row.vue

<template>
  <v-row align="center">
    <v-col>
      <v-row dense>
        <v-col cols="auto">
          <span :class="{ 'text-body-2': true, 'text--bold': true }" v-text="value.displayName"></span>
        </v-col>
        <v-col cols="auto">
          <span
            :class="{
              'text-body-2': true
            }">
            <v-icon small class="mr-1">mdi-map-marker</v-icon>
            {{ stateMappings.orgUnitName(value.orgUnitId) }}
          </span>
        </v-col>
      </v-row>
    </v-col>
    <v-col cols="auto">
      <span v-if="value.status.serialNumber" class="text-body-2 primary--text text--darken-2">
        {{ value.status.serialNumber }}
      </span>
    </v-col>
    <v-col cols="auto">
      <div class="text-body-2" style="min-width: 100px" v-text="value.target.name"></div>
    </v-col>
    <v-col cols="auto">
      <tooltip-icon
        :icon="icon"
        :color="color"
        :tooltip="value.status.error"
        :show-tooltip="value.status.error" />
    </v-col>
    <v-col cols="auto">
      <v2-btn color="primary" small @click="select">
        <v-icon>mdi-eye</v-icon>
      </v2-btn>
    </v-col>
  </v-row>
</template>
<script lang="ts">
import type { PropType} from "@vue/composition-api";
import { computed, defineComponent, inject, ref } from "@vue/composition-api";
import AppState from "@/views/main-wrap/app-state";
import StateMappings from "@/views/main-wrap/state-mappings";
import type Printer from "@/views/commerce/printers/printer";
import V2Btn from "@/compatibility-layer/components/v2-btn.vue";
import TooltipIcon from "@/components/simple/tooltip-icon.vue";

const TerminalsView = defineComponent({
  components: {
    TooltipIcon,
    V2Btn
  },

  props: {
    value: {
      type: Object as PropType<Printer>,
      required: true
    }
  },

  setup(props, context) {
    const appState = inject(AppState.Key) as AppState;
    const stateMappings = ref(StateMappings.create(appState));

    const icon = computed(() => {
      if (props.value.status.isUnknown) return "mdi-map-marker-question-outline";
      if (props.value.status.isNoConnection) return "mdi-close-circle";
      if (props.value.status.error) return "mdi-alert";
      return "mdi-check";
    });

    const color = computed(() => {
      if (props.value.status.isUnknown) return "primary darken-2";
      if (props.value.status.isNoConnection) return "error";
      if (props.value.status.error) return "orange";
      return "success";
    });

    return {
      stateMappings,
      icon,
      color,
      select: () => context.emit("select")
    };
  }
});

export default TerminalsView;
</script>

/// printer-view.vue

<template>
  <loading-container :is-loaded="isLoaded" fluid class="ma-0 pa-0">
    <v-overlay v-if="selectedItem" z-index="20" :dark="false">
      <printer-status-card :value="selectedItem" @close="onCardClose" />
    </v-overlay>
    <v-row dense align="center" justify="space-between">
      <v-col cols="4">
        <organization-unit-selector v-model="query.orgUnitId" />
      </v-col>
      <v-col cols="auto">
        <submit-button :action="refresh">
          Odśwież
        </submit-button>
      </v-col>
    </v-row>
    <loading-bar :value="isSearchLoading" />

    <template v-for="(item, idx) in items">
      <printers-view-row :key="idx" :value="item" @select="() => (selectedItem = item)" />

      <v-divider v-if="idx < items.length - 1" :key="idx" class="my-2" />
    </template>
  </loading-container>
</template>
<script lang="ts">
import { computed, defineComponent, inject, onMounted, ref, watch } from "@vue/composition-api";
import axios from "@/lib/axios";
import debounce from "lodash/debounce";
import MedicaRouter from "@/views/main-wrap/medica-router";
import AppState from "@/views/main-wrap/app-state";
import type { Terminal } from "@/views/commerce/terminals/terminal";
import LoadingContainer from "@/components/loading/loading-container.vue";
import StateMappings from "@/views/main-wrap/state-mappings";
import PrinterStatusCard from "@/views/commerce/printers/printer-status-card.vue";
import Printer from "@/views/commerce/printers/printer";
import { PrintersQuery } from "@/views/commerce/printers/printers-query";
import OrganizationUnitSelector from "@/views/commerce/common/selectors/organization-unit-selector.vue";
import LoadingBar from "@/components/simple/loading-bar.vue";
import TooltipIcon from "@/components/simple/tooltip-icon.vue";
import SubmitButton from "@/components/action-buttons/submit-button.vue";
import PrintersViewRow from "@/views/commerce/printers/printers-view-row.vue";

const TerminalsView = defineComponent({
  components: {
    PrintersViewRow,
    SubmitButton,
    TooltipIcon,
    LoadingBar,
    OrganizationUnitSelector,
    PrinterStatusCard,

    LoadingContainer
  },

  props: {},

  setup(props, context) {
    const router = ref(MedicaRouter.forContext(context));
    const appState = inject(AppState.Key) as AppState;
    const stateMappings = ref(StateMappings.create(appState));
    const items = ref([] as Printer[]);
    const isLoaded = ref(false);
    const isSearchLoading = ref(false);
    const query = ref(new PrintersQuery());
    const selectedItem = ref(null as Terminal | null);

    onMounted(async () => {
      router.value.getParams(query.value);
      await loadData();
    });

    const loadData = async () => {
      isLoaded.value = false;
      await executeSearch();
      isLoaded.value = true;
    };

    const setQueryParams = async () => {
      await router.value.setParams(query.value.serializableQuery);
    };

    const prevPage = ref(1);
    watch(
      query,
      async (_1, _2) => {
        query.value.handleUpdate(prevPage, onSearchUpdate);
        if (isLoaded.value) await setQueryParams();
      },
      {
        deep: true
      }
    );

    const executeSearch = async () => {
      const response = await axios.post("/api/services/app/Printers/Search", query.value.dto);
      items.value = response.data.result.map(Printer.fromDto);
    };
    const refresh = async () => {
      const response = await axios.post(
        "/api/services/app/Printers/CheckAll",
        {},
        { timeout: 240000 }
      );
      items.value = response.data.result.map(Printer.fromDto);
    };

    const searchDebounce = debounce(async () => {
      await executeSearch();
      isSearchLoading.value = false;
    }, 500);

    const onSearchUpdate = () => {
      isSearchLoading.value = true;
      searchDebounce();
    };

    const allOrgUnits = computed(() => appState.orgUnits);

    const onCardClose = (needUpdate: boolean) => {
      selectedItem.value = null;
      if (needUpdate) onSearchUpdate();
    };

    return {
      items,

      query,
      refresh,
      allOrgUnits,

      isLoaded,
      isSearchLoading,
      onCardClose,
      stateMappings,
      selectedItem
    };
  }
});

export default TerminalsView;
</script>