pleno-vue/src/components/displays/department/notifications/departmentNotificationsPhoneTable.vue

<script setup>
import { useI18n } from 'vue-i18n';

const { t } = useI18n();

import EditableTableColumn from "@/components/displays/buttons/EditableTableColumn.vue";
const props = defineProps({
  objects: {
    type: Array,
    required: true,
  },
  loadList: {
    type: Function,
    required: true,
  },
});
import { SessionUser } from "@/components/session/token/SessionUser.vue";
import { ref } from 'vue';
import ActionSettingsWheelButton from "@/components/displays/buttons/ActionSettingsWheelButton.vue";
import ActionSettingsWheelItem from "@/components/displays/buttons/ActionSettingsWheelItem.vue";
import RequiresPermission from "@/components/displays/permissionbased/RequiresPermission.vue";

const su_object = SessionUser.objects.department_notification_sms;

const hasUpdatePermission = () => {
  return (SessionUser.hasPermission('department_notification_sms_update') || SessionUser.canAccessSuperUser());
};

const enabledSavingIds = ref(new Set());

const isEnabled = (value) => {
  return value === true || value === 1 || value === "1" || value === "true";
};

const isEnabledSaving = (id) => {
  return enabledSavingIds.value.has(Number(id));
};

const setEnabledSaving = (id, saving) => {
  const nextIds = new Set(enabledSavingIds.value);
  const normalizedId = Number(id);
  if (saving) {
    nextIds.add(normalizedId);
  } else {
    nextIds.delete(normalizedId);
  }
  enabledSavingIds.value = nextIds;
};

const toggleEnabled = async (obj, event) => {
  const target = event?.target;
  const previousValue = isEnabled(obj.enabled);

  if (!target || !hasUpdatePermission() || isEnabledSaving(obj.id)) {
    if (target) {
      target.checked = previousValue;
    }
    return;
  }

  const nextValue = Boolean(target.checked);
  setEnabledSaving(obj.id, true);

  try {
    await su_object.set.enabled(obj.id, nextValue);
    await props.loadList();
  } catch (error) {
    target.checked = previousValue;
    console.error('Unable to update department notification SMS active state', error);
  } finally {
    setEnabledSaving(obj.id, false);
  }
};
</script>

<template>
  <table class="table is-fullwidth">
    <thead>
    <tr>
      <th>{{su_object.columns.id.label}}</th>
      <th>{{su_object.columns.label.label}}</th>
      <th>{{su_object.columns.phone_country_code.label}}</th>
      <th>{{su_object.columns.phone.label}}</th>
      <th>{{su_object.columns.enabled.label}}</th>
      <th class="has-text-right"></th>
    </tr>
    </thead>
    <tbody>
    <tr v-for="obj in objects" :key="obj.id">
      <td>{{obj.id}}</td>
      <!-- Label -->
      <EditableTableColumn
          :object="obj"
          :loadList="props.loadList"
          :editFunction="su_object.showEditObjectFieldForm"
          column="label"
          :permission-check-function="hasUpdatePermission"
      />
      <!-- Phone country code -->
      <EditableTableColumn
          :object="obj"
          :loadList="props.loadList"
          :editFunction="su_object.showEditObjectFieldForm"
          column="phone_country_code"
          :permission-check-function="hasUpdatePermission"
      />
      <!-- Phone -->
      <EditableTableColumn
          :object="obj"
          :loadList="props.loadList"
          :editFunction="su_object.showEditObjectFieldForm"
          column="phone"
          :permission-check-function="hasUpdatePermission"
      />
      <!-- Enabled -->
      <td>
        <input
            :id="`department-notification-sms-enabled-${obj.id}`"
            class="switch is-rounded is-small"
            type="checkbox"
            :checked="isEnabled(obj.enabled)"
            :disabled="!hasUpdatePermission() || isEnabledSaving(obj.id)"
            :data-testid="`department-notification-sms-enabled-toggle-${obj.id}`"
            :aria-label="`${su_object.columns.enabled.label}: ${obj.label}`"
            @change="toggleEnabled(obj, $event)"
        />
        <label :for="`department-notification-sms-enabled-${obj.id}`">
          {{ isEnabled(obj.enabled) ? t('common.yes') : t('common.no') }}
        </label>
      </td>
      <!-- Actions -->
      <td>
      <ActionSettingsWheelButton class="is-float-right">
        <template #actions>
          <RequiresPermission :permission="'department_notification_sms_delete'">
            <template #default>
              <ActionSettingsWheelItem
                  @click="su_object.functions.showDeleteObjectForm(obj.id, props.loadList)"
                  :icon="SessionUser.objects.global.icons.delete"
                  :label="t('global.delete')"
                  :test-id="`department-notification-sms-delete-${obj.id}`"
                  template="danger"
              />
            </template>
            <template #fail>
              <ActionSettingsWheelItem
                  :icon="SessionUser.objects.global.icons.delete"
                  :label="t('global.delete')"
                  :test-id="`department-notification-sms-delete-${obj.id}`"
                  template="danger"
                  disabled
              />
            </template>
          </RequiresPermission>
        </template>
      </ActionSettingsWheelButton>
      </td>
    </tr>
    </tbody>
    <tfoot>
    <tr>
      <td colspan="6">{{ $t('tables.showing') }} {{ objects.length }} {{ SessionUser.objects.department_notification_sms.meta.labels.multiple }}</td>
    </tr>
    </tfoot>
  </table>
</template>

<style scoped>

</style>