enrecipes/app/components/modal/ActionDialog.vue

<template>
  <Page @loaded="onPageLoad" backgroundColor="transparent">
    <GridLayout
      columns="*"
      :rows="`auto, auto, ${stretch ? '*' : 'auto'}, auto`"
      class="dialogContainer"
      :class="appTheme"
    >
      <StackLayout row="0" class="dialogHeader" orientation="horizontal">
        <Label class="er dialogIcon" :text="icon[helpIcon]" />
        <Label class="dialogTitle" :text="`${title}` | L" />
      </StackLayout>
      <ListView
        rowHeight="48"
        row="2"
        @loaded="listViewLoad"
        for="item in newList"
        :height="stretch ? '100%' : itemInView"
      >
        <v-template>
          <StackLayout margin="0" padding="0">
            <Label
              class="actionItem mdr"
              :class="{ tb: title === 'srt' && sortType === item }"
              :color="title === 'srt' && sortType === item ? '#ff5200' : ''"
              :text="`${localized(item)}`"
              @tap="tapAction(item)"
              @longPress="removeItem(item)"
            />
          </StackLayout>
        </v-template>
      </ListView>
      <GridLayout
        row="3"
        rows="auto"
        columns="auto, *, auto"
        class="actionsContainer"
      >
        <MDButton
          variant="text"
          v-if="action"
          col="0"
          class="action tb pull-left"
          :text="`${action}` | L"
          @tap="$modal.close(action)"
        />
        <MDButton
          variant="text"
          col="2"
          class="action tb pull-right"
          :text="'cBtn' | L"
          @tap="$modal.close(false)"
        />
      </GridLayout>
    </GridLayout>
  </Page>
</template>

<script>
import { Application } from "@nativescript/core";
import * as Toast from "nativescript-toast";
import { localize } from "@nativescript/localize";
import { mapState, mapActions } from "vuex";
import ConfirmDialog from "./ConfirmDialog.vue";

export default {
  props: ["title", "list", "stretch", "action", "helpIcon", "count"],
  data() {
    return {
      newList: this.list,
      rowHeight: null,
    };
  },
  computed: {
    ...mapState(["sortType", "icon"]),
    appTheme() {
      return Application.systemAppearance();
    },
    itemInView() {
      return this.rowHeight * this.count;
    },
  },
  methods: {
    ...mapActions(["removeListItemAction"]),
    onPageLoad(args) {
      args.object._dialogFragment
        .getDialog()
        .getWindow()
        .setBackgroundDrawable(
          new android.graphics.drawable.ColorDrawable(
            android.graphics.Color.TRANSPARENT
          )
        );
    },
    listViewLoad(args) {
      this.rowHeight = args.object.rowHeight;
      let e = args.object.android;
      e.setSelector(new android.graphics.drawable.StateListDrawable());
      e.setDivider(null);
      e.setDividerHeight(0);
    },
    localized(item) {
      if (this.title !== "lang") return localize(item);
      else return item;
    },
    tapAction(item) {
      this.$modal.close(item);
    },
    // centerLabel(args) {
    //   args.object.android.setGravity(16);
    // },
    deletionConfirmation(type, description) {
      return this.$showModal(ConfirmDialog, {
        props: {
          title: "conf",
          description,
          cancelButtonText: "cBtn",
          okButtonText: "rBtn",
          helpIcon: "err",
          iconColor: "#c92a2a",
        },
      });
    },
    removeItem(item) {
      // let item = this.newList[index];
      let vm = this;

      function removeListItem(type, listName, desc) {
        vm.deletionConfirmation(
          type,
          `${localize(desc)} "${localize(item)}"\n\n${localize("rmLIInfo")}`
        ).then((action) => {
          if (action != null && action)
            vm.removeListItemAction({
              item,
              listName,
            });
        });
      }
      switch (this.title) {
        case "cui":
          removeListItem("cuisine", "cuisines", "rmCuiInfo");
          break;
        case "cat":
          removeListItem("category", "categories", "rmCatInfo");
          break;
        case "yieldU":
          removeListItem("yield unit", "yieldUnits", "rmYUInfo");
          break;
        case "Unit":
          removeListItem("unit", "units", "rmUInfo");
          break;
        default:
      }
    },
  },
};
</script>