Merge branch 'release/0.4.0'

.dockerignore

@@ -0,0 +1,16 @@
+.git
+tmp
+!tmp/pids
+log
+public/assets
+public/packs
+.bundle
+
+db/*.sqlite3
+db/*.sqlite3-*
+
+storage
+config/master.key
+config/credentials/*.key
+
+node_modules

.github/workflows/fly.yml

@@ -0,0 +1,15 @@
+name: Fly Staging Deployment
+on:
+  push:
+    branches:
+      - develop
+env:
+  FLY_API_TOKEN: ${{ secrets.FLY_API_TOKEN }}
+jobs:
+  deploy:
+      name: Deploy app
+      runs-on: ubuntu-latest
+      steps:
+        - uses: actions/checkout@v3
+        - uses: superfly/flyctl-actions/setup-flyctl@master
+        - run: flyctl deploy --config fly.staging.toml --dockerfile Dockerfile.staging --remote-only

Dockerfile.staging

@@ -0,0 +1,97 @@
+# syntax = docker/dockerfile:experimental
+ARG RUBY_VERSION=2.7.3
+ARG VARIANT=jemalloc-slim
+FROM quay.io/evl.ms/fullstaq-ruby:${RUBY_VERSION}-${VARIANT} as base
+
+ARG NODE_VERSION=16
+ARG BUNDLER_VERSION=2.3.9
+
+ARG RAILS_ENV=production
+ENV RAILS_ENV=${RAILS_ENV}
+
+ENV RAILS_SERVE_STATIC_FILES true
+ENV RAILS_LOG_TO_STDOUT true
+
+ARG BUNDLE_WITHOUT=development:test
+ARG BUNDLE_PATH=vendor/bundle
+ENV BUNDLE_PATH ${BUNDLE_PATH}
+ENV BUNDLE_WITHOUT ${BUNDLE_WITHOUT}
+
+RUN mkdir /app
+WORKDIR /app
+RUN mkdir -p tmp/pids
+
+SHELL ["/bin/bash", "-c"]
+
+RUN curl https://get.volta.sh | bash
+
+ENV BASH_ENV ~/.bashrc
+ENV VOLTA_HOME /root/.volta
+ENV PATH $VOLTA_HOME/bin:/usr/local/bin:$PATH
+
+RUN volta install node@${NODE_VERSION} && volta install yarn
+
+FROM base as build_deps
+
+ARG DEV_PACKAGES="git build-essential libpq-dev wget vim curl gzip xz-utils libsqlite3-dev"
+ENV DEV_PACKAGES ${DEV_PACKAGES}
+
+RUN --mount=type=cache,id=dev-apt-cache,sharing=locked,target=/var/cache/apt \
+    --mount=type=cache,id=dev-apt-lib,sharing=locked,target=/var/lib/apt \
+    apt-get update -qq && \
+    apt-get install --no-install-recommends -y ${DEV_PACKAGES} \
+    && rm -rf /var/lib/apt/lists /var/cache/apt/archives
+
+FROM build_deps as gems
+
+RUN gem update --system --no-document && \
+    gem install -N bundler -v ${BUNDLER_VERSION}
+
+COPY Gemfile* ./
+RUN bundle install &&  rm -rf vendor/bundle/ruby/*/cache
+
+FROM build_deps as node_modules
+
+COPY package*json ./
+COPY yarn.* ./
+
+RUN yarn install
+
+FROM base
+
+ARG PROD_PACKAGES="postgresql-client file vim curl gzip libsqlite3-0"
+ENV PROD_PACKAGES=${PROD_PACKAGES}
+
+RUN --mount=type=cache,id=prod-apt-cache,sharing=locked,target=/var/cache/apt \
+    --mount=type=cache,id=prod-apt-lib,sharing=locked,target=/var/lib/apt \
+    apt-get update -qq && \
+    apt-get install --no-install-recommends -y \
+    ${PROD_PACKAGES} \
+    && rm -rf /var/lib/apt/lists /var/cache/apt/archives
+
+COPY --from=gems /app /app
+COPY --from=node_modules /app/node_modules /app/node_modules
+COPY --from=gems /usr/lib/fullstaq-ruby/versions /usr/lib/fullstaq-ruby/versions
+COPY --from=gems /usr/local/bundle /usr/local/bundle
+
+# The following enable assets to precompile on the build server.  Adjust
+# as necessary.  If no combination works for you, see:
+# https://fly.io/docs/rails/getting-started/existing/#access-to-environment-variables-at-build-time
+ENV SECRET_KEY_BASE 1
+# ENV AWS_ACCESS_KEY_ID=1
+# ENV AWS_SECRET_ACCESS_KEY=1
+ENV APP_BASE_URL = "https://miru-staging.fly.dev"
+
+COPY . .
+
+RUN chmod +x /app/bin/* && \
+    sed -i 's/ruby.exe/ruby/' /app/bin/* && \
+    sed -i '/^#!/aDir.chdir File.expand_path("..", __dir__)' /app/bin/*
+
+RUN bin/rails fly:build
+
+ENV PORT 8080
+
+ARG SERVER_COMMAND="bin/rails fly:server"
+ENV SERVER_COMMAND ${SERVER_COMMAND}
+CMD ${SERVER_COMMAND}

app/javascript/src/common/CustomDatePicker/index.tsx

@@ -5,7 +5,7 @@ import { CaretCircleLeft, CaretCircleRight } from "phosphor-react";
 import DatePicker from "react-datepicker";
 import "react-datepicker/dist/react-datepicker.css";
 
-const CustomDatePicker = ({ handleChange, dueDate }) => {
+const CustomDatePicker = ({ handleChange, date }) => {
   const range = (start, end) => {
     const ans = [];
     for (let i = start; i <= end; i++) {
@@ -34,7 +34,7 @@ const CustomDatePicker = ({ handleChange, dueDate }) => {
       wrapperClassName="datePicker absolute"
       inline
       calendarClassName="miru-calendar"
-      selected={Date.parse(dueDate)}
+      selected={date}
       renderCustomHeader={({
         date,
         changeYear,

app/javascript/src/components/Invoices/Edit/InvoiceTable.tsx

@@ -1,37 +1,115 @@
-import React, { useState, useRef } from "react";
+import React, { useState, useEffect, useRef } from "react";
 
+import dayjs from "dayjs";
+
+import generateInvoice from "apis/generateInvoice";
 import useOutsideClick from "helpers/outsideClick";
 
 import NewLineItemTable from "./NewLineItemTable";
 
 import TableHeader from "../common/LineItemTableHeader";
 import NewLineItemRow from "../common/NewLineItemRow";
 import ManualEntry from "../Generate/ManualEntry";
+import MultipleEntriesModal from "../MultipleEntriesModal";
 
 const InvoiceTable = ({
   currency,
+  selectedClient,
   lineItems,
-  selectedLineItems,
   setLineItems,
+  selectedLineItems,
   setSelectedLineItems,
   manualEntryArr,
   setManualEntryArr
 }) => {
   const [addNew, setAddNew] = useState<boolean>(false);
+  const [showItemInputs, setShowItemInputs] = useState<boolean>(false);
+  const [totalLineItems, setTotalLineItems] = useState<number>(null);
+  const [pageNumber, setPageNumber] = useState<number>(1);
+  const [showMultiLineItemModal, setMultiLineItemModal] = useState<boolean>(false);
+  const [addManualLineItem, setAddManualLineItem] = useState<boolean>(false);
+
+  const fetchNewLineItems = async (
+    selectedClient,
+    setLineItems,
+    lineItems,
+    setTotalLineItems,
+    pageNumber,
+    setPageNumber,
+    selectedEntries = [],
+  ) => {
+
+    if (selectedClient) {
+      let selectedEntriesString = "";
+      selectedEntries.forEach((entries) => {
+        if (!entries._destroy)
+          selectedEntriesString += `&selected_entries[]=${entries.timesheet_entry_id}`;
+      });
+
+      await generateInvoice.getLineItems(selectedClient.value, pageNumber, selectedEntriesString).then(async res => {
+        await setTotalLineItems(res.data.pagy.count);
+        await setPageNumber(pageNumber + 1);
+        const mergedItems = [...res.data.new_line_item_entries, ...lineItems];
+        const sortedData = mergedItems.sort((item1, item2) => dayjs(item1.date).isAfter(dayjs(item2.date)) ? 1 : -1);
+        setLineItems(sortedData);
+      });
+    }
+  };
+
+  useEffect(() => {
+    if (addManualLineItem) return setAddManualLineItem(false);
+
+    if (addNew) {
+      fetchNewLineItems(
+        selectedClient,
+        setLineItems,
+        lineItems,
+        setTotalLineItems,
+        pageNumber,
+        setPageNumber,
+        selectedLineItems
+      );
+    }
+  }, [addNew]);
 
   const wrapperRef = useRef(null);
 
+  const loadMoreItems = () => {
+    fetchNewLineItems(
+      selectedClient,
+      setLineItems,
+      lineItems,
+      setTotalLineItems,
+      pageNumber,
+      setPageNumber,
+      selectedLineItems
+    );
+  };
+
+  useOutsideClick(wrapperRef, () => {
+    setAddNew(false);
+    setPageNumber(1);
+    setLineItems([]);
+  }, addNew);
+
   const getNewLineItemDropdown = () => {
     if (lineItems) {
       return <NewLineItemTable
+        setShowItemInputs={setShowItemInputs}
+        addNew={addNew}
+        setAddNew={setAddNew}
         lineItems={lineItems}
         setLineItems={setLineItems}
+        loadMoreItems={loadMoreItems}
+        totalLineItems={totalLineItems}
+        pageNumber={pageNumber}
+        setPageNumber={setPageNumber}
         selectedLineItems={selectedLineItems}
         setSelectedLineItems={setSelectedLineItems}
-        addNew={addNew}
-        setAddNew={setAddNew}
         manualEntryArr={manualEntryArr}
         setManualEntryArr={setManualEntryArr}
+        setMultiLineItemModal={setMultiLineItemModal}
+        setAddManualLineItem={setAddManualLineItem}
       />;
     }
     return (
@@ -57,10 +135,6 @@ const InvoiceTable = ({
     }
   };
 
-  useOutsideClick(wrapperRef, () => {
-    setAddNew(false);
-  }, addNew);
-
   return (
     <React.Fragment>
       <table className="w-full table-fixed">
@@ -71,29 +145,39 @@ const InvoiceTable = ({
               {getAddNewButton()}
             </td>
           </tr>
-          {manualEntryArr.map((entry) =>
-            <ManualEntry
-              entry={entry}
-              manualEntryArr={manualEntryArr}
-              setManualEntryArr={setManualEntryArr}
-            />
-          )}
           {
-            selectedLineItems.map((item, index) => (
-              item._destroy ? (
-                <></>
-              ) : (
-                <NewLineItemRow
-                  currency={currency}
-                  item={item}
-                  selectedOption={selectedLineItems}
-                  setSelectedOption={setSelectedLineItems}
-                  key={index}
-                />
-              )
-            ))}
+            showItemInputs
+            && (manualEntryArr.map((entry) =>
+              <ManualEntry
+                entry={entry}
+                manualEntryArr={manualEntryArr}
+                setManualEntryArr={setManualEntryArr}
+              />
+            ))
+          }
+          {
+            selectedLineItems.length > 0
+            && selectedLineItems.map((item, index) => (
+              !item._destroy &&
+              <NewLineItemRow
+                key={index}
+                currency={currency}
+                item={item}
+                selectedOption={selectedLineItems}
+                setSelectedOption={setSelectedLineItems}
+              />
+            ))
+          }
         </tbody>
       </table>
+      <div>
+        {showMultiLineItemModal && <MultipleEntriesModal
+          selectedClient={selectedClient}
+          selectedOption={selectedLineItems.filter(item => !item._destroy)}
+          setSelectedOption={setSelectedLineItems}
+          setMultiLineItemModal={setMultiLineItemModal}
+        />}
+      </div>
     </React.Fragment>
   );
 };