From b54fd09a92833ed68464a5dff7b3e8b90114ed0f Mon Sep 17 00:00:00 2001
From: Tobi Abiodun <abiodun.tobi@gmail.com>
Date: Sun, 28 Jan 2024 19:18:29 -0500
Subject: [PATCH] feat(lists): Add lists functionality to work page

---
 src/components/BaseButton.vue    |   5 +
 src/hooks/lists/useCreateList.ts |  44 +++++
 src/pages/Work.vue               |   7 +
 src/pages/lists/ListDropdown.vue | 282 ++++++++++++++++++++++++++++++
 src/pages/lists/Lists.vue        | 286 ++++++++++++++++++-------------
 src/pages/lists/NewListForm.vue  | 114 ++++++++++++
 6 files changed, 615 insertions(+), 123 deletions(-)
 create mode 100644 src/hooks/lists/useCreateList.ts
 create mode 100644 src/pages/lists/ListDropdown.vue
 create mode 100644 src/pages/lists/NewListForm.vue

diff --git a/src/components/BaseButton.vue b/src/components/BaseButton.vue
index d86f6736a..f6addc23c 100644
--- a/src/components/BaseButton.vue
+++ b/src/components/BaseButton.vue
@@ -99,6 +99,10 @@ export default defineComponent({
       type: Number,
       default: 5000,
     },
+    buttonClasses: {
+      type: Object,
+      default: () => ({}),
+    },
   },
 
   setup(props) {
@@ -131,6 +135,7 @@ export default defineComponent({
         'items-center': true,
         'justify-center': true,
         'base-button': true,
+        ...props.buttonClasses,
       } as Record<string, string | boolean>;
       if (props.variant) {
         styleObject[props.variant] = true;
diff --git a/src/hooks/lists/useCreateList.ts b/src/hooks/lists/useCreateList.ts
new file mode 100644
index 000000000..b20c7d3fb
--- /dev/null
+++ b/src/hooks/lists/useCreateList.ts
@@ -0,0 +1,44 @@
+import useDialogs from '@/hooks/useDialogs';
+import axios from 'axios';
+import { i18n } from '@/modules/i18n';
+import NewListForm from '@/pages/lists/NewListForm.vue';
+
+export default function useCreateList(onComplete: () => void, model: string) {
+  const { component } = useDialogs();
+
+  const createList = async () => {
+    let newList = {};
+    const response = await component({
+      title: i18n.global.t('lists.create_new_list'),
+      component: NewListForm, // This should be your New List Form component
+      classes: 'w-full overflow-auto p-3',
+      modalClasses: 'bg-white max-w-3xl shadow',
+      props: {
+        model,
+      },
+      listeners: {
+        onNewList(payload: Record<string, any>) {
+          newList = payload;
+        },
+      },
+    });
+
+    if (response === 'ok' && newList) {
+      try {
+        await axios.post(
+          `${import.meta.env.VITE_APP_API_BASE_URL}/lists`,
+          newList,
+        );
+        i18n.global.t('lists.list_created_successfully');
+      } catch (error) {
+        console.error('Error creating list:', error);
+      }
+    }
+
+    onComplete();
+  };
+
+  return {
+    createList,
+  };
+}
diff --git a/src/pages/Work.vue b/src/pages/Work.vue
index e5b9aefbb..663c035e4 100644
--- a/src/pages/Work.vue
+++ b/src/pages/Work.vue
@@ -663,6 +663,11 @@
           </div>
           <div v-if="showingTable" class="work-page__main-content--table">
             <div class="items-center justify-end hidden md:flex">
+              <ListDropdown
+                :selected-table-items="selectedTableItems"
+                model-type="worksite_worksites"
+                :title="$t('~~Work Lists')"
+              />
               <base-button
                 class="ml-3 my-3 border p-1 px-4 bg-white"
                 data-testid="testPrintClaimedButton"
@@ -962,10 +967,12 @@ import type { Portal } from '@/models/types';
 import WorksiteFeed from '@/components/WorksiteFeed.vue';
 import { useRecentWorksites } from '@/hooks/useRecentWorksites';
 import useAcl from '@/hooks/useAcl';
+import ListDropdown from '@/pages/lists/ListDropdown.vue';
 
 export default defineComponent({
   name: 'Work',
   components: {
+    ListDropdown,
     WorksiteFeed,
     WorksiteView,
     WorksiteForm,
diff --git a/src/pages/lists/ListDropdown.vue b/src/pages/lists/ListDropdown.vue
new file mode 100644
index 000000000..22b199cad
--- /dev/null
+++ b/src/pages/lists/ListDropdown.vue
@@ -0,0 +1,282 @@
+<template>
+  <v-popover placement="bottom-start">
+    <base-button
+      action="add"
+      suffix-icon="caret-down"
+      class="ml-3 my-3 border border-1.5 border-black p-1 px-4 bg-white"
+    >
+      {{ title }}
+    </base-button>
+    <template #popper>
+      <base-button
+        :button-classes="{ 'justify-start': true, 'justify-center': false }"
+        class="px-4 py-1 w-64 cursor-pointer hover:bg-primary-light"
+        :action="() => createList(getLists)"
+      >
+        {{ $t('~~Create New List') }}
+      </base-button>
+      <base-button
+        :button-classes="{ 'justify-start': true, 'justify-center': false }"
+        class="px-4 py-1 w-64 cursor-pointer hover:bg-primary-light"
+        :action="() => updateLists(userLists, selectedTableItems, null, false)"
+      >
+        {{ $t('~~Remove from all Lists') }}
+      </base-button>
+      <v-menu
+        placement="right-start"
+        :triggers="['hover', 'focus']"
+        instant-move
+      >
+        <div
+          class="px-4 py-1 w-64 cursor-pointer hover:bg-primary-light flex gap-1 items-center justify-between"
+        >
+          {{ $t('~~Remove from List') }}
+          <ccu-icon size="xs" type="arrow-right" class="inline-block" />
+        </div>
+
+        <template #popper>
+          <v-menu
+            placement="right-start"
+            :triggers="['hover', 'focus']"
+            instant-move
+            :delay="500"
+          >
+            <div v-for="list in userLists" :key="list.id">
+              <base-button
+                :button-classes="{
+                  'justify-start': true,
+                  'justify-center': false,
+                }"
+                class="px-4 py-1 w-64 cursor-pointer hover:bg-primary-light"
+                :action="
+                  () =>
+                    updateLists(userLists, selectedTableItems, list.id, false)
+                "
+              >
+                {{ list.name }}
+              </base-button>
+            </div>
+          </v-menu>
+        </template>
+      </v-menu>
+      <v-menu
+        placement="right-start"
+        :triggers="['hover', 'focus']"
+        instant-move
+      >
+        <div
+          class="px-4 py-1 w-64 cursor-pointer hover:bg-primary-light flex gap-1 items-center justify-between"
+        >
+          {{ $t('~~Add to Existing List') }}
+          <ccu-icon size="xs" type="arrow-right" class="inline-block" />
+        </div>
+
+        <template #popper>
+          <v-menu
+            placement="right-start"
+            :triggers="['hover', 'focus']"
+            instant-move
+            :delay="500"
+          >
+            <div v-for="list in userLists" :key="list.id">
+              <base-button
+                :button-classes="{
+                  'justify-start': true,
+                  'justify-center': false,
+                }"
+                class="px-4 py-1 w-64 cursor-pointer hover:bg-primary-light"
+                :action="
+                  () =>
+                    updateLists(userLists, selectedTableItems, list.id, true)
+                "
+              >
+                {{ list.name }}
+              </base-button>
+            </div>
+          </v-menu>
+        </template>
+      </v-menu>
+      <v-menu
+        placement="right-start"
+        :triggers="['hover', 'focus']"
+        instant-move
+        :delay="500"
+      >
+        <div
+          class="px-4 py-1 w-64 cursor-pointer hover:bg-primary-light flex gap-1 items-center justify-between"
+        >
+          {{ $t('~~View List') }}
+          <ccu-icon size="xs" type="arrow-right" class="inline-block" />
+        </div>
+
+        <template #popper>
+          <v-menu
+            placement="right-start"
+            :triggers="['hover', 'focus']"
+            instant-move
+          >
+            <div v-for="list in userLists" :key="list.id" class="flex flex-col">
+              <base-button
+                :button-classes="{
+                  'justify-start': true,
+                  'justify-center': false,
+                }"
+                class="px-4 py-1 cursor-pointer hover:bg-primary-light flex-grow"
+                :action="() => $router.push(`/lists/${list.id}`)"
+              >
+                <div class="flex items-center gap-2 w-full">
+                  <span class="w-40 text-left">{{ list.name }}</span>
+                  <span class="w-40">
+                    {{ getUser(list.created_by).first_name }}
+                  </span>
+                  <span class="">
+                    {{ length(list.object_ids) }} {{ $t('~~items') }}
+                  </span>
+                </div>
+              </base-button>
+            </div>
+          </v-menu>
+        </template>
+      </v-menu>
+    </template>
+  </v-popover>
+</template>
+
+<script setup lang="ts">
+import axios from 'axios';
+import { ref, onMounted, watch } from 'vue';
+import debounce from 'lodash/debounce';
+import BaseButton from '@/components/BaseButton.vue';
+import CcuIcon from '@/components/BaseIcon.vue';
+import { useToast } from 'vue-toastification';
+import User from '@/models/User';
+import useCreateList from '@/hooks/lists/useCreateList';
+
+interface List {
+  id: number;
+  name: string;
+  object_ids?: number[];
+  created_by?: number;
+}
+
+const props = defineProps({
+  modelType: String,
+  incident: Number,
+  selectedTableItems: {
+    type: Array,
+    required: true,
+  },
+  title: {
+    type: String,
+    required: true,
+  },
+});
+
+const userLists = ref<List[]>([]);
+const $toasted = useToast();
+
+const baseUrl = `${import.meta.env.VITE_APP_API_BASE_URL}/lists`;
+
+async function getUsers(userIds) {
+  await User.api().get(`/users?id__in=${userIds.join(',')}`, {
+    dataKey: 'results',
+  });
+}
+async function getLists() {
+  try {
+    const response = await axios.get<{ results: List[] }>(baseUrl, {
+      params: {
+        incident: props.incident,
+        model: props.modelType,
+      },
+    });
+    userLists.value = response.data.results;
+    const userIds = [];
+    for (const list of userLists.value) {
+      userIds.push(list.created_by);
+    }
+    await getUsers(userIds);
+  } catch (error) {
+    console.error('Error fetching user lists:', error);
+  }
+}
+onMounted(async () => {
+  await getLists();
+});
+/**
+ * Updates the lists based on the action to add or remove object IDs.
+ * @param {Array} userLists - Array of list objects.
+ * @param {Array} objectIds - Array of IDs to add or remove.
+ * @param {number|null} specificListId - Specific list ID for targeted addition/removal, null for all lists.
+ * @param {boolean} isAdding - Determines whether to add or remove the objectIds.
+ */
+const updateLists = async (userLists, objectIds, specificListId, isAdding) => {
+  const updates = [];
+
+  for (const list of userLists) {
+    // Initialize object_ids as an empty array if it's null
+    if (!list.object_ids) {
+      list.object_ids = [];
+    }
+
+    // When removing from all lists or a specific list, or adding to a specific list
+    if (specificListId === null || list.id === specificListId) {
+      let updated = false;
+      for (const objectId of objectIds) {
+        const index = list.object_ids.indexOf(objectId);
+
+        if (isAdding) {
+          // Add only if the object ID is not already in the list
+          if (index === -1) {
+            list.object_ids.push(objectId);
+            updated = true;
+          }
+        } else {
+          // Remove if the object ID is in the list
+          if (index !== -1) {
+            list.object_ids.splice(index, 1);
+            updated = true;
+          }
+        }
+      }
+
+      // If there are changes, add the update promise to the array
+      if (updated) {
+        updates.push(
+          axios.put(
+            `${import.meta.env.VITE_APP_API_BASE_URL}/lists/${list.id}`,
+            list,
+          ),
+        );
+      }
+
+      // If updating a specific list, break after processing it
+      if (specificListId !== null) {
+        break;
+      }
+    }
+  }
+
+  // Execute all update calls in parallel
+  try {
+    await Promise.all(updates);
+    $toasted.success('Lists updated successfully.');
+    await getLists();
+  } catch (error) {
+    console.error('Error updating lists:', error);
+  }
+};
+
+const getUser = (id: number) => {
+  return User.find(id);
+};
+
+const { createList } = useCreateList(getLists, props.modelType);
+
+const length = (array) => {
+  if (array) {
+    return array.length;
+  }
+  return 0;
+};
+</script>
diff --git a/src/pages/lists/Lists.vue b/src/pages/lists/Lists.vue
index f2113e42d..fbcc7c1eb 100644
--- a/src/pages/lists/Lists.vue
+++ b/src/pages/lists/Lists.vue
@@ -1,144 +1,184 @@
 <script setup lang="ts">
-import BaseSelect from '@/components/BaseSelect.vue';
-import AjaxTable from '@/components/AjaxTable.vue';
-import BaseInput from '@/components/BaseInput.vue';
 import BaseButton from '@/components/BaseButton.vue';
 import axios from 'axios';
-import { computed, ref } from 'vue';
-import { makeTableColumns } from '@/utils/table';
+import { computed, ref, onMounted } from 'vue';
 import BaseText from '@/components/BaseText.vue';
 import Incident from '@/models/Incident';
+import useCreateList from '@/hooks/lists/useCreateList';
+import { useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
 
-// Table columns setup
-const columns = makeTableColumns([
-  ['id', '10%', 'id'],
-  ['name', '15%', 'name'],
-  ['model', '40%', 'model'],
-  ['shared', '15%', 'shared'],
-  ['permissions', '20%', 'permissions'],
-]);
-
-// New list ref
-const newList = ref({
-  name: '',
-  description: '',
-  model: '',
-  shared: '',
-  permissions: '',
-  incident: undefined,
-});
-
-// Constants for select options
-const modelOptions = [
-  'worksite_worksites',
-  'user_users',
-  'organization_organizations',
-  'incident_incidents',
-  'file_files',
-  'list_lists',
-  'organization_organizations_incidents_teams',
-];
-
-const sharedOptions = [
-  'private',
-  'team',
-  'organization',
-  'groups_affiliates',
-  'all',
-  'public',
-];
-
-const permissionsOptions = [
-  'read_write_delete_copy',
-  'read_write_copy',
-  'read_copy',
-  'read_only',
-];
+interface List {
+  id: number;
+  name: string;
+  model: string;
+  object_ids: number[];
+}
 
 // API base URL
 const baseUrl = `${import.meta.env.VITE_APP_API_BASE_URL}/lists`;
+const lists = ref<List[]>([]);
 
 const incidents = computed(() =>
   Incident.query().orderBy('start_at', 'desc').get(),
 );
 
-// Submit function
-const submit = async () => {
-  await axios.post(baseUrl, newList.value);
-  newList.value = {
-    name: '',
-    description: '',
-    model: '',
-    shared: '',
-    permissions: '',
-    incident: undefined,
-  };
+const { t } = useI18n();
+const { createList } = useCreateList(getLists);
+const router = useRouter();
+
+const groupedLists = computed(() => {
+  return lists.value.reduce((acc, list) => {
+    if (!acc[list.model]) {
+      acc[list.model] = [];
+    }
+    acc[list.model].push(list);
+    return acc;
+  }, {});
+});
+
+const addNewList = async () => {
+  await createList();
+  await getLists();
+};
+
+const getListCategory = (model) => {
+  switch (model) {
+    case 'worksite_worksites': {
+      return t('~~Worksite Lists');
+    }
+    case 'user_users': {
+      return t('~~User Lists');
+    }
+    case 'organization_organizations': {
+      return t('~~Organization Lists');
+    }
+    case 'incident_incidents': {
+      return t('~~Incident Lists');
+    }
+    case 'file_files': {
+      return t('~~File Lists');
+    }
+    case 'list_lists': {
+      return t('~~List Lists');
+    }
+    case 'organization_organizations_incidents_teams': {
+      return t('~~Teams Lists');
+    }
+    default: {
+      return 'Unknown';
+    }
+  }
+};
+
+const getListItemName = (model) => {
+  switch (model) {
+    case 'worksite_worksites': {
+      return t('~~Worksite');
+    }
+    case 'user_users': {
+      return t('~~User');
+    }
+    case 'organization_organizations': {
+      return t('~~Organization');
+    }
+    case 'incident_incidents': {
+      return t('~~Incident');
+    }
+    case 'file_files': {
+      return t('~~File');
+    }
+    case 'list_lists': {
+      return t('~~List');
+    }
+    case 'organization_organizations_incidents_teams': {
+      return t('~~Team');
+    }
+    default: {
+      return 'Unknown';
+    }
+  }
+};
+
+const length = (array) => {
+  if (array) {
+    return array.length;
+  }
+  return 0;
 };
+
+async function getLists() {
+  const response = await axios.get(baseUrl);
+  lists.value = response.data.results;
+}
+
+const deleteList = async (listId) => {
+  await axios.delete(`${baseUrl}/${listId}`);
+  await getLists();
+};
+
+const printList = async (listId) => {
+  await axios.get(`${baseUrl}/${listId}/print`);
+};
+
+const shareList = async (listId) => {
+  await axios.get(`${baseUrl}/${listId}/share`);
+};
+
+const editList = async (listId) => {
+  await router.push(`/lists/${listId}`);
+};
+
+onMounted(async () => {
+  await getLists();
+});
 </script>
 
 <template>
-  <div class="max-w-4xl mx-auto p-3 rounded-lg">
-    <base-text variant="h1" class="mb-2">{{ $t('~~Add New List') }}</base-text>
-
-    <form class="space-y-6">
-      <BaseInput
-        v-model="newList.name"
-        label="Name"
-        placeholder="Enter name"
-        class=""
-        size="large"
-      />
-      <BaseInput
-        v-model="newList.description"
-        label="Description"
-        placeholder="Enter description"
-        class="focus:border-blue-500"
-        text-area
-        :rows="4"
-      />
-      <BaseSelect
-        v-model="newList.model"
-        :options="modelOptions"
-        label="Model"
-        placeholder="Select model"
-        class=""
-      />
-      <BaseSelect
-        v-model="newList.shared"
-        :options="sharedOptions"
-        label="Shared"
-        placeholder="Select sharing option"
-        class=""
-      />
-      <BaseSelect
-        v-model="newList.permissions"
-        :options="permissionsOptions"
-        label="Permissions"
-        placeholder="Select permissions"
-        class=""
-      />
-      <base-select
-        v-model="newList.incident"
-        data-testid="testIncidentSelect"
-        class="my-2"
-        :options="incidents"
-        searchable
-        item-key="id"
-        label="name"
-        :placeholder="$t('~~Select Incident')"
-      />
-      <BaseButton :action="submit" variant="solid" class="w-full p-3">
-        Submit
-      </BaseButton>
-    </form>
-    <AjaxTable
-      :columns="columns"
-      :url="baseUrl"
-      class="mt-10"
-      @row-click="
-        (payload: Record<string, any>) => $router.push(`/lists/${payload.id}`)
-      "
-    />
+  <div class="mx-auto p-3 rounded-lg">
+    <div class="flex justify-end">
+      <base-button variant="solid" class="p-1" :action="addNewList" icon="plus"
+        >{{ $t('~~Add New List') }}
+      </base-button>
+    </div>
+    <base-text variant="h1" class="my-3">{{ $t('~~My Lists') }}</base-text>
+    <div v-for="model in Object.keys(groupedLists)" :key="model">
+      <div class="text-xl font-bold mt-6">{{ getListCategory(model) }}</div>
+      <div
+        v-for="list in groupedLists[model]"
+        :key="list.id"
+        class="flex my-2 gap-1"
+      >
+        <div class="w-56">{{ list.name }}</div>
+        <div class="w-56">
+          {{ length(list.object_ids) }} {{ getListItemName(model) }}
+        </div>
+        <base-button
+          :action="() => printList(list.id)"
+          class="w-20 bg-crisiscleanup-dark-100"
+        >
+          {{ $t('~~Print') }}
+        </base-button>
+        <base-button
+          :action="() => shareList(list.id)"
+          class="w-20 bg-crisiscleanup-dark-100"
+        >
+          {{ $t('~~Share') }}
+        </base-button>
+        <base-button
+          :action="() => editList(list.id)"
+          class="w-20 bg-crisiscleanup-dark-100"
+        >
+          {{ $t('~~Edit') }}
+        </base-button>
+        <base-button
+          class="w-20 bg-crisiscleanup-dark-100"
+          :action="() => deleteList(list.id)"
+        >
+          {{ $t('~~Delete') }}
+        </base-button>
+      </div>
+    </div>
   </div>
 </template>
 
diff --git a/src/pages/lists/NewListForm.vue b/src/pages/lists/NewListForm.vue
new file mode 100644
index 000000000..6f7dddad3
--- /dev/null
+++ b/src/pages/lists/NewListForm.vue
@@ -0,0 +1,114 @@
+<template>
+  <div class="flex flex-col gap-3">
+    <BaseInput v-model="newList.name" label="Name" placeholder="Enter name" />
+    <BaseInput
+      v-model="newList.description"
+      label="Description"
+      placeholder="Enter description"
+      text-area
+      :rows="4"
+    />
+    <BaseSelect
+      v-model="newList.model"
+      :options="modelOptions"
+      label="Model"
+      placeholder="Select model"
+      :model-value="model"
+      :disabled="model"
+    />
+    <BaseSelect
+      v-model="newList.shared"
+      :options="sharedOptions"
+      label="Shared"
+      placeholder="Select sharing option"
+    />
+    <BaseSelect
+      v-model="newList.permissions"
+      :options="permissionsOptions"
+      label="Permissions"
+      placeholder="Select permissions"
+    />
+    <base-checkbox
+      :model-value="newList.incident === currentIncidentId"
+      @update:model-value="
+        newList.incident = $event ? currentIncidentId : undefined
+      "
+    >
+      {{ $t('~~Use Current Incident') }}
+    </base-checkbox>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import BaseInput from '@/components/BaseInput.vue';
+import BaseSelect from '@/components/BaseSelect.vue';
+import Incident from '@/models/Incident';
+import BaseCheckbox from '@/components/BaseCheckbox.vue';
+import { useCurrentIncident } from '@/hooks';
+
+interface NewList {
+  name: string;
+  description: string;
+  model: string;
+  shared: string;
+  permissions: string;
+  incident: number | undefined;
+}
+const { currentIncidentId } = useCurrentIncident();
+
+const emit = defineEmits(['onNewList']);
+
+const props = defineProps({
+  model: String,
+});
+
+const newList = ref<NewList>({
+  name: '',
+  description: '',
+  model: '',
+  shared: '',
+  permissions: '',
+  incident: undefined,
+});
+
+const modelOptions = [
+  'worksite_worksites',
+  'user_users',
+  'organization_organizations',
+  'incident_incidents',
+  'file_files',
+  'list_lists',
+  'organization_organizations_incidents_teams',
+];
+
+const sharedOptions = [
+  'private',
+  'team',
+  'organization',
+  'groups_affiliates',
+  'all',
+  'public',
+];
+
+const permissionsOptions = [
+  'read_write_delete_copy',
+  'read_write_copy',
+  'read_copy',
+  'read_only',
+];
+
+const incidents = Incident.query().orderBy('start_at', 'desc').get();
+
+// Emit new onNewList when any item in the list changes deep
+watch(
+  newList,
+  () => {
+    emit('onNewList', JSON.parse(JSON.stringify(newList.value)));
+  },
+  {
+    deep: true,
+    immediate: true,
+  },
+);
+</script>